Text disappears when opening Dart Flutter Keyboard

Question

I have a sign up screen like this:

When the keyboard is opened to enter information into the textFormFields here, the screen looks like this:

The text "Welcome to register form" disappeared. What is the cause of this problem? How can I solve it? Thanks in advance for the help.

---

Codes:

main.dart:

import 'package:flutter/material.dart';
import 'package:simto_todolist/app.dart';
import 'package:firebase_core/firebase_core.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: splashScreen(),
    );
  }
}

app.dart:

import 'package:flutter/material.dart';
import 'package:cool_alert/cool_alert.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:timer_count_down/timer_count_down.dart';
import 'package:group_button/group_button.dart';
import 'package:firebase_auth/firebase_auth.dart';
      var currentPage;

class splashScreen extends StatefulWidget {
  @override
  State<splashScreen> createState() => _splashScreenState();
}

  final CarouselController _pageController = CarouselController();

class _splashScreenState extends State<splashScreen> {
  List splashs = [sp1(), sp2(), sp3()];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Image.asset("logo.png", fit: BoxFit.cover, height: 75,),
        centerTitle: true,
        backgroundColor: Colors.white,
        elevation: 0,
      ),
      backgroundColor: Colors.white,
      body: CarouselSlider(
        carouselController: _pageController,
        items: splashs.map((i) {
          return Builder(
            builder: (BuildContext context) {
              return i;
            },
          );
          
        }).toList(),
        options: CarouselOptions(
          height: MediaQuery.of(context).size.height,
          viewportFraction: 1,
          enableInfiniteScroll: false,
          onPageChanged: (index, reason) {
            setState(() {
              currentPage = index;
              print(currentPage);
            });
          },
        ),
      )
    );
  }
}

class sp1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: MediaQuery.of(context).size.height / 5
        ),
        Image.asset('assets/splash1.png', fit: BoxFit.cover, height: 220,),
        Text("Hoş geldin!", style: TextStyle(fontSize: 25, fontFamily: "Roboto-Bold"),),
        SizedBox(height: 15),
        Expanded(child: Text("Simto: To-do-list uygulamasına hoş geldin.", style: TextStyle(fontSize: 19, fontFamily: "Roboto-Thin"),)),
          RaisedButton(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(Icons.arrow_forward, color: Colors.white,),
                  SizedBox(width: 10),
                  Text("Devam", style: TextStyle(color: Colors.white, fontSize: 20, fontFamily: "Roboto-Thin"),),
                ],
              ),
            ),
            color: Colors.blue[400],
            textColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0),
            ),
            onPressed: () {
              _pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.easeIn);
            },
          ),
          SizedBox(height: 18),
      ]
    );
  }
}

class sp2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        SizedBox(
          height: MediaQuery.of(context).size.height / 5
        ),
        Image.asset('assets/splash2.png', fit: BoxFit.cover, height: 235,),
        Text("Yapılacakları planlayın", style: TextStyle(fontSize: 25, fontFamily: "Roboto-Bold"),),
        SizedBox(height: 15),
        Expanded(child: Container(
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(30),
            color: Colors.white,
          ),
          child: Text("Düzenli bir gün, yapılacaklar listesi hazırlamakla başlar. Hemen yapılacaklar listesi oluşturun!", style: TextStyle(fontSize: 18, fontFamily: "Roboto-Thin"), textAlign: TextAlign.center,))),
          SizedBox(height: 25),
          RaisedButton(
            child: Padding(
              padding: const EdgeInsets.all(15.0),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Icon(Icons.arrow_forward, color: Colors.white,),
                  SizedBox(width: 10),
                  Text("Devam", style: TextStyle(color: Colors.white, fontSize: 20, fontFamily: "Roboto-Thin"),),
                ],
              ),
            ),
            color: Colors.blue[400],
            textColor: Colors.white,
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.circular(30.0),
            ),
            onPressed: () {
              _pageController.nextPage(duration: Duration(milliseconds: 500), curve: Curves.easeIn);
            },
          ),
          SizedBox(height: 18),
      ]
    );
  }
}

class sp3 extends StatefulWidget {
  @override
  State<sp3> createState() => _sp3State();
}

