1

I have a sign up screen like this:

enter image description here

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

enter image description here

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.

Emir Bolat
  • 899
  • 3
  • 14
  • 37
  • Does this answer your question? [When the keyboard appears, the Flutter widgets resize. How to prevent this?](https://stackoverflow.com/questions/46551268/when-the-keyboard-appears-the-flutter-widgets-resize-how-to-prevent-this) – mkobuolys Mar 27 '22 at 20:52
  • @mkobuolys The topic in the link did not solve my problem. – Emir Bolat Mar 27 '22 at 20:56
  • Could you show the full code (the one that uses `sp3`)? – mkobuolys Mar 27 '22 at 20:57
  • @bkobuolys There is no code that calls `sp3`. – Emir Bolat Mar 27 '22 at 20:59
  • That's just simply impossible unless this widget is not used at all. Or you provided the wrong code example. – mkobuolys Mar 27 '22 at 21:04
  • @mkobuolys I'm telling the truth and I didn't give the wrong code example. – Emir Bolat Mar 27 '22 at 21:09
  • 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`? – mkobuolys Mar 27 '22 at 21:19
  • There is only `void main()` – Emir Bolat Mar 27 '22 at 21:21
  • Ok, good. Can you provide the full code example, then? – mkobuolys Mar 27 '22 at 21:22
  • @mkobuolys Now I have added all the codes. I just didn't want my codes stolen. Sorry for wasting your time. – Emir Bolat Mar 27 '22 at 21:36
  • Ok, so you are using Scaffold. Have you tried setting the `resizeToAvoidBottomInset` to `false` as mentioned in the [answer](https://stackoverflow.com/a/46551390/15427566)? – mkobuolys Mar 27 '22 at 21:38
  • @mkobuolys I tried what you said, this time the keyboard comes in front of the `textFormField` and closes it. https://imgur.com/a/T1mQJxo – Emir Bolat Mar 27 '22 at 21:44
  • 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. – mkobuolys Mar 27 '22 at 21:49

1 Answers1

1

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

Noah Joshua
  • 106
  • 1
  • 3