Flutter Profile Page UI Design – Flutter App Design [2023]

Flutter

This flutter UI tutorial will teach us to design two Flutter Profile UI Design Pages.

In this video, we’ll take a look at how to design a Flutter profile page UI. We’ll cover the basics of how to design a Flutter profile page UI, including how to create a Flutter profile screen, how to design the user interface, and how to add interactivity to the UI.

If you’re looking to design a Flutter app or want to learn more about the Flutter platform, then this video is for you. We’ll cover everything you need to know to create a well- Designed Flutter profile page UI. Thanks for watching!


class ProfileScreen extends StatelessWidget {
const ProfileScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
var isDark = MediaQuery.of(context).platformBrightness == Brightness.dark;
return Scaffold(
appBar: AppBar(
leading: IconButton(onPressed: () => Get.back(), icon: const Icon(LineAwesomeIcons.angle_left)),
title: Text(tProfile, style: Theme.of(context).textTheme.headline4),
actions: [IconButton(onPressed: () {}, icon: Icon(isDark ? LineAwesomeIcons.sun : LineAwesomeIcons.moon))],
),
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(tDefaultSize),
child: Column(
children: [

/// -- IMAGE
Stack(
children: [
SizedBox(
width: 120,
height: 120,
child: ClipRRect(
borderRadius: BorderRadius.circular(100), child: const Image(image: AssetImage(tProfileImage))),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
width: 35,
height: 35,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(100), color: tPrimaryColor),
child: const Icon(
LineAwesomeIcons.alternate_pencil,
color: Colors.black,
size: 20,
),
),
),
],
),
const SizedBox(height: 10),
Text(tProfileHeading, style: Theme.of(context).textTheme.headline4),
Text(tProfileSubHeading, style: Theme.of(context).textTheme.bodyText2),
const SizedBox(height: 20),

/// -- BUTTON
SizedBox(
width: 200,
child: ElevatedButton(
onPressed: () => Get.to(() => const UpdateProfileScreen()),
style: ElevatedButton.styleFrom(
backgroundColor: tPrimaryColor, side: BorderSide.none, shape: const StadiumBorder()),
child: const Text(tEditProfile, style: TextStyle(color: tDarkColor)),
),
),
const SizedBox(height: 30),
const Divider(),
const SizedBox(height: 10),

/// -- MENU
ProfileMenuWidget(title: "Settings", icon: LineAwesomeIcons.cog, onPress: () {}),
ProfileMenuWidget(title: "Billing Details", icon: LineAwesomeIcons.wallet, onPress: () {}),
ProfileMenuWidget(title: "User Management", icon: LineAwesomeIcons.user_check, onPress: () {}),
const Divider(),
const SizedBox(height: 10),
ProfileMenuWidget(title: "Information", icon: LineAwesomeIcons.info, onPress: () {}),
ProfileMenuWidget(
title: "Logout",
icon: LineAwesomeIcons.alternate_sign_out,
textColor: Colors.red,
endIcon: false,
onPress: () {
Get.defaultDialog(
title: "LOGOUT",
titleStyle: const TextStyle(fontSize: 20),
content: const Padding(
padding: EdgeInsets.symmetric(vertical: 15.0),
child: Text("Are you sure, you want to Logout?"),
),
confirm: Expanded(
child: ElevatedButton(
onPressed: () => AuthenticationRepository.instance.logout(),
style: ElevatedButton.styleFrom(backgroundColor: Colors.redAccent, side: BorderSide.none),
child: const Text("Yes"),
),
),
cancel: OutlinedButton(onPressed: () => Get.back(), child: const Text("No")),
);
}),
],
),
),
),
);
}
}

import 'package:flutter/material.dart';
import 'package:line_awesome_flutter/line_awesome_flutter.dart';

import '../../../../../constants/colors.dart';


class ProfileMenuWidget extends StatelessWidget {
const ProfileMenuWidget({
Key? key,
required this.title,
required this.icon,
required this.onPress,
this.endIcon = true,
this.textColor,
}) : super(key: key);

final String title;
final IconData icon;
final VoidCallback onPress;
final bool endIcon;
final Color? textColor;

@override
Widget build(BuildContext context) {

var isDark = MediaQuery.of(context).platformBrightness == Brightness.dark;
var iconColor = isDark ? tPrimaryColor : tAccentColor;

return ListTile(
onTap: onPress,
leading: Container(
width: 40,
height: 40,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: iconColor.withOpacity(0.1),
),
child: Icon(icon, color: iconColor),
),
title: Text(title, style: Theme.of(context).textTheme.bodyText1?.apply(color: textColor)),
trailing: endIcon? Container(
width: 30,
height: 30,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(100),
color: Colors.grey.withOpacity(0.1),
),
child: const Icon(LineAwesomeIcons.angle_right, size: 18.0, color: Colors.grey)) : null,
);
}
}



