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

The wonderful initiative has been launched by Google’s Flutter Team and Flutter Community. It’s #30DaysOfFluter. All the Flutter fans will enjoy this 30-days long adventure. And this is worth to spent time! You also can join and study Flutter under the supervision of its creators.

FlutLab can ease this learning path for you.

Are you ready? Let’s go!

Here we’ll pass through the 1st day learning agenda: Startup Name Generator App.

1. Visit https://flutlab.io, the online Flutter IDE.

2. Go to your Profile and press the “New Project” button.

3. Create a new project with “Code Base: Stateless Hello Word”.

4. Your project was created. It contains a simple Hello World App.

5. Press the button “Build project”. You will create your first Web build.

6. Congratulations! Your first contact with Flutter and FlutLab was successful.

7. Now you can look at #30DaysOfFlutter intro here: Building your first Flutter app, part 1.

OR, continue with a simplified FlutLab version of the same.

The Codelab author proposes to add dependencies at this point (https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#3).

Wonderful! Let’s do so using FlutLab simplified tools.
Open pubspec.yaml and append english_words: ^3.1.5 (english_words 3.1.5 or higher) to the dependencies list:

8. Also you need to introduce some changes into main.dart.
Add this line import 'package:english_words/english_words.dart';

9. You are doing great! Do these small steps to see your first version of Startup Name Generator:
- add this line: final wordPair = WordPair.random();
where WordPair.random() creates a single WordPair randomly.
- comment or delete: child: Text('Hello World'),
- add this line: child: Text(wordPair.asPascalCase),
where asPascalCase returns the word pair as a simple string, with each word capitalized, like "KeyFrame" or "BigUsa".

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

11. I hope you like to play with Flutter. So let’s go on:
- comment or remove: home: MyHomePage(title:'Flutter Demo Home Page),
- add this line: home: RandomWords(),
- remove this class: class MyHomePage and follow the steps from:

Write your first Flutter app, part 1 | Google Codelabs

12. Finally, you get your next version of Startup Name Generator.

Awesome! You finished the 2nd-day of the agenda #30DaysOfFlutter!

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

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 into your FlutLab account and play with it.
Good luck!