Theming #

Customize how your app looks

Color scheme #

The simplest way to give your app a custom look is by making a color scheme from a brand color.

See Use themes to share colors and font styles

import 'package:flutter/material.dart';

const brandColor = Colors.pink;

final theme = ThemeData.from(
    colorScheme: ColorScheme.fromSeed(
        seedColor: brandColor, brightness: Brightness.light));

final darkTheme = ThemeData.from(
    colorScheme: ColorScheme.fromSeed(
        seedColor: brandColor, brightness: Brightness.dark));

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: brandColor,
      theme: theme,
      darkTheme: darkTheme,
      home: Scaffold(
        appBar: AppBar(title: const Text("Theme demo")),
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              Text("Hello World"),
              ElevatedButton(onPressed: () {}, child: Text("ElevatedButton")),
              FilledButton(onPressed: () {}, child: Text("FilledButton")),
              OutlinedButton(onPressed: () {}, child: Text("OutlinedButton")),
              Switch(value: true, onChanged: (value) {}),
            ],
          ),
        ),
      ),
    );
  }
}

Use themes to share colors and font styles

Material Theme Builder #

You can also use Material Theme Builder if you want something a bit more fancy.

Pick your custom colors and hit “Export” -> “Flutter (Dart)” in top right corner.

Font #

Use a custom font can really help set your app apart.

You can find a huge selection on Google Fonts. Then follow the instructions on how to Use a custom font.

Launch Icon #

Tired of seeing the Flutter logo on your home screen for every app you make?

Flutter use different versions of the icon for different devices. You can use the Flutter Launcher Icons package to help change the icon for all device types.

Just do

flutter pub add dev:flutter_launcher_icons

Then add the following to pubspec.yaml:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "icon.png"

Place your icon at the given path. Then run:

flutter pub run flutter_launcher_icons

Here are a couple of free sites you can use to quickly generate a custom icon:

• Iconlab
• Canva icon maker
• Doericon
• IconKitchen

Let me know if you find other good sites.