Center doesn't put the Form in center in Flutter

Viewed 21

Well, using a Center widget should put the widget in center? The Form is stuck on top in my case.

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      top: true,
      bottom: true,
      left: true,
      right: true,
      child: Scaffold(
          body: Center(
              child: Form(
                       key: _formKey,
                       child: showRegistrationWidget(),
      ))),
    );
  }


Widget showRegistrationWidget() {
    return Column(
      children: [
        TextFormField(
            decoration: const InputDecoration(
                labelText: "Login ID",
                icon: Icon(Icons.person),
                hintText: "Your registered Name or Email ID or Phone number"),

            enableSuggestions: true,
            autocorrect: false,

            validator: (arg) {
              if (arg!.isEmpty) {
                return "Please enter your Login ID!";
              }
              return null;
            }),

        TextFormField(
            decoration: const InputDecoration(
                labelText: "Password",
                icon: Icon(Icons.password_rounded),
                hintText: "Your registered Name or Email ID or Phone number"),

            obscureText: true,
            enableSuggestions: false,
            autocorrect: false,

            validator: (arg) {
              if (arg == null || arg.isEmpty || arg == "abc") {
                return "Please enter your password!";
              }
              return null;
            }),

        ElevatedButton(
            onPressed: () {
              if (_formKey.currentState!.validate() == true) {}
            },
            child: const Text("Submit")),
      ],
    );
  }
1 Answers

Use Container with alignment instead of Center. The container offers the child element to fill the space.

Read more about constraints

@override
Widget build(BuildContext context) {
  return SafeArea(
    top: true,
    bottom: true,
    left: true,
    right: true,
    child: Scaffold(
      body: Container(
          alignment: Alignment.center,
          child: Form(
            key: _formKey,
            child: showRegistrationWidget(),
          )
        )
      ),
  );
}
Related