how to create the tab bar without app bar in flutter? - flutter

I wish to add the tab app instead of app bar on my home screen. How to create it. Currently, my tab bar added at the bottom of app bar and I have removed the title and elevation. At the same time, I can't say appBar: null as I need some space on the top of the tab bar.
Widget HomeTap = new Scaffold(
appBar: new AppBar(
bottom: new TabBar(
indicatorColor: Colors.pinkAccent[100],
labelColor: Colors.pinkAccent[100],
indicatorWeight: 0.5,
unselectedLabelColor: Colors.grey[400],
tabs: [
new Tab(text: 'Album',),
new Tab(text: 'Artist'),
new Tab(text: 'Playlist'),
new Tab(text: 'Songs'),
new Tab(icon: new Icon(Icons.search))
]),
title: null,
elevation: 0.0,
),
body: new TabBarView(
children: [
new Center(
child: new AlbumWidget(),
),
new Container(),
new Container(),
new Container(),
new Container(),
],
),
);

Flutter works with composition. You can pretty much replace any widget with something else. They are not limited to one specific child.
So you can simply do
new Scaffold(
appBar: new TabBar(
...
),
...
)
The only requirement is for your widget to be of the right interface.
Scaffold requires as appBar a PreferredSizeWidget.
Fortunately, TabBar is already a PreferredSizeWidget by default. So no change needed

#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
title: Text('Tabs Demo'),
),
body:
Column(
children: <Widget>[
TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
Expanded(
flex: 1,
child: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
)
],
)
),
),
);
this worked for me

Tried flexibleSpace?
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
flexibleSpace: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TabBar(
tabs: [
Tab(text: "Pending"),
Tab(text: "Delivered"),
Tab(text: "Rejected"),
],
)
],
),
),
body: TabBarView(
children: [
PendingOrders(),
DeliveredOrders(),
RejectedOrders(),
],
),
),
);

Related

Show a message dialog before navigation to next tab flutter

I have a TabBarView(), and i need to show a MessageDialog (showDialog) asking if really want to leave this tab. is there any way to do it?
this is the body of my code
child: Scaffold(
drawer: SideMenu(),
appBar: AppBar(
title: Text("Antecedentes"),
bottom: TabBar(
isScrollable: true,
controller: _controller,
tabs: [
Tab(text: 'Tab # 1'),
Tab(text: 'Tab # 2'),
Tab(text: 'Tab # 3'),
),
),
body: TabBarView(
controller: _controller,
children: [
TabOnePage(),
TabTwoPage(),
TabThreePage(),
],
),
),
Im using version 2.2.3 of Flutter.
I appreciate help on this .
Show AlertDialog on Tabbar onTap action, and set TabBar index to previous one(this will allow TabBar to stay on the same tab):
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Tabbar Demo"),
bottom: TabBar(
onTap: (index) {
print(index);
showAlert(tabController.index);
tabController.index = tabController.previousIndex;
},
unselectedLabelColor: Colors.white,
labelColor: Colors.black,
tabs: [
Tab(icon: Icon(Icons.chat)),
Tab(icon: Icon(Icons.drafts)),
Tab(icon: Icon(Icons.ac_unit))
],
controller: tabController,
indicatorColor: Colors.black,
indicatorSize: TabBarIndicatorSize.tab,
),
),
body: TabBarView(
children: <Widget>[
CustomView("First"),
CustomView("Second"),
CustomView("Third"),
],
controller: tabController,
));
}
And upon selection of the "OK" button in the AlertDialog, set Tabbar index to the new one.
void showAlert(int newIndex) {
AlertDialog alertDialog = new AlertDialog(
content: new Container(
height: 80.0,
child: new Column(
children: <Widget>[
new Text("Want to leave this tab?"),
new RaisedButton(
child: new Text("OK"),
onPressed: () {
tabController.index = newIndex;
Navigator.pop(context);
},
)
],
),
),
);
showDialog(context: context, child: alertDialog);
}

Working with partial tabview and soft keyboard in to edit text in flutter

I have a screen where the bottom half of the content is wrapped in a TabBarView while the top half remains constant. I want to be able to edit text in the bottom half, but the soft keyboard doesn't resize the entire page - it only attempts to eat into the TabBarView's space
My code looks like this:
return DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Text(
'Edit Profile',
),
),
//major column
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
SizedBox(height: 20),
UserInfo()
TabBar(
labelPadding: EdgeInsets.zero,
labelColor: Colors.black,
tabs: [
Tab(text: 'INFO'),
Tab(text: 'BIO'),
Tab(text: 'ACCOUNT'),
],
),
Expanded(
//All tab view content
child: TabBarView(
children: [
Info(),
Bio(),
Account(),
],
),
),
),
);
I think you can wrap it inside a SingleChildScrollView:
SingleChildScrollView(
child:
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
SizedBox(height: 20),
UserInfo()
TabBar(
labelPadding: EdgeInsets.zero,
labelColor: Colors.black,
tabs: [
Tab(text: 'INFO'),
Tab(text: 'BIO'),
Tab(text: 'ACCOUNT'),
],
),
Expanded(
//All tab view content
child: TabBarView(
children: [
Info(),
Bio(),
Account(),
],
),
),
)
Or You can wrap the UserInfo() inside an Expanded:
Expanded(
child: UserInfo()
),

