Search code examples
androidflutterdartborder

Flutter || Card border tree in flutter


In my flutter project I don't know how to make correctly the children tree for a border. I want to make a Card border which contain Padding and Expanded widgets inside a children Column. Please any help is highly appreciated.

This is my code :

 Container(
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            const SizedBox(height: 30),
                          Card(
                            shape: RoundedRectangleBorder(
                              side: BorderSide(
                                color: Colors.green.shade300,
                              ),
                              borderRadius: BorderRadius.circular(15.0),
                            ),),//Card
                            Padding(
                              padding: const EdgeInsets.all(10),
                              child: Row(
                                children: <Widget>[
                                  Column(
                                    crossAxisAlignment: CrossAxisAlignment.end,
                                    children: [              
                                        child: Text("Voir tous",
                                          style: TextStyle(
                                            color: Color(0xff135888),
                                            fontWeight: FontWeight.bold,
                                            fontSize: MediaQuery.of(context).size.width * 0.03,
                                          ),),
                                      SizedBox(
                                          width : MediaQuery.of(context).size.width * 3,
                                          child: Divider(
                                          color: Color(0xffD1D1D1),
                                          height: 10,
                                          thickness: 1,
                                          indent: 2,
                                          endIndent: 2,
                                        ),
                                      ),
                                    ],
                                  ),
                                ],
                              ),
                            ),//Padding
                              Expanded(
                              child: GridView.count(
                                physics: NeverScrollableScrollPhysics(),
                                crossAxisCount: 3,
                                mainAxisSpacing: 15,
                                shrinkWrap: false,
                                padding: const EdgeInsets.all(10),
                                children: [
                                  makeDashboardItem(
                                      "smart devices", "images/smarts.png", 0),
                                  makeDashboardItem(
                                      "Surveillance", "images/cameras.png", 1),
                                ],
                              ),
                            ),//Expanded
//I want to end the Card here
                          ],
                        ),
                      ),  

Solution

  • Just set the card as parent of Column:

    Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                const SizedBox(height: 30),
                Card(
                  shape: RoundedRectangleBorder(
                    side: BorderSide(
                      color: Colors.green.shade300,
                    ),
                    borderRadius: BorderRadius.circular(15.0),
                  ),
                  child: Column(children: [
                    Padding(
                      padding: const EdgeInsets.all(10),
                      child: Row(
                        children: <Widget>[
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: [
                              Text(
                                "Voir tous",
                                style: TextStyle(
                                  color: Color(0xff135888),
                                  fontWeight: FontWeight.bold,
                                  fontSize:
                                      MediaQuery.of(context).size.width * 0.03,
                                ),
                              ),
                              SizedBox(
                                width: MediaQuery.of(context).size.width * 3,
                                child: Divider(
                                  color: Color(0xffD1D1D1),
                                  height: 10,
                                  thickness: 1,
                                  indent: 2,
                                  endIndent: 2,
                                ),
                              ),
                            ],
                          ),
                        ],
                      ),
                    ), //Padding
                    Expanded(
                      child: GridView.count(
                        physics: NeverScrollableScrollPhysics(),
                        crossAxisCount: 3,
                        mainAxisSpacing: 15,
                        shrinkWrap: false,
                        padding: const EdgeInsets.all(10),
                        children: [
                          makeDashboardItem(
                              "smart devices", "images/smarts.png", 0),
                          makeDashboardItem(
                              "Surveillance", "images/cameras.png", 1),
                        ],
                      ),
                    ), //Expanded
                  ]), //I want to end the Card here
                )
              ],
            ),
          ),