I'm trying to do it but I do not know how to do it
I wanna get rid of green box space.
I've trying with PreferedSize widget but it doesn't work my code is ...
#override
Widget build(BuildContext context) {
return SafeArea(
child: PreferredSize(
preferredSize: Size.fromHeight(SizeConfig.heightMultiplier * 6.2),
// it's pretty narrow size but doesn't work in this screen but others
child: Scaffold(
appBar: AppBar(
centerTitle: true,
title: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'hello',
style: TextStyle(fontWeight: FontWeight.bold),
),
Text(
'world',
),
Text(
'!',
style: TextStyle(fontWeight: FontWeight.bold),
),
],
),
actions: <Widget>[
Icon(
Icons.add,
color: Colors.transparent,
),
],
backgroundColor: Theme.of(context).primaryColor,
bottom: TabBar(
controller: tabController,
indicatorColor: Colors.white,
tabs: myTabs,
),
),
...
I need your help ☑
Wrap the TabBar with a PreferredSize widget of height 0 (or a small height):
bottom: PreferredSize(
preferredSize: Size.fromHeight(0),
child: TabBar(
controller: tabController,
indicatorColor: Colors.white,
tabs: myTabs,
),
),
Related
I have tried this:
child: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF0AA89E),
title: Text(
'Archives',
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 17,
),
),
bottom: TabBar(
isScrollable: true,
indicatorColor: Color(0xFF0AA89E),
unselectedLabelColor: Colors.white,
labelColor: Colors.black,
// overlayColor: const const Color(0xFF0AA89E),
tabs: [
Tab(text: ' Category'),
Tab(text: ' Item '),
Tab(text: ' Variants '),
Tab(text: ' Choice '),
Tab(text: ' Extras '),
],
),
),
body: TabBarView(
children: [
FirstPage(),
SecondPage(),
ThirdPage(),
FourPage(),
FivePage()
],
),
);
As for the bottom we need to use PreferredSize type widget. You can follow this answer.
return DefaultTabController(
length: 5,
child: Scaffold(
appBar: AppBar(
backgroundColor: Color(0xFF0AA89E),
bottom: PreferredSize(
preferredSize: Size.fromHeight(kTextTabBarHeight),
child: Container(
width: double.maxFinite,
color: Colors.green,
alignment: Alignment.center,
child: const TabBar(
I am designing a sign in page in that, I wanted to show my title and subtitle at the bottom of App bar but not finding the proper way
i used this code:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
centerTitle: false,
titleSpacing: 0.0,
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black), onPressed: () { },
//onPressed: () => Navigator.of(context).pop(),
),
title: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
],
),
Result:
Code:
Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(150.0),
child: AppBar(
leading: IconButton(
icon: Icon(Icons.arrow_back, color: Colors.black),
onPressed: () {},
//onPressed: () => Navigator.of(context).pop(),
),
bottom: PreferredSize(
preferredSize: Size.fromHeight(30.0),
child: Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.symmetric(horizontal: 20),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
),
),
),
),
)
may not be the best solution but will work.
return Scaffold(
appBar: AppBar(
elevation: 0.0,
backgroundColor: Colors.grey[100],
),
body: Column(
children: [
Container(
color: Colors.grey[100],
padding: EdgeInsets.only(left: 20,top: 150),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'LOGIN',
style: TextStyle(color: Colors.black, fontSize: 16.0),
),
Text(
'Enter your email and passowrd',
style: TextStyle(color: Colors.black, fontSize: 14.0),
)
],
),
),
//over here add your rest of the body content
],
),
);
Try using the answer over here. You can use the bottom property of the AppBar class and use the PreferredSize widget over there.
I am using Scaffold to show my bottom tab navigator, but it shows too high, is there a way to reduce size of height in my Tab Bar. here is the code
Scaffold(
bottomNavigationBar: Material(
child: new TabBar(
tabs: <Widget>[
Tab(icon: Icon(Icons.home),text: 'Home'),
Tab(icon: Icon(Icons.settings),text: 'Settings')
],
labelColor: Colors.blue,
unselectedLabelColor: Colors.grey,
),
),
body: TabBarView(
children: [
MainScreen(),
FirstPage(),
],
),
)
You can wrap the child: new TabBar() in a container. And also change height of icon and text.
import 'package:flutter/material.dart';
class MyButtomTabBar extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 2,
child: Scaffold(
bottomNavigationBar: Material(
child: Container(
height: 40,
child: new TabBar(
tabs: <Widget>[
Tab(
icon: Icon(
Icons.home,
size: 15,
),
child: Text(
'Home',
style: TextStyle(fontSize: 10),
),
),
Tab(
icon: Icon(
Icons.settings,
size: 15,
),
child: Text(
'Settings',
style: TextStyle(fontSize: 10),
),
),
],
labelColor: Colors.blue,
unselectedLabelColor: Colors.grey,
),
),
),
),
),
);
}
}
Note:
Solution from stackoverflow about this question not solved my issue
My full code
import 'package:flutter/material.dart';
class BookingHistory extends StatefulWidget {
BookingHistory({Key key}) : super(key: key);
#override
_BookingHistoryState createState() => _BookingHistoryState();
}
class _BookingHistoryState extends State<BookingHistory> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
// backgroundColor: Colors.white,
appBar: AppBar(
flexibleSpace: Container(
color: Colors.green,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TabBar(indicatorColor: Colors.blue,
labelColor: Colors.red,
unselectedLabelColor: Colors.green,
tabs: [
Tab(
child: Text(
"Completed",
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
"Requested",
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
"Accepted",
style: TextStyle(color: Colors.white),
),
)
])
],
),
),
),
body: TabBarView(children: [
Container(
child: Center(
child: Text("i am tab 1"),
),
),
Container(
child: Center(
child: Text("i am tab 2"),
),
),
Container(
child: Center(
child: Text("i am tab 3"),
),
)
]),
)),
);
}
}
Answer
To make effecting indicatorColor,labelColor or unselectedLabelColor we need wrap Widget with Material Widget(Solution suggested by Ravinder Kumar) or if we need only to change indicatorColor color then use indicatorColor: Colors.blueAccent color with ending with name Accent (Solution suggested by Amazing Aidan)
Bizarrely, changing the code to
indicatorColor: Colors.blueAccent
works but not Colors.blue
Wrap your TabBar inside Material widget,
Material(
color: Colors.green,
child:
TabBar(
indicatorColor: Colors.red,
labelColor: Colors.red,
unselectedLabelColor: Colors.green,
.....
Output:
Complete Code
class BookingHistory extends StatefulWidget {
BookingHistory({Key key}) : super(key: key);
#override
_BookingHistoryState createState() => _BookingHistoryState();
}
class _BookingHistoryState extends State<BookingHistory> {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: DefaultTabController(
length: 3,
child: Scaffold(
// backgroundColor: Colors.white,
appBar: AppBar(
flexibleSpace: Container(
color: Colors.green,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
Material(
color: Colors.green,
child:
TabBar(
indicatorColor: Colors.red,
labelColor: Colors.red,
unselectedLabelColor: Colors.green,
tabs: [
Tab(
child: Text(
"Completed",
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
"Requested",
style: TextStyle(color: Colors.white),
),
),
Tab(
child: Text(
"Accepted",
style: TextStyle(color: Colors.white),
),
)
]))
],
),
),
),
body: TabBarView(children: [
Container(
child: Center(
child: Text("i am tab 1"),
),
),
Container(
child: Center(
child: Text("i am tab 2"),
),
),
Container(
child: Center(
child: Text("i am tab 3"),
),
)
]),
)),
);
}
}
UPDATE: strangely any colors other than seems to work, for example use indicatorColor: Colors.black,
The Container in the AppBar is unncessary, instead directly set backgroundColor: Colors.green in AppBar.
And in the TabBar set indicatorColor, labelColor, unselectedLabelColor properly.
In each Tab you don't need to specify TextStyle. It will override labelColor and unselectedLabelColor from the TabBar.
AppBar(
backgroundColor: Colors.green,
flexibleSpace: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
TabBar(
indicatorColor: Colors.white,
labelColor: Colors.white,
unselectedLabelColor: Colors.white70,
tabs: [
Tab(child: Text("Completed")),
Tab(child: Text("Requested")),
Tab(child: Text("Accepted"))
])
],
),
)
I just wanted to ask, if it is possible to have Tab Bar View in Flutter with content before tabs (I mean that the Tabs are for example in the middle of the screen and they have content before - e.g. profile information - like Instagram and its profile section).
Example of what I mean here
I have already tried the default Tab View, but it is not what I want.
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
flexibleSpace: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TabBar(
labelColor: Colors.teal,
labelStyle: TextStyle(
fontWeight: FontWeight.bold,
),
unselectedLabelColor: Colors.black45,
unselectedLabelStyle: TextStyle(
fontWeight: FontWeight.normal
),
tabs: [
Tab(
icon: Icon(Icons.list)
),
Tab(
icon: Icon(Icons.map)
)
],
),
],
),
),
body: TabBarView(
children: <Widget>[
Container(
child: ListView(
children: <Widget>[
Container(
color: Colors.red,
height: 100,
child: Text('Hello'),
),
],
)
),
Container(
child: Text('testuju'),
)
],
),
),
);
Is it even possible to do it with Tab View, or should I fake tabs with styled buttons? Thanks a lot!
You can do it like this
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: PreferredSize(
child: AppBar(
backgroundColor: Colors.greenAccent,
bottom: TabBar(
controller: tabController,
tabs: [
Tab(
child: Text("Login"),
),
Tab(
child: Text("Sign Up"),
),
],
indicatorColor: Colors.black,
),
flexibleSpace: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [
Colors.red,
Colors.orange,
],
),
),
),
),
preferredSize: Size.fromHeight(200.0),
),
body: TabBarView(
controller: tabController,
children: [
LoginApp(),
SignUpApp(),
],
),
),
);
you can try that:
Scaffold(
body: DefaultTabController(
initialIndex: // initial tab,
length: // tabs numbers,
child: NestedScrollView(
headerSliverBuilder: (buildContext, isScrolled){
return <Widget>[
SliverAppBar(
floating: false,
pinned: true,
primary: true,
automaticallyImplyLeading: false,
actions: <Widget>[
BackBtnIcon(action: (){
Navigator.pop(context);
},
),
SizedBox(width: 6,),
],
title: Text(memberFullName),
),
SliverPadding(
padding: EdgeInsets.all(0),
sliver: SliverList(
delegate: SliverChildListDelegate(
[
Container(
color: CopticColors.mainButtonColor,
child: CustomTabBar()
),
]
)
),
)
];
},
body: SafeArea(
minimum: EdgeInsets.all(20),
child: TabBarView(
// physics: new NeverScrollableScrollPhysics(),
children: [ // replace with your tabs
ConfessionTab(model: snapshot.data,),
CommunicationDetails(model: snapshot.data,),
GeneralDetails(model: snapshot.data,),
ChurchDetails(model: snapshot.data,),
GovDetails(model: snapshot.data,),
],
)
)
),
);