CupertinoPageRoute In Flutter
The Route class is a high-level abstraction through the route include. In any case, we won’t utilize it straightforwardly, as we have seen that a screen is a route in Flutter. Various stages might require screen changes to act unexpectedly. In Flutter, there are elective executions in a stage versatile way. This task is finished with MaterialPageRoute and CupertinoPageRoute, which adjust to Android and iOS separately.
In this article, we will explore the CupertinoPageRoute In Flutter. We will execute a demo program of the CupertinoPageRoute and how to utilize it in your flutter applications
CupertinoPageRoute class – Cupertino library – Dart API
A modal route that replaces the entire screen with an iOS transition. The page slides in from the right and exits in…api. flutter.dev
Table Of Contents::
CupertinoPageRoute:
A modal route that replaces the whole screen with an iOS change. The page slides in from the right and exits backward. The page likewise moves to one side in parallax when another page enters to cover it.
The page slides in from the base and exits backward with no parallax impact for fullscreen dialogs. 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 when this isn’t required, set maintainState to false.
Demo Module :
This demo video shows how to use CupertinoPageRoute in a flutter. It shows how CupertinoPageRoute will work in your flutter applications. It tells you how to rote one page to another page using CupertinoPageRoute. It will be shown on your device.
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,
})
In the Above Constructor, all attributes marked with @required must not be empty.
Properties:
There are some properties of CupertinoPageRoute are:
- > builder: This property is used to builds the primary contents of the route.
- > title: This property is used to title string for this route.
- > maintainState: This property is used to whether the route should remain in memory when it is inactive.
- > debugLabel: This property is used to a short description of this route useful for debugging.
How to implement code in dart file :
You need to implement it in your code respectively:
Create a new dart file called main.dart inside the lib folder.
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(). Inside the button, we will add ElevatedButton.styleFrom(). 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”.
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")
),
],
),
When we run the application, we ought to get the screen’s output like the underneath screen capture.
In main. dart file, we will create a class SecondPage. Inside, we will add static dynamic route Route<dynamic> route. We 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().
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 Dev's", style: TextStyle(fontSize: 30),),
),
),
);
}
}
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.
Code File:
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 Dev's", style: TextStyle(fontSize: 30),),
),
),
);
}
}
Conclusion:
In the article, I have explained the basic structure of the CupertinoPageRoute in a flutter; you can modify this code according to your choice. This was a small introduction to CupertinoPageRoute On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the CupertinoPageRoute in your flutter projects. We will show you what the CupertinoPageRoute is?. Show constructor and properties of the CupertinoPageRoute. Make a demo program for working CupertinoPageRoute. In this blog, we have examined the CupertinoPageRoute of the flutter app. I hope this blog will help you in the comprehension of the CupertinoPageRoute in a better way. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
