Flutter user profile form page with source code – user profile form page design using flutter
- admin
- 0
- on Sep 13, 2022
We use flutter to design clean user profile page, to create this clean profile page you will learn to combine many widget such as;
- TextField
- ClipPath
- ListView
- Expanded
- ChoiceChip
- FloatingActionButton and more…
Sample Screen
Source Code
import 'package:flutter/material.dart';
class ProfilePage7 extends StatelessWidget {
const ProfilePage7({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
extendBody: true,
extendBodyBehindAppBar: true,
body: Stack(
children: [
ClipPath(
child: Container(
height: 380,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage('https://media.istockphoto.com/photos/headshot-portrait-of-smiling-ethnic-businessman-in-office-picture-id1300512215?b=1&k=20&m=1300512215&s=170667a&w=0&h=LsZL_-vvAHB2A2sNLHu9Vpoib_3aLLkRamveVW3AGeQ='), fit: BoxFit.cover),
),
foregroundDecoration:
BoxDecoration(color: Colors.deepPurpleAccent.withOpacity(0.8)),
),
),
ListView(
padding: const EdgeInsets.all(8.0),
children: [
const SizedBox(height: 90),
_buildAvatar('https://media.istockphoto.com/photos/headshot-portrait-of-smiling-ethnic-businessman-in-office-picture-id1300512215?b=1&k=20&m=1300512215&s=170667a&w=0&h=LsZL_-vvAHB2A2sNLHu9Vpoib_3aLLkRamveVW3AGeQ='),
const SizedBox(height: 10.0),
Text(
"Som Piseth",
style: TextStyle(
color: Colors.white,
fontSize: 22,
fontWeight: FontWeight.bold
),
textAlign: TextAlign.center,
),
const SizedBox(height: 5.0),
Text(
"Mobile UI, UX Design",
style: TextStyle(
color: Colors.white,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 10.0),
Card(
color: Colors.white,
elevation: 0,
margin: const EdgeInsets.symmetric(
vertical: 8.0,
horizontal: 20.0,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20.0),
),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(
child: Column(
children: [
Text(
"26year",
style: Theme.of(context).textTheme.headline5,
),
const SizedBox(height: 10.0),
Text(
"Age",
style: Theme.of(context).textTheme.subtitle1,
),
],
),
),
Expanded(
child: Column(
children: [
Text(
"4year",
style: Theme.of(context).textTheme.headline5,
),
const SizedBox(height: 10.0),
Text(
"Experience",
style: Theme.of(context).textTheme.subtitle1,
),
],
),
),
Expanded(
child: Column(
children: [
Text(
r"$900",
style: Theme.of(context).textTheme.headline5,
),
const SizedBox(height: 10.0),
Text(
"Salary",
style: Theme.of(context).textTheme.subtitle1,
),
],
),
),
],
),
),
),
const SizedBox(height: 10.0),
Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
const Text("Profile Information"),
TextField(
controller: TextEditingController()..text = 'Som Piseth',
decoration: InputDecoration(
labelText: "FullName",
),
style: TextStyle(
fontSize: 18.0,
),
),
const SizedBox(height: 10.0),
const TextField(
decoration: InputDecoration(
labelText: "Education",
),
),
const SizedBox(height: 10.0),
const TextField(
decoration: InputDecoration(
labelText: "Mobile Phone",
),
keyboardType: TextInputType.phone,
),
const SizedBox(height: 10.0),
InputDatePickerFormField(
firstDate: DateTime(DateTime.now().year - 5),
lastDate: DateTime(DateTime.now().year + 5),
initialDate: DateTime.now(),
fieldLabelText: "Date of Birth",
),
const SizedBox(height: 10.0),
const Text(
"Programming Languages",
),
const SizedBox(height: 5.0),
Wrap(
spacing: 10.0,
runSpacing: 10.0,
children: [
ChoiceChip(
label: const Text("Html & CSS"),
onSelected: (val) {},
selected: true,
),
ChoiceChip(
label: const Text("Javascript"),
onSelected: (val) {},
selected: true,
),
ChoiceChip(
label: const Text("Jquery"),
onSelected: (val) {},
selected: true,
),
ChoiceChip(
label: const Text("Bootstrap"),
onSelected: (val) {},
selected: true,
),
ChoiceChip(
label: const Text("PHP"),
onSelected: (val) {},
selected: false,
),
ChoiceChip(
label: const Text("Flutter"),
onSelected: (val) {},
selected: false,
),
],
),
],
),
),
],
)
],
),
floatingActionButton: FloatingActionButton(
child: Icon(Icons.save),
backgroundColor: Colors.indigo,
onPressed: () {},
),
);
}
CircleAvatar _buildAvatar(String image, {double radius = 80}) {
return CircleAvatar(
backgroundColor: Colors.white,
radius: radius,
child: CircleAvatar(
radius: radius - 2,
backgroundImage: NetworkImage(image),
),
);
}
}