flutter - Login screen with positioned buttons

Question

I just started with Flutter and I'm trying to get my bearings on best practices. I'm attempting to position two buttons that look like they're coming off the parent container a bit. I think I could have achieved the same result if I used media queries and Positions(). Would that be the preferred approach or the one I implemented here?

import "package:flutter/material.dart";

class Login extends StatelessWidget {
  final color = Colors.white;
  final darkColor = Colors.black;
  final primaryColor = Colors.redAccent;

  _buttons(double height, double width, String text, Color buttonColor,
      Color textColor) {
    return Container(
      height: height,
      width: width,
      decoration: BoxDecoration(
          color: color,
          borderRadius: BorderRadius.circular(30),
          boxShadow: [
            BoxShadow(
              color: Colors.grey[400],
              blurRadius: 2,
              offset: Offset(0, 5),
            )
          ]),
      child: RaisedButton(
        color: buttonColor,
        onPressed: () {},
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(30),
        ),
        child: Text(
          text,
          style: TextStyle(color: textColor, fontSize: 14),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      //resizeToAvoidBottomInset: false,
      //backgroundColor: kWhite,
      body: Column(
        children: [
          Container(
            height: MediaQuery.of(context).size.height * .52,
            color: Colors.white,
            child: Stack(
              overflow: Overflow.visible,
              children: [
                Container(
                  width: MediaQuery.of(context).size.width,
                  height: MediaQuery.of(context).size.height * .50,
                  decoration: BoxDecoration(
                    color: Colors.blueAccent,
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(32),
                      bottomRight: Radius.circular(32),
                    ),
                  ),
                ),
                Align(
                  alignment: Alignment.bottomLeft,
                  child: Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 50),
                    child: Row(
                      //crossAxisAlignment: CrossAxisAlignment,
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: [
                        _buttons(30, 120, 'LOGIN', Colors.blueGrey[900], color),
                        _buttons(30, 120, 'SIGNUP', color, Colors.grey[400]),
                      ],
                    ),
                  ),
                ),
                SafeArea(child: Text("hi"))
              ],
            ),
          ),
        ],
      ),
    );
  }
}

question from:https://stackoverflow.com/questions/65661209/login-screen-with-positioned-buttons

Answer 1

Waitting for answers