Scribbles for my bad memory

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.

DECLARE
    -- Procedure to add a column if it does not exist
    PROCEDURE add_column_if_not_exists (
        p_owner       VARCHAR2,
        p_table_name  VARCHAR2,
        p_column_name VARCHAR2,
        p_column_type VARCHAR2
    ) IS
        l_sql    VARCHAR2(1024);
        l_count  NUMBER;
    BEGIN
        -- Check if column exists
        SELECT COUNT(*)
        INTO l_count
        FROM ALL_TAB_COLUMNS
        WHERE OWNER = p_owner
          AND TABLE_NAME = p_table_name
          AND COLUMN_NAME = p_column_name;

        -- Add column if it does not exist
        IF l_count = 0 THEN
            l_sql := 'ALTER TABLE ' || p_owner || '.' || p_table_name || ' ADD (' || p_column_name || ' ' || p_column_type || ')';
            DBMS_OUTPUT.PUT_LINE(l_sql);
            EXECUTE IMMEDIATE l_sql;
        END IF;
    END;

    -- Procedure to drop a column if it does exist
    PROCEDURE drop_column_if_exists (
        p_owner       VARCHAR2,
        p_table_name  VARCHAR2,
        p_column_name VARCHAR2
    ) IS
        l_sql    VARCHAR2(1024);
        l_count  NUMBER;
    BEGIN
        -- Check if column exists
        SELECT COUNT(*)
        INTO l_count
        FROM ALL_TAB_COLUMNS
        WHERE OWNER = p_owner
          AND TABLE_NAME = p_table_name
          AND COLUMN_NAME = p_column_name;

        -- drop column if it does exist
        IF l_count = 1 THEN
            l_sql := 'ALTER TABLE ' || p_owner || '.' || p_table_name || ' DROP COLUMN ' || p_column_name;
            DBMS_OUTPUT.PUT_LINE(l_sql);
            EXECUTE IMMEDIATE l_sql;
        END IF;
    END;
BEGIN
...
END;
/

When building user interfaces in Flutter, it's often desirable to have the keyboard automatically pop up and focus set on a specific TextField when navigating to a new page or rendering a widget. This auto-focus feature can greatly improve the user experience by allowing users to start typing immediately without having to manually tap on the TextField to focus it.

In this blog post, we'll explore how to implement the auto-focus feature for TextFields in Flutter using FocusNodes.

Step 1: Create a FocusNode

The first step is to create a FocusNode instance, which represents the focus state of a particular widget. You can create a FocusNode in the initState method of your StatefulWidget:

late FocusNode myFocusNode;

@override
void initState() {
  super.initState();
  myFocusNode = FocusNode();
}

Step 2: Associate the FocusNode with the TextField

Next, you need to associate the FocusNode with the TextField you want to focus. You can do this by passing the FocusNode to the focusNode property of the TextField:

TextField(
  focusNode: myFocusNode,
  // other properties
)

Step 3: Request Focus on the FocusNode

To set the focus on the TextField, you need to request focus on the FocusNode. The best place to do this is after the widget has been rendered, which you can achieve using the WidgetsBinding.instance.addPostFrameCallback method:

@override
void initState() {
  super.initState();
  myFocusNode = FocusNode();
  WidgetsBinding.instance.addPostFrameCallback((_) {
    myFocusNode.requestFocus();
  });
}

The addPostFrameCallback method ensures that the focus request is made after the widget has been rendered, which is necessary to avoid any potential issues with focus management.

Example Implementation

Here's an example implementation of a StatefulWidget that demonstrates the auto-focus feature for a TextField:

class NewNoteState extends State<NewNote> {
  final TextEditingController _noteController = TextEditingController();
  final FocusNode _noteFocusNode = FocusNode();

  @override
  void initState() {
    super.initState();
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _noteFocusNode.requestFocus();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('New Note'),
      ),
      body: Column(
        children: [
          TextField(
            controller: _noteController,
            focusNode: _noteFocusNode,
            keyboardType: TextInputType.multiline,
            // other properties
          ),
          // other widgets
        ],
      ),
    );
  }

  @override
  void dispose() {
    _noteController.dispose();
    _noteFocusNode.dispose();
    super.dispose();
  }
}

In this example, we create a FocusNode called _noteFocusNode and associate it with the TextField. In the initState method, we use WidgetsBinding.instance.addPostFrameCallback to request focus on the _noteFocusNode after the widget has been rendered. This will automatically set the focus on the TextField when the NewNote widget is rendered.

Conclusion

Adding the auto-focus feature to TextFields in Flutter can greatly enhance the user experience by allowing users to start typing immediately without having to manually tap on the TextField to focus it. By creating a FocusNode, associating it with the TextField, and requesting focus on the FocusNode after the widget has been rendered, you can easily implement this feature in your Flutter applications.

Remember to dispose of the FocusNode when it's no longer needed to avoid memory leaks. Additionally, be mindful of potential issues with focus management and use the appropriate methods and callbacks to ensure smooth focus handling in your application.

Building Flutter apps? You'll likely face situations where you need to control the back button. Imagine a user editing a note, and you want a confirmation dialog before they accidentally ditch their work!

The old WillPopScope widget used to handle this, but it's deprecated as of Flutter 3.12 (thanks, Android 14's new back gesture!). The new sheriff in town is PopScope, but it doesn't quite let you block the back action directly.

After a couple hours of researching and investigating, Here's the solution to get PopScope to mimic WillPopScope:

  @override
  Widget build(BuildContext context) {
    return PopScope(
      canPop: false,
      onPopInvokedWithResult: (bool didPop, object? result) async {
        if (!didPop) {
          final navigator = Navigator.of(context);
          if (_noteController.text.isEmpty || (_noteController.text.isNotEmpty && (await _showUnsavedChangesDialog(context) ?? false))) {
            navigator.pop();
          }
        }
      },
      child: Scaffold(
      ...

and the following shows the difference:

   @override
   Widget build(BuildContext context) {
-    return WillPopScope(
-      onWillPop: () async {
-        if (_noteController.text.isNotEmpty) {
+    return PopScope(
+      canPop: false,
+      onPopInvokedWithResult: (bool didPop, object? result) async {
+        if (!didPop) {
+          final navigator = Navigator.of(context);
+          if (_noteController.text.isEmpty || (_noteController.text.isNotEmpty && (await _showUnsavedChangesDialog(context) ?? false))) {
+            navigator.pop();
+          }
-           final shouldPop = await _showUnsavedChangesDialog(context);
-          return shouldPop ?? false;
         }
-        return true;
       },
       child: Scaffold(

Here's how this solution works:

1. canPop is set to false, disabling the system back gesture.
2. In the onPopInvokedWithResult callback, it checks if didPop is false (indicating that the pop operation hasn't occurred yet)
3. Then, it checks if there aren't any unsaved changes _noteController.text.isEmpty, or, although there are unsaved changes (_noteController.text.isNotEmpty), the user answers Yes when asking confirmation.
4. If any of the conditions are true, it manually triggers the pop operation by calling navigator.pop(). Otherwise, do nothing.

By disabling the system back gesture (canPop: false) and manually triggering the pop operation (navigator.pop()), this solution allows you to perform necessary actions (e.g., showing a confirmation dialog) before the pop operation occurs, effectively replicating the behavior of WillPopScope.

I hope it helps!