flutterlistviewflutter-layoutstaggered-gridview

ListView inside MasonryGridView in Flutter


I have a MasonryGridView :

@override
  Widget buildPage(
      BuildContext context, AnonymousQuestionnaireDetailsPageVM viewModel) {
    return Scaffold(
  appBar: AppBar(
    title: Text(AppLocalizations.of(context)!.questionnaire),
  ),
  body: Column(
    children: [
      Expanded(
        child: MasonryGridView.count(
          itemCount: items.length,
          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          crossAxisCount: 1,
          mainAxisSpacing: 1,
          crossAxisSpacing: 1,
          itemBuilder: (context, index) {
            return ListView()
        ),
      ),
      ElevatedButton(
        child: Text(AppLocalizations.of(context)!.finishAction),
        onPressed: () {},
      ),
    ],
  ),
);

I also have a ListView separate class with the following widget:

@override
  Widget build(BuildContext context) {
    return Flexible(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
          const Text(
            "Some title",
            style: TextStyle(fontSize: 16),
          ),
          ListView.builder(
            itemCount: 100,
            itemBuilder: (context, index) {
              return const ListTile(
                  title: Text("some"),
                  contentPadding:
                      EdgeInsets.symmetric(vertical: 0.0, horizontal: 16.0),
           );
         },
       ),
      ],
    ),
   );
  }

When I run my code, I it gives the following error:

Failed assertion: line 1979 pos 12: 'hasSize'

The relevant error-causing widget was
Column 

How can I set size to column or fix it in another way? It's essential for me to have ListView as a separate class (there'll be lots of logic) and to give it a title.


Solution

  • ListView is getting unbounded height, you can provide fixed height, or shrinkWrap: true, on ListView.

        itemBuilder: (context, index) {
          return ListView(
            shrinkWrap: true,
            children: [Text("A")],
          );
        },
    

    Or

    itemBuilder: (context, index) {
      return SizedBox(
        height: 100,
        child: ListView(
          // shrinkWrap: true,
          children: [Text("A")],
        ),
      );
    },
    

    There is a cost on using ShrinkWrap, if you dont need scrollable for individual item, you can try Column widget.

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(),
          body: Column(
            children: [
              Expanded(
                child: MasonryGridView.count(
                  itemCount: 33,
                  padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 10),
                  crossAxisCount: 1,
                  mainAxisSpacing: 1,
                  crossAxisSpacing: 1,
                  itemBuilder: (context, index) {
                    return SizedBox(
                      height: 100,
                      child: ListView(
                        // shrinkWrap: true,
                        children: [Text("A")],
                      ),
                    );
                  },
                ),
              ),
              ElevatedButton(
                child: Text("f"),
                onPressed: () {},
              ),
            ],
          ),
        );
      }