How can i solve this problem using row and column? flutter problem-CodePudding

help_post I need this problem solution.I faced some problems to solve it~I'm a fresher . I tried but it doesn't working... That's The problem is given by my friend and that's minemy output sry for my bad english...

CodePudding user response：

I see, that in your friends task you have 3 Columns in a Row, so your structure needs to be something like that:

Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween, //this makes your columns be an equal width from each other
children: [
  Column(),
  Column(),
  Column(),
],
);

You also can wrap each Column in a SizedBox and give it a width MediaQuery.of(context).size.width * 0.25 (so your Columns will be of one size), and you can wrap your Row in SizedBox with width double.infinity (to take all display width)

And next step for you is to make logic for the blocks inside each column similarly. Good luck!

CodePudding user response：

In your case, it would be easier to use flutter_staggered_grid_view to achieve what you want, use it just one Staggered GridView or 3 in a Row:

StaggeredGridView.countBuilder(
  crossAxisCount: 4,
  itemCount: 8,
  itemBuilder: (BuildContext context, int index) => new Container(
      color: Colors.green,
      child: new Center(
        child: new CircleAvatar(
          backgroundColor: Colors.white,
          child: new Text('$index'),
        ),
      )),
  staggeredTileBuilder: (int index) =>
      new StaggeredTile.count(2, index.isEven ? 2 : 1),
  mainAxisSpacing: 4.0,
  crossAxisSpacing: 4.0,
)