[Reland] Introduce doubleFlex.spacing parameter for Row/Column spacing

[TahaTesser]

Relands #152472 (Fixed error causing message test, maybe by #152501)

---

fixesadd spacing parameter to Column and Row

Column.spacing Code sample

expand to view the code sample

import'package:flutter/material.dart';
voidmain() =>runApp(constMyApp());
classMyAppextendsStatelessWidget {
constMyApp({super.key});
@overrideWidgetbuild(BuildContext context) {
returnMaterialApp(
debugShowCheckedModeBanner:false,
home:Scaffold(
backgroundColor:Colors.black,
body:Center(
child:Padding(
padding:constEdgeInsets.all(16.0),
child:DecoratedBox(
decoration:BoxDecoration(
border:Border.all(
color:Colors.amber,
)),
child:constRow(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children:<Widget>[
Column(
spacing:40.0,
// ignore: avoid_redundant_argument_values
mainAxisAlignment:MainAxisAlignment.start,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.topCenter,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.bottomCenter,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Column(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.center,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.topCenter,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.bottomCenter,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Column(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.end,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.topCenter,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.bottomCenter,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Column(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.topCenter,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.bottomCenter,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Column(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.spaceAround,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.topCenter,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.bottomCenter,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Column(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.topCenter,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.bottomCenter,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
],
),
),
),
),
),
);
}
}

Preview

Row.spacing Code sample

expand to view the code sample

import'package:flutter/material.dart';
voidmain() =>runApp(constMyApp());
classMyAppextendsStatelessWidget {
constMyApp({super.key});
@overrideWidgetbuild(BuildContext context) {
returnMaterialApp(
debugShowCheckedModeBanner:false,
home:Scaffold(
backgroundColor:Colors.black,
body:Center(
child:Padding(
padding:constEdgeInsets.all(16.0),
child:DecoratedBox(
decoration:BoxDecoration(
border:Border.all(
color:Colors.amber,
)),
child:constColumn(
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children:<Widget>[
Row(
spacing:40.0,
// ignore: avoid_redundant_argument_values
mainAxisAlignment:MainAxisAlignment.start,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerLeft,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerRight,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Row(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.center,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerLeft,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerRight,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Row(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.end,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerLeft,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerRight,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Row(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.spaceBetween,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerLeft,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerRight,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Row(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.spaceAround,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerLeft,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerRight,
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
Row(
spacing:40.0,
mainAxisAlignment:MainAxisAlignment.spaceEvenly,
children:<Widget>[
ColoredBox(
color:Color(0xffff0000),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
alignment:Alignment.centerLeft,
child:Text(
'RED',
style:TextStyle(color:Colors.white),
),
),
),
),
ColoredBox(
color:Color(0xff00ff00),
child:SizedBox(
width:50.0,
height:75.0,
child:Center(
child:Text(
'GREEN',
style:TextStyle(color:Colors.black),
),
),
),
),
ColoredBox(
color:Color(0xff0000ff),
child:SizedBox(
width:50.0,
height:75.0,
child:Align(
child:Text(
'BLUE',
style:TextStyle(color:Colors.white),
),
),
),
),
],
),
],
),
),
),
),
),
);
}
}

Preview

Pre-launch Checklist

• I read the Contributor Guide and followed the process outlined there for submitting PRs.
• I read the Tree Hygiene wiki page, which explains my responsibilities.
• I read and followed the Flutter Style Guide, including Features we expect every widget to implement.
• I signed the CLA.
• I listed at least one issue that this PR fixes in the description above.
• I updated/added relevant documentation (doc comments with ///).
• I added new tests to check the change I am making, or this PR is test-exempt.
• I followed the breaking change policy and added Data Driven Fixes where supported.
• All existing and new tests are passing.

If you need help, consider asking for advice on the #hackers-new channel on Discord.

[TahaTesser]

This message test didn't account for spacing debug description, now fixed.

[goderbauer]

LGTM

[auto-submit]

auto label is removed for flutter/flutter/152890, due to - The status or check suite Mac tool_integration_tests_2_5 has failed. Please fix the issues identified (or deflake) before re-applying this label.