How to create a button bar for displaying a row of buttons?

Question

class NewBar extends StatelessWidget{

 final MainAxisAlignment alignment;
 final List<Widget> children;
 final MainAxisSize mainAxisSize;

 const NewBar({
Key key,
this.alignment: MainAxisAlignment.end,
this.mainAxisSize: MainAxisSize.max,
this.children: const <Widget>[],
}) : super(key: key);

@override
Widget build(BuildContext context) {
final double paddingUnit = ButtonTheme.of(context).padding.horizontal / 
4.0;
return new Padding(
    padding: new EdgeInsets.symmetric(
        vertical: 2.0 * paddingUnit,
        horizontal: paddingUnit
    ),
    child: new Row(
        mainAxisAlignment: alignment,
        mainAxisSize: mainAxisSize,
        children: children.map<Widget>((Widget child) {
          return new Padding(
              padding: new EdgeInsets.symmetric(horizontal: paddingUnit),
              child: child
          );
        }).toList()
    )
);
}
}

this is some of the code for the button bar only. It does not display anything though. maybe i am putting the class at the wrong place or i should return something to the main app. am new to flutter. Any ideas?

Answer 1

You can use ButtonBar multi child layout widget.

Example:

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    title: 'title',
    home: new MyApp(),
  ));
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Center(
        child: new ButtonBar(
          mainAxisSize: MainAxisSize.min, // this will take space as minimum as posible(to center)
          children: <Widget>[
            new RaisedButton(
              child: new Text('Hello'),
              onPressed: null,
            ),
            new RaisedButton(
              child: new Text('Hi'),
              onPressed: null,
            ),
          ],
        ),
      ),
    );
  }
}

Outcome: