How can I make a Flutter Scaffold scroll to not have TextFields covered-CodePudding

I have a somewhat complicated widget tree and can't figure this out. I've tried wrapping the Scaffold body in a SingleChildScrollView but for some reason it just makes the Container shrink and does not scroll. Here is the build function code:

    return Stack(
      children: [
        Scaffold(
          resizeToAvoidBottomInset: false,
          body: Stack(
            children: [
              background(),
              Padding(
                padding: const EdgeInsets.only(top: 55),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset('assets/logo.png', height: 100),
                    const SizedBox(width: 5),
                    const Text('GLOBE',
                        style: TextStyle(
                            fontSize: 40,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFF7FCCDC)))
                  ],
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(
                    top: 175, left: 35, right: 35, bottom: 50),
                child: Container(
                  decoration: BoxDecoration(
                    color: const Color(0xFFFCFBF4).withOpacity(0.5),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      const SizedBox(height: 20),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: const [
                          Text('Welcome!',
                              style: TextStyle(
                                  fontSize: 30, color: Color(0xFF6B6FAB))),
                        ],
                      ),
                      loginForm()
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
        if (_isLoading)
          const Opacity(
            opacity: 0.8,
            child: ModalBarrier(dismissible: false, color: Colors.black),
          ),
        if (_isLoading)
          const Center(
            child: CircularProgressIndicator(color: Color(0xFFb1bbd8)),
          ),
      ],
    );

CodePudding user response：

TextField has a property called scrollPadding.

scrollPadding: EdgeInsets.only(bottom: 40)

By default it is set to EdgeInsets.all(20.0)

CodePudding user response：

Return a scaffold and add a sized box of height and width same as device. As a body use stack. Then in children add the next stack.

return Scaffold(
  resizeToAvoidBottomInset: false,
  body: SizedBox(
    height: MediaQuery.of(context).size.height,
    width: MediaQuery.of(context).size.width,
    child: Stack(
      children: [
         background(),
              Padding(
                padding: const EdgeInsets.only(top: 55),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset('assets/logo.png', height: 100),
                    const SizedBox(width: 5),
                    const Text('GLOBE',
                        style: TextStyle(
                            fontSize: 40,
                            fontWeight: FontWeight.bold,
                            color: Color(0xFF7FCCDC)))
                  ],
                ),
              ),
        Padding(
                padding: const EdgeInsets.only(
                    top: 175, left: 35, right: 35, bottom: 50),
                child: Container(
                  decoration: BoxDecoration(
                    color: const Color(0xFFFCFBF4).withOpacity(0.5),
                    borderRadius: BorderRadius.circular(20),
                  ),
                  child: Column(
                    mainAxisSize: MainAxisSize.max,
                    children: [
                      const SizedBox(height: 20),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: const [
                          Text('Welcome!',
                              style: TextStyle(
                                  fontSize: 30, color: Color(0xFF6B6FAB))),
                        ],
                      ),
                      loginForm()
                    ],
                  ),
                ),
              ),
         if (_isLoading)
          const Opacity(
            opacity: 0.8,
            child: ModalBarrier(dismissible: false, color: Colors.black),
          ),
        if (_isLoading)
          const Center(
            child: CircularProgressIndicator(color: Color(0xFFb1bbd8)),
          ),
       ]
    )
  )
)