Home » Show Dialog with Animation Flutter

Show Dialog with Animation Flutter

Show Dialog with Animation Flutter – With the showDialog function provided by the Flutter framework, you may create a dialog with animations. A BuildContext object and a builder function are mandatory parameters for this method.

The dialog’s container widget, an AnimatedContainer, should be created in the builder function so that it can be animated. Within a given interval of time, the AnimatedContainer widget allows you to animate modifications to its properties. Animated conversations can be created with the help of Flutter’s many available animation features.

These properties are frequently used Dialog with Animation Flutter

  1. AnimationController: The animation is controlled by this primary controller, which is called an AnimationController. The time of the animation, whether or not it loops, and other parameters may all be set.
  2. Tween: It is here that the animation’s beginning and finish points are set. Use it to set a range of values within which the animation will smoothly transition.
  3. CurvedAnimation: This is where you may define the shape of the animation’s curve. Many predefined curves are available, including the ease-in/ease-out, linear, and bouncy varieties.
  4. AnimatedBuilder: If the animation state changes, this widget will construct its offspring accordingly. This is helpful if you want the dialog’s UI to change in real time with the animation.
  5. SlideTransition: This widget lets you smoothly transition an existing widget to a new spot. It may be used to make animations where dialogue boxes glide up and down.
  6. ScaleTransition: Here’s a widget that lets you smoothly animate between different sizes. It can be used to make zoom-in and zoom-out animations for usage in conversati
  7. OpacityTransition: This widget lets you smoothly transition between several opacity levels. With it, you may make transitions between dialogue boxes that fade in and out.
See also  How to Wrap Text in Column Flutter

In addition to the ones mentioned above, there are several other properties and widgets that can be utilized to meet your specific needs.

Example Code Show Dialog with Animation Flutter

Show Dialog bottom with Animation Flutter

import 'dart:async';
import 'package:flutter/material.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'flutterflux.com', home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Row(children: [
            Image.asset(
              'assets/logo.png',
              height: 30,
            ),
            Text('flutterflux.com')
          ]),
        ),
        bottomNavigationBar: Container(height: 60),
        body: Center(
            child: ElevatedButton(
          child: Text('Show Me'),
          onPressed: () {
            showDialog(
              context: context,
              builder: (_) => MyDialog(),
            );
          },
        )));
  }
}

class MyDialog extends StatefulWidget {
  @override
  _MyDialogState createState() => _MyDialogState();
}

class _MyDialogState extends State
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: Container(
        height: 200,
        width: 200,
        child: ScaleTransition(
          scale: _animation,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello, World!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => Navigator.of(context).pop(),
                child: Text('Close'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Show Dialog at bottom of screen Flutter

Flutter showDialog() function may be used to show a dialog at the bottom of the screen; the AlertDialog widget can be styled by enclosing it in a Container. 
An example of how to display a dialogue box at the bottom of the screen using Flutter is shown below.

Example Code Show Dialog bottom of screen

Show Dialog with Animation Flutter

import 'dart:async';
import 'package:flutter/material.dart';

Future main() async {
  WidgetsFlutterBinding.ensureInitialized();

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(title: 'flutterflux.com', home: MyHomePage());
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Row(children: [
            Image.asset(
              'assets/logo.png',
              height: 30,
            ),
            Text('flutterflux.com')
          ]),
        ),
        bottomNavigationBar: Container(height: 60),
        body: Center(
            child: ElevatedButton(
          child: Text('Show Me'),
          onPressed: () {
            showDialog(
                context: context,
                builder: (_) => Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      height: 200.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          topLeft: const Radius.circular(10.0),
                          topRight: const Radius.circular(10.0),
                        ),
                      ),
                      child: MyDialog(),
                    )));
          },
        )));
  }
}

class MyDialog extends StatefulWidget {
  @override
  _MyDialogState createState() => _MyDialogState();
}

class _MyDialogState extends State
    with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      vsync: this,
      duration: Duration(milliseconds: 500),
    );
    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeInOut);
    _controller.forward();
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Dialog(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(16),
      ),
      child: Container(
        height: 200,
        width: 200,
        child: ScaleTransition(
          scale: _animation,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                'Hello, World!',
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 20),
              ElevatedButton(
                onPressed: () => Navigator.of(context).pop(),
                child: Text('Close'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Conclusion

To distinguish your app distinct from the competition, you can design engaging and novel user experiences. 
With the power of Flutter and a firm grasp of animation principles, you can make animations that not only look good but also enhance the app’s usability and functionality.

About The Author

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top