I am trying to occupy the remaining blue color part with the column inside TabBarView. For now, I have given a fixed height to the topLeft curve container. And I have used Row widget to get bottom navigation as I have different functionality for it which is just click event.
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:myjosh/common/utils/color_constants.dart';
class DashboardScreen extends StatefulWidget {
static const String RouteName = "/dashboard-screen";
@override
_DashboardScreenState createState() => _DashboardScreenState();
}
class _DashboardScreenState extends State<DashboardScreen> with TickerProviderStateMixin {
TabController _tabController;
static List<Tab> tabList = [
Tab(
text: "Earnings",
),
Tab(
text: "Leads",
)
];
@override
void initState() {
// TODO: implement initState
_tabController = new TabController(vsync: this, length:
tabList.length);
super.initState();
}
@override
void dispose() {
_tabController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: ColorConstants.lightRoyalBue,
body: SafeArea(
child: Column(
children: <Widget>[
Expanded(
child: Container(
child: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
_buildSizeBox(10),
_buildMenuIcon(),
_buildSizeBox(8),
_buildGreetingText(),
_buildSizeBox(10),
_buildUpdateProfileRow(),
_buildSizeBox(16),
_buildCarouselSlider(),
_buildSizeBox(10),
_buildTabBarAndView(),
],
),
),
),
),
_buildBottomNavigation(),
],
),
),
);
}
Widget _buildMenuIcon() {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 22),
child: Icon(
Icons.menu,
color: ColorConstants.white,
size: 32,
),
);
}
Widget _buildGreetingText() {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 22),
child: Text("Hi Smeet",
style: TextStyle(
color: ColorConstants.white,
fontSize: 24,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal,
letterSpacing: 0.55,
)
),
);
}
Widget _buildUpdateProfileRow() {
return Container(
width: double.infinity,
margin: const EdgeInsets.symmetric(horizontal: 22),
padding: const EdgeInsets.symmetric(vertical: 16),
decoration: new BoxDecoration(
color: Color(0xffffffff),
borderRadius: BorderRadius.only(topLeft: Radius.circular(30)),
boxShadow: [BoxShadow(
color: Color(0xdf5a5a5a),
offset: Offset(0,1),
blurRadius: 8,
spreadRadius: 0
) ],
),
child: Row(
children: <Widget>[
Expanded(
child: Container(
margin: const EdgeInsets.only(left: 10),
child: Text("Please update your profile to recieve your earnings. ",
style: TextStyle(
fontFamily: 'SFProText',
color: ColorConstants.black,
fontSize: 15,
fontWeight: FontWeight.w400,
fontStyle: FontStyle.normal,
letterSpacing: 0.3770830000000001,
)
),
),
),
Container(
margin: const EdgeInsets.symmetric(horizontal: 20),
child: Icon(
Icons.chevron_right,
color: ColorConstants.lightRoyalBue,
),
),
],
),
);
}
Widget _buildCarouselSlider() {
return Container(
margin: const EdgeInsets.symmetric(horizontal: 22),
child: CarouselSlider(
items: [0, 1, 2, 3].map((item) => Container(
child: Center(
child: Text(item.toString())
),
color: Colors.white,
)).toList(),
options: CarouselOptions(
height: 175,
aspectRatio: 16/9,
viewportFraction: 1.0,
initialPage: 0,
enableInfiniteScroll: true,
reverse: false,
autoPlay: true,
autoPlayInterval: Duration(seconds: 3),
autoPlayAnimationDuration: Duration(milliseconds: 800),
autoPlayCurve: Curves.fastOutSlowIn,
enlargeCenterPage: false,
onPageChanged: (index, _) {},
scrollDirection: Axis.horizontal,
)
),
);
}
Widget _buildTabBarAndView() {
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(topLeft: Radius.circular(40)),
),
padding: EdgeInsets.only(top: 16),
child: Column(
children: <Widget>[
TabBar(
controller: _tabController,
indicatorColor: ColorConstants.lightRoyalBue,
unselectedLabelColor: ColorConstants.brownGreyThree,
labelColor: ColorConstants.lightRoyalBue,
labelStyle:TextStyle(
fontFamily: 'SFProText',
fontSize: 18,
fontWeight: FontWeight.w500,
fontStyle: FontStyle.normal,
letterSpacing: 0.5325,
),
indicatorSize: TabBarIndicatorSize.tab,
tabs: tabList
),
Container(
height: 100,
child: TabBarView(
controller: _tabController,
children: <Widget>[
Column(
children: <Widget>[
Text("hello1"),
Text("hello1")
],
),
Column(
children: <Widget>[
Text("hello2"),
Text("hello2")
],
),
],
),
)
],
),
);
}
Widget _buildBottomNavigation() {
return Container(
padding: const EdgeInsets.symmetric(vertical: 10),
color: Colors.white,
width: double.infinity,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
_buildBottomNavigationItem("Leads", Icons.flag, (){}),
_buildBottomNavigationItem("Create Lead", Icons.add_circle_outline, (){}),
_buildBottomNavigationItem("Share", Icons.share, (){}),
_buildBottomNavigationItem("Notification", Icons.notifications_active, (){}),
],
),
);
}
Widget _buildBottomNavigationItem(String title, IconData icon, Function onCLick) {
return GestureDetector(
onTap: onCLick,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(icon, color: Color(0xffe6e6e6),),
Text(title),
],
),
);
}
Widget _buildSizeBox(double height) => SizedBox(
height: height,
);
}
As a result I get this output screenshot of my output
User contributions licensed under CC BY-SA 3.0