2 min read

Flutter allows you to combine various widgets and create a UI that matches your design. Sometimes, you may need to add a Button inside a Column. By default, the width of the button is set as per the length of the text inside. So in this tutorial, we’ll see how to create a full width button in Flutter.

For the example purpose, we’ll use the ElevatedButton. We could have also used a RaisedButton but it is now deprecated With Flutter 2.0.

Here’s what we’ll cover:

The problem

To develop a UI such as Form, you may add some TextFields widget to receive the user input and a Button at the last to submit the data. When you add a button, the size (height and width) of the button stays in sync with the text of the button. For example, if you increase the size or length of the text, the button size increases, and when you decrease size or length, the button size decreases.

Example Code:

Column(
  children: [
    const SizedBox(
      height: 30,
    ),
    const TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.teal)),
        labelText: 'Enter Email',
      ),
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: Colors.black,
        
      ),
      onPressed: () {},
      child: const Text(
        'Submit',
        style: TextStyle(fontSize: 24),
      ),
    ),
  ],
)

Here’s how it looks:

no full width button in flutter

As you can see in the figure above, the size of the button is not full width. So how do we set the full widget to a button in Flutter? Let’s see.

Creating a Full Width Button in Flutter (The Solution)

The full width is set to the Elevated Button by adding a style parameter. Then you can use the ElevatedButton.styleFrom class to provide the size of the button using the property called minimumSize.

Here are the steps to create a full width button in Flutter:

Step 1: Add the ElevatedButton widget.

Step 2: Add the style parameter (inside ElevatedButton) and assign the ElevatedButton.styleFrom().

Step 3: Add the minimumSize parameter (inside ElevatedButton.styleFrom) and assign the const Size.fromHeight(50).

Step 4: Run the App.

Code Example:

Column(
  children: [
    const SizedBox(
      height: 30,
    ),
    const TextField(
      decoration: InputDecoration(
        border: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.teal)),
        labelText: 'Enter Email',
      ),
    ),
    const SizedBox(
      height: 10,
    ),
    ElevatedButton(
      style: ElevatedButton.styleFrom(
        primary: Colors.black,
        minimumSize: const Size.fromHeight(50), // NEW
      ),
      onPressed: () {},
      child: const Text(
        'Submit',
        style: TextStyle(fontSize: 24),
      ),
    ),
  ],
)

Explanation:

  • The minimumSize: const Size.fromHeight(50) creates a button with a height of 50 and width set to infinite.
  • We are simply telling the button to set the minimum size of height set to 50 and width set to full.

Output:

creating full width button in flutter

That’s it. Thanks!

Conclusion

In this tutorial, we learned how to create a full width button in Flutter with a practical example. We also saw how to set a full width to the ElevatedButton in Flutter.

Would you like to check other interesting Flutter tutorials?