Your First Flutter App: An App From Scratch

We’ve been making some progress with our app.

We’ve now checked off the second item in our todo list. We’ve displayed a popup when the user taps a button, but in adding some functionality, you’ve most likely already run into some problems.

One of the biggest pitfalls when you’re first learning app development is understanding what to do if something goes wrong - and trust me, things will go wrong. So next I’ll show you how you can solve common problems.

I recommend you watch this lecture even if you successfully completed the previous exercise, because chances are you will eventually make these kinds of mistakes, so it’s good to know how to deal with them. Let’s dive in!

To get started, open your project in progress or download the starter project for this episode. One of the most common bugs is a typo bug. Open main.dart and scroll to your GamePageState class. Now delete the underscore from _alertIsVisible.

Right away, you’ll get a red squiggle further down in your code. If you hover over the squiggle, you’ll get message letting you know that the variable isn’t defined. If you scroll down, you’ll see more errors.

Often times, when you make an error, those errors will propagate down the page so a good strategy is start with the top most error and work downward. In this case, add the underscore and the errors go away.

Dart is a case sensitive language. Find a Text widget, and make it lowercase. Again, you get a red squiggle because to Dart, a lowercased Text object is quite different from an uppercased one.

When you scroll over the error, you can see that Visual Studio guesses it may be related the text. In the dialog, click the Quick Fix button and you’ll see an option Change to Text. If you don’t understand the bug, you may be tempted to select a random fix option. You may end up doing more damage that way. Rather, consult documentation and online communities for bugs that don’t make sense.

Now missing a parenthesis is like throwing a wrench into an engine. It will cause lots of bugs. Here I’ll go to the main method, and delete the closing parenthesis. Notice I get a bunch of errors from unrelated bits of code.

Remember, start at the top most bug and see what’s the issue. In this case, when you hover over the error, you get a bunch of random error messages. If you click on the Quick Fix button, you’ll get a bunch of unneeded fixes when all you need to do is add a parenthesis. So remember to review your code as well as read the error messages.

Replace the missing parenthesis.

Missing braces can also cause problems like parenthesis. Like the parenthesis, the error will propagate through the rest of your code.

Keep in mind where you place variables. If we move the alertIsVisible variable to the actual build method, that will make the variable local to the build method, but the rest of the class won’t be able to access it. This is known as variable scope and you’ll learn more about scope as you explore the Dart programming language.

So far we’ve been dealing with errors - which are in red, but sometimes VS Code will give you a warning, which is in blue, or potentially another color depending on your theme setting in VS Code.

What’s the difference? Well, errors are fatal. If you get one, you cannot run the app till the error is fixed.

On the other hand, warnings are informative. The editor just says, “You probably didn’t mean to do this, but go ahead anyway.”

In my opinion, it is best to treat all warnings as if they were errors. Fix the warning before you continue and only run your app when there are zero errors and zero warnings. That doesn’t guarantee the app won’t have any bugs, but at least they won’t be silly ones.

We don’t need to track the popup when its open. We currently track the state of the popup with _alertIsVisible and then print out to the console. Lets delete the _alertIsVisible variable from it and then save. Now, open up the Problems tab. You’ll see we have two problems. One problem is that we are using a print statement. let us remove it before we ship the app. The other problem is we aren’t using the _alertIsVisible field. This is a warning. Let’s delete it from the rest of our code. That way, we can keep our code clean of unused variables.

We can search for each instance, but instead, scroll up to the property. You’ll notice the blue squiggle letting us know there’s a problem. Click the property and you’ll see a yellow lightbulb in the gutter. Click the lightbulb to display a bunch of options. Select the option that says, Remove Unused Field. That deletes the field entirely throughout the file. Save the file and look at that. You’re good to go.