Flutter Question posted in
The official Flutter documentation can be found here.

Experiencing unexpected bottom padding with SingleChildScrollView in Flutter

I am experiencing unexpected bottom padding when using SingleChildScrollView in Flutter.

I have attempted to resolve the issue by setting padding: EdgeInsets.zero in the SingleChildScrollView, but the bottom padding persists. Notably, I am using Flutter version 3.16.3 in the stable channel.

If you have any insights or suggestions on how to eliminate this unexpected bottom padding, I would greatly appreciate your assistance.

enter image description here

Here is my code

Scaffold(
  body: Container(
    decoration: const BoxDecoration(
      gradient: AppColors.bgGradient,
    ),
    child: SingleChildScrollView(
      padding: EdgeInsets.zero,
      child: Center(
        child: Form(
          key: _formKey,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Container(
                height: scWidth - 100.w,
                width: scWidth - 100.w,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(10.r),
                  border:
                      Border.all(color: AppColors.evTemplateGreen, width: 2),
                ),
                child: ClipRRect(
                  borderRadius: BorderRadius.circular(10.r),
                  child: QRView(
                    key: qrKey,
                    onQRViewCreated: _onQRViewCreated,
                  ),
                ),
              ),
              height20H,
              AnimatedTextKit(
                animatedTexts: [
                  ColorizeAnimatedText('Scan Device QR Code!',
                      textStyle: ts22Bold(clr: AppColors.white),
                      colors: [
                        AppColors.evTemplateGreen,
                        AppColors.appPurple
                      ]),
                ],
                totalRepeatCount: 2,
                pause: const Duration(milliseconds: 1),
                displayFullTextOnTap: true,
                stopPauseOnTap: true,
              ),
              height10H,
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 30.w),
                child: CustomWidgets.orDivider(),
              ),
              height20H,
              Padding(
                padding: EdgeInsets.symmetric(horizontal: 40.w),
                child: InputTextField(
                    validator: (value) {
                      if (value == null || value.isEmpty) {
                        return 'Device Id is required';
                      }
                      return null;
                    },
                    controller: deviceIdCont,
                    hintText: 'Device Id'),
              ),
              height20H,

              Padding(
                padding: EdgeInsets.symmetric(horizontal: 40.w),
                child: CustomButtons.mainButton(
                    onTap: () {
                      Get.to(() => const PlugInCar());
                    },
                    title: 'Verify',
                    bgClr: AppColors.evTemplateGreen,
                    titleClr: AppColors.black),
              ),
              // Padding(
              //   padding:  EdgeInsets.symmetric(horizontal: 50.w),
              //   child:  const Divider(
              //       color: AppColors.grey, thickness: 1.5),
              // ),

              // Text('Scan Device QR Code', style: tsWhite18Bold,),
            ],
          ),
        ),
      ),
    ),
  ),
);
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    When attempting to enclose a Center widget within a SingleChildScrollView, I encountered unexpected bottom padding. However, upon transferring the SingleChildScrollView to a Form widget and removing it from the Center widget, the issue was successfully resolved, and the layout behaved as intended.


  2. 0

    This is example

    final class Example extends StatefulWidget {
  const Example({super.key});

  @override
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  final TextEditingController _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          color: Colors.blueGrey,
        ),
        child: SingleChildScrollView(
          padding: EdgeInsets.zero,
          child: Form(
            child: SizedBox(
              height: context.mediaQuery.removeViewPadding().size.height,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Container(
                    height: context.mediaQuery.size.width * .5,
                    width: context.mediaQuery.size.width * .5,
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.circular(10),
                      border: Border.all(width: 2),
                    ),
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(10),
                      child: const FlutterLogo(),
                    ),
                  ),
                  const SizedBox(height: 20),

                  const Text(
                    'Scan Device QR Code!',
                  ),

                  const SizedBox(height: 10),
                  const Padding(
                    padding: EdgeInsets.symmetric(horizontal: 30),
                    child: Divider(),
                  ),
                  const SizedBox(height: 20),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 40),
                    child: TextFormField(
                      validator: (value) {
                        if (value == null || value.isEmpty) {
                          return 'Device Id is required';
                        }
                        return null;
                      },
                      controller: _controller,
                      decoration: const InputDecoration(hintText: 'Device Id', fillColor: Colors.white, filled: true),
                    ),
                  ),
                  const SizedBox(height: 20),

                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 40),
                    child: ElevatedButton(
                      onPressed: () {
                        //     Get.to(() => const PlugInCar());
                      },
                      child: const Text('Verify'),
                    ),
                  ),

                  // Padding(
                  //   padding:  EdgeInsets.symmetric(horizontal: 50.w),
                  //   child:  const Divider(
                  //       color: AppColors.grey, thickness: 1.5),
                  // ),

                  // Text('Scan Device QR Code', style: tsWhite18Bold,),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

    This is base structure

    Scaffold(
      body: Container(
        decoration: const BoxDecoration(
          color: Colors.blueGrey,
        ),
        child: SingleChildScrollView(
          padding: EdgeInsets.zero,
          child: Form(
            child: SizedBox(
              height: context.mediaQuery.removeViewPadding().size.height,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  
                ///
                /// ...Widgets
                ///
                ],
              ),
            ),
          ),
        ),
      ),
    );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search