Search code examples
flutterbuttonwidgetalignment

How to align button within a widget in Flutter


Trying to make one small change without having to pay a developer.... I want to align the button to the bottom of the screen, but I can only seem to place it within the scrollable text area. It needs to be on display so that the viewer doesn't have to scroll to see the button.

enter image description here

Here's the code from that page:

Widget showEveryday2Card() {
    return FlipCard(
      onFlip: () => _sound.playLocal("shuffle.mp3"),
      direction: FlipDirection.HORIZONTAL, // default
      //front: Image.asset('images/cards/24.png'),
      front: Container(
        color: Colors.white,
        child: Align(
          alignment: Alignment.center,
          child: Image.asset('images/cards/24.png'),
        ),
      ),
      back: Container(
        color: Colors.white,
        child: Stack(children: <Widget>[
          Positioned.fill(
            child: Align(
              alignment: Alignment.center,
              child: Image.asset('images/cards/cardbacks/back24.png'),
            ),
          ),
          Center(
            child: Container(
              padding: EdgeInsets.only(
                  top: (MediaQuery.of(context).size.height > 800)
                      ? 20
                      : (MediaQuery.of(context).size.height > 700) ? 10 : 0),
              height: 0.5 * MediaQuery.of(context).size.height,
              width: 0.8 * MediaQuery.of(context).size.width,
              child: Center(
                child: CupertinoScrollbar(
                  isAlwaysShown: true,
                  controller: _controller,
                  child: ListView(children: <Widget>[
                    Text(
                      "Scrollable text",
                      style: TextStyle(
                        fontFamily: 'GillSansMT',
                        fontWeight: FontWeight.normal,
                        color: Colors.black,
                        fontSize: (MediaQuery.of(context).size.height > 900)
                            ? 30
                            : 14,
                      ),
                    ),
                    new RaisedButton(
                      onPressed: () {
                        Navigator.pop(context);
                        },
                        child: Text('Go back!'),
                    )
                  ]),
                ),
              ),
            ),
          ),
        ]),
      ),
    );
  }

If you can point me in the right direction I'd be really grateful.

Thanks!


Solution

  • return FlipCard(
      onFlip: () => _sound.playLocal("shuffle.mp3"),
      direction: FlipDirection.HORIZONTAL, // default
      //front: Image.asset('images/cards/24.png'),
      front: Container(
        color: Colors.white,
        child: Align(
          alignment: Alignment.center,
          child: Image.asset('images/cards/24.png'),
        ),
      ),
      back: Container(
        color: Colors.white,
        child: Stack(children: <Widget>[
          Positioned.fill(
            child: Align(
              alignment: Alignment.center,
              child: Image.asset('images/cards/cardbacks/back24.png'),
            ),
          ),
          Center(
            child: Container(
              padding: EdgeInsets.only(
                  top: (MediaQuery.of(context).size.height > 800)
                      ? 20
                      : (MediaQuery.of(context).size.height > 700)
                          ? 10
                          : 0),
              height: 0.5 * MediaQuery.of(context).size.height,
              width: 0.8 * MediaQuery.of(context).size.width,
              // Made some changes here
              child: Column(children: [
                Expanded(
                  child: CupertinoScrollbar(
                      isAlwaysShown: true,
                      controller: _controller,
                      child: ListView(children: <Widget>[
                        Text("Scrollable text" * 1000,
                            style: TextStyle(
                              fontFamily: 'GillSansMT',
                              fontWeight: FontWeight.normal,
                              color: Colors.black,
                              fontSize:
                                  (MediaQuery.of(context).size.height > 900)
                                      ? 30
                                      : 14,
                            ))
                      ])),
                ),
                // SizedBox(height: 10), // Uncomment if you need some space
                RaisedButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  child: Text('Go back!'),
                )
              ]),
            ),
          ),
        ]),
      ),
    );
    

    Try replacing the function body with this code.