gliph_ui 1.3.0

A premium suite of highly-customizable UI components for Flutter, starting with iOS-style 3D scroll pickers.

Gliph UI for Flutter 💎

A premium suite of highly-customizable UI components for Flutter, featuring beautifully animated glassmorphism aesthetics and fluid physics.

🌐 Official Documentation & Live Previews

---

✨ Features

• Fluid Animations: High-performance animations and transitions using Flutter's robust animation system.
• Glassmorphism Design: Modern, translucent aesthetics powered by BackdropFilter.
• Multi-Variant Navbar: 4 distinct styles (Floating, Classic, Minimal, iOS) with action button support.
• Premium Pickers: Specialized 3D scroll pickers for dates, times, and weights.
• Scale & Calendar: Precise ruler-style selection and a high-performance calendar.

---

📦 Installation

Add gliph_ui to your pubspec.yaml:

dependencies:
  gliph_ui: ^1.3.0

Then run:

flutter pub get

---

🛠 Quick Start

Navbar Example (Floating Variant)

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

class MyPage extends StatefulWidget {
  @override
  State<MyPage> createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  String activeTab = 'home';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.black,
      bottomNavigationBar: Navbar(
        variant: NavbarVariant.floating,
        activeTab: activeTab,
        onTabChange: (id) => setState(() => activeTab = id),
        tabs: [
          NavbarTab(
            id: 'home',
            label: 'Home',
            icon: (c, s) => Icon(Icons.home_outlined, color: c, size: s),
            activeIcon: (c, s) => Icon(Icons.home, color: c, size: s),
          ),
          NavbarTab(
            id: 'search',
            label: 'Search',
            icon: (c, s) => Icon(Icons.search, color: c, size: s),
          ),
        ],
      ),
    );
  }
}

---

🧩 Component Suite

Component	Description
Navbar	Multi-variant animated navigation bar with action button.
CalendarPicker	Modern, high-performance calendar with smooth transitions.
ScalePicker	Precise ruler-style horizontal value selector.
DateScrollPicker	3-column scroll picker for Year, Month, and Day.
TimeScrollPicker	Time selection with Hour, Minute, and AM/PM support.
WeightScrollPicker	Specialized picker for decimal weight values.

---

🎨 Theme Support

Customize the aesthetics using the NavbarTheme:

Navbar(
  theme: NavbarTheme(
    background: Color.fromRGBO(20, 20, 25, 0.85),
    activeColor: Colors.indigoAccent,
    indicatorColor: Colors.indigoAccent.withOpacity(0.15),
  ),
  ...
)

---

📖 Additional Information

For more documentation and examples, please visit the Official Website.

Designed with ❤️ by praveenkaruppusamy2005