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

Have Stepper in app and have problems with placing text field on screen, want to text some text in text field, appears keyboard and over it shows that:

A RenderFlex overflowed by 139 pixels on the bottom.

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

Code:

@override
  Widget build(BuildContext context) {
    globalHeight = (MediaQuery.of(context).size.height) * 0.85;
    return Scaffold(
      body: AnnotatedRegion<SystemUiOverlayStyle>(
        value: SystemUiOverlayStyle.light,
        child: Container(
          decoration: BoxDecoration(color: colorsBackround[_currentPage]),
          child: Padding(
            padding: EdgeInsets.symmetric(vertical: 10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                Container(
                  height: globalHeight,
                  child: PageView(
                    physics: ClampingScrollPhysics(),
                    controller: _pageController,
                    onPageChanged: (int page) {
                      setState(() {
                        _currentPage = page;
                      });
                    },
                    children: <Widget>[
                     // some code
                      Padding(
                        padding: EdgeInsets.all(10.0),
                        child: Center(
                          child: Column(
                            crossAxisAlignment: CrossAxisAlignment.center,
                            mainAxisAlignment: MainAxisAlignment.start,
                            children: <Widget>[
                              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: <Widget>[
                          Expanded(
                              child: Align(
                            alignment: FractionalOffset.bottomLeft,
                            child: FlatButton(
                              onPressed: () {
                                _pageController.previousPage(
                                  duration: Duration(milliseconds: 500),
                                  curve: Curves.ease,
                                );
                              },
                              child: Row(
                                mainAxisSize: MainAxisSize.min,
                                children: <Widget>[
                                  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: <Widget>[
                                  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(''),
    );
  }
}

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

  1. Add to your ScaffoldresizeToAvoidBottomInset: false
  2. Wrap your widget in SingleChildScrollViewSingleChildScrollView( child: YourColumn(), )

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.

This Post Has 2 Comments

  1. Malki Nama

    Make the body scrollable. In your case, you could change the root Column for a List View and you 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.

  2. Malki Nama

    Make the body scrollable. In your case, you could change the root Column for a List View and you 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.

Leave a Reply