TextField at the top goes off the screen when the keyboard comes up

Question

I'm working on a screen has multi TextFields in it, I wrapped all the TextFields with SingleChildScrollView so the keyboard won't cover the Text fields at the bottom when it comes up.

NOTE: textbr is a function that returns TextField.

SingleChildScrollView(
                      child: Column(
                        children: [
                          Row(
                            children: [
                              Container(
                                  padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
                                  width: 170,
                                  child: textbr(
                                      indectext(
                                          Icons.person,
                                          Colors.redAccent,
                                          25,
                                          'First Name',
                                          ''),
                                      TextInputType.name,
                                      17)),
                              Container(
                                  padding: EdgeInsets.fromLTRB(16, 0, 0, 0),
                                  width: 170,
                                  child: textbr(
                                      indectext(
                                          Icons.person,
                                          Colors.redAccent,
                                          25,
                                          'Last Name',
                                          ''),
                                      TextInputType.name,
                                      17))
                            ],
                          ),
                          Container(
                              padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
                              child: textbr(
                                  indectext(Icons.phone, Colors.redAccent,
                                      25, 'Phone Number', ''),
                                  TextInputType.phone,
                                  18)),
                          Container(
                              padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
                              child: textbr(
                                  indectext(Icons.alternate_email,
                                      Colors.redAccent, 25, 'E-mail', ''),
                                  TextInputType.emailAddress,
                                  30)),
                          Container(
                              padding: EdgeInsets.fromLTRB(16, 0, 16, 0),
                              child: textbr(
                                  indectext(
                                      Icons.location_on,
                                      Colors.redAccent,
                                      25,
                                      'Address 1',
                                      ''),
                                  TextInputType.text,
                                  60)),
                          Container(
                              padding: EdgeInsets.fromLTRB(16, 0, 16, 10),
                              child: textbr(
                                  indectext(
                                      Icons.location_on,
                                      Colors.redAccent,
                                      25,
                                      'Address 2',
                                      ''),
                                  TextInputType.text,
                                  18)),
                          // Container(padding: EdgeInsets.fromLTRB(16, 0,16,7),child:textbr(indectext(Icons.phone,Colors.redAccent,25,'Phone Number',''), TextInputType.phone, 18))
                        ],
                      ),
                    )

See the image here but that led to another issue with the text fields at the top, when I click on one of the text fields at the top, the keyboard comes up and it scrolls down to the bottom and I can't see what I'm typing in that text field because it goes off the screen due to the scrolling thing.. See the image here

How to solve that issue?

Answer 1

i thing there is is two solution 1 use SafeArea widget if it's not works than try to pass the column with property crossAxisAlignment: CrossAxisAlignment.start,