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.

When I was looking up info about Flutter I ready that every component in Flutter is a widget. I didn't quite understand what that meant as I'd never come across that in any other programming language I had programmed in.

What that ultimately means is that every UI elements you build is a widget.

So, to break down that comment, what is meant is the following.

Flutter - what is a widget

Imagine your screen. You have an app bar and you have a list of items. Quite a simple screen but it will do for this example.

Mobile Interface Concept Screen Design

So, breaking them down. The AppBar is a widget. This is built containing the toolbar which may consist of a title, menu and so on.

Next, your list of items will probably be a ListView. Yes, you guessed it, the ListView is a widget. This widget possibly is built up with something like ListTiles.

The ListTile is each row in the ListView. The ListTile is a widget. You would build this with some Text. Maybe add an Icon. Add any actions. All this is contained in the ListTile widget.

Each row of the ListView contains it's own ListTile widget with the text, icon and actions.

Just a simple example

So, this is just a simple example of what I believe is meant by every component is a widget. You build up the UI with individual widget components - each building up on or in the upper widget.

These all work together to build the screen. Each screen you create will have a scaffold build and each will have their own widgets. This doesn't mean you can't pass info through routes to other screens; but these lists of info would not be widgets as they won't be screen elements.

Just think that; every screen you see, every element on that screen, in Flutter it is all different widgets built up on top of each other to create the UI you need. Then each widget is styled individually to gain the exact look you want.