AnimatedCrossFade size transition demo

readme.md

AnimatedCrossFade size transition demo

This is an illustration of issue #127780.

main.dart

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'AnimatedCrossFade demo',
      home: DemoPage(),
    );
  }
}

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  var _state = CrossFadeState.showFirst;

  static const _duration = Duration(milliseconds: 300);
  static const _reverseDuration = Duration(seconds: 2);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('AnimatedCrossFade demo'),
      ),
      body: Container(
        padding: const EdgeInsets.all(20.0),
        alignment: Alignment.center,
        child: Column(
          children: [
            Text(switch (_state) {
              CrossFadeState.showFirst => 'Showing first child',
              CrossFadeState.showSecond => 'Showing second child',
            }),
            const SizedBox(height: 8.0),
            switch (_state) {
              CrossFadeState.showFirst => FilledButton(
                  onPressed: () =>
                      setState(() => _state = CrossFadeState.showSecond),
                  child: const Text('Animate forward (quick)'),
                ),
              CrossFadeState.showSecond => FilledButton(
                  onPressed: () =>
                      setState(() => _state = CrossFadeState.showFirst),
                  child: const Text('Animate backwards (slow)'),
                ),
            },
            Expanded(
              child: Center(
                child: DecoratedBox(
                  decoration: BoxDecoration(
                    border: Border.all(
                      width: 2.0,
                      strokeAlign: BorderSide.strokeAlignOutside,
                    ),
                  ),
                  child: AnimatedCrossFade(
                    crossFadeState: _state,
                    duration: _duration,
                    reverseDuration: _reverseDuration,
                    firstChild: const Padding(
                      padding: EdgeInsets.all(12.0),
                      child: Text(
                        'This is the\nfirst child',
                        textAlign: TextAlign.center,
                      ),
                    ),
                    secondChild: const Padding(
                      padding: EdgeInsets.all(4.0),
                      child:  Text(
                      'Second child',
                      textAlign: TextAlign.center,
                    ),),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}