Positioned widget different for every screen-CodePudding

As you can see there are two different position on the bottom widget, but it has same code. I tried to use MediaQuery but result would stay the same.

 SafeArea(
      child: Form(
        key: formKey,
        child: ListView(
          children: [
            SizedBox(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              child: Stack(
                children: [
                  Positioned(
                    bottom: 0,
                    left: 35,
                    right: 35,
                    child: Container(
                      height: MediaQuery.of(context).size.height * 
                             0.085,
                      decoration: const BoxDecoration(
                          borderRadius: BorderRadius.only(
                            bottomLeft: Radius.circular(25.0),
                            bottomRight: Radius.circular(25.0),
                          ),
                          color: Colors.white),
                      child: Row(
                            ...
                          )
                        ],
                      ),
                    ),
                  ),
                  SizedBox(
                    height: MediaQuery.of(context).size.height * 
                    0.95,
                    ...
            // add bottom padding for screen
            SizedBox(
              height: MediaQuery.of(context).size.height * 0.1,
            ),
          ...
    ),

Any help would be appreciated. Thank you.

CodePudding user response：

This is probably happening because of different screen height. In your case stack is not needed. You can replace stack with column and wrap it with single child scroll view. It needs some more work to do it dynamic so the user can see the same thing in different screens.

If you provide me your code I could help more.

CodePudding user response：

You have to use a stack if you want the above effect. Never code with the MediaQuery but with the available space. Except for web. So use LayoutBuilder. If you do it without stack you need to apply a Transform.translate on the y coordinate, only if the widget above is render first. I'm not agree with the accepted answer.

import 'package:flutter/material.dart';

class Login extends StatelessWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.red,
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: LayoutBuilder(builder: (context, constraints) {
          return Stack(
            alignment: Alignment.center,
            clipBehavior: Clip.none,
            children: [
              Positioned(
                bottom: -64,
                left: 15,
                right: 15,
                child: Container(
                  constraints: constraints,
                  height: 70,
                  width: double.infinity,
                  decoration: const BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(15),
                          bottomRight: Radius.circular(15))),
                  child: const Center(child: Text("Bolum punya Akun? Bu...")),
                ),
              ),
              Container(
                decoration: const BoxDecoration(
                    color: Colors.blueGrey,
                    borderRadius: BorderRadius.all(Radius.circular(25))),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    const Text("Masuk"),
                    TextFormField(),
                    TextFormField(),
                    //...add const SizedBox Height
                    ElevatedButton(onPressed: () {}, child: const Text("Masuk"))
                  ]
                      .map((e) => Padding(
                            padding: const EdgeInsets.all(8.0),
                            child: e,
                          ))
                      .toList(),
                ),
              ),
            ],
          );
        }),
      ),
    );
  }
}