Flutter Question posted in
The official Flutter documentation can be found here.

How to get primary color from the theme of a flutter app

I have a problem with theming a flutter app. I cannot get the primary color from of the theme. Here is the example code

import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Colors.blue,
          secondary: Colors.amber,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: const ColorScheme.dark(
          primary: Colors.grey,
          secondary: Colors.white,
        ),
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 200,
            width: 200,
            child: Container(
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
      ),
    );
  }
}

I want the container to have the primary color of the theme which is blue in light mode and grey in dark mode. But It always shows purple color in both light and dark mode

Light Mode

enter image description here

Dark Mode

enter image description here

I have tried different solution many times. But result is same. I am new to flutter. I hope a kind reply.
Thank you.

Tags:

2

Answers


  1. 0

    pasanmaduranga, Well done on starting!

    Try to first centralize your themeData in a seperate file and just calling that. You can use a class with static variables.

    Centralizing texts (strings), colors, and theme data makes it easier to edit in the long run of the project or program.

    theme.dart file:

    class AppTheme {
    /// Customize as needed
    /* --- Light Theme ---*/
    static ThemeData ligthTheme = ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        primaryColor: Colors.blue,
        )

    /* --- Dark Theme ---*/
    static ThemeData darkTheme  = ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        primaryColor: Colors.grey,
    )
}

    Usage:

    import 'package:flutter/material.dart';
import 'theme.dart'; /// Import the theme file

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: AppTheme.lightTheme, /// Assign Light Theme
      darkTheme: AppTheme.darkTheme, /// Assign Dark Theme
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 200,
            width: 200,
            child: Container(
              color: Theme.of(context).colorScheme.primary,
            ),
          ),
        ),
      ),
    );
  }
}

    Back to your question:

    You were close by using the Theme.of(context), as Theme.of(context) allows you to access the currently active theme on the app by the Buildcontext, context.

    You just need to use:

    Theme.of(context).primaryColor

    It will retrieve the current primary color available in the themeData based on the context.

    Meaning, if its lightmode, it will return the light mode’s primary color and vice versa.

    So in your case:

    import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Colors.blue,
          secondary: Colors.amber,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: const ColorScheme.dark(
          primary: Colors.grey,
          secondary: Colors.white,
        ),
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      home: Scaffold(
        body: Center(
          child: SizedBox(
            height: 200,
            width: 200,
            child: Container(
              color: Theme.of(context).primaryColor, /// Changed to .primaryColor
            ),
          ),
        ),
      ),
    );
  }
}

    Happy coding pasanmaduranga!!!

    Login or Signup to reply.
  2. 0

    modify to this for most simple

    import 'package:flutter/material.dart';

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

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

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: const ColorScheme.light(
          primary: Colors.blue,
          secondary: Colors.amber,
          primaryContainer: Colors.blue,
        ),
        useMaterial3: true,
      ),
      darkTheme: ThemeData(
        colorScheme: const ColorScheme.dark(
          primary: Colors.grey,
          secondary: Colors.white,
        ),
        useMaterial3: true,
      ),
      themeMode: ThemeMode.system,
      home: Scaffold(
        body: Builder(builder: (context) {
          return Center(
            child: SizedBox(
              height: 200,
              width: 200,
              child: Container(
                color: Theme.of(context).colorScheme.primary,
              ),
            ),
          );
        }),
      ),
    );
  }
}

    the context is not yet aware of the changes in theme

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search