Creating A Button In Flutter

You want to create a interface for your mobile app. You decide you need a button to allow the user to interact with the app - but how do you add a button and get it to do something in Flutter?

It doesn't matter if you are using a RaisedButton, FlatButton or even IconButton - you add the button to the screen and attach a function to it using the same steps.

In this article we are going to go through the basics to add a button and make it useful.

Adding the button

First thing we need to do is add the button widget to the screen.

You've got your default Stateless or Stateful Widget defined. You've create your build function and have it returning then MaterialApp. So now we need to start building this out to add a button.

Let's start by adding the scaffold. This allows us to add the appBar and a body in which we are going to add a button. Now, before I go further - you can also add the button to the AppBar - which is done in much of a similar way.

Adding a button the the AppBar is for a future post!

You want to add a raised button - so your code should looks something like the following

return MaterialApp(
  home: Scaffold(
    appBar: AppBar(title: Text('Button Demo'),),
    body: RaisedButton(
        child: Text('Click Me'),
        onPressed: null,
      )
  )
);

So, I the above we see I then RaisedButton we have 2 elements. First is the Child which has a Text widget assigned - this is the text on the button. The second is onPressed which currently is null.

The onPressed property will contain a pointer to a function to call when the button is pressed. Just to note, the onPressed is used in all the button types mentioned in this post.

With onPress being null the button will be greyed out on screen. To make it active you could changed onPressed to the following.

onPressed: () {},

What we are doing is is giving onPressed an anonymous function. With this added the button will now become active on your screen - but will not do anything as we are not doing anything in the function.

We could change this further to do something when the button is pressed.

onPressed: () {print('Button Pressed'},

Another simple change - but this no prints something to the terminal/console on the button pressed.

Adding a function for the button to call

Now we know we need to add a function for the onPressed to point at - lets create one.

void buttonFunctionCall()
{
  print('Button function called');
}

Quite a simple function - but now we can call this from the onPressed property of a button but adding a pointer to the function

onPressed: buttonFunctionCall,

Note: we don't had the brackets - using the name as above passes a pointer to the function - putting brackets will mean the app execution will try calling the function on build - something which will return an error.

That's really the basics to get a button to do something. Obviously you can go further and make the functions more advanced. Pass the function pointer into other Widgets (hint - check out Function type).

You may also want to pass a value into the function when called. We previously said that we can't add brackets in the onPressed call - otherwise, it calls the function on build - so how do we do that?

We simply go back to the anonymous function call.

void buttonFunctionCall(int passedInVal)
.
.
.

onPressed: () {buttonFunctionCall(passedInVal)},

Using the anonymous function means that we still pass in a function pointer to the onPressed parameter - which calls the function with the passed in value.

Why not check out my video on this

I have created a video showing the creation of a button and adding functions. If you would like to follow along and see this process being written then why not check out this Creating A Button In Flutter video.