Related
This is my code, copied from here:
SliverAppBar(
expandedHeight: 150.0,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Available seats'),
),
actions: < Widget > [
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () { /* ... */ },
),
]
)
But I need to add a Drawer. How can I do that?
I am trying to rebuild my app in Flutter.
Converting java android app to flutter
I replaced the icon but how can I create a Drawer?
leading: IconButton(icon: Icon( Icons.menu ),onPressed: ()=>{},)
My full code
#override
Widget build(BuildContext context) {
return NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () => {},
),
actions: <Widget>[
IconButton(
onPressed: () => {},
icon: Icon(Icons.shopping_cart),
)
],
expandedHeight: 200.0,
floating: false,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
centerTitle: true,
title: Text("My Pet Shop",
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
)),
background: Image.network(
"https://firebasestorage.googleapis.com/v0/b/my-pet-world.appspot.com/o/images%2Fbannerads%2FxTmAblJI7fMF1l0nUa1gM32Kh9z1%2F734rm6w7bxznp%2FPETWORLD-HOME-SLIDER-KITTENS.webp?alt=media&token=cf7f48bb-6621-47b3-b3f8-d8b36fa89715",
fit: BoxFit.cover,
)),
),
];
},
body: Container(
margin: EdgeInsets.only(top: 0),
child: Column(
children: <Widget>[
Expanded(
//getHomePageWidget()
child: ListView(
padding: EdgeInsets.all(0.0),
children: <Widget>[getHomePageWidget()],
),
)
],
),
));
}
Drawer is a property for Scaffold. Once you set a drawer property, the menu icon will automatically appear in the SliverAppBar.
Return this inside your build method, and you will get what you are looking for.
return Scaffold(
body: CustomScrollView(
slivers: <Widget>[
SliverAppBar(
expandedHeight: 200.0,
flexibleSpace: const FlexibleSpaceBar(
title: Text('Available seats'),
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.add_circle),
tooltip: 'Add new entry',
onPressed: () {},
),
],
),
SliverList(
delegate: SliverChildListDelegate([
getHomePageWidget(),
]),
),
],
),
drawer: Drawer(),
);
NOTE: if you have multiple Scaffold in the tree above the CustomScrollView than the Drawer should be in the most bottom Scaffold
I have this simple form, with a textarea and buttons:
When I open the keyboard, I want to decrease the size of the textarea, like a responsive layout. If I close the keyboard, the textarea should fill the remaining screen space available.
desired effect: open / active keyboard
desired effect: closed/no keyboard
My intention is to make the components fill in the screen, regardless device resolution.
Can someone provide a valida example of it? I tried several implementations and I was not able to achive the desired effect.
UPDATE:
My current code for this screen:
new MaterialPageRoute(
builder: (context) {
return new Scaffold(
resizeToAvoidBottomPadding: true,
appBar: new AppBar(
title: new Text('Add new Grocery List'),
actions: <Widget>[
new IconButton(
icon: new Icon(Icons.delete),
tooltip: 'Clear Grocery List',
onPressed: () {
this._promptRemoveGroceryBatchList();
},
),
]
),
body: new Container(
padding: const EdgeInsets.all(5.0),
child: new Form(
key: this._formGroceryBatchAdd,
child: new ListView(
children: <Widget>[
new Container(
child: new Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
new TextFormField(
maxLines: 10,
autofocus: true,
decoration: new InputDecoration(
labelText: 'Item List',
hintText: 'Enter a grocery list',
contentPadding: const EdgeInsets.all(16.0)
),
validator: (value) {
if (value.isEmpty) {
return 'Please enter at least one grocery item';
}
},
onSaved: (value) {
this._formBatchGroceryData = value;
},
),
new Padding(
padding: new EdgeInsets.all(8.0),
child: new Text(
'One item per line. Use ":" to specifcy the amount.\n' +
'Example:\n' +
'Potatoes:12\n' +
'Tomatoes:6',
style: new TextStyle(fontSize: 12.0, color: Colors.black54),
),
),
],
),
),
new Container(
child: new ButtonBar(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
new RaisedButton(
child: new Text('Add Items'),
color: Theme.of(context).primaryColor,
textColor: Colors.white,
elevation: 4.0,
onPressed: () {
// ACTION GOES HERE
},
),
new RaisedButton(
child: new Text('Cancel'),
onPressed: () {
// ACTION GOES HERE
},
),
]
),
),
]
)
);
)
);
}
)
I'm afraid it can't be directly done using a TextField for the textarea because its size depends on the lines of text you have.
But you can simulate it by surrounding the TextField that allows unlimited lines with a Container.
This is a sample that could work for you:
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
home: new MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Flutter Demo Home Page'),
),
body: new Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Container(
decoration: BoxDecoration(
border: Border.all(),
borderRadius: BorderRadius.circular(4.0),
),
child: Padding(
padding: const EdgeInsets.only(
left: 10.0, bottom: 20.0, right: 10.0),
child: new TextField(
maxLines: null,
decoration: InputDecoration(
border: InputBorder.none,
),
),
),
),
),
),
],
),
);
}
}
I am trying to change the background color of the tab bar in flutter, I have tried the following ( which was accepted as an answer on this forum ) but it didnt work:
here is the code
return new MaterialApp(
theme: new ThemeData(
brightness: Brightness.light,
primaryColor: Colors.pink[800], //Changing this will change the color of the TabBar
accentColor: Colors.cyan[600],
),
EDIT :
When I change the theme data colors the background color doesnt change. Im trying to create a horizontal scrolling sub menu underneath the app bar and it was suggested I use a Tab bar.
Here is the entire dart file:
import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
class Index extends StatelessWidget {
//final User user;
// HomeScreen({Key key, #required this.user}) : super(key: key);
#override
Widget build(BuildContext context) {
// TODO: implement build
// String emoji = emojify(":cool:");
return new MaterialApp(
theme: new ThemeData(
brightness: Brightness.light,
primaryColor: Colors.white, //Changing this will change the color of the TabBar
accentColor: Colors.cyan[600],
),
home: DefaultTabController(
length: 2,
child: Scaffold(
appBar: new AppBar(
backgroundColor: const Color(0xFF0099a9),
title: new Image.asset('images/lb_appbar_small.png', fit: BoxFit.none,),
bottom: TabBar(
tabs: [
Tab( text: "Tab 1",),
Tab(text: "Tab 2"),
],
),
),
body: Column(children: <Widget>[
Row(
//ROW 1
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.checkSquare,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
),
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.glasses,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.moon,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed");
Text("Check Out");
}
)
),
]
),
Row(//ROW 2
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.users,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.trophy,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.calendar,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
)
]),
Row(// ROW 3
children: [
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.fileExcel,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.shoppingCart,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
Container(
margin: EdgeInsets.all(25.0),
child: IconButton(
icon: new Icon(FontAwesomeIcons.list,),
iconSize: 60.0,
color: const Color(0xFF0099a9),
onPressed: () { print("Pressed"); }
)
),
]),
],
),
bottomNavigationBar: new BottomNavigationBar(
items: [
new BottomNavigationBarItem(
icon: new Icon(Icons.feedback, color: const Color(0xFF0099a9),),
title: new Text("feedback")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.help, color: const Color(0xFF0099a9),),
title: new Text("help")
),
new BottomNavigationBarItem(
icon: new Icon(Icons.people, color: const Color(0xFF0099a9),),
title: new Text("community",)
)
]
)
)
)
);
}
}
You have the TabBar inside your AppBar for that reason it take the same color, just move the TabBar outside the Appbar
Scaffold(
appBar: new AppBar(
backgroundColor: const Color(0xFF0099a9),
title: new Image.asset(
'images/lb_appbar_small.png',
fit: BoxFit.none,
),
),
body: Column(
children: <Widget>[
TabBar(
tabs: [
Tab(
text: "Tab 1",
),
Tab(text: "Tab 2"),
],
),
Row(
//ROW 1
....
Hi you are getting same color since you have added tabbar in appbar,If you are looking for different color for both TabBar and Appbar. Here is what you have to do.
*Add TabBar in body of Scafold.
Sample Code:
class _SwapOfferPageState extends State<SwapOfferPage> with SingleTickerProviderStateMixin{
TabController _tabController;
#override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Swap or Offer shift"),
centerTitle: true,
),
body: Column( // Column
children: <Widget>[
Container(
color: Color(0xffF5F5F5), // Tab Bar color change
child: TabBar( // TabBar
controller: _tabController,
labelColor: const Color(0xff959595),
indicatorWeight: 2,
indicatorColor: Color(0xff4961F6),
tabs: <Widget>[
Tab(
text: "SWAP MY SHIFT",
),
Tab(
text: "OFFER MY SHIFT",
),
],
),
),
Expanded(
flex: 3,
child: TabBarView( // Tab Bar View
physics: BouncingScrollPhysics(),
controller: _tabController,
children: <Widget>[
Text('Tab1'),
Text('Tab2'),
],
),
),
],
),
);
}
}
For anyone who is still looking for How to separate a TabBar from Appbar , please check the below code-
appBar: new AppBar(
title: new Text("some title"),
body: new Column(
children: [
/// this is will not colored with theme data
new TabBar(...),
Expanded(
new TabBarView(...)
)
]
)
)
You can change the Tabbar background-color, when Tabbar is inside the Material widget.
Material(
color: Colors.white, //Tabbar background-color
child: TabBar(
isScrollable: true,
labelStyle: Theme.of(context).tabBarTheme.labelStyle,
unselectedLabelStyle:
Theme.of(context).tabBarTheme.unselectedLabelStyle,
labelColor: Theme.of(context).tabBarTheme.labelColor,
unselectedLabelColor:
Theme.of(context).tabBarTheme.unselectedLabelColor,
indicatorColor: Theme.of(context).primaryColor,
tabs: [
Tab(text: 'tab 1'),
Tab(text: 'tab 2'),
Tab(text: 'tab 3'),
Tab(text: 'tab 4'),
],
),
),
Or you can even simply wrap the TabBar in a Container widget, and apply the "color" you want.
I would like to create a notch inside the TabBar to place the FloatingActionBottom in it but I don't know how to do that.
I found nothing in the documentations or on the internet.
You can use the Bottom App Bar for this kind of User Interface
The hasNotch property of the BottomAppBar must be true.
This would get you what I am upto
Widget build(BuildContext context) {
return new Scaffold(
appBar: AppBar(title: const Text('Bottom App Bar')),
floatingActionButtonLocation:
FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
child: const Icon(Icons.add), onPressed: () {},),
bottomNavigationBar: BottomAppBar(
hasNotch: true,
child: new Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.menu), onPressed: () {},),
IconButton(icon: Icon(Icons.search), onPressed: () {},),
],
),
),
);
}
Thank You!
Try implementing this revised version of the code. The FAB should persist across the three tabs
class BarTab extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
title: Text('Tabs Demo'),
),
body: TabBarView(
children: [
Icon(Icons.audio),
Icon(Icons.play),
Icon(Icons.maps),
],
),
floatingActionButton: FloatingActionButton(
onpressed:(){},
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar:BottomAppBar(
color:Colors.blue,
hasNotch: true,
child:Container(
height:50.0
child:Row(
children: <Widget>[
IconButton(
icon: Icon(Icons.menu),
onPressed: (){})
]
)
)
),
),
);
}
2020 solution:
hasNotch property is no more in BottomAppBar, however, you can do this in Scaffold
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(), //this is what creates the notch
color: Colors.blue,
child: SizedBox(
height: height * 0.1,
width: width,
),
),
floatingActionButton: Container(
margin: EdgeInsets.all(10),
width: 80.0,
height: 80.0,
child: FloatingActionButton(
onPressed: () {},
child: Icon(
Icons.add,
size: 25.0,
),
),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked
output :
I am trying to create a tabbed bar layout screen without the AppBar though. I have already referred to the solution on this link: how to create the tab bar without app bar in flutter? but it is not working for me. Here is what my screen looks like when I place TabBar in the appbar: parameter:
My TabBar has moved to the top left corner under the status bar and its all squeezed in one corner. It's almost as if it's not there at all.
When I use the AppBar class but only pass the bottom: parameter here is what happens:
There is an ugly space on top of the TabBar which is obviously meant for the AppBar title. Here is my code:
return new Scaffold(
appBar: new TabBar(
tabs: widget._tabs.map((_Page page){
return Text(page.tabTitle);
}).toList(),
controller: _tabController,
isScrollable: true,
),
backgroundColor: Colors.white,
body: new TabBarView(
controller: _tabController,
children: widget._tabs.map((_Page page){
return new SafeArea(
top:false,
bottom: false,
child: (page.page == Pages.cart?new CartHomeScreen():_lunchesLayout())
);
}).toList()
),
);
How can I just have TabBar without that space on top and is it possible to make the two tab items and their indicators to stretch and fill the side spaces?
Your first screenshot actually shows it working just fine - the issue is that 'fine' isn't quite what you expect. The default text color is white for tabbar, so your labels aren't showing and instead just the bottom line is, which is what you see at the top left. Also, TabBar is a preferred size widget already, but it doesn't have the same height as an AppBar so if that's what you're going for, it won't look like it.
Here's an example that makes it look like the app bar. kToolbarHeight is the same constant that AppBar uses.
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")],
)
],
),
),
),
);
}
}
Which results in this:
Edit:
As noted in the comments and from this github issue, you could also use the flexibleSpace property of the AppBar to hold the tabbar to basically the same effect:
return new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new AppBar(
flexibleSpace: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
new TabBar(
tabs: [
new Tab(icon: new Icon(Icons.directions_car)),
new Tab(icon: new Icon(Icons.directions_transit)),
new Tab(icon: new Icon(Icons.directions_bike)),
],
),
],
),
),
),
);
Follow below code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
TabController _tabController;
#override
void initState() {
_tabController = new TabController(length: 2, vsync: this);
super.initState();
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Container(
height: MediaQuery.of(context).size.height / 2,
child: Center(
child: Text(
"Tabbar with out Appbar",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
),
color: Colors.blue,
),
TabBar(
unselectedLabelColor: Colors.black,
labelColor: Colors.red,
tabs: [
Tab(
text: '1st tab',
),
Tab(
text: '2 nd tab',
)
],
controller: _tabController,
indicatorSize: TabBarIndicatorSize.tab,
),
Expanded(
child: TabBarView(
children: [
Container(child: Center(child: Text('people'))),
Text('Person')
],
controller: _tabController,
),
),
],
),
),
);
}
#override
void dispose() {
_tabController.dispose();
super.dispose();
}
}
view the result
I take the code from rmtmckenzie but only to create a widget without material app
return new DefaultTabController(
length: 3,
child: new Scaffold(
appBar: new PreferredSize(
preferredSize: Size.fromHeight(kToolbarHeight),
child: new Container(
height: 50.0,
child: new TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car,color: Colors.grey,)),
Tab(icon: Icon(Icons.directions_transit,color: Colors.grey)),
Tab(icon: Icon(Icons.directions_bike,color: Colors.grey)),
],
),
),
),
body: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
);
You won't need to use appBar property:
Scaffold(
body: Column(
children: [
TabBar( // <-- Your TabBar
tabs: [
Tab(icon: Icon(Icons.camera)),
Tab(icon: Icon(Icons.settings)),
],
),
Expanded(
child: TabBarView( // <-- Your TabBarView
children: [
Container(color: Colors.blue),
Container(color: Colors.red),
],
),
),
],
),
)
Just use toolbarHeight property in AppBar widget with kMinInteractiveDimension value as shown below:
Scaffold(
appBar: AppBar(
toolbarHeight: kMinInteractiveDimension,
bottom: TabBar(
controller: _tabController,
tabs: [], // your tab bars
),
),
body: TabBarView(
controller: _tabController,
children: [], // your tab views
),
);
Just use the flexiblespace prop and not the bottom prop of the appBar.
All in the safeArea widget and you can add some vertical padding.
home: SafeArea(
top: true,
child: Padding(
padding: const EdgeInsets.only(top: 10.0),
child: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
flexibleSpace: TabBar(
tabs: [
Tab(icon: Icon(Icons.1)),
Tab(icon: Icon(Icons.2)),
Tab(icon: Icon(Icons.3)),
],
),
),
body: TabBarView(
children: [
Icon(Icons.1),
Icon(Icons.2),
Icon(Icons.3),
],
),
),
),
),
)
Directly use TabBar in appBar property:
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: TabBar(
tabs: [
Tab(icon: Icon(Icons.call)),
Tab(icon: Icon(Icons.message)),
],
),
body: TabBarView(
children: [
Center(child: Text('Call')),
Center(child: Text('Message')),
],
),
),
);
}
From CopsOnRoad's answer, I've created a hidden TabBar like this:
Scaffold(
body: Column(
children: [
TabBar( // <-- Hidden TabBar
indicator: BoxDecoration(),
tabs: [
SizedBox.shrink(),
SizedBox.shrink(),
],
),
Expanded(
child: TabBarView( // <-- Your TabBarView
children: [
Container(color: Colors.blue),
Container(color: Colors.red),
],
),
),
],
),
)
It's very simple, all what you have to provide is height to your TabView.
Here is a simple example. You can either use DefaultTabController or TabController. In order to fully customizable, I'll use TabController.
_getTabBar function return list of tabs.
TabBar _getTabBar() {
return TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.home, color: Colors.redAccent)),
Tab(icon: Icon(Icons.settings, color: Colors.redAccent)),
],
controller: tabController,
);
}
_getTabBarView take list of widgets as input argument and creates a tab view.
TabBarView _getTabBarView(tabs) {
return TabBarView(
children: tabs,
controller: tabController,
);
}
SafeArea is used to move content below status bar. _getTabBarView is wrapped with a Container so that we can allocate a height. This is one way of allocating height, you can use some other way also.
So here is the full code, wrap within a MaterialApp and you have got a fully customizable tab bar and view. life-cycle methods are used to create and dispose TabController
import 'package:flutter/material.dart';
class TabControllerScreen extends StatefulWidget {
#override
_TabControllerScreenState createState() => _TabControllerScreenState();
}
class _TabControllerScreenState extends State<TabControllerScreen> with SingleTickerProviderStateMixin {
TabController tabController;
#override
void initState() {
super.initState();
tabController = TabController(length: 2, vsync: this);
}
#override
void dispose() {
tabController.dispose();
super.dispose();
}
TabBar _getTabBar() {
return TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.home, color: Colors.redAccent)),
Tab(icon: Icon(Icons.settings, color: Colors.redAccent)),
],
controller: tabController,
);
}
TabBarView _getTabBarView(tabs) {
return TabBarView(
children: tabs,
controller: tabController,
);
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Column(
children: <Widget>[
_getTabBar(),
Container(
height: 100,
child: _getTabBarView(
<Widget>[
Icon(Icons.home),
Icon(Icons.settings),
],
),
)
],
),
),
);
}
}
Here you go. This is a widget, without any scafold or material app around it, so make sure you provide that tree yourself. Otherwise it's ready for copy-paste
import 'package:flutter/material.dart';
class MyWidget extends StatefulWidget {
const MyWidget({super.key});
#override
State<MyWidget> createState() => _MyWidgetState();
}
class _MyWidgetState extends State<MyWidget>
with SingleTickerProviderStateMixin {
late final TabController _tabController;
#override
void initState() {
_tabController = TabController(length: 2, vsync: this);
super.initState();
}
#override
Widget build(BuildContext context) {
return Column(children: [
TabBar(controller: _tabController, tabs: const [
Tab(icon: Icon(Icons.cookie_outlined)),
Tab(icon: Icon(Icons.no_food))
]),
Expanded(
child: TabBarView(controller: _tabController, children: [
Container(color: Colors.greenAccent),
Container(color: Colors.yellowAccent)
]))
]);
}
}
Try to put TabBar inside AppBar in its flexibleSpace property.
Give toolbarHeight : 0 for Appbar
appBar: AppBar(
toolbarHeight: 0, // <--- Add this line to app bar
bottom: TabBar(tabs: [
Tab(
text: "Transactions",
),
Tab(
text: "Transfer",
)
]),
),
Recommended method using toolbarHeight property
By setting the toolbarHeight property of a AppBar to zero will remove them toolbar and leaving the tabbar at the bottom as set by theme.
Scafford(
appBar: AppBar(
toolbarHeight: 0,
bottom: TabBar(...)
)
)