i have tried to recreate this design but failed to add TabBar and TabBarView below image inside the body .
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"),
)
]),
))
],
),
],
)
);
}
You can easily create TabBar without AppBar. Just use Container as parent. please check this.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With