by @kodeazy
flutter how to add eqaul vertical space between buttons in a Coulmn Widget?
In this blog we will discuss on how to add equal vertical space between buttons in a Coulmn widget.
In flutter we have mainAxisAlignment widget to add equal space between the buttons in a Coulmn.
Below is the syntax.
mainAxisAlignment: MainAxisAlignment.spaceBetween
Now add the mainAxisAlignment widget inside the Coulmn widget as shown in below example.
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Coulmn Buttons Example'),),
backgroundColor: Colors.grey,
body: Center(child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children:<Widget> [
TextButton(
child: Text("Button 1"),
onPressed: (){},
style: TextButton.styleFrom(backgroundColor: Colors.red),
),
TextButton(
child: Text("Button 2"),
onPressed: (){},
style: TextButton.styleFrom(backgroundColor: Colors.yellow),
),
TextButton(
child: Text("Button 3"),
onPressed: (){},
style: TextButton.styleFrom(backgroundColor: Colors.green),
)
],
)),
),
);
}
}