0

My custom button does not align at bottom center of screen and right now my custom button is centered at bottom of container. Its only part of code below. Any ideas on how I can fix so my custom button appears at bottom center of screen?

  class _MainMenuState extends State<MainMenu> {

       @override
  Widget build(BuildContext context) {
    final width = MediaQuery.of(context).size.width;
    return Scaffold(
      appBar: AppBar(
        title: Header(text: 'Home', style: Fonts.header1),
        centerTitle: true,
      ),
     backgroundColor: ColorStyle.black,
      body: Container(
          alignment: Alignment.topCenter,
          child: SingleChildScrollView(
            child: Column(
              children: <Widget>[
                Util.paddingTop,
                TextFieldNormal(),
              Expanded(
              child: Align(
                alignment: Alignment.bottomCenter,
                child: ButtonNormal(
                  text: 'Go to next screen',
                  width: width * 0.8,
                  height: 50,
                  color: ColorStyle.blueDark,
                  onPressed: () => pushNewScreen(
                    context,
                    screen: BottomNavBarWidget(
                      menuScreenContext: context,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      )),
);

}

}

David Ruland
  • 103
  • 2
  • 13

1 Answers1

1

Just wrap BottonNormal inside Expanded Widget.

 Expanded(
           child: Align(
             alignment: Alignment.bottomCenter,
              child: ButtonNormal(
               // ... 
              ),
            ),
         ),

Why it was not working:

It is because the column takes the entire screen, but the widget renders vertically which will take their own space only.

Solution:

Wrap the bottom widget using the Expanded widget which will take the remaining space from the bottom in Column, so afterwords bottom alignment can work

Jitesh Mohite
  • 31,138
  • 12
  • 157
  • 147
  • I have updated code, but that doesn't work since I get error: "RenderBox was not laid out: _RenderSingleChildViewport#565f2 relayoutBoundary=up8 NEEDS-PAINT 'package:flutter/src/rendering/box.dart': Failed assertion: line 1702 pos 12: 'hasSize' The relevant error-causing widget was SingleChildScrollView". – David Ruland Sep 26 '20 at 09:51
  • It works if I remove SingleChildScrollView. But I want to be able to use Scrollview on smaller device. How do I fix that? – David Ruland Sep 28 '20 at 11:41
  • You can singleChildScrollView as parent – Jitesh Mohite Sep 28 '20 at 11:42
  • @DavidRuland: If it works, could you accept the answer. – Jitesh Mohite Sep 28 '20 at 14:05
  • @DavidRuland it doesnt work I have tried it out – Kthree Mar 21 '23 at 02:14