Step-by-Step Guide on How to Create a Push Button in Flutter in 2023

Article by: Manish Methani

Last Updated: September 21, 2021 at 10:04am IST
6 min 42 sec

Step 1: Create a New Flutter Project

Create a new Flutter project using your preferred IDE or command line tools.

Step 2: Add Dependencies

Add the Flutter Material package to your project's dependencies in the pubspec.yaml file. This package provides the widgets and tools you need to create a button.

How do I create a push button in flutter?

To create a push button in Flutter, you can use the ElevatedButton or FlatButton widget. Here's an example code snippet using the ElevatedButton widget:

ElevatedButton(
onPressed: () {
  // Do something when the button is pressed.
},
child: Text("Push Me"),
),

In the above code, we use the ElevatedButton widget to create a button with a raised appearance. The onPressed property is used to specify the function that will be called when the button is pressed. In this case, we have left it empty. The child property is used to specify the text that will be displayed on the button. In this case, the text is "Push Me".

Final Output:

How to change shape of elevated button flutter?

To change the shape of an ElevatedButton widget in Flutter, you can use the shape property to set the shape of the button. The shape property takes a ShapeBorder object which defines the shape of the button.

Here's an example of how you can use the shape property to change the shape of an ElevatedButton widget to a rounded rectangle:

ElevatedButton(
onPressed: () {
  // action to perform when button is pressed
},
child: Text('Button'),
style: ElevatedButton.styleFrom(
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
),
),

In this example, the shape property of the ElevatedButton.styleFrom method is set to a RoundedRectangleBorder object with a BorderRadius of 10.0, which creates a rounded rectangle shape for the button. You can adjust the BorderRadius value to change the roundness of the corners of the button.

How to set size of elevated button flutter?

To set the size of an ElevatedButton widget in Flutter, you can use the ButtonStyle property fixedSize to specify a fixed size for the button.

Here's an example of how you can use the fixedSize property to set the size of an ElevatedButton widget:

ElevatedButton(
onPressed: () {
  // action to perform when button is pressed
},
child: Text('Button'),
style: ButtonStyle(
  fixedSize: MaterialStateProperty.all(Size(200, 50)),
),
),

In this example, the fixedSize property of the ButtonStyle is set to a MaterialStateProperty.all(Size(200, 50)), which sets the size of the button to 200 pixels wide and 50 pixels high. You can adjust the Size value to change the size of the button.

How to align floating action button flutter?

To align a floating action button in Flutter, you can use the floatingActionButton property of a Scaffold widget. You can set the floatingActionButton property to a FloatingActionButton widget, and then use the alignment property of the Scaffold widget to position the button.

Here's an example of how to align a floating action button to the bottom right corner of the screen:

Scaffold(
appBar: AppBar(
  title: Text('My App'),
),
body: Center(
  child: Text('Hello, World!'),
),
floatingActionButton: FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.endFloat,
)

In this example, the floatingActionButton property is set to a FloatingActionButton widget with an onPressed function and an icon. The floatingActionButtonLocation property is set to FloatingActionButtonLocation.endFloat, which positions the button at the bottom right corner of the screen. You can also use other values for floatingActionButtonLocation to position the button in other locations.

Final Output:

Conclusion

Congratulations! You now know how to create a button in Flutter with code and examples. With these skills, you can create beautiful and functional buttons for your Flutter apps.