nav bar
main_design2.0
nextwo 2 years ago
parent 05398a9f76
commit e20f3b5433

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.0106 24C15.0694 24 17.8642 22.85 19.987 20.9604L11.5133 12.4867C11.3814 12.3549 11.3073 12.176 11.3073 11.9895V0C5.01077 0.365427 0 5.60294 0 11.9894C0 18.6121 5.38796 24 12.0106 24Z" fill="#163A51"/>
<path d="M13.7084 12.6927L20.9816 19.9659C22.7252 18.007 23.8384 15.4757 24 12.6927H13.7084Z" fill="#163A51"/>
<path d="M12.7141 11.2861H24.0002C23.6483 5.22241 18.7778 0.351924 12.7141 0V11.2861Z" fill="#163A51"/>
</svg>

After

Width:  |  Height:  |  Size: 532 B

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.26821 0C3.56161 0 2.90522 0.350859 2.51311 0.939328L0.590535 3.82327C0.50841 3.94627 0.468988 4.08787 0.403503 4.2188H11.2969V0H4.26821Z" fill="#767676"/>
<path d="M23.4095 3.82322L21.4868 0.939328C21.0948 0.350859 20.3915 0 19.6849 0H12.7031V4.21875H23.5965C23.531 4.08787 23.4916 3.94627 23.4095 3.82322Z" fill="#767676"/>
<path d="M23.9781 5.625H0.0218906C0.0197344 5.67548 0 5.72259 0 5.77331V21.8906C0 23.0538 0.946219 24 2.10938 24H21.8906C23.0538 24 24 23.0538 24 21.8906V5.77331C24 5.72259 23.9803 5.67548 23.9781 5.625ZM14.8125 12.6562H9.1875C8.02434 12.6562 7.07812 11.71 7.07812 10.5469C7.07812 9.38372 8.02434 8.4375 9.1875 8.4375H14.8125C15.9757 8.4375 16.9219 9.38372 16.9219 10.5469C16.9219 11.71 15.9757 12.6562 14.8125 12.6562Z" fill="#767676"/>
</svg>

After

Width:  |  Height:  |  Size: 878 B

@ -0,0 +1,4 @@
<svg width="24" height="18" viewBox="0 0 24 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.0057 11.564C13.4086 11.9621 12.7151 12.1725 12 12.1725C11.285 12.1725 10.5914 11.9621 9.99431 11.564L0.159797 5.00748C0.105234 4.9711 0.0520781 4.93318 0 4.89418V15.6378C0 16.8696 0.999609 17.8471 2.20936 17.8471H21.7906C23.0224 17.8471 24 16.8475 24 15.6378V4.89413C23.9478 4.93323 23.8945 4.97124 23.8398 5.00767L14.0057 11.564Z" fill="#767676"/>
<path d="M0.939844 3.96525L10.7744 10.5218C11.1466 10.77 11.5733 10.8941 12 10.8941C12.4267 10.8941 12.8534 10.77 13.2256 10.5218L23.0602 3.96525C23.6487 3.57314 24 2.91689 24 2.20861C24 0.99075 23.0092 0 21.7914 0H2.20861C0.990797 4.6875e-05 0 0.990797 0 2.20978C0 2.91689 0.351375 3.57314 0.939844 3.96525Z" fill="#767676"/>
</svg>

After

Width:  |  Height:  |  Size: 792 B

@ -0,0 +1,3 @@
<svg width="23" height="26" viewBox="0 0 23 26" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18.1154 0H4.47218C2.0021 0 0 1.99851 0 4.47218V24.9368C0 25.8051 0.99566 26.3128 1.69832 25.786L5.9629 22.5875H18.1154C20.5854 22.5875 22.5875 20.589 22.5875 18.1154V4.47218C22.5875 2.0021 20.589 0 18.1154 0ZM10.2322 16.903H5.60909C5.0228 16.903 4.54764 16.4278 4.54764 15.8416C4.54764 15.2553 5.0228 14.7801 5.60909 14.7801H10.2322C10.8185 14.7801 11.2936 15.2553 11.2936 15.8416C11.2936 16.4278 10.8185 16.903 10.2322 16.903ZM16.9785 12.3554H5.60909C5.0228 12.3554 4.54764 11.8799 4.54764 11.2939C4.54764 10.7076 5.0228 10.2325 5.60909 10.2325H16.9785C17.5645 10.2325 18.0399 10.7076 18.0399 11.2939C18.0399 11.8799 17.5647 12.3554 16.9785 12.3554ZM16.9785 7.80744H5.60909C5.0228 7.80744 4.54764 7.33228 4.54764 6.746C4.54764 6.15999 5.0228 5.68455 5.60909 5.68455H16.9785C17.5645 5.68455 18.0399 6.15999 18.0399 6.746C18.0399 7.33228 17.5647 7.80744 16.9785 7.80744Z" fill="#767676"/>
</svg>

After

Width:  |  Height:  |  Size: 1001 B

@ -5,5 +5,9 @@
"password": "كلمة السر",
"username" : "اسم المستخدم",
"requiredField" : "الحقل مطلوب",
"passwordLengthMessage" : "كلمة السر أقل من 6 خانات"
"passwordLengthMessage" : "كلمة السر أقل من 6 خانات",
"overview" : "نظرة عامة",
"myRequest" : "طلباتي",
"Assets" : "الاصول",
"contactUs": "اتصل بنا"
}

@ -5,5 +5,9 @@
"password" : "Password",
"username" : "Username",
"requiredField" : "Required Field",
"passwordLengthMessage" : "Password length is less than 6 characters"
"passwordLengthMessage" : "Password length is less than 6 characters",
"overview" : "Overview",
"myRequest" : "My Request",
"Assets" : "Assets",
"contactUs": "Contact Us"
}

@ -12,6 +12,7 @@ import 'package:test_sa/new_views/pages/splash_page.dart';
import 'controllers/providers/api/user_provider.dart';
import 'controllers/providers/settings/setting_provider.dart';
import 'new_views/common_widgets/test screen.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
@ -61,8 +62,9 @@ class MyApp extends StatelessWidget {
],
supportedLocales: const [Locale('en'), Locale('ar')],
locale: Locale(settingProvider.language ?? 'en'),
initialRoute: SplashPage.routeName,
initialRoute: TestScreen.id,
routes: {
TestScreen.id: (_) => const TestScreen(),
SplashPage.routeName: (_) => const SplashPage(),
LoginPage.routeName: (_) => const LoginPage(),
LandPage.routeName: (_) => const LandPage(),

@ -6,4 +6,8 @@ enum TranslationKeys {
username,
requiredField,
passwordLengthMessage,
overview,
myRequest,
Assets,
contactUs
}

@ -9,6 +9,19 @@ class AppThemes {
indicatorColor: AppColor.primary50,
scaffoldBackgroundColor: AppColor.backgroundLight,
colorScheme: const ColorScheme.light(primary: AppColor.primary50, onPrimary: Colors.white, secondary: Colors.white, onSecondary: AppColor.neutral70),
floatingActionButtonTheme: const FloatingActionButtonThemeData(
backgroundColor: AppColor.backgroundDark,
),
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
backgroundColor: AppColor.backgroundLight
),
appBarTheme: const AppBarTheme(
backgroundColor: AppColor.backgroundLight,
titleTextStyle: TextStyle(
color: AppColor.neutral50
)
)
);
static ThemeData darkTheme = ThemeData.dark().copyWith(
@ -17,5 +30,19 @@ class AppThemes {
indicatorColor: AppColor.primary50,
scaffoldBackgroundColor: AppColor.backgroundDark,
colorScheme: const ColorScheme.light(primary: AppColor.primary50, onPrimary: AppColor.neutral60, secondary: AppColor.neutral60, onSecondary: Colors.white),
floatingActionButtonTheme: const FloatingActionButtonThemeData(
backgroundColor: AppColor.primary40
),
bottomNavigationBarTheme: const BottomNavigationBarThemeData(
backgroundColor: AppColor.neutral60,
unselectedItemColor: AppColor.neutral10,
selectedItemColor: AppColor.primary70
),
appBarTheme: const AppBarTheme(
backgroundColor: AppColor.backgroundDark,
titleTextStyle: TextStyle(
color: AppColor.neutral30
)
)
);
}

@ -0,0 +1,17 @@
import 'package:flutter/material.dart';
import 'package:test_sa/extensions/context_extension.dart';
import '../app_style/app_color.dart';
class AddFloatingButton extends StatelessWidget {
final VoidCallback onPressed;
const AddFloatingButton({Key key, @required this.onPressed}) : super(key: key);
@override
Widget build(BuildContext context) {
return FloatingActionButton(
onPressed: onPressed,
child: Icon(Icons.add , color: context.isDark? AppColor.neutral50:AppColor.neutral30, ),
);
}
}

@ -0,0 +1,27 @@
import 'package:flutter/material.dart';
import 'package:test_sa/extensions/int_extensions.dart';
import '../../app_style/app_color.dart';
class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
String title;
CustomAppBar({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return AppBar(
title: Text(title, style: Theme.of(context).textTheme.displaySmall?.copyWith(fontWeight: FontWeight.w600, color: AppColor.neutral50)),
leading: IconButton(
icon: Icon(Icons.arrow_back_ios, size: 24,),
onPressed:
() {
Navigator.of(context).pop();
},
),
);
}
@override
Size get preferredSize => Size.fromHeight(60);
}

@ -0,0 +1,51 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:test_sa/new_views/common_widgets/app_bar/user_image.dart';
import '../../../models/user.dart';
import '../../app_style/app_color.dart';
import 'notification_icon.dart';
class HomeAppBar extends StatefulWidget implements PreferredSizeWidget{
int notificationCount;
String userImage;
HomeAppBar({Key key, this.notificationCount}) : super(key: key);
@override
State<HomeAppBar> createState() => _AppBarState();
@override
Size get preferredSize => const Size.fromHeight(150);
}
class _AppBarState extends State<HomeAppBar> {
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(top: 30.0, right: 12, left: 12),
child: PreferredSize(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
UserImage(url: widget.userImage,),
NotificationIcon(notificationCount: 3,)
],
),
// SizedBox(height: 15),
// Column(
// crossAxisAlignment: CrossAxisAlignment.start,
// children: [
// Text("welcome," , style: Theme.of(context).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w500, color: AppColor.neutral20)),
// Text("Engineer name" , style: Theme.of(context).textTheme.headlineMedium?.copyWith(fontWeight: FontWeight.w600)),
// ],
// )
],
),
),
);
}
}

@ -0,0 +1,35 @@
import 'package:flutter/material.dart';
import '../../app_style/app_color.dart';
class NotificationIcon extends StatelessWidget {
int notificationCount;
NotificationIcon({Key key, this.notificationCount}) : super(key: key);
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
const Icon(Icons.notifications, size: 36,),
if(notificationCount != null)
Positioned(
right: 0,
child: Container(
height: 20,
width: 20,
padding: EdgeInsets.all(1),
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.circular(10),
),
child: Text(
notificationCount.toString(),
style: Theme.of(context).textTheme.bodyMedium?.copyWith(fontWeight: FontWeight.w500,color: AppColor.neutral30),
textAlign: TextAlign.center,
),
),
)
],
);
}
}

@ -0,0 +1,18 @@
import 'package:flutter/material.dart';
class UserImage extends StatelessWidget {
String url;
UserImage({Key key, @required this.url}) : super(key: key);
@override
Widget build(BuildContext context) {
return SizedBox(
height: 48,
width: 48,
child: CircleAvatar(
//backgroundColor: Colors.transparent,
child: Image.network(url??''),
//backgroundImage: NetworkImage(url),
));
}
}

@ -0,0 +1,71 @@
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'package:test_sa/extensions/context_extension.dart';
import '../../../models/enums/translation_keys.dart';
import '../../app_style/app_color.dart';
class HomeBottomNavigationBar extends StatefulWidget {
final Function(int index) onPressed;
const HomeBottomNavigationBar({Key key, @required this.onPressed}) : super(key: key);
@override
State<HomeBottomNavigationBar> createState() => _HomeBottomNavigationBarState();
}
class _HomeBottomNavigationBarState extends State<HomeBottomNavigationBar> {
int _selectedIndex = 0;
void _onItemTapped(int index) {
setState(() {
_selectedIndex = index;
});
widget.onPressed.call(index);
}
@override
Widget build(BuildContext context) {
return Material(
elevation: 20,
borderRadius: const BorderRadius.only(topLeft: Radius.circular(20.0), topRight: Radius.circular(20.0)),
child: SizedBox(
height: 100,
child: ClipRRect(
borderRadius: const BorderRadius.all(Radius.circular(20.0)),
child: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/images/Overview.svg', width: 24, height: 24,
color: _selectedIndex == 0? AppColor.primary70:AppColor.neutral20),
label: context.translate(TranslationKeys.overview),
),
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/images/requests.svg', width: 24, height: 24,
color: _selectedIndex == 1? AppColor.primary70:AppColor.neutral20),
label: context.translate(TranslationKeys.myRequest),
),
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/images/assets.svg',width: 24, height: 24,
color: _selectedIndex == 2? AppColor.primary70:AppColor.neutral20),
label: context.translate(TranslationKeys.myRequest),
),
BottomNavigationBarItem(
icon: SvgPicture.asset('assets/images/message.svg', width: 24, height: 24,
color: _selectedIndex == 3? AppColor.primary70:AppColor.neutral20),
label: context.translate(TranslationKeys.contactUs),
),
],
currentIndex: _selectedIndex,
type: BottomNavigationBarType.fixed,
unselectedFontSize: 14,
unselectedLabelStyle: const TextStyle(height: 2),
selectedLabelStyle: const TextStyle(height: 2),
selectedItemColor: AppColor.primary70,
unselectedItemColor: AppColor.neutral20,
onTap: _onItemTapped,
),
),
),
);
}
}

@ -0,0 +1,46 @@
import 'package:flutter/material.dart';
import 'package:test_sa/new_views/common_widgets/app_bar/custom_app_bar.dart';
import 'add_floating_button.dart';
import 'app_bar/home_app_bar.dart';
import 'bottom_nav_bar/home_bottom_nav_bar.dart';
class TestScreen extends StatefulWidget {
static const String id = '/test';
const TestScreen({Key key}) : super(key: key);
@override
State<TestScreen> createState() => _TestScreenState();
}
class _TestScreenState extends State<TestScreen> {
int screenIndex =0;
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: HomeAppBar(),
body: Center(child: _widgetOptions[screenIndex]),
floatingActionButton: AddFloatingButton(onPressed: () {},),
bottomNavigationBar: HomeBottomNavigationBar(onPressed: (index){
setState(() {
screenIndex = index;
});
},),
);
}
static const List<Widget> _widgetOptions = <Widget>[
Text(
'Index 0',
),
Text(
'Index 1',
),
Text(
'Index 2',
),
Text(
'Index 3',
),
];
}
Loading…
Cancel
Save