Início / coding / Perguntas / 79561437
Accepted
abdollah
Asked: 2025-04-08 15:27:47 +0800 CST

Flutter define tema de uma lista

  • 772

Estou tentando adicionar uma lista de temas que o usuário pode escolher, aqui está minha lista

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

Vou mostrar uma lista e eles podem escolher uma que salvará um número como chosenTheme agora eu tenho um ThemeData como este

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

como posso definir isso como tema padrão de aplicativos em um provedor de temas?

flutter

1 respostas

  1. Best Answer

    Criar uma ThemeProviderclasse:

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

    Use ThemeProvidero Consumer dentro MyAppdo Widget e forneça themeData para 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(),
        );
      },
    );
  }
}

    Crie uma lista para atualizar o tema selecionado:

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

    Agora, sempre que o tema for atualizado pelo usuário, a árvore de widgets será atualizada com os novos dados do tema. Use SharedPreferencespara persistir o tema escolhido em ThemeProvider.

    • 1

relate perguntas