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
)
],
),
),