Flutter, How to make my raw material buttons large and more tightly packed together.

user_5429320 0
Viewed 7989

I have some code that creates 7 Raw Material Buttons in the shape of a circle. However I cannot seem to change the size of the circle, or position them closer together.

Page.dart

Row(
  children: <Widget>[
    new ThemeButton(Colors.red, () => print("red")),
    new ThemeButton(Colors.orange, () => print("orange")),
    new ThemeButton(Colors.yellow, () => print("yellow")),
    new ThemeButton(Colors.green, () => print("green")),
    new ThemeButton(Colors.blue, () => print("blue")),
    new ThemeButton(Colors.indigo, () => print("pink")),
    new ThemeButton(Colors.purple, () => print("purple")),
  ],
),

ThemeButton.dart

@override
Widget build(BuildContext context) {
  return RawMaterialButton (
    shape: CircleBorder(),
    fillColor: _themeColour,
    elevation: 0.0,
    highlightElevation: 0.0,
    onPressed: () => _onPressed(),
    splashColor: Colors.transparent,  
    highlightColor: Colors.transparent,
  );
}

Display:

enter image description here

So the three issue I am facing are all around the size and positioning on the element.

  1. The Circles are too small for my liking.
  2. The space around the circles are too wide.
  3. I can click outside the circle and it will still register the click.

I have looked at the arguments for the Raw Material Button and cannot see what I can change. Adding a padding widget and setting it to 0 doesn't help.

dart flutter
2 Answers

Changing the padding property, unfortunately, did not work for me. However, changing the constraints parameter like in this example turned out to be quite effective:

RawMaterialButton(
    constraints: BoxConstraints.tight(Size(36, 36)),
    onPressed: null,
    child: Icon(Icons.trending_up, size: 18),
    shape: new CircleBorder(),
    elevation: 0.0,
    fillColor: Color.fromARGB(255, 240, 240, 240),
),

Hope it helps!

user_92482770

According to the docs for RawMaterialButton, there should be a padding property that you can set in the constructor, which is typical for this type of component. Try updating the padding value in the constructor of the button instead of adding a new Widget. To be clear, trying setting padding to EdgeInsets.all(0.0).

For further sizing, you can start to look at the Row class properties, specifically MainAxisSize, or wrapping them in variations of the Flexible Widget family.

user_7112990
Related