Scribbles for my bad memory

In the HappyNotes project, I encountered a perplexing issue with the NoteModel not updating as expected across flutter widgets. Despite initializing NoteModel with initial values and using ChangeNotifierProvider, the state changes weren’t reflecting in the model when I try to collect data back. This article outlines the troubleshooting process and solution, which can be a valuable guide for other developers facing similar challenges.

Background

In HappyNotes project, the NewNote widget is where users could create notes. Each note had properties like isPrivate and isMarkdown, managed through a NoteModel using ChangeNotifier. Here’s a simplified version of the relevant parts of my setup:

class NoteModel extends ChangeNotifier {
  bool isPrivate;
  bool isMarkdown;

  NoteModel({this.isPrivate = true, this.isMarkdown = false});

  set isPrivate(bool value) {
    _isPrivate = value;
    notifyListeners();
  }

  set isMarkdown(bool value) {
    _isMarkdown = value;
    notifyListeners();
  }
}

The NewNote widget utilized ChangeNotifierProvider to provide the NoteModel to its children:

class NewNote extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (_) => NoteModel(),
      child: Scaffold(
        appBar: AppBar(title: Consumer<NoteModel>(
          builder: (context, noteModel, child) {
            return Text(noteModel.isPrivate ? 'Private Note' : 'Public Note');
          },
        )),
        body: NoteEditor(),
      ),
    );
  }
}

The Problem

After setting the initial values for isPrivate and isMarkdown, later changes to these properties weren’t being reflected in the model when I retrieve the status data when saving a note . I tried various approaches, including manually calling notifyListeners and using setState within event handlers, but nothing solved the issue.

Troubleshooting Process

1. Double Check Initialization: First, I verified that NoteModel was being initialized correctly with the ChangeNotifierProvider. The initial values were correct, but subsequent changes weren’t propagating.

2. Use of Consumer:

I ensured that widgets depending on NoteModel used Consumer to listen for changes:

Consumer<NoteModel>(
  builder: (context, noteModel, child) {
    return Switch(
      value: noteModel.isPrivate,
      onChanged: (value) {
        noteModel.isPrivate = value;
      },
    );
  },
);

3. Spotting out the root cause: Multiple providers initialization:

Finally I found that having multiple ChangeNotifierProviders at different levels of the widget tree, is the root cause that leads to this issue. I shouldn't initialize the same model twice at the root level and at the page level.

The Solution

The breakthrough came when we adjusted our main application setup to use a single ChangeNotifierProvider for NoteModel:

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (_) => NoteModel(),
      child: MyApp(),
    ),
  );
}

In NewNote, I removed the redundant ChangeNotifierProvider and directly used the globally provided NoteModel:

class NewNote extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Consumer<NoteModel>(
          builder: (context, noteModel, child) {
            return Text(noteModel.isPrivate ? 'Private Note' : 'Public Note');
          },
        ),
      ),
      body: NoteEditor(),
    );
  }
}

By centralizing NoteModel provisioning, state changes propagated correctly across the app. This resolved the issue, proving that a single ChangeNotifierProvider is the key for consistent state management in Flutter.

Key Takeaways

• Use a Single ChangeNotifierProvider: Ensure a single source of truth for state by providing your model at a high level in the widget tree.
• Leverage Consumer for Efficient Updates: Use Consumer to automatically rebuild parts of the UI that depend on the model, reducing manual state management.