flutter - How to Center a Positioned() horizontally in Flutter

Question

I am currently building a verification code screen for my app and am using a stack with some positioned() widgets, as the verification code form should also be nicely positioned, but how do I get it to be horizontally centered?

My code is as follows:

    @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: Stack(
          children: [
            Image.asset(verificationImage),
            Positioned(
              left: MediaQuery.of(context).size.width * 0.075,
              top: MediaQuery.of(context).size.height * 0.32,
              width: MediaQuery.of(context).size.width * 0.6,
              child: Text(
                'We have send you an email with a verification code at ${generatedCode[0]}${generatedCode[1]}***',
                style: TextStyle(
                    color: Colors.white,
                    fontWeight: FontWeight.bold,
                    fontSize: MediaQuery.of(context).size.height * 0.025),
              ),
            ),
            //Later the
            // Mail Adress
            Positioned(
              child: Form(
                key: formKey,
                child: CodeFields(
                  length: codeLength,
                  validator: validateCode,
                  fieldWidth: MediaQuery.of(context).size.width * 0.1,
                  fieldHeight: MediaQuery.of(context).size.width * 0.14,
                  inputDecoration: InputDecoration(
                    filled: true,
                    fillColor: Colors.grey.withOpacity(0.2),
                    enabledBorder: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(24.0),
                        borderSide: BorderSide(color: Colors.transparent)),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(24.0),
                    ),
                  ),
                ),
              ),
            ),
            SizedBox(height: MediaQuery.of(context).size.height * 0.05),
            FlatButton(
              onPressed: onButtonPressed,
              child: Text('Verify code'),
            ),
          ],
        ),
      ),
    );
  }

标签： flutterflutter-layout

Answer 1

For placing the widget exactly in the center, you should use the alignment property of Stack widget.

Suppose you have a Text widget inside Positioned widget that you want to be in the exact center. Then, just remove the Positioned widget & use the alignment property & set it to Alignment.center as show below:

Previous widget:

Stack(
  children: [
    Positioned( // This widget needs to be exactly in the center
      child: Text('Some text'),
    ),

    // Other widgets
  ],
),

Placing widgets in the center

Stack(
  alignment: Alignment.center, // <---------
  children: [
    Text('Some text'),
    // Other widgets
  ],
),

This way any widget inside the Stack will be centered by default. If you want to change the position of other widgets, then you should use Positioned widget.