Я хочу изменить тему на темную тему и вернуться к светлой теме с помощью этой кнопки:
IconButton(
icon: Icon(
Icons.brightness,
),
onPressed: () {
setState(() {
// Change to dark theme?
} else {
//Change it back to default light theme //How?
}
}
);
Main.dart
MaterialApp(
theme: ThemeData(
),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
first установлен в состояние в вашей материальной теме (может быть, вы определили, что это в основном классе)
import 'dart:async';
import 'package:flutter/material.dart';
StreamController<bool> setTheme = StreamController();
main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return StreamBuilder<bool>(
initialData: true,
stream: setTheme.stream,
builder: (context, snapshot) {
return MaterialApp(
theme: snapshot.data ? ThemeData.light() : ThemeData.dark(),
debugShowCheckedModeBanner: false,
home: Scaffold(
appBar: AppBar(title: Text("Your Theme")),
body: YourButtonPage()));/*Change this name with Your class*/
});
}
}
class YourButtonPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(16.0),
child: Center(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
IconButton(
icon: Icon(
Icons.brightness_low,
size: 21,
),
alignment: Alignment.center,
onPressed: () {
setTheme.add(true);
}),
IconButton(
icon: Icon(
Icons.brightness_1,
size: 21,
),
alignment: Alignment.center,
onPressed: () {
setTheme.add(false);
}),
])));
}
}
Вы можете использовать свойство themeMode, чтобы выбрать, какую тему использовать. Имеет три возможных значения:
Теперь вопрос в том, как его изменить при нажатии кнопки?
Плохой метод
Сохраните значение themeMode в переменной и используйте эту переменную вместо того, чтобы напрямую устанавливать themeMode. При нажатии кнопки измените состояние, например:
setState((){
themeModeVariable = ThemeMode.dark;
});
Почему это плохо? Допустим, ваша кнопка находится где-то еще, а не там, где находится MaterialApp. Чем глубже вы пойдете, тем больше проблем вы столкнетесь.
Хороший метод
Концепция все та же, но для решения этой проблемы вы используете решение для управления состоянием. Вы можете использовать Provider или BLoC или ReactiveX или Stacked или что-нибудь еще.
Я настоятельно рекомендую вам сначала изучить решение для управления состоянием. Проверьте официальную документацию на веб-сайте Flutter
