Oct 1, 2022by @kodeazy

flutter how to add eqaul space between buttons in a Row?

Home » flutter » flutter how to add eqaul space between buttons in a Row?

flutterdart

In this blog we will discuss on how to add equal space between buttons in a Row.

In flutter we have mainAxisAlignment widget to add equal space between the buttons in a Row.
Below is the syntax.

mainAxisAlignment: MainAxisAlignment.spaceBetween

Now add the mainAxisAlignment widget inside the Row 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(
        backgroundColor: Colors.grey,
        body: Center(child: Row(
          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: