Flutter Animations and Transitions

12. Flutter Animations and Transitions

Animations and transitions are powerful tools for creating engaging and visually appealing user interfaces in Flutter. In this comprehensive tutorial, we'll explore how to use animations and transitions to add motion and interactivity to your Flutter app.

1. Understanding Animations and Transitions

Animations:

Animations in Flutter involve changing a widget's properties over time. Flutter provides a wide range of animation options, including:

• Tween Animation: Animate a single value between two endpoints.
• Implicit Animation: Animate widget properties (e.g., opacity, size) implicitly using 'AnimatedContainer', 'AnimatedOpacity', etc.
• Custom Animation: Create custom animations using 'AnimationController', 'Tween', and 'AnimatedBuilder'.

Transitions:

Transitions involve animating the transition between two different widgets or screens. Some common types of transitions include:

• PageRouteBuilder: Create custom page transitions when navigating between screens.
• Hero Transition: Animate the transition of a widget from one screen to another using a shared 'Hero' widget.
• Slide Transition: Slide a widget onto or off the screen.

2. Tween Animation Example

Let's start with a simple Tween animation example that changes the opacity of a widget.

Step 1: Create a Flutter Project

flutter create animations_and_transitions_example

Step 2: Update'pubspec.yaml'

dependencies:
  flutter:
    sdk: flutter 

Then, run 'flutter pub get' to fetch the dependencies.

Step 3: Create a Tween Animation

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animations and Transitions Example',
      home: TweenAnimationExample(),
    );
  }
}

class TweenAnimationExample extends StatefulWidget {
  @override
  _TweenAnimationExampleState createState() => _TweenAnimationExampleState();
}

class _TweenAnimationExampleState extends State {
  double _opacity = 1.0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tween Animation Example'),
      ),
      body: Center(
        child: TweenAnimationBuilder(
          duration: Duration(seconds: 2),
          tween: Tween(begin: 1.0, end: _opacity),
          builder: (context, value, child) {
            return Opacity(
              opacity: value,
              child: Container(
                width: 200,
                height: 200,
                color: Colors.blue,
              ),
            );
          },
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          setState(() {
            _opacity = _opacity == 1.0 ? 0.0 : 1.0;
          });
        },
        child: Icon(Icons.play_arrow),
      ),
    );
  }
}

In this code, we create a 'TweenAnimationBuilder' widget that animates the opacity of a container from fully visible (1.0) to completely transparent (0.0). We use a 'FloatingActionButton' to trigger the animation.

Step 4: Run the App

Run your app using 'flutter run'. You should see a container that fades in and out when you press the play button.

3. PageRouteBuilder Transition Example

Next, let's explore a custom page transition using 'PageRouteBuilder'.

Step 5: Create a Page Transition

class PageTransitionExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Page Transition Example'),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.of(context).push(_customPageRoute());
          },
          child: Text('Go to Second Page'),
        ),
      ),
    );
  }

  PageRouteBuilder _customPageRoute() {
    return PageRouteBuilder(
      pageBuilder: (context, animation, secondaryAnimation) {
        return SecondPage();
      },
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        const begin = Offset(1.0, 0.0);
        const end = Offset.zero;
        const curve = Curves.easeInOut;
        var tween = Tween(begin: begin, end: end).chain(CurveTween(curve: curve));
        var offsetAnimation = animation.drive(tween);

        return SlideTransition(
          position: offsetAnimation,
          child: child,
        );
      },
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Text('This is the second page.'),
      ),
    );
  }
}

In this code, we define a custom page transition using 'PageRouteBuilder' and a 'SlideTransition'. When you press the button, it will slide to the second page with a custom transition.

Step 6: Run the App

Run your app using 'flutter run'. You should be able to navigate to the second page with a custom slide-in transition.

Conclusion:

In this Flutter animations and transitions tutorial, you've learned how to create animations and transitions using Tween animations and custom page transitions. Animations and transitions are powerful tools to enhance the user experience in your Flutter app by adding motion and interactivity. Explore more animation and transition options in Flutter's extensive documentation to create engaging and visually appealing interfaces for your app.