Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

flutter

dart

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.

like image 614
Ross Avatar asked Dec 24 '22 01:12

Ross


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!

like image 152
Lucas Aschenbach Avatar answered Jan 12 '23 01:01

Lucas Aschenbach


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.

like image 35
lase Avatar answered Jan 11 '23 23:01

lase