如何更改 flutter 中的主题数据？

Question

class _NavigationBarState extends State<NavigationBar> {
  int _currentIndex = 0;
  final List<Widget> tabs = [
    CustomerAccountPage(),
    HomePage(),
    AppInforamtionPage(),
    CategoriesPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.light().copyWith(
        primaryColor: Colors.amber,
        accentColor: Colors.black
      ),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          showUnselectedLabels: true,
            unselectedItemColor: Theme.of(context).primaryColor,
            selectedItemColor: Theme.of(context).accentColor,
            currentIndex: _currentIndex,
            items: [
              BottomNavigationBarItem(
                icon: Icon(Icons.home),
                title: Text("account"),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.play_for_work),
                title: Text("shop"),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.all_out),
                title: Text("more info "),
              ),
              BottomNavigationBarItem(
                icon: Icon(Icons.all_out),
                title: Text(" categories"),
              ),
            ],
            onTap: (index) {
              setState(() {
                _currentIndex = index;
              });
            }),
       
          ),
          centerTitle: true,
          backgroundColor: Colors.white,
        ),
        body: tabs[_currentIndex],
        floatingActionButton: FloatingActionButton(onPressed: null, backgroundColor: Theme.of(context).primaryColor,),
      ),
    );
  }
}

I'm using flutter, and trying to set the theme data, but it doesn't work. I tried to change the theme in this way, but I can't see the result in my app, I don't know what is the problem, can anyone help me!
stackoverflow want from me to explain more, but I haven't anything else to explain, thanks in advance!

Answer 1

The context used in Theme.of(context).primaryColor is not the right context. You need to put the MaterialApp in another widget wrapping the current widget, eg,

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light()
          .copyWith(primaryColor: Colors.amber, accentColor: Colors.black),
      home: NavigationBar(),
    );
  }
}

And the build method of the _NavigationBarState :

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
          showUnselectedLabels: true,
          unselectedItemColor: Theme.of(context).primaryColor,
          selectedItemColor: Theme.of(context).accentColor,
...

Answer 2

After trying very hard to understand Material Design, I found the following solution which is easy and clean. Here is my complete code.

color_scheme.dart

import 'package:flutter/material.dart';

const lightColorScheme = ColorScheme(
  brightness: Brightness.light,
  primary: Color(0xFF687DAF),
  onPrimary: Color(0xFFFFFFFF),
  secondary: Color(0xFFf37b67),
  onSecondary: Color(0xFFFFFFFF),
  error: Color(0xFFBA1A1A),
  onError: Color(0xFFFFFFFF),
  background: Color(0xFFFEFFFF),
  onBackground: Color(0xFF3b3b3b),
  surface: Color(0xFFFEFFFF),
  onSurface: Color(0xFF3b3b3b),
);

const darkColorScheme = ColorScheme(
  brightness: Brightness.dark,
  primary: Color(0xFFADC6FF),
  onPrimary: Color(0xFF002E69),
  secondary: Color(0xFFBBC6E4),
  onSecondary: Color(0xFF253048),
  error: Color(0xFFFFB4AB),
  onError: Color(0xFF690005),
  background: Color(0xFF1B1B1F),
  onBackground: Color(0xFFE3E2E6),
  surface: Color(0xFF1B1B1F),
  onSurface: Color(0xFFE3E2E6),
);

theme.dart

import 'package:first_project/shared/color_schemes.dart';

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';

final ThemeData lightThemeDataCustom = _buildLightTheme();

ThemeData _buildLightTheme() {
  final ThemeData base = ThemeData.light();
  return base.copyWith(
    colorScheme: lightColorScheme,
    primaryColor: lightColorScheme.primary,
    scaffoldBackgroundColor: lightColorScheme.background,
    textTheme: GoogleFonts.montserratTextTheme(ThemeData.light().textTheme),
  );
}

final ThemeData darkThemeDataCustom = _buildDarkTheme();

ThemeData _buildDarkTheme() {
  final ThemeData base = ThemeData.dark();
  return base.copyWith(
    colorScheme: darkColorScheme,
    primaryColor: darkColorScheme.primary,
    scaffoldBackgroundColor: darkColorScheme.background,
    textTheme: GoogleFonts.montserratTextTheme(ThemeData.dark().textTheme),
  );
}

main.dart

import 'package:first_project/shared/theme_two.dart';
import 'package:flutter/services.dart';

import '../screens/bottom_bar.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
        statusBarColor: Colors.transparent,
        statusBarIconBrightness: Brightness.dark));

    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: lightThemeDataCustom,
      darkTheme: darkThemeDataCustom,
      home: const BottomBar(),
    );
  }
}

If you follow this approach, then you don't need to define colors in each and every widget. Just change the color scheme, flutter will automatically change colors according to Light theme and Dark theme.

I do not add textTheme customization code but you can do it in theme.dart file.

Hope this will help someone.