CODEWITHSUNDEEP
flutterdart
smd
smd

Reputation: 133

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

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.

Upvotes: 11

Views: 10294

Answers (6)

Rohit Sharma
Rohit Sharma

Reputation: 167

use

theme: ThemeData(
      colorScheme: ColorScheme.fromSwatch(primarySwatch: Colors.amber),
  )

Upvotes: 1

Elsayed Nasser
Elsayed Nasser

Reputation: 1

Still not working but I used appBarTheme to change the appbar color

return MaterialApp(
  debugShowCheckedModeBanner: false,
  theme: ThemeData(
  //primaryColor: const Color(0xFF0A0E21),// not working
    scaffoldBackgroundColor: Color(0xFF0A0E21),
   appBarTheme: AppBarTheme(
    backgroundColor: Color(0xFF0A0E21),),
    textTheme: const TextTheme(
  bodyText2: TextStyle(color: Colors.white)

    ),
  ),

Upvotes: 0

binHussein
binHussein

Reputation: 11

MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: Color(0xFF090C22), // for scaffold background
        colorScheme: ColorScheme.light().copyWith( // to use the primaryColor
          primary: Colors.red,
        ),
      ),
    );

Upvotes: 0

codegood
codegood

Reputation: 29

I don't think everything is deprecated like :

scaffoldBackgroundColor: Color(0x0FF0A0E21),    // just an example 
// works perfectly.

This color is applied to the body part.

Upvotes: 0

fravolt
fravolt

Reputation: 3001

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.

Upvotes: 13

Muhammad Arbaz Zafar
Muhammad Arbaz Zafar

Reputation: 661

the best way to set the theme to make it sperate file of theme and call in main file and the primary color is working for me theme: ThemeData(), like that you can also set theme of your icon and also you can set theme of your text.

import 'package:flutter/material.dart';
    ThemeData appthemedata(BuildContext context)
    {
      return ThemeData(
        primaryColor:appcolor,
        // scaffoldBackgroundColor: Colors.white,
        appBarTheme: AppBarTheme(
            centerTitle: true,
            elevation: 0,
            textTheme: TextTheme(headline1: AppBarTextStyle )
        ),
        textTheme: TextTheme(
    
          headline1: TitleTextStyle,
          bodyText1:Body1TextStyle,
        ),
        iconTheme: IconThemeData(
          color:Colors.white,
          size: 17,
        ),
      );
    }

Upvotes: 0

Related Questions