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 DestinationView extends StatefulWidget {
const DestinationView({ Key key, this.destination }) : super(key: key);
final Destination destination;
@override
_DestinationViewState createState() => _DestinationViewState();
}
class _DestinationViewState extends State<DestinationView> {
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} Text'),
backgroundColor: widget.destination.color,
),
backgroundColor: widget.destination.color[100],
body: Container(
padding: const EdgeInsets.all(32.0),
alignment: Alignment.center,
child: TextField(controller: _textController),
),
);
}
@override
void dispose() {
_textController.dispose();
super.dispose();
}
}
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(), debugShowCheckedModeBanner: false));
}
@chinitadelrey

This comment has been minimized.

Copy link

@chinitadelrey chinitadelrey commented Apr 30, 2020

Quick question on performance: do code lines 89 to 84 imply that you are rebuilding those static BarItem widgets every time the parent widget _HomePageState rebuilds?
I see from your article that the bottom bar changes with every time the Destination changes but wondering if the BottomNavigationBarItems are themselves rebuilt every time.
If so, would we not want to reduce that as it is a performance anti pattern? (referencing - https://iiro.dev/2018/12/11/splitting-widgets-to-methods-performance-antipattern/)
If I've understood wrongly, please let me know and help me understand what it is I am not getting right.
Thank you very much in advance.

@HansMuller

This comment has been minimized.

Copy link
Owner Author

@HansMuller HansMuller commented May 2, 2020

I wrote those samples for clarity, I wasn't trying to optimize performance. It is true that the list BottomNavigationBar items are rebuilt when the HomePage is rebuilt, and it would be nice to factor out a private widget that encapsulates the whole bottom navigation bar. That said, I'm not sure that there's a big performance benefit in doing that, at least in this case. You'd have to benchmark and see.

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