FLUTTER: How to remove the gridview cells background?

608

You can wrap the gridView with a container and then use the property color in the container to change the background color.

 Container(
    color : Colors.black,
    child : GridView.count(
         ..... 
    ),
  )
),
Share:
608
luc
Author by

luc

Updated on December 17, 2022

Comments

  • luc
    luc over 1 year

    I tried to put boxshadow to my containers inside a gridview but shadows are outside the cells and the background color of cells are different from the page background color. I want to have my containers in gridview with same backgroundcolor and clean boxshadow to my container. If I use it outside of gridview it works perfectly. This is my code:

    Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: Center(
        child: FutureBuilder(
          future:
              Firestore.instance.collection('rooms').document(pincode).get(),
          builder: (BuildContext context, AsyncSnapshot snapshot) {
            if (snapshot.hasData) {
              nomines = snapshot.data['Nominés'];
              thequestion = snapshot.data['Question'].toString();
              return Column(children: <Widget>[
                Text(thequestion),
                Expanded(
                  child: StreamBuilder<QuerySnapshot>(
                    stream: Firestore.instance
                        .collection('rooms')
                        .document(pincode)
                        .collection('users')
                        .snapshots(),
                    builder: (BuildContext context,
                        AsyncSnapshot<QuerySnapshot> snapshot) {
                      if (!snapshot.hasData)
                        return Text("Chargement....");
                      else {
                        return new GridView.count(
                            crossAxisCount: 2,
                            children: snapshot.data.documents
                                .map((DocumentSnapshot document) {
                              if (document['id'] == nomines[0] ||
                                  document['id'] == nomines[1])
                                return Container(
                                  child: InkWell(
                                    onTap: () {
                                      vote(document['id']).then((a) {
                                        Navigator.push(
                                            context,
                                            MaterialPageRoute(
                                              builder: (context) =>
                                                  Waitresults(),
                                            ));
                                      });
                                    },
                                    child: Container(
                                      decoration: BoxDecoration(
                                          border: Border.all(
                                              width: 2.0, color: Color(document['couleur'])),
                                          boxShadow: <BoxShadow>[
                                            BoxShadow(
                                                color: Color(document['couleur']),
                                                blurRadius: 0,
                                                offset: Offset(7, 3))
                                          ],
                                          shape: BoxShape.circle),
                                      child: OvalPic(document['photo'],
                                          document['couleur']),
                                    ),
                                  ),
                                );
                              else
                                return null;
                            }).toList()
                                  ..removeWhere((el) => el == null));
                      }
                    },
                  ),
                )
              ]);
            } else
              return CircularProgressIndicator();
          },
        ),
      ),
    );
    

    }