[Reland] Introduce double Flex.spacing parameter for Row/Column spacing (#152890)
Relands https://github.com/flutter/flutter/pull/152472 (Fixed error causing message test, maybe by https://github.com/flutter/flutter/pull/152501)
---
fixes [add spacing parameter to Column and Row](https://github.com/flutter/flutter/issues/55378)
### `Column.spacing` Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.amber,
)),
child: const Row(
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),
),
),
),
),
],
),
],
),
),
),
),
),
);
}
}
```
</details>
### Preview
<img width="1072" alt="Screenshot 2024-07-30 at 15 40 59" src="https://github.com/user-attachments/assets/14f21091-9e46-4a58-8552-1379f4ba9216">
### `Row.spacing` Code sample
<details>
<summary>expand to view the code sample</summary>
```dart
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Padding(
padding: const EdgeInsets.all(16.0),
child: DecoratedBox(
decoration: BoxDecoration(
border: Border.all(
color: Colors.amber,
)),
child: const Column(
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),
),
),
),
),
],
),
],
),
),
),
),
),
);
}
}
```
</details>
### Preview
<img width="1072" alt="Screenshot 2024-07-30 at 15 39 42" src="https://github.com/user-attachments/assets/717e9f5e-a491-4853-ba74-e72ec7493363">
00ef750d28