Flutter Modal Routing
30 March, 2023
2
2
0
Contributors
Modal Routing
Modal routing is a type of routing in the Flutter framework that involves showing a new screen as a modal dialog on top of the current screen. The user can then interact with the modal screen and dismiss it when they are done. Modal routing is often used for screens that require user input or for displaying information in a separate screen.
Implementing modal routing
To implement modal routing in Flutter, you can use the showModalBottomSheet() or showModalBottomSheet() function. These functions display a modal bottom sheet or modal top sheet, respectively, and allow you to specify the content of the modal screen.
Here is an example of implementing modal routing in Flutter using the showModalBottomSheet() function:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Modal Bottom Sheet"),
),
body: Center(
child: RaisedButton(
child: Text("Show Modal"),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (context) => ModalScreen(),
);
},
),
),
);
}
}
class ModalScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
color: Colors.red,
child: Center(
child: RaisedButton(
child: Text("Close"),
onPressed: () {
Navigator.pop(context);
},
),
),
);
}
}