Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can i implement tab controller in a page with other component in Flutter?

I want to add a tab controller in a page with other components in my flutter application. how can I do this? when I add TabBar its ok but when I add TabBarView then it's not working. I attached a screenshot of the page. I want to do this. How can I do that in flutter application.?

class Details extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
  body: new Center(
    child: new Column(
      children: <Widget>[
        new DropdownButton<String>(
          items: <String>['USD', 'EUR', 'LTC'].map((String value) {
            return new DropdownMenuItem<String>(
              value: value,
              child: new Text(value),
            );
          }).toList(),
          onChanged: (_) {},
          value: 'USD',
        ),
        new Text(
            '\$6,146.76',
          style: new TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 40.0,
            color: Theme.of(context).accentColor,
          ),
        ),
        new Text('Last Updated at'),
        new DefaultTabController(
            length: 2,
            child: new Container(
              child: new Column(
                children: <Widget>[
                  new TabBar(
                    labelColor: Theme.of(context).accentColor,
                      tabs: [
                        new Tab(text: 'General'),
                        new Tab(text: 'Mining'),
                      ]
                  ),
                  new TabBarView(
                    children: [
                      new Tab(child: new General()),
                      new Tab(child: new Mining()),
                    ],
                  ),

                ],
              ),
            )
        )
      ],
    ),
  ),
);
}
}

i want to do like this

like image 395
Mudassir Zakaria Avatar asked Jun 28 '18 08:06

Mudassir Zakaria


People also ask

How do you add a tab controller in Flutter?

To create a tab in it, create a tab list and create an object of its TabController. TabController _tabController; Initalize the TabController inside the initState() method and also override it in the dispose() method.

How do I navigate from one tab to another in Flutter?

A common navigation pattern on mobile is to show multiple tabs with different pages inside them. With Flutter, this is easily done with the TabBar widget, along with a TabController and a TabBarView.

How do you get the selected tab position in Flutter?

Use DefaultTabController you can get current index easily whether the user changes tabs by swiping or tap on the tab bar. Important: You must wrap your Scaffold inside of a Builder and you can then retrieve the tab index with DefaultTabController. of(context). index inside Scaffold .


1 Answers

          Text("Controls above tabs"),
          DefaultTabController(
            length: 2,
            child: SizedBox(
              height: 100.0,
              child: Column(
                children: <Widget>[
                  TabBar(
                    tabs: <Widget>[
                      Tab(
                        text: "tab1",
                      ),
                      Tab(
                        text: "tab2",
                      )
                    ],
                  ),
                  Expanded(
                    child: TabBarView(
                      children: <Widget>[
                        Container(
                          color: Colors.green,
                        ),
                        Container(
                          color: Colors.yellow,
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ),
like image 176
Sergey Burish Avatar answered Oct 21 '22 08:10

Sergey Burish