How to add space between keyboard and focused TextField in flutter?

Question

I have this problem with scrolling, when I focus the text field the red container covers the Textfield, where i want to write. How can I control the scrolling, so that the Textfield shows above the red container?

I want to show the red Container above the keabord, and when the user writes in the Textfield I want to activate the nect button.

enter image description here

enter image description here

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = new FocusNode();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Focus Example"),
        ),
        body: Stack(
          children: [
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Expanded(
                    flex: 9, // 90% of space => (6/(6 + 4))
                    child: LayoutBuilder(
                      builder: (context, constraint) {
                        return SingleChildScrollView(
                          child: ConstrainedBox(
                            constraints:
                                BoxConstraints(minHeight: constraint.maxHeight),
                            child: IntrinsicHeight(
                              child: Column(
                                children: <Widget>[
                                  new Container(
                                      height: 800.0,
                                      color: Colors.blue.shade200),
                                  new TextFormField(
                                    focusNode: _focusNode,
                                    decoration: new InputDecoration(
                                      hintText: 'Focus me!',
                                    ),
                                  ),
                                  new Container(
                                      height: 800.0,
                                      color: Colors.blue.shade200),
                                ],
                              ),
                            ),
                          ),
                        );
                      },
                    )),
                Expanded(
                  flex: 1, // 10% of space
                  child: Container(
                    color: Colors.purple,
                    alignment: Alignment.center,
                  ),
                ),
              ],
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                height: 60,
                color: Colors.red,
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    GestureDetector(
                        child: Text("Back",
                            style:
                                TextStyle(color: Colors.white, fontSize: 18.0)),
                        onTap: () {}),
                    Container(
                      width: 40,
                      height: 40,
                      child: FlatButton(
                        textColor: Colors.white,
                        disabledColor: Colors.grey,
                        disabledTextColor: Colors.white70,
                        padding: EdgeInsets.only(top: 0.0, bottom: 0.0),
                        splashColor: Colors.white,
                        onPressed: () {},
                        child: Icon(
                          Icons.navigate_next,
                          size: 35,
                        ),
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        ));
  }
}

Answer 1

I could give you an idea. Try something like this,

body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Container(
            height: MediaQuery.of(context).size.height * 0.9 - 60,
            child: Row( ..... ),   // Include SingleChildScrollView too
          ),
          Container(
                padding: EdgeInsets.only(left: 10.0, right: 10.0),
                height: 60,
                child: Row( ... )
          )
        ]
     

Hope that solves your issue.