CustomAppBar

An enhanced AppBar implementation with additional customization options beyond Flutter's standard AppBar.

Features

  • Gradient background support
  • Flexible title (widget or text)
  • Custom height control
  • Built-in back button handling
  • Action buttons with proper styling
  • Bottom widget integration (like TabBar)
  • Proper PreferredSizeWidget implementation
  • Demo showcasing all features

Installation

Add the dependency to your pubspec.yaml:

dependencies:
  apptomate_custom_appbar: ^0.0.1

Usage

Basic Usage

Scaffold(
  appBar: CustomAppBar(
    title: 'My App',
    backgroundColor: Colors.blue,
  ),
  body: // Your content...
)

Available Parameters

Parameter Type Default Description
title String? null Text title (alternative to titleWidget)
titleWidget Widget? null Custom title widget
backgroundColor Color Colors.blue Solid background color
elevation double 4.0 Shadow elevation
leadingIcon IconData? null Leading icon (typically back button)
onLeadingPressed VoidCallback? null Leading icon press handler
actions List null Action buttons
height double kToolbarHeight Custom app bar height
gradient Gradient? null Gradient background (overrides backgroundColor)
bottom PreferredSizeWidget? null Bottom widget (like TabBar)
centerTitle bool false Whether to center the title

Advanced Examples

Gradient background with actions:

CustomAppBar(
  title: 'Gradient App',
  gradient: LinearGradient(
    colors: [Colors.purple, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  actions: [
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
  ],
)

Custom height with bottom TabBar:

CustomAppBar(
  title: 'Tabbed View',
  height: 100,
  bottom: TabBar(
    tabs: [
      Tab(icon: Icon(Icons.home)),
      Tab(icon: Icon(Icons.settings)),
    ],
  ),
)

Demo

The package includes a CustomAppBarWidget demo that shows:

  • Gradient background
  • Back button functionality
  • Action buttons
  • TabBar integration

To run the demo:

void main() {
  runApp(MaterialApp(
    home: CustomAppBarWidget(),
  ));
}

Implementation Details

The widget:

  1. Implements PreferredSizeWidget for proper Scaffold integration
  2. Uses transparent background when gradient is specified
  3. Automatically handles height calculations including bottom widget
  4. Provides both text and widget title options
  5. Maintains all standard AppBar functionality

Best Practices

  1. Use gradients sparingly for visual hierarchy
  2. Keep action icons to 2-3 for usability
  3. Set centerTitle based on your app's design system
  4. Combine with TabBar for tabbed interfaces
  5. Use consistent heights across your app

Comparison with Flutter's AppBar

Feature Flutter AppBar CustomAppBar
Gradient background Manual Built-in
Height control Limited Full control
Title flexibility Basic Text or Widget
Bottom widget Yes Enhanced handling
Back button Manual Built-in option
PreferredSize Automatic Customizable

Common Use Cases

  • Branded app headers
  • Tabbed interfaces
  • Gradient-themed apps
  • Custom navigation patterns
  • Action-heavy interfaces
  • Design systems requiring consistent app bars

Libraries

apptomate_custom_appbar