DartPad Workshops from Flutter GDEs
Dartpad Workshop UI is a new feature for DartPad that displays step-by-step Flutter/Dart tutorials. Flutter Google Developer Experts created various workshops on DartPad Workshop UI, to help you learn deep dive Flutter topics.
To show you how it works, we’ve compiled a list of a few awesome workshops created by Flutter GDEs. Give them a try and let us know what you think! 😄
Writing code as a mathematician
Created by Oleksandr Leushchenko
In math, functions always provide the same output for a given input and have no side effects. Devs may also benefit from these universal concepts. In this workshop, we’ll shift imperative logic to declarative and learn some FP patterns in Dart.
Check out the workshop.
Creating a keyboard oriented puzzle game for Flutter
Created by Muhammed Salih Güler
Flutter supports Desktop, Web and Mobile. How to use keyboard to serve your application while taking advantage of the muscle memory of the users is an important topic for users. With this workshop, you will be learning about how you can have app level and local keyboard shortcuts and how you can use them to have a great game for your users.
Check out the workshop.
Learning Flutter for native iOS developers
Created by Vandad Nahavandipoor
SwiftUI has brought iOS development to a good level, closer to Flutter, but Apple’s decision to have the iOS SDK available only on macOS limits the reach of SwiftUI. In that way Flutter is a lot more flexible. In this workshop I will present Dart and Flutter to those who are familiar with native iOS development and compare the features of Dart and Flutter to those of Swift and SwiftUI. The goal of this workshop is to help you start learning Flutter as a native iOS developer.
Check out the workshop.
Handling errors gracefully
Created by Majid Hajian
Errors can happen anytime in any application. Showing proper messages to your app users will significantly boost their experiences, but how can you do that? In this workshop, we are going beyond try/catch and will handle errors by creating our customer failure class as well as a widget and we will show proper messages based on the received messages.
Check out the workshop.
Implicit animations in Flutter
Created by Paulina Szklarska
Animations are an important part of every application’s look and feel. However, creating them can be sometimes overwhelming. Luckily, Flutter offers a set of widgets that allow to animate properties of the most common widgets in a simple way! In this workshop, you’re going to learn how to modify your existing widgets to convert them into animated widgets.
Check out the workshop.
Add type-safety to Firestore queries with converters
Created by Mais Alheraki
Firestore is a NoSQL database provided by Firebase. It’s one of the most popular choices with Flutter. By default, Firestore document references manipulate a Map<String, dynamic> object. Accessing any field in the Map is not type-safe, we need to make sure a field has the correct type before using its value. In this workshop, we will learn about Firestore converters, and how to use them to make our apps more type-safe.
Check out the workshop.
A beginners guide to Futures
Created by Dane Mackier
Futures are a very commonly used type in Dart and Flutter. Knowing how to use them can speed up your development and help you build more advanced systems. In this workshop we will go over how to use Futures, what to use them for, how to handle their errors and much more.
Check out the workshop.
Implement a LazyIndexedStack
Created by Alex Li
IndexedStack hosts a list of widgets and switches the display between them, but it’ll initialize all widgets at the same time at first. A LazyIndexedStack will initialize each widget when they are actually needed to display, which can save layout costs.
Check out the workshop.
Portfolio app using Flutter Web
Created by Renuka Kelkar
IndexedStack hosts a list of widgets and switches the display between them, but it’ll initialize all widgets at the same time at first. A LazyIndexedStack will initialize each widget when they are actually needed to display, which can save layout costs.
Check out the workshop.
Consistent design with Flutter Theme
Created by Anna Leushchenko
Consistency is a winning strategy for a good application UI. And Flutter developers don’t have to be professional designers to achieve it. As usual, there is a widget for that — Theme! Find more details about effortless consistent Flutter application design in this workshop.
Check out the workshop.
Responsive UIs in Flutter: Creating Fluid User Interfaces
Created by Roman Jaquez
Flutter is a portable language: it can render on Mobile, Desktop, Web — even embedded. But portability goes beyond its cross-platform capabilities. You should strive to make your apps adjust to the multiple screens in which your users will consume your app. In this workshop you’ll learn how to take advantage of the responsive capabilities available in Flutter and make your Flutter apps adapt to the screens in which they render, and create fluid, responsive experience that will delight your users, regardless of the platform, screen size, orientation, etc.
Check out the workshop.
Segmented state pattern with flutter_bloc
Created by Mangirdas Kazlauskas
Flutter is a portable language: it can render on Mobile, Desktop, Web — even embedded. But portability goes beyond its cross-platform capabilities. You should strive to make your apps adjust to the multiple screens in which your users will consume your app. In this workshop you’ll learn how to take advantage of the responsive capabilities available in Flutter and make your Flutter apps adapt to the screens in which they render, and create fluid, responsive experience that will delight your users, regardless of the platform, screen size, orientation, etc.
Check out the workshop.
Journey from mobile to Web/Desktop
Created by Aleksandr Denisov
Web/desktop apps are different from Mobile because keyboard and mouse control is different from tapping on the screen. Let’s remake a mobile app into a web/desktop one, and figure out how to properly manage focus and what a hover effect is.
Check out the workshop.
Writing reactive code with Flutter
Created by Pooja Bhaumik
Reactive programming can help build highly reactive and responsive apps that are more data-oriented. You change data in one part of the application, and it should reflect to all the other parts of the application that depend on it and react to the change automatically. We will discover various ways we can use to build such reactive applications in Flutter, including in-built Streams, ValueNotifiers, but also explore community build reactive solutions like Riverpod.
Check out the workshop.
Extension Method
Created by Bhavik Makwana
Extension method allows us to add new functionality to already available libraries. It does not allow us to modify existing code directly but gives us the ability to customize a class in a way that we can use easily.
Check out the workshop.
