How to make a simple circle scale animation to go beyond the typical static launch screen in flutter?

Question

Hi I want to create an animation like the uber animation (Video url). Will redirect to youtube

What I have tried.

1. Animated Container
2. Animated Size
3. Scale Animation
4. Animation Builder
5. Overlay Entry

I all cases I tried giving the upper bound of the radius too high to fit to the screen, but the max radius was only the half of the device width. Here is the output

In case any code is need please comment.

Answer 1

I make an Example .. this is work .

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: SafeArea(
          child: FirstScreen()
        ),
      ),
    );
  }
}

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {

  bool start = false;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(milliseconds: 200)).then((value) {
      setState(() {
        start = true;
      });
      Future.delayed(Duration(milliseconds: 700)).then((value) {
        Navigator.push(context, ScaleRoute(page: (RedPage())));
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Center(child:
    OverflowBox(
      maxHeight: MediaQuery.of(context).size.longestSide * 2,
      maxWidth: MediaQuery.of(context).size.longestSide * 2,
      child: AnimatedContainer(
        curve: Curves.easeIn,
        duration: Duration(milliseconds: 700),
        width: start ? MediaQuery.of(context).size.longestSide * 2 : 0,
        height: start ? MediaQuery.of(context).size.longestSide * 2 : 0,
        decoration: BoxDecoration(
            color: /*start ?*/ Colors.red /*: Colors.black */,
            shape: BoxShape.circle
        ),
        child: Center(child: Text("uber")),
      ),
    ));
  }
}

class RedPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(color: Colors.red,child: Center(child: Text("I am RedPage",style: TextStyle(color: Colors.black),)),);
  }
}

class ScaleRoute extends PageRouteBuilder {
  final Widget page;
  ScaleRoute({this.page})
      : super(
    pageBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        ) =>
    page,
    transitionsBuilder: (
        BuildContext context,
        Animation<double> animation,
        Animation<double> secondaryAnimation,
        Widget child,
        ) {
      return ScaleTransition(
          scale: Tween<double>(
            begin: 0.0,
            end: 1.0,
          ).animate(
            CurvedAnimation(
              parent: animation,
              curve: Curves.fastOutSlowIn,
            ),
          ),
          child: child,
        );
    },
  );
}

How it Work

I add an overflowBox Because we want to create a big circle .. bigger than screen ... so we should use it. Animated Container for Creating a Animated Circle ... And this Animation start 200 millisecond after widget shows (init state) and 700 millisecond later we change the page (Navigator)

 Future.delayed(Duration(milliseconds: 200)).then((value) {
  setState(() {
    start = true;
  });
  Future.delayed(Duration(milliseconds: 700)).then((value) {
    Navigator.push(context, ScaleRoute(page: (RedPage())));
  });
});

and ScaleRoute class for changing page with Animation For more information about Animation Transition you can read this beautiful article https://medium.com/flutter-community/everything-you-need-to-know-about-flutter-page-route-transition-9ef5c1b32823