flutter 如何根据应用程序的主题更改文本颜色?

0aydgbwb  于 2023-02-25  发布在  Flutter
关注(0)|答案(1)|浏览(169)

我目前正在探索flutter。在这里,我正在使用news API制作一个新闻应用程序。我使用的是bloc而不是有状态的小部件。我有三个屏幕用于新闻分类。dark主题的问题是,我制作了一个按钮用于在主题之间切换,但列表中每个项目的标题文本并没有相应地切换。然而,如果我在屏幕之间切换,改变状态,文本的颜色设置正确-在亮模式下为黑色,在暗模式下为白色-
link for the project I'm learning from

主要

themeMode: AppCubit.get(context).isDark ? ThemeMode.dark : ThemeMode.light,

黑暗主题

textTheme: TextTheme(
                    bodyText1: TextStyle(
                      fontSize: 18.0,
                      fontWeight: FontWeight.bold,
                      color: Colors.white,
                    ),
                  ),

灯光主题改为黑色。更改模式的功能

bool isDark = false;
  void changeMode () {
  isDark = !isDark;
  print(isDark.toString());
  emit(NewsThemeModeChanged());
}

暗模式按钮

IconButton(
                    onPressed: () {
                      AppCubit.get(context).changeMode();
                    },
                    icon: Icon (Icons.brightness_2),
                ),

每个新闻项目构建器

Widget buildNewsItem (dynamic article, BuildContext context) => Padding(
  padding: const EdgeInsets.all(18.0),
  child: Row(
    children: [
      Container(
        width: 120.0,
        height: 120.0,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          image: DecorationImage(
            image: NetworkImage(
              '${article['urlToImage']}',
            ),
            fit: BoxFit.cover,
          ),
        ),
      ),
      SizedBox(
        width: 10.0,
      ),
      Expanded(
        child: Container(
          height: 120.0,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: Text(
                  '${article['title']}',
                  style: Theme.of(context).textTheme.bodyText1,
                  maxLines: 3,
                  overflow: TextOverflow.ellipsis,
                ),
              ),
              Text(
                '${article['author']}',
                style: TextStyle(
                  fontSize: 15.0,
                  fontWeight: FontWeight.bold,
                  color: Colors.grey,
                ),
                maxLines: 1,
                overflow: TextOverflow.ellipsis,
              ),
            ],
          ),
        ),
      ),
    ],
  ),
);

第一个屏幕

class BusinessScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer <NewsCubit, NewsStates>(
      listener: (context, state) {},
      builder: (context, state)
      {
        var list = NewsCubit.get(context).business;
        return ConditionalBuilder(
            condition: list.isNotEmpty,
            builder: (context) => Scaffold(
              body: ListView.separated(
                  itemBuilder: (context, index) => buildNewsItem(list[index], context),
                  separatorBuilder: (context, index) => buildListSeparator(),
                  itemCount: 15,
              ),
            ),
            fallback: (context)=>Center(child: CircularProgressIndicator()),
        );
      },
    );
  }
}
tcomlyy6

tcomlyy61#

试试这些方法
1.更改BlocConsumer上下文

BlocConsumer <NewsCubit, NewsStates>(
      listener: (context, state) {},
      builder: (conContext, state)

将该上下文传递给buildsNewItem,

buildNewsItem(list[index], conontext),

1.更改此条件生成器上下文

ConditionalBuilder(builder:(_){})

相关问题