Cupertino Page Route Flutter Example
In this article, we are going to implement navigation between one screen to another using cupertino page route in flutter application. We already implemented material page route for navigation in flutter application. You can also check out flutter navigation related articles.
If we want to integrate navigation based on iOS style, we need to use cupertino page route. Using this widget, Page slides from right to left and exits in opposite direction. CupertinoPageRoute widget has many properties to customize navigation between screens. builder property is used to integrate contents of route.
title property is used to add label for this specific route. maintainState attribute is used to keep route in memory when it is not in use. debugLabel property is used to add description for specific route for debugging purpose.
Cupertino Page Route Flutter
return CupertinoPageRoute(
builder: (BuildContext context) {
return MySecondScreen();
},
);
}
First Screen
import ‘package:flutter/material.dart’;
import ‘package:fluttercupertinoroutesample/my_second_screen.dart’;
class MyFirstScreen extends StatefulWidget {
@override
_MyFirstScreenState createState() => _MyFirstScreenState();
}
class _MyFirstScreenState extends State<MyFirstScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(children: [
Expanded(
child: GestureDetector(
child: Card(
clipBehavior: Clip.antiAliasWithSaveLayer,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
child: Stack(fit: StackFit.expand, children: <Widget>[
Image.asset(“images/usa.jpg”, fit: BoxFit.cover),
Container(
margin: EdgeInsets.only(left: 10, bottom: 10),
alignment: Alignment.bottomCenter,
child: Text(“United States”,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 50,
color: Colors.white,
shadows: [
Shadow(
blurRadius: 3.0,
color: Colors.black12,
offset: Offset(3.0, 3.0),
),
],
)),
)
]),
),
onTap: (){
Navigator.of(context).push(MySecondScreen.route());
},
),
),
])),
);
}
}
Second Screen
import ‘package:flutter/material.dart’;
class MySecondScreen extends StatefulWidget {
static Route<dynamic> route() {
return CupertinoPageRoute(
builder: (BuildContext context) {
return MySecondScreen();
},
);
}
@override
_MySecondScreenState createState() => _MySecondScreenState();
}
class _MySecondScreenState extends State<MySecondScreen> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
children: <Widget>[
Container(
height: 300,
child: Image.asset(
“images/usa.jpg”,
fit: BoxFit.cover,
)),
Container(
margin: EdgeInsets.all(10),
child:
Text(“The U.S. is a country of 50 states covering a vast swath of North America, with Alaska in the northwest and Hawaii extending the nation’s presence into the Pacific Ocean. Major Atlantic Coast cities are New York, a global finance and culture center, and capital Washington, DC. Midwestern metropolis Chicago is known for influential architecture and on the west coast, Los Angeles’ Hollywood is famed for filmmaking.”, style: TextStyle(fontSize: 18)))
],
),
),
);
}
}
