can we change the height of appbar - bottom widget?

Question

I'm getting this overflow error because of the bottom widget of the app bar.

Is it possible to change the height of bottom widget? Thanks in advance.

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
   @override
  _State createState() {
      return new _State();
   }
}

class _Page {
   const _Page({ this.icon, this.text });
   final IconData icon;
   final String text;
}

const List<_Page> _allPages = const <_Page>[
   const _Page(icon: Icons.grade, text: 'TRIUMPH'),
   const _Page(icon: Icons.playlist_add, text: 'NOTE'),
   const _Page(icon: Icons.check_circle, text: 'SUCCESS'),
   const _Page(icon: Icons.question_answer, text: 'OVERSTATE'),
   const _Page(icon: Icons.sentiment_very_satisfied, text: 'SATISFACTION'),
   const _Page(icon: Icons.camera, text: 'APERTURE'),
   const _Page(icon: Icons.assignment_late, text: 'WE MUST'),
   const _Page(icon: Icons.assignment_turned_in, text: 'WE CAN'),

 ];

 class _State extends State<Home> with SingleTickerProviderStateMixin {

   Widget _displayGalleryOne, _topIcons, _locationGallery;

   TabController _controller;
   bool _customIndicator = false;


   @override
   void dispose() {
     _controller.dispose();
     super.dispose();
   }


  @override
  void initState() {

     _displayGalleryOne = new DisplayGalleryOne();

     _locationGallery = new LocationGallery();

     _topIcons = new TopIcons();

     _controller = new TabController(vsync: this, length: _allPages.length);

     super.initState();
  }

  @override
  Widget build(BuildContext context) {


     double width = MediaQuery.of(context).size.width;

return new Scaffold(
  floatingActionButton: new FloatingActionButton(
      onPressed: (){search();},
    child: new Icon(Icons.search),
    backgroundColor: Constants.primaryColor,
  ),
  appBar: new AppBar(
    iconTheme: new IconThemeData(
      color: Constants.primaryColor
    ),
    elevation: 8.0,
    centerTitle: true,
    backgroundColor: Colors.white,
    title: new Text(
      'Ladakh Navigator'.toUpperCase(),
      style: new TextStyle(
          fontSize: Constants.title_font_size,
          fontWeight: FontWeight.w600,
          color: Theme.of(context).primaryColor
      ),
    ),

this is the bottom widget whose height I want to change. Also the thing is I want to use the tab bar more like a navigation bar. so instead of using "icon", I am using "IconButton" because of which the overflow is appearing.

    bottom: new PreferredSize(
        child: new Center(
          child: new TabBar(
            indicatorColor: Colors.transparent,
            labelColor: Constants.primaryColor,
            controller: _controller,
            isScrollable: true,
            labelStyle: new TextStyle(
                fontWeight: FontWeight.w600
            ),
            tabs: _allPages.map((_Page page) {
              return new Tab(text: page.text, icon: new IconButton(icon: new Icon(page.icon, color: Constants.primaryColor, size: 30.0,), onPressed: null));
            }).toList(),
          ),
        ),
        preferredSize: new Size.fromHeight(70.0)
    ),
  ),
  body: new Container(
    child: new LayoutBuilder(
      builder: (BuildContext context, BoxConstraints viewportConstraints) {
        return SingleChildScrollView(
          child: new ConstrainedBox(
            constraints: new BoxConstraints(
              minHeight: viewportConstraints.maxHeight,
            ),
            child: new IntrinsicHeight(
              child: new Column(
                children: <Widget>[
                  /*new Container(
                    height: 90.0,
                    padding: const EdgeInsets.only(left: 10.0),
                    child: new SlidingWidget(_topIcons),
                  ),
                  new Divider(
                    height: 5.0,
                    color: Theme.of(context).dividerColor,
                  ),*/
                  new Container(
                    padding: const EdgeInsets.only(top: 40.0, left: 20.0),
                    width: double.infinity,
                    child: new Text(
                        'top destinations'.toUpperCase(),
                      style: new TextStyle(
                        fontWeight: FontWeight.w600,
                        fontSize: 16.0
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 5.0, bottom: 10.0),
                    child: new Container(
                      height: 240.0,
                      child: new SlidingWidget(_locationGallery),
                    ),
                  ),
                  new Container(
                    height: 180.0,
                    padding: const EdgeInsets.only(top: 10.0, left: 10.0, right: 10.0, bottom: 10.0),
                    child: new OfferCard(Color(0xFF1976d2)),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 30.0, left: 20.0),
                    width: double.infinity,
                    child: new Text(
                      'popular hotels'.toUpperCase(),
                      style: new TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 16.0
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 5.0, bottom: 0.0),
                    height: 280.0,
                    child: new SlidingWidget(_displayGalleryOne),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 0.0, left: 10.0, right: 10.0, bottom: 10.0),
                    child: new Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        new Container(
                          width: width * .47,
                          padding: const EdgeInsets.only(right: 5.0),
                          child: new OfferCard(Color(0xFFF44336)),
                        ),
                        new Container(
                          width: width * .47,
                          padding: const EdgeInsets.only(left: 5.0),
                          child: new OfferCard(Color(0xFFFFC107)),
                        ),
                      ],

                    ),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 40.0, left: 20.0),
                    width: double.infinity,
                    child: new Text(
                      'famous restaurants'.toUpperCase(),
                      style: new TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 16.0
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 5.0, bottom: 20.0),
                    height: 280.0,
                    child: new SlidingWidget(_displayGalleryOne),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 10.0, left: 20.0),
                    width: double.infinity,
                    child: new Text(
                      'top adventures'.toUpperCase(),
                      style: new TextStyle(
                          fontWeight: FontWeight.w600,
                          fontSize: 16.0
                      ),
                      textAlign: TextAlign.left,
                    ),
                  ),
                  new Container(
                    padding: const EdgeInsets.only(top: 5.0, bottom: 20.0),
                    height: 280.0,
                    child: new SlidingWidget(_displayGalleryOne),
                  ),
                ],
              ),
            ),
          ),
        );
      },
    ),
  )
);
}

}

