From 8d0e3e972f7ffbe9f4d34c77cb3bc9242cb89ea5 Mon Sep 17 00:00:00 2001 From: ashilkn Date: Tue, 13 Aug 2024 19:49:41 +0530 Subject: [PATCH] [mob][photos] Fix or make UI and layout better of the system navigation bar, home bottom navigation bar and the search widget --- mobile/lib/main.dart | 12 ++ mobile/lib/ui/home/home_bottom_nav_bar.dart | 187 +++++++++--------- .../lib/ui/viewer/search/search_widget.dart | 3 + 3 files changed, 109 insertions(+), 93 deletions(-) diff --git a/mobile/lib/main.dart b/mobile/lib/main.dart index f8b3f0796d..2d964ebc71 100644 --- a/mobile/lib/main.dart +++ b/mobile/lib/main.dart @@ -8,6 +8,7 @@ import 'package:firebase_messaging/firebase_messaging.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import "package:flutter/rendering.dart"; +import "package:flutter/services.dart"; import "package:flutter_displaymode/flutter_displaymode.dart"; import 'package:logging/logging.dart'; import "package:media_kit/media_kit.dart"; @@ -78,6 +79,17 @@ void main() async { await _runInForeground(savedThemeMode); unawaited(BackgroundFetch.registerHeadlessTask(_headlessTaskHandler)); if (Platform.isAndroid) FlutterDisplayMode.setHighRefreshRate().ignore(); + SystemChrome.setSystemUIOverlayStyle( + const SystemUiOverlayStyle( + systemNavigationBarColor: Color(0x00010000), + ), + ); + + unawaited( + SystemChrome.setEnabledSystemUIMode( + SystemUiMode.edgeToEdge, + ), + ); } Future _runInForeground(AdaptiveThemeMode? savedThemeMode) async { diff --git a/mobile/lib/ui/home/home_bottom_nav_bar.dart b/mobile/lib/ui/home/home_bottom_nav_bar.dart index e4867a08b4..2de0bb8f69 100644 --- a/mobile/lib/ui/home/home_bottom_nav_bar.dart +++ b/mobile/lib/ui/home/home_bottom_nav_bar.dart @@ -31,6 +31,7 @@ class _HomeBottomNavigationBarState extends State { void initState() { super.initState(); currentTabIndex = widget.selectedTabIndex; + //Todo: Remove this listener on dispose widget.selectedFiles.addListener(() { setState(() {}); }); @@ -72,102 +73,102 @@ class _HomeBottomNavigationBarState extends State { @override Widget build(BuildContext context) { - final isBottomInsetPresent = MediaQuery.of(context).viewPadding.bottom != 0; - final bottomPadding = isBottomInsetPresent ? 32.0 : 8.0; final bool filesAreSelected = widget.selectedFiles.files.isNotEmpty; final enteColorScheme = getEnteColorScheme(context); - return RepaintBoundary( - child: AnimatedContainer( - duration: const Duration(milliseconds: 300), - curve: Curves.easeInOut, - height: filesAreSelected ? 0 : (56 + bottomPadding), - child: IgnorePointer( - ignoring: filesAreSelected, - child: ListView( - physics: const NeverScrollableScrollPhysics(), - children: [ - Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - GNav( - curve: Curves.easeOutExpo, - backgroundColor: - getEnteColorScheme(context).backgroundElevated2, - mainAxisAlignment: MainAxisAlignment.center, - iconSize: 24, - padding: const EdgeInsets.fromLTRB(16, 6, 16, 6), - duration: const Duration(milliseconds: 200), - gap: 0, - tabBorderRadius: 32, - tabBackgroundColor: - Theme.of(context).brightness == Brightness.light - ? strokeFainterLight - : strokeSolidFaintLight, - haptic: false, - tabs: [ - GButton( - margin: const EdgeInsets.fromLTRB(8, 6, 10, 6), - icon: Icons.home_rounded, - iconColor: enteColorScheme.tabIcon, - iconActiveColor: strokeBaseLight, - text: '', - onPressed: () { - _onTabChange( - 0, - mode: "OnPressed", - ); // To take care of occasional missing events - }, - ), - GButton( - margin: const EdgeInsets.fromLTRB(10, 6, 10, 6), - icon: Icons.collections_rounded, - iconColor: enteColorScheme.tabIcon, - iconActiveColor: strokeBaseLight, - text: '', - onPressed: () { - _onTabChange( - 1, - mode: "OnPressed", - ); // To take care of occasional missing - // events - }, - ), - GButton( - margin: const EdgeInsets.fromLTRB(10, 6, 8, 6), - icon: Icons.people_outlined, - iconColor: enteColorScheme.tabIcon, - iconActiveColor: strokeBaseLight, - text: '', - onPressed: () { - _onTabChange( - 2, - mode: "OnPressed", - ); // To take care - // of occasional missing events - }, - ), - GButton( - margin: const EdgeInsets.fromLTRB(10, 6, 8, 6), - icon: Icons.search_outlined, - iconColor: enteColorScheme.tabIcon, - iconActiveColor: strokeBaseLight, - text: '', - onPressed: () { - _onTabChange( - 3, - mode: "OnPressed", - ); // To take care - // of occasional missing events - }, - ), - ], - selectedIndex: currentTabIndex, - onTabChange: _onTabChange, - ), - ], - ), - ], + return SafeArea( + child: RepaintBoundary( + child: AnimatedContainer( + duration: const Duration(milliseconds: 300), + curve: Curves.easeInOut, + height: filesAreSelected ? 0 : 56, + child: IgnorePointer( + ignoring: filesAreSelected, + child: ListView( + physics: const NeverScrollableScrollPhysics(), + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + GNav( + curve: Curves.easeOutExpo, + backgroundColor: + getEnteColorScheme(context).backgroundElevated2, + mainAxisAlignment: MainAxisAlignment.center, + iconSize: 24, + padding: const EdgeInsets.fromLTRB(16, 6, 16, 6), + duration: const Duration(milliseconds: 200), + gap: 0, + tabBorderRadius: 32, + tabBackgroundColor: + Theme.of(context).brightness == Brightness.light + ? strokeFainterLight + : strokeSolidFaintLight, + haptic: false, + tabs: [ + GButton( + margin: const EdgeInsets.fromLTRB(8, 6, 10, 6), + icon: Icons.home_rounded, + iconColor: enteColorScheme.tabIcon, + iconActiveColor: strokeBaseLight, + text: '', + onPressed: () { + _onTabChange( + 0, + mode: "OnPressed", + ); // To take care of occasional missing events + }, + ), + GButton( + margin: const EdgeInsets.fromLTRB(10, 6, 10, 6), + icon: Icons.collections_rounded, + iconColor: enteColorScheme.tabIcon, + iconActiveColor: strokeBaseLight, + text: '', + onPressed: () { + _onTabChange( + 1, + mode: "OnPressed", + ); // To take care of occasional missing + // events + }, + ), + GButton( + margin: const EdgeInsets.fromLTRB(10, 6, 8, 6), + icon: Icons.people_outlined, + iconColor: enteColorScheme.tabIcon, + iconActiveColor: strokeBaseLight, + text: '', + onPressed: () { + _onTabChange( + 2, + mode: "OnPressed", + ); // To take care + // of occasional missing events + }, + ), + GButton( + margin: const EdgeInsets.fromLTRB(10, 6, 8, 6), + icon: Icons.search_outlined, + iconColor: enteColorScheme.tabIcon, + iconActiveColor: strokeBaseLight, + text: '', + onPressed: () { + _onTabChange( + 3, + mode: "OnPressed", + ); // To take care + // of occasional missing events + }, + ), + ], + selectedIndex: currentTabIndex, + onTabChange: _onTabChange, + ), + ], + ), + ], + ), ), ), ), diff --git a/mobile/lib/ui/viewer/search/search_widget.dart b/mobile/lib/ui/viewer/search/search_widget.dart index 1983c5cb69..525f1e5114 100644 --- a/mobile/lib/ui/viewer/search/search_widget.dart +++ b/mobile/lib/ui/viewer/search/search_widget.dart @@ -87,10 +87,13 @@ class SearchWidgetState extends State { @override void didChangeDependencies() { super.didChangeDependencies(); + //https://api.flutter.dev/flutter/dart-ui/FlutterView-class.html _bottomPadding = (MediaQuery.viewInsetsOf(context).bottom - _distanceOfWidgetFromBottom); if (_bottomPadding < 0) { _bottomPadding = 0; + } else if (_bottomPadding != 0) { + _bottomPadding += MediaQuery.viewPaddingOf(context).bottom; } }