Flutter TabBar Without AppBar. Here is an example that makes it look like the app bar. kToolbarHeight is the same constant that AppBar uses.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatefulWidget { @override State<StatefulWidget> createState() => new MyAppState(); } class MyAppState extends State<MyApp> { @override Widget build(BuildContext context) { return new MaterialApp( title: 'msc', home: new DefaultTabController( length: 2, child: new Scaffold( appBar: new PreferredSize( preferredSize: Size.fromHeight(kToolbarHeight), child: new Container( color: Colors.green, child: new SafeArea( child: Column( children: <Widget>[ new Expanded(child: new Container()), new TabBar( tabs: [new Text("Lunches"), new Text("Cart")], ), ], ), ), ), ), body: new TabBarView( children: <Widget>[ new Column( children: <Widget>[new Text("Lunches Page")], ), new Column( children: <Widget>[new Text("Cart Page")], ) ], ), ), ), ); } } |
If you like this question & answer and want to contribute, then write your question & answer and email to freewebmentor[@]gmail.com. Your question and answer will appear on FreeWebMentor.com and help other developers.