CODEWITHSUNDEEP
flutterdartflutter-layout
phongyewtong
phongyewtong

Reputation: 5309

How do I make the padding/space on buttonBar smaller on flutter?

How do I make the padding/space on buttonBar smaller on flutter? The space between right and left of mon, tue, wed, thu?

enter image description here

     FlatButton _dayBar(String text) {
        return FlatButton(
          child: Text(
            text,
            style: TextStyle(
              color: Colors.white,
              fontSize: 12,
            ),
          ),
          color: Colors.grey,
          onPressed: () {/** */},
          shape: CircleBorder(),
          //padding: EdgeInsets.all(-20),
        );
      }

      ButtonBar _selectDayBar() {
        return ButtonBar(
          alignment: MainAxisAlignment.center,
          children: <Widget>[
            _dayBar("Mon"),
            _dayBar("Tue"),
            _dayBar("Wed"),
            _dayBar("Thu"),
            // _dayBar("Fri"),
            // _dayBar("Sat"),
            // _dayBar("Sun"),
          ],
          //buttonPadding: EdgeInsets.all(2),
        );
      }

Upvotes: 0

Views: 688

Answers (2)

Yury Kostov
Yury Kostov

Reputation: 1

Using Row instead of ButtonBar helped for me (just an easy solution).

Here is (buttons are IconButton)

Upvotes: 0

Sebastian
Sebastian

Reputation: 3894

You should try tweaking the alignment property. For example:

alignment: MainAxisAlignment.spaceEvenly,

Also try spaceBetween and spaceAround.

Try this code

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyTable(),
        ),
      ),
    );
  }
}

class MyTable extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      child: ButtonBar(
        alignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          _dayBar("Mon"),
          _dayBar("Tue"),
          _dayBar("Wed"),
          _dayBar("Thu"),
          // _dayBar("Fri"),
          // _dayBar("Sat"),
          // _dayBar("Sun"),
        ],
        buttonPadding: EdgeInsets.all(2),
      ),
    );
  }

  FlatButton _dayBar(String text) {
    return FlatButton(
      child: Text(
        text,
        style: TextStyle(
          color: Colors.white,
          fontSize: 12,
        ),
      ),
      color: Colors.grey,
      onPressed: () {/** */},
      shape: CircleBorder(),
      padding: EdgeInsets.all(-20),
    );
  }
}

Upvotes: 2

Related Questions