mirror of
https://github.com/flutter/flutter.git
synced 2026-01-24 00:45:18 +08:00
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">