flutter reduce the height of container

Question

I'm passing some json data to another widget which will show as a card. The problem is the container is automatically taking a large height.

This is what the page currently looks like. The black borders I provided is the desired height.

This is how I'm passing data:

      GridView.count(
        crossAxisCount: 1,
        physics: const ClampingScrollPhysics(),
        shrinkWrap: true,
        children: List.generate(
          widget.recipe!.recipeSteps!.length,
          (index) {
            return Container(
              constraints: BoxConstraints.tightForFinite(height: 10),
              child: StepsCard(
                recipeStep: widget.recipe!.recipeSteps![index].name,
              ),
            );
          },
        ),
      ),

And this is the code for StepsCard():

class StepsCard extends StatelessWidget {
  final String? recipeStep;

  StepsCard({required this.recipeStep});
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 5, bottom: 5),
      child: Container(
          height: 20,
          decoration: BoxDecoration(
            // color: Color(0xfff8f8fa),
            color: Colors.red,
            borderRadius: BorderRadius.circular(15),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text("image"),
              Text(this.recipeStep!),
            ],
          )),
    );
  }
}

how can I create a container of the size I marked as black?

Update 1: I have tried providing height to both the containers(height:10) but that didn't work at any level

Update 2:

this is the code I've tried as per suggestion given by @7mada

      Container(
        height: 100,
        child: ListView.builder(
          itemCount: widget.recipe!.recipeSteps!.length,
          itemBuilder: (BuildContext context, int index) {
            return StepsCard(
                recipeStep: widget.recipe!.recipeSteps![index].name);
          },
        ),
      ),

It gives me a container of height 100 and makes the content inside it scrollable which is problematic as the StepsCard() is at the bottom of the column I dont want the height constraint.

Update 3:

  Widget _buildItems(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 40,
          ),
          appBar(context),
          SizedBox(
            height: 20,
          ),
          VideoCard(
            url: widget.recipe!.recipeVideoLink,
          ),
          RecipeIntroCard(
            recipeName: widget.recipe!.recipeName,
            category: widget.recipe!.category,
            time: widget.recipe!.time,
            recipeAuthor: widget.recipe!.recipeAuthor,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.start,
            children: [
              Text(
                "Ingredients",
                style: TextStyle(
                  color: Color(0xff18172b),
                  fontSize: 25,
                  fontFamily: "Poppins",
                  fontWeight: FontWeight.w400,
                ),
              ),
            ],
          ),
          SizedBox(
            height: 20,
          ),
          Container(
            height: 80.0,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: widget.recipe!.ingredients!.length,
              itemBuilder: (BuildContext context, int index) {
                return IngredientCard(
                  name: widget.recipe!.ingredients![index].name,
                  amount: widget.recipe!.ingredients![index].amount,
                );
              },
            ),
          ),
          Container(
            padding: EdgeInsets.only(top: 15),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.start,
              children: [
                Text(
                  "Steps",
                  style: TextStyle(
                    color: Color(0xff18172b),
                    fontSize: 25,
                    fontFamily: "Poppins",
                    fontWeight: FontWeight.w400,
                  ),
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemCount: widget.recipe!.recipeSteps!.length,
              itemBuilder: (BuildContext context, int index) {
                return StepsCard(
                    recipeStep: widget.recipe!.recipeSteps![index].name);
              },
            ),
          ),
        ],
      ),
    );
  }

score 0 · Answer 1 · answered May 04 '21 at 17:58

You haven't passed height to the outer Container. You could do

  GridView.count(
    crossAxisCount: 1,
    physics: const ClampingScrollPhysics(),
    shrinkWrap: true,
    children: List.generate(
      widget.recipe!.recipeSteps!.length,
      (index) {
        return Container(
          height: 30.0,
          constraints: BoxConstraints.tightForFinite(height: 10),
          child: StepsCard(
            recipeStep: widget.recipe!.recipeSteps![index].name,
          ),
        );
      },
    ),
  ),

well I actually tried that but doesn't reduce the height whatsoever — , May 04 '21 at 18:00

score 0 · Accepted Answer · answered May 04 '21 at 18:39

0

Change the childAspectRatio value in the GridView to get the desired height, however I recommend you to use ListView.builder or GridView.builder so that you would have itemExtent which let you choose the children's height while having better performance.

answered May 04 '21 at 18:39

Mohammed Alfateh

3,186
1
10
24

hi, I've tried with `ListView.builder`. It doesn't work until I wrap it with a container and give a height. Now providing a height makes the container scrollable, but as `StepsCard()` is at the bottom of the `Column` I want to load as much data as I want with out the height constraints of the container – May 04 '21 at 18:45
Wrap it with `Expanded` rather than container – Mohammed Alfateh May 04 '21 at 18:48
`RenderBox was not laid out: RenderPadding#fa470 relayoutBoundary=up12 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE 'package:flutter/src/rendering/box.dart': Failed assertion: line 1930 pos 12: 'hasSize' ` this is what I get – May 04 '21 at 18:51
hi, I've shared the full screen code can you please check and tell what's wrong with it? @7mada – May 05 '21 at 06:09
hi, childAspectRatio worked. For some reason it worked after I rebooted my entire system – May 05 '21 at 09:24
Good for you dude, still if you want to use the `ListView.builder` I would like to help. – Mohammed Alfateh May 05 '21 at 14:11
Well I was thinking about using the `listView.builder` any idea how to convert my code from GridView to `ListView.Builder`? – May 05 '21 at 16:37
Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/232005/discussion-between-7mada-and-fahim-hoque). – Mohammed Alfateh May 05 '21 at 20:10

flutter reduce the height of container

2 Answers2