Mudassir Zakaria
Mudassir Zakaria

Reputation: 437

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

Upvotes: 9

Views: 10899

Answers (1)

Sergey Burish
Sergey Burish

Reputation: 604

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

Upvotes: 12

Related Questions