Search code examples
flutterdartflutter-animation

How to align Row in a Column despite setting alignments?


I want to align following cards in a way that on both sides margin is same, but as you can see on right side, margin is increased. enter image description here

I have added required alignments to the Column, but margin on right is still more

Code:

body: SingleChildScrollView(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.stretch,
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: rows.map((row) => Row(children: row)).toList(),
    ),
  ),

Code of ReusableCard:

@override


Widget build(BuildContext context) {
    return GestureDetector(
      onTap: (){
        print('AM TAPPED! reporting: GestureDetector');
      },
      child: Padding(
        padding: const EdgeInsets.all(13.0),
        child: Container(
          margin: EdgeInsets.only(left: 10.0, right: 2.0),
          width: 200.0,
          height: 150.0,
          decoration: BoxDecoration(
            color: kSecondaryColor,
            borderRadius: BorderRadius.circular(10.0),
          ),
          child: Text(
            'am pressed, reporting Gesture Detector\'s Container',
          ),
        ),
      ),
    );
  }

Solution

  • Add margin to child: Container of ReusableCard() as:

    margin: EdgeInsets.only(left: 10.0, right: 2.0),