Update view when cubit value changes

Question

I am working in a view where I can create, select and edit categories by name and color. For that I use a cubit. The cubit is used for lazy internationalization. I use 3 different files for that: A file container with bloc provider where the internationalization and the view are set, a file for the view and a file for the cubit. My cubit has the following states:

• InitCategoriesState
• LoadingCategoriesState
• LoadedCategoriesState
• AddCategoriesState
• AddingCategoriesState
• FatalErrorCategoriesState

So when the view opens it starts in InitCategoriesState and right after the cubit method reload is called:

void reload() async {
 emit(const LoadingCategoriesState());
 await Future.delayed(const Duration(seconds: 2)); // API not ready yet - just simulates a loading
 emit(LoadedCategoriesState(categories));
}

When I click on the add category button, a dialog needs to open for the category data to be added. So when the add category button is clicked, the method opensDialog is called which simply switches to the AddCategoriesState state.

void opensDialog() {
    emit(AddCategoriesState());
}

In the dialog I need to type a title and select a color for the category. If I try to create a category with no title or color, an error text should be displayed. For the text to be displayed I used a Visibility and created a boolean variable in the cubit. That way if the cubit variable is true the text is displayed. But that never works:

Visibility(
  child: const Text('You need to type a title', style: TextStyle(fontWeight: FontWeight.bold, color: redAlert),),
  visible: blocContext.read<CategoriesCubit>().isVisible,
),

...

TextButton(
   child: const Text("Ok"),
   onPressed: () {
     if (_titleController.text.isEmpty) {
       blocContext.read<CategoriesCubit>().isVisible = true;
     } else {
       blocContext.read<CategoriesCubit>().setColor();
       blocContext.read<CategoriesCubit>().addCategory(_titleController.text);
       Navigator.of(context).pop();
     }
   },
)

Below is the entire code for category

Categories Cubit

class CategoriesContainer extends BlocContainer {

  CategoriesContainer();
  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) {
        final cubit = CategoriesCubit();
        cubit.reload();
        return cubit;
      },
      child: I18NLoadingContainer(
        language: BlocProvider.of<CurrentLocaleCubit>(context).state,
        viewKey : "Categories",
        creator: (messages) => CategoriesView(CategoriesViewLazyI18N(messages)),
      ),
    );
  }
}

Categories Cubit

@immutable
abstract class CategoriesState {
  const CategoriesState();
}

@immutable
class InitCategoriesState extends CategoriesState {
  const InitCategoriesState();
}

@immutable
class LoadingCategoriesState extends CategoriesState {
  const LoadingCategoriesState();
}

@immutable
class LoadedCategoriesState extends CategoriesState {
  final List<Category> categories;
  const LoadedCategoriesState(this.categories);
}

@immutable
class AddCategoriesState extends CategoriesState {
  const AddCategoriesState();
}

@immutable
class AddingCategoriesState extends CategoriesState {
  const AddingCategoriesState();
}

@immutable
class FatalErrorCategoriesState extends CategoriesState {
  final String? _message;

  const FatalErrorCategoriesState(this._message);
}

class CategoriesCubit extends Cubit<CategoriesState> {
  CategoriesCubit() : super(const InitCategoriesState());

  List<Category> categories = [
    Category('Test 1', Colors.red),
    Category('Test 2', Colors.blueAccent),
  ];
  Color pickerColor = const Color(0xffffffff);
  Color currentColor = const Color(0xffffffff);
  bool isVisible = false;

  void reload() async {
    emit(const LoadingCategoriesState());
    await Future.delayed(const Duration(seconds: 2));
    emit(LoadedCategoriesState(categories));
  }

  void opensDialog() {
    emit(const AddCategoriesState());
  }

  void addCategory(String title) {
    emit(const AddingCategoriesState());
    Category category = Category(title, currentColor);
    categories.add(category);
    pickerColor = const Color(0xffffffff);
    currentColor = const Color(0xff443a49);
    isVisible = false;
    emit(LoadedCategoriesState(categories));
  }

