What is Flutter 🔗

Flutter transforms the app development process. Build, test, and deploy beautiful mobile, web, desktop, and embedded apps from a single codebase. Flutter is an open source framework by Google® for building beautiful, natively compiled, multi-platform applications from a single codebase. Flutter code compiles to ARM or Intel machine code as well as JavaScript, for fast performance on any device. Deploy to multiple devices from a single codebase: mobile, web, desktop, and embedded devices. Flutter is powered by Dart, a language optimized for fast apps on any platform.

See the showcase and Online Docs.

Getting started 🔗

Kilo Loco (aka Kyle Lee)

This is a playlist for developers that want to participate in the #30DaysOfFlutter challenge. It start with the assumption that you have no previous knowledge of Flutter or Dart. Each day you will work on a mini app to demonstrate new concepts and each subsequent video will build on the previous videos. By the end of this challenge, you will have an entire portfolio of Flutter apps that you can show off or add to your resume.

Day 01 | Video (20:00 minutes) 🔗

Kilo Loco kicks off #30DaysOfFlutter with a tutorial covering how to build your first Flutter app. By the end of this tutorial, you will have a better understanding of how Dart and Flutter work together as well as a functional app that helps you pick a restaurant to eat at.

Day 02 | Video (22:37 minutes) 🔗

Kilo Loco goes over how build a tip calculator as the second project in #30DaysOfFlutter. This tutorial will cover handling keyboard input, toggle buttons, and math calculations, including currency conversion.

Day 03 | Video (09:41 minutes) 🔗

Kilo Loco shows you how simple an app can be before releasing it to the App Store. In this tutorial, you will build out his app, “Easy Read,” which is focused on making it easier to communicate with people that have hearing disabilities.

Day 04 | Video (31:54 minutes) 🔗

Kilo Loco shows you how to build a flashcards app. In this tutorial, we will cover creating StatelessWidgets in different files, implementing custom classes, and downloading third party libraries.

Day 05 | Video (21:44 minutes) 🔗

Kilo Loco shows you how to use a WebView to display a website in your Flutter app. This tutorial will cover how to use a third party web view widget, Future builders, and asynchronous tasks.

Day 06 | Video (14:08 minutes) 🔗

Kilo Loco shows you how to add local images to your Flutter project and display them in a sliding picture carousel. In this tutorial, we will cover accessing local assets in your Flutter project, using the carousel third party dependency, and accounting for screen width by using a MediaQuery.

Day 07 | Video (47:32 minutes) 🔗

Kilo Loco shows you how build out Tic-Tact-Toe in Flutter without using any third party dependencies. In this tutorial, you will learn about implementing functionality in Dart to handle multiple use cases for the game.

Day 08 | Video (31:26 minutes) 🔗

Kilo Loco shows you how build settings page and save all the selected values to Shared Preferences. In this tutorial, you will learn about the different types of List Tiles, converting enums to and from savable states, and retrieving stored data from shared preferences.

Day 09 | Video (08:50 minutes) 🔗

Kilo Loco shows you how to take screenshots of your custom widgets and share them outside of the app. In this tutorial, you will learn how to use both the screenshot and share libraries.

Day 10 | Video (15:55 minutes) 🔗

Kilo Loco shows you how to interact with an API and request data from a server using a networking request. This tutorial will cover how to use the http package, understanding JSON, and how to display that JSON on screen.

Day 11 | Video (32:46 minutes) 🔗

Kilo Loco shows you how to make a networking request to a weather API to get the the current weather information of a city entered in by the user. This tutorial will cover interacting with an API, converting the JSON into native Dart objects, and displaying the information on screen, including a remotely downloaded image.

Day 12 | Video (12:21 minutes) 🔗

Kilo Loco shows you how to work with dynamic lists and grids in Flutter. This tutorial will cover how to setup a ListView and GridView using their .builder constructor, and will separate these two views with a tab bar.

Day 13 | Video (21:50 minutes) 🔗

Kilo Loco shows you how to interact with an API and request data from a server using a networking request. This tutorial will cover how to use the http package, understanding JSON, and how to display that JSON on screen.

Day 14 | Video (18:16 minutes) 🔗

Kilo Loco shows you how to upgrade from using Cubits to using Blocs. This tutorial will cover the benefits of both Cubit and Bloc with a side by side comparison.

