Flikar nedtill

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(),

Lämna ett svar

Stäng meny