gliph_ui 1.3.0
gliph_ui: ^1.3.0 copied to clipboard
A premium suite of highly-customizable UI components for Flutter, starting with iOS-style 3D scroll pickers.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:gliph_ui/gliph_ui.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Gliph UI Example',
theme: ThemeData(
brightness: Brightness.dark,
useMaterial3: true,
),
home: const NavbarShowcase(),
);
}
}
class NavbarShowcase extends StatefulWidget {
const NavbarShowcase({super.key});
@override
State<NavbarShowcase> createState() => _NavbarShowcaseState();
}
class _NavbarShowcaseState extends State<NavbarShowcase> {
String _activeTab = 'home';
NavbarVariant _variant = NavbarVariant.floating;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: const Color(0xFF050505),
appBar: AppBar(
title: const Text('Gliph Navbar'),
backgroundColor: Colors.transparent,
elevation: 0,
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Active Tab: ${_activeTab.toUpperCase()}',
style: const TextStyle(color: Colors.white, fontSize: 24, fontWeight: FontWeight.bold),
),
const SizedBox(height: 40),
Wrap(
gap: 10,
children: NavbarVariant.values.map((v) {
return ChoiceChip(
label: Text(v.name.toUpperCase()),
selected: _variant == v,
onSelected: (selected) {
if (selected) setState(() => _variant = v);
},
);
}).toList(),
),
],
),
),
bottomNavigationBar: Navbar(
variant: _variant,
activeTab: _activeTab,
onTabChange: (id) => setState(() => _activeTab = id),
actionButton: _variant == NavbarVariant.floating ? ActionButtonObj(
icon: (c, s) => Icon(Icons.add, color: c, size: s),
onPress: () => debugPrint('Action Pressed'),
color: Colors.indigoAccent,
) : null,
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_outlined, color: c, size: s),
activeIcon: (c, s) => Icon(Icons.search, color: c, size: s),
),
NavbarTab(
id: 'profile',
label: 'Profile',
icon: (c, s) => Icon(Icons.person_outline, color: c, size: s),
activeIcon: (c, s) => Icon(Icons.person, color: c, size: s),
),
],
),
);
}
}