Let’s Flutter Ep 3 — Guess my number — Introduction

Welcome back, now is getting serious. First little project I will lead you through, but before here is my solution from last article.

Previous article

body: Center(
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(48.0),
        child: Text(
          "$_counter",
          style: TextStyle(
            fontSize: 40,
          ),
        ),
      ),
      RaisedButton(
        child: Text("Add to counter"),
        onPressed: _incrementCounter,
      )
    ],
  ),
),

Let’s back to our app. Creative process led us to a solution where computer randimizes one number in range from 0 to 100. Now user is asked to guess that number, but it is hard so after wrong answer, computer will help the user with suggesting if the number is smaller or bigger. When the numbers match, computers user will gets congratulations.

Now let’s write it down in form of user stories, where a user story is a tool used in Agile software development to capture a description of a software feature from an end user perspective and can be considered a starting point to a conversation that establishes the real product requirement.

User stories:

• user can answer on question what is correct number by typing number and pressing check button
• user see feedback if number is greater or smaller after click check
• user can get congratulation when guessed correctly

Bonus

• user see how many guess take him to win

Now we know what to do. In previous article we learned some widgets, and now it is time for more. As you see, app is constructed as four widgets vertically spreaded in column.

TextField is widget with purpose of take user keyboard input. For access to text user type, TextField widget is using special TextEditingController.

class _MyHomePageState extends State<MyHomePage> {
  TextEditingController controller = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
    );
  }

  @override
  void dispose() {
    super.dispose();
    controller.dispose();
  }
}

When our screen is closed, we get notified by dispose function, and now is good moment to free our resources like for example controller.

TextField has few interesting parameters. We should set keyboardType using TextInputType object which has some types to choose, like for example number or email. When we choose number, user will not be able to type letter to our TextField. Another usefull parameter is decoration. Using InputDecorator lets us set hint text. Hint is text which will be shown to user when text field is empty.

First of all when we create our widgets, we also need to randomize number for user to guess. We use Random class for that purpose.

int randomNumber = Random().nextInt(3);

In this example we are creating Random object by using his constructor (rounded brackets) and then taking next number from 0 inclusive to 3 exclusive. It mean that random numbers can be 0, 1 or 2.

After user click check button we want to take that typed input text and check if it is equal to our random number.

String userInput = controller.text;

As we see, text property returns actual number that user typed. But keep in mind that string type returned from controller can be the same number or letter. From previous article with counter, we know that int is proper type for natural numbers and any matematical operation like comparsion what is smaller or greater cannot be done with string. Then we have to parse string value to int.

int number = int.parse("123");

Now we know how to parse string to int but be aware that if in string we parsing will be something that is not a number, our program will crash.

Last thing we need to know to create this app, is check if our number is equal, greater or smaller. For this case we need to use if statement.

If statement is basic programming construct and you can find it in the most programming languages.

if(condition) {
    // main case
} else {
    // other case
}

As we see, to use if statement we need to specify our condition which has to be true or false. For example if we want to do somethink only when user input value is equal to our number, we should code it like this:

if(userInput == ourNumber) {
    // do something
}

We do not have to put else part. In that case, if our condition will be false, code in brackets will be omitted.

I think it is all you need to know for finish our app. Please take some time and try your best, it will be rewarded.

If something is not clear to you, please leave the comment. I will explain it to you.

See you around!

Next article