Scribbles for my bad memory

In a recent project, I ran into an issue where I needed to refresh a page when the user navigated back to it. After searching on google and asking ChatGPT, I found this simple and clean solution.

What is RouteObserver?

RouteObserver is part of the Flutter framework that helps you track navigation events in your app. It allows you to listen to changes in the route stack, such as when a route is pushed or popped. This is incredibly useful for scenarios where you need to refresh or update your UI based on navigation.

Setting Up RouteObserver

First, I created a UserSession class to hold a singleton instance of RouteObserver. Here’s the gist:

// user_session.dart
import 'package:flutter/material.dart';

class UserSession {
  static final UserSession _instance = UserSession._internal();
  static final routeObserver = RouteObserver<ModalRoute>();

  UserSession._internal();
}

By doing this, I could easily access routeObserver from anywhere in my app. My UserSession also holds other user session data, maybe a bettway is to create a separate file for RouteObserver. But for now, we just use the UserSession class.

Adding RouteObserver to Your App

Next, I needed to register this RouteObserver with my app’s navigator. I did this in the main app widget:

// main.dart
import 'package:flutter/material.dart';
import 'package:happy_notes/screens/account/user_session.dart';

class HappyNotesApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const InitialPage(),
      navigatorObservers: [UserSession.routeObserver],
    );
  }
}

By adding UserSession.routeObserver to navigatorObservers, we’re now tracking route changes across the entire app.

Using RouteObserver in Screens

To use RouteObserver, I extended my state classes with RouteAware and subscribed to the routeObserver in the initState method. Here’s an example from the Memories screen:

// memories.dart
import 'package:flutter/material.dart';
import '../account/user_session.dart';

class MemoriesState extends State<Memories> with RouteAware {
  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      UserSession.routeObserver.subscribe(this, ModalRoute.of(context)!);
    });
  }

  @override
  void didPopNext() {
    // Called when the top route has been popped off, and this route shows up
    _fetchMemories();
    setState(() {});
  }

  @override
  void dispose() {
    UserSession.routeObserver.unsubscribe(this);
    super.dispose();
  }
  
  void _fetchMemories() {
    // Logic to refresh memories
  }
}

Here’s what’s happening:

1. Subscription: In initState, the screen subscribes to routeObserver.
2. Route Events: The didPopNext method is triggered when the screen becomes visible again after another screen is popped off. This is where I refreshed the screen's data by calling _fetchMemories().
3. Unsubscription: It’s important to unsubscribe in the dispose method to avoid memory leaks.

Conclusion

Using RouteObserver in Flutter allows you to manage your app’s navigation state effectively. By listening to route changes, you can ensure that your UI stays in sync with user actions, providing a seamless experience.

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.

Provider is a powerful state management solution in Flutter that allows for efficient and organized management of app state. In this guide, we'll explore some best practices for using Provider to keep your Flutter apps clean and maintainable.

Why Use Provider?

Provider offers a simple, scalable way to handle state management in Flutter apps. It's ideal for sharing and managing state across widgets, especially in large applications where state needs to be accessed from various parts of the app.

1. Utilize MultiProvider for Multiple Models

When your app requires multiple state models, initializing each one individually can become cumbersome. Instead, use MultiProvider to group your models together efficiently. This keeps your main function neat and ensures that all your models are readily available throughout the app.

Example:

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:your_app/models/note_model.dart';
import 'package:your_app/models/user_model.dart';
import 'package:your_app/screens/home_screen.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => NoteModel()),
        ChangeNotifierProvider(create: (context) => UserModel()),
      ],
      child: const YourApp(),
    ),
  );
}

In this setup, both NoteModel and UserModel are initialized at the root level, making them accessible throughout your app.

2. Scope Providers Appropriately

Avoid providing all your models at the root level unless they are needed throughout the entire app. For state that is only relevant to specific sections or widgets, provide the ChangeNotifier closer to where it's needed. This reduces unnecessary rebuilds and makes your app more efficient.

