Flutter- SingleChildScrollview dont scroll on keybord popup

Question

I'm trying to integrate a signup page. On the keyboard popup, it covers the some input fields on the bottom. Already implemented the Singlechildscrollview. It wont adjust while the keyboard popup. Tried using resizeToAvoidBottomPadding and some other solution, bu no luck. Please help thanks in advance for your help

class _EnterUserDetailsWidgetState extends State<EnterUserDetailsWidget> {
  @override
  Widget build(BuildContext context) {
    final String assetName = 'assets/images/app_logo.svg';
    final String pageBg = 'assets/images/user_auth_bg.png';
    final String app_logo = 'assets/images/fram_collection_logo.png';
    final String phoneIcon = 'assets/images/farm.png';
    final _nameController = TextEditingController();
    final _phoneController = TextEditingController();
    final _emailController = TextEditingController();
    final _formKey = GlobalKey<FormState>();

    final FocusNode _nameFocusNode = FocusNode();
    final FocusNode _emailFocusNode = FocusNode();
    final FocusNode _phoneNumberNode = FocusNode();
    final FocusNode _dummy = FocusNode();
    final itemSpacing = 15.0;

    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: Stack(
        children: [
          Image(
            image: AssetImage(pageBg),
            fit: BoxFit.fill,
            height: double.infinity,
            width: double.infinity,
          ),
          Container(
            height: double.maxFinite,
            padding: EdgeInsets.all(10),
            child: SingleChildScrollView(
              physics: AlwaysScrollableScrollPhysics(),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 50, bottom: 50),
                    child: Image(
                      height: 170,
                      filterQuality: FilterQuality.high,
                      image: AssetImage(app_logo),
                      fit: BoxFit.fitWidth,
                    ),
                  ),
                  TextFormField(
                      autofocus: true,
                      decoration: inputDecorationFeild(
                          hintText: "Email",
                          labelText: "Enter Email",
                          textFeildIcon: FarmCollection.email)),
                  TextFormField(
                      autofocus: true,
                      decoration: inputDecorationFeild(
                          hintText: "Email",
                          labelText: "Enter Email",
                          textFeildIcon: FarmCollection.email)),
                  TextFormField(
                      autofocus: true,
                      decoration: inputDecorationFeild(
                          hintText: "Email",
                          labelText: "Enter Email",
                          textFeildIcon: FarmCollection.email)),
                  TextFormField(
                      autofocus: true,
                      decoration: inputDecorationFeild(
                          hintText: "Email",
                          labelText: "Enter Email",
                          textFeildIcon: FarmCollection.email)),
                  TextFormField(
                      autofocus: true,
                      decoration: inputDecorationFeild(
                          hintText: "Email",
                          labelText: "Enter Email",
                          textFeildIcon: FarmCollection.email)),
                  curvedButtonGreen(
                    buttonText: "Submit",
                    onClick: () async {
                      await Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => OTPverificationWidget(),
                        ),
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  _fieldFocusChange(BuildContext context, FocusNode nextFocus) {
    // currentFocus.unfocus();
    FocusScope.of(context).requestFocus(nextFocus);
  }
}

Answer 1

I fixed and share you full code.
Because I don't have a asset file and some component, I replaced with Container or changed.
The main change point is 'resizeToAvoidBottomPadding: true' or remove that.

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    final String assetName = 'assets/images/app_logo.svg';
    final String pageBg = 'assets/images/user_auth_bg.png';
    final String app_logo = 'assets/images/fram_collection_logo.png';
    final String phoneIcon = 'assets/images/farm.png';
    final _nameController = TextEditingController();
    final _phoneController = TextEditingController();
    final _emailController = TextEditingController();
    final _formKey = GlobalKey<FormState>();

    final FocusNode _nameFocusNode = FocusNode();
    final FocusNode _emailFocusNode = FocusNode();
    final FocusNode _phoneNumberNode = FocusNode();
    final FocusNode _dummy = FocusNode();
    final itemSpacing = 15.0;

    return Scaffold(
      resizeToAvoidBottomPadding: true,
      body: Stack(
        children: [
          Container(height: 200),
          Container(
            height: double.maxFinite,
            padding: EdgeInsets.all(10),
            child: SingleChildScrollView(
              physics: AlwaysScrollableScrollPhysics(),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.min,
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(top: 50, bottom: 50),
                    child: Container(height: 170),
                    // child: Image(
                    //   height: 170,
                    //   filterQuality: FilterQuality.high,
                    //   image: AssetImage(app_logo),
                    //   fit: BoxFit.fitWidth,
                    // ),
                  ),
                  TextFormField(
                    autofocus: true,
                    decoration: InputDecoration(
                      hintText: "Email",
                      labelText: "Enter Email",
                    ),
                  ),
                  TextFormField(
                    autofocus: true,
                    decoration: InputDecoration(
                      hintText: "Email",
                      labelText: "Enter Email",
                    ),
                  ),
                  TextFormField(
                    autofocus: true,
                    decoration: InputDecoration(
                      hintText: "Email",
                      labelText: "Enter Email",
                    ),
                  ),
                  TextFormField(
                    autofocus: true,
                    decoration: InputDecoration(
                      hintText: "Email",
                      labelText: "Enter Email",
                    ),
                  ),
                  TextFormField(
                    autofocus: true,
                    decoration: InputDecoration(
                      hintText: "Email",
                      labelText: "Enter Email",
                    ),
                  ),
                  // curvedButtonGreen(
                  //   buttonText: "Submit",
                  //   onClick: () async {
                  //     // await Navigator.of(context).push(
                  //     //   MaterialPageRoute(
                  //     //     builder: (context) => OTPverificationWidget(),
                  //     //   ),
                  //     // );
                  //   },
                  // ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  _fieldFocusChange(BuildContext context, FocusNode nextFocus) {
    // currentFocus.unfocus();
    FocusScope.of(context).requestFocus(nextFocus);
  }
}