how to make 3*3 containers like matrix using row in container with margin of 30,im a beginner in flu-CodePudding

appBar: AppBar( title: Text("row"), ), body: Row( children: [ Column( children: [Container( padding: EdgeInsets.all(30), margin: EdgeInsets.all(30), width: 50,

    height: 50,
    decoration: BoxDecoration(
        color: Colors.blue),

    child: Center(child: Text('2')),),
  Text('5'),
  Text('6'),
  ],
),

Column(
children: [Container(
padding: EdgeInsets.all(30),
margin: EdgeInsets.all(30),
width:50,

height:50,
decoration: BoxDecoration(
color:Colors.blue


child: Text('3')),Text('5'),
Text('6'),
),
],
),
Column(
children: [Container(child: Text('4')),Text('5'),
Text('6'),],
),
],
),
)
,
);

} }

CodePudding user response：

set crossAxisCount: 3, For more info refer this

CodePudding user response：

appBar: AppBar( 
        title: Text("row")
        ), 
       body: Container(
             width: MediaQuery.of(context).size.width,
             margin:EdgeInsets.all(30.0), 
             child: Column(
                children:[
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children:[
                        Text(‘1’),
                        Text(‘2),
                        Text(‘3’)       
                    ]
                ),
                SizedBox(height:10),    
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children:[
                        Text(‘4’),
                        Text(‘5),
                        Text(‘6’)       
                    ]
                ),
                SizedBox(height:10),    
                Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    children:[
                        Text(‘7’),
                        Text(‘8),
                        Text(‘9’)       
                    ]
                )               
            ]
        ))