Flutter Vikings - Day 1

This year I have the priviledge of attending Flutter Vikings, the big european conference about Dart and Flutter.

Before I start talking about the great talks I have seen on Day 1, let me say that Flutter team teased a new Flutter version the day before the event : Flutter 3.3. Here is the announcement and here is the changelog. This newest version aims at stabilizing Flutter 3 with lot of useful fixes and a few small features too. Oh and as always, a major Flutter update comes with a Dart update too, today we get Dart 2.18, with no outstanding news thought.

Now let's jump to the subject : Flutter Vikings Day 1 !

Deep dive into Flutter theming

In this very first talk, Mike Rydstron presented various theme related concepts.

He started by presenting how to use ThemeData the right way as there are like 8 different ways to declare colors... ThemeData(), ThemeData.from(), ColorScheme(), ColorScheme.fromSeed(),... Curiously, they don't all work in the same way and some of them might miss a few colors that you then have to fix manually.
The talk continued with the current state of Material 3 and where it stands compared to Material 2.

In the second half of the talk, Mike showed how to create beautiful color schemes and presented a few packages and methods he developed, for example flex_color_scheme to add more flexibility to how color schemes currently work in Flutter Material 3 implementation.

The talk was ended with a demonstration of Theme Playground, a very nice application to play and generate theme related code!

Fun with code generation

Anna Leucshenko gave a great talk on how to use code generation with build_runner package to write less boilerplate code. In this talk she used two applications to compare how code generation can simplify an app code. She went through quite a lot of packages which are :

• freezed to generate models with constructors, equals, hash code, copyWith and other awesome features such as pattern matching
• json_serializable to generate toJson() and fromJson() methods
• retrofit for REST APIs
• auto_route for Flutter navigation
• flutter_gen for assets linking (making images accessible through constants instead of specifying a path)
• injectable to use effective dependency injection with get_it
• i69n for localizations
• bdd_widget_test to write behavior driven tests using Gherkin

You should definitely check this talk and the packages if you want to learn more about code generation

Flutter At Scale - Experience From 25+ Flutter Devs Working Together On A Mobile Banking App

This talk was a very interesting feedback of two developers working on a large team of 25 Flutter devs and an overall 200 people team. In such project you need to be pretty organized in order for your codebase not to become a real mess.

The speakers led us to various ways of dealing with big projects. Code ownership was the first subject as you need to have people responsible for every piece of code and you cannot just say that the team is responsible for everything.
The following points were focusing on the project structure and architecture : organizing the files by feature, having a robust design system, using atomic design to separate the widgets.

At the end they presented their storybook, a very nice way of showing every component in their different states (e.g. a button that might be enable / disable, hover, etc)

Responsive UI for auth flows

In this talk Salih Guler from AWS Amplify introduced concepts that revolve around adaptative and responsive layouts. The first part of the talk was to explain the difference between those two terms : adaptive is more about adapting the layout, e.g. the small burger menu becoming a left pane on bigger devices, whereas responsive is more about making everything fit within the available space, depending on screen size.

The second and biggest part of the talk was a very nice live coding where he demonstrated a lot of useful widgets :

• LayoutBuilder
• Media Query.of()
• FractionnallySizedBox
• OrientationBuilder
• FittedBox
• AspectRatio
• CustomMultiChildLayout

And of course the more obvious and known ones such as Row, Column, Flexible, Expanded and so on.

Understanding Flutter's handling of gestures

Guillaume Diallo-Mulliez explained in plain details how the gesture detection and handling work in Flutter, and how we should do if we ever wanted to implement our own custom gesture detection or gesture listening.

This talk is a bit hard to transcribe because it was really technical but Guillaume talked about GestureDetector, RawGestureDetectore, pointers and PointerEvent, gesture Listener, hit tests and so on.

If you are interested I can only encourage you to watch the replay as it will be much more valuable than a text transcription!

Riverpod 2.0

Last but not least, Rémi Rousselet - famous author of freezed, provider and riverpod packages - gave us a few hints about what Riverpod 2.0 (one of the most-used state management library out there) could look like in, hopefully, the near future! New state inspector in DevTools for Riverpod, custom linter, new documentation generator with a sweet dependency graph,... Many awesome features!

But then we had the main and best part of the talk where Rémi did an awesome live coding session showing a potential future step-by-step tutorial for Riverpod using new annotations to infer providers type and simplify overall use of Riverpod for beginners.

Hopefully it will be available on pub.dev soon because it looked great 🔥

Anyway, that sums up this awesome first day of Flutter Vikings 2022, see you tomorrow for part 2!