Oct 2, 2022by @kodeazy

flutter how to add eqaul vertical space between buttons in a Coulmn Widget?

Home » flutter » flutter how to add eqaul vertical space between buttons in a Coulmn Widget?

flutterdart

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),
            )
          ],
        )),
      ),
    );
 }
}

Output: