Flikar upptill (tabs)

Lägg till with SingleTickerProviderStateMixin i klassen där du vill visa flikarna:

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin

Definiera TabController och skapa en Tab som innehåller objekten som ska visas på flikraden

TabController _tabController;

final List<Tab> _tabs = <Tab> [
    new Tab(text: 'Hem'),
    new Tab(text: 'Om oss'),
    new Tab(text: 'Kontakt')
];

Sedan behöver vi initialisera vår TabController

@override
void initState() {
    super.initState();
    _tabController = TabController(length: _tabs.length,
                                   vsync: this);
}

Vi behöver städa upp TabController efter oss:

@override
void dispose() {
    super.dispose();
    _tabController.dispose();
}

Lägg _tabs i AppBar i din Scaffold.

appBar: AppBar(
    title: Text(widget.title),
    bottom: TabBar(
        controller: _tabController,
        tabs: _tabs,
    ),
),

Sätt TabBarView som din body för att visa flikinnehållet:

TabBarView(
    controller: _tabController,
    children: <Widget>[
        Icon(Icons.home),
        Icon(Icons.business),
        Icon(Icons.message)
    ],
),

Lämna ett svar

Stäng meny