Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

"primaryColor" property in "ThemeData" does not work in Flutter

Tags:

flutter

dart

I'm currently investigating how to use ThemeData in the Flutter application. It should work with the code below, but the color theme doesn't apply as expected.

Curiously, using the "primarySwatch" option instead of the "primaryColor" option applies the theme as expected.

The execution environment is Chrome on Windows10. Neither has a dark theme applied. In addition, the results were the same in the Android11 environment of the real machine and the virtual environment.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.purple), // This "primaryColor" option does not working.
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Test App'),
        ),
        body: Container(),
      ),
    );
  }
}

Below is my flutter environments.

Flutter 2.5.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision ffb2ecea52 (5 days ago) • 2021-09-17 15:26:33 -0400
Engine • revision b3af521a05
Tools • Dart 2.14.2

What did I make a mistake in the code?

Thanks for your help.

like image 643
smd Avatar asked Sep 23 '21 06:09

smd


People also ask

What is primaryColor in flutter?

Color primaryColor. The background color for major parts of the app (toolbars, tab bars, etc)

How do I change the default blue color on flutter?

Step 1: Locate the MaterialApp widget. Step 2: Inside the MaterialApp, add the theme parameter with ThemeData class assigned. Step 3: Inside the ThemeData add the textTheme parameter and then assign the Theme. of(context).

What is the difference between primaryColor and primarySwatch in flutter?

primarySwatch is not a Color . It's MaterialColor . Which means it's different shades of a color a material app will use. primaryColor is one of those shades.


1 Answers

With the newest versions of Flutter, it's correct that primaryColor and accentColor inside ThemeData do not work. Instead, you should use the new colorScheme property of the ThemeData.

ThemeData(colorScheme: ColorScheme(
  primary: Colors.blue,
  primaryVariant: Colors.red,
  secondary: Colors.green,
  // all fields should have a value
));

See the reference here.

To know what values to pick for the variants etc., take a look at the Material design specification.

like image 168
fravolt Avatar answered Nov 11 '22 01:11

fravolt