Home > Enterprise >  positioning of a ElevatedButton in Flutter
positioning of a ElevatedButton in Flutter

Time:12-30

I am here with the next Problem. I use a Elevated Button for a save function (see picture)enter image description here

I don´t like the positon of the button and would position the button further down.

    return AlertDialog(
      content: Form(
        key: formKey,
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            TextFormField(
              onChanged: (String txt) => item = txt,
              onFieldSubmitted: (String txt) => save(),
              validator: (String? value) {
                if(value!.isEmpty) {
                  return 'Please enter a value';
                }
                return null;
              },
            ),
            ElevatedButton(
              child: Text('Save', style: TextStyle(color: Colors.white),),
              onPressed: save,
              style: ElevatedButton.styleFrom(
                primary: Color.fromRGBO(23, 152, 185, 100),
                padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
                )
              )
          ],
        ),
      )
    );
  }

CodePudding user response:

You can actually do a lot of things here, but the easiest I think is to place

const SizedBox(
  height: 10.0, // height you want
)

between TextFormField and ElevatedButton

CodePudding user response:

You can wrap you ElevatedButton inside of a Padding widget and then set the top padding equal to the distance you want like this

Padding(
            padding: const EdgeInsets.only(top: 8.0), //The distance you want
            child: ElevatedButton(
                child: Text('Save', style: TextStyle(color: Colors.white),),
                onPressed: save,
                style: ElevatedButton.styleFrom(
                  primary: Color.fromRGBO(23, 152, 185, 100),
                  padding: EdgeInsets.symmetric(horizontal: 50, vertical: 20),
                ),
          ),
),
  • Related