What is the CupertinoPageRoute In Flutter?

What is the CupertinoPageRoute In Flutter?

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:

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> routeWe 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 GuideFlutter 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.

Nirali Patel

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.

Leave a comment

Your email address will not be published. Required fields are marked *


ready to get started?

Fill out the form below and we will be in touch soon!

"*" indicates required fields

✓ Valid number ✕ Invalid number
our share of the limelight

as seen on