CODEWITHSUNDEEP
androidflutterflutter-column
Joe Ralphin
Joe Ralphin

Reputation: 39

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)))),
                  )
                ],
              )
            ],
          ),
        ),
      ),
    );
  }
}

Upvotes: 0

Views: 178

Answers (1)

Saddan
Saddan

Reputation: 1655

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

Upvotes: 1

Related Questions