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:

I searched online and I found a similar problem:

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;
                  });
                },
              ),
            ),
          ),
        ),
      ],
    ),

CodePudding user response：

I would suggest you use the Container transform transition pattern from the official animations package https://pub.dev/packages/animations

Preview : https://github.com/flutter/packages/raw/master/packages/animations/example/demo_gifs/container_transform_lineup.gif

CodePudding user response：

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"),
      ),
    );
  }
}