0ct0pu5/ente
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

redesinged bottom nav and added bottom shadow

Browse source
This commit is contained in:
ashilkn 2022-04-18 19:23:58 +05:30
parent 7707435740
commit 2ca148f344
4 changed files with 94 additions and 128 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
lib/app.dart
View file

@ -35,7 +35,7 @@ final lightThemeData = ThemeData(
onPrimary: Colors.white, primary: Colors.black),
toggleableActiveColor: Colors.red[400],
scaffoldBackgroundColor: Colors.white,
bottomAppBarColor: Color.fromRGBO(196, 196, 196, 1.0),
bottomAppBarColor: Color.fromRGBO(196, 196, 196, 0.5),
backgroundColor: Colors.white,
appBarTheme: AppBarTheme().copyWith(
backgroundColor: Colors.white,
@ -91,7 +91,7 @@ final darkThemeData = ThemeData(
iconTheme: IconThemeData(color: Colors.white),
primaryIconTheme: IconThemeData(color: Colors.red, opacity: 1.0, size: 50.0),
hintColor: Colors.grey,
bottomAppBarColor: Color.fromRGBO(196, 196, 196, 1.0),
bottomAppBarColor: Color.fromRGBO(196, 196, 196, 0.5),
colorScheme: ColorScheme.dark(),
accentColor: Color.fromRGBO(45, 194, 98, 0.2),

13
lib/ui/gallery_footer_widget.dart
View file

@ -12,13 +12,12 @@ class GalleryFooterWidget extends StatelessWidget {
Widget build(BuildContext context) {
return Column(
children: [
Padding(padding: EdgeInsets.all(12)),
Padding(padding: EdgeInsets.all(6)),
Divider(
height: 1,
color: Theme.of(context).buttonColor.withOpacity(0.4),
),
Container(
padding: EdgeInsets.fromLTRB(28, 36, 28, 46),
padding: EdgeInsets.fromLTRB(20, 24, 20, 72),
child: OutlinedButton(
style: OutlinedButton.styleFrom(
shape: RoundedRectangleBorder(
@ -29,19 +28,15 @@ class GalleryFooterWidget extends StatelessWidget {
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
//mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.cloud_upload,
//color: Theme.of(context).colorScheme.onSurface
color: Theme.of(context).backgroundColor,
),
Padding(padding: EdgeInsets.all(6)),
Text(
"preserve more",
// style: TextStyle(
// color: Theme.of(context).colorScheme.onBackground,
// ),
"Preserve more",
),
],
),

155
lib/ui/home_widget.dart
View file

@ -1,5 +1,6 @@
import 'dart:async';
import 'dart:io';
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
@ -275,7 +276,7 @@ class _HomeWidgetState extends State<HomeWidget> {
? _getBackupFolderSelectionHook()
: _getMainGalleryWidget(),
_deviceFolderGalleryWidget,
_sharedCollectionGallery,
//_sharedCollectionGallery,
_settingsPage,
],
onPageChanged: (page) {
@ -287,6 +288,22 @@ class _HomeWidgetState extends State<HomeWidget> {
physics: NeverScrollableScrollPhysics(),
controller: _pageController,
),
Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 8,
decoration: BoxDecoration(
color: Colors.transparent,
boxShadow: [
BoxShadow(
color: Theme.of(context).backgroundColor,
spreadRadius: 42,
blurRadius: 42, // changes position of shadow
),
],
),
),
),
Align(
alignment: Alignment.bottomCenter,
child: _buildBottomNavigationBar(),
@ -344,7 +361,7 @@ class _HomeWidgetState extends State<HomeWidget> {
final importantPaths = Configuration.instance.getPathsToBackUp();
final ownerID = Configuration.instance.getUserID();
final archivedCollectionIds =
CollectionsService.instance.getArchivedCollections();
CollectionsService.instance.getArchivedCollections();
FileLoadResult result;
if (importantPaths.isNotEmpty) {
result = await FilesDB.instance.getImportantFiles(creationStartTime,
@ -392,7 +409,6 @@ class _HomeWidgetState extends State<HomeWidget> {
return Stack(
children: [
Container(
margin: const EdgeInsets.only(bottom: 80),
child: gallery,
),
HomePageAppBar(_selectedFiles),
@ -448,71 +464,76 @@ class _HomeWidgetState extends State<HomeWidget> {
}
Widget _buildBottomNavigationBar() {
return Container(
margin: EdgeInsets.fromLTRB(48, 12, 48, 4),
alignment: Alignment.bottomCenter,
height: 90,
width: 220,
child: SafeArea(
child: GNav(
curve: Curves.easeOutExpo,
backgroundColor: Theme.of(context).bottomAppBarColor,
mainAxisAlignment: MainAxisAlignment.center,
rippleColor: Theme.of(context).buttonColor.withOpacity(0.20),
hoverColor: Theme.of(context).buttonColor.withOpacity(0.20),
activeColor: Colors.black,
iconSize: 24,
padding: EdgeInsets.fromLTRB(2, 2, 1, 2),
duration: Duration(milliseconds: 200),
tabMargin: EdgeInsets.all(10),
gap: 0,
tabBorderRadius: 24,
tabBackgroundColor: Colors.white,
haptic: false,
tabShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 3), // changes position of shadow
return Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: ClipRRect(
borderRadius: BorderRadius.circular(36),
child: Container(
alignment: Alignment.bottomCenter,
height: 52,
width: 180,
child: ClipRect(
child: BackdropFilter(
filter: ImageFilter.blur(sigmaX: 20, sigmaY: 20),
child: GNav(
curve: Curves.easeOutExpo,
backgroundColor: Theme.of(context).bottomAppBarColor,
mainAxisAlignment: MainAxisAlignment.center,
rippleColor: Theme.of(context).buttonColor.withOpacity(0.20),
hoverColor: Theme.of(context).buttonColor.withOpacity(0.20),
activeColor: Colors.black,
iconSize: 24,
padding: EdgeInsets.fromLTRB(16, 8, 16, 8),
duration: Duration(milliseconds: 200),
gap: 0,
tabBorderRadius: 24,
tabBackgroundColor: Colors.white,
haptic: false,
tabs: [
GButton(
margin: EdgeInsets.fromLTRB(6, 6, 0, 6),
icon: Icons.home,
iconColor: Colors.black,
text: '',
onPressed: () {
_onTabChange(
0); // To take care of occasional missing events
},
),
GButton(
margin: EdgeInsets.fromLTRB(0, 6, 0, 6),
icon: Icons.photo_library,
iconColor: Colors.black,
text: '',
onPressed: () {
_onTabChange(
1); // To take care of occasional missing events
},
),
// GButton(
// icon: Icons.folder_shared_outlined,
// iconColor: Colors.black,
// text: '',
// onPressed: () {
// _onTabChange(2); // To take care of occasional missing events
// },
// ),
GButton(
margin: EdgeInsets.fromLTRB(0, 6, 6, 6),
icon: Icons.person,
iconColor: Colors.black,
text: '',
onPressed: () {
_onTabChange(
3); // To take care of occasional missing events
},
)
],
selectedIndex: _selectedTabIndex,
onTabChange: _onTabChange,
),
),
],
tabs: [
GButton(
icon: Icons.photo_library_outlined,
iconColor: Colors.black,
text: '',
onPressed: () {
_onTabChange(0); // To take care of occasional missing events
},
),
GButton(
icon: Icons.folder_special_outlined,
iconColor: Colors.black,
text: '',
onPressed: () {
_onTabChange(1); // To take care of occasional missing events
},
),
GButton(
icon: Icons.folder_shared_outlined,
iconColor: Colors.black,
text: '',
onPressed: () {
_onTabChange(2); // To take care of occasional missing events
},
),
GButton(
icon: Icons.settings,
iconColor: Colors.black,
text: '',
onPressed: () {
_onTabChange(3); // To take care of occasional missing events
},
)
],
selectedIndex: _selectedTabIndex,
onTabChange: _onTabChange,
),
),
),
);

50
lib/ui/nav_bar.dart
View file

@ -1,7 +1,6 @@
library google_nav_bar;
import 'dart:async';
import 'dart:math';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
@ -88,7 +87,6 @@ class _GNavState extends State<GNav> {
key: t.key,
border: t.border ?? widget.tabBorder,
activeBorder: t.activeBorder ?? widget.tabActiveBorder,
shadow: t.shadow ?? widget.tabShadow,
borderRadius:
t.borderRadius ?? widget.tabBorderRadius != null
? BorderRadius.all(
@ -109,8 +107,6 @@ class _GNavState extends State<GNav> {
widget.hoverColor ??
Colors.transparent,
padding: t.padding ?? widget.padding,
textStyle: t.textStyle ?? widget.textStyle,
text: t.text,
icon: t.icon,
haptic: widget.haptic ?? true,
leading: t.leading,
@ -235,11 +231,6 @@ class _GButtonState extends State<GButton> {
iconActiveColor: widget.iconActiveColor,
iconColor: widget.iconColor,
icon: widget.icon,
text: Text(
widget.text,
style: widget.textStyle ??
TextStyle(fontWeight: FontWeight.w600, color: widget.textColor),
),
),
);
}
@ -380,47 +371,6 @@ class _ButtonState extends State<Button> with TickerProviderStateMixin {
child: FittedBox(
fit: BoxFit.fitHeight,
child: Stack(children: [
Row(mainAxisAlignment: MainAxisAlignment.end, children: [
icon,
Container(
// width: double.infinity,
child: Container(
//color: Colors.blue.withOpacity(.2),
child: Align(
alignment: Alignment.centerRight,
widthFactor: curveValue,
child: Container(
//width: 100,
//color: Colors.red.withOpacity(.2),
child: Opacity(
opacity: _expanded
? pow(expandController.value, 13)
: expandController
.drive(CurveTween(curve: Curves.easeIn))
.value,
//width: 100,
child: Padding(
padding: EdgeInsets.only(
left: widget.gap +
8 -
(8 *
expandController
.drive(CurveTween(
curve:
Curves.easeOutSine))
.value),
right: 8 *
expandController
.drive(CurveTween(
curve: Curves.easeOutSine))
.value),
child: widget.text,
)),
)),
),
),
]),
Align(alignment: Alignment.centerLeft, child: icon),
]),
),