CODEWITHSUNDEEP
flutterdart
grizzasd
grizzasd

Reputation: 383

Flutter: How to Bottom Center a Button in a ListView?

I need to bottom center a button that is contained within a ListView. By bottom, I mean at the bottom of the screen, or if the screen content is longer than the height of the screen, at the end of the content.

I can do this using a Column with a Spacer widget because the height is defined, however my screen has text input on it. If I use a Column instead of a ListView, the screen overflows when I'm typing.

How can I either

  1. Bottom center a button, or
  2. Use a Column but prevent the screen from resizing or overflowing when typing; I'd like it to ether be scrollable, or simply have the keyboard cover the screen content while typing.

Basic code example:

return Scaffold(
      body: Center(
        child: Container(
          width: workingWidth,
          child: Center(
            child: ListView(children: <Widget>[
              ScreenHeader("Tell Us a Little About Yourself"),
              TextFormField(
                maxLines: 16,
                controller: bioController,
                autocorrect: true,
                textCapitalization: TextCapitalization.sentences,
                maxLength: 500,
                decoration: InputDecoration(
                  contentPadding: EdgeInsets.all(paddingH5),
                  focusedBorder: UnderlineInputBorder(
                      borderSide: BorderSide(color: colorPrimary)),
                  border: UnderlineInputBorder(
                      borderSide: BorderSide(color: colorMuted)),
                  hintText: "Enter your bio here...",
                  hintStyle: textMuted,
                ),
              ),
              Spacer(), //This doesn't work because I am using a ListView instead of a Column
              RoundedButton(
                  buttonText: 'Continue',
                  buttonStyle: buttonPrimary,
                  onPressed: () {}
            ),
            ],)
          ),
        ),
      ),
    );

Upvotes: 1

Views: 3734

Answers (1)

haroldolivieri
haroldolivieri

Reputation: 2283

To use a Column without yellow/black stripes error when opening the keyboard, you need to wrap it into a SingleChildScrollView, but Spacer will not work in that case if you do not declare the height of its RenderFlex parent.

You can use MediaQuery.of(context).size.height to get the screen size on its context and set to your Container.

At the end you can achieve the desired layout with this:

return Scaffold(
              body: SingleChildScrollView(
                child: Container(
                  width: workingWidth,
                  height: MediaQuery.of(context).size.height,
                  child: Column(
                    children: <Widget>[
                      ScreenHeader("Tell Us a Little About Yourself"),
                      TextFormField(
                        maxLines: 16,
                        controller: bioController,
                        autocorrect: true,
                        textCapitalization: TextCapitalization.sentences,
                        maxLength: 500,
                        decoration: InputDecoration(
                          contentPadding: EdgeInsets.all(paddingH5),
                          focusedBorder: UnderlineInputBorder(
                              borderSide: BorderSide(color: colorPrimary)),
                          border: UnderlineInputBorder(
                              borderSide: BorderSide(color: colorMuted)),
                          hintText: "Enter your bio here...",
                          hintStyle: textMuted,
                        ),
                      ),
                      Spacer(),
                      RoundedButton(
                          buttonText: 'Continue',
                          buttonStyle: buttonPrimary,
                          onPressed: () {}
                      ),
                    ],
                  ),
                ),
              ),
            );

Upvotes: 5

Related Questions