Day 15 | Video (16:03 minutes) 🔗

Kilo Loco shows you how to navigate between screens using Flutter BLoC and the Navigator 2.0. This tutorial will cover creating a navigation cubit, implementing a MultiBlocProvider, and utilizing the cubit’s state to determine when to show a post details screen.

Day 16 | Video (35:05 minutes) 🔗

Kilo Loco shows you how to build out a pokedex app that shows pokemon in a GridView using the BLoC pattern. This tutorial will cover making a networking request, implementing a bloc, and manipulating the api to show remote images.

Day 17 | Video (47:06 minutes) 🔗

Kilo Loco shows you how to build out the navigation of the Pokedex app using the BLoC library. This tutorial will cover app navigation, working with multiple blocs, performing multithreaded networking requests.

Day 18 | Video (46:23 minutes) 🔗

Kilo Loco shows you how to build a todo app with Flutter using AWS Amplify and the BLoC pattern. This tutorial will cover how to build out the model schema using the Amplify Admin UI, setting up a cubit for state management, and persisting todos to the device.

Day 19 | Video (26:04 minutes) 🔗

Kilo Loco shows you how to perform cross platform data sync by using the cloud (AWS Amplify) in your Flutter app. This tutorial will cover how to add the API category to your Amplify app, syncing the local DataStore database with the DynamoDB backend, and displaying the realtime updates in the todo app.

Day 20 | Video (40:06 minutes) 🔗

Kilo Loco shows you how to get up and running with user authentication on a hosted website using AWS Amplify and Flutter. This tutorial will cover updating the Auth category to support web sign in, authentication state management, and updating the Todo model schema for supporting user specific queries.

Day 21 | Video (35:22 minutes) 🔗

Kilo Loco shows you how to implement a Login UI using Flutter BLoC. This tutorial will cover validation with forms and managing state with BLoC.

Day 22 | Video (46:37 minutes) 🔗

Kilo Loco shows you how to build out the complete authentication flow using BLoC with Flutter. This tutorial will cover creating the sign up and confirmation screens, managing state between blocs and cubits, and communicating with multiple navigators.

Day 23 | Video (34:40 minutes) 🔗

Kilo Loco shows you how to implement user authentication using AWS Amplify Auth with Flutter. This tutorial will cover configuring a new Amplify project with Admin UI, adding functionality to auth capabilities like sign up and sign in, and saving the registered user to DataStore as the database.

Day 24 | Video (34:53 minutes) 🔗

Kilo Loco shows you how to build out the user profile UI with functionality as the current user and when viewing another user’s profile in Flutter. This tutorial covers laying out the profile UI, state management with BLoC, and dependency injection.

Day 25 | Video (22:52 minutes) 🔗

Kilo Loco shows you how to use the image picker package to take pictures with the camera and access photos from the user’s photo gallery with Flutter. This tutorial will cover using platform specific widgets, using the device’s camera and accessing photos from the photo library, and displaying the picked photo as an avatar picture.

Day 26 | Video (25:42 minutes) 🔗

Kilo Loco shows you how to upload files to AWS Amplify using the BLoC Library and Flutter. In this tutorial, you will learn how to add the Storage category to your Amplify app, upload images to Amazon S3, and get the URL of the images to display in the user profile.

Day 27 | Video (15:50 minutes) 🔗

Kilo Loco shows you how to cache remote images and their URLs with Flutter. In this tutorial, you will learn how to create an image URL cache with AWS Amplify Storage, access the cached image URL to display a cached image, and save profile changes using Amplify DataStore.

Day 28 | Video (26:44 minutes) 🔗

Kilo Loco shows you how to create a social media feed UI with Flutter. In this tutorial, you will learn how to create a BottomNavigationBar, work with IndexedStack, and display content using ListView.builder.

Building Clubhouse w/ Archetapp (Jared Davidson) | Video (1:31:18 hours) 🔗

Kilo and Jared will be working together to build out a Clubhouse clone in terms of UI and functionality.

What’s new in Flutter - Keynote | Video (26:50 minutes) 🔗

Learn what’s new in Flutter since the 2.0 release, including updates to Dart, Flutter, tooling, and our ecosystem.

Resources:

Watch more:

Subscribe to Flutter! → https://goo.gle/FlutterYT