flutter hero 过渡期间如何控制小部件的高度和宽度？

Question

我想在颤动英雄转换中指定flightShuttleBuilder 的高度和宽度。

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    timeDilation = 5;
    return MaterialApp(
      home: Screen1(),
    );
  }
}

class Screen1 extends StatelessWidget {
  const Screen1({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'icon',
          flightShuttleBuilder: (
            BuildContext flightContext,
            Animation<double> animation,
            HeroFlightDirection flightDirection,
            BuildContext fromHeroContext,
            BuildContext toHeroContext,
          ) {
            return AnimatedBuilder(
              animation: animation,
              builder: (context, child) {
                return Container(
                  height: 200, // not working
                  width: 200,
                  decoration: BoxDecoration(
                    color: Colors.green,
                  ),
                );
              },
            );
          },
          transitionOnUserGestures: true,
          child: IconButton(
            icon: Icon(
              Icons.ad_units,
              size: 50,
            ),
            onPressed: () {
              Navigator.of(context)
                  .push(MaterialPageRoute(builder: (context) => Screen2()));
            },
          ),
        ),
      ),
    );
  }
}

class Screen2 extends StatelessWidget {
  const Screen2({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        alignment: Alignment.bottomCenter,
        child: Hero(
          child: Icon(
            Icons.ad_units,
            size: 100,
          ),
          tag: 'icon',
        ),
      ),
    );
  }
}

Answer 1

用UnconstrainedBox 小部件包裹您的Container。 于是就变成了：

return UnconstrainedBox( // <--- add this widget here.
  child: Container(
    height: 200,
    width: 200,
    decoration: BoxDecoration(
      color: Colors.green,
    ),
  ),
);