How do I fade a widget in and out (including shrinking/expanding its size)?-CodePudding

There are lots of widgets like Visibility or AnimatedOpacity, but I want a widget to appear and grow to its full size with a smooth animation, moving the other Column's children around it apart.

AnimatedContainer would be cool, but I don't want to set the child's constraints (e.g. height) from the parent (then I would have to test and set the correct size on every UI change).

CodePudding user response：

Use Hero Animation check this link to learn:

https://docs.flutter.dev/development/ui/animations/hero-animations

Example :

  import 'package:flutter/material.dart';
  
  void main() => runApp(MyApp());
  
  class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return MaterialApp(
        initialRoute: '/first',
        routes: {
          '/first': (context) => FirstScreen(),
          '/second': (context) => SecondScreen(),
        },
      );
    }
  }
  
  class FirstScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text('First Screen'),
        ),
        body: Padding(
          padding: EdgeInsets.all(15),
          child: Column(
            children: [
              Hero(
                tag: "HeroOne",
                child: Icon(
                  Icons.image,
                  size: 50.0,
                ),
  
              ),
              ElevatedButton(
                child: Text('Go to second screen'),
                onPressed: () {
                  Navigator.push(context, CustomPageRoute(SecondScreen()));
                },
              ),
            ],
          ),
        ),
      );
    }
  }
  
  class SecondScreen extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text("Second Screen"),
        ),
        body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Hero(
                  tag: "HeroOne",
                  child: Icon(
                    Icons.image,
                    size: 150.0,
                  ),
                ),
                ElevatedButton(
                  child: Text('Back to first screen!'),
                  onPressed: () {
                    Navigator.pop(context);
                  },
                ),
              ],
            )
        ),
      );
    }
  }
  
  class CustomPageRoute<T> extends PageRoute<T> {
  
    final Widget child;
  
    CustomPageRoute(this.child);
  
    @override
    Color get barrierColor => Colors.black;
  
    @override
    String get barrierLabel => '';
  
    @override
    bool get maintainState => true;
  
    @override
    Duration get transitionDuration => Duration(seconds: 2);
  
    @override
    Widget buildPage({1}
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation
    ) {
      return FadeTransition(
        opacity: animation,
        child: child,
      );
    }
  }

For More Check :

https://www.woolha.com/tutorials/flutter-creating-hero-transition-examples

CodePudding user response：

While researching more for my own question, I found the AnimatedSize widget which does exactly what I need:

To dynamically show and hide a widget with a size animation, just wrap it in AnimatedSize() and give it a duration.

https://api.flutter.dev/flutter/widgets/AnimatedSize-class.html