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

Changing background color using ColorScheme in ThemeData in Flutter

How to change background color according to system background using ColorScheme in ThemeData in flutter?

I expect to change background color according to background of system. I know there are other ways. But I want if it is possible to do this using ColorScheme in ThemeData

Tags:

2

Answers


  1. 0

    The Material Design team has provided a package to create color schemes based on the platform’s implementation of dynamic color, which is called dynamic_color.

    It comes with DynamicColorBuilder which provides a light and dark ColorScheme based on the system’s color implementation (which is wallpaper color for Android).

    To use it, simply add the package using the flutter pub add dynamic_color command, import the pacakge in your Dart file, and use the builder:

    import 'package:dynamic_color/dynamic_color.dart';

// ...

DynamicColorBuilder(
  builder: (ColorScheme? lightDynamic, ColorScheme? darkDynamic) {
    // ...
  }
),
    Login or Signup to reply.
  2. 0 
        explanation:
    - firstly create systemBrightness object initialized by MediaQuery.platformBrightnessOf(context); -> it accept System Brightness.
    - now in ColorScheme.fromSeed() assign systemBrightness to brightness property.
    - when you can switch light theme to dark theme / dark theme to light theme  then it see background color changes successfully
    
    code: 
    Brightness systemBrightness = MediaQuery.platformBrightnessOf(context);
    theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.teal, brightness: systemBrightness,),
        useMaterial3: true,
      ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search