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,
  ),
)