Buttons Positioning using Button Bar in Flutter

Buttons Positioning using Button Bar in Flutter

A ButtonBar allows arranging buttons in a row. If there is not enough horizontal space, then buttons laying out into a column. The alignment property defines how buttons should be arranged along the horizontal axis.

import 'package:flutter/material.dart';

void main() => runApp(const MaterialApp(home: MyApp()));

class MyApp extends StatefulWidget {
  const MyApp({super.key});

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('Button bar')),
        body: ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            TextButton(
              child: const Text('Add'),
              onPressed: () {},
            ),
            ElevatedButton(
              child: const Text('Add'),
              onPressed: () {},
            ),
            OutlinedButton(
              child: const Text('Add'),
              onPressed: () {},
            ),
          ],
        ));
  }
}

Leave a Comment

Cancel reply

Your email address will not be published.