Related
I am relatively new in Flutter and I write simple TabBarView like this.
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
theme: ThemeData(
primaryColor: HexColor("#2E58A1"),
),
home: DefaultTabController(
length: 4,
child: new Scaffold(
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
new Page1(),
new Page2(),
new Page3(),
new Container(
color: Colors.red,
),
],
),
bottomNavigationBar: new TabBar(
tabs: [
Tab(
icon: new Icon(Icons.home),
),
Tab(
icon: new Icon(Icons.rss_feed),
),
Tab(
icon: new Icon(Icons.perm_identity),
),
Tab(icon: new Icon(Icons.settings),)
],
labelColor: HexColor("#2E58A1"),
unselectedLabelColor: HexColor("#CBCCCD"),
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: HexColor("#2E58A1"),
),
backgroundColor: Colors.white,
),
),
);
}
In native iOS application, it doesn't overlap tabbar and slider like this.
How shall I re-write my code?
wrap your MaterialApp with SafeArea widget.
or you can just wrap your TabBar with SafeArea
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
theme: ThemeData(),
home: SafeArea(
child: DefaultTabController(
length: 4,
child: new Scaffold(
body: TabBarView(
physics: NeverScrollableScrollPhysics(),
children: [
new Page1(),
new Page2(),
new Page3(),
new Container(
color: Colors.red,
),
],
),
bottomNavigationBar: new TabBar(
tabs: [
Tab(
icon: new Icon(Icons.home),
),
Tab(
icon: new Icon(Icons.rss_feed),
),
Tab(
icon: new Icon(Icons.perm_identity),
),
Tab(
icon: new Icon(Icons.settings),
)
],
labelColor: HexColor("#2E58A1"),
unselectedLabelColor: HexColor("#CBCCCD"),
indicatorSize: TabBarIndicatorSize.label,
indicatorPadding: EdgeInsets.all(5.0),
indicatorColor: HexColor("#2E58A1"),
),
backgroundColor: Colors.white,
),
),
),
);
}
}
Wrap your widget into SafeArea it adds sufficient padding to avoid intrusions by the operating system
Would also suggest setting
BottomNavigationBar(
...
elevation: 0,
as per this report: https://github.com/flutter/flutter/issues/21688
I have my flutter app with 3 tabs. When the app loads, I want it to load all 3 pages and not only the one it will show.
My problem is, that when swiping to my other tab, it takes a second to load the content and then it animates.
What is the proper way to preload a tab for this case?
Or is it done by saving the widget into a variable?
I use it like this, it won't take any second to load the tab page.
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3, //The number of tabs
child: Scaffold(
appBar: AppBar(
title: Text('Your tabs page title'),
bottom: TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.someIcone),
text: 'Page-1',
),
Tab(
icon: Icon(Icons.list),
text: 'Page-2',
),
Tab(
icon: Icon(Icons.list),
text: 'Page-3',
),
],
),
),
body: TabBarView(
children: <Widget>[
PageOne(),
PageTwo(),
PageThree(),
],
),
),
);
}
I'm a beginner trying to practice coding with Flutter so it would be helpful if the explanation or suggestion is easy to understand. :) Thanks in advance!
[Goal]
I've created a two folders and one of them is for parts that can be used in multiple places without having to create them every time. And the other one includes files with different pages (I like to keep them separate).
[Question]
I'm currently trying to navigate by using the side drawer and want to go to other pages, however it's not working and I'm getting blanks in black :( Please help...
In this case, should I use the "routes:" argument or should I use the MaterialPageRoute() or is there something else that can be suggested?
I apologize for posting the entire code, but I thought it would be best to understand the whole context. If there's anything that seems odd or have a better idea. Please do let me know!
[Code of Drawer]
class AppDrawer extends StatefulWidget {
#override
_AppDrawerState createState() => _AppDrawerState();
}
class _AppDrawerState extends State<AppDrawer> {
#override
Widget build(BuildContext context) {
return Drawer(
child: ListView(
children: <Widget>[
UserAccountsDrawerHeader(
accountName: Text('John T.'),
accountEmail: Text('*********#gmail.com'),
currentAccountPicture: GestureDetector(
child: CircleAvatar(
backgroundColor: Colors.grey,
child: Icon(Icons.person, color: Colors.white))),
decoration: BoxDecoration(color: Colors.red)),
ListTile(
leading: Icon(Icons.home, color: Colors.redAccent),
title: Text('Home'),
trailing: null,
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
Home();
},
),
);
},
),
ListTile(
leading: Icon(Icons.person, color: Colors.redAccent),
title: Text('My Acount'),
trailing: null,
onTap: () {
Navigator.of(context).pop();
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) {
MyAccount();
},
),
);
},
),
ListTile(
leading: Icon(Icons.fitness_center, color: Colors.redAccent),
title: Text('My Workout'),
trailing: null,
onTap: () {},
),
ListTile(
leading: Icon(Icons.cancel, color: Colors.redAccent),
title: Text('My Nutrition'),
trailing: null,
onTap: () {},
),
Divider(color: Colors.red, indent: 20.0),
ListTile(
leading: Icon(Icons.settings, color: Colors.blue),
title: Text('Settings'),
trailing: null,
onTap: () {},
),
ListTile(
leading: Icon(Icons.help, color: Colors.green),
title: Text('About'),
trailing: null,
onTap: () {},
),
],
),
);
}
}
[Code of Home Page]
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
elevation: 5.0,
title: Text('Home'),
backgroundColor: Colors.red,
centerTitle: true,
),
endDrawer: AppDrawer(),
body: Container(
color: Colors.white,
child: Center(
child: ListView(
children: <Widget>[],
),
),
),
);
}
}
[My Account Page]
class MyAccount extends StatefulWidget {
final String value;
MyAccount({Key key, this.value}) : super (key: key);
#override
_MyAccountState createState() => _MyAccountState();
}
class _MyAccountState extends State<MyAccount> {
final TextEditingController _ageFieldController = TextEditingController();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('My Account'),
centerTitle: true,
backgroundColor: Colors.blue,
),
endDrawer: AppDrawer(),
body: Container(
color: Colors.white,
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
child: Column(
children: <Widget>[
TextField(
controller: _ageFieldController,
decoration: InputDecoration(
hintText: 'Example: 27',
),
autocorrect: true,
keyboardType: TextInputType.number,
),
Text('${widget.value}')
],
),
),
],
),
),
),
);
}
}
[Code of Main.dart]
void main(List<String> args) {
runApp(Bmi());
}
class Bmi extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BMI',
theme: ThemeData(
primarySwatch: Colors.deepPurple,
),
home: Home(),
);
}
}
The Material Design guidelines suggest a Drawer for navigation between sites of equal importance, so Navigator.push() should not be used, because the animation it does looks like it's a linear navigation(like going to the next page, not one of equal importance.)
Here's a link regarding this topic: material.io site for Navigation Drawer Component
I always update my body according to the currently selected item in the drawer, similar as you would do it with a BottomNavigationBar.
An implementation of that would look similar to this:
return Scaffold(
drawer: Drawer(),
body: Stack(
children: <Widget>[
Offstage(
offstage: index != 0,
child: _buildAccountPage(),
),
Offstage(
offstage: index != 0,
child: _buildHomePage(),
),
],
),
);
You need to return New Page to the Builder Function of Navigator.
Correct Code:
ListTile(
leading: Icon(Icons.person, color: Colors.redAccent),
title: Text('My Acount'),
onTap: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => MyAccount()));
},
),
I have added AppBar in my flutter application. My screen already have a background image, where i don't want to set appBar color or don't want set separate background image to appBar.
I want show same screen background image to appBar also.
I already tried by setting appBar color as transparent but it shows color like gray.
Example code:
appBar: new AppBar(
centerTitle: true,
// backgroundColor: Color(0xFF0077ED),
elevation: 0.0,
title: new Text(
"DASHBOARD",
style: const TextStyle(
color: const Color(0xffffffff),
fontWeight: FontWeight.w500,
fontFamily: "Roboto",
fontStyle: FontStyle.normal,
fontSize: 19.0
)),
)
This is supported by Scaffold now (in stable - v1.12.13+hotfix.5).
Set Scaffold extendBodyBehindAppBar to true,
Set AppBar elevation to 0 to get rid of shadow,
Set AppBar backgroundColor transparency as needed.
#override
Widget build(BuildContext context) {
return Scaffold(
extendBodyBehindAppBar: true,
backgroundColor: Colors.red,
appBar: AppBar(
// backgroundColor: Colors.transparent,
backgroundColor: Color(0x44000000),
elevation: 0,
title: Text("Title"),
),
body: Center(child: Text("Content")),
);
}
you can use Stack widget to do so. Follow below example.
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
home: new Home(),
);
}
}
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
Scaffold(
backgroundColor: Colors.transparent,
appBar: new AppBar(
title: new Text(
"Hello World",
style: TextStyle(color: Colors.amber),
),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
body: new Container(
color: Colors.red,
),
),
],
),
);
}
}
You can use Scaffold's property "extendBodyBehindAppBar: true"
Don't forget to wrap child with SafeArea
#Override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
widget.title,
style: TextStyle(color: Colors.black),
),
backgroundColor: Colors.transparent,
elevation: 0.0,
),
extendBodyBehindAppBar: true,
body: Container(
width: double.infinity,
height: double.infinity,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('assets/background/home.png'),
fit: BoxFit.cover,
),
),
child: SafeArea(
child: Center(
child: Container(
width: 300,
height: 300,
decoration: BoxDecoration(
color: Colors.green,
),
child: Center(child: Text('Test')),
),
)),
),
);
}
None of these seem to work for me, mine went something like this:
return Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
iconTheme: IconThemeData(color: Colors.white),
elevation: 0.0,
),
body: Stack(
children: <Widget>[
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(
'https://images.unsplash.com/photo-1517030330234-94c4fb948ebc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1275&q=80'),
fit: BoxFit.cover,
),
),
child: Padding(
padding: const EdgeInsets.fromLTRB(0, 100, 0, 0),
child:
// Column of widgets here...
),
),
],
),
);
Output:
A lot of answers but nobody explains why extendBodyBehindAppBar works?
It works because when we assigned extendBodyBehindAppBar as true, then the body of the widget takes the height of AppBar, and we see an image covering the AppBar area.
Simple Example:
Size size = MediaQuery.of(context).size;
return Scaffold(
extendBodyBehindAppBar: true,
body: Container(
// height: size.height * 0.3,
child: Image.asset(
'shopping_assets/images/Fruits/pineapple.png',
fit: BoxFit.cover,
height: size.height * 0.4,
width: size.width,
),
),
);
There could be many cases, for example, do you want to keep the AppBar or not, whether or not you want to make the status bar visible, for that, you can wrap Scaffold.body in SafeArea and if you want AppBar to not have any shadow (unlike the red I provided in example 2), you can set its color to Colors.transparent:
Full image (without AppBar)
Scaffold(
extendBodyBehindAppBar: true,
body: SizedBox.expand(
child: Image.network(
'https://wallpaperaccess.com/full/3770388.jpg',
fit: BoxFit.cover,
),
),
)
Full image (with AppBar)
Scaffold(
extendBodyBehindAppBar: true,
appBar: AppBar(
backgroundColor: Colors.transparent,
shadowColor: Colors.red,
title: Text('MyApp'),
),
body: SizedBox.expand(
child: Image.network(
'https://wallpaperaccess.com/full/3770388.jpg',
fit: BoxFit.cover,
),
),
)
that's what I did and it's working
This is supported by Scaffold now (in stable - v1.12.13+hotfix.5).
Set Scaffold extendBodyBehindAppBar to true,
Set AppBar elevation to 0 to get rid of shadow,
Set AppBar backgroundColor transparency as needed.
Best regards
Scaffold(extendBodyBehindAppBar: true);
In my case I did it as follows:
Additional create an app bar with a custom back button (in this case with a FloatingActionButton). You can still add widgets inside the Stack.
class Home extends StatefulWidget {
#override
_EditProfilePageState createState() => _EditProfilePageState();
}
class _HomeState extends State< Home > {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
this._backgroundImage(), // --> Background Image
Positioned( // --> App Bar
child: AppBar(
backgroundColor: Colors.transparent,
elevation: 0.0,
leading: Padding( // --> Custom Back Button
padding: const EdgeInsets.all(8.0),
child: FloatingActionButton(
backgroundColor: Colors.white,
mini: true,
onPressed: this._onBackPressed,
child: Icon(Icons.arrow_back, color: Colors.black),
),
),
),
),
// ------ Other Widgets ------
],
),
);
}
Widget _backgroundImage() {
return Container(
height: 272.0,
width: MediaQuery.of(context).size.width,
child: FadeInImage(
fit: BoxFit.cover,
image: NetworkImage(
'https://images.unsplash.com/photo-1527555197883-98e27ca0c1ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'),
placeholder: AssetImage('assetName'),
),
);
}
void _onBackPressed() {
Navigator.of(context).pop();
}
}
In the following link you can find more information Link
You can Try this This code work for me
#override
Widget build(BuildContext context) {
_buildContext = context;
sw = MediaQuery.of(context).size.width;
sh = MediaQuery.of(context).size.height;
return new Container(
child: new Stack(
children: <Widget>[
new Container(
child: Stack(
children: <Widget>[
Container(
padding: EdgeInsets.all(20.0),
decoration: BoxDecoration(image: backgroundImage),
),
],
),
),
new Scaffold(
backgroundColor: Colors.transparent,
appBar: new AppBar(
title: new Text(Strings.page_register),
backgroundColor: Colors.transparent,
elevation: 0.0,
centerTitle: true,
),
body: SingleChildScrollView(
padding: EdgeInsets.all(20.0),
physics: BouncingScrollPhysics(),
scrollDirection: Axis.vertical,
child: new Form(
key: _formKey,
autovalidate: _autoValidate,
child: FormUI(),
),
),
)
],
),
);
}
backgroundImage
DecorationImage backgroundImage = new DecorationImage(
image: new ExactAssetImage('assets/images/welcome_background.png'),
fit: BoxFit.cover,
);
use stack
set background image
Another Scaffold()
set background color transperant
set custom appbar
use column with singleChildScrollView or ListView
#override Widget build(BuildContext context) {
return Scaffold(
body: Stack(
children: <Widget>[
backgroundBGContainer(),
Scaffold(
backgroundColor: Colors.transparent,
appBar: appBarWidgetCustomTitle(context: context, titleParam: ""),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
_spaceWdgt(),
Center(
child: Stack(
children: <Widget>[
new Image.asset(
"assets/images/user_icon.png",
width: 117,
height: 97,
),
],
),
),
Widget backgroundBGContainer() {
return Container(
decoration: new BoxDecoration(
image: new DecorationImage(
image: new AssetImage("assets/images/ground_bg_image.png"),
fit: BoxFit.cover,
),
color: MyColor().groundBackColor),
);
}
don't forget to set foregroundColor attribite to the desired color in order to make the navigation icon and the title visible
Note that the foregroundColor default value is white.
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(...)
)
)