not able to return elements with nested gridview builder - fluttter

Question

my case is that I am retrieving values images and text for challenges (like products ...etc), the challenges should appear one by one vertically first the image appears then the text appears over the image in the centre so I used stack and padding and I was able to retrieve one challenge information only, now I want to retrieve all challenges vertically using gridview builder, so I have did this :

 Widget build(BuildContext context) {
    return GridView.builder(
        scrollDirection: Axis.vertical,
        gridDelegate:
            SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: _challenges.length),
        itemBuilder: (_, index) {
          return InkWell(
            onTap: () {},
            child: Stack(
              children: [
                Padding(
                  padding: EdgeInsets.all(10.0),
                  child: Center(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(15),
                      child: Image(
                        image:
                            NetworkImage(_challenges[index]["image-path"][0]),
                        fit: BoxFit.cover,
                        height: 150,
                        width: 350,
                        opacity: AlwaysStoppedAnimation(.4),
                      ),
                    ),
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(60.0),
                  child: Center(
                    child: Text(
                      "${_challenges[index]["name"]}\n${_challenges[index]["date"]}",
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: 20,
                          fontWeight: FontWeight.bold),
                    ),
                  ),
                ),
              ],
            ),
          );
        });

every time i hot reload the app i get this error:

'package:flutter/src/rendering/sliver_grid.dart': Failed assertion: line 319 pos 15: 'crossAxisCount != null && crossAxisCount > 0': is not true.

and in just in case this is how i retrieved the data from Firestore:

 List _challenges = [];

  fetchChallengeData() async {
    var _fireStoreInstance = FirebaseFirestore.instance;
    QuerySnapshot qn = await _fireStoreInstance.collection("challenges").get();

    setState(() {
      for (int i = 0; i < qn.docs.length; i++) {
        _challenges.add({
          "image-path": qn.docs[i]["image-path"],
          "name": qn.docs[i]["name"],
          "date": qn.docs[i]["date"],
        });
      }
    });
  }

  @override
  void initState() {
    fetchChallengeData();

    super.initState();
  }

the home screen where i use to display the element looks like:

return Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.purple,
      title: Text(
        "أتحداك",
        style: TextStyle(fontSize: 25, fontWeight: FontWeight.bold),
      ),
      centerTitle: true,
    ),
    body: SingleChildScrollView(
      child: Column(
        children: [
          AdsBanner(),
          SizedBox(
            height: 50,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Text(
                    "التحديات",
                    style: TextStyle(fontSize: 20),
                  ),
                  Text(
                    " (إضغط على التحدي للإشتراك به)",
                    style: TextStyle(fontSize: 15),
                  )
                ],
              ),
            ),
          ),
          ChallengeCard(),
        ],
      ),
    ),
    endDrawer: NavigationDrawer());

so basically the parent is a column and the parent of the column is singleChildScrollView,

any help I would be grateful, Thanks.

Md. Yeasin Sheikh · Accepted Answer · 2022-08-11T00:14:14.697

2

We are getting data from future fetchChallengeData, So it will be null initially, Try returning another widget on null or empty cases

 Widget build(BuildContext context) {
    return _challenges!=null && _challenges.isNotEmpty? GridView.builder(...): SizedBox.shrink();

Though _challenges.isNotEmpty enough while we've List _challenges = [];

I think we are seeking somthing like this

  Widget myGridView() {
    return GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 4, //number of items on single Row
      ),
      itemCount: _challenges.length, // number of item will render
      itemBuilder: (context, index) => Text("Your item Builder"),
    );
  }

Widget placement

 body: Column(
        children: [
          AdsBanner(),
          SizedBox(
            height: 50,
          ),
          Directionality(
            textDirection: TextDirection.rtl,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Row(
                children: [
                  Text(
                    "التحديات",
                    style: TextStyle(fontSize: 20),
                  ),
                  Text(
                    " (إضغط على التحدي للإشتراك به)",
                    style: TextStyle(fontSize: 15),
                  )
                ],
              ),
            ),
          ),
         Expanded(child: ChallengeCard()),
        ],
      ),

edited Aug 11 '22 at 00:14

answered Aug 10 '22 at 23:31

Md. Yeasin Sheikh

54,221
7
29
56

true it returned the else statement which means you are right, any idea on how to initialise non empty list in my case? should i make my function sync rather than async ? – editix Aug 10 '22 at 23:49
No that wont work, because we need some time to fetch data, cases like we use FutureBuilder to loading state+.... – Md. Yeasin Sheikh Aug 10 '22 at 23:50
i have added ItemCount: _challenges.length and changed the crossAxisCount to 1, i received this error: RenderBox was not laid out: RenderRepaintBoundary#a0d9a relayoutBoundary=up12 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': – editix Aug 10 '22 at 23:57
what is the top level widget? if Column, wrap the widget `Expanded` – Md. Yeasin Sheikh Aug 10 '22 at 23:59
One more thing why do you use `crossAxisCount: _challenges.length`? – Md. Yeasin Sheikh Aug 11 '22 at 00:02
now no i just removed it and put the value to 1 – editix Aug 11 '22 at 00:06
And what is the parent widget of it – Md. Yeasin Sheikh Aug 11 '22 at 00:06
i will try your update now just saw it – editix Aug 11 '22 at 00:07
ill add the home screen code where i display the widget – editix Aug 11 '22 at 00:08
Updated please check, and thanks for your time – editix Aug 11 '22 at 00:12
Why you are using `SingleChildScrollView` – Md. Yeasin Sheikh Aug 11 '22 at 00:13
If you like to have have full scrollable body, It will be better using CustomScrollView. Also shortcut and poor performance way is using SingleChildScrollView with `shrinkWrap:true`/ `physics:NeverScollablePhycis()` on `GridView`, – Md. Yeasin Sheikh Aug 11 '22 at 00:20
I really appreciate your valuable information and help, i think it almost fixed but one issue appears which is "invalid argument(s) no host specified in uri file ///" am i using the links correctly, if yes ill check the firebase, thank you – editix Aug 11 '22 at 00:26
Where do you get this error, – Md. Yeasin Sheikh Aug 11 '22 at 00:28
on the emulator where the elements should rendered – editix Aug 11 '22 at 00:33
If you comment `ChallengeCard` widget, does it occur ? – Md. Yeasin Sheikh Aug 11 '22 at 00:35
i have commented ChallenCard in home screen the issue doesn't appear – editix Aug 11 '22 at 00:39
Now uncomment that and comment link uses like on `Image`, also not sure about your query `_fireStoreInstance` – Md. Yeasin Sheikh Aug 11 '22 at 00:41
alright its good now my bad i was using array and it is not array – editix Aug 11 '22 at 00:42
again thank you so much for your professional help and valuable information like always – editix Aug 11 '22 at 00:43
Glad to help, you can check [CustomScrollView](https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html) for better looks and performance – Md. Yeasin Sheikh Aug 11 '22 at 00:44
1

i will surely, because i was using SingleScrollView so i will check the customScrollView – editix Aug 11 '22 at 00:45

not able to return elements with nested gridview builder - fluttter

1 Answers1