how to use a tabbar in a row flutter

Question

i want to use a tabbar in a row and row is child of a container reason of using row is,i want to use a icon in right hand side and use a tabbar left hand side like this,\

there is an icon in right hand side and an tabbar in left hand side
i have already tried this

 child: Row(
                children: [
                  Expanded(child: Text('data')),
                  AppBar(
                    bottom: TabBar(

but that went wrong also i couldn't put tabbar as a container child if you need more information please let me know, thanks for the helps

Answer 1

I understand that I'm posting answer late but this might help others.

In TabBar Widget, to get icon and text in a row you can edit tabs.dart file. in tabs.dart file go to line number 118 (in my case) you just have to replace label = Column (....) to label = Row( ... ) and replace line number 71 this.iconMargin = const EdgeInsets.only(bottom: 10.0), to this.iconMargin = const EdgeInsets.only(bottom: 10.0, right: 10.0),

to open tabs.dart file just click ctrl+left mouse click on Tab() widget

Answer 2

I'm suggest to use ButtomNavigationBarItem like my code

read more : https://api.flutter.dev/flutter/material/BottomNavigationBar-class.html

import 'package:buudeli/model/user_model.dart';
import 'package:buudeli/util/style1.dart';
import 'package:buudeli/widget/about_shop.dart';
import 'package:buudeli/widget/showMenuFood.dart';
import 'package:flutter/material.dart';

class ShowShopMenu extends StatefulWidget {
  final UserModel userModel;
  ShowShopMenu({Key key, this.userModel}) : super(key: key);
  @override
  _ShowShopMenuState createState() => _ShowShopMenuState();
}

class _ShowShopMenuState extends State<ShowShopMenu> {
  UserModel userModel;
  List<Widget> listWidgets = List(); //[AboutShop(), ShowMenuFood()];
  int index = 0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    userModel = widget.userModel;
    listWidgets.add(AboutShop(userModel: userModel));
    listWidgets.add(ShowMenuFood(userModel: userModel,));
  }

  BottomNavigationBarItem aboutShopNav() {
    return BottomNavigationBarItem(
      icon: Icon(Icons.info),
      title: Text('รายละเอียดร้าน'), //detial
    );
  }

  BottomNavigationBarItem showMenuFoodNav() {
    return BottomNavigationBarItem(
      icon: Icon(Icons.fastfood),
      title: Text('รายการอาหาร'), //food menu
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [Style1().iconShowShop(context)],
        title: Text(userModel.nameShop),
      ),
      body: listWidgets.length == 0
          ? Style1().showProgress()
          : listWidgets[index],
      bottomNavigationBar: showButtonNav(),
    );
  }

  BottomNavigationBar showButtonNav() => BottomNavigationBar(
          currentIndex: index,
          onTap: (value) {
            setState(() {
              index = value;
            });
          },
          items: <BottomNavigationBarItem>[
            aboutShopNav(),
            showMenuFoodNav(),
          ]);
}

Answer 3

You can try a usage like this. The result looks like this.

class ExamplePage extends StatefulWidget {
  @override
  _ExamplePageState createState() => _ExamplePageState();
}

class _ExamplePageState extends State<ExamplePage> with SingleTickerProviderStateMixin {

  TabController tabController;

  @override
  void initState() {
    super.initState();
    tabController = TabController(
      length: 2,
      initialIndex: 0,
      vsync: this,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        bottom: PreferredSize(
          preferredSize: Size.fromHeight(40),
          child: ListView(
            shrinkWrap: true,
            children: [

              Row(
                children: [

                  Expanded(
                    flex: 5,
                    child: TabBar(
                      controller: tabController,
                      tabs: [
                        Tab(child: Text('Page 1')),
                        Tab(child: Text('Page 2')),
                      ],
                    ),
                  ),

                  Expanded(
                    flex: 1,
                    child: Icon(Icons.add),
                  )

                ],
              )

            ],
          )
        ),
      ),
      body: Container(),
    );