Skip to content

Faris Alzayed - ProfilePageUI Project #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
FarisAI24 wants to merge 4 commits into
base: programming
Choose a base branch
from
Open

Faris Alzayed - ProfilePageUI Project #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
80b0dac
Updated files
FarisAI24 Feb 16, 2024
4405c5b
Update
FarisAI24 Feb 16, 2024
15c05eb
Updated files
FarisAI24 Feb 17, 2024
a2d50cf
Update README.md
FarisAI24 Mar 1, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
503 changes: 15 additions & 488 deletions README.md
View file
Open in desktop

Large diffs are not rendered by default.

Binary file added assets/images/edit-icon.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added assets/images/profilepic.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
5 changes: 5 additions & 0 deletions lib/constants/constants.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
class Constants {
static const int colorBackgroundTop = 0xFFF44336;
static const int colorBackgroundBottom = 0xFF212133;
static const int colorLabel = 0xCDFFFBFB;
}
8 changes: 3 additions & 5 deletions lib/main.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import 'package:flutter/material.dart';
import 'screens/homepage.dart';

void main() {
runApp(const MainApp());
Expand All @@ -10,11 +11,8 @@ class MainApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: Scaffold(
body: Center(
child: Text('Hello World!'),
),
),
debugShowCheckedModeBanner: false,
home: HomePage(),
);
}
}
173 changes: 173 additions & 0 deletions lib/screens/homepage.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,173 @@
import 'package:flutter/material.dart';
import 'package:profile_page/constants/constants.dart';

class HomePage extends StatelessWidget {
const HomePage({super.key});

@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Column(
children: [
Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width,
color: const Color(Constants.colorBackgroundBottom),
child: Stack(
children: [
const Center(
child: Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: EdgeInsets.only(bottom: 20.0),
child: Text(
'@UserName123',
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.bold,
),
),
),
),
),
Container(
height: MediaQuery.of(context).size.height * 0.20,
width: MediaQuery.of(context).size.width,
color: const Color(Constants.colorBackgroundTop),
),
const Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 110,
backgroundColor: Color(Constants.colorBackgroundBottom),
),
),
const Align(
alignment: Alignment.center,
child: CircleAvatar(
radius: 100,
backgroundColor: Colors.transparent,
foregroundColor: Colors.transparent,
child: ClipOval(
child: Image(
image: AssetImage('assets/images/profilepic.png'),
fit: BoxFit.cover,
),
),
),
),
smallCircles(),
],
),
),
inputAndButton(context),
],
),
),
);
}

Container inputAndButton(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height * 0.60,
width: MediaQuery.of(context).size.width,
color: const Color(Constants.colorBackgroundBottom),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: [
TextFormField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Name',
labelStyle: const TextStyle(color: Color(Constants.colorLabel)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
const SizedBox(height: 20),
TextFormField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Email',
labelStyle: const TextStyle(color: Color(Constants.colorLabel)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
const SizedBox(height: 20),
TextFormField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Phone Number',
labelStyle: const TextStyle(color: Color(Constants.colorLabel)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
const SizedBox(height: 20),
TextFormField(
style: const TextStyle(color: Colors.white),
decoration: InputDecoration(
labelText: 'Nationality',
labelStyle: const TextStyle(color: Color(Constants.colorLabel)),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
),
),
),
const SizedBox(height: 20),
ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor:
const Color(Constants.colorBackgroundTop), // background
foregroundColor: Colors.white,
minimumSize: const Size(200, 60), // foreground
),
onPressed: () {},
child: const Text(
'Save Profile',
style: TextStyle(fontSize: 20.0),
),
),
],
),
),
);
}

Positioned smallCircles() {
return const Positioned(
bottom: 100,
right: 115,
child: Stack(
children: [
CircleAvatar(
radius: 30,
backgroundColor: Color(Constants.colorBackgroundBottom),
),
Positioned(
bottom: 5,
right: 5,
child: CircleAvatar(
radius: 25,
backgroundColor: Colors.transparent,
foregroundColor: Colors.transparent,
child: ClipOval(
child: Image(
image: AssetImage('assets/images/edit-icon.png'),
fit: BoxFit.cover,
),
),
),
),
],
),
);
}
}
Empty file removed lib/screens/profile_page.dart
View file
Open in desktop
Empty file.
8 changes: 4 additions & 4 deletions pubspec.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,10 +58,10 @@ packages:
dependency: "direct dev"
description:
name: flutter_lints
sha256: a25a15ebbdfc33ab1cd26c63a6ee519df92338a9c10f122adda92938253bef04
sha256: e2a421b7e59244faef694ba7b30562e489c2b489866e505074eb005cd7060db7
url: "https://pub.dev"
source: hosted
version: "2.0.3"
version: "3.0.1"
flutter_test:
dependency: "direct dev"
description: flutter
Expand All @@ -71,10 +71,10 @@ packages:
dependency: transitive
description:
name: lints
sha256: "0a217c6c989d21039f1498c3ed9f3ed71b354e69873f13a8dfc3c9fe76f1b452"
sha256: cbf8d4b858bb0134ef3ef87841abdf8d63bfc255c266b7bf6b39daa1085c4290
url: "https://pub.dev"
source: hosted
version: "2.1.1"
version: "3.0.0"
matcher:
dependency: transitive
description:
Expand Down
4 changes: 3 additions & 1 deletion pubspec.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ dependencies:
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
flutter_lints: ^3.0.1

flutter:
uses-material-design: true
assets:
- assets/images/