Flutter open dialog with animation

user_7942118 0
Viewed 308

I'm developing a mobile application and I want to improve the user experience with some cool animations for a dialog box and I don't want just to use a simple pop-up dialog.

Basically the result that I want I something like that:

Dialog Box with animation

I searched online and I found a similar problem: Animation with hero and showDialog in flutter.

I tried to develop somethings and this is the results:

My dialog box

I'm not getting how to reproduce the things in the container. Maybe in the correct animation (first image) they putted an invisible small dialog box that once the button is pressed it appears with the animation?

Where should I enter the information for the box dialog?

This is the code that I used:

Stack(
      children: [
        Positioned(
          child: GoogleMap(
            initialCameraPosition: CameraPosition(
              target: LatLng(10, 10),
            ),
          ),
        ),
        Positioned(
          child: Container(
            height: 100,
            width: w,
            color: Colors.white,
          ),
        ),
        Positioned(
          child: Padding(
            padding: const EdgeInsets.only(top: 50),
            child: Align(
              alignment: Alignment.topCenter,
              child: GestureDetector(
                child: AnimatedContainer(
                  height: _h,
                  width: _w,
                  color: Colors.lightGreen,
                  duration: Duration(seconds: 1),
                  child: Center(
                    child: Text(
                      'Title',
                    ),
                  ),
                ),
                onTap: () {
                  setState(() {
                    _h = 200;
                    _w = w * 0.9;
                  });
                },
              ),
            ),
          ),
        ),
      ],
    ),
flutter animation ios
2 Answers
user_159749270

Using ScaleTransition on showDialog's builder can have similar effect.

The builder will return a StatefulWidget

 @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: animation,
      alignment: Alignment.topLeft, // use different alignment
      child: const AlertDialog(
        backgroundColor: Colors.cyanAccent,
        title: Text("title"),
      ),
    );
  }

And it will be used like

showDialog(
  context: context,
  builder: (context) => CustomAlertDialog(),
);

Test Widget:

class CustomAlertDialog extends StatefulWidget {
  const CustomAlertDialog({Key? key}) : super(key: key);

  @override
  _CustomAlertDialogState createState() => _CustomAlertDialogState();
}

class _CustomAlertDialogState extends State<CustomAlertDialog>
    with SingleTickerProviderStateMixin {
  late AnimationController controller;
  late Animation<double> animation;

  @override
  void initState() {
    super.initState();
    _initScaleAnimation();
  }

  _initScaleAnimation() {
    controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 1),
    )..addListener(() => setState(() {}));

    animation = Tween<double>(begin: 0, end: 1.0).animate(controller);

    controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(
      scale: animation,
      alignment: Alignment.topLeft, // use different alignment
      child: const AlertDialog(
        backgroundColor: Colors.cyanAccent,
        title: Text("title"),
      ),
    );
  }
}
user_101571270
Related