adding rows and columns together using flutter-CodePudding

i am trying to add two-row and 4 columns, I added rows but couldn't add columns, I want them to take the same size so I used expanded() here is a picture

here is what iam lokking for

i am done with rows but couldn't adds columns

 Widget build(BuildContext context) {
return MaterialApp(
  home: Scaffold(
    appBar: AppBar(
      backgroundColor: Colors.black,
      title: Text("homepage"),
    ),
    backgroundColor: Colors.yellowAccent[700],
    body: SafeArea(
      child: Row(
        children: [
          Expanded(
            child: Container(
              color: Colors.yellowAccent[700],
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20), // Image border
                child: SizedBox.fromSize(
                  size: Size.fromRadius(75), // Image radius
                  child: Image.network('https://picsum.photos/250?image=9',
                      fit: BoxFit.cover),
                ),
              ),
              margin: EdgeInsets.all(15),
            ),
          ),
          Expanded(
            child: Container(
              color: Colors.yellowAccent[700],
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20), // Image border
                child: SizedBox.fromSize(
                  size: Size.fromRadius(75), // Image radius
                  child: Image.network('https://picsum.photos/250?image=9',
                      fit: BoxFit.cover),
                ),
              ),
              margin: EdgeInsets.all(15),
            ),
          ),
        ],
      ),
      
    ),
  ),
);

CodePudding user response：

Use GridView.

 GridView.count(
  crossAxisCount: 2,
  crossAxisSpacing: 10,
  mainAxisSpacing: 10,
  children: [
    ...List.generate(
      6,
      (index) => ClipRRect(
        borderRadius: BorderRadius.circular(20), // Image border
        child: Container(
          color: Colors.yellowAccent[700],
          child: SizedBox.fromSize(
            size: Size.fromRadius(75), // Image radius
            child: Image.network(
                'https://picsum.photos/250?image=9',
                fit: BoxFit.cover),
          ),
        ),
      ),
    )
  ],
),

Using Row and Column, you need to provide fixed height for each Row.

    body: SafeArea(
          child: LayoutBuilder(
            builder: (context, constraints) => Column(
              children: [
                SizedBox(
                  height: constraints.maxHeight * .3,
                  child: Row(
                    children: [
                      ...List.generate(
                        2,
                        (index) => Expanded(
                          child: Container(
                            color: Colors.yellowAccent[700],
                            padding: EdgeInsets.all(12),
                            child: ClipRRect(
                              borderRadius:
                                  BorderRadius.circular(20), // Image border
                              child: Image.network(
                                  'https://picsum.photos/250?image=9',
                                  fit: BoxFit.cover),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
                SizedBox(
                  height: constraints.maxHeight * .3,
                  child: Row(
                    children: [
                      ...List.generate(
                        2,
                        (index) => Expanded(
                          child: Container(
                            color: Colors.yellowAccent[700],
                            padding: EdgeInsets.all(12),
                            child: ClipRRect(
                              borderRadius:
                                  BorderRadius.circular(20), // Image border
                              child: Image.network(
                                  'https://picsum.photos/250?image=9',
                                  fit: BoxFit.cover),
                            ),
                          ),
                        ),
                      )
                    ],
                  ),
                ),
              ],
            ),
          ),
        ),