简体   繁体   中英

How to control the height and width of widget during flutter hero transition?

i want to specify height and width of a flightShuttleBuilder in flutter hero transition.

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',
        ),
      ),
    );
  }
}

Wrap your Container with an UnconstrainedBox widget. So it becomes:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM