Блог

Главная - Вопросы по программированию - Флаттер — Переключение изображений в зависимости от темы

Флаттер — Переключение изображений в зависимости от темы

#flutter #responsive-design #darkmode

Вопрос:

Здравствуйте, у меня возникли проблемы с изменением логотипа в зависимости от темы. В темной теме я не вижу черных контуров своего логотипа, в то время как я могу видеть его на белом фоне в режиме светлой темы.

Вот основная строка кода.dart:

   @override
  Widget build(BuildContext context) {
    return LayoutBuilder(builder: (context, constraints) {
      return OrientationBuilder(builder: (context, orientation) {
        SizeConfig().init(constraints, orientation);
        return MaterialApp(
          debugShowCheckedModeBanner: false,
          themeMode: ThemeMode.system,
          theme: AppTheme.lightTheme,
          darkTheme: AppTheme.darkTheme,

Тема, настроенная в отдельном файле темы:

     static final lightTheme = ThemeData(
    scaffoldBackgroundColor: AppTheme.lightBackground,
    brightness: Brightness.light,
    primaryColor: blackText,
  );

  static final darkTheme = ThemeData(
    scaffoldBackgroundColor: AppTheme.darkBackground,
    brightness: Brightness.dark,
    primaryColor: whiteText,
  );

Вот код, в котором я хочу переключаться между версией изображения в темном и светлом режимах (2 разных файла ресурсов).:

 InkWell(
            onTap: () {},
            child: CircularPercentIndicator(
                radius: 27 * SizeConfig.heightMultiplier, //250.0,
                lineWidth: 1.62 * SizeConfig.heightMultiplier, //15.0,
                percent: 1.0,
                animation: true,
                animationDuration: 8000,
                center: Padding(
                  padding: EdgeInsets.all(
                    5.4 * SizeConfig.heightMultiplier,
                  ), //50.0),
                  child: new SvgPicture.asset(Res.logoClear),
                ),
                progressColor: AppTheme.green,
                backgroundColor: AppTheme.lightGrey),
          )

Изображение («Логоклир») в центре кругового виджета PercentageView.
logoClear-это строка константы, связанная с путем к файлу изображения в другом .файл для дротиков

Ответ №1:

Если вы хотите динамически изменять путь к активу, вы можете проверить тему следующим образом

 var brightness = MediaQuery.of(context).platformBrightness;
bool darkModeOn = brightness == Brightness.dark;

и в зависимости от результата передайте строковый путь следующим образом

     SvgPicture.asset((darkModeOn)
      ? 'your_path_for_dark_theme'
      :'your_path_for_light_theme),

и вы можете сделать то же самое для цвета прогресса и цвета фона, возвращая разное значение в зависимости от текущей темы

Метки: