GT AppBar

pub package License Flutter

A customizable AppBar widget for Flutter with enhanced features including curved bottom edges, optional divider, gradient backgrounds, and full Material 3 support.

✨ Features

  • 🎨 Curved Bottom Edge - Create unique AppBars with customizable bottom curvature
  • Optional Divider - Add a divider below the AppBar for visual separation
  • 🌈 Gradient Backgrounds - Apply beautiful gradient backgrounds
  • 🎯 Material 3 Ready - Full support for Material 3 theming
  • 📝 Flexible Title - Use String or any Widget as title
  • 🔧 Highly Customizable - Extensive options for colors, spacing, and styling

📦 Installation

Add to your pubspec.yaml:

dependencies:
  gt_appbar: ^1.1.0

Then run:

flutter pub get

🚀 Quick Start

Basic Usage

import 'package:gt_appbar/gt_appbar.dart';

Scaffold(
  appBar: GTAppBar(
    title: 'My App',
  ),
  body: YourContent(),
)

Curved Bottom

GTAppBar(
  title: 'Curved AppBar',
  bottomCurveness: 20.0,
  backgroundColor: Colors.indigo,
)

With Divider

GTAppBar(
  title: 'With Divider',
  showDivider: true,
  dividerColor: Colors.grey,
  dividerThickness: 2.0,
)

Gradient Background

GTAppBar(
  title: 'Gradient AppBar',
  gradient: const LinearGradient(
    colors: [Colors.purple, Colors.blue],
    begin: Alignment.topLeft,
    end: Alignment.bottomRight,
  ),
  foregroundColor: Colors.white,
)

Custom Title Widget

GTAppBar(
  titleWidget: Row(
    children: [
      Icon(Icons.star),
      SizedBox(width: 8),
      Text('Custom Title'),
    ],
  ),
)

With TabBar

GTAppBar(
  title: 'With Tabs',
  bottom: TabBar(
    tabs: [
      Tab(text: 'Home'),
      Tab(text: 'Profile'),
      Tab(text: 'Settings'),
    ],
  ),
)

Full Customization

GTAppBar(
  title: 'Fully Customized',
  titleTextStyle: TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
  ),
  backgroundColor: Colors.teal,
  foregroundColor: Colors.white,
  bottomCurveness: 16.0,
  showDivider: true,
  elevation: 4.0,
  centerTitle: true,
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {},
  ),
  actions: [
    IconButton(icon: Icon(Icons.search), onPressed: () {}),
    IconButton(icon: Icon(Icons.notifications), onPressed: () {}),
  ],
)

📋 API Reference

Property Type Default Description
title String? - Title text for the AppBar
titleWidget Widget? - Custom widget for the title
titleTextStyle TextStyle? - Style for the title text
leading Widget? - Widget at the start of the AppBar
automaticallyImplyLeading bool true Auto-add leading if null
actions List<Widget>? - Widgets at the end of the AppBar
backgroundColor Color? Theme primary Background color
gradient Gradient? - Gradient background
foregroundColor Color? - Color for title and icons
bottomCurveness double 0.0 Bottom border radius
showDivider bool false Show divider below AppBar
dividerColor Color? Theme divider Divider color
dividerThickness double 1.0 Thickness of divider
elevation double 0 Shadow elevation
centerTitle bool false Center the title
bottom PreferredSizeWidget? - Widget below toolbar (e.g., TabBar)
flexibleSpace Widget? - Content behind the toolbar
toolbarHeight double? kToolbarHeight Height of the toolbar
primary bool true Is primary AppBar
forceMaterialTransparency bool false Force transparency

📱 Platform Support

Platform Support
Android
iOS
Web
macOS
Windows
Linux

📄 License

This project is licensed under the BSD 3-Clause License - see the LICENSE file for details.

Libraries

gt_appbar
GT AppBar - A customizable AppBar widget for Flutter