Custom tab bar view in flutter - flutter

I need to do this view(tab bar)
i dont know how to do such outline


You have t define the TabBar in the Appbar and the content of the tabs in the body with TabBarView:
Widget build(BuildContext context) {
return DefaultTabController(
initialIndex: 1,
length: 3,
child: Scaffold(
appBar: AppBar(
title: const Text('TabBar Widget'),
bottom: const TabBar(
tabs: <Widget>[
Tab(
icon: Icon(Icons.cloud_outlined),
),
Tab(
icon: Icon(Icons.beach_access_sharp),
),
Tab(
icon: Icon(Icons.brightness_5_sharp),
),
],
),
),
body: const TabBarView(
children: <Widget>[
Center(
child: Text('It\'s cloudy here'),
),
Center(
child: Text('It\'s rainy here'),
),
Center(
child: Text('It\'s sunny here'),
),
],
),
),
);
}

Related

How to implement Column inside of TabBarView with SingleChildScrollView?

I have a tabBar and TabBarView in body of the Scaffold widget, which is wrapped with SingleChildScrollView.
I want to display Column widget in the TabBarView (in this case it is the fourth tab), but it returns the error with OverFlow since SingleChildScrollView only detects the first element of the Column.
Any way to display Column widget here?
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
automaticallyImplyLeading: false,
leadingWidth: 80,
actions: const [
SizedBox(
width: 117.0,
)
],
leading: CustomBackButton(
onTap: () => Navigator.of(context).pop(),
),
backgroundColor: Theme.of(context).colorScheme.monochrome[300],
brightness: Brightness.light,
centerTitle: true,
title: Text(
'hello',
style: Theme.of(context).textTheme.subtitle1,
),
elevation: 0,
bottom: PreferredSize(
child: Container(
color: Theme.of(context).colorScheme.monochrome[400],
height: 1.0,
),
preferredSize: const Size.fromHeight(1.0),
),
),
body: SingleChildScrollView(
padding: const EdgeInsets.only(bottom: 64),
physics: const AlwaysScrollableScrollPhysics(),
child: Column(
children: [
DefaultTabController(
length: 4,
initialIndex: 0,
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
TabBar(
indicatorWeight: 4.0,
indicatorColor:
viewState.player!.team!.primaryColor(context),
tabs: [
Tab(
child: Text(
'tab1',)
Tab(
child: Text(
'tab2',
Tab(
child: Text(
'tab3',)
Tab(
child: Text(
'tab4',)
],
),
SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: Container(
height: 472,
decoration: const BoxDecoration(
border: Border(
top: BorderSide(
color: Colors.grey,
width: 0.5,
),
),
),
child: TabBarView(
children: [
TabView1(),
TabView2()
TabView3()
Column(
children: [
_buildYearSelection()
ProfileTable(),]),
],
),
),
)
],
),
),
),
),
],
),
),
);
}

Just try with ListView instead of column
ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: [
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
SizedBox(height: 500,),
Text("data"),
],
),

Perhaps what you are trying to do is create a TabBar that hides itself when scrolled.
If that is the case then there is an easy way to achieve it using CustomScrollView.
Something like this:
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text("MY title"),
),
body: CustomScrollView(slivers: [
const SliverAppBar(
title: TabBar(
indicatorWeight: 4.0,
tabs: [
Tab(child: Text("Tab 1")),
Tab(child: Text("Tab 2")),
],
),
),
SliverFillRemaining(
child: TabBarView(children: [
Container(child: Text("Scr 1")),
Container(child: Text("Scr 2")),
]),
),
]),
),
);
Below is the complete code:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Home(),
);
}
}
class Home extends StatelessWidget {
#override
Widget build(BuildContext context) {
return DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
elevation: 0.0,
title: Text("MY title"),
),
body: CustomScrollView(slivers: [
const SliverAppBar(
title: TabBar(
indicatorWeight: 4.0,
tabs: [
Tab(child: Text("Tab 1")),
Tab(child: Text("Tab 2")),
],
),
),
SliverFillRemaining(
child: TabBarView(children: [
Container(child: Text("Scr 1")),
Container(child: Text("Scr 2")),
]),
),
]),
),
);
}
}

how to reduce height of Tab Bar in flutter

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,
),
),
),
),
),
);
}
}

how to align left Tab on DefaulfTabController?

