在苹果手机上有一种才操作叫做右滑返回上一页，一些不错的应用都有类似的操作，随着苹果手机越来越多，这种操作开始普遍开来，在安卓手机上也开始使用。
其实早都知道Flutter有两套UI模板，一套是material,另一套就是Cupertino。Cupertino主要针对的的就是IOS系统的UI，所以用的右滑返回上一级就是在这个Cupertino里的。
Cupertino的引入方法
直接使用import引入就可以了，代码如下:
import ‘package:flutter/cupertino.dart‘;
引入了cupertino的包之后，就可以使用皮肤和交互效果的特性了。要用的右滑返回上一页也是皮肤的交互特性，直接使用就可以了。
这个和以前使用material的Scaffold类似，不过他里边的参数是child，例如下面的代码:
return CupertinoPageScaffold( child: Center( child: Container( width: 100.0, height:100.0, color: CupertinoColors.activeBlue, child: CupertinoButton( child: Icon(CupertinoIcons.add,color: Colors.white), onPressed: (){ Navigator.of(context).push( CupertinoPageRoute(builder: (BuildContext context){ return RightBackDemo(); //新打开的还是本控件,可无限重复打开 }) ); }, ), ), ), );
在Cupertino下也有很多Widget控件，他们都是以Cupertino开头的，这就让我们很好区分，当然两种皮肤是可以进行混用的。
这个案例就两个主要文件，main.dart和right_back_demo.dart
main.dart代码：
import ‘package:flutter/material.dart‘; import ‘right_back_demo.dart‘; void main()=>runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title:‘Flutter Demo‘, theme:ThemeData(primarySwatch: Colors.blue), home: RightBackDemo(), ); } }
right_back_demo.dart代码：
import ‘package:flutter/cupertino.dart‘; class RightBackDemo extends StatelessWidget { @override Widget build(BuildContext context) { return CupertinoPageScaffold( child: Center( child: Container( width: 100.0, height:100.0, color: CupertinoColors.activeBlue, child: CupertinoButton( child: Icon(CupertinoIcons.add,color: Colors.white), onPressed: (){ Navigator.of(context).push( CupertinoPageRoute(builder: (BuildContext context){ return RightBackDemo(); //新打开的还是本控件,可无限重复打开 }) ); }, ), ), ), ); } }
其实只要使用CupertinoPageRoute打开的子页面，就可以实现右滑返回上一级。所以整个案例并不难。大家也可以自己新建个页面跳转，能更好的看出效果。
原文：https://www.cnblogs.com/joe235/p/11236681.html