изменение темы с помощью кнопки ввода во Flutter

avatar
sojinLee
1 июля 2021 в 16:10
43
3
0

Я сделал кнопку, и когда эта кнопка нажата, я хочу изменить цвет темы. Я пытаюсь изменить цвет на значение, полученное от кнопки, но это не работает.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    String themeColors=context.watch<DisplayList>().themeColor;
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primaryColor: Colors.${themeColors}, //How do I fix this part?
      ),

Или есть другой способ изменить цвет?

переменная themeColors уже содержит строку цвета, который нужно изменить.

Источник

Ответы (3)

avatar
BLKKKBVSIK
1 июля 2021 в 16:13
0

На Flutter не может быть такого синтаксиса: Colors.${themeColors}

Для обработки нескольких тем вам необходимо создать несколько тем ThemeData и переключать их с помощью ValueNotifier.

Я предлагаю вам использовать уже готовый пакет сообщества, такой как theme_provider, который поможет вам очень легко переключаться между темами.

avatar
Thea Choem
12 июля 2021 в 09:25
0

Вы можете использовать findAncestorStateOfType для управления состоянием корневого виджета.

class App extends StatefulWidget {
  const App({Key? key}) : super(key: key);

  static _AppState? of(BuildContext context) => context.findAncestorStateOfType<_AppState>();

  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  late bool isDarkMode;
  late ThemeModeStorage storage;

  void toggleDarkMode() {
    setState(() {
      isDarkMode = !isDarkMode;    
    });
    storage.writeBool(value: isDarkMode);
  }

  ...

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeConfig(isDarkMode).themeData,
      home: HomeScreen(),
    );
  }
}

Таким образом, вы можете вызывать это везде в своем приложении.

App.of(context)?.toggleDarkMode();
avatar
ibrahimxcool
1 июля 2021 в 16:20
0

Вам нужно преобразовать виджет в Stateful и использовать метод setState

class XYZ extends StatefulWidget {
  const XYZ({Key? key}) : super(key: key);

  @override
  _XYZState createState() => _XYZState();
}

class _XYZState extends State<XYZ> {
  var myAppBarThemeColor = Colors.red;
  @override
  Widget build(BuildContext context) {
    print(myAppBarThemeColor);
    return MaterialApp(
      theme: ThemeData(appBarTheme: AppBarTheme(backgroundColor: myAppBarThemeColor)),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Hello'),
        ),
        body: Center(
          child: TextButton(
            onPressed: () => setState(() => myAppBarThemeColor = Colors.green),
            child: Text('Change AppBar Color'),
          ),
        ),
      ),
    );
  }
}