How to align left Tabs?
DefaultTabController(
length: 2,
child: Scaffold(
appBar: AppBar(
title: Row(
children: <Widget>[
...
],
),
actions: <Widget>[
...
],
bottom: TabBar(
isScrollable: true,
tabs: [
Tab(text: 'Chat'),
Tab(child: Row(
children: <Widget>[
...
],
)),
]
),
),
),
);
I tried FlexibleSpace too. It's align left, but I need to add TabBar on bottom

You can copy paste run full code below
You can use PreferredSize and Align
code snippet
appBar: AppBar(
title: Text(widget.title),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(20.0),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: TabBar(
isScrollable: true,
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
Tab(text: 'Tab 4'),
Tab(text: 'Tab 5'),
],
),
),
),
),
)
working demo
full code
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
final appTitle = 'Tabs Demo';
return MaterialApp(
title: appTitle,
home: MyHomePage(title: appTitle),
);
}
}
class MyHomePage extends StatefulWidget {
final String title;
const MyHomePage({Key key, this.title}) : super(key: key);
#override
State<StatefulWidget> createState() {
return _MyHomePageState();
}
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
int _tabIndex = 0;
TabController _tabController;
#override
void initState() {
super.initState();
_tabController = TabController(vsync: this, length: 5);
}
void _toggleTab() {
_tabIndex = _tabController.index + 1;
_tabController.animateTo(_tabIndex);
}
#override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomAppBar(
notchMargin: 20,
child: new Row(
// mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: <Widget>[
InkWell(
onTap: () {
_toggleTab();
},
child: Text(
'Next >',
style: TextStyle(fontSize: 20, color: Colors.red),
),
)
],
),
),
appBar: AppBar(
title: Text(widget.title),
bottom: PreferredSize(
preferredSize: const Size.fromHeight(20.0),
child: Align(
alignment: Alignment.centerLeft,
child: Container(
width: MediaQuery.of(context).size.width / 2,
child: TabBar(
isScrollable: true,
controller: _tabController,
tabs: [
Tab(text: 'Tab 1'),
Tab(text: 'Tab 2'),
Tab(text: 'Tab 3'),
Tab(text: 'Tab 4'),
Tab(text: 'Tab 5'),
],
),
),
),
),
),
body: TabBarView(
controller: _tabController,
children: [
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 1'),
subtitle: Text('Click on Next Button to go to Tab 2.'),
),
],
),
),
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 2'),
subtitle: Text('Click on Next Button to go to Tab 3'),
),
],
),
),
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 3'),
subtitle: Text('The End'),
),
],
),
),
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 4'),
subtitle: Text('The End'),
),
],
),
),
Card(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
ListTile(
leading: Icon(Icons.album),
title: Text('Hello 5'),
subtitle: Text('The End'),
),
],
),
),
],
),
));
}
}

How to make a container with tabview & listview occupy space upto bottom

I have implemented tab layout which consists of two tabs, each tab view has a listview, container with tabview & listview should occupy space upto bottom as of now i place static value of 400, so only up to 400 the listview appears, i need the list view to be appeared up to bottom. can you please me to fix this
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
child: new TabBar(
controller: _controller,
labelColor: Colors.deepOrange,
tabs: [
new Tab(
icon: const Icon(Icons.description),
text: 'ABC',
),
new Tab(
icon: const Icon(Icons.assignment),
text: 'XYZ',
),
],
),
),
),
Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
height: 400.0,
child: new TabBarView(
controller: _controller,
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
ListTile(
title: Text('Moon'),
),
ListTile(
title: Text('Star'),
),
],
),
],
),
),
),
],
),
);
}

I have Used Expanded & Flex Widgets which solved the problem
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: <Widget>[
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0),
child: Container(
color: Colors.white,
child: new TabBar(
controller: _controller,
labelColor: Colors.deepOrange,
tabs: [
new Tab(
icon: const Icon(Icons.description),
text: 'Current Openings',
),
new Tab(
icon: const Icon(Icons.assignment),
text: 'Applied Jobs',
),
],
),
),
),
flex: 1,
),
Expanded(
child: Padding(
padding: const EdgeInsets.only(left:20.0,right:20.0,bottom: 10.0),
child: Container(
color: Colors.white,
child: new TabBarView(
controller: _controller,
children: <Widget>[
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
],
),
ListView(
children: <Widget>[
ListTile(
title: Text('Sun'),
),
],
),
],
),
),
),
flex: 9,
),
],
),
);
}

Is it possible to have Tab Bar with content before in Flutter?

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,),
],
)
)
),
);