Mbi8zs947xg0jmophhb1
2 DAY COURSE

Brian Egan's Flutter and Dart Workshop

Topics covered at FLUTTER-01-02
View Schedule & Book More dates available

Next up:

Want to learn to build beautiful Flutter apps that users can navigate through easily, fetching data along the way? Then this two-day hands-on workshop is for you!

Mobile development is a difficult task these days. Not only do we need write beautiful, high-performance apps that work on low-powered devices with intermittent connectivity, we need to write our apps twice! Once for iOS and again for Android.

Flutter is a new mobile UI framework from Google that allows us to develop high quality apps for both iOS and Android using a single code base. It features a lightning-fast development experience, fluid animations, and native performance. If you're looking to speed up your mobile development, ship to both platforms, and have fun in the process, this course is for you!

Begin with a crash-course in the easy-to-learn, easy-to-scale Dart language, before moving on to use it to build your own working app.

Learn how to:

  • Understand basic Dart syntax and fundamentals
  • Quickly create apps which look consistent across iOS and Android platforms
  • Create standard layouts with Flutter and populate them with data from the cloud
  • Create lists of items for a mobile app
  • Seamlessly convert difficult designs into Flutter widgets
  • Understand how to change what's displayed on screen in response to user interactions
  • Run into your own challenges and solve them
  • Test your Flutter apps

About the Author

Brian Egan

Brian is a front-end developer with Android, Web and Flutter expertise. He previously worked on popular applications for SoundCloud and Zappos as a senior Engineer and Tech Lead.

Day 1

Flutter and Dart Essentials


Intro to Dart
(Basic understanding of Dart syntax and fundamentals)

  • Variables: var, final, const
  • Type system
  • Strings and String Interpolation
  • Lists
  • Functions
  • Classes
  • Testing
  • Pub and Dart Packages
  • Exercise: Dart Koans
Flutter: First App & Layout Basics

(Create Standard Layouts with Flutter)

  • Creating a new Flutter app
  • WidgetsApp/MaterialApp
  • Working with themes to change the colour scheme of your app
  • Using Hot Reload!!!
  • Scaffold
  • Creating an AppBar
  • Intro to the Text Widget
  • Adding a FloatingActionButton
  • Intro to the Icon Widget
  • Row / Column / Expanded
  • Containers for Margin, Padding, Backgrounds, Shadows, Borders, etc.
  • Images
  • Creating your own Stateless Widgets
  • Exercise: Convert increasingly difficult designs into Flutter Widgets.
Lists

(Learn how to create Lists of Items for a Mobile app)

  • Working with ListView
  • Populating the List with Cards and ListTile
  • Infinitely Scrolling Lists with ListView.builder
  • GridView
  • Handling orientation changes
  • Working with Keys
  • Exercise: Use previous Designs to populate a normal ListView, GridView, and StaggeredGridView
Gestures & StatefulWidgets

(Understand how to change what's displayed on screen in response to User interactions)

  • GestureDetector and Inkwell
  • StatefulWidget
  • Passing data to Widgets
  • Passing functions to update State
  • Exercise: Using FloatingActionButton to update State, create a Custom Button that updates State, create a Tabbed Bottom Navigation that allows you to switch between tabs

Day 2

Building an App


Navigation
(Learn how to launch and pass data between Screens)

  • Working with the Navigator
  • Pushing new Routes
  • Pushing names routes
  • Sending data back to a Parent Screen
  • Working with Hero transitions
  • Exercise: Create an app that navigates 3 screens deep, passing data along the way and back out. Stretch Goal: Use Hero animations to make it fancy
Networking

(Understand how to fetch data from the internet)

  • Using http client to fetch data from the internet
  • Working with Futures and async functions
  • Converting JSON into Dart Objects
  • Introduce json_serializable for converting json without writing everything by hand, but don’t focus on it
  • Displaying the data as a List with a FutureBuilder Widget
  • Making Authenticated Calls to a web service
  • Exercise: Fetch a List of data from the JSONPlaceholder api. Stretch Goal: Use json_serializable to convert json!
Build an app!

(Synthesize everything you've learned to run own challenges and solve them with assistance)

  • Introduce common resources to solve challenges along the way
  • You can choose to focus more on the Look and Feel or the Networking and Architecture of the app
Demo time!
Overview

Want to learn to build beautiful Flutter apps that users can navigate through easily, fetching data along the way? Then this two-day hands-on workshop is for you!

Mobile development is a difficult task these days. Not only do we need write beautiful, high-performance apps that work on low-powered devices with intermittent connectivity, we need to write our apps twice! Once for iOS and again for Android.

Flutter is a new mobile UI framework from Google that allows us to develop high quality apps for both iOS and Android using a single code base. It features a lightning-fast development experience, fluid animations, and native performance. If you're looking to speed up your mobile development, ship to both platforms, and have fun in the process, this course is for you!

Begin with a crash-course in the easy-to-learn, easy-to-scale Dart language, before moving on to use it to build your own working app.

Learn how to:

  • Understand basic Dart syntax and fundamentals
  • Quickly create apps which look consistent across iOS and Android platforms
  • Create standard layouts with Flutter and populate them with data from the cloud
  • Create lists of items for a mobile app
  • Seamlessly convert difficult designs into Flutter widgets
  • Understand how to change what's displayed on screen in response to user interactions
  • Run into your own challenges and solve them
  • Test your Flutter apps

About the Author

Brian Egan

Brian is a front-end developer with Android, Web and Flutter expertise. He previously worked on popular applications for SoundCloud and Zappos as a senior Engineer and Tech Lead.

Program

Day 1

Flutter and Dart Essentials


Intro to Dart
(Basic understanding of Dart syntax and fundamentals)

  • Variables: var, final, const
  • Type system
  • Strings and String Interpolation
  • Lists
  • Functions
  • Classes
  • Testing
  • Pub and Dart Packages
  • Exercise: Dart Koans
Flutter: First App & Layout Basics

(Create Standard Layouts with Flutter)

  • Creating a new Flutter app
  • WidgetsApp/MaterialApp
  • Working with themes to change the colour scheme of your app
  • Using Hot Reload!!!
  • Scaffold
  • Creating an AppBar
  • Intro to the Text Widget
  • Adding a FloatingActionButton
  • Intro to the Icon Widget
  • Row / Column / Expanded
  • Containers for Margin, Padding, Backgrounds, Shadows, Borders, etc.
  • Images
  • Creating your own Stateless Widgets
  • Exercise: Convert increasingly difficult designs into Flutter Widgets.
Lists

(Learn how to create Lists of Items for a Mobile app)

  • Working with ListView
  • Populating the List with Cards and ListTile
  • Infinitely Scrolling Lists with ListView.builder
  • GridView
  • Handling orientation changes
  • Working with Keys
  • Exercise: Use previous Designs to populate a normal ListView, GridView, and StaggeredGridView
Gestures & StatefulWidgets

(Understand how to change what's displayed on screen in response to User interactions)

  • GestureDetector and Inkwell
  • StatefulWidget
  • Passing data to Widgets
  • Passing functions to update State
  • Exercise: Using FloatingActionButton to update State, create a Custom Button that updates State, create a Tabbed Bottom Navigation that allows you to switch between tabs

Day 2

Building an App


Navigation
(Learn how to launch and pass data between Screens)

  • Working with the Navigator
  • Pushing new Routes
  • Pushing names routes
  • Sending data back to a Parent Screen
  • Working with Hero transitions
  • Exercise: Create an app that navigates 3 screens deep, passing data along the way and back out. Stretch Goal: Use Hero animations to make it fancy
Networking

(Understand how to fetch data from the internet)

  • Using http client to fetch data from the internet
  • Working with Futures and async functions
  • Converting JSON into Dart Objects
  • Introduce json_serializable for converting json without writing everything by hand, but don’t focus on it
  • Displaying the data as a List with a FutureBuilder Widget
  • Making Authenticated Calls to a web service
  • Exercise: Fetch a List of data from the JSONPlaceholder api. Stretch Goal: Use json_serializable to convert json!
Build an app!

(Synthesize everything you've learned to run own challenges and solve them with assistance)

  • Introduce common resources to solve challenges along the way
  • You can choose to focus more on the Look and Feel or the Networking and Architecture of the app
Demo time!