How to add header icon to parent in children screen material-top-bar?

ONLINECAST

2 min read

·

04-10-2024

10

0

Share

Navigating Through Screens: Adding a Header Icon to Your Material-Top-Bar

Developing a user-friendly mobile application involves creating a seamless navigation experience. Often, we encounter scenarios where a user navigates to a child screen from a parent screen, and we need to maintain a consistent visual flow. This is where the Material-Top-Bar component comes into play. It provides a familiar and intuitive way for users to understand their current location within the app.

However, a common challenge arises when we want to display a header icon on the parent screen while the user is on the child screen. This article will delve into the best practices and solutions for achieving this desired functionality using the Material-Top-Bar.

The Problem:

You're developing an app with a parent screen that features a specific icon in its Material-Top-Bar. When the user navigates to a child screen, the header icon disappears. You need to ensure the icon remains visible even when the user is on the child screen.

Example Scenario:

Let's assume you have a HomeScreen with an "Add" icon in the Material-Top-Bar. Navigating from HomeScreen to DetailsScreen, the "Add" icon disappears. You want to retain this icon even when the user is on the DetailsScreen.

Original Code:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
        leading: Icon(Icons.add),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => DetailsScreen()),
            );
          },
          child: Text('Go to Details'),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Details'),
      ),
      body: Center(
        child: Text('Details Screen'),
      ),
    );
  }
}

Solution and Explanation:

The key to achieving the desired effect is to utilize a NestedScrollView widget. This allows us to create a unified header for multiple child screens, effectively maintaining a consistent visual experience.

Here's the modified code:

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (context, innerBoxIsScrolled) => [
          SliverAppBar(
            title: Text('Home'),
            leading: Icon(Icons.add),
            floating: true,
            snap: true,
          ),
        ],
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => DetailsScreen()),
              );
            },
            child: Text('Go to Details'),
          ),
        ),
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('Details Screen'),
      ),
    );
  }
}

Explanation:

1. We've wrapped the HomeScreen's body in a NestedScrollView widget.
2. The headerSliverBuilder is responsible for defining the header for all nested screens.
3. The SliverAppBar within the headerSliverBuilder creates the persistent header, including the "Add" icon.
4. The floating: true and snap: true properties ensure the SliverAppBar smoothly scrolls with the content.

Additional Value:

• This approach offers flexibility in controlling the appearance and behavior of the header across different screens.
• You can add additional elements within the SliverAppBar, such as actions, title, or background images.
• The NestedScrollView widget provides seamless scrolling behavior for both the header and the content.

Conclusion:

By leveraging the NestedScrollView and SliverAppBar widgets, you can easily maintain a consistent visual experience with a persistent header icon across multiple screens within your Flutter application. This helps create a more intuitive and user-friendly navigation flow, enhancing the overall user experience.

Resources:

• NestedScrollView Documentation
• SliverAppBar Documentation