Flutter: TabBar with other widgets

user_12267029 0
Viewed 1568

How I can insert TabBar with other widgets?

I have a "menu page" with NavigationBar and a page with other widgets for the "menu page" where I try to make a TabBar. I have dead code when i try to return TabBarView.

class MyTabbedPage extends StatefulWidget {
  const MyTabbedPage({Key key}) : super(key: key);
  @override
  _MyTabbedPageState createState() => _MyTabbedPageState();
}

class _MyTabbedPageState extends State<MyTabbedPage>
    with SingleTickerProviderStateMixin {
  final List<Tab> myTabs = <Tab>[
Tab(text: 'Наборы'),
Tab(text: 'Роллы'),
Tab(text: 'Суши'),
Tab(text: 'Сашими'),
Tab(text: 'Онигири'),
Tab(text: 'Ланчи'),
Tab(text: 'WOK'),
Tab(text: 'Напитки'),
Tab(text: 'Другое'),
  ];

  TabController _tabController;

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

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

  @override
  Widget build(BuildContext context) {
    return
    TabBar(
          isScrollable: true,
          unselectedLabelColor: Colors.grey,
          labelColor: Colors.black,
          indicatorColor: Colors.black,
          controller: _tabController,
          tabs: myTabs,
      );
    TabBarView(
      controller: _tabController,
      children: myTabs.map((Tab tab) {
        final String label = tab.text.toLowerCase();
        return Center(
          child: Text(
            'This is the $label tab',
            style: const TextStyle(fontSize: 36),
          ),
        );
      }).toList(),
    );
  }
}

I see TabBar but i don't see TabBarView. Please tell me how to do it right.

screenshot

flutter
2 Answers

The issue is the returned widgets in build method are not arranged into a layout. You can just return TabBar and TabBarView. They should be arranged inside a layout like Column or Row. Or simply you can use a Scaffold. You can give TabBar as Bottom widget of Appbar and TabBarView as body of scaffold.

Look at this complete example and how they are arranged.

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),
            ],
          ),
        ),
      ),
    );
  }
}
user_78652960

Try this way 

 @override
  Widget build(BuildContext context) {
    return Column(
         children: <Widget> [
           TabBar(
               isScrollable: true,
               unselectedLabelColor: Colors.grey,
               labelColor: Colors.black,
               indicatorColor: Colors.black,
               controller: _tabController,
               tabs: myTabs,
           ),
           TabBarView(
               controller: _tabController,
               children: myTabs.map((Tab tab) {
                    final String label = tab.text.toLowerCase();
                    return Center(
                         child: Text('This is the $label tab',
                                style: const TextStyle(fontSize: 36),),
                               );
                         }).toList(),
            )
         ]
    )
user_78652960
Related