Created
January 29, 2026 17:41
-
-
Save gasaichandesu/a2d6a3f692ddf418e8dbfd492546380a to your computer and use it in GitHub Desktop.
Multiple interactive dialogs in Flutter
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import 'package:flutter/material.dart'; | |
| void main() { | |
| runApp(const MyApp()); | |
| } | |
| class MyApp extends StatelessWidget { | |
| const MyApp({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return const MaterialApp( | |
| debugShowCheckedModeBanner: false, | |
| home: FourWayNavigatorScreen(), | |
| ); | |
| } | |
| } | |
| class FourWayNavigatorScreen extends StatelessWidget { | |
| const FourWayNavigatorScreen({super.key}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Scaffold( | |
| body: Column( | |
| children: const [ | |
| Expanded( | |
| child: Row( | |
| children: [ | |
| Expanded( | |
| child: QuadrantNavigator( | |
| color: Colors.red, | |
| label: 'Top Left', | |
| ), | |
| ), | |
| Expanded( | |
| child: QuadrantNavigator( | |
| color: Colors.green, | |
| label: 'Top Right', | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| Expanded( | |
| child: Row( | |
| children: [ | |
| Expanded( | |
| child: QuadrantNavigator( | |
| color: Colors.blue, | |
| label: 'Bottom Left', | |
| ), | |
| ), | |
| Expanded( | |
| child: QuadrantNavigator( | |
| color: Colors.orange, | |
| label: 'Bottom Right', | |
| ), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ], | |
| ), | |
| ); | |
| } | |
| } | |
| class QuadrantNavigator extends StatefulWidget { | |
| final Color color; | |
| final String label; | |
| const QuadrantNavigator({ | |
| super.key, | |
| required this.color, | |
| required this.label, | |
| }); | |
| @override | |
| State<QuadrantNavigator> createState() => _QuadrantNavigatorState(); | |
| } | |
| class _QuadrantNavigatorState extends State<QuadrantNavigator> { | |
| final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>(); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Navigator( | |
| key: _navigatorKey, | |
| onGenerateRoute: (settings) { | |
| return MaterialPageRoute( | |
| builder: (_) => HomePage( | |
| color: widget.color, | |
| label: widget.label, | |
| onNext: () { | |
| showDialog( | |
| context: _navigatorKey.currentContext ?? context, | |
| useRootNavigator: false, | |
| builder: (context) { | |
| return AlertDialog( | |
| title: const Text('Basic dialog title'), | |
| content: const Text( | |
| 'A dialog is a type of modal window that\n' | |
| 'appears in front of app content to\n' | |
| 'provide critical information, or prompt\n' | |
| 'for a decision to be made.', | |
| ), | |
| actions: <Widget>[ | |
| TextButton( | |
| style: TextButton.styleFrom( | |
| textStyle: Theme.of(context).textTheme.labelLarge, | |
| ), | |
| child: const Text('Disable'), | |
| onPressed: () { | |
| Navigator.of(context).pop(); | |
| }, | |
| ), | |
| TextButton( | |
| style: TextButton.styleFrom( | |
| textStyle: Theme.of(context).textTheme.labelLarge, | |
| ), | |
| child: const Text('Enable'), | |
| onPressed: () { | |
| Navigator.of(context).pop(); | |
| }, | |
| ), | |
| ], | |
| ); | |
| }, | |
| ); | |
| }, | |
| ), | |
| ); | |
| }, | |
| ); | |
| } | |
| } | |
| class HomePage extends StatelessWidget { | |
| final Color color; | |
| final String label; | |
| final VoidCallback onNext; | |
| const HomePage({ | |
| super.key, | |
| required this.color, | |
| required this.label, | |
| required this.onNext, | |
| }); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Container( | |
| color: color.withOpacity(0.15), | |
| child: Center( | |
| child: Column( | |
| mainAxisSize: MainAxisSize.min, | |
| children: [ | |
| Text( | |
| label, | |
| style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold), | |
| ), | |
| const SizedBox(height: 12), | |
| ElevatedButton(onPressed: onNext, child: const Text('Push Page')), | |
| ], | |
| ), | |
| ), | |
| ); | |
| } | |
| } | |
| class DetailsPage extends StatelessWidget { | |
| final Color color; | |
| final String label; | |
| const DetailsPage({super.key, required this.color, required this.label}); | |
| @override | |
| Widget build(BuildContext context) { | |
| return Container( | |
| color: color.withOpacity(0.3), | |
| child: Center( | |
| child: Column( | |
| mainAxisSize: MainAxisSize.min, | |
| children: [ | |
| Text( | |
| '$label – Details', | |
| style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold), | |
| ), | |
| const SizedBox(height: 12), | |
| ElevatedButton( | |
| onPressed: () => Navigator.of(context).pop(), | |
| child: const Text('Pop Page'), | |
| ), | |
| ], | |
| ), | |
| ), | |
| ); | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment