För att få flikar längst ner kan man använda BottomNavigationBar. Deklarera _barItems
och _selectedIndex
i den klass där du vill ha din BottomNavigationBar:
List<BottomNavigationBarItem> _barItems; int _selectedIndex = 0;
I initState skapar du innehållet i flikraden:
_barItems = List(); _barItems.add( BottomNavigationBarItem(icon: Icon(Icons.home), title: Text('Home')) ); _barItems.add( BottomNavigationBarItem(icon: Icon(Icons.business), title: Text('Om oss')) ); _barItems.add( BottomNavigationBarItem(icon: Icon(Icons.message), title: Text('Kontakt')) );
Skapa en funktion som väljer vilken widget som ska visas baserat på vilken flik som väljs:
void _getBarItemWidget() { switch(_selectedIndex) { case 0: return Text('Home selected'); break; case 1: return Text('Om oss selected'); break; case 2: return Text('Kontakt selected'); break; default: return Text('Error'); } }
I body
på din Scaffold, lägg till din bottomNavigationBar
:
bottomNavigationBar: BottomNavigationBar( items: _barItems, // fixedColor: Colors.green, selectedItemColor: Colors.green, currentIndex: _selectedIndex, onTap: (int index) { setState(() { _selectedIndex = index; }); }, ),
På den plats i ditt användargränssnitt där du vill att flikinnehållet ska visas lägger du in ett anrop till _getBarItemWidget
:
child: _getBarItemWidget(),
