K-Learn

Flutter AppBar Widget

Posted on Friday, 03 March 2023 03:31 PM

The AppBar widget in Flutter is used to create a top app bar that usually contains a page title, some actions, and a navigation button to open a side menu.

Here's an example of how to use the AppBar widget:

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
  title: Text('My Demo App'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Perform search action
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // Perform more action
      },
    ),
  ],
)
    );
  }

In this example,

We've created an AppBar widget that displays the title "My Demo App" and two action buttons: a search button and a more button. When the user taps on these buttons, we can perform some actions as needed.

Here are some common properties of the AppBar widget:

title: The text or widget to display as the title of the app bar.

actions: A list of widgets to display as actions in the app bar. These widgets are typically IconButtons or PopupMenuButtons.

backgroundColor: The background color of the app bar.

brightness: The brightness of the app bar. This can be set to Brightness.dark or Brightness.light.

centerTitle: Whether to center the title horizontally in the app bar.

leading: A widget to display as the leading widget in the app bar. This is typically a navigation button that opens a side menu.

elevation: The elevation of the app bar.

Here's an example that demonstrates some of these properties:

AppBar(
  title: Text('My App'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // Perform search action
      },
    ),
    PopupMenuButton(
      itemBuilder: (BuildContext context) => [
        PopupMenuItem(
          child: Text('Settings'),
          value: 'settings',
        ),
        PopupMenuItem(
          child: Text('About'),
          value: 'about',
        ),
      ],
      onSelected: (value) {
        if (value == 'settings') {
          // Open settings screen
        } else if (value == 'about') {
          // Open about screen
        }
      },
    ),
  ],
  backgroundColor: Colors.blue,
  brightness: Brightness.dark,
  centerTitle: true,
  elevation: 4.0,
)

In this example,

We've set the background color of the app bar to blue, the brightness to dark, and the elevation to 4.0. We've also used a PopupMenuButton as one of the action widgets, which displays a list of options when tapped.