How to change the text color according to the theme of the app?

Question

I'm currently exploring flutter. here, I'm making a news app using news API. I'm using bloc not stateful widgets. I have three screens for news categories. The problem in the dark theme, I made a button to switch between themes, but the text used for the titles for each item in the list doesn't switch accordingly. however, If I switch between screens changing states the color of the text is set right - black in the light mode and white in the dark one -

link for the project I'm learning from

Main

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

DARK THEME

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

the light theme has a black color instead. FUNCTION TO CHANGE THE MODE

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

DARK MODE BUTTON

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

EACH NEWS ITEM BUILDER

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

FIRST SCREEN

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

Answer 1

Try these methods

1. change the BlocConsumer context

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

pass this context to buildsNewItem,

buildNewsItem(list[index], conontext),

2. change this ConditionalBuilder context

ConditionalBuilder(builder:(_){})