custom_gradient_app_bar 0.0.4
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),
),
),
);
}