Home > other >  ListView inside MasonryGridView in Flutter
ListView inside MasonryGridView in Flutter

Time:09-03

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.

CodePudding user response:

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: () {},
          ),
        ],
      ),
    );
  }
  • Related