Mastering AppBar in Flutter

Because of Flutter’s versatility and user-friendliness, developers can create beautiful, high-performing mobile apps. An essential element of every mobile application is the AppBar, which offers a standardised location for actions, navigation, and titles. We will go through every aspect of the Flutter AppBar in this lesson, including how to modify it to suit your needs.

What is an AppBar?

The AppBar in Flutter is a material design app bar that sits at the top of an app and provides an area for branding, titles, navigation, and actions. It’s one of the most commonly used widgets in the Flutter framework and plays a crucial role in enhancing the user experience. We can use Simple Appbar Example of that.

A typical AppBar contains:

• Title: The main title of the screen.
• Actions: Icons or buttons for actions related to the current view.
• Leading Widget: Usually an icon or button that opens the navigation drawer or goes back to the previous screen.
• Flexible Space: An area that can hold widgets that flex with the available space.
• Bottom Widget: A widget that appears at the bottom of the AppBar, often used for tabs.

Creating a Simple AppBar

To create a simple AppBar, you can use the AppBar widget in your Scaffold widget. Here’s a basic example:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('My AppBar'),
        ),
        body: Center(
          child: Text('Hello, World!'),
        ),
      ),
    );
  }
}

In this example, the AppBar widget is added to the Scaffold‘s appBar property. The title is set to a Text widget that displays “My AppBar”.

Customizing the AppBar

While the default AppBar is functional, Flutter allows you to customize it extensively to suit your app’s design and functionality. Let’s explore some customization options.

1. Changing the Background Color

You can easily change the background color of the AppBar using the backgroundColor property:

appBar: AppBar(
  title: Text('My Custom AppBar'),
  backgroundColor: Colors.green,
),

This will change the AppBar’s background color to green.

2. Adding an Icon or Image to the Leading Widget

The leading property allows you to add a widget at the start of the AppBar, typically used for navigation buttons:

appBar: AppBar(
  title: Text('AppBar with Icon'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      // Handle menu button press
    },
  ),
),

This code adds a menu icon to the left of the title.

3. Adding Actions to the AppBar

The actions property allows you to add multiple widgets (usually icons or buttons) at the end of the AppBar:

appBar: AppBar(
  title: Text('AppBar with Actions'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Handle search action
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // Handle more options
      },
    ),
  ],
),

Here, we’ve added search and more options icons to the AppBar.

4. Using a Custom Widget in the Title

Instead of using plain text, you can use a custom widget as the title:

appBar: AppBar(
  title: Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Icon(Icons.home),
      SizedBox(width: 10),
      Text('Home'),
    ],
  ),
),

This example centers the title and adds an icon next to it.

5. FlexibleSpace Widget

The flexibleSpace property allows you to create a more dynamic AppBar. For example, you can use it to add a gradient background:

appBar: AppBar(
  title: Text('AppBar with Gradient'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      gradient: LinearGradient(
        colors: [Colors.blue, Colors.purple],
        begin: Alignment.topLeft,
        end: Alignment.bottomRight,
      ),
    ),
  ),
),

This code adds a gradient background to the AppBar.

6. Adding a Bottom Widget

If you need to add tabs to your AppBar, the bottom property is what you’re looking for. It’s commonly used with a TabBar:

appBar: AppBar(
  title: Text('AppBar with Tabs'),
  bottom: TabBar(
    tabs: [
      Tab(icon: Icon(Icons.directions_car)),
      Tab(icon: Icon(Icons.directions_transit)),
      Tab(icon: Icon(Icons.directions_bike)),
    ],
  ),
),

Here, we’ve added a TabBar with three tabs at the bottom of the AppBar.

7. Elevation and Shadow

The elevation property controls the shadow below the AppBar. Setting it to 0 removes the shadow:

appBar: AppBar(
  title: Text('AppBar with No Shadow'),
  elevation: 0,
),

This makes the AppBar flush with the content below it.

8. Floating AppBar

A floating AppBar appears only when you scroll up. This effect is useful when you want the AppBar to be hidden when the user scrolls down:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              floating: true,
              flexibleSpace: FlexibleSpaceBar(
                title: Text('Floating AppBar'),
              ),
              expandedHeight: 200,
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                (context, index) => ListTile(
                  title: Text('Item #$index'),
                ),
                childCount: 100,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

In this example, the SliverAppBar is set to float, and it appears when the user scrolls up.

Responsive Design with AppBar

Ensuring that your AppBar looks good on various screen sizes and orientations is essential for a great user experience. The PreferredSize widget can be used to set a custom height for the AppBar, which can be adjusted based on the device’s screen size:

appBar: PreferredSize(
  preferredSize: Size.fromHeight(80.0),
  child: AppBar(
    title: Text('Custom Height AppBar'),
  ),
),

You can also make the AppBar responsive by conditionally adjusting its properties based on the screen width:

appBar: AppBar(
  title: Text(MediaQuery.of(context).size.width > 600 ? 'Large Screen' : 'Small Screen'),
),

This changes the title based on the screen width.

Conclusion

The Flutter AppBar is a powerful and flexible widget that can be customized to create a polished and functional user interface. Whether you’re building a simple app or a complex, feature-rich application, mastering the AppBar will allow you to create an engaging and intuitive navigation experience for your users.

In this tutorial, we covered the basics of the AppBar, explored various customization options, and demonstrated how to create responsive designs. By experimenting with these techniques, you can tailor the AppBar to fit the specific needs of your app and ensure a consistent and professional look across all screens.