Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to add tabbar without appbar in flutter

i have tried to recreate this design but failed to add TabBar and TabBarView below image inside the body .fl

like image 874
Sarah Avatar asked Mar 04 '23 05:03

Sarah


2 Answers

Try this

class Demo extends StatefulWidget {
@override
_DemoState createState() => _DemoState();
 }

class _DemoState extends State<Demo>
 with TickerProviderStateMixin {
TabController _tabController;

@override
void initState() {
// TODO: implement initState
super.initState();
_tabController = new TabController(length: 2, vsync: this);
}

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

 @override
 Widget build(BuildContext context) {
 return Scaffold(
  body:Column(
    children: <Widget>[
      Image.asset("path"),
      Container(child:
      Column(
              children: <Widget>[
                Container(
                  height: 60,
                  margin: EdgeInsets.only(left: 60),
                  child: TabBar(
                    tabs: [
                      Container(
                        width: 70.0,
                        child: new Text(
                          'Tab1',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                      Container(
                        width: 75.0,
                        child: new Text(
                          'Tab2',
                          style: TextStyle(fontSize: 20),
                        ),
                      )
                    ],
                    unselectedLabelColor: const Color(0xffacb3bf),
                    indicatorColor: Color(0xFFffac81),
                    labelColor: Colors.black,
                    indicatorSize: TabBarIndicatorSize.tab,
                    indicatorWeight: 3.0,
                    indicatorPadding: EdgeInsets.all(10),
                    isScrollable: false,
                    controller: _tabController,
                  ),
                ),
                Container(
                  height: 100,
                  child: TabBarView(
                      controller: _tabController,
                      children: <Widget>[
                        Container(
                          child: Text("login"),
                        ),
                        Container(
                          child: Text("sign up"),
                        )
                      ]),
                ))
              ],
            ),
    ],
  )
 );
}
like image 88
Gursewak Singh Avatar answered Mar 25 '23 22:03

Gursewak Singh


You can easily create TabBar without AppBar. Just use Container as parent. please check this.

like image 41
Payam Zahedi Avatar answered Mar 25 '23 20:03

Payam Zahedi