Learn Dart Programming - Build Default Flutter Counter App

In today’s video we are going to be building the default app that is generated whenever we create a flutter project. This app is going to have an app bar, a text widget and a floating action button. We are going to build it from scratch and I am going to show you how to organize your code in different files.

Create a new project. I am going to name my project “using buttons”. Set the languages to Java and Swift and add an organization identifier. For this tutorial I recommend that you use a physical device. I had difficulties getting the button text to display but when it ran on the emulator there were no issues.

Delete the default code except the first line. That allows us to use material in our app. Delete the widget_test.dart file. Next create a directory in the lib folder and name it UI. Let’s create a dart file and name it home. Import material and then return to main.dart.

In order to use this dart file that we just created we need to import it. We type dot and this takes us to the root folder then we type forward slash and this allows us to access the ui folder. Then we type the name of the file that we created and we include the extension.

The main method is the entry point into our app and we are going to call runApp inside of this method. Inside of this method we are going to create a new Material app and we are going to give it a title. I’m going to name it using buttons and we are going to set the home to a home object.

In home.dart create a class Home which extends a stateful widget. A stateful widget has properties that are mutable. If you have variables or a text widget for example and you intend to change their value, then you should use a stateful widget.
Right click on home and add the missing override and it presents us with this method called create state which returns a state. A state is made up of a list of stateful widgets. We are going to set it to return new HomeScreenState which is a class that we haven’t create yet. Right click on HomeScreenState to create the class.

We are going to extend State and pass in our Home widget. Right click on Home Screen State and add the missing override. Next let’s create a variable called counter and give it the underscore prefix because we want it to be private and give it an initial value of zero.

Next create a method which increases this counter value. We need to call setState inside of this method and pass in our method body. For more information on setState check the documentation in the link below. In this method we just want to increase the counter by 1.

We now need to build the user interface and we can do this using the scaffold material widget. The scaffold helps you with your material design widgets. This widget has the app bar so let’s create a new app bar and set the title to “Using Buttons” and run the app to see how it looks. Once again I recommend that you use a physical device because sometimes the emulator doesn’t work as it should. Using Geny Motion caused some display errors and the Andy emulator which was working last week has stopped after windows 10 was updated.

I am running this on my note 5 and you see the default blue color for the app bar.

Next let’s create a body widget. This holds the primary content of the scaffold. Inside of the body widget we will create a center widget. Inside of the center widget we are going to have one child and this is going to be a Text widget. We are going to pass the raw value of our counter variable by using the dollar sign. We are going to give the text widget some style and set the font color to blue if it’s an even number and red if it’s an odd number. This is achieved by using the ternary operator which is basically an if-else statement on one line. There examples of the if-else statement and ternary operator on my website. The link is in the description. Next let’s set the font size to 40 and run the app to see how it looks.

The final thing that we need to do is add our floating action button. When this button is pressed we want to pass in that function that we created earlier. Set the background colour to blue and let’s give it a plus sign for the icon.

Run the app to see if it works. Please hit like or subscribe if you enjoyed the video. Feel free to hit the notification bell or share these videos. Thanks for watching and I will see you in the next one.


[Website]
https://kodechamp.com

[Twitter]
https://twitter.com/skooltch84

[Facebook]
https://www.facebook.com/kodechamp/

[Links]

If Statements & Ternary Operator from my website
https://kodechamp.com/dart-if-statements-and-the-ternary-operator/

Set State Method
https://docs.flutter.io/flutter/widgets/State/setState.html

Scaffold Widget
https://docs.flutter.io/flutter/material/Scaffold-class.html

Body Property
https://docs.flutter.io/flutter/material/Scaffold/body.html