Home / Questions / 550169
Accepted
mauricio
Asked: 2022-08-05 16:50:55 +0800 CST 2022-08-05 16:50:55 +0800 CST

Problems trying to wrap Gridview.Builder inside a Widget

  • 772

I am displaying images as a response from an API inside a Gridview.builder, when I wrap it inside a center everything works fine. enter image description here

the problem arises when what I want is to add a sizebox to move the gridview away from the appbar and put content in between them. the center only has child so I can't put more elements. but I want to replace it with a listview or a column that receives childrens. and it does not throw me any error by console. the app just goes blank.

gridview code

Widget build(BuildContext context) {
    return FutureBuilder<List<Dogdata>>(
      future: fetchDogdata(),
      builder: (BuildContext context, AsyncSnapshot<List<Dogdata>> snapshot) {
        if (snapshot.hasData) {
          final lista = snapshot.data!;
          return GridView.builder(
            shrinkWrap: true,
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              crossAxisSpacing: 10.0,
              mainAxisSpacing: 10.0,
              
            ),
            itemCount: lista.length,
            itemBuilder: (BuildContext context, int index) {
              return Container(
                decoration: BoxDecoration(
                  //border: Border.all(),
                  borderRadius: BorderRadius.circular(20),
                  shape: BoxShape.rectangle,

                ),
                child: Image.network(
                  lista[index].imagen,
                  fit: BoxFit.cover,
                  width: double.infinity,
                  height: double.infinity,
                ),
              );
            },
          );
        } else {
          return const CircularProgressIndicator();
        }
      },
    );
  }
}

and the main screen that when putting the column or listview gives an error.

body: Center(
          child: Column(
            children: [
              Api(),
            ],
          )),
flutter

2 Answers

  1. Best Answer

    It is very likely that it is a rendering issue, I advise you to leave it as you have it, the only thing that I think would help you is to enclose it GridView.builderin an exanded:

    Scaffold(
 appbar: appbar(),
 body: Column(children: [
    //Widget entre el app y el gridView
    miWidget(),
    //GridView
    Expanded(
      child: Api(),
   )
  ]
 ),
),

    expandedwhat it will do is occupy the rest of the space that remains on the screen, with that I think the problem of the blank screen should go away.

    Another solution would be to enclose the GridView in a container and give it a fixed height, but I don't think you're going for that.

    • 1

  2. Remove that center. Leave only the column and as children put a sizebox with the desired height and then an expanded with the GridView

    • 1