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

Google Developers’ initiative #30DaysOfFlutter has captured the attention of all Flutter Developers over the last week. Someone is learning together with the Flutter Team, someone creates their own apps and publishes them under the #30DaysOfFlutter hashtag, and someone just having fun observing this “developer madness”. Join us on the Dart Side :)

We had only one code party this week, so you can gain our speed very quickly. You have 2 options here:
1. Go to https://github.com/mdrobnych/mdc_100_series_part_1 and press the green “Code” button. Copy the “Use Git or checkout with SVN using the web URL” link in the opened window. Open https://flutlab.io, go to your profile, and click the “Clone Project from VCS” button.
This repo is a replica of the original code from “MDC-101 Flutter: Material Components (MDC) Basics (Flutter)” by codelab developers.

2. Pick it at FlutLab Widget Bay: “Shrine - part 1”, click the “Fork to FlutLab IDE” button, and the project will appear in your profile.

You are on the right side now ;). Let’s start the party!

1.Click the “Build Project” button to see how the original project looks like. You should see it in the Web emulator:

2. Open home.dart file. Find line // TODO: Add app bar (102), add an AppBar to the Scaffold with this code, and save it (press CTRL+S):

appBar: AppBar(
  // TODO: Add buttons and title (102)
  leading: IconButton(
    icon: Icon(
      Icons.menu,
      semanticLabel: 'menu',
    ),
    onPressed: () {
      print('Menu button');
    },
  ),
  title: Text('SHRINE'),
  // TODO: Add trailing buttons (102)
),

This code should add an icon for the menu and app title. AppBar class is a material design app bar. App bars are typically used in the Scaffold. leading property is the property of AppBar. A widget to display before the title. IconButton class is a material design icon button. Icon buttons are commonly used in the AppBar actions.

3. Click the “Build Project” button or “Hot Reload”. Press the “Next” button on the Web Emulator and enjoy the result.

4. Let’s add 2 more icons into our AppBar: the search and the filter icons. This should be easy:
add this code fragment after the line // TODO: Add trailing buttons (102)

actions: <Widget>[
  IconButton(
    icon: Icon(
      Icons.search,
      semanticLabel: 'search',
    ),
    onPressed: () {
      print('Search button');
    },
  ),
  IconButton(
    icon: Icon(
      Icons.tune,
      semanticLabel: 'filter',
    ),
    onPressed: () {
      print('Filter button');
    },
  ),
],

5. Click the “Hot Reload” button. Do you like the result? I also like it! Let’s move on.

6. Find the line // TODO: Add a grid view (102). You have to remove those lines:

body: Center( 
  child: Text('You did it!'), 
),

And add these ones:

body: GridView.count(
  crossAxisCount: 2,
  padding: EdgeInsets.all(16.0),
  childAspectRatio: 8.0 / 9.0,
  // TODO: Build a grid of cards (102)
),

7. Wonderful! We have to build some nice cards for our catalog items. It should look sexy with the help of a Card widget. Card class is a material design card: a panel with slightly rounded corners and an elevation shadow.

Find the line // TODO: Build a grid of cards (102) and add this fragment:

children: <Widget>[
  Card(
    clipBehavior: Clip.antiAlias,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        AspectRatio(
          aspectRatio: 18.0 / 11.0,
          child: Image.asset('assets/diamond.png'),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(16.0, 12.0, 16.0, 8.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text('Title'),
              SizedBox(height: 8.0),
              Text('Secondary Text'),
            ],
          ),
        ),
      ],
    ),
  ),
],

This piece of code can look scary. But do not lose your force. You can investigate every class and method here using Flutter API reference documentation!

8. I know you are eager to see the result. Well, here we go. Click the “Hot Reload” button or “Build Project”.

9. What will be the next steps? Let’s make a card collection following the beautiful manual from Material Flutter Team:

MDC-102 Flutter: Material Structure and Layout (Flutter)

10. You are really cool coder if you’ve got to this point and created the upgraded version of the Shrine app.

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

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

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!