Answer 1

For the bottom height you can easily changes it height and items like this :

Scaffold(
   /*This is Floating Action Button*/
   floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
     floatingActionButton: FloatingActionButton(
       child: const Icon(Icons.camera_alt), onPressed: scan),
   /*This is the bottom navigation bar*/
   bottomNavigationBar: BottomAppBar(
     hasNotch: true, /*Creates a notch*/
       child: Row(
         mainAxisSize: MainAxisSize.max,
         mainAxisAlignment: MainAxisAlignment.end,
         children: <Widget>[
           /*Add the Items here*/
           Container(
             /*Padding changes the height*/
             padding: EdgeInsets.all(20.0),
             child: new Icon(Icons.camera),
            )
         ],
       ),
   ),
)

Answer 2

Seems kind of bug. You can use Column with children instead of Tab for work around. It's working fine for me.

new Scaffold(
      appBar: new AppBar(
        title: new Text('Network Demo'),
        bottom: new TabBar(
          indicatorColor: Colors.transparent,
          controller: controller,
          tabs: [
            new Column(
              children: <Widget>[
                new IconButton(icon: Icon(Icons.star), onPressed: null),
                new Text('Star'),
              ],
            ),new Column(
              children: <Widget>[
                new IconButton(icon: Icon(Icons.playlist_add), onPressed: null),
                new Text('Add'),
              ],
            ),new Column(
              children: <Widget>[
                new IconButton(icon: Icon(Icons.done), onPressed: null),
                new Text('Done'),
              ],
            ),new Column(
              children: <Widget>[
                new IconButton(icon: Icon(Icons.chat), onPressed: null),
                new Text('Chat'),
              ],
            ),
          ],
        ),
      ),
      body: new Center(
        child: new Wrap(
          children: <Widget>[
            new TextFormField(
              maxLines: null,
              keyboardType: TextInputType.multiline,
              decoration: new InputDecoration(hintText: 'Enter message'),
            ),
          ],
        ),
      ),
    );