ayushya/noo
1
0
Fork 0
Code Pull Requests Actions Packages Projects Releases 14 Activity

Rebuild Noo as a full Nextcloud client: auth, media, and Material You UI

Browse Source 
Replaces the starter template with Login Flow v2 auth, WebDAV-backed
Files/Photos/Activity tabs, a swipeable media viewer with PDF/text/video
preview, Material You dynamic theming, a frosted-glass floating nav bar,
and a rebranded app icon/identity (com.example -> family.nasa).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
ayushya
2026-09-15 16:07:02 -04:00
co-authored by Claude Sonnet 5
parent 54f80a65e7
commit f62d912ef7
47 changed files with 5083 additions and 1571 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/widgets/floating_bottom_bar.dart
+110 -115
View File
@@ -1,145 +1,140 @@
import 'dart:ui';
import 'package:flutter/material.dart';
import 'frosted_glass_container.dart';
class FloatingNavItem {
final String label;
final IconData icon;
final IconData selectedIcon;
final String? badge;
const FloatingNavItem({
required this.label,
required this.icon,
required this.selectedIcon,
this.badge,
});
const FloatingNavItem({required this.label, required this.icon});
}
/// A floating pill-shaped bottom navigation bar in the style of Google
/// Photos' 2026 redesign: unselected destinations collapse to just their
/// icon, the selected destination expands into an icon+label capsule, and
/// a detached circular action (search) sits just outside the pill.
class FloatingBottomNavBar extends StatelessWidget {
final int selectedIndex;
final ValueChanged<int> onDestinationSelected;
final List<FloatingNavItem> items;
final bool isVisible;
final VoidCallback? onSearchTap;
final double opacity;
final double blurSigma;
const FloatingBottomNavBar({
super.key,
required this.selectedIndex,
required this.onDestinationSelected,
required this.items,
this.isVisible = true,
this.onSearchTap,
this.opacity = 0.55,
this.blurSigma = 28,
});
@override
Widget build(BuildContext context) {
final theme = Theme.of(context);
final colorScheme = theme.colorScheme;
final colorScheme = Theme.of(context).colorScheme;
return AnimatedSlide(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOutCubic,
offset: isVisible ? Offset.zero : const Offset(0, 1.5),
child: AnimatedOpacity(
duration: const Duration(milliseconds: 250),
opacity: isVisible ? 1.0 : 0.0,
child: SafeArea(
child: Align(
alignment: Alignment.bottomCenter,
child: Container(
margin: const EdgeInsets.only(bottom: 20, left: 24, right: 24),
constraints: const BoxConstraints(maxWidth: 460),
height: 68,
child: ClipRRect(
borderRadius: BorderRadius.circular(34),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest.withValues(alpha: 0.82),
borderRadius: BorderRadius.circular(34),
border: Border.all(
color: colorScheme.outlineVariant.withValues(alpha: 0.3),
width: 1,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.12),
blurRadius: 24,
offset: const Offset(0, 8),
),
],
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: List.generate(items.length, (index) {
final item = items[index];
final isSelected = selectedIndex == index;
return Expanded(
child: InkWell(
onTap: () => onDestinationSelected(index),
borderRadius: BorderRadius.circular(28),
splashColor: colorScheme.primary.withValues(alpha: 0.12),
highlightColor: Colors.transparent,
child: AnimatedContainer(
duration: const Duration(milliseconds: 250),
curve: Curves.easeInOutCubic,
margin: const EdgeInsets.symmetric(horizontal: 4),
padding: const EdgeInsets.symmetric(vertical: 6),
decoration: BoxDecoration(
color: isSelected
? colorScheme.primaryContainer
: Colors.transparent,
borderRadius: BorderRadius.circular(24),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
AnimatedScale(
duration: const Duration(milliseconds: 200),
scale: isSelected ? 1.12 : 1.0,
child: Icon(
isSelected ? item.selectedIcon : item.icon,
size: 22,
color: isSelected
? colorScheme.onPrimaryContainer
: colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 3),
AnimatedDefaultTextStyle(
duration: const Duration(milliseconds: 200),
style: TextStyle(
fontSize: 11,
fontWeight: isSelected
? FontWeight.w700
: FontWeight.w500,
color: isSelected
? colorScheme.onPrimaryContainer
: colorScheme.onSurfaceVariant,
letterSpacing: 0.1,
),
child: Text(
item.label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
),
),
],
),
),
),
);
}),
),
),
),
),
return SafeArea(
child: Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.only(bottom: 20, left: 20, right: 20),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 480),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
_buildPill(context, colorScheme),
const SizedBox(width: 10),
_buildSearchButton(context, colorScheme),
],
),
),
),
),
);
}
Widget _buildPill(BuildContext context, ColorScheme colorScheme) {
return FrostedGlassContainer(
opacity: opacity,
blurSigma: blurSigma,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 6),
child: Row(
mainAxisSize: MainAxisSize.min,
children: List.generate(items.length, (index) {
final item = items[index];
final isSelected = selectedIndex == index;
return InkWell(
onTap: () => onDestinationSelected(index),
borderRadius: BorderRadius.circular(26),
splashColor: colorScheme.primary.withValues(alpha: 0.12),
highlightColor: Colors.transparent,
child: AnimatedContainer(
duration: const Duration(milliseconds: 250),
curve: Curves.easeInOutCubic,
padding: EdgeInsets.symmetric(
horizontal: isSelected ? 16 : 12,
vertical: 12,
),
decoration: BoxDecoration(
color: isSelected ? colorScheme.primary : Colors.transparent,
borderRadius: BorderRadius.circular(26),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
item.icon,
size: 22,
color: isSelected
? colorScheme.onPrimary
: colorScheme.onSurfaceVariant,
),
if (isSelected) ...[
const SizedBox(width: 8),
Text(
item.label,
maxLines: 1,
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 13,
fontWeight: FontWeight.w700,
color: colorScheme.onPrimary,
letterSpacing: 0.1,
),
),
],
],
),
),
);
}),
),
),
);
}
Widget _buildSearchButton(BuildContext context, ColorScheme colorScheme) {
return FrostedGlassContainer(
opacity: opacity,
blurSigma: blurSigma,
child: SizedBox(
width: 52,
height: 52,
child: InkWell(
onTap: onSearchTap,
borderRadius: BorderRadius.circular(32),
splashColor: colorScheme.primary.withValues(alpha: 0.12),
child: Icon(
Icons.search_rounded,
color: colorScheme.onSurfaceVariant,
size: 24,
),
),
),
);
}
}
lib/widgets/frosted_glass_container.dart
+59
View File
@@ -0,0 +1,59 @@
import 'dart:ui';
import 'package:flutter/material.dart';
/// The frosted-glass pill background shared by all floating chrome in the
/// app (bottom nav bar, media viewer action bar): blurred backdrop, a
/// translucent tonal fill, a faint outline, and a soft drop shadow.
class FrostedGlassContainer extends StatelessWidget {
final Widget child;
final double borderRadius;
/// Blur sigma for the backdrop filter. Defaults to a fixed value; pass an
/// explicit value (e.g. from user settings) to make it adjustable.
final double blurSigma;
/// Opacity (0-1) of the tonal fill behind the blur. Defaults to a fixed
/// value; pass an explicit value (e.g. from user settings) to make it
/// adjustable.
final double opacity;
const FrostedGlassContainer({
super.key,
required this.child,
this.borderRadius = 32,
this.blurSigma = 28,
this.opacity = 0.55,
});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return ClipRRect(
borderRadius: BorderRadius.circular(borderRadius),
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
child: Container(
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHighest.withValues(
alpha: opacity,
),
borderRadius: BorderRadius.circular(borderRadius),
border: Border.all(
color: colorScheme.outlineVariant.withValues(alpha: 0.35),
width: 1,
),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.14),
blurRadius: 24,
offset: const Offset(0, 8),
),
],
),
child: child,
),
),
);
}
}
lib/widgets/profile_avatar_button.dart
+45
View File
@@ -0,0 +1,45 @@
import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import '../providers/server_provider.dart';
import '../views/account_view.dart';
/// Top-bar avatar button that opens the account screen. Replaces the old
/// "Account" bottom-nav destination, matching how Google Drive surfaces
/// account access from a profile picture in the app bar.
class ProfileAvatarButton extends StatelessWidget {
const ProfileAvatarButton({super.key});
@override
Widget build(BuildContext context) {
final provider = context.watch<ServerProvider>();
final colorScheme = Theme.of(context).colorScheme;
final initial = provider.username.isNotEmpty
? provider.username[0].toUpperCase()
: '?';
return Padding(
padding: const EdgeInsets.only(right: 8),
child: IconButton(
tooltip: 'Account',
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (_) => const AccountView()),
);
},
icon: CircleAvatar(
radius: 17,
backgroundColor: colorScheme.primary,
child: Text(
initial,
style: TextStyle(
color: colorScheme.onPrimary,
fontWeight: FontWeight.bold,
fontSize: 14,
),
),
),
),
);
}
}
lib/widgets/segmented_icon_toggle.dart
+65
View File
@@ -0,0 +1,65 @@
import 'package:flutter/material.dart';
/// A single icon button that fills with a solid circle when active —
/// the building block for Drive-style toggle controls.
class ToggleIconButton extends StatelessWidget {
final IconData icon;
final bool isSelected;
final VoidCallback onTap;
final String? tooltip;
const ToggleIconButton({
super.key,
required this.icon,
required this.isSelected,
required this.onTap,
this.tooltip,
});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
final button = Material(
color: isSelected ? colorScheme.primaryContainer : Colors.transparent,
shape: const CircleBorder(),
child: InkWell(
onTap: onTap,
customBorder: const CircleBorder(),
child: Padding(
padding: const EdgeInsets.all(8),
child: Icon(
icon,
size: 20,
color: isSelected
? colorScheme.onPrimaryContainer
: colorScheme.onSurfaceVariant,
),
),
),
);
return tooltip != null ? Tooltip(message: tooltip!, child: button) : button;
}
}
/// A pill-shaped row of [ToggleIconButton]s sharing one background, matching
/// the list/grid view switch seen in Google Drive's toolbar.
class SegmentedIconGroup extends StatelessWidget {
final List<Widget> children;
const SegmentedIconGroup({super.key, required this.children});
@override
Widget build(BuildContext context) {
final colorScheme = Theme.of(context).colorScheme;
return Container(
padding: const EdgeInsets.all(2),
decoration: BoxDecoration(
color: colorScheme.surfaceContainerHigh,
borderRadius: BorderRadius.circular(20),
),
child: Row(mainAxisSize: MainAxisSize.min, children: children),
);
}
}