Example:

class SomeFeatureScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => SomeFeatureModel(),
      child: SomeFeatureWidget(),
    );
  }
}

In this example, SomeFeatureModel is provided only for SomeFeatureScreen, ensuring it's scoped to the relevant part of the app.

3. Avoid Duplication

Ensure each ChangeNotifier is provided only once at the appropriate level to avoid duplication. Multiple instances of the same model can lead to inconsistent state and unexpected behavior.

Example:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (context) => UserModel()),
        // Avoid duplicating UserModel in nested widgets
      ],
      child: MaterialApp(
        home: HomeScreen(),
      ),
    );
  }
}

4. Use Provider for Static Data

Not all models need to be ChangeNotifier. For data that doesn’t change or doesn’t need to notify listeners, use Provider. This is useful for static data or configurations.

Example:

Provider(create: (context) => SomeStaticData()),

5. Access Models Wisely

Use context.watch<T>() to get notified of changes and rebuild when the state changes, or context.read<T>() to read the value without rebuilding. This ensures that your widgets only rebuild when necessary, keeping your app performance optimal.

Example:

class ExampleWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final noteModel = context.watch<NoteModel>();
    final userModel = context.read<UserModel>();

    return Column(
      children: [
        Text('Note is private: ${noteModel.isPrivate}'),
        Text('User name: ${userModel.name}'),
      ],
    );
  }
}

Summary

Using Provider effectively involves:

1. Grouping models with MultiProvider: This keeps your main function clean and ensures that all necessary models are provided.
2. Scoping models appropriately: Provide models where they are needed to avoid unnecessary rebuilds.
3. Avoiding duplication: Ensure each model is only provided once at the appropriate level.
4. Using Provider for static data: This avoids unnecessary rebuilds and keeps your app efficient.
5. Accessing models wisely: Use the appropriate methods to read or watch the state without causing unnecessary rebuilds.

If you’ve worked with Flutter’s ListView, you might have encountered a scenario where you navigate between pages, and upon returning, the scroll position isn’t where you expected it to be. Recently, I faced a similar challenge with a note-taking app. Every time I moved between pages, I ended up at the bottom of the new page. Not the best user experience, right?

The Problem

In my note-taking app, I wanted the NoteList widget to always start at the top position whenever it’s built or updated. This way, users wouldn’t have to manually scroll up to see the latest notes. The challenge was to encapsulate the scroll behavior within the NoteList widget itself, without having to manage the scroll status from its parent widget. Here’s how we achieved that.

The Initial Implementation

Initially, NoteList was a simple StatelessWidget that displayed a list of notes grouped by their creation date. However, it didn’t retain or reset the scroll position upon navigation or page refreshes, which led to an inconsistent and frustrating user experience. Here’s a simplified version of the original NoteList:

class NoteList extends StatelessWidget {
  final List<Note> notes;
  final Function(Note) onTap;

  const NoteList({required this.notes, required this.onTap});

  @override
  Widget build(BuildContext context) {
    // Group notes by date
    final notesByDate = <String, List<Note>>{};
    for (var note in notes) {
      final dateKey = note.createDate!;
      notesByDate[dateKey] = notesByDate[dateKey] ?? [];
      notesByDate[dateKey]!.add(note);
    }

    return ListView.builder(
      itemCount: notesByDate.keys.length,
      itemBuilder: (context, index) {
        final dateKey = notesByDate.keys.elementAt(index);
        final dayNotes = notesByDate[dateKey]!;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: dayNotes.map((note) => GestureDetector(
              onTap: () => onTap(note),
              child: Text(note.content),
            )).toList(),
        );
      },
    );
  }
}

The Solution

To solve this, we needed to ensure that every time NoteList was built, it would start at the top of the list. We introduced a ScrollController to manage the scroll position and added a simple logic to reset the scroll position to the top whenever the widget is built or updated.

Here's how we transformed the NoteList:

