Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class Destination {
const Destination(this.title, this.icon, this.color);
final String title;
final IconData icon;
final MaterialColor color;
}
const List<Destination> allDestinations = <Destination>[
Destination('Home', Icons.home, Colors.teal),
Destination('Business', Icons.business, Colors.cyan),
Destination('School', Icons.school, Colors.orange),
Destination('Flight', Icons.flight, Colors.blue)
];
class RootPage extends StatelessWidget {
const RootPage({ Key key, this.destination }) : super(key: key);
final Destination destination;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(destination.title),
backgroundColor: destination.color,
),
backgroundColor: destination.color[50],
body: SizedBox.expand(
child: InkWell(
onTap: () {
Navigator.pushNamed(context, "/list");
},
),
),
);
}
}
class ListPage extends StatelessWidget {
const ListPage({ Key key, this.destination }) : super(key: key);
final Destination destination;
@override
Widget build(BuildContext context) {
const List<int> shades = <int>[50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
return Scaffold(
appBar: AppBar(
title: Text(destination.title),
backgroundColor: destination.color,
),
backgroundColor: destination.color[50],
body: SizedBox.expand(
child: ListView.builder(
itemCount: shades.length,
itemBuilder: (BuildContext context, int index) {
return SizedBox(
height: 128,
child: Card(
color: destination.color[shades[index]].withOpacity(0.25),
child: InkWell(
onTap: () {
Navigator.pushNamed(context, "/text");
},
child: Center(
child: Text('Item $index', style: Theme.of(context).primaryTextTheme.display1),
),
),
),
);
},
),
),
);
}
}
class TextPage extends StatefulWidget {
const TextPage({ Key key, this.destination }) : super(key: key);
final Destination destination;
@override
_TextPageState createState() => _TextPageState();
}
class _TextPageState extends State<TextPage> {
TextEditingController _textController;
@override
void initState() {
super.initState();
_textController = TextEditingController(
text: 'sample text: ${widget.destination.title}',
);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.destination.title),
backgroundColor: widget.destination.color,
),
backgroundColor: widget.destination.color[50],
body: Container(
padding: const EdgeInsets.all(32.0),
alignment: Alignment.center,
child: TextField(controller: _textController),
),
);
}
@override
void dispose() {
_textController.dispose();
super.dispose();
}
}
class DestinationView extends StatefulWidget {
const DestinationView({ Key key, this.destination }) : super(key: key);
final Destination destination;
@override
_DestinationViewState createState() => _DestinationViewState();
}
class _DestinationViewState extends State<DestinationView> {
@override
Widget build(BuildContext context) {
return Navigator(
onGenerateRoute: (RouteSettings settings) {
return MaterialPageRoute(
settings: settings,
builder: (BuildContext context) {
switch(settings.name) {
case '/':
return RootPage(destination: widget.destination);
case '/list':
return ListPage(destination: widget.destination);
case '/text':
return TextPage(destination: widget.destination);
}
},
);
},
);
}
}
class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> with TickerProviderStateMixin<HomePage> {
int _currentIndex = 0;
@override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
top: false,
child: IndexedStack(
index: _currentIndex,
children: allDestinations.map<Widget>((Destination destination) {
return DestinationView(destination: destination);
}).toList(),
),
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: _currentIndex,
onTap: (int index) {
setState(() {
_currentIndex = index;
});
},
items: allDestinations.map((Destination destination) {
return BottomNavigationBarItem(
icon: Icon(destination.icon),
backgroundColor: destination.color,
title: Text(destination.title)
);
}).toList(),
),
);
}
}
void main() {
runApp(MaterialApp(home: HomePage()));
}
@zac404

This comment has been minimized.

Copy link

@zac404 zac404 commented Dec 9, 2020

Android back button isn't working

After navigating to a list page (line 42) the Android back button is not working as expected. When pressing the Android back button, the app is not switching to the last screen. Instead, the app will be closed. I guess that is because of the nested scaffolds. (According to the official documentation “it's best to avoid nesting scaffolds”: https://api.flutter.dev/flutter/material/Scaffold-class.html)
Does anybody have a solution for this problem?

@halilkalayli

This comment has been minimized.

Copy link

@halilkalayli halilkalayli commented Dec 24, 2020

Android back button isn't working

After navigating to a list page (line 42) the Android back button is not working as expected. When pressing the Android back button, the app is not switching to the last screen. Instead, the app will be closed. I guess that is because of the nested scaffolds. (According to the official documentation “it's best to avoid nesting scaffolds”: https://api.flutter.dev/flutter/material/Scaffold-class.html)
Does anybody have a solution for this problem?

https://medium.com/coding-with-flutter/flutter-case-study-multiple-navigators-with-bottomnavigationbar-90eb6caa6dbf
check "one more thing" section.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment