Your First Flutter App: An App From Scratch

It’s hard to believe that you just started the course and already I’m giving you a challenge. Don’t worry. This is a thought challenge. You won’t be writing any code.

So here is the app we are going to build. It’s a simple game based on the slider. The app will give the user a random number from one to one hundred. The user will then move the slider to that number. They will have to approximate the correct position. The closer to the number, the more points they will get.

Your challenge is to think of a programming todo list on building this app. Take a moment and based on the app’s description and screenshot,figure out a list of steps needed to complete the app. Pause the video now, and think about how you would approach this project.

How’d your task list turn out? Ultimately, everyone’s task list will be different so there really is no right answer. The most important part is coming up with a plan. There’s a joke in development circles that goes, “two weeks of coding is a good way to save an hour of planning”. Have a plan is key to becoming a successful developer.

So here are a list of task items that I came up with. First, we’ll add a “hit me” button to the screen. Then, we’ll show a popup when the user taps that button. After that, we’ll put some game info on the screen, such as what the current score is, and what the round number is. Then, we’ll put a slider on the screen and make it go between the values 1 and 100. Finally, we’ll read the value of the slider after the user taps the Hit Me button.

That’s actually the approach we’ll do in this course. In the followup course, Your First Flutter App: Polishing the App, we will do the following. We will generate a random number at the start of each round and display it on the screen. That is the target value. Next, we’ll calculate the score, which is based on the difference between the random number, and the value of the slider. That should be displayed in the popup after you tap hit me. Then, we’ll add the Start Over button on the screen. Now, If you tap the start over button, it should reset the score and put the player back into the first round. Finally, we’ll make it look pretty.

Again, that’s for part two. For now, we’ll focus just on our initial todo list. Before that, it’s important to know how to create a Flutter project and we’ll do that in the next episode.