CupertinoFullscreenDialogTransition Widget – Flutter Widget Guide By Flutter Agency

· 3 min read
CupertinoFullScreenDialogTransition Widget - Flutter widget Guide By Flutter Agency
CupertinoFullScreenDialogTransition Widget - Flutter widget Guide By Flutter Agency

Cupertino is a set of flutter widget helpful in implementing a current iOS design. Earlier we have discussed  CupertinoActionSheet Widget in detail so now in this article we will discuss CupertinoFullscreenDialogTransition Widget.

What is CupertinoFullscreenDialogTransition Widget?

CupertinoFullscreenDialogTransition Widget is an iOS-style transition used for summoning fullscreen dialogs.For example, used when creating a new calendar event by bringing in the next screen from the bottom.

Default Constructor for it will look like below:

CupertinoFullScreenTransitionWidget({
  Key key,
  @required Animation<double> primaryRouteAnimation,
  @required Animation<double> secondaryRouteAnimation,
  @required Widget child,
  @required bool linearTransition,
});

In the Above Constructor, all fields marked with @required must not be empty.

Properties:

  • Animation<double> primaryRouteAnimation: primaryRouteAnimation is a linear route animation from 0.0 to 1.0 when this screen is being pushed.
  • Animation<double> secondaryRouteAnimation: secondaryRouteAnimation is a linear route animation from 0.0 to 1.0 when another screen is being pushed on top of this one.
  • Widget child: The widget below this widget in the tree. It will have only one child. To use multiple child user needs to make use of Row Widget or Column Widget and wrap their children in it.
  • bool linearTransition: linear Transition is whether to perform the secondary transition linearly. Used to precisely trackback gesture drags.

How to use CupertinoFullscreenDialogTransition in Flutter?

The following code snippet tells us how to implement CupertinoFullscreenDialogTransition in Flutter.

Consider a code snippet like below where we have used a two RaisedButton Widget and set forward and reverse direction onPressed() of it.

initState() will look like below:

void initState() {
  _animationController = AnimationController(
    vsync: this,
    duration: Duration(milliseconds: 500),
  );
  super.initState();
}

Now a build Method will return Column Widget like below:

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        CupertinoFullscreenDialogTransition(
          primaryRouteAnimation: _animationController,
          secondaryRouteAnimation: _animationController,
          linearTransition: false,
          child: Center(
            child: Container(
              color: Colors.blueGrey,
              width: 300,
              height: 300,
            ),
          ),
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: <Widget>[
            RaisedButton(
              onPressed: () => _animationController.forward(),
              child: Text('Forward'),
            ),
            RaisedButton(
              onPressed: () => _animationController.reverse(),
              child: Text('Reverse'),
            ),
          ],
        ),
      ],
    );

We will get output like below:

CupertinoFullScreenDialogTransition Widget

CupertinoFullScreenDialogTransition Widget

Conclusion:

In this article, we have been through What is CupertinoFullscreenDialogTransition in Flutter along with how to implement it in a Flutter.

Thanks for reading !!!
Do let us know your valuable feedback to serve you better.

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply