What is best way to remove overflowing by a lot of pixels in Flutter?

Question

I have Stepper in my app, and I have problems with placing textfield on screen, when I want to text some text in textfield, appears keyboard and over it shows me that:

A RenderFlex overflowed by 139 pixels on the bottom.

I read some articles and understood, that I have to use FittedBox, but I dunno how to use it with best way. How can I reach my goal?

Code:

@override
  Widget build(BuildContext context) {
    globalHeight = (MediaQuery.of(context).size.height) * 0.85;
    return Scaffold(
      body: AnnotatedRegion(
        value: SystemUiOverlayStyle.light,
        child: Container(
          decoration: BoxDecoration(color: colorsBackround[_currentPage]),
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: [
                Container(
                  height: globalHeight,
                  child: PageView(
                    physics: ClampingScrollPhysics(),
                    controller: _pageController,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    children: [
                     // some code
                      Padding(
                        padding: EdgeInsets.all(10.0),
                        child: Center(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: [
                              Image(
                                image: AssetImage(
                                  itemIcon[_currentPage],
                                ),
                                height: 300.0,
                                width: 300.0,
                              ),
                              Text(
                                'Укажите ваш возраст',
                                style: kTitleStyle,
                              ),
                              SizedBox(
                                width: MediaQuery.of(context).size.width * 0.8,
                                height: 50.0,
                                child: Padding(
                                    padding: EdgeInsets.only(
                                        top: 20.0,
                                        left: 20,
                                        right: 20,
                                        bottom: MediaQuery.of(context)
                                            .viewInsets
                                            .bottom),
                                    child: TextField(
                                      controller: ageController,
                                      keyboardType: TextInputType.number,
                                      onChanged: (text) {
                                        setState(() {
                                          if (text.isNotEmpty) {
                                            inputs[1] = true;
                                          } else {
                                            inputs[1] = false;
                                          }
                                        });
                                      },
                                      decoration: InputDecoration(
                                        labelText: 'Возраст',
                                      ),
                                      style: TextStyle(fontSize: 18.5),
                                    )),
                              ),
                            ],
                          ),
                        ),
                      ),
                      //some code
                    ],
                  ),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: _buildPageIndicator(),
                ),
                _currentPage != _numPages - 1
                    ? Expanded(
                        child: Container(
                            child: Row(
                        mainAxisSize: MainAxisSize.max,
                        children: [
                          Expanded(
                              child: Align(
                            alignment: FractionalOffset.bottomLeft,
                            child: FlatButton(
                              onPressed: () {
                                _pageController.previousPage(
                                  duration: Duration(milliseconds: 500),
                                  curve: Curves.ease,
                                );
                              },
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Icon(
                                    Icons.arrow_back,
                                    color: Colors.white,
                                    size: 26.0,
                                  ),
                                  SizedBox(width: 10.0),
                                  Text(
                                    'Назад',
                                    style: TextStyle(
                                      fontFamily: 'Century Gothic',
                                      color: Colors.white,
                                      fontSize: 14.5,
                                    ),
                                  ),
                                ],
                              ),
                            ),
                          )),
                          Expanded(
                              child: Align(
                            alignment: FractionalOffset.bottomRight,
                            child: FlatButton(
                              onPressed: () {
                                _pageController.nextPage(
                                  duration: Duration(milliseconds: 500),
                                  curve: Curves.ease,
                                );
                              },
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: [
                                  Text(
                                    'Дальше',
                                    style: TextStyle(
                                      fontFamily: 'Century Gothic',
                                      color: Colors.white,
                                      fontSize: 14.5,
                                    ),
                                  ),
                                  SizedBox(width: 10.0),
                                  Icon(
                                    Icons.arrow_forward,
                                    color: Colors.white,
                                    size: 26.0,
                                  ),
                                ],
                              ),
                            ),
                          )),
                        ],
                      )))
                    : Text(''),
              ],
            ),
          ),
        ),
      ),
      bottomSheet: _currentPage == _numPages - 1
          ? Container(
              height: 75.0,
              width: double.infinity,
              color: Theme.of(context).scaffoldBackgroundColor,
              child: GestureDetector(
                onTap: () => print('Get started'),
                child: Center(
                  child: Padding(
                    padding: EdgeInsets.only(bottom: 15.0),
                    child: Text(
                      'Начать',
                      style: TextStyle(
                        fontFamily: 'Century Gothic',
                        color: Colors.white,
                        fontSize: 21.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                ),
              ),
            )
          : Text(''),
    );
  }
}

user_6618622 · Answer

There is no direct solution to prevent overflowing issues, it depends on your current code. So, here you use

Add to your Scaffold
```
resizeToAvoidBottomInset: false
```

Wrap your widget in SingleChildScrollView

SingleChildScrollView(
  child: YourColumn(),
)

user_11938462 · Answer

That happens because when opening the keyboard, the body is resized to avoid the keyboard appear over the text field, and since your content isn't scrollable the content of the body gets overflowed. Check this property of the Scaffold:

  /// If true the [body] and the scaffold's floating widgets should size
  /// themselves to avoid the onscreen keyboard whose height is defined by the
  /// ambient [MediaQuery]'s [MediaQueryData.viewInsets] `bottom` property.
  ///
  /// For example, if there is an onscreen keyboard displayed above the
  /// scaffold, the body can be resized to avoid overlapping the keyboard, which
  /// prevents widgets inside the body from being obscured by the keyboard.
  ///
  /// Defaults to true.
  final bool resizeToAvoidBottomInset;

If you put that to false, the body won't be resized so the content won't be overflowed.

If you leave it as default, you need to make the body scrollable. In your case, you could change the root Column for a ListView and you will need to remove the Expanded wrap of the third item of the column.

But I recommend you to try to simplify the structure of the widgets.

user_9973108 · Answer

Wrap your widget with a SingleChildScroll widget and that should work and solve the overflow issue

What is best way to remove overflowing by a lot of pixels in Flutter?

3 Answers