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.

So, I've finally made the step. For some time now I have wanted to get into mobile development.

I've looked at Android. I've looked at IOS (staring with Objective-C and Swift). I've played around a little - especially in the early days of IOS.

I've tried different languages and plugins. I've tried drag and drop development environments. None of them were simple enough to do the work I wanted; or were too simple to be powerful enough.

Until I took a look at Flutter.

Flutter

So, I will write an article in itself on Flutter - but essentially its an environment produced by Google using the Dart language. It's designed for easy, rapid development of cross-platform apps.

So, you write it once and can build it for Android, IOS and even the Web as JavaScript.

When building your apps, it's kind of like building something for the web - in that, there are complex code but at the same time you build what's called Widgets which you can style - kind of like most web app pages and elements.

The code itself can be easy enough to understand to begin with - but I see can start to get more complex. You start with something simple like a ListView and build a ListTile - which is where you add elements.

So, you build up the ListTile with say a Text elements and Icon. Then you add some code that allows you to touch the element and do something,. You then build up the ListView with each ListTile.

As you build up your UI you can add interface elements - such as the animation for when adding and removing elements in a list; new screens, menus, buttons and so on.

Moving forward with Flutter

So, moving forward I will be releasing video on the YouTube channel linked - which includes the following 2 videos on me getting started.

As I list more and learn more I will be sharing through this page too. So, why not follow my new mobile application development learning.

Getting started with Flutter

Installing Flutter