How to change the expanded height in flutter?-CodePudding

I am new to flutter learning a flutter UI build from youtube. While I am using the expanded widget, I found the output is not what I want, just wanna ask is there any way to limit the height of the expanded widget. This is my current UI looks like.

SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Align(
              alignment: Alignment.topRight,
              child: Container(
                alignment: Alignment.center,
                height: 52,
                width: 52,
                decoration: BoxDecoration(
                  color: Color(0xFFF2BEA1),
                  shape: BoxShape.circle,
                ),
                child: SvgPicture.asset("icons/icons/menu.svg"),
              ),
            ),
            Text(
              "\t\tMake Cents out of \n\t\tSolar",
              style: Theme.of(context).textTheme.subtitle1!.copyWith(
                  fontWeight: FontWeight.w900,
                  fontSize: 38,
                  color: Colors.blueGrey[900]),
            ),
            Padding(
              padding: const EdgeInsets.all(20.0),
              child: Container(
                padding: EdgeInsets.symmetric(horizontal: 30, vertical: 5),
                decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(29.5),
                ),
                child: TextField(
                  decoration: InputDecoration(
                    hintText: "Search",
                    icon: SvgPicture.asset("icons/icons/search.svg"),
                    border: InputBorder.none,
                  ),
                ),
              ),
            ),
            Expanded(
              child: GridView.count(
                crossAxisCount: 2,
                childAspectRatio: .85,
                children: <Widget>[
                  CategoryCard(
                    title: "Promotion of the day",
                    svgSrc: "icons/icons/Hamburger.svg",
                    press: () {},
                  ),
                  CategoryCard(
                    title: "Promotion of the day",
                    svgSrc: "icons/icons/Hamburger.svg",
                    press: () {},
                  ),
                ],
              ),
            ),
            Container(
              padding: EdgeInsets.fromLTRB(20.0, 0, 0, 0),
              child: Text(
                "Solar Panel",
                style: Theme.of(context).textTheme.subtitle1!.copyWith(
                    fontWeight: FontWeight.w900,
                    fontSize: 20,
                    color: Colors.black),
              ),
            ),
          ],

I wanna know is there any way to control the height of the expanded widget so that my container with text can connect right below the custom Category Card. Or should I use another widget instead of using the expanded widget?

CodePudding user response：

To set a minimum and maximum size (width and height) for a widget you can use ConstrainedBox widget, learn more about it here

CodePudding user response：

You can't control the height of the Expanded widget. It takes all the space that is available on the screen. I suggest you to use SizedBox and explicitly provide the required height and set width as double.infinity.

CodePudding user response：

By definition, the Expanded widget will fill up all the remaining screen space. If you instead want to use a set size, you can use a Container or SizedBox with their width and height parameters.

To get a better understanding of constraints in general, I suggest you check out this flutter documentation page all about constraints.