Fixed height in Container is not working in Flutter

Question

Container height is set to fixed 40 but once I'm using that Widget in AppBar() it takes all the possible height. Here is the code for my custom widget which has Fixed height of Container,

class LPBorderButtonWithIcon extends StatelessWidget {
  final GestureTapCallback onPressed;
  final String text;
  final String iconAsset;
  final Color textColor;

  LPBorderButtonWithIcon(
      {@required this.onPressed,
      @required this.text,
      @required this.textColor,
      @required this.iconAsset});

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
        onTap: onPressed,
        child: Container(
          height: 40,
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(25),
              border: Border.all(color: Color(0XFFd8dce1))),
          child: Row(
            children: [
              WidthSizedBox(15),
              Image.asset(
                iconAsset,
                height: 14,
                width: 14,
              ),
              WidthSizedBox(5),
              Text(text,
                  style: TextStyle(
                      color: textColor,
                      fontSize: 12,
                      fontFamily: "GilroyMedium")),
              WidthSizedBox(15),
            ],
          ),
        ));
  }
}

and here I'm using LPBorderButtonWithIcon() in this screen,

class CreateRulesScreen extends StatefulWidget {
  @override
  _CreateRulesScreenState createState() => _CreateRulesScreenState();
}

class _CreateRulesScreenState extends State<CreateRulesScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        brightness: Brightness.light,
        backgroundColor: Colors.white,
        elevation: 1,
        centerTitle: false,
        titleSpacing: 0.0,
        leading: BackButton(
          color: LPColor.primary,
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        title: Text(
          "Create Rule",
          style: LPStyle.titleStyle,
        ),
        actions: [
          Container(
            margin: EdgeInsets.only(top: 12, bottom: 12, right: 16),
            child: LPBorderButtonWithIcon(
              onPressed: null,
              text: "Create",
              textColor: Color(0XFF508ff4),
              iconAsset: "images/ic_publish.png",
            ),
          )
        ],
      ),

    );
  }
}

and below is the result where that custom container takes all the possible height. Please let me know how can I set fixed height to my custom widget.

Answer 1

Place your Container inside an Align, Aling will force the container to occupy only the space it needs.

Align(
   child: Container(
   height: 20,
   width: 30,
   color: Colors.white,
  ),
)

Answer 2

The parent widget takes the entire space available to draw the widget, Here Container is the parent widget, and it's taking whatever space is available, so to give height to the Container, that needed to be placed inside any widget which assigns x,y position of widgets to get it to draw.

Container(
    height: 40, // Its not going to apply height as it's parent widget
)

So to work out the above code you have to align Container to any other widget like Center, Align, etc.

For Eg:

Scaffold(
  body: Container(
    height: 600,
    color: Colors.red,
    child: Container(
      height: 200,
      color: Colors.yellow,
    ),
  ),
);

The above example child container will not draw yellow color in 200 height, it will take the entire 600 height space.

Output:

To Solve this we have assigned some widgets to the child Container so that it will get the x, y position to start drawing the child widget. Here Center widget is used.

Eg:

Scaffold(
      body: Container(
        height: 600,
        color: Colors.red,
        child: Center(
          child: Container(
            height: 200,
            color: Colors.yellow,
          ),
        ),
      ),
    );

Output:

Some Limitation:

• A widget can decide its own size only within the constraints given to it by its parent. This means a widget usually can’t have any size it wants.

• A widget can’t know and doesn’t decide its own position in the screen, since it’s the widget’s parent who decides the position of the widget.

• Since the parent’s size and position, in its turn, also depends on its own parent, it’s impossible to precisely define the size and position of any widget without taking into consideration the tree as a whole.

• If a child wants a different size from its parent and the parent doesn’t have enough information to align it, then the child’s size might be ignored. Be specific when defining alignment.

Reference link: https://flutter.dev/docs/development/ui/layout/constraints