class UpdateProfileScreen extends StatelessWidget {
const UpdateProfileScreen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
final controller = Get.put(ProfileController());
return Scaffold(
appBar: AppBar(
leading: IconButton(onPressed: () => Get.back(), icon: const Icon(LineAwesomeIcons.angle_left)),
title: Text(tEditProfile, style: Theme.of(context).textTheme.headline4),
),
body: SingleChildScrollView(
child: Container(
padding: const EdgeInsets.all(tDefaultSize),
child: Column(
children: [
// -- IMAGE with ICON
Stack(
children: [
SizedBox(
width: 120,
height: 120,
child: ClipRRect(
borderRadius: BorderRadius.circular(100),
child: const Image(image: AssetImage(tProfileImage))),
),
Positioned(
bottom: 0,
right: 0,
child: Container(
width: 35,
height: 35,
decoration:
BoxDecoration(borderRadius: BorderRadius.circular(100), color: tPrimaryColor),
child: const Icon(LineAwesomeIcons.camera, color: Colors.black, size: 20),
),
),
],
),
const SizedBox(height: 50),

// -- Form Fields
Form(
child: Column(
children: [
TextFormField(
decoration: const InputDecoration(
label: Text(tFullName), prefixIcon: Icon(LineAwesomeIcons.user)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
decoration: const InputDecoration(
label: Text(tEmail), prefixIcon: Icon(LineAwesomeIcons.envelope_1)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
decoration: const InputDecoration(
label: Text(tPhoneNo), prefixIcon: Icon(LineAwesomeIcons.phone)),
),
const SizedBox(height: tFormHeight - 20),
TextFormField(
obscureText: true,
decoration: InputDecoration(
label: const Text(tPassword),
prefixIcon: const Icon(Icons.fingerprint),
suffixIcon:
IconButton(icon: const Icon(LineAwesomeIcons.eye_slash), onPressed: () {}),
),
),
const SizedBox(height: tFormHeight),

// -- Form Submit Button
SizedBox(
width: double.infinity,
child: ElevatedButton(
onPressed: () => Get.to(() => const UpdateProfileScreen()),
style: ElevatedButton.styleFrom(
backgroundColor: tPrimaryColor,
side: BorderSide.none,
shape: const StadiumBorder()),
child: const Text(tEditProfile, style: TextStyle(color: tDarkColor)),
),
),
const SizedBox(height: tFormHeight),

// -- Created Date and Delete Button
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
const Text.rich(
TextSpan(
text: tJoined,
style: TextStyle(fontSize: 12),
children: [
TextSpan(
text: tJoinedAt,
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 12))
],
),
),
ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.redAccent.withOpacity(0.1),
elevation: 0,
foregroundColor: Colors.red,
shape: const StadiumBorder(),
side: BorderSide.none),
child: const Text(tDelete),
),
],
)
],
),
),
],
),
),
),
);
}
}

Let's Connect

Videos are always a better source for in-depth knowledge. So, connect with me at YouTube.

Download Project

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Latest Courses

Flutter Login App UI Source Code- How to Create a complete Flutter app - Flutter education app - Flutter app UI Design - Flutter Course - Flutter Complete App 2022
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorials

Flutter Profile page UI Design - Flutter app design 2023 - Profile Screen Flutter UI - Flutter 2023
Flutter Firebase phone authentication - Firebase Phone auth tutorial in flutter - Flutter Firebase phone number authentication 2022
Firebase Authentication in flutter - Flutter firebase authentication 2022 - firebase auth tutorial 2022 - firebase flutter auth
How to setup firebase in flutter 2022 - Flutter firebase setup
Dashboard Source COde - Dashboard design in flutter - flutter dashoard - flutter app design 2022 - Flutter UI - Flutter homepage

Join Our Mailing List

Join our mailing list to receive the latest, Free Courses, Video Tutorials, free codes and updates regarding Tutorials and services. You will also start getting coupons on the related services.

You have Successfully Subscribed!