Andrés Escobar

Flutter Theme: All with less code

What if you could write a complete Flutter theme extension in just four lines of code? Learn how to eliminate boilerplate and create scalable, maintainable themes.

Flutter Theme: All with less code
#1about 1 minute

A strategy for writing less theme code in Flutter

An overview of the challenges with verbose theme extensions and a plan to use a package and specific tips to reduce boilerplate code.

#2about 1 minute

The boilerplate problem with manual theme extensions

Manually creating ThemeData extensions requires implementing methods like copyWith and lerp, leading to verbose and messy code as properties increase.

#3about 2 minutes

Generating theme extensions with the theme_tailor package

The theme_tailor package uses code generation with the @Tailored annotation to automatically create theme extensions, drastically reducing manual boilerplate.

#4about 1 minute

Managing colors consistently with enhanced color schemes

Enhance the built-in ColorScheme.light and ColorScheme.dark instead of creating custom color properties to maintain consistency with Material Design.

#5about 2 minutes

Sharing styles across themes with a common extension

To avoid duplicating component styles in light and dark themes, create a separate file with a common theme data extension that can be applied to both.

#6about 1 minute

Applying the final structured themes to your app

The final step involves assigning the fully constructed light and dark themes to the theme and darkTheme properties of the MaterialApp widget for automatic switching.

Related jobs
Jobs that call for the skills explored in this talk.

Angular Developer

Picnic Technologies B.V.
Amsterdam, Netherlands

Intermediate
Senior

Featured Partners

Related Videos

Migration to declarative UI in Android development31:41

Migration to declarative UI in Android development

Crístian Viana

Writing truly cross plattform applications using flutter29:36

Writing truly cross plattform applications using flutter

Simon Auer

Using Serious Tech for a Silly Game - How to Build an MVP with Flutter28:58

Using Serious Tech for a Silly Game - How to Build an MVP with Flutter

Sylvia Dieckmann

Intro to Flutter Development48:32

Intro to Flutter Development

Mira Jago

Dart - a language believed dead, experiences a new bloom1:00:14

Dart - a language believed dead, experiences a new bloom

Christoph Menzel

Level up your Angular CSS with Tailwind CSS31:41

Level up your Angular CSS with Tailwind CSS

Patricio Vargas

Dart - a language believed dead, experiences a new bloom25:13

Dart - a language believed dead, experiences a new bloom

Christoph Menzel

Level up your Angular CSS with Tailwind CSS47:46

Level up your Angular CSS with Tailwind CSS

Patricio Vargas

From learning to earning

Jobs that call for the skills explored in this talk.