The journey of mentoring girls about Flutter in Flutter CodeLab

Chloe Hsu
4 min readMar 24, 2019

--

Flutter codeLab image from Women Who Code Taipei

In this article, I’d like to share the journey of 4 sessions of Flutter CodeLab. What did we do during 4 sessions? What did we achieve during 4 sessions? The study group tends to encourage more girls in Taiwan to learn this amazing framework — Flutter!

How did I start my journey with Flutter?

I’m a native Android developer. Last year, I joined the first Flutter study jam held by Joannie from Women Who Code Taipei. My experience with Flutter so far was great, I think it is easier to learn, development is faster and it’s possible to do complicated screen transitions with very little code.

WomenWhoCodeTaipei

Flutter CodeLab held by Women Who Code Taipei

The host Joannie Huang, one of the directors of Women Who Code Taipei, held 4 sessions of Flutter CodeLab for girls only. (Hooray!) I was invited to be the Flutter mentor to mentor other women about Flutter. ( It was so exciting!!)

We have 12 ~ 18 attendees:

  • Two classes in total: class A and class B
  • 6~8 students in each class.
  • Two mentors and two assistants
  • Two classrooms

Our schedule :

  • Every Thursday started at 7 pm
  • Duration: 2.5 ~ 3 hr each session.

Goal

Our goal is to introduce Flutter and everyone in the class would be able to use Android Studio, debug tool as well as learning the concept of Flutter framework, stateless & statefulWidget and familiar with building layout.

Target student

This time we target on the women who have programming experience

Our girls came from different background, an IOS developer, an Android developer, some of them have experience with C and JAVA, some of them already have kids!

What material did we use?

I expected everyone in the class would be familiar with Flutter doc and build the layout with Flutter.

How did I mentor them?

Learning by doing is always the best way to learn to program.

I walked through the CodeLab step by step and explained the concept with graphics and Flutter doc.

Session 1 & Session 2

MDC101-Flutter
Graphic

In session 1, I introduced Flutter framework, Android Studio IDE tool which we use very often (i.e hot reload, pubspec.yaml), folder structure, widget concept, debug tool, shortcut, the name parameter, MaterialApp widget and started building MDC-101 Flutter: Material Components (MDC) Basics (Flutter).

Everyone successfully completed MDC-101 Flutter: Material Components (MDC) Basics. Also, they learned to use TextFormField Widget to validate the input.

Session 3

They had to complete Layout tutorial independently. Assistant and I explained when they had any questions. The goal of this class is to practice more complex layout, familiar with the Row / Column structure to build UI.

Before they started working on this exercise, I asked them What kind of widgets do you think you will need to use when you see this UI?

At the end of the class, everyone completed the task real fast. I was very surprised since it was only third sessions, they already able to build more complex UI.

Session 4

Gallery App

Make a Gallery page and navigate to the second page with Hero Widget.

In the last session, they learned:

  • GridView, Card, GestureDetector,
  • Navigation, PassData
  • Hero

We started with a new page and build the gallery and navigate to the second screen with Hero widget animation. Everyone successfully built it!

Result

About 10~12 hrs in total, they started from setting up the environment to successfully completing the project. Everyone is very happy and have so much passion for developing with Flutter!

Conclusion

I’m glad that I encouraged girls to code and learn Flutter :) This is my first time to mentor people about Flutter. I was a bit nervous but also excited to have this valuable opportunity. During these 4 sessions, I learned a lot. I explained and helped them to understand the concept but also helped them to build confidence and interest. Meanwhile, my understanding of Flutter is clearer.

Sometimes, they would ask some kind of questions I never encountered before, so we all actively discussed and found the solution!

This is the most valuable thing for the study group!

Flutter codeLab class A

--

--