Flutter AppBar Widget

The AppBar widget is a fundamental part of the Flutter framework that provides a customizable app bar at the top of a screen. It is typically used to display the app's title, logo, and navigation icons. In this blog, we will explore the AppBar widget in more detail, including its properties and examples.

Creating an AppBar

To create an AppBar in Flutter, we use the AppBar class, which is a stateful widget. Here is a simple example:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
        ),
        body: Center(
          child: Text('Welcome to my app!'),
        ),
      ),
    );
  }
}​

In this example, we create a basic AppBar with a title that says "My App". We use the Scaffold widget to create the overall layout of the screen, and we place the AppBar at the top of the screen by setting it as the value of the appBar property.

Customizing the AppBar

The AppBar widget provides several properties that allow us to customize its appearance and behavior. Here are some of the most common properties:

• title: The main title displayed on the app bar. We can set it to a Text widget or any other widget that extends PreferredSizeWidget.
• leading: A widget to display on the left side of the app bar, typically used for navigation or a back button.
• actions: A list of widgets to display on the right side of the app bar, typically used for additional actions or icons.
• backgroundColor: The background color of the app bar.
• elevation: The shadow depth of the app bar.
• brightness: The brightness of the app bar. It can be set to Brightness.light or Brightness.dark.
• centerTitle: A boolean that indicates whether to center the title horizontally in the app bar.

Here's an example that shows how to customize AppBar properties

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: Scaffold(
        appBar: AppBar(
          title: Text('My App'),
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              // Handle the press event
            },
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                // Handle the press event
              },
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () {
                // Handle the press event
              },
            ),
          ],
          backgroundColor: Colors.blue,
          elevation: 5,
          brightness: Brightness.dark,
          centerTitle: true,
        ),
        body: Center(
          child: Text('Welcome to my app!'),
        ),
      ),
    );
  }
}​

In this example, we customize several properties of the AppBar. We add a menu icon on the left side of the app bar using the leading property. We also add two additional icons on the right side of the app bar using the actions property.

We set the backgroundColor property to blue and the elevation property to 5, which gives the app bar a shadow effect. We also set the brightness property to Brightness.dark, which makes the text on the app bar