  void changeColor(Color color) {
    pickerColor = color;
  }

  void setColor() {
    currentColor = pickerColor;
  }
}

Categories View - Internationalization not implemented yet

class CategoriesView extends StatelessWidget {
  final PresentationViewLazyI18N _i18n;

  CategoriesView(this._i18n, {Key? key}) : super(key: key);

  final TextEditingController _titleController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text(
            "Categories",
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
          ),
          iconTheme: const IconThemeData(color: Colors.white),
          backgroundColor: const Color(0xff00c9ff),
          elevation: 0.0,
          actions: [
            IconButtonRight(
              onClick: () {
                context.read<CategoriesCubit>().opensDialog();
              },
              title: 'New Category  ',
              icon: const Icon(Icons.add, size: 17, color: Color(0xfff2f2f2)),
              buttonColor: const Color(0xff32d3ff),
              textColor: const Color(0xfff2f2f2),
            )
          ],
        ),
        body: BlocConsumer<CategoriesCubit, CategoriesState>(
          listenWhen: (previous, current) =>
              current is AddCategoriesState,
          listener: (context, state) {
            if (state is AddCategoriesState) {
              addCateogryDialog(context);
            }
          },
          builder: (context, state) {
            if (state is InitCategoriesState ||
                state is LoadingCategoriesState) {
              return ProgressView(message: 'Loading categories');
            }
            if (state is AddingCategoriesState) {
              return ProgressView(message: 'Adding Category');
            }
            if (state is LoadedCategoriesState) {
              final categories = state.categories;
              return categoriesList(context, categories);
            }
            return const Text('Unknown error');
          },
        ));
  }

  void addCateogryDialog(BuildContext blocContext) {
    showDialog(
      context: blocContext,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text('Create new category'),
          content: SingleChildScrollView(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                TextField(
                  controller: _titleController,
                  decoration: const InputDecoration(
                    labelText: 'Category title',
                  ),
                ),
                const SizedBox(height: 8,),
                Visibility(
                  child: const Text('Category title is required', style: TextStyle(fontWeight: FontWeight.bold, color: redAlert),),
                  visible: blocContext.watch<CategoriesCubit>().isVisible,
                ),
                const SizedBox(height: 8,),
                const Text('Select a category color'),
                const SizedBox(height: 8,),
                MaterialPicker(
                  pickerColor: blocContext.watch<CategoriesCubit>().pickerColor,
                  onColorChanged: (color) {
                    blocContext.read<CategoriesCubit>().changeColor(color);
                  },
                ),
              ],
            ),
          ),
          actions: <Widget>[
            TextButton(
              child: const Text("Cancel"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            TextButton(
              child: const Text("Ok"),
              onPressed: () {
                if (_titleController.text.isEmpty) {
                  blocContext.read<CategoriesCubit>().isVisible = true;
                } else {
                  blocContext.read<CategoriesCubit>().setColor();
                  blocContext.read<CategoriesCubit>().addCategory(_titleController.text);
                  Navigator.of(context).pop();
                }
              },
            ),
          ],
        );
      },
    );
  }
}

Answer 1

There are a few things that might affect why your widget isn't visible. Without seeing more of your code, I have to guess. The real question is, how will the widget tree know that it needs to update? .read doesn't listen to updates... You should only use that when you want to order the cubit to do something.

1. The widget tree needs to be informed that it should update the widgets. So I would instead use a BlocBuilder that handles the the different states and update the widgets accordingly. OR you can try to use visible: blocContext.watch<CategoriesCubit>().isVisible, in your Visibility widget instead.

2. Perhaps it is fine, but instead of blocContext.read<CategoriesCubit>().isVisible = true; I would have a cubit method that is called, which in turn emit a state updated with that variable set. I would only have that variable in the state (AddCategoriesState), and not in the entire cubit. I'm not sure that setting the bool the way you do will trigger any updates that a BlocBuilder/.watch listens to.