Tuesday, April 30, 2024
HomeiOS Developmentios - Make round buttons fill width of row

ios – Make round buttons fill width of row


I have been utilizing Flutter for a few days and I am struggling to make my buttons change in dimension. At present, I am utilizing two ElevatedButtons with CircleBorder shapes, inside a row inside a column that additionally accommodates a daily ElevatedButton. What I want is for the buttons to all increase to take up the complete width of the row with only a little bit of margin across the edges. Thanks.

enter image description here

I’ve used the colors simply to spotlight the realm taken up by the container, row and buttons respectively.

That is the form of format I am making an attempt to go for:

enter image description here

residence.dart:

class MyHomePage extends StatelessWidget {
  const MyHomePage({tremendous.key});

  @override
  Widget construct(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Textual content("Choose Holes"),
      ),
      physique: Container(
        colour: Colours.lightGreenAccent,
        little one: const Column(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          kids: <Widget>[
            SizedBox(height: 30),
            HoleSelectionButtons(),
            GoButton()
          ],
        ),
      ),
    );
  }
}

buttons.dart:

class HoleSelectionButtons extends StatelessWidget {
  const HoleSelectionButtons({tremendous.key});

  @override
  Widget construct(BuildContext context) {
    // TODO: Change dimension and format of buttons
    return Container(
      colour: Colours.redAccent,
      little one: const Row(
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        kids: <Widget>[
          HoleButton(holes: 9),
          HoleButton(holes: 18),
        ],
      ),
    );
  }
}

class HoleButton extends StatelessWidget {
  const HoleButton({
    required this.holes,
    tremendous.key,
  });

  last int holes;

  @override
  Widget construct(BuildContext context) {
    return Container(
      colour: Colours.blueAccent,
      little one: Shopper<AppState>(
        builder: (context, state, little one) => ElevatedButton(
          type: ElevatedButton.styleFrom(
            form: const CircleBorder(),
            backgroundColor: state.holeCount() == holes ? Colours.blue : Colours.gray,
            // TODO: Make this come from the theme, or at the very least make it a greater color
          ),
          onPressed: () {
            state.setHoleCount(holes);
          },
          little one: Textual content(holes.toString()),
        ),
      ),
    );
  }
}



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments