New bottom navbar

packages/uni_ui/lib/navbar/bottom_navbar.dart

@@ -0,0 +1,108 @@
+import 'package:figma_squircle/figma_squircle.dart';
+import 'package:flutter/material.dart';
+import 'package:uni_ui/navbar/bottom_navbar_item.dart';
+
+class _BottomNavbarContainer extends StatelessWidget {
+ _BottomNavbarContainer({required this.child});
+
+ final Widget child;
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ height: 80,
+ margin: EdgeInsets.only(left: 20, right: 20, bottom: 20),
+ decoration: ShapeDecoration(
+ color: Theme.of(context).colorScheme.primary,
+ shape: SmoothRectangleBorder(
+ borderRadius: SmoothBorderRadius(
+ cornerRadius: 20,
+ cornerSmoothing: 1,
+ )),
+ shadows: [
+ BoxShadow(
+ color: Theme.of(context).colorScheme.shadow.withAlpha(0x7f),
+ blurRadius: 5,
+ offset: Offset(0, 3),
+ ),
+ ],
+ ),
+ child: ClipSmoothRect(
+ radius: SmoothBorderRadius(
+ cornerRadius: 20,
+ cornerSmoothing: 1,
+ ),
+ child: Container(
+ decoration: BoxDecoration(
+ gradient: RadialGradient(
+ colors: [
+ Theme.of(context).colorScheme.tertiary.withAlpha(0x3f),
+ Colors.transparent,
+ ],
+ center: Alignment(-0.5, -1.1),
+ radius: 2.5,
+ ),
+ ),
+ child: Container(
+ decoration: BoxDecoration(
+ gradient: RadialGradient(
+ colors: [
+ Theme.of(context).colorScheme.tertiary.withAlpha(0x3f),
+ Colors.transparent,
+ ],
+ center: Alignment.bottomRight,
+ radius: 2.5,
+ )),
+ child: child,
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+class BottomNavbar extends StatefulWidget {
+ BottomNavbar({super.key, required this.items});
+
+ final List<BottomNavbarItem> items;
+
+ @override
+ _BottomNavbarState createState() => _BottomNavbarState();
+}
+
+class _BottomNavbarState extends State<BottomNavbar> {
+ void _refresh() {
+ setState(() {});
+ }
+
+ void _onTap(int index) {
+ widget.items[index].onTap();
+ _refresh();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return _BottomNavbarContainer(
+ child: Theme(
+ data: Theme.of(context).copyWith(
+ splashColor: Theme.of(context).colorScheme.tertiary.withAlpha(0x1f),
+ highlightColor: Colors.transparent,
+ ),
+ child: BottomNavigationBar(
+ onTap: _onTap,
+ backgroundColor: Colors.transparent,
+ elevation: 0,
+ iconSize: 32,
+ type: BottomNavigationBarType.fixed,
+ items: widget.items
+ .map((item) => item.toBottomNavigationBarItem(context))
+ .toList(),
+ selectedFontSize: 0,
+ unselectedFontSize: 0,
+ showSelectedLabels: false,
+ showUnselectedLabels: false,
+ ),
+ ),
+ );
+ }
+}

packages/uni_ui/lib/navbar/bottom_navbar_item.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:phosphor_flutter/phosphor_flutter.dart';
+
+abstract class NavbarDefaultIcons {
+ static final home = PhosphorIcons.house(PhosphorIconsStyle.duotone);
+ static final academic =
+ PhosphorIcons.graduationCap(PhosphorIconsStyle.duotone);
+ static final restaurant = PhosphorIcons.forkKnife(PhosphorIconsStyle.duotone);
+ static final faculty = PhosphorIcons.buildings(PhosphorIconsStyle.duotone);
+ static final map = PhosphorIcons.mapTrifold(PhosphorIconsStyle.duotone);
+}
+
+class BottomNavbarItem {
+ BottomNavbarItem({
+ required this.icon,
+ required this.isSelected,
+ required this.onTap,
+ });
+
+ final IconData icon;
+ final bool Function() isSelected;
+ final void Function() onTap;
+
+ BottomNavigationBarItem toBottomNavigationBarItem(BuildContext context) {
+ return BottomNavigationBarItem(
+ icon: Container(
+ padding: EdgeInsets.all(6),
+ decoration: isSelected()
+ ? BoxDecoration(
+ color: Theme.of(context).colorScheme.tertiary.withAlpha(0x2f),
+ borderRadius: BorderRadius.circular(10),
+ )
+ : null,
+ child: PhosphorIcon(
+ icon,
+ color: Theme.of(context).colorScheme.secondary,
+ ),
+ ),
+ label: '',
+ );
+ }
+}