Search code examples
fluttercoding-styleflutter-layoutscaffold

arranging a scaffold with buttons


i wrote this code in flutter and i wanna know if i can make it better, i did a lot of "work around" that i feel there's a better way to write it. especially the buttons with the expanded between them, and the sizedbox.

the screen has text in the middle(getVerse), and and two buttons, one is bottom left and the other is bottom right.

the first expanded separate the text from the buttons, and the second expanded is to separate the two buttons

help is appreciated and thanks for your time.

Scaffold(
  appBar: AppBar(
    title: Text(
      suras.elementAt(widget.index),
      textAlign: TextAlign.right,
    ),
  ),
  body: Column(
    children: [
      SizedBox(
        height: 100,
      ),
      Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(
          getVerse(widget.index + 1, currentVerse),
          textAlign: TextAlign.center,
          style: TextStyle(
            color: Colors.white,
            fontWeight: FontWeight.bold,
            fontSize: 24,
            fontFamily: 'KFGQPC BAZZI Uthmanic Script',
          ),
        ),
      ),
      Expanded(child: Container()),
      Row(
        children: [
          ElevatedButton(
            onPressed: () {
              setState(() {
                currentVerse++;
              });
            },
            child: Text('not sure'),
          ),
          Expanded(child: Container()),
          ElevatedButton(
            onPressed: null,
            child: Text('sure'),
          ),
        ],
      ),
    ],
  ),
);

Solution

  • If you want that those 2 buttons to stay at the bottom you can use floatingActionButton in the Scaffold property. You can change the location of those buttons with the floatingActionButtonLocation.

     Scaffold(
            appBar: AppBar(
              title: Text('MyApp'),
            ),
            floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
            floatingActionButton: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Not sure'),
                ),
                ElevatedButton(
                  onPressed: () {},
                  child: Text('Sure'),
                )
              ],
            ),
            body: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'My Text',
                textAlign: TextAlign.center,
              ),
            ),
          ),