What is the CupertinoPageRoute In Flutter?

• General

The Route class is a high-level abstraction through the route include. So, in this article, we will see what is the CupertinoPageRoute In Flutter.

What is the CupertinoPageRoute In Flutter?

Different stages may require unexpected screen changes. Flutter has stage variable options. Therefore, this task is completed using MaterialPageRoute and CupertinoPageRoute. it applies to Android and iOS separately.

CupertinoPageRoute:

The page slides in from the base and exits backward without being affected by the parallax of the full-screen dialog. Therefore, if a modal route is replaced by another route, the previous route is, of course, remembered. To free all resources, set maintainState to false.

Constructor:

To utilize CupertinoPageRoute, you need to call the constructor underneath:

CupertinoPageRoute({
  required this.builder,
  this.title,
  RouteSettings? settings,
  this.maintainState = true,
  bool fullscreenDialog = false,
})

Properties:

CupertinoPageRoute has several properties:

• Builder: You can use this property to build the main content of the route.
• Title: You can use this prop to give a title to this root string.
• MaintainState: This property can be used to determine whether to leave the route in memory when it is inactive.
• debugLabel: You can use this prop to get a brief description of this route to help you debug.

How to implement code in dart file :

Now let’s create a new dart file called main.dart in the lib folder. Then in the main.dart file we will create the class homepage. Add a Column() widget in your class. You also have to add mainAxisAlignment to his widget and it was centered around crossAxisAlignment. In children property, we will add an image and ElevatedButton().

In addition, we have added ElevatedButton.styleFrom() inside the button. Also add textStyle, minimumSize, and Primary. After that add the onPressed () method. This method adds Navigator.of (context) .push (SecondPage.route ()). Also add the text “Home Page”.

In main.dart file, you need to create a class SecondPage. Inside, you will have to add static dynamic route Route<dynamic> route. We will return CupertinoPageRoute(). Inside, we will add a builder that will build the primary contents of the route. In bracket, we will add BuildContext context and return SecondPage().

Also, add a container () to the body. Inside, add the text ”Welcome to Flutter Dev’s” and wrap it to its Center(). When you run the application, you should get a screen output.

Source Code:

import 'package:flutter/cupertino.dart' show CupertinoPageRoute;
import 'package:flutter/material.dart';
import 'package:flutter_cupertino_page_route/splash_screen.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Splash(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.teal,
      automaticallyImplyLeading: false,
      title: Text("Flutter CupertinoPageRoute Demo"),
    ),
    body: Container(
      child: Center(
        child: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Image.asset("assets/logo.png",width: 300,),
              SizedBox(height: 70,),
              ElevatedButton(
                style: ElevatedButton.styleFrom(
                  textStyle: TextStyle(fontSize: 20),
                  minimumSize: Size.fromHeight(40),
                  primary: Colors.teal,
                ),
                onPressed: () => 
Navigator.of(context).push(SecondPage.route()),
                child: Text("Home Page")
              ),
            ],
          ),
        ),

        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  static Route<dynamic> route() {
    return CupertinoPageRoute(
      builder: (BuildContext context) {
        return SecondPage();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Colors.teal,
        title: Text("Second Page"),
      ),
      body: Container(
        child: Center(
          child: Text("Welcome to Flutter Agency", style: 
TextStyle(fontSize: 30),),
        ),
      ),
    );
  }
}

Conclusion:

Thanks for being with us on a Flutter Journey!

So, in this article, we have seen how to Create Toolbar SearchView In Flutter.  Also, feel free to comment and provide any other suggestions regarding Flutter.

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

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Written by Nirali Patel

Nirali Patel is a dedicated Flutter developer with over two years of experience, specializing in creating seamless mobile applications using Dart. With a passion for crafting user-centric solutions, Nirali combines technical proficiency with innovative thinking to push the boundaries of mobile app development.