Un écran c’est quoi ? C’est une page qui contient un ou plusieurs widget.
Principe de la navigation entre écrans :
Sous Flutter, les écrans, screens et les pages sont dénommés des routes.
Sous Android les routes sont appelées Activity
Pour naviguer entre les pages on utilise la fonction Navigator .
Ainsi un exemple de circulation entre trois pages :
import 'package:flutter/material.dart';
import 'package:flutter_basic_appli/pagedeux.dart';
import 'package:flutter_basic_appli/pagetrois.dart';
void main() {
runApp(
MaterialApp(
title: 'Named Routes Demo',
debugShowCheckedModeBanner: false,
home: new FirstScreen(),
routes: <String, WidgetBuilder>{
'/first': (BuildContext context) => new FirstScreen(),
'/second': (BuildContext context) => new PageDeux(),
'/third': (BuildContext context) => new ThirdScreen(),
},
),
);
}
class FirstScreen extends StatelessWidget {
const FirstScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('First Screen'),
),
body: Center(
child: ElevatedButton(
// Within the `FirstScreen` widget
onPressed: () {
// Navigate to the second screen using a named route.
//Navigator.of(context).pushNamed('/second');
//Navigator.pushReplacementNamed(context, '/second');
Navigator.of(context).pushNamedAndRemoveUntil(
'/second', (Route<dynamic> route) => false);
},
child: const Text('Launch screen'),
),
),
);
}
}
Fenêtre de dialogue affichée au lancement et interdiction de backspace :
Avec utilisation de la dépendance after_layout.
import 'package:after_layout/after_layout.dart';
import 'package:flutter/material.dart';
class PageQuatre extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Introduction screen',
debugShowCheckedModeBanner: false,
theme: ThemeData(primarySwatch: Colors.blue),
home: Scaffold(
backgroundColor: Color(0xff00BCD1),
appBar: AppBar(
title: Text('Flutter Screen Dialog Example'),
),
body: Center(child: HomeScreen()),
),
);
}
}
/// This is the stateless widget that the main application instantiates.
class HomeScreen extends StatefulWidget {
@override
HomeScreenState createState() => new HomeScreenState();
}
class HomeScreenState extends State<HomeScreen>
with AfterLayoutMixin<HomeScreen> {
@override
Widget build(BuildContext context) {
return new Scaffold(body: new Container(color: Colors.blue));
}
@override
void afterFirstLayout(BuildContext context) {
// Calling the same function "after layout" to resolve the issue.
_asyncInputDialog(context);
}
}
//////////////////////////////////////////////////////
Future _asyncInputDialog(BuildContext context) async {
String teamName = '';
return showDialog(
context: context,
barrierDismissible: false,
// true : dialog is dismissible with a tap on the barrier
builder: (BuildContext context) {
return WillPopScope(
onWillPop: () async => false,
child: AlertDialog(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(Radius.circular(15))),
title: Text('Téléchargement'),
content: new Row(
children: [
new Expanded(
child: new TextField(
autofocus: true,
decoration: new InputDecoration(
labelText: 'Fichier', hintText: 'Blabla.mp3'),
onChanged: (value) {
teamName = value;
},
))
],
),
actions: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
ButtonTheme(
minWidth: 25.0,
height: 25.0,
child: OutlinedButton.icon(
label: Text("Ok"),
icon: Icon(Icons.save),
style: OutlinedButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.blueGrey,
onSurface: Colors.orangeAccent,
elevation: 20,
),
onPressed: () {
//Navigator.pushReplacementNamed(context, '/third');
//Navigator.popAndPushNamed(context, '/third');
Navigator.of(context).pushNamedAndRemoveUntil(
'/third', (Route<dynamic> route) => false);
}
/*{
//Navigator.of(context).pop(ConfirmAction.CANCEL);
Fluttertoast.showToast(
msg: "Téléchargement de ${teamName} en cours...",
toastLength: Toast.LENGTH_SHORT,
gravity: ToastGravity.CENTER,
timeInSecForIosWeb: 1,
backgroundColor: Colors.red,
textColor: Colors.white,
fontSize: 16.0);
Navigator.of(context).pop(MaterialPageRoute(builder: (context) => TestPage()));
},
*/
)),
///////////////////////:
ButtonTheme(
minWidth: 25.0,
height: 25.0,
child: OutlinedButton.icon(
label: Text("Cancel"),
icon: Icon(Icons.cancel_outlined),
style: OutlinedButton.styleFrom(
primary: Colors.white,
backgroundColor: Colors.blueGrey,
onSurface: Colors.orangeAccent,
elevation: 20,
),
onPressed: () {
//Navigator.pushReplacementNamed(context, '/');
//Navigator.popAndPushNamed(context, '/');
Navigator.of(context).pushNamedAndRemoveUntil(
'/', (Route<dynamic> route) => false);
//Navigator.pop(context);
},
))
],
),
///////////////////////////////////////////////////
],
),
);
},
);
}
Affichage d’une image en fond d’écran
@override
Widget build(BuildContext context) {
return DecoratedBox(
decoration: BoxDecoration(
image: DecorationImage(image: AssetImage("your_asset"), fit: BoxFit.cover),
),
child: Center(child: FlutterLogo(size: 300)),
);
}
Références :
https://docs.flutter.dev/cookbook/navigation/navigation-basics
AndroLogiciels 