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.

Job ad Dark

SabIna compys

SabIna compys
Vienna, Austria

Remote
€20-100K
Intermediate
JavaScript
.NET
+1

Matching moments

Exploring the project structure and app theming
06:27 MIN

Exploring the project structure and app theming

Intro to Flutter Development

Understanding Flutter's core philosophy and features
04:37 MIN

Understanding Flutter's core philosophy and features

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

Exploring Flutter's widget-based architecture and Dart
02:15 MIN

Exploring Flutter's widget-based architecture and Dart

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

A brief introduction to the Flutter framework
04:25 MIN

A brief introduction to the Flutter framework

Flutter Packages and Plugins - A Look Under the Hood

Understanding Flutter's core concepts and the Dart language
07:20 MIN

Understanding Flutter's core concepts and the Dart language

Intro to Flutter Development

Best practices for building cross-platform Flutter apps
01:56 MIN

Best practices for building cross-platform Flutter apps

Writing truly cross plattform applications using flutter

Dart's history and its modern revival with Flutter
02:32 MIN

Dart's history and its modern revival with Flutter

Dart - a language believed dead, experiences a new bloom

Q&A on accessibility, responsiveness, and adoption
04:01 MIN

Q&A on accessibility, responsiveness, and adoption

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

Featured Partners

Related Videos

See all videos
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

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

Dart - a language believed dead, experiences a new bloom

Christoph Menzel

Intro to Flutter Development48:32

Intro to Flutter Development

Mira Jago

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
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
CH
Chris Heilmann
Dev Digest 125 - Duck and Cover
This issue was written live at the WeAreDevelopers World Congress in Berlin with us being incredibly busy, but this shouldn't mean you don't get some hot resources. News and ArticlesLet's start with AI news: Google and Microsoft consume more power th...
Dev Digest 125 - Duck and Cover
CH
Chris Heilmann
Dev Digest 134 - Where pixels sing?
News and ArticlesWeAreDevelopers LIVE Data and Security Day is on Wednesday, 25/09/2024. Learn about OPC UA Updates, Best Practices for Using GitHub Secrets, Passwordless Web 1.5, Emerging AI Security Risks, Data Privacy in LLMs and get a chance to t...
Dev Digest 134 - Where pixels sing?
AM
Ashutosh Mishra
17 Best VSCode Themes
Beautiful VSCode ThemesVisual Studio Code (VS Code) is a popular and powerful code editor that is widely used by developers around the world. One of the reasons for its popularity is its customisable interface, which allows users to change the appear...
17 Best VSCode Themes

From learning to earning

Jobs that call for the skills explored in this talk.