profile details
Sultan Khan
3 years ago
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