Additional width for first element of Column in Flutter

Issue

I am trying to achieve two evenly spaced buttons within a Column in Flutter. on Repeating the widgets twice, the first button is Shrunk by a specific width. On inspection, found this.

I’m unable to identify the cause for this unknown width. Here is the code for reference.

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Theme.of(context).backgroundColor,
      body: SafeArea(
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              Text('Findo', style: Theme.of(context).textTheme.subtitle1),
              Column(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: [
                  ElevatedButton(
                    onPressed: () => {print('pressed')},
                    child: Text(
                      'Store Login',
                      style: Theme.of(context).textTheme.bodyText1,
                    ),
                    style: ElevatedButton.styleFrom(
                        padding: const EdgeInsetsDirectional.fromSTEB(
                            100, 20, 100, 20),
                        primary: Theme.of(context).primaryColor,
                        shape: const RoundedRectangleBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(50.0)))),
                  ),
                  ElevatedButton(
                    onPressed: () => {print('pressed')},
                    child: Text(
                      'Customer Login',
                      style: Theme.of(context).textTheme.bodyText1,
                    ),
                    style: ElevatedButton.styleFrom(
                        padding: const EdgeInsetsDirectional.fromSTEB(
                            100, 20, 100, 20),
                        primary: Theme.of(context).accentColor,
                        shape: const RoundedRectangleBorder(
                            borderRadius:
                                BorderRadius.all(Radius.circular(50.0)))),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Solution

ElevatedButton has no height or width constraint. It takes space or (width and height) in respect of inside content. In your case Store and Customer is not same length. So customer button has more width than Store. You can wrap the button with a container and give them a width like this-

             Container(
                      width: 300,
                      child: ElevatedButton(
                      onPressed: () => {print('pressed')},
                      child: Text(
                      'Store Login',
                      style: Theme.of(context).textTheme.bodyText1,
                  ),
                style: ElevatedButton.styleFrom(
                padding: const EdgeInsetsDirectional.fromSTEB(
                100, 20, 100, 20),
                primary: Theme.of(context).primaryColor,
                shape: const RoundedRectangleBorder(
                borderRadius:
                BorderRadius.all(Radius.circular(50.0)))),
                ),
                    ),

Answered By – Saddan

Answer Checked By – Marie Seifert (FlutterFixes Admin)