class _sp3State extends State<sp3> {
  @override  
    Widget build(BuildContext context) {
      return Column(
        children: [
          Image.asset('assets/splash3.png', fit: BoxFit.cover, height: 220,),
          Text("Register", style: TextStyle(fontSize: 25, fontFamily: "Roboto-Bold"),), // Kayıt ol
          SizedBox(height: 15),
          Expanded(
            child: Container(
            decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(30),
              color: Colors.white,
            ),
            child: Text("Welcome to register form", style: TextStyle(fontSize: 18, fontFamily: "Roboto-Thin"), textAlign: TextAlign.center,))), // Hemen kayıt ol ve yapılacaklar listeni hazırla!
          SizedBox(height: 25),
          Padding(
            padding: const EdgeInsets.only(left: 11, right: 11),
            child: TextFormField(
              decoration: InputDecoration(
                hintText: "E-mail",
                labelStyle: TextStyle(fontSize: 18, fontFamily: "Roboto-Thin", color: Colors.grey),
                prefixIcon: Icon(Icons.email, color: Colors.grey,),
                border: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey),
                )
              ),
              style: TextStyle(
                color: Colors.black,
                fontSize: 20
              ),
            ),
          ),
          SizedBox(height: 10,),
          Padding(
            padding: const EdgeInsets.only(left: 11, right: 11),
            child: TextFormField(
              decoration: InputDecoration(
                hintText: "Name-surname", // Ad-soyad
                labelStyle: TextStyle(fontSize: 18, fontFamily: "Roboto-Thin", color: Colors.grey),
                prefixIcon: Icon(Icons.person, color: Colors.grey, size: 30,),
                border: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey),
                ),
              ),
              style: TextStyle(
                color: Colors.black,
                fontSize: 20
              ),
            ),
          ),
          // şifre input:
          SizedBox(height: 10,),
          Padding(
            padding: const EdgeInsets.only(left: 11, right: 11),
            child: TextFormField(
              decoration: InputDecoration(
                hintText: "Password", // Şifre
                labelStyle: TextStyle(fontSize: 18, fontFamily: "Roboto-Thin", color: Colors.grey),
                prefixIcon: Icon(Icons.lock, color: Colors.grey,),
                border: UnderlineInputBorder(
                  borderSide: BorderSide(color: Colors.grey),
                ),
                suffixIcon: InkWell(
                  child: Icon(Icons.remove_red_eye),
                )
                
              ),
              style: TextStyle(
                color: Colors.black,
                fontSize: 20
              ),
              obscureText: true,
            ),
          ),
          SizedBox(height: 25,),
          RaisedButton(
            child: Text("Register"),
            onPressed: () {
            }
          ),
        ],
      );
    }
}


class loadingAccount extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Image.asset('assets/splash4.png', fit: BoxFit.cover, height: 200,),
            SizedBox(height: 15),
            Text("Her şey size özel hazırlanıyor..", style: TextStyle(fontSize: 22, fontFamily: "Roboto-Medium"), textAlign: TextAlign.center,),
            SizedBox(height: 15),
            CircularProgressIndicator(),
            Countdown(
              seconds: 4,
              interval: Duration(milliseconds: 500),
              build: (BuildContext context, double time) {
                return SizedBox();
              },
              onFinished: () {
                //register();
                print("bitti");
                Navigator.push(context,
                PageRouteBuilder(
                  barrierDismissible: false,
                  opaque: true,
                  transitionDuration: Duration(milliseconds: 150),
                  transitionsBuilder: (BuildContext context, Animation<double> animation, Animation <double> secAnimation, Widget child) {
                    return ScaleTransition(
                      alignment: Alignment.center,
                      scale: animation,
                      child: child,
                    );
                  },
                  pageBuilder: (BuildContext context, Animation<double> animation, Animation <double> secAnimation) {
                    // return HomePage();
                  }
                  ),
                );
              },
            ),
            WillPopScope(
              child: Container(),
              onWillPop: () {
                return Future.value(false);
              },
            )
          ],
        ),
      ),
    );
  }
}

My goal is to create a nice sign up screen.

Solution

Try wrapping your column with a SingleChildScrollView in SP3 as follows:

return SingleChildScrollView(
  child: Column(
    children: [<COLUMN-CHILDREN>]
  ),
);

This will allow your column to expand to its full minimum MainAxisSize when the keyboard is shown, instead of trying to squeeze all the elements onto the screen

Comments

[mkobuolys]

Does this answer your question? When the keyboard appears, the Flutter widgets resize. How to prevent this?

[Emir Bolat]

@mkobuolys The topic in the link did not solve my problem.

[mkobuolys]

Could you show the full code (the one that uses sp3)?

[Emir Bolat]

@bkobuolys There is no code that calls sp3.

[mkobuolys]

That's just simply impossible unless this widget is not used at all. Or you provided the wrong code example.

[Emir Bolat]

@mkobuolys I'm telling the truth and I didn't give the wrong code example.

[mkobuolys]

Flutter app won't work without runApp, then (most of the time) without MaterialApp, CupertinoApp or PlatformApp - are you sure there are no Widgets above sp3?

[Emir Bolat]

There is only void main()

[mkobuolys]

Ok, good. Can you provide the full code example, then?

[Emir Bolat]

@mkobuolys Now I have added all the codes. I just didn't want my codes stolen. Sorry for wasting your time.

[mkobuolys]

Ok, so you are using Scaffold. Have you tried setting the resizeToAvoidBottomInset to false as mentioned in the answer?

[Emir Bolat]

@mkobuolys I tried what you said, this time the keyboard comes in front of the textFormField and closes it. imgur.com/a/T1mQJxo

[mkobuolys]

That may be related to the carousel you are using, since you defined the specific height, viewportFraction and so on - the content could be hidden under the keyboard. Maybe try to render just the sp3 page, fix the issues, then use the carousel again and look for further problem. Divide and conquer.