What is the CupertinoPageRoute In Flutter?

· 5 min read
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?

Various stages might require screen changes to act unexpectedly. In Flutter, there are elective executions in a stage versatile way. So, this task is finished with MaterialPageRoute and CupertinoPageRoute. It will adjust to Android and iOS separately.

CupertinoPageRoute:

The page slides in from the base and exits backward with no parallax impact for fullscreen dialogs. So, as a matter of course, when a modal route is supplanted by another, the previous route stays in memory. To free every one of the resources, set maintainState to false.

Constructor:

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

Properties:

There are some properties of CupertinoPageRoute are:

  • > builder: You can use this prop to build the primary contents of the route.
  • > title: You can use this prop to title string for this route.
  • > maintainState: You can use this prop to whether the route should remain in memory when it is inactive.
  • > debugLabel: You can use this prop to a short description of this route useful for debugging.

How to implement code in dart file :

So, let’s create a new dart file called main.dart inside the lib folder. After that in main. dart file, we will create a class HomePage. Inside the class, we will add Column() widget. In his widget, we will add mainAxisAlignment and crossAxisAlignment was center. In children property, we will add an image and ElevatedButton().

Moreover, inside the button, we will add ElevatedButton.styleFrom(). Also inside, we will add textStyle, minimumSize, and primary. We will add the onPressed() method. In this method, we will add Navigator.of(context).push(SecondPage.route()). We will define below SecondPage(). Also, we will add the text “Home Page”.

In main. dart file, we will create a class SecondPage. Inside, we will add static dynamic route Route<dynamic> routeWe will return CupertinoPageRoute(). Inside, we will add builder means builds the primary contents of the route. In bracket, we will add BuildContext context and return SecondPage().

Moreover, in the body, we will add Container(). Inside, we will add the text ”Welcome to Flutter Dev’s” and wrap it to its Center(). When we run the application, we ought to get the screen’s output like the underneath screen capture.

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.

Leave a Reply