Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

FLUTTER: How to change background color inside a gridview?

I use gridview in flutter and I have a problem, the backgroundcolor of the screen is black but when I return a gridview the background color of the cells are white. I want to change the background color of the cells. I try to move the gridview inside a container and add a Boxdecoration but it doesn't works, can you help me ? There is my code:

Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Theme.of(context).backgroundColor,
  body: Center(
    child: Column(
      children: <Widget>[
        conseil(text, lien),
        SizedBox(height: 20,),
        Text("GAME PIN", style: TextStyle(fontSize: 40),),
        Container(
          padding: EdgeInsets.fromLTRB(30, 10, 30, 10),
            decoration: BoxDecoration(
              border: Border.all(width: 2.0, color: Color(0xffa8277b)),
              borderRadius: BorderRadius.circular(15),
            ),
            child: Text(id, style: TextStyle(fontSize: 30),)),
        Expanded(
          child: StreamBuilder<QuerySnapshot>(
            stream: Firestore.instance
                .collection('rooms')
                .document(id)
                .collection('users')
                .snapshots(),
            builder: (BuildContext context,
                AsyncSnapshot<QuerySnapshot> snapshot) {
              if (!snapshot.hasData)
                return Text("Chargement....");
              else {
                return GridView.count(
                    crossAxisCount: 6,
                    children: snapshot.data.documents
                        .map((DocumentSnapshot document) {
                      return OvalPic(
                          document['photo'], document['couleur']);
                    }).toList());
              }
            },
          ),
        ),
        button(mypink, 'COMMENCER', context),
        SizedBox(height: 15,)
      ],
    ),
  ),
);

}

like image 320
luc Avatar asked Jan 18 '20 17:01

luc


People also ask

How do you change the background color in flutter?

To set background image in Flutter, you can use the Container widget. The Container widget has a property called decoration. Then you can use the BoxDecoration class to provide the actual image.

How do I add background color to my page in flutter?

To set Background Color of a Screen in Flutter There are two ways to set Background Color of a Screen in Flutter. You can directly add backgroundColor to Scaffold widget. this will set your entire screen. It has a property named backgroundColor to change the background color of the Scaffold widget.


1 Answers

Wrapping it in a Container and adding color to it should do it,

return Container(
color: Colors.black,
child: GridView.count(
                    crossAxisCount: 4,
                    children: snapshot.data.documents
                        .map((DocumentSnapshot document) {
                      return OvalPic(
                          document['photo'], document['couleur']);
                    }).toList()));
like image 56
Arhaam Patvi Avatar answered Oct 05 '22 05:10

Arhaam Patvi