Unable to occupy remaining space for TabBarView

0

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

flutter
asked on Stack Overflow Jun 8, 2020 by Smeet Bhatt

0 Answers

Nobody has answered this question yet.


User contributions licensed under CC BY-SA 3.0