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.

Matching moments

Navigating the growing complexity of modern CSS
09:00 MIN

Navigating the growing complexity of modern CSS

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The challenge of keeping up with modern CSS
07:46 MIN

The challenge of keeping up with modern CSS

WeAreDevelopers LIVE – AI, Freelancing, Keeping Up with Tech and More

Making accessibility tooling actionable and encouraging
03:58 MIN

Making accessibility tooling actionable and encouraging

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Improving the developer feedback loop with specialized tools
03:16 MIN

Improving the developer feedback loop with specialized tools

Developer Time Is Valuable - Use the Right Tools - Kilian Valkhof

Building collaborative design tools and the neo-brutalism trend
03:05 MIN

Building collaborative design tools and the neo-brutalism trend

Slopquatting, API Keys, Fun with Fonts, Recruiters vs AI and more - The Best of LIVE 2025 - Part 2

Why you might not need JavaScript for everything
02:33 MIN

Why you might not need JavaScript for everything

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The value of progressive enhancement and semantic HTML
03:31 MIN

The value of progressive enhancement and semantic HTML

WeAreDevelopers LIVE – You Don’t Need JavaScript, Modern CSS and More

The only frontend stack that truly matters
11:10 MIN

The only frontend stack that truly matters

WeAreDevelopers LIVE – Frontend Inspirations, Web Standards and more

Featured Partners

Related Videos

See all videos
Writing truly cross plattform applications using flutter29:36

Writing truly cross plattform applications using flutter

Simon Auer

Intro to Flutter Development48:32

Intro to Flutter Development

Mira Jago

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

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

Is Flutter ready for the web yet? - A live coding comparison between Flutter and React43:02

Is Flutter ready for the web yet? - A live coding comparison between Flutter and React

Marcus Wojtusik & Thomas Hinterwimmer

Related Articles

View all articles
DC
Daniel Cranney
Web Developer Portfolio Inspiration and Examples - March 2025
Every developer needs a portfolio… of some sort. Whether it’s an all-singing all-dancing portfolio page, a blog, or a simple links page, it’s important to let others know what you have done, what you can do, and how they can contact you. A portfolio ...
Web Developer Portfolio Inspiration and Examples - March 2025
AL
Anna Leushchenko
Basic And Advanced Networking in Dart and Flutter
Most applications, be it mobile, web, or desktop, depend on some kind of backend. Thus, an API layer is an integral part of application implementation.This six-part series presents tools and approaches that facilitate API layer implementation in Flut...
Basic And Advanced Networking in Dart and Flutter

From learning to earning

Jobs that call for the skills explored in this talk.