Flutter user profile detail screen with free source code – user profile ui page design using Flutter
- admin
- 0
- on Sep 13, 2022
This article I will show you how to use flutter code to design user profile detail screen step by step.
in this user profile detail screen using flutter you will learn a lot of component such has;
- Stack
- CircleAvata
- SingleChildScrollView
- ChoiceChip
- ListTile and More…
Sample UI
Source Code
- User Profile Page 8
import 'package:flutter/material.dart';
class ProfilePage8 extends StatelessWidget {
const ProfilePage8({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
leading: const Icon(Icons.arrow_back_ios_outlined,color: Colors.grey,),
backgroundColor: Colors.transparent,
elevation: 0,
actions: [
IconButton(
icon: const Icon(
Icons.favorite_border,
color: Colors.grey,
),
onPressed: () {},
),
IconButton(
icon: const Icon(
Icons.ios_share,
color: Colors.grey,
),
onPressed: () {},
)
],
),
body: SingleChildScrollView(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 10,),
Row(
children: [
const SizedBox(width: 20.0,),
const SizedBox(
width: 90.0,
height: 90.0,
child: CircleAvatar(
radius: 40,
backgroundColor: Colors.deepPurpleAccent,
child: CircleAvatar(
radius: 39.0, backgroundImage: NetworkImage("https://salle306.fr/wp-content/plugins/rentmy-online-rental-shop/assets/profile.png")))),
const SizedBox(width: 20.0),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 10,),
const Text(
"CHAN PHALLA",
style: TextStyle(
fontSize: 18.0, fontWeight: FontWeight.bold),
),
const SizedBox(height: 8.0),
const Text("Debt Management Specialist"),
const SizedBox(height: 5.0),
Row(
children: [
Text(
"Phnom Penh, Cambodia",
style: TextStyle(color: Colors.grey),
),
],
),
SizedBox(height: 5.0),
Container(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.end,
children: [
CircleAvatar(
backgroundColor: Colors.blue,
radius: 12,
child: Icon(Icons.facebook_rounded,color: Colors.white,size: 20,),
),
SizedBox(width: 5,),
CircleAvatar(
backgroundColor: Colors.red,
radius: 12,
child: Icon(Icons.play_circle_fill_outlined,color: Colors.white,size: 20,),
),
SizedBox(width: 5,),
CircleAvatar(
backgroundColor: Colors.green,
radius: 12,
child: Icon(Icons.search,color: Colors.white,size: 20,),
),
],
),
),
],
)
],
),
SizedBox(height: 25.0),
_buildTitle("Profile"),
_buildProfile(
profile: "- FullName: Pi Nita",),
_buildProfile(
profile: "- Gender: Female",),
_buildProfile(
profile: "- Date of Birth: 20-02-2001",),
_buildProfile(
profile: "- Phone: +855 12 789 987",),
_buildProfile(
profile: "- Married: Single",),
SizedBox(height: 20,),
_buildTitle("Skills"),
SizedBox(height: 10.0),
Padding(
padding: EdgeInsets.only(left: 20,right: 20),
child: Wrap(
spacing: 4.0,
runSpacing: 0.0,
children: [
_buildChoiceChip(label: "Loan Analysis",status: true),
_buildChoiceChip(label: "Secretariat",status: true),
_buildChoiceChip(label: "Administrator",status: true),
_buildChoiceChip(label: "English Translator",status: true),
_buildChoiceChip(label: "Loan Terms",status: true),
_buildChoiceChip(label: "Agreement",status: true),
],
),
),
SizedBox(height: 30.0),
_buildTitle("Experience"),
_buildExperienceRow(
company: "CAMB - ETOP",
position: "Loan Analysis",
duration: "2020 - 2022"),
_buildExperienceRow(
company: "KHBASE - LAW",
position: "Secretary",
duration: "2018 - 2020"),
SizedBox(height: 20.0),
],
),
),
);
}
ChoiceChip _buildChoiceChip({required String label, required bool status}){
return ChoiceChip(label: Text(label), selected: status,onSelected: (val) {},);
}
Container _buildProfile(
{required String profile,}) {
return Container(
height: 30,
child: ListTile(
contentPadding: EdgeInsets.only(left:30),
dense: true,
title: Text(
profile,
style: TextStyle(color: Colors.black, fontWeight: FontWeight.w600,fontSize: 16),
),
),
);
}
ListTile _buildExperienceRow(
{required String company, String? position, String? duration}) {
return ListTile(
dense: true,
leading: const Padding(
padding: const EdgeInsets.only(top: 8.0, left: 20.0),
child: Icon(
Icons.arrow_forward_ios,
size: 12.0,
color: Colors.black54,
),
),
title: Text(
company,
style: const TextStyle(color: Colors.black, fontWeight: FontWeight.w600,fontSize: 18),
),
subtitle: Text("$position ($duration)"),
);
}
Widget _buildTitle(String title) {
return Padding(
padding: const EdgeInsets.only(left: 20.0,right: 20),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title.toUpperCase(),
style: const TextStyle(fontSize: 18.0, fontWeight: FontWeight.bold),
),
Divider(
color: Colors.grey.withOpacity(0.5),
),
],
),
);
}
}