custom_gradient_app_bar 0.0.4 copy "custom_gradient_app_bar: ^0.0.4" to clipboard
custom_gradient_app_bar: ^0.0.4 copied to clipboard

CustomGradientAppBar is a customizable Flutter app bar widget featuring a beautiful diagonal gradient background with smooth curved corners and subtle shadow effects. Designed for ease of use and flexibility.

📱 Custom Gradient App Bar #

A customizable, beautiful gradient app bar with rounded corners and shadow, designed to replace the default Flutter AppBar. Built with flexibility in mind—control the icons, colors, actions, and more!

✨ Features #

✅ Gradient background with customizable colors
✅ Rounded bottom corners and shadow for depth
✅ Custom menu and add icons
✅ SafeArea-aware padding
✅ Implements PreferredSizeWidget so it fits naturally in Scaffold


🚀 Getting Started #

1. Add dependency #

Add the following to your pubspec.yaml:

dependencies:
  custom_gradient_app_bar: ^0.0.4

2. Example Usage #

import 'package:flutter/material.dart';
import 'package:custom_gradient_app_bar/custom_gradient_app_bar.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Gradient AppBar Demo',
      theme: ThemeData(primarySwatch: Colors.orange),
      home: const VideoHomePage(),
    );
  }
}

class VideoHomePage extends StatelessWidget {
  const VideoHomePage({super.key});

  void _showAddVideoDialog(BuildContext context) {
    showDialog(
      context: context,
      builder: (_) => AlertDialog(
        title: const Text("Add Video"),
        content: const Text("Video upload feature coming soon!"),
        actions: [
          TextButton(
            onPressed: () => Navigator.pop(context),
            child: const Text("OK"),
          ),
        ],
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: const Drawer(),
      appBar: CustomGradientAppBar(
        title: "Online Videos",
        gradientColors: [Colors.orange, Colors.deepOrangeAccent],
        leadingIcon: const Icon(Icons.menu, color: Colors.white, size: 30),
        trailingIcon: const Icon(Icons.video_call, color: Colors.white),
        onleadingPressed: () {
          //your code
        },
        ontrailingPressed: () {
          //your code
        },
      ),
      body: const Center(
        child: Text(
          "Welcome to the Video App!",
          style: TextStyle(fontSize: 18),
        ),
      ),
    );
  }
1
likes
115
points
39
downloads

Documentation

API reference

Publisher

unverified uploader

Weekly Downloads

CustomGradientAppBar is a customizable Flutter app bar widget featuring a beautiful diagonal gradient background with smooth curved corners and subtle shadow effects. Designed for ease of use and flexibility.

Homepage

License

MIT (license)

Dependencies

flutter

More

Packages that depend on custom_gradient_app_bar