{"id":27443854,"url":"https://github.com/jamalihassan0307/glassmorphic_ui_kit","last_synced_at":"2025-10-17T07:31:53.055Z","repository":{"id":285768904,"uuid":"959218326","full_name":"jamalihassan0307/glassmorphic_ui_kit","owner":"jamalihassan0307","description":"Modern, glassmorphic UI in Flutter, elegantly implemented by Jamalihassan0307. Expect smooth blur, frosted effects, and gradient magic.","archived":false,"fork":false,"pushed_at":"2025-04-05T05:06:16.000Z","size":11768,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T02:57:54.805Z","etag":null,"topics":["flutter","flutter-packages","flutter-plugin","glassmorphic","glassmorphism-effect","glassmorphism-ui","jamalihassan0307","pakages-kit","pub-dev"],"latest_commit_sha":null,"homepage":"https://pub.dev/packages/glassmorphic_ui_kit","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamalihassan0307.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-04-02T12:53:50.000Z","updated_at":"2025-04-04T12:12:19.000Z","dependencies_parsed_at":"2025-04-02T15:47:32.745Z","dependency_job_id":null,"html_url":"https://github.com/jamalihassan0307/glassmorphic_ui_kit","commit_stats":null,"previous_names":["jamalihassan0307/glassmorphic_ui_kit"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamalihassan0307%2Fglassmorphic_ui_kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamalihassan0307%2Fglassmorphic_ui_kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamalihassan0307%2Fglassmorphic_ui_kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamalihassan0307%2Fglassmorphic_ui_kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamalihassan0307","download_url":"https://codeload.github.com/jamalihassan0307/glassmorphic_ui_kit/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248997095,"owners_count":21195797,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flutter","flutter-packages","flutter-plugin","glassmorphic","glassmorphism-effect","glassmorphism-ui","jamalihassan0307","pakages-kit","pub-dev"],"created_at":"2025-04-15T02:57:58.100Z","updated_at":"2025-10-17T07:31:53.049Z","avatar_url":"https://github.com/jamalihassan0307.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\n\u003cdiv align=\"center\"\u003e\n  \u003ckbd\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/image/banner.png?raw=true\" width=\"100%\" alt=\"AI Chat Plus Banner\"/\u003e\n  \u003c/kbd\u003e\n  \n  \u003ch1\u003e🌟 Glassmorphic UI Kit 🌟\u003c/h1\u003e\n  \u003cp\u003e\u003ci\u003eModern, beautiful glass effects for Flutter apps\u003c/i\u003e\u003c/p\u003e\n  \n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/jamalihassan0307\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/Created_by-Jam_Ali_Hassan-blue?style=for-the-badge\u0026logo=github\u0026logoColor=white\" alt=\"Created by\"/\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://github.com/jamalihassan0307\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/GitHub-100000?style=for-the-badge\u0026logo=github\u0026logoColor=white\" alt=\"GitHub\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://www.linkedin.com/in/jamalihassan0307\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge\u0026logo=linkedin\u0026logoColor=white\" alt=\"LinkedIn\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://jamalihassan0307.github.io/portfolio.github.io\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/Portfolio-255E63?style=for-the-badge\u0026logo=About.me\u0026logoColor=white\" alt=\"Portfolio\"/\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://pub.dev/packages/glassmorphic_ui_kit\"\u003e\n      \u003cimg src=\"https://img.shields.io/pub/v/glassmorphic_ui_kit?style=for-the-badge\u0026logo=dart\u0026logoColor=white\" alt=\"Pub Version\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://flutter.dev\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/Platform-Flutter-02569B?style=for-the-badge\u0026logo=flutter\" alt=\"Platform\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://opensource.org/licenses/MIT\"\u003e\n      \u003cimg src=\"https://img.shields.io/badge/License-MIT-yellow.svg?style=for-the-badge\" alt=\"License: MIT\"/\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003ca href=\"https://pub.dev/packages/glassmorphic_ui_kit\"\u003e\n      \u003cimg src=\"https://img.shields.io/pub/likes/glassmorphic_ui_kit?style=for-the-badge\u0026logo=flutter\u0026logoColor=white\u0026label=Pub%20Likes\" alt=\"Pub Likes\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://pub.dev/packages/glassmorphic_ui_kit\"\u003e\n      \u003cimg src=\"https://img.shields.io/pub/points/glassmorphic_ui_kit?style=for-the-badge\u0026logo=flutter\u0026logoColor=white\u0026label=Pub%20Points\" alt=\"Pub Points\"/\u003e\n    \u003c/a\u003e\n    \u003ca href=\"https://pub.dev/packages/glassmorphic_ui_kit\"\u003e\n      \u003cimg src=\"https://img.shields.io/pub/popularity/glassmorphic_ui_kit?style=for-the-badge\u0026logo=flutter\u0026logoColor=white\u0026label=Popularity\" alt=\"Popularity\"/\u003e\n    \u003c/a\u003e\n  \u003c/p\u003e\n\n  \u003cp align=\"center\"\u003e\n    \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/my/plus/main/image/demo.gif\" width=\"600\" alt=\"Demo\"/\u003e\n  \u003c/p\u003e\n\u003c/div\u003e\n\n---\n\n# Glassmorphic UI Kit 🌟\n\nA Flutter package designed to implement modern glassmorphic UI trends with smooth blur effects, frosted glass appearance, and gradient overlays. Enhance your app's user experience with sleek, futuristic designs.\n\n[![pub package](https://img.shields.io/pub/v/glassmorphic_ui_kit.svg)](https://pub.dev/packages/glassmorphic_ui_kit)\n[![likes](https://img.shields.io/pub/likes/glassmorphic_ui_kit)](https://pub.dev/packages/glassmorphic_ui_kit/score)\n[![popularity](https://img.shields.io/pub/popularity/glassmorphic_ui_kit)](https://pub.dev/packages/glassmorphic_ui_kit/score)\n\n## Features 🛠️\n\n### 1. Prebuilt Glass Widgets\n- `GlassContainer`: Base component for glass effects\n- `GlassButton`: Blurred button with ripple effect\n- `GlassCard`: Frosted-glass card for UI elements\n- `GlassDialog`: Customizable glass dialog\n- `GlassBottomSheet`: Blurred bottom sheet with opacity control\n- `GlassNavigationBar`: Modern navigation bar with glass effect\n- `GlassNavigationDrawer`: Drawer with glass effect and custom tiles\n- `GlassProgressIndicator`: Progress bar with glass effect\n- `GlassSlider`: Customizable slider with glass effect\n- `GlassTextField`: Text input with glass effect\n\n### 2. Customizable Blur \u0026 Transparency\n- Adjustable blur intensity\n- Dynamic opacity control\n- Customizable border radius\n- Improved MouseCursor handling\n\n### 3. Gradient Overlays\n- Linear gradient support\n- Radial gradient support\n- Dynamic gradient animations\n- Custom gradient patterns\n\n### 4. Performance Optimized\n- Efficient rendering\n- Smooth animations\n- Reduced widget rebuild cycles\n- Better state management\n- Flutter's Skia engine optimized\n\n### 5. Cross-Platform Support\n- iOS ✓\n- Android ✓\n- Web ✓\n- Windows \u0026 macOS ✓\n\n## Getting Started 🚀\n\nAdd the package to your `pubspec.yaml`:\n\n```yaml\ndependencies:\n  glassmorphic_ui_kit: ^1.1.6\n```\n\n\n\n## Usage Examples 💻\n\n### Navigation Components\n\n#### 1. Navigation Drawer\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/gif/drawer_gif.gif\" width=\"250\" alt=\"Basic Drawer\"/\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/drawer.jpg\" width=\"250\" alt=\"Custom Drawer\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassNavigationDrawer(\n  blur: 10,\n  opacity: 0.2,\n  gradient: LinearGradient(\n    begin: Alignment.topLeft,\n    end: Alignment.bottomRight,\n    colors: [\n      Colors.white.withAlpha(51),\n      Colors.white.withAlpha(26),\n    ],\n  ),\n  children: [\n    UserAccountsDrawerHeader(\n      decoration: BoxDecoration(color: Colors.transparent),\n      accountName: Text('John Doe'),\n      accountEmail: Text('john.doe@example.com'),\n      currentAccountPicture: CircleAvatar(\n        child: Icon(Icons.person),\n      ),\n    ),\n    ListTile(\n      leading: Icon(Icons.home, color: Colors.white),\n      title: Text('Home', style: TextStyle(color: Colors.white)),\n      onTap: () =\u003e Navigator.pop(context),\n    ),\n  ],\n)\n```\n\n#### 2. Navigation Bar\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/navigation_bar.jpg\" width=\"250\" alt=\"Basic Navigation Bar\"/\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/gif/navigation_bar_gif.gif\" width=\"250\" alt=\"Interactive Navigation Bar\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassNavigationBar(\n  selectedIndex: _selectedIndex,\n  onDestinationSelected: (index) =\u003e setState(() =\u003e _selectedIndex = index),\n  destinations: [\n    GlassNavigationDestination(\n      icon: Icon(Icons.home_outlined, color: Colors.white70),\n      selectedIcon: Icon(Icons.home, color: Colors.white),\n      label: 'Home',\n    ),\n    GlassNavigationDestination(\n      icon: Icon(Icons.favorite_outline, color: Colors.white70),\n      selectedIcon: Icon(Icons.favorite, color: Colors.white),\n      label: 'Favorites',\n    ),\n    GlassNavigationDestination(\n      icon: Icon(Icons.person_outline, color: Colors.white70),\n      selectedIcon: Icon(Icons.person, color: Colors.white),\n      label: 'Profile',\n    ),\n  ],\n)\n```\n\n#### 3. Navigation Rail\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/navigation_tabs.jpg\" width=\"250\" alt=\"Basic Navigation Rail\"/\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/gif/navigation_tabs_gif.gif\" width=\"250\" alt=\"Interactive Navigation Rail\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassNavigationRail(\n  selectedIndex: _selectedIndex,\n  onDestinationSelected: (index) =\u003e setState(() =\u003e _selectedIndex = index),\n  elevation: 1,\n  gradient: LinearGradient(\n    colors: [\n      Colors.purple.withAlpha(77),\n      Colors.blue.withAlpha(51),\n    ],\n  ),\n  leading: CircleAvatar(\n    radius: 20,\n    backgroundColor: Colors.white24,\n    child: Icon(Icons.person, color: Colors.white),\n  ),\n  destinations: const [\n    GlassNavigationRailDestination(\n      icon: Icon(Icons.dashboard_outlined),\n      selectedIcon: Icon(Icons.dashboard),\n      label: Text('Dashboard'),\n    ),\n    GlassNavigationRailDestination(\n      icon: Icon(Icons.analytics_outlined),\n      selectedIcon: Icon(Icons.analytics),\n      label: Text('Analytics'),\n    ),\n  ],\n)\n```\n\n#### 4. Tab Bar\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/tab_bar.jpg\" width=\"250\" alt=\"Basic Tab Bar\"/\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/gif/tab_bar_gif.gif\" width=\"250\" alt=\"Interactive Tab Bar\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassTabBar(\n  controller: _tabController,\n  tabs: const [\n    Tab(text: 'Photos'),\n    Tab(text: 'Videos'),\n    Tab(text: 'Files'),\n  ],\n)\n```\n\n### Basic Components\n\n#### 1. Glass Container\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/gif/components_gif.gif\" width=\"300\" alt=\"Glass Components\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassContainer(\n  width: 300,\n  height: 200,\n  blur: 20,\n  borderRadius: BorderRadius.circular(15),\n  gradient: LinearGradient(\n    begin: Alignment.topLeft,\n    end: Alignment.bottomRight,\n    colors: [\n      Colors.white.withAlpha(51),\n      Colors.white.withAlpha(26),\n    ],\n  ),\n  child: Center(child: Text(\"Glassmorphic Container\")),\n)\n```\n\n#### 2. Glass Button\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/components.jpg\" width=\"300\" alt=\"Glass Button\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassButton(\n  onPressed: () =\u003e print('Button pressed'),\n  blur: 10,\n  borderRadius: BorderRadius.circular(15),\n  gradient: LinearGradient(\n    colors: [\n      Colors.blue.withAlpha(77),\n      Colors.purple.withAlpha(51),\n    ],\n  ),\n  padding: EdgeInsets.symmetric(horizontal: 32, vertical: 16),\n  child: Row(\n    mainAxisSize: MainAxisSize.min,\n    children: [\n      Icon(Icons.add, color: Colors.white),\n      SizedBox(width: 8),\n      Text(\"Glass Button\", style: TextStyle(color: Colors.white)),\n    ],\n  ),\n)\n```\n\n#### 3. Glass Card\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/components1.jpg\" width=\"300\" alt=\"Glass Card\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassCard(\n  width: double.infinity,\n  height: 200,\n  blur: 20,\n  borderRadius: BorderRadius.circular(20),\n  gradient: LinearGradient(\n    begin: Alignment.topLeft,\n    end: Alignment.bottomRight,\n    colors: [\n      Colors.white.withAlpha(51),\n      Colors.white.withAlpha(26),\n    ],\n  ),\n  child: Padding(\n    padding: EdgeInsets.all(16),\n    child: Column(\n      crossAxisAlignment: CrossAxisAlignment.start,\n      children: [\n        Text(\n          \"Glass Card Title\",\n          style: TextStyle(\n            color: Colors.white,\n            fontSize: 24,\n            fontWeight: FontWeight.bold,\n          ),\n        ),\n        SizedBox(height: 8),\n        Text(\n          \"This is a card with glass effect that can contain any widget.\",\n          style: TextStyle(color: Colors.white70),\n        ),\n      ],\n    ),\n  ),\n)\n```\n\n#### 4. Glass Dialog\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/gif/alerts_gif.gif\" width=\"300\" alt=\"Glass Dialog\"/\u003e\n\u003c/div\u003e\n\n```dart\nshowDialog(\n  context: context,\n  builder: (context) =\u003e GlassDialog(\n    title: Text(\n      'Glass Dialog',\n      style: TextStyle(\n        color: Colors.white,\n        fontSize: 24,\n        fontWeight: FontWeight.bold,\n      ),\n    ),\n    content: Text(\n      'This is a glassmorphic dialog with blur effect and gradient overlay.',\n      style: TextStyle(color: Colors.white),\n    ),\n    actions: [\n      GlassButton(\n        onPressed: () =\u003e Navigator.pop(context),\n        child: Text('Cancel', style: TextStyle(color: Colors.white)),\n      ),\n      GlassButton(\n        onPressed: () =\u003e Navigator.pop(context, true),\n        child: Text('Confirm', style: TextStyle(color: Colors.white)),\n      ),\n    ],\n  ),\n)\n```\n\n#### 5. Glass Bottom Sheet\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/alerts.jpg\" width=\"300\" alt=\"Glass Bottom Sheet\"/\u003e\n\u003c/div\u003e\n\n```dart\nshowModalBottomSheet(\n  context: context,\n  backgroundColor: Colors.transparent,\n  builder: (context) =\u003e GlassContainer(\n    height: 300,\n    gradient: LinearGradient(\n      begin: Alignment.topLeft,\n      end: Alignment.bottomRight,\n      colors: [\n        Colors.white.withAlpha(51),\n        Colors.white.withAlpha(26),\n      ],\n    ),\n    child: Column(\n      mainAxisSize: MainAxisSize.min,\n      children: [\n        ListTile(\n          leading: Icon(Icons.share, color: Colors.white),\n          title: Text('Share', style: TextStyle(color: Colors.white)),\n          onTap: () =\u003e Navigator.pop(context),\n        ),\n        ListTile(\n          leading: Icon(Icons.edit, color: Colors.white),\n          title: Text('Edit', style: TextStyle(color: Colors.white)),\n          onTap: () =\u003e Navigator.pop(context),\n        ),\n      ],\n    ),\n  ),\n)\n```\n\n#### 6. Glass Text Field\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/components2.jpg\" width=\"300\" alt=\"Glass Text Field\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassTextField(\n  controller: _textController,\n  hintText: 'Enter text...',\n  blur: 10,\n  borderRadius: BorderRadius.circular(15),\n  gradient: LinearGradient(\n    colors: [\n      Colors.white.withAlpha(51),\n      Colors.white.withAlpha(26),\n    ],\n  ),\n  style: TextStyle(color: Colors.white),\n  cursorColor: Colors.white,\n  decoration: InputDecoration(\n    prefixIcon: Icon(Icons.search, color: Colors.white70),\n    border: InputBorder.none,\n    hintStyle: TextStyle(color: Colors.white70),\n  ),\n)\n```\n\n#### 7. Glass Progress Indicator\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/gif/components_gif.gif\" width=\"300\" alt=\"Glass Progress Indicator\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassProgressIndicator(\n  value: 0.7, // 70% progress\n  height: 8.0,\n  blur: 10,\n  borderRadius: BorderRadius.circular(4),\n  gradient: LinearGradient(\n    colors: [\n      Colors.blue.withAlpha(77),\n      Colors.purple.withAlpha(51),\n    ],\n  ),\n)\n```\n\n#### 8. Glass Slider\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/images/components.jpg\" width=\"300\" alt=\"Glass Slider\"/\u003e\n\u003c/div\u003e\n\n```dart\nGlassSlider(\n  value: _sliderValue,\n  onChanged: (value) =\u003e setState(() =\u003e _sliderValue = value),\n  min: 0.0,\n  max: 100.0,\n  divisions: 10,\n  label: '${_sliderValue.round()}',\n  activeColor: Colors.white.withAlpha(200),\n  inactiveColor: Colors.white.withAlpha(100),\n  blur: 10,\n  borderRadius: BorderRadius.circular(10),\n)\n```\n\n#### 9. Animated Glass Container\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://raw.githubusercontent.com/jamalihassan0307/glassmorphic_ui_kit/refs/heads/main/screenshots/gif/components_gif.gif\" width=\"300\" alt=\"Animated Glass Container\"/\u003e\n\u003c/div\u003e\n\n```dart\nAnimatedGlassContainer(\n  duration: Duration(milliseconds: 500),\n  width: _isExpanded ? 300 : 200,\n  height: _isExpanded ? 200 : 100,\n  blur: _isExpanded ? 20 : 10,\n  gradient: LinearGradient(\n    colors: [\n      Colors.white.withAlpha(_isExpanded ? 51 : 26),\n      Colors.white.withAlpha(_isExpanded ? 26 : 13),\n    ],\n  ),\n  child: Center(\n    child: Text(\n      \"Tap to Animate\",\n      style: TextStyle(color: Colors.white),\n    ),\n  ),\n)\n```\n\n## Usage 💻\n\n### Basic Glass Container\n\n```dart\nGlassContainer(\n  width: 300,\n  height: 200,\n  blur: 20,\n  borderRadius: BorderRadius.circular(15),\n  gradient: LinearGradient(\n    colors: [\n      Colors.white.withAlpha(51),  // 0.2 opacity\n      Colors.white.withAlpha(26),  // 0.1 opacity\n    ],\n  ),\n  child: Center(child: Text(\"Glassmorphic Container\")),\n)\n```\n\n### Glass Button\n\n```dart\nGlassButton(\n  onPressed: () =\u003e print('Button pressed'),\n  blur: 10,\n  borderRadius: BorderRadius.circular(15),\n  child: Text(\"Glass Button\"),\n)\n```\n\n### Glass Bottom Navigation Bar\n\n```dart\nGlassBottomNavigationBar(\n  currentIndex: _currentIndex,\n  onTap: (index) =\u003e setState(() =\u003e _currentIndex = index),\n  items: const [\n    GlassBottomNavigationBarItem(\n      icon: Icon(Icons.home),\n      label: 'Home',\n    ),\n    GlassBottomNavigationBarItem(\n      icon: Icon(Icons.search),\n      label: 'Search',\n    ),\n  ],\n)\n```\n\n### Glass Drawer\n\n```dart\nGlassDrawer(\n  blur: 10,\n  opacity: 0.2,\n  child: Column(\n    children: [\n      GlassDrawerTile(\n        leading: Icon(Icons.home),\n        title: Text('Home'),\n        onTap: () {},\n      ),\n      GlassDrawerTile(\n        leading: Icon(Icons.settings),\n        title: Text('Settings'),\n        onTap: () {},\n      ),\n    ],\n  ),\n)\n```\n\n### Glass Progress Indicator\n\n```dart\nGlassProgressIndicator(\n  value: 0.7, // 70% progress\n  height: 8.0,\n  blur: 10,\n  borderRadius: BorderRadius.circular(4),\n)\n```\n\n### Glass Navigation Rail\n```dart\nGlassNavigationRail(\n  selectedIndex: _selectedIndex,\n  onDestinationSelected: (index) =\u003e setState(() =\u003e _selectedIndex = index),\n  elevation: 1, // New parameter for proper elevation\n  gradient: LinearGradient(\n    colors: [\n      Colors.purple.withAlpha(77),\n      Colors.blue.withAlpha(51),\n    ],\n  ),\n  leading: Column(\n    children: [\n      CircleAvatar(\n        radius: 20,\n        backgroundColor: Colors.white24,\n        child: Icon(Icons.person, color: Colors.white),\n      ),\n      SizedBox(height: 8),\n      Container(\n        width: 40,\n        height: 4,\n        decoration: BoxDecoration(\n          color: Colors.white24,\n          borderRadius: BorderRadius.circular(2),\n        ),\n      ),\n    ],\n  ),\n  destinations: const [\n    GlassNavigationRailDestination(\n      icon: Icon(Icons.dashboard_outlined, color: Colors.white70),\n      selectedIcon: Icon(Icons.dashboard, color: Colors.white),\n      label: Text('Dashboard'),\n    ),\n    GlassNavigationRailDestination(\n      icon: Icon(Icons.analytics_outlined, color: Colors.white70),\n      selectedIcon: Icon(Icons.analytics, color: Colors.white),\n      label: Text('Analytics'),\n    ),\n  ],\n)\n```\n\n## Theming 🎨\n\nYou can create a consistent glass effect theme across your app:\n\n```dart\nfinal glassTheme = GlassTheme(\n  blur: 10.0,\n  opacity: 0.2,\n  borderRadius: BorderRadius.circular(15),\n  gradient: LinearGradient(\n    begin: Alignment.topLeft,\n    end: Alignment.bottomRight,\n    colors: [\n      Colors.white.withAlpha(51),\n      Colors.white.withAlpha(26),\n    ],\n  ),\n);\n\n// Use the theme\nGlassContainer(\n  blur: glassTheme.blur,\n  opacity: glassTheme.opacity,\n  borderRadius: glassTheme.borderRadius,\n  gradient: glassTheme.gradient,\n  child: YourWidget(),\n)\n```\n\n## Additional Information 📚\n\n### Customization\nAll components support extensive customization:\n- Blur intensity\n- Opacity levels\n- Gradient colors\n- Border radius\n- Animations\n\n### Best Practices\n1. Use against contrasting backgrounds\n2. Maintain readable text contrast\n3. Consider performance impact with multiple overlapping effects\n4. Test on various devices for consistent appearance\n5. Use withAlpha instead of withOpacity for better precision\n\n### Contributing\nContributions are welcome! Please feel free to submit a Pull Request.\n\n### License\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Support ❤️\n\nIf you find this package helpful, please give it a ⭐️ on [GitHub](https://github.com/jamalihassan0307/glassmorphic_ui_kit)!\n\nFor issues, feature requests, or questions, please file an issue on the GitHub repository.\n\n### Best Practices for Navigation Components\n1. Always wrap buttons that use `Scaffold.of(context)` with a `Builder` widget\n2. Use proper constraints to prevent overflow in navigation layouts\n3. Set appropriate elevation values for navigation components\n4. Handle state management properly in navigation screens\n5. Consider responsive design for different screen sizes\n\n## Contact\n\n- 👨‍💻 Developed by [Jam Ali Hassan](https://github.com/jamalihassan0307)\n- 🌐 [Portfolio](https://jamalihassan0307.github.io/portfolio.github.io)\n- 📧 Email: jamalihassan0307@gmail.com\n- 🔗 [LinkedIn](https://www.linkedin.com/in/jamalihassan0307)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamalihassan0307%2Fglassmorphic_ui_kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamalihassan0307%2Fglassmorphic_ui_kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamalihassan0307%2Fglassmorphic_ui_kit/lists"}