Search code examples
androidflutterflutter-column

Additional width for first element of Column in Flutter

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.inspection image

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)))),
                ),
                    ),