应用中切换深色主题和暗色主题是比较常见的操作，今天我们就来学习一下Flutter中动态的切换主题。
Simple Theme
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
bool isLight = true;
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(
textTheme: TextTheme(bodyText2: TextStyle(fontSize: 20, color: Colors.red)),
),
darkTheme: ThemeData.dark().copyWith(
textTheme: TextTheme(bodyText2: TextStyle(fontSize: 20, color: Colors.blue)),
),
themeMode: isLight ? ThemeMode.light : ThemeMode.dark,
home: Scaffold(
appBar: AppBar(
title: Text("Theme"),
centerTitle: true,
actions: <Widget>[
IconButton(icon: Icon(Icons.repeat), onPressed: () => setState(() => isLight = !isLight)),
],
),
body: Center(child: Text("Hello World")),
),
);
}
}
这样我们可以通过点击Button来实现主题的动态切换，但是一旦我们重启应用，主题就会还原成深色。我们需要在切换主题的时候，保存我们现在的主题。可以使用shared_preferences库，以下是实现思路。
Save config in SharedPreference
add package denpendency
shared_preferences: ^0.5.7+3
final code
import 'package:flutter/material.dart';
import 'package:shared_preferences/shared_preferences.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
SharedPreferences preferences = await SharedPreferences.getInstance();
final isLight = preferences.getBool("isLight") ?? true;
runApp(MyApp(isLight));
}
class MyApp extends StatefulWidget {
final bool isLight;
MyApp(this.isLight);
@override
_MyAppState createState() => _MyAppState(isLight);
}
class _MyAppState extends State<MyApp> {
bool isLight;
_MyAppState(this.isLight);
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light().copyWith(
textTheme: TextTheme(bodyText2: TextStyle(fontSize: 20, color: Colors.red)),
),
darkTheme: ThemeData.dark().copyWith(
textTheme: TextTheme(bodyText2: TextStyle(fontSize: 20, color: Colors.blue)),
),
themeMode: isLight ? ThemeMode.light : ThemeMode.dark,
home: Scaffold(
appBar: AppBar(
title: Text("Theme"),
centerTitle: true,
actions: <Widget>[
IconButton(
icon: Icon(Icons.repeat),
onPressed: () async {
setState(() => isLight = !isLight);
SharedPreferences preferences = await SharedPreferences.getInstance();
preferences.setBool("isLight", isLight);
},
)
],
),
body: Center( child: Text("Hello World")),
),
);
}
}
Reference
video: https://v.youku.com/v_show/id_XNDczMTYyMDE4NA==.html
