CODEWITHSUNDEEP
user-interfaceflutterdarttabbar
Romy
Romy

Reputation: 548

Flutter tabBar how to change from top to buttom

I am pretty new in Dart Flutter.

I have this problem I follow the guide to creating a tab bar, But is at the top, what I am trying to achieve is to have the tab at the bottom instead of at the top.

I have already tried BottomNavigationBar and change all, but didn't work and crash all the app.

Please help me thanks 

child: Scaffold(
    body: DefaultTabController(
      length: 5,
      initialIndex: 2,
      child: Scaffold(
          appBar: AppBar(
            elevation: 0,
            backgroundColor: primaryColor,
            automaticallyImplyLeading: false,
            title: TabBar(

                labelColor: Colors.white,
                indicatorColor: Colors.white,
                unselectedLabelColor: Colors.black,
                isScrollable: false,
                indicatorSize: TabBarIndicatorSize.label,
                tabs: [
                  Tab(
                    icon: Icon(
                      Icons.person,
                      size: 30,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.group,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.whatshot,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.notifications,
                    ),
                  ),
                  Tab(
                    icon: Icon(
                      Icons.message,
                    ),
                  )
                ]),
          ),
          body: TabBarView(
            children: [
              Center(child: Profile(currentUser)),
              Center(child: Chanels()),
              Center(child: CardPictures(currentUser, users)),
              Center(child: Notifications(currentUser, notification)),
              Center(child: HomeScreen(currentUser, matches)),
            ],
            physics: NeverScrollableScrollPhysics(),
          )),
    ),
  ),

Upvotes: 0

Views: 2952

Answers (3)

SYED FAISAL
SYED FAISAL

Reputation: 519

To change the tab bar from the top to bottom we have to customize the default tab bar in flutter using TabController. Here is an example :

import "package:flutter/material.dart";
import 'package:hexcolor/hexcolor.dart';

import 'LineChart.dart';
import 'LineChart1.dart';

class PortfolioGraph extends StatefulWidget {
  @override
  _PortfolioGraphState createState() => _PortfolioGraphState();
}

class _PortfolioGraphState extends State<PortfolioGraph> with TickerProviderStateMixin {
  int _currentindex = 0;
  List<Widget> _tabList = [
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),
    Container(
      alignment: Alignment.bottomCenter,
      child:LineChartSample2()),

  ];
  TabController _tabController;
  
  @override
  void initState(){
    super.initState();
    _tabController = TabController(vsync:this,length: 7);
  }
  @override
  void dispose(){
    _tabController.dispose();
    super.dispose();
  }
  
  @override
  Widget build(BuildContext context) {
    Size size = MediaQuery.of(context).size;
    return Container(
      child:Column(
        children: [
          Container(
            height: 270,
            width:size.width,
          child:TabBarView(
                  
                  controller: _tabController,
                  children:_tabList
              ),
          ),

          Container(
      alignment: Alignment.topLeft,
      child: Container(
        height: 50,
        width:size.width,
        child: Container(
          child: Scaffold(
            appBar: AppBar(
              toolbarHeight: 50,
              // leadingWidth: 10,
              backgroundColor: Colors.white,
              elevation: 0,
              titleSpacing: 0,
              centerTitle: false,

              bottom: PreferredSize(
                preferredSize: Size.fromHeight(40),
                child: Align(
                  alignment: Alignment.center,
                  child: TabBar(
                    controller: _tabController,

                    indicatorColor: HexColor("#199C78"),
                    indicatorWeight: 4,
                    unselectedLabelColor: HexColor("#8C8C8C"),
                    labelColor:HexColor("#3A3A3A"),
                    labelPadding: EdgeInsets.only(left: 0, right: 0),
                    labelStyle: TextStyle(fontSize: 14,fontWeight: FontWeight.bold),
                    unselectedLabelStyle: TextStyle(fontSize: 14),
                    isScrollable: false,

                    tabs: [
                      Tab(child:Container(

                        child: Text("1D"),
                      )),

                      Tab(child:Container(

                        child: Text("1W"),
                      )),
                      Tab(child:Container(

                        child: Text("1M"),
                      )),
                      Tab(child:Container(
                        child: Text("3M"),
                      )),
                      // SizedBox(width:10),
                      Tab(child:Container(
                        child: Text("6M"),
                      )),
                      Tab(child:Container(
                        child: Text("1YR"),)),
                      Tab(child:Container(
                        child: Text("All"),))
                    ],
                  ),
                ),
              ),
            ),

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

Upvotes: 1

Dipesh KC
Dipesh KC

Reputation: 2463

You can use BottomNavigationBar() in this way. You need to manage everything ( like listening to tab events and rendering page accordingly).

Prototype:

class _TabsScreenState extends State<TabsScreen> {
  final var  _pages = [Screen1(),Screen2()];

  int page_index = 0;

  void _pageSelect(int index) {
    setState(() {
      page_index = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(),
      ),
      body: _pages[page_index],
      bottomNavigationBar: BottomNavigationBar(
        onTap: _pageSelect,
        backgroundColor: '',
        unselectedItemColor: '',
        selectedItemColor: '',
        currentIndex: page_index,

        items: [
          BottomNavigationBarItem(
            backgroundColor: '',
            icon: Icon(''),
            title: Text(''),
          ),
          BottomNavigationBarItem(
            backgroundColor: '',
            icon: Icon('),
            title: Text(''),
          ),
        ],
      ),
    );
  }
}

Upvotes: 1

UTKARSH Sharma
UTKARSH Sharma

Reputation: 836

If you know how to use a tab bar then its simple for you. For your need you can use tab bar in any row column in any way it's up to you.You just need to provide controller to both tab bar and tabBarView and both these controller must be same irrespective of how you use tab bar.You can put tab-bar in almost any widget I have done it myself and put it in a row.

Upvotes: 0

Related Questions