“30 Days Of Flutter” with FlutLab: Code Party 2

It’s never too late to start learning Flutter. No matter your computer is powerful or weak. If you are reading this, you can start work with Flutter immediately using FlutLab - Flutter online IDE.

Join the #30DaysOfFlutter challenge!

If you missed Coding Day 2 agenda, no problems! You have 2 options here:

• start from the beginning with “30 Days Of Flutter” with FlutLab: Code Party 1 article
• pick the code of the finished project from Coding Day 1 at FlutLab Widget Bay and jump to Coding Day 2 tasks

What is Widget Bay? This is the gallery of quality open source Flutter projects, connected to FlutLab IDE, so you can fork any project from there and start playing immediately.

How to find the project from Coding Day 1? Go to Widget Bay, open the “30 Days Of Flutter” category, and pick the “Startup Name Generator - part 1” project. You can quickly test the behavior of the app by clicking on “Preview Project”. Or, get the full project code by clicking the “Fork to FlutLab IDE” button.

Here we go. The “Startup Name Generator - part 1” project was added to your profile.

Awesome, let’s start our journey.

1. You can see that list of names were stored in List<WordPair>
Add one more line of code: final _saved = Set<WordPair>(); which will store the user’s favorite words.
   Both List and Set are Flutter Collections. Set has one additional feature in comparison to List - it stores unique elements. So, if you are trying to store the word “SunDay” 2 times in a set, it will hold only one instance of this word.

2. Add one more line of code:final alreadySaved = _saved.contains(pair); It’s just a logical flag meaning that this word was already saved as a favorite one.

3. Let’s implement one more UI feature - we’ll show an icon after the word. The icon can be red if this word was added to favorites, and blank if wasn’t.

   trailing: Icon( 
      alreadySaved ? Icons.favorite : Icons.favorite_border,
      color: alreadySaved ? Colors.red : null,
    ), 

Icon class - a graphical icon widget drawn with a glyph from a font described in an IconData.
trailing property - a widget, part of ListTile class, to display something after the text in ListTile.

By the way, you can find more info about classes inside FlutLab IDE. Just hover the mouse over the class name and see the documentation. Here you can see the description of the Icon class:

4. Press the “Build project” button and enjoy the result ;)

5. Now let’s give life to our empty icons. In the background, we’ll store the clicked word into _saved collection. After the second click on the same word - it will be removed from the collection.
Add those lines of code:

   onTap: () { 
      setState(() {
        if (alreadySaved) {
          _saved.remove(pair);
        } else { 
          _saved.add(pair); 
        } 
      });
    },

6. Are you eager to see if this solution will work? Press the “Build project” button and have fun!

7. The author of Google’s Codelab prepared a lot of surprises for you. Follow the rest recommendations to finish the app:

Write Your First Flutter App, part 2 | Google Codelabs

8. Finally, you’ll get your next version of Startup Name Generator.

Awesome! You finished the 4th-day of the agenda #30DaysOfFlutter!

Next “Code Party”: “30 Days Of Flutter” with FlutLab: Code Party 3

If you’ve stacked with some problems, visit FlutLab Widget Bay and find the source code of this challenge under the “30 Days Of Flutter” category. You can just fork this Widget Bay project to your FlutLab account and play with it.
Good luck!