profile details
parent
82570b9ba6
commit
6e86c0ba38
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
@ -0,0 +1,47 @@
|
|||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:flutter/widgets.dart';
|
||||||
|
import 'package:mohem_flutter_app/config/routes.dart';
|
||||||
|
import 'package:mohem_flutter_app/ui/landing/widget/drawer_item.dart';
|
||||||
|
import 'package:provider/provider.dart';
|
||||||
|
|
||||||
|
class AppDrawer extends StatefulWidget {
|
||||||
|
@override
|
||||||
|
_AppDrawerState createState() => _AppDrawerState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _AppDrawerState extends State<AppDrawer> {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
color: Colors.white,
|
||||||
|
child: Drawer(
|
||||||
|
child: Column(children: <Widget>[
|
||||||
|
const SizedBox(
|
||||||
|
height: 200,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: ListView(padding: const EdgeInsets.all(21), physics: const BouncingScrollPhysics(), children: [
|
||||||
|
Divider(),
|
||||||
|
InkWell(
|
||||||
|
child: DrawerItem(
|
||||||
|
'My Profile',
|
||||||
|
icon: Icons.person,
|
||||||
|
color: Colors.grey,
|
||||||
|
),
|
||||||
|
onTap: () {
|
||||||
|
drawerNavigator(context, AppRoutes.profile);
|
||||||
|
})
|
||||||
|
]))
|
||||||
|
])));
|
||||||
|
}
|
||||||
|
|
||||||
|
drawerNavigator(context, routeName) {
|
||||||
|
Navigator.of(context).pushNamed(routeName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
String capitalizeOnlyFirstLater(String text) {
|
||||||
|
if (text.trim().isEmpty) return "";
|
||||||
|
|
||||||
|
return "${text[0].toUpperCase()}${text.substring(1)}";
|
||||||
|
}
|
||||||
@ -0,0 +1,59 @@
|
|||||||
|
import 'dart:ui';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class DrawerItem extends StatefulWidget {
|
||||||
|
final String title;
|
||||||
|
final String subTitle;
|
||||||
|
final IconData icon;
|
||||||
|
final Color color;
|
||||||
|
final dynamic assetLink;
|
||||||
|
|
||||||
|
const DrawerItem(this.title, {required this.icon, required this.color, this.subTitle = '', this.assetLink});
|
||||||
|
|
||||||
|
@override
|
||||||
|
_DrawerItemState createState() => _DrawerItemState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class _DrawerItemState extends State<DrawerItem> {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
margin: EdgeInsets.only(top: 0, bottom: 5, left: 0, right: 0),
|
||||||
|
child: Row(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
if (widget.assetLink != null)
|
||||||
|
Container(
|
||||||
|
height: 20,
|
||||||
|
width: 20,
|
||||||
|
child: Image.asset(widget.assetLink),
|
||||||
|
),
|
||||||
|
if (widget.assetLink == null)
|
||||||
|
Icon(
|
||||||
|
widget.icon,
|
||||||
|
color: widget.color ?? Colors.black87,
|
||||||
|
size: 25,
|
||||||
|
),
|
||||||
|
Expanded(
|
||||||
|
child: Column(
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
|
children: <Widget>[
|
||||||
|
Container(
|
||||||
|
width: MediaQuery.of(context).size.width * 0.45,
|
||||||
|
child: Text(widget.title,
|
||||||
|
style: TextStyle(
|
||||||
|
color: widget.color ?? Color(0xFF2E303A),
|
||||||
|
fontSize: 14,
|
||||||
|
fontFamily: 'Poppins',
|
||||||
|
fontWeight: FontWeight.w600,
|
||||||
|
letterSpacing: -0.84,
|
||||||
|
)),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
import 'dart:ui';
|
||||||
|
|
||||||
|
import 'package:flutter/cupertino.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:mohem_flutter_app/ui/screens/profile/widgets/header.dart';
|
||||||
|
import 'package:mohem_flutter_app/ui/screens/profile/widgets/profile_panel.dart';
|
||||||
|
|
||||||
|
class ProfileScreen extends StatelessWidget {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Scaffold(
|
||||||
|
extendBody: true,
|
||||||
|
backgroundColor: const Color(0xffefefef),
|
||||||
|
body: Stack(children: [
|
||||||
|
Container(
|
||||||
|
height: 300,
|
||||||
|
margin: EdgeInsets.only(top: 50),
|
||||||
|
decoration: new BoxDecoration(
|
||||||
|
image: new DecorationImage(
|
||||||
|
image: new ExactAssetImage('assets/images/user-avatar.png'),
|
||||||
|
fit: BoxFit.cover,
|
||||||
|
),
|
||||||
|
),
|
||||||
|
child: new BackdropFilter(
|
||||||
|
filter: new ImageFilter.blur(sigmaX: 10.0, sigmaY: 10.0),
|
||||||
|
child: new Container(
|
||||||
|
decoration: new BoxDecoration(color: Colors.white.withOpacity(0.0)),
|
||||||
|
),
|
||||||
|
)),
|
||||||
|
SingleChildScrollView(
|
||||||
|
scrollDirection: Axis.vertical,
|
||||||
|
child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
|
||||||
|
SizedBox(
|
||||||
|
height: 80,
|
||||||
|
),
|
||||||
|
Container(
|
||||||
|
padding: EdgeInsets.only(left: 15, right: 15),
|
||||||
|
child: Row(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||||
|
children: [
|
||||||
|
IconButton(
|
||||||
|
onPressed: () {},
|
||||||
|
icon: Icon(
|
||||||
|
Icons.arrow_back_ios,
|
||||||
|
color: Colors.white,
|
||||||
|
)),
|
||||||
|
InkWell(
|
||||||
|
child: Container(
|
||||||
|
padding: EdgeInsets.only(left: 10, right: 10, top: 5, bottom: 5),
|
||||||
|
decoration: BoxDecoration(borderRadius: BorderRadius.circular(15), color: Colors.black.withOpacity(.3)),
|
||||||
|
child: Row(children: [
|
||||||
|
Icon(Icons.photo, color: Colors.white),
|
||||||
|
Text(
|
||||||
|
'Edit',
|
||||||
|
style: TextStyle(color: Colors.white, fontSize: 12),
|
||||||
|
)
|
||||||
|
]))),
|
||||||
|
],
|
||||||
|
)),
|
||||||
|
HeaderPanel(),
|
||||||
|
ProfilePanle()
|
||||||
|
]),
|
||||||
|
)
|
||||||
|
]));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,16 @@
|
|||||||
|
import 'package:flutter/cupertino.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class HeaderPanel extends StatelessWidget {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
double _width = MediaQuery.of(context).size.width;
|
||||||
|
return Container(
|
||||||
|
padding: EdgeInsets.symmetric(horizontal: _width / 10, vertical: 0),
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [],
|
||||||
|
));
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,122 @@
|
|||||||
|
import 'package:flutter/cupertino.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
|
||||||
|
class ProfileInFo extends StatelessWidget {
|
||||||
|
String data = '.';
|
||||||
|
double sliderValue = 75;
|
||||||
|
List<ProfileMenu> menu = [
|
||||||
|
ProfileMenu(name: 'Personal information', icon: ''),
|
||||||
|
ProfileMenu(name: 'Basic Details', icon: ''),
|
||||||
|
ProfileMenu(name: 'Family Details', icon: ''),
|
||||||
|
];
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
return Container(
|
||||||
|
child: Column(crossAxisAlignment: CrossAxisAlignment.center, children: [
|
||||||
|
/// card header
|
||||||
|
customLabel('Sultan khan', 22, Colors.black, true),
|
||||||
|
|
||||||
|
customLabel('217869 | Software Developer', 14, Colors.grey, false),
|
||||||
|
|
||||||
|
customLabel('sultan.khan@cloudsolutions.com.sa', 13, Colors.black, true),
|
||||||
|
|
||||||
|
Divider(height: 40, thickness: 8, color: const Color(0xffefefef)),
|
||||||
|
|
||||||
|
customLabel('We appreciates you for completing the service of', 10, Colors.black, true),
|
||||||
|
|
||||||
|
SizedBox(height: 10),
|
||||||
|
Container(
|
||||||
|
child: Row(mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.center, children: [
|
||||||
|
Column(
|
||||||
|
children: [customLabel('Years', 14, const Color(0xff808080), true), customLabel('03', 22, Color(0xff2BB8A6), true)],
|
||||||
|
),
|
||||||
|
Column(
|
||||||
|
children: [customLabel('Month', 14, const Color(0xff808080), true), customLabel('06', 22, Color(0xff2BB8A6), true)],
|
||||||
|
),
|
||||||
|
Column(
|
||||||
|
children: [customLabel('Day', 14, const Color(0xff808080), true), customLabel('20', 22, Color(0xff2BB8A6), true)],
|
||||||
|
)
|
||||||
|
])),
|
||||||
|
|
||||||
|
Divider(height: 40, thickness: 8, color: const Color(0xffefefef)),
|
||||||
|
Container(
|
||||||
|
padding: EdgeInsets.only(
|
||||||
|
left: 20,
|
||||||
|
right: 20,
|
||||||
|
),
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.start,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.start,
|
||||||
|
children: [
|
||||||
|
customLabel('Profile Completion 75%', 18, Colors.black, true),
|
||||||
|
const SizedBox(height: 10),
|
||||||
|
Row(
|
||||||
|
children: [
|
||||||
|
for (var i = 0; i < 4; i++)
|
||||||
|
if (i < 3) Expanded(child: drawSlider(Color(0xff2BB8A6))) else Expanded(child: drawSlider(const Color(0xffefefef)))
|
||||||
|
],
|
||||||
|
),
|
||||||
|
const SizedBox(height: 10),
|
||||||
|
Text(
|
||||||
|
'Complete Profile',
|
||||||
|
style: TextStyle(color: Color(0xff2BB8A6), fontWeight: FontWeight.bold, decoration: TextDecoration.underline),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
)),
|
||||||
|
|
||||||
|
/// description
|
||||||
|
Divider(height: 50, thickness: 8, color: const Color(0xffefefef)),
|
||||||
|
|
||||||
|
Column(
|
||||||
|
children: menu.map((i) => rowItem(i, context)).toList(),
|
||||||
|
)
|
||||||
|
]));
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget drawSlider(color) {
|
||||||
|
return Row(children: [
|
||||||
|
Expanded(
|
||||||
|
flex: 1,
|
||||||
|
child: ClipRRect(
|
||||||
|
borderRadius: BorderRadius.circular(10),
|
||||||
|
child: Container(
|
||||||
|
height: 6,
|
||||||
|
width: 20,
|
||||||
|
color: color,
|
||||||
|
),
|
||||||
|
)),
|
||||||
|
Container(height: 6, width: 3, color: Colors.white),
|
||||||
|
]);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget rowItem(obj, context) {
|
||||||
|
return InkWell(
|
||||||
|
onTap: () {
|
||||||
|
// Navigator.pushNamed(
|
||||||
|
// context,
|
||||||
|
// AppRoutes.addEitScreen,
|
||||||
|
// arguments: obj,
|
||||||
|
// );
|
||||||
|
},
|
||||||
|
child: ListTile(
|
||||||
|
leading: FlutterLogo(),
|
||||||
|
title: Text(obj.name),
|
||||||
|
trailing: Icon(Icons.arrow_forward),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget customLabel(String label, double size, Color color, bool isBold, {double padding = 0.0}) => Container(
|
||||||
|
padding: EdgeInsets.all(padding),
|
||||||
|
// height: 50,
|
||||||
|
child: Column(
|
||||||
|
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
|
||||||
|
crossAxisAlignment: CrossAxisAlignment.center,
|
||||||
|
children: [Text(label, style: TextStyle(color: color, fontSize: size, fontWeight: isBold ? FontWeight.bold : FontWeight.normal))]));
|
||||||
|
}
|
||||||
|
|
||||||
|
class ProfileMenu {
|
||||||
|
final String name;
|
||||||
|
final String icon;
|
||||||
|
ProfileMenu({this.name = '', this.icon = ''});
|
||||||
|
}
|
||||||
@ -0,0 +1,28 @@
|
|||||||
|
import 'package:flutter/cupertino.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:mohem_flutter_app/ui/screens/profile/widgets/profile_info.dart';
|
||||||
|
|
||||||
|
class ProfilePanle extends StatelessWidget {
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
double _width = MediaQuery.of(context).size.width;
|
||||||
|
return Container(
|
||||||
|
margin: EdgeInsets.fromLTRB(5, 0, 5, 10),
|
||||||
|
height: MediaQuery.of(context).size.height,
|
||||||
|
child: Stack(children: [
|
||||||
|
Container(
|
||||||
|
width: _width,
|
||||||
|
margin: EdgeInsets.only(top: 50),
|
||||||
|
padding: EdgeInsets.only(top: 50),
|
||||||
|
decoration: BoxDecoration(
|
||||||
|
color: Colors.white,
|
||||||
|
borderRadius: const BorderRadius.only(topLeft: Radius.circular(25), topRight: Radius.circular(25)),
|
||||||
|
boxShadow: [BoxShadow(color: Colors.white60, blurRadius: 10, spreadRadius: 10)]),
|
||||||
|
child: ProfileInFo(),
|
||||||
|
),
|
||||||
|
Container(height: 100, alignment: Alignment.center, child: ProfileImage())
|
||||||
|
]));
|
||||||
|
}
|
||||||
|
|
||||||
|
Widget ProfileImage() => CircleAvatar(radius: 70, backgroundImage: AssetImage('assets/images/user-avatar.png'));
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue