Question 75018 in Flutter Question posted in
The official Flutter documentation can be found here.

How to set width ElevatedButton – Flutter

enter image description here

How to set ElevatedButton width. I tried Wrap ElevatedButton with SizedBox set width and Width container but it didn’t work. I also set the minimumSize in the ElevatedButton still can’t change the width of the button. Can anyone help me?

Code:

bottomNavigationBar: Container(
        width: 20,
        padding: const EdgeInsets.all(20),
        child: ElevatedButton(
          style: ElevatedButton.styleFrom(
            elevation: 0.0,
            onPrimary: _buttonIsActive ? Colors.white : const Color(0xFF91A5B2),
            primary:
                _buttonIsActive ? Color(0xFF0E71B0) : const Color(0xFFE1EAF0),
            minimumSize: const Size(88, 56),
            padding: const EdgeInsets.symmetric(horizontal: 16),
            //padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
            shape: const RoundedRectangleBorder(
              borderRadius: BorderRadius.all(Radius.circular(10)),
            ),
          ),
          onPressed: () {}, //=> _addVital(), (Need Open)
          child: const Text('Update',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
        ),
      ),
Tags:

2

Answers


  1. 0

    You can wrap the button with Align widget, this will reduce the constraint.

    bottomNavigationBar: Align(
  alignment: Alignment.bottomCenter,
  child: ElevatedButton(
    style: ElevatedButton.styleFrom(
      elevation: 0.0,
      foregroundColor:
          _buttonIsActive ? Colors.white : const Color(0xFF91A5B2),
      backgroundColor:
          _buttonIsActive ? Color(0xFF0E71B0) : const Color(0xFFE1EAF0),
      minimumSize: const Size(88, 56),
      padding: const EdgeInsets.symmetric(horizontal: 16),
      //padding: EdgeInsets.fromLTRB(10, 5, 10, 5),
      shape: const RoundedRectangleBorder(
        borderRadius: BorderRadius.all(Radius.circular(10)),
      ),
    ),
    onPressed: () {}, //=> _addVital(), (Need Open)
    child: const Text('Update',
        style: TextStyle(fontSize: 18, fontWeight: FontWeight.w600)),
  ),
),

    onPrimary and primary are deprecated.

    Login or Signup to reply.
  2. 0 
     Row(
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Container(
                                    height:80,
                                    width: 300,
                                    child: Padding(
                                      padding: const EdgeInsets.all(20.0),
                                      child: ElevatedButton(
                                        style: ElevatedButton.styleFrom(
                                          backgroundColor: Colors.white,
                                          foregroundColor: Colors.black
                                        ),
                                        onPressed:() {
                                        setState(() {
                                          showPopUp = true;
                                        });
                                        print("elevated button pressed");
                                      }, child: Text("Add Device")),
                                    ),
                                  ),
                                ],
                              ),
    1. wrap elevation button inside a container give height:90, width:300 (according to you ).
      2)wrap this container inside Row()

    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search