Last active
January 27, 2019 20:43
-
-
Save Blasanka/3e53d2f22ecbac9f9e937dcaf3c1f563 to your computer and use it in GitHub Desktop.
This is a complete code example for beautiful user profile material ui design with Flutter and Dart. Here is blog post and video for this: https://slcoderlk.blogspot.com/2019/01/beautiful-user-profile-material-ui-with.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
name: mysqltest | |
description: A new Flutter project. | |
version: 1.0.0+1 | |
environment: | |
sdk: ">=2.0.0-dev.68.0 <3.0.0" | |
dependencies: | |
flutter: | |
sdk: flutter | |
cupertino_icons: ^0.1.2 | |
dev_dependencies: | |
flutter_test: | |
sdk: flutter | |
flutter: | |
uses-material-design: true | |
assets: | |
- assets/images/cover.jpeg | |
- assets/images/nickfrost.jpg | |
fonts: | |
- family: Spectral | |
fonts: | |
- asset: assets/fonts/Spectral-Regular.ttf | |
weight: 400 | |
- asset: assets/fonts/Spectral-Medium.ttf | |
weight: 500 | |
- family: Roboto | |
fonts: | |
- asset: assets/fonts/Roboto-Light.ttf | |
weight: 200 | |
- asset: assets/fonts/Roboto-Bold.ttf | |
weight: 700 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import 'package:flutter/material.dart'; | |
void main() => runApp(MyApp()); | |
class MyApp extends StatelessWidget { | |
@override | |
Widget build(BuildContext context) { | |
return MaterialApp( | |
title: "User Profile", | |
debugShowCheckedModeBanner: false, | |
home: UserProfilePage(), | |
); | |
} | |
} | |
class UserProfilePage extends StatelessWidget { | |
final String _fullName = "Nick Frost"; | |
final String _status = "Software Developer"; | |
final String _bio = | |
"\"Hi, I am a Freelance developer working for hourly basis. If you wants to contact me to build your product leave a message.\""; | |
final String _followers = "173"; | |
final String _posts = "24"; | |
final String _scores = "450"; | |
Widget _buildCoverImage(Size screenSize) { | |
return Container( | |
height: screenSize.height / 2.6, | |
decoration: BoxDecoration( | |
image: DecorationImage( | |
image: AssetImage('assets/images/cover.jpeg'), | |
fit: BoxFit.cover, | |
), | |
), | |
); | |
} | |
Widget _buildProfileImage() { | |
return Center( | |
child: Container( | |
width: 140.0, | |
height: 140.0, | |
decoration: BoxDecoration( | |
image: DecorationImage( | |
image: AssetImage('assets/images/nickfrost.jpg'), | |
fit: BoxFit.cover, | |
), | |
borderRadius: BorderRadius.circular(80.0), | |
border: Border.all( | |
color: Colors.white, | |
width: 10.0, | |
), | |
), | |
), | |
); | |
} | |
Widget _buildFullName() { | |
TextStyle _nameTextStyle = TextStyle( | |
fontFamily: 'Roboto', | |
color: Colors.black, | |
fontSize: 28.0, | |
fontWeight: FontWeight.w700, | |
); | |
return Text( | |
_fullName, | |
style: _nameTextStyle, | |
); | |
} | |
Widget _buildStatus(BuildContext context) { | |
return Container( | |
padding: EdgeInsets.symmetric(vertical: 4.0, horizontal: 6.0), | |
decoration: BoxDecoration( | |
color: Theme.of(context).scaffoldBackgroundColor, | |
borderRadius: BorderRadius.circular(4.0), | |
), | |
child: Text( | |
_status, | |
style: TextStyle( | |
fontFamily: 'Spectral', | |
color: Colors.black, | |
fontSize: 20.0, | |
fontWeight: FontWeight.w300, | |
), | |
), | |
); | |
} | |
Widget _buildStatItem(String label, String count) { | |
TextStyle _statLabelTextStyle = TextStyle( | |
fontFamily: 'Roboto', | |
color: Colors.black, | |
fontSize: 16.0, | |
fontWeight: FontWeight.w200, | |
); | |
TextStyle _statCountTextStyle = TextStyle( | |
color: Colors.black54, | |
fontSize: 24.0, | |
fontWeight: FontWeight.bold, | |
); | |
return Column( | |
mainAxisAlignment: MainAxisAlignment.center, | |
children: <Widget>[ | |
Text( | |
count, | |
style: _statCountTextStyle, | |
), | |
Text( | |
label, | |
style: _statLabelTextStyle, | |
), | |
], | |
); | |
} | |
Widget _buildStatContainer() { | |
return Container( | |
height: 60.0, | |
margin: EdgeInsets.only(top: 8.0), | |
decoration: BoxDecoration( | |
color: Color(0xFFEFF4F7), | |
), | |
child: Row( | |
mainAxisAlignment: MainAxisAlignment.spaceAround, | |
children: <Widget>[ | |
_buildStatItem("Followers", _followers), | |
_buildStatItem("Posts", _posts), | |
_buildStatItem("Scores", _scores), | |
], | |
), | |
); | |
} | |
Widget _buildBio(BuildContext context) { | |
TextStyle bioTextStyle = TextStyle( | |
fontFamily: 'Spectral', | |
fontWeight: FontWeight.w400,//try changing weight to w500 if not thin | |
fontStyle: FontStyle.italic, | |
color: Color(0xFF799497), | |
fontSize: 16.0, | |
); | |
return Container( | |
color: Theme.of(context).scaffoldBackgroundColor, | |
padding: EdgeInsets.all(8.0), | |
child: Text( | |
_bio, | |
textAlign: TextAlign.center, | |
style: bioTextStyle, | |
), | |
); | |
} | |
Widget _buildSeparator(Size screenSize) { | |
return Container( | |
width: screenSize.width / 1.6, | |
height: 2.0, | |
color: Colors.black54, | |
margin: EdgeInsets.only(top: 4.0), | |
); | |
} | |
Widget _buildGetInTouch(BuildContext context) { | |
return Container( | |
color: Theme.of(context).scaffoldBackgroundColor, | |
padding: EdgeInsets.only(top: 8.0), | |
child: Text( | |
"Get in Touch with ${_fullName.split(" ")[0]},", | |
style: TextStyle(fontFamily: 'Roboto', fontSize: 16.0), | |
), | |
); | |
} | |
Widget _buildButtons() { | |
return Padding( | |
padding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 16.0), | |
child: Row( | |
children: <Widget>[ | |
Expanded( | |
child: InkWell( | |
onTap: () => print("followed"), | |
child: Container( | |
height: 40.0, | |
decoration: BoxDecoration( | |
border: Border.all(), | |
color: Color(0xFF404A5C), | |
), | |
child: Center( | |
child: Text( | |
"FOLLOW", | |
style: TextStyle( | |
color: Colors.white, | |
fontWeight: FontWeight.w600, | |
), | |
), | |
), | |
), | |
), | |
), | |
SizedBox(width: 10.0), | |
Expanded( | |
child: InkWell( | |
onTap: () => print("Message"), | |
child: Container( | |
height: 40.0, | |
decoration: BoxDecoration( | |
border: Border.all(), | |
), | |
child: Center( | |
child: Padding( | |
padding: EdgeInsets.all(10.0), | |
child: Text( | |
"MESSAGE", | |
style: TextStyle(fontWeight: FontWeight.w600), | |
), | |
), | |
), | |
), | |
), | |
), | |
], | |
), | |
); | |
} | |
@override | |
Widget build(BuildContext context) { | |
Size screenSize = MediaQuery.of(context).size; | |
return Scaffold( | |
body: Stack( | |
children: <Widget>[ | |
_buildCoverImage(screenSize), | |
SafeArea( | |
child: SingleChildScrollView( | |
child: Column( | |
children: <Widget>[ | |
SizedBox(height: screenSize.height / 6.4), | |
_buildProfileImage(), | |
_buildFullName(), | |
_buildStatus(context), | |
_buildStatContainer(), | |
_buildBio(context), | |
_buildSeparator(screenSize), | |
SizedBox(height: 10.0), | |
_buildGetInTouch(context), | |
SizedBox(height: 8.0), | |
_buildButtons(), | |
], | |
), | |
), | |
), | |
], | |
), | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment