Skip to content

Commit

Permalink
feat: renew nav bar widget for mobile version
Browse files Browse the repository at this point in the history
  • Loading branch information
@sonle-geekyants
sonle-geekyants committed Apr 22, 2024
1 parent d1f475b commit b71651a
Show file tree
Hide file tree
Showing 3 changed files with 107 additions and 103 deletions.
169 changes: 97 additions & 72 deletions lib/screens/welcome_screen/welcome_screen.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,88 +333,113 @@ class _WelcomeScreenState extends State<WelcomeScreen> {
provider.selectedBottomNavigationIndex,
builder: (context, selectedBottomNavigationIndex, _) {
return Container(
height: 74,
height: 72,
margin: EdgeInsets.fromLTRB(
16.toWidth,
28.toWidth,
0,
16.toWidth,
16 + MediaQuery.of(context).padding.bottom,
28.toWidth,
32 + MediaQuery.of(context).padding.bottom,
),
padding: EdgeInsets.symmetric(horizontal: 16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(76),
),
child: Padding(
padding: const EdgeInsets.only(left: 15, right: 15.0),
child: Row(
children: [
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icUserActivate,
iconInactivate: ImageConstants.icUserInactivate,
title: "Contacts",
index: 1,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
child: Row(
children: [
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 32,
vertical: 16,
),
),
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icFileActivate,
iconInactivate: ImageConstants.icFileInactivate,
title: "Files",
index: 2,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(74),
color: Colors.white,
),
),
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icSendActivate,
iconInactivate: ImageConstants.icSendInactivate,
index: 0,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
child: Row(
children: [
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icUserActivate,
iconInactivate: ImageConstants.icUserInactivate,
index: 1,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
),
),
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icFileActivate,
iconInactivate: ImageConstants.icFileInactivate,
index: 2,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
),
),
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icHistoryActivate,
iconInactivate:
ImageConstants.icHistoryInactivate,
index: 3,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
),
),
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icSettingActivate,
iconInactivate:
ImageConstants.icSettingInactivate,
index: 4,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
),
),
],
),
),
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icHistoryActivate,
iconInactivate: ImageConstants.icHistoryInactivate,
title: "History",
index: 3,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
),
SizedBox(width: 12),
Container(
padding: EdgeInsets.all(16),
decoration: BoxDecoration(
shape: BoxShape.circle,
gradient: LinearGradient(
begin: Alignment(-1.00, 0.00),
end: Alignment(1, 0),
colors: selectedBottomNavigationIndex == 0
? [
ColorConstants.orange.withOpacity(0.25),
ColorConstants.navBarButtonLinearColor
.withOpacity(0.25),
]
: [
Colors.white,
Colors.white,
],
),
),
Expanded(
child: BottomNavigationWidget(
iconActivate: ImageConstants.icSettingActivate,
iconInactivate: ImageConstants.icSettingInactivate,
title: "Settings",
index: 4,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
),
child: BottomNavigationWidget(
iconActivate: ImageConstants.icSendActivate,
iconInactivate: ImageConstants.icSendActivate,
index: 0,
indexSelected: selectedBottomNavigationIndex,
onTap: (index) {
welcomeScreenProvider
.changeBottomNavigationIndex(index);
},
),
],
),
)
],
),
);
},
Expand Down
40 changes: 9 additions & 31 deletions lib/screens/welcome_screen/widgets/bottom_navigation_widget.dart
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,15 @@
import 'package:at_common_flutter/services/size_config.dart';
import 'package:atsign_atmosphere_pro/utils/colors.dart';
import 'package:flutter/material.dart';

class BottomNavigationWidget extends StatelessWidget {
final Function(int index)? onTap;
final int index;
final String iconActivate, iconInactivate;
final String title;
final int indexSelected;

const BottomNavigationWidget({
Key? key,
this.onTap,
required this.index,
this.title = '',
required this.indexSelected,
required this.iconActivate,
required this.iconInactivate,
Expand All @@ -25,33 +21,15 @@ class BottomNavigationWidget extends StatelessWidget {
onTap: () {
onTap?.call(index);
},
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: 36,
height: 36,
alignment: Alignment.center,
child: Image.asset(
indexSelected == index ? iconActivate : iconInactivate,
height: title.isNotEmpty ? 32 : null,
color: indexSelected == index
? null
: ColorConstants.inactiveIconColor,
fit: BoxFit.cover,
),
),
if (title.isNotEmpty)
Text(
title,
style: TextStyle(
fontSize: 12.toFont,
color:
indexSelected == index ? Colors.black : Color(0xFFAEAEAE),
fontWeight: FontWeight.w500,
),
),
],
child: Container(
width: 36,
height: 36,
alignment: Alignment.center,
child: Image.asset(
indexSelected == index ? iconActivate : iconInactivate,
height: 32,
fit: BoxFit.cover,
),
),
);
}
Expand Down
1 change: 1 addition & 0 deletions lib/utils/colors.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -106,6 +106,7 @@ class ColorConstants {
static const Color disableTooltipColor = Color(0xFFC4C4C4);
static const Color inactiveIconColor = Color(0xFFC5C5C5);
static const Color closeButtonColor = Color(0xFFE6E6E6);
static const Color navBarButtonLinearColor = Color(0xFFE9A743);
static const Color listFileShadowColor = Color(0xFFD7D7D7);
static const Color spanishGray = Color(0xFF969393);
}
Expand Down

0 comments on commit b71651a

Please sign in to comment.