如何在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,),
),
);
}
}

我正在使用flutter，并试图设置主题数据，但它不起作用。我试着用这种方式改变主题，但我在我的应用程序中看不到结果，我不知道问题出在哪里，有人能帮我吗
stackoverflow想让我多解释一下，但我没有其他事情要解释，提前谢谢！

Answer 1

Theme.of(context).primaryColor中使用的上下文不是正确的上下文。您需要将MaterialApp放在包装当前小部件的另一个小部件中，例如

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(),
);
}
}

以及_NavigationBarState:的build方法

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

Answer 2

在努力理解材料设计之后，我找到了以下简单明了的解决方案。这是我的完整代码。

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),
);

主题。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(),
);
}
}

如果您采用这种方法，那么就不需要在每个小部件中定义颜色。只需更改配色方案，flutter就会根据浅色主题和深色主题自动更改颜色。

我不添加textTheme自定义代码，但您可以在theme.dart文件中添加。

希望这能帮助到别人。