Flutter Form Field floating at the top

Question

I am having an issue with flutter forms.

Basically I have 3 simple rows added to a Stack. The last one contains a form. Below that there are 'Pinned' elements by Adobe XD, but the row containing the form is floating at the top of the screen... I would expect it to be arranged below the two first rows.

You can see the issue in the screenshot below. The form is on top of the image, but I want it to be above the 2 white lines which I want to replace by functional form fields.

Where am I going wrong? I have put the form in a separate Widget.

LoginPage.dart

Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
          gradient: LinearGradient(
              begin: Alignment.topRight,
              end: Alignment.bottomLeft,
              stops: [
            0.4,
            1
          ],
              colors: [
            Colors.black,
            Color(0xff7d060b),
          ])),
      child: Scaffold(
        resizeToAvoidBottomInset: false,
        backgroundColor: Colors.transparent,
        body: SafeArea(
          child: Stack(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  /* Image.asset(
                  'assets/images/Logo.png',
                  height: 100,
                  width: 250,
                ),*/
                  Image.asset(
                    'assets/images/fewturelogo.png',
                    height: 50,
                  ),
                  Container(
                      padding: const EdgeInsets.only(left: 30.0),
                      child: IconButton(
                        color: Colors.white,
                        icon: const Icon(Icons.not_listed_location_rounded),
                        onPressed: () {
                          print('Hello');
                          showDialog(
                              context: context,
                              barrierDismissible: false,
                              // user must tap button!
                              builder: (BuildContext context) {
                                return AlertDialog(
                                  title: Text('Was ist Rentalsplanet?'),
                                  content: new SingleChildScrollView(
                                    child: new ListBody(children: [
                                      new Text(
                                          'Hier erscheinen Informationen über Rentalsplanet')
                                    ]),
                                  ),
                                  actions: [
                                    new ElevatedButton(
                                        child: Text('Alles klar!'),
                                        onPressed: () {
                                          Navigator.of(context).pop();
                                        })
                                  ],
                                );
                              });
                        },
                      )),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Container(
                    margin: const EdgeInsets.only(top: 70.0),
                    child: Image.asset(
                      'assets/images/SplashImageLogin.png',
                      scale: 1.1,
                    ),
                  ),
                ],
              ),
              Row(children: [
                Container(
                  margin: const EdgeInsets.only(top: 70.0),
                  child: SizedBox(width: 100, child: LoginForm()),
                )
              ]),
            ],
          ),
        ),
      ),
    );

LoginForm.dart

Widget build(BuildContext context) {
    // Build a Form widget using the _formKey created above.
    return Form(
      key: _formKey,
      child: Column(
        children: <Widget>[
          new Flexible(
            child: TextFormField(
              // The validator receives the text that the user has entered.
              validator: (value) {
                if (value == null || value.isEmpty) {
                  return 'Please enter some text';
                }
                return null;
              },
            ),
          ),

          ElevatedButton(
            onPressed: () {
              // Validate returns true if the form is valid, or false otherwise.
              if (_formKey.currentState.validate()) {
                // If the form is valid, display a snackbar. In the real world,
                // you'd often call a server or save the information in a database.
                ScaffoldMessenger.of(context)
                    .showSnackBar(SnackBar(content: Text('Processing Data')));
              }
            },

            child: Text('Submit'),
          ),

          // Add TextFormFields and ElevatedButton here.
        ],
      ),
    );
  }

Answer 1

because you are using stack... stack is not an easy thing to work with and in your case, if you don't have to use it replace it with Column and your problem will be fixed. if not alignment in Stack or fractionaloffset or Transform.translate will help you Transform.translate will fix your problem but it might cause some responsive issues