Flutter Implicit Animations

implicit_animations.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Implicit Animations Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const ImplicitAnimationsPage(),
    );
  }
}

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

  @override
  State<ImplicitAnimationsPage> createState() => _ImplicitAnimationsPageState();
}

class _ImplicitAnimationsPageState extends State<ImplicitAnimationsPage> {
  bool _isContainerLarge = true;

  Widget returnAnimatedContainer() {
    return AnimatedContainer(
      duration: const Duration(seconds: 1),
      width: _isContainerLarge ? 100.0 : 160.0,
      height: _isContainerLarge ? 160.0 : 100.0,
      color: _isContainerLarge ? Colors.blue : Colors.red,
      curve: Curves.easeIn,
      child: Center(
        child: Text(
          "Edenred",
          style: TextStyle(
            color: Colors.white,
            fontSize: _isContainerLarge ? 16 : 24,
          ),
        ),
      ),
    );
  }

  bool _isAlignedLeft = true;

  Widget getAnimatedAlignWidget() {
    return AnimatedAlign(
      alignment: _isAlignedLeft ? Alignment.topLeft : Alignment.bottomRight,
      duration: const Duration(seconds: 1),
      child: Container(
        width: 50,
        height: 50,
        color: Colors.purple,
        child: const Center(
          child: Text('Move', style: TextStyle(color: Colors.white)),
        ),
      ),
    );
  }

  double _opacityLevel = 1.0;
  bool _isFirstVisible = true;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Implicit Animations Demo')),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const SizedBox(height: 150),
              const Text('AnimatedContainer', style: TextStyle(fontSize: 20)),
              returnAnimatedContainer(),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isContainerLarge = !_isContainerLarge;
                  });
                },
                child: const Text('Toggle Container Size'),
              ),
              const SizedBox(height: 220),
              const Text('AnimatedOpacity', style: TextStyle(fontSize: 20)),
              AnimatedOpacity(
                opacity: _opacityLevel,
                duration: const Duration(seconds: 1),
                child: Container(
                  width: 100,
                  height: 100,
                  color: Colors.green,
                  child: const Center(
                    child: Text(
                      'Fade me',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _opacityLevel = _opacityLevel == 1.0 ? 0.0 : 1.0;
                  });
                },
                child: const Text('Toggle Opacity'),
              ),

              const SizedBox(height: 150),
              const Text('AnimatedAlign', style: TextStyle(fontSize: 20)),
              Container(
                width: 200,
                height: 100,
                color: Colors.grey[200],
                child: getAnimatedAlignWidget(),
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isAlignedLeft = !_isAlignedLeft;
                  });
                },
                child: const Text('Toggle Alignment'),
              ),

              const SizedBox(height: 150),
              const SizedBox(height: 20),
              const Text('AnimatedCrossFade', style: TextStyle(fontSize: 20)),
              AnimatedCrossFade(
                duration: const Duration(seconds: 1),
                firstChild: Container(
                  width: 100,
                  height: 100,
                  color: Colors.orange,
                  child: const Center(
                    child: Text('1', style: TextStyle(color: Colors.white)),
                  ),
                ),
                secondChild: CircleAvatar(
                  radius: 50,
                  backgroundColor: Colors.brown.shade800,
                  child: const Center(
                    child: Text('2', style: TextStyle(color: Colors.white)),
                  ),
                ),
                crossFadeState: _isFirstVisible
                    ? CrossFadeState.showFirst
                    : CrossFadeState.showSecond,
                firstCurve: Curves.easeInOut,
                secondCurve: Curves.easeInOut,
                sizeCurve: Curves.easeInOut,
              ),
              ElevatedButton(
                onPressed: () {
                  setState(() {
                    _isFirstVisible = !_isFirstVisible;
                  });
                },
                child: const Text('Cross Fade'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}