Scaffold takes entire screen although it's not needed Flutter

Question

I have the following code:

import 'package:flutter/material.dart';
import 'package:spiran_app/constants/constants.dart';
import 'package:spiran_app/widgets/form_textfield_widget.dart';
import 'package:spiran_app/widgets/subscreen_appbar_widget.dart';

import 'dialog_widget.dart';

class SignUpDialogWidget extends StatefulWidget {
  @override
  _SignUpDialogWidgetState createState() => _SignUpDialogWidgetState();
}

class _SignUpDialogWidgetState extends State<SignUpDialogWidget> {
  final GlobalKey<FormState> _formKey = GlobalKey<FormState>();

  TextEditingController _emailController = TextEditingController();
  TextEditingController _passwordController = TextEditingController();
  TextEditingController _confirmPasswordController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    final ThemeData themeData = Theme.of(context);
    return Container(
      margin: Constants.constContainerMargin,
      decoration: BoxDecoration(
        borderRadius:
            BorderRadius.circular(Constants.constContainerBorderRadius),
        boxShadow: [
          BoxShadow(color: Colors.black, blurRadius: 50.0, spreadRadius: 20.0),
        ],
      ),
      child: ClipRRect(
        borderRadius:
            BorderRadius.circular(Constants.constContainerBorderRadius),
        child: Scaffold(
          appBar: SubscreenAppBarWidget(
            theme: Theme.of(context),
            title: "Sign Up",
            leadingWidget: IconButton(
              icon: Icon(Icons.close),
              onPressed: () => Navigator.pop(context),
            ),
          ),
          body: Form(
            autovalidateMode: AutovalidateMode.onUserInteraction,
            key: _formKey,
            child: Padding(
              padding: const EdgeInsets.all(8.0),
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  FormTextFieldWidget(
                    theme: themeData,
                    textEditingController: this._emailController,
                    icon: Icons.alternate_email,
                    textFieldHintText: "Email",
                    validationRegex: RegExp(
                        r"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?)*$"),
                    validationErrorMessage:
                        "Please enter a valid email address",
                  ),
                  FormTextFieldWidget(
                    theme: themeData,
                    textEditingController: this._passwordController,
                    icon: Icons.lock,
                    isPassword: true,
                    textFieldHintText: "Password",
                    validationRegex: RegExp(
                        r"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?)*$"),
                    validationErrorMessage: "Please enter a valid password",
                  ),
                  FormTextFieldWidget(
                    theme: themeData,
                    textEditingController: this._confirmPasswordController,
                    icon: Icons.lock,
                    textFieldHintText: "Confirm Password",
                    isPassword: true,
                    validationRegex: RegExp(
                        r"^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,253}[a-zA-Z0-9])?)*$"),
                    validationErrorMessage: "Passwords do not match",
                  ),
                  Align(
                    alignment: Alignment.center,
                    child: ElevatedButton(
                      style: ButtonStyle(
                          shape: MaterialStateProperty.all(
                            RoundedRectangleBorder(
                              borderRadius: BorderRadius.circular(
                                Constants.constContainerBorderRadius,
                              ),
                            ),
                          ),
                          backgroundColor: MaterialStateProperty.all(
                              themeData.primaryColor)),
                      child: Text(
                        "Sign Up",
                        style: TextStyle(
                          color: themeData.accentColor,
                        ),
                      ),
                      onPressed: () {
                        if (!_formKey.currentState!.validate()) {
                          showDialog(
                            context: context,
                            builder: (ctx) => DialogWidget(
                              titleText: "Input error",
                              contentText:
                                  "One or some of your inputs have an error. Please correct them first",
                            ),
                          );
                          return;
                        }
                        //TODO sign up
                      },
                    ),
                  )
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

and the result I get is this:

As you can see, there is an extra space on top and bottom (the rectangles) of this screen. The widget causing this is the Scaffold widget I have. How can I remove the extra space so that my widget takes the space it needs and not more?

score 0 · Answer 1 · answered Mar 26 '21 at 18:16

0

I didn't get the question very well but i think you can use Material() widget instead of scaffold

answered Mar 26 '21 at 18:16

s.am.i

648
5
16

You can see from the picture that I have some extra white space. The widget causing it is the scaffold widget. my question is how to remove the extra space and force the widgets to take only the space they need. I used Material as you mentioned but I still have the extra spaces – Morez Mar 26 '21 at 18:33
Can you please mark the white spaces image is not cleared – s.am.i Mar 26 '21 at 18:49
Iti not because of scaffold – s.am.i Mar 26 '21 at 19:04
You have used Column( mainAxisAlignment: MainAxisAlignment.center) change it to start – s.am.i Mar 26 '21 at 19:04
If you want to cover the whole page wrap the main widget widget with expanded and make column spacebetween – s.am.i Mar 26 '21 at 19:08
What I'm trying to achieve is to have an appbar and the form fields at the center of the screen and without those white spaces. Changing the alignment to start just puts the column children at the top and below the app bar – Morez Mar 26 '21 at 19:19
White spaces means it's the background color right? – s.am.i Mar 26 '21 at 19:20
The background color is white which is the default backgroun Color of the Scaffold widget in my app – Morez Mar 26 '21 at 19:31
Basically you want to center the app bar too? – s.am.i Mar 26 '21 at 19:34
I just want them exactly as they look but I want to remove those white spaces – Morez Mar 27 '21 at 10:50

Scaffold takes entire screen although it's not needed Flutter

1 Answers1