1. Added a ScrollController: This allows us to control the scroll position programmatically.
2. Reset Scroll Position: Using WidgetsBinding.instance.addPostFrameCallback, we ensure the scroll is reset after the widget's frame is built.

Here's the updated NoteList with these improvements:

class NoteList extends StatelessWidget {
  final List<Note> notes;
  final Function(Note) onTap;
+  final ScrollController _scrollController = ScrollController();

  NoteList({required this.notes, required this.onTap}) {
+    // Scroll to the top whenever the widget is built or updated
+    WidgetsBinding.instance.addPostFrameCallback((_) {
+      _scrollController.jumpTo(0);
+    });
  }

  @override
  Widget build(BuildContext context) {
    // Group notes by date
    final notesByDate = <String, List<Note>>{};
    for (var note in notes) {
      final dateKey = note.createDate!;
      notesByDate[dateKey] = notesByDate[dateKey] ?? [];
      notesByDate[dateKey]!.add(note);
    }

    return ListView.builder(
+      controller: _scrollController,
      itemCount: notesByDate.keys.length,
      itemBuilder: (context, index) {
        final dateKey = notesByDate.keys.elementAt(index);
        final dayNotes = notesByDate[dateKey]!;
        return Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: dayNotes.map((note) => GestureDetector(
              onTap: () => onTap(note),
              child: Text(note.content),
            )).toList(),
        );
      },
    );
  }
}

Key Takeaways

1. Encapsulation: By managing the scroll state within NoteList, we keep the parent widget cleaner and more focused on data management.
2. Consistent User Experience: Resetting the scroll position ensures users always start at the top, providing a predictable and pleasant experience.
3. Simple Yet Effective: Sometimes, small changes like adding a ScrollController can significantly enhance the usability of your app.

This solution should help other developers facing similar issues with managing scroll positions in Flutter. By following this approach, you can ensure that your list-based components offer a consistent and user-friendly experience.

By the way, my simple note taking app has been released at https://happynotes.shukebeta.com, and I'll improve it day by day. It is an free web application, and it has an android version on GitHub.

Feel free to use it and give me feedback on GitHub!

pushReplacement

Imagine you're replacing an old road sign with a new one. The old one is gone, and there's no way to know it was ever there. That's what pushReplacement does in Flutter.

Usage:

• Navigator.pushReplacement(context, newRoute)

What It Does:

• Replaces the current route with a new route.
• The current route is removed from the stack, making way for the new route.
• The removed route is completely gone—pressing the back button won’t bring it back.

When to Use It:

• Ideal for scenarios like replacing a login screen with a home screen after a user logs in. You don’t want them to go back to the login screen, right?

Code Example:

Navigator.pushReplacement(
  context,
  MaterialPageRoute(builder: (context) => HomeScreen()),
);

pushAndRemoveUntil

Now, think of pushAndRemoveUntil as clearing a cluttered desk, keeping only the essentials. You decide which items stay and which go. This function allows more control over which routes to remove.

Usage:

• Navigator.pushAndRemoveUntil(context, newRoute, (route) => condition)

What It Does:

• Pushes a new route and removes routes below it until a specified condition is met.
• You provide a condition to determine which routes to keep or discard.

When to Use It:

• Perfect for situations like logging out, where you want to return to a clean slate (the login screen) and remove all previous screens.

Code Example:

Navigator.pushAndRemoveUntil(
  context,
  MaterialPageRoute(builder: (context) => LoginScreen()),
  (Route<dynamic> route) => false, // Remove all previous routes.
);

Key Differences

1. Scope of Operation:

   • pushReplacement swaps only the top route.
   • pushAndRemoveUntil can clear out multiple routes based on your condition.

2. Stack Control:

   • pushReplacement provides straightforward, one-route replacement.
   • pushAndRemoveUntil allows for a more flexible navigation reset.

3. Use Case Scenarios:

   • Use pushReplacement for simple replacement needs.
   • Use pushAndRemoveUntil for complex navigation flows requiring cleanup of multiple routes.