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

I hope you found the 1st week of “30 Days Of Flutter” useful and you have a good mood to continue our “Code Parties”. There will be a lot of interesting things. Stay tuned to enter the new level of Flutter development.

All Flutter devs tend to develop not only logically correct apps but also to follow the best trends in UI design. Flutter is the perfect tool for this. And this perfection starts from Material Components.

As stated in the Readme in Github repo of Material Components: “Material Components for Flutter (MDC-Flutter) helps developers execute Material Design. Developed by a core team of engineers and UX designers at Google, these components enable a reliable development workflow to build beautiful and functional Android and iOS apps. ”

Are you ready to produce cool apps? Then may the force of Material Design be with you ;).
Let’s start!

1. Go to https://github.com/mdrobnych/mdc_100_series_part_0 and press the green button “Code”. Copy the “Use Git or checkout with SVN using the web URL” link in the opened window.
   This repo is a replica of the original code by “MDC-101 Flutter: Material Components (MDC) Basics (Flutter)” codelab developers.

2. Open https://flutlab.io, go to your profile, and click the “Clone Project from VCS” button. FlutLab supports git-based version control systems (VCS).

3. Now you can clone a project from three of the most popular VCS: Github, GitLab, and Bitbucket. Also, you can clone a project from a public git repo.

Click the “Public repo” button to clone a project.

4. Insert a git link. You can copy (CTRL+C, CTRL+V) it from step 1.

5. Great, the project was successfully cloned. You can start to work with it in the FlutLab IDE.

6. Let’s run it to verify if everything is OK. Click the “Build Project” button!

You can see the app built from the Flutter source code:

7. Not bad! Let’s take a look at the code a little. Material Flutter Team made a good job creating the architecture of this app. There are four dart files:
- main.dart imports app.dart ;
- app.dart imports home.dart and login.dart

The authors of this codelab marked important places to make your changes.

Let’s start with adding input fields for Username and Password. Find the// TODO: Add TextField widgets (101) line in login.dart file and add this code below it:

// [Name]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Username',
  ),
),
// spacer
SizedBox(height: 12.0),
// [Password]
TextField(
  decoration: InputDecoration(
    filled: true,
    labelText: 'Password',
  ),
  obscureText: true,
),

Use the CTRL+S hotkey during your edition of the code. This operation will:

• save changes
• run automatic code formatting
• check code for syntactic errors

What you just did? You added 2 TextField widgets.

TextField Class lets users enter text, either with a hardware keyboard or with an on-screen keyboard. Decoration property of TextField class adds the special decoration around the text field.
SizedBox - box with a specified size used to manage some layout properties

8. Build the project again.

Awesome! Our app has the form for Username and Password now!

9. What will be the next steps? Add the button and behavior to the form following the beautiful manual from Material Flutter Team:

MDC-101 Flutter: Material Components (MDC) Basics (Flutter)

10. Finally, you will get your modified version of the Shrine app.

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

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

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!