CODEWITHSUNDEEP
flutterdart
Maritn Ge
Maritn Ge

Reputation: 1216

How can I have a tabbed widget in Flutter?

I have a page with a pie chart which represents different values. What I want to do is under the pie chart have a widget that works like a scaffold with a Tabbar which has different widgets, in my case a few Listviews I already finished that represent all the different slices in the piechart. As you click on the different Tabs, it switches to the according list, like a tabpage.

I didn't figure out how to do this, so if there is no premade way I think I will just make my own widget for this, but before I resort to this I wanted to ask if there already is a widget/method for this or someone else had this issue before.

I just drew up something with balsamiq real quick:

enter image description here

all is done but the tabs, that don't need to look like that by the way

the code i need to enter this widget into is like:

class _ListWithTabsState extends State<ListWithTabs> {
  @override
  Widget build(BuildContext context) {
    //here i need the widget
  }
}

class DetailPage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return CustomAppPage(
       widget: Column(
          children: [
             PieChartClass(data),
             ListWithTabs(data),
         ],
      ),
   ),
}

Upvotes: 0

Views: 371

Answers (1)

Chrillewoodz
Chrillewoodz

Reputation: 28328

There are widgets for this as described here:

https://flutter.dev/docs/cookbook/design/tabs

You basically use a DefaultTabController, TabBar, Tab and TabBarView and it will automatically animate between the different tabs. Or you can use your own controller if you want even more control.

Full example:

import 'package:flutter/material.dart';

void main() {
  runApp(TabBarDemo());
}

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 1

Related Questions