CupertinoPageTransition Widget – Flutter Widget Guide By Flutter Agency

CupertinoPageTransition Widget – Flutter Widget Guide By Flutter Agency

Earlier, we have gone through CupertinoPageScaffold Widget Which is used to provides you the structure to your iOS application page layout, targeting your iOS design. So now in this article, we will be discussing CupertinoPageTransition Widget.

What is CupertinoPageTransition Widget?

CupertinoPageTransition Widget is a Provides an iOS-style page transition animation. The page slides in from the right and exits in reverse. It also shifts to the left in a parallax motion when another page enters to cover it.

The Default Constructor of it will look like below:

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

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

Properties:

• Key key: The widget key, used to control if it’s should be replaced.
• Widget Child: The widget below this widget in the tree. Child Property will have only one child. To allocate multiple children users need to make use of Row Widget or Column Widget and wrap the child in it.
• 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.
• bool linearTransition: linear transition is whether to perform the transitions linearly. Used to precisely trackback gesture drags.

How to use CupertinoPageTransition Widget in Flutter?

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

import 'package:flutter/material.dart';

class CupertinoPageTransitionWidget extends StatefulWidget {
  final String title;
  final String childPageTitle;
  CupertinoPageTransitionWidget({
    Key key,
    this.title,
    this.childPageTitle,
  }) : super(key: key);

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

class _CupertinoPageTransitionWidgetState
    extends State<CupertinoPageTransitionWidget> {
  @override
  Widget build(BuildContext context) {
    Widget button;

    if (widget.childPageTitle != null) {
      button = FloatingActionButton(
        onPressed: () => Navigator.of(context).push(
          MaterialPageRoute(
            builder: (context) => CupertinoPageTransitionWidget(
              title: widget.childPageTitle,
            ),
          ),
        ),
        child: Icon(
          Icons.navigate_next,
        ),
      );
    }
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Center(child: Text(widget.title)),
      floatingActionButton: button,
    );
  }
}

We will get output like below:

CupertinoPage Transition Widget

Conclusion:

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

Thanks for reading!!!
Keep Fluttering.

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.