How do I place the text to the left of the tabbar?

void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Viewer',
theme:
ThemeData(primaryColor: Colors.cyan, accentColor: Colors.tealAccent),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: PreferredSize(
child: Container(
margin: EdgeInsets.fromLTRB(100, 0, 0, 0),
child: Row(
children: <Widget>[
//Icon(Icons.settings)
Text('Blah'),
TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.search)),
Tab(icon: Icon(Icons.file_download)),
Tab(icon: Icon(Icons.settings))
],
),
],
),
),
preferredSize: Size.fromHeight(-8),
),
),
body: TabBarView(
children: [
Icon(Icons.search),
Icon(Icons.file_download),
Icon(Icons.settings),
],
),
),
),
);
}
}
I want to place the text on the blah part visible in the image.
Either way, I want to put a text in the left part of the tabbar.
I tried using row, but an overflow error occurred.
This occurred an error message.
How can I enter the text in that space?
Here is the code which will work for you
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hitomi Viewer',
theme:
ThemeData(primaryColor: Colors.cyan, accentColor: Colors.tealAccent),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: PreferredSize(
preferredSize: Size.fromHeight(-8),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
margin: EdgeInsets.only(left: 20),
child: Center(child: Text('Title'))),
SizedBox(
width: 50,
),
Flexible(
child: TabBar(
tabs: [
Tab(icon: Icon(Icons.search)),
Tab(icon: Icon(Icons.file_download)),
Tab(icon: Icon(Icons.settings)),
],
),
),
],
),
)),
body: TabBarView(
children: [
Icon(Icons.search),
Icon(Icons.file_download),
Icon(Icons.settings),
],
),
),
),
);
}
}
OutPut:
I fixed it by fixing the code as follows:
class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
return MaterialApp(
title: 'Hitomi Viewer',
theme:
ThemeData(primaryColor: Colors.cyan, accentColor: Colors.tealAccent),
home: DefaultTabController(
length: 3,
child: Scaffold(
appBar: AppBar(
bottom: PreferredSize(
child: Container(
margin: EdgeInsets.fromLTRB(100, 0, 0, 0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
Container(
child: InkWell(
child: Text('Blah'),
),
margin: EdgeInsets.fromLTRB(10, 0, 80, 0),
),
TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.search)),
Tab(icon: Icon(Icons.file_download)),
Tab(icon: Icon(Icons.settings))
],
),
),
],
),
),
preferredSize: Size.fromHeight(-8),
),
),
body: TabBarView(
children: [
Icon(Icons.search),
Icon(Icons.file_download),
Icon(Icons.settings),
],
),
),
),
);
}
}
Since your tabs property is takinig a List<Widget>, use the Text widget in the tabs property instead.
Check the code below:
TabBar(
tabs: <Widget>[
// put your text widget here
Text('Blah'),
Tab(icon: Icon(Icons.search)),
Tab(icon: Icon(Icons.file_download)),
Tab(icon: Icon(Icons.settings))
],
),

How to display Snackbar in any tab of a DefaultTabController?

I am trying to show Snackbar on a Firebase Cloud Message event, not on the push of a button as most examples are showing.
I have a DefaultTabController like the one below. Where would I put my Snackbar in the tree to have the message display in any of the tabs?
#override
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.black,
flexibleSpace: new Column(
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
new TabBar(
tabs: [
Tab(icon: Icon(Icons.person)),
Tab(icon: Icon(Icons.open)),
Tab(icon: Icon(Icons.people)),
],
),
],
),
),
body: TabBarView(physics: NeverScrollableScrollPhysics(), children: [
MyForm(),
MyWidget(),
MyOtherForm(),
]),
),
);
}
}
I believe that as long as it's below the Scaffold it doesn't matter where the call is done.

I would like to have a TapBar in the center of the scaffold

Is it possible to have a TapBar in the center of the scaffold, like in a Column, instead of the AppBar, I tried many things but nothing worked, sorry if my English isn't that well. Thanks for the help.
use toggle button with rotatedbox for vertical tabbar, example
This code works, and it is pretty straightforward.
class Main extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
backgroundColor: Colors.blue,
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Flexible(
child: TabBar(
tabs: [
Tab(icon: Icon(Icons.directions_car)),
Tab(icon: Icon(Icons.directions_transit)),
Tab(icon: Icon(Icons.directions_bike)),
],
),
),
Flexible(
child: TabBarView(
children: [
Icon(Icons.directions_car),
Icon(Icons.directions_transit),
Icon(Icons.directions_bike),
],
),
),
],
),
),
),
);
}
}
Hope it helps.