How to set height of an app bar in a custom class for different screen sizes in Flutter?

Question

For modularity I defined my app bar in a different class as follows:

class HomeAppBar extends StatefulWidget implements PreferredSizeWidget{


  HomeAppBar({Key key}) : preferredSize = Size.fromHeight(kToolbarHeight*0.8), super(key: key);

  @override
  final Size preferredSize; // default is 56.0

  @override
  _HomeAppBarState createState() => _HomeAppBarState();
}

class _HomeAppBarState extends State<HomeAppBar> {
  @override
  Widget build(BuildContext context) {
    return Container(
      //height: SizeConfig.blockSizeVertical * 20, // did not work well
      child: AppBar(
          backgroundColor: Colors.white,

          leading: IconButton(
              icon: Icon(Icons.account_circle, color: Colors.black) , onPressed: () => Scaffold.of(context).openDrawer()
          ),

          title: Container(
            //height: SizeConfig.blockSizeVertical * 20, // did not work well
            child: TextField(
              style: TextStyle(
                //fontSize: 40,
                //height: SizeConfig.blockSizeVertical * 1, // did not work well
              ),

              onTap: () {
                FocusScope.of(context).requestFocus(FocusNode());
                Navigator.push(context, PageTransition(type: PageTransitionType.fade, child: Search()));
              },
              decoration: InputDecoration(
                prefixIcon: Icon(Icons.search, color: Colors.black),
                hintText: "Search...",
              ),
            ),
          )
      ),
    );
  }
}

Also I created a SizeConfig class to change my app bar's height for different screen sizes:

import 'package:flutter/widgets.dart';

class SizeConfig {
  static MediaQueryData _mediaQueryData;
  static double screenWidth;
  static double screenHeight;
  static double blockSizeHorizontal;
  static double blockSizeVertical;

  void init(BuildContext context) {
    _mediaQueryData = MediaQuery.of(context);
    screenWidth = _mediaQueryData.size.width;
    screenHeight = _mediaQueryData.size.height;
    blockSizeHorizontal = screenWidth / 100;
    blockSizeVertical = screenHeight / 100;
  }
}

I initialize sizeconfig in my home page.

I tried a lot but I cannot reach a good result. What I want is setting the app bar's height for example %10 of the screen's height and also I want to change the textfield's (which is the title of the appbar) height to fit well with the appbar's height.

What I want to achieve is a bigger version of this app bar:

What I end up with is here:

As you can see the icon is not aligned and also the hint text disappears If I try to increase the label text size

Answer 1

Ok, this is as close as I can get to what I think you want :

PreferredSize(
        preferredSize: Size(MediaQuery.of(context).size.width,
        MediaQuery.of(context).size.height*.1),
          child: AppBar(
          backgroundColor: Colors.white,
          flexibleSpace: Row(
            children: <Widget>[
            Expanded(
              flex: 1,
              child: FittedBox(
                child: IconButton(
                  icon: Icon(Icons.account_circle, color: Colors.black) , onPressed: () => Scaffold.of(context).openDrawer()
                ),
              ),
            ),
            Flexible(
              flex: 9,
              child: Container(
              width: MediaQuery.of(context).size.width*.9,
              alignment: Alignment.center,
              child: TextField(
                  textAlignVertical: TextAlignVertical.center,
                  style: TextStyle(
                  ),
                  onTap: () {
                    FocusScope.of(context).requestFocus(FocusNode());
                    Navigator.push(context, MaterialPageRoute(builder: (ctx) => Scaffold()));
                  },
                  decoration: InputDecoration(
                    prefixIcon: Icon(Icons.search, color: Colors.black),
                    hintText: "Search...",
                  ),
                ),
          ),
            )
          ],),
      ),
    )

Answer 2

To set the appBar height to 10% of the MediaQuery height and center the title vertically, you can do this :

appBar: PreferredSize(
        preferredSize: Size(
          MediaQuery.of(context).size.width,
          MediaQuery.of(context).size.height*.1, // 10% of the height
        ),
        child: AppBar(
          flexibleSpace: Center(child: Text("app name")))
)

Be careful though because this can cause usability issues on small screens and landscape rotation.

Answer 3

I solve the issue by using @MickaelHrndz's answer as base and customizing it a little bit. AppBar creates some problems so whenever you want to create something more customizable just do not use AppBar. I used SafeArea instead of AppBar and deleted the alignment: Alignment.center line so that the area starts from the top.

SafeArea(
      child: Row(
        children: <Widget>[
          Flexible(
            fit: FlexFit.tight,
            flex: 1,
            child: FittedBox(
              child: IconButton(
                  icon: Icon(Icons.account_circle, color: Colors.black) , onPressed: () => Scaffold.of(context).openDrawer()
              ),
            ),
          ),

          Flexible(
            flex: 7,
            child: Container(
              child: TextField(
                textAlignVertical: TextAlignVertical.center,
                style: TextStyle(
                ),
                onTap: () {
                  //FocusScope.of(context).requestFocus(FocusNode());
                  Navigator.push(this.context, MaterialPageRoute(builder: (context) => Search()));

                },
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.search, color: Colors.black),
                  hintText: "Search...",
                ),
              ),
            ),
          )

        ],
      ),
    );

It results in: