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

Question

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)),
          ),
      ],
    );

Kaushik Chandru · Answer 1 · 2022-08-27T15:41:52.630

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(),
         SizedBox(
           height:MediaQuery.of(context).size.height,
           width: MediaQuery.of(context).size.width,
             child: SingleChildScrollView(
               child: Column(
                 mainAxisSize : MainAxisSize.min,
                  children:[
                     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: 100, 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.min,
                    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)),
          ),
       ]
    )
  )
)

I just tested this and there is still no scrolling. I also tried to wrap the new body in a SingleChildScrollView but that didn't work either. — Globe, Aug 27 '22 at 15:14
Edited my answer.. Add a column above the background and add both the padding widgets in that column. Wrap the column with singleChildScrollView — Kaushik Chandru, Aug 27 '22 at 15:42
I finally figured it out. What I needed to do is some UI/widget changes to allow me to set `resizeToAvoidBottomInset` to true and now it scrolls. — Globe, Aug 27 '22 at 22:26

score 0 · Answer 2 · answered Aug 27 '22 at 07:47

0

TextField has a property called scrollPadding.

scrollPadding: EdgeInsets.only(bottom: 40)

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

answered Aug 27 '22 at 07:47

FLjubic

161
1
4

If it’s set by default then that’s not what I’m looking for. It’s currently not scrolling at all for any of the TextFields. – Globe Aug 27 '22 at 08:49

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

2 Answers2