主页 / coding / 问题 / 79561437
Accepted
abdollah
Asked: 2025-04-08 15:27:47 +0800 CST

Flutter 从列表中设置主题

  • 772

我正在尝试添加一个主题列表，用户可以选择一个，这是我的列表

import 'package:flutter/material.dart';

class ThemeModel {
  final Color surface;
  final Color primary;
  final Color secondary;
  final Color onSurface;

  ThemeModel({
    required this.surface,
    required this.primary,
    required this.secondary,
    required this.onSurface,
  });
}

final List<ThemeModel> themes = [
  ThemeModel(
    surface: Color(0xFFF0EAD6),
    primary: Color(0xFF6C9A8B),
    secondary: Color(0xFFA67C52),
    onSurface: Color(0xFF3B3A36),
  ),
  ThemeModel(
    surface: Color(0xFFF5F5F5),
    primary: Color(0xFF6D6875),
    secondary: Color(0xFFFFB4A2),
    onSurface: Color(0xFF2D2D2D),
  ),
  ThemeModel(
    surface: Color(0xFFF0F8FF),
    primary: Color(0xFFA2C7E5),
    secondary: Color(0xFF89B0AE),
    onSurface: Color(0xFF2F3E46),
  ),
];

我将显示一个列表，他们可以选择一个可以保存数字的列表，例如 chosenTheme，现在我有一个像这样的 ThemeData

ThemeData myTheme = ThemeData(
  fontFamily: 'estedad',
  useMaterial3: true,
  //brightness: chosenTheme <= 2 ? Brightness.light : Brightness.dark,
  colorScheme:
      chosenTheme <= 2
          ? ColorScheme.light(
            surface: cards[chosenTheme].themes.surface,
            primary: cards[chosenTheme].themes.primary,
            secondary: cards[chosenTheme].themes.secondary,
            onSurface: cards[chosenTheme].themes.onSurface,
          )
          : ColorScheme.dark(
            surface: cards[chosenTheme].themes.surface,
            primary: cards[chosenTheme].themes.primary,
            secondary: cards[chosenTheme].themes.secondary,
            onSurface: cards[chosenTheme].themes.onSurface,
          ),
);

如何在主题提供程序中将其设置为应用程序默认主题？

flutter

1 个回答

  1. Best Answer

    创建一个ThemeProvider类：

    import 'package:provider/provider.dart';

class ThemeProvider with ChangeNotifier {
  int _chosenTheme = 0; // default theme

  int get chosenTheme => _chosenTheme;

  set chosenTheme(int value) {
    _chosenTheme = value;
    notifyListeners();
  }

  ThemeData get themeData {
    final theme = themes[_chosenTheme]; // import themes list

    return ThemeData(
      fontFamily: 'estedad',
      useMaterial3: true,
      colorScheme:
          _chosenTheme <= 2
              ? ColorScheme.light(
                surface: theme.surface,
                primary: theme.primary,
                secondary: theme.secondary,
                onSurface: theme.onSurface,
              )
              : ColorScheme.dark(
                surface: theme.surface,
                primary: theme.primary,
                secondary: theme.secondary,
                onSurface: theme.onSurface,
              ),
    );
  }
}

    在Widget中使用ThemeProvider的消费者MyApp并将 themeData 提供给MaterialApp：

    import 'package:flutter/material.dart';

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, themeProvider, _) {
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          title: 'Themed App',
          theme: themeProvider.themeData,
          home: const HomeScreen(),
        );
      },
    );
  }
}

    创建列表来更新选定的主题：

    class HomeScreen extends StatelessWidget {
  const HomeScreen({super.key});

  @override
  Widget build(BuildContext context) {
    final themeProvider = Provider.of<ThemeProvider>(context);

    return Scaffold(
      appBar: AppBar(title: const Text("Choose a Theme")),
      body: ListView.builder(
        itemCount: themes.length,
        itemBuilder: (context, index) {
          final theme = themes[index];
          return ListTile(
            title: Text("Theme ${index + 1}"),
            tileColor: theme.surface,
            textColor: theme.onSurface,
            onTap: () {
              themeProvider.chosenTheme = index;
            },
          );
        },
      ),
    );
  }
}

    现在，每当用户更新主题时，它都会使用新的 themeData 更新 Widget 树。用于SharedPreferences将 chosenTheme 持久化到 中ThemeProvider。

    • 1

相关问题