Beautiful user profile material UI with Flutter and Dart

Flutter & Dart user profile ui design by ego coding.

I used two fonts:

Roboto: https://fonts.google.com/specimen/Roboto?selection.family=Roboto

Spectral: https://fonts.google.com/specimen/Spectral

These are the images:

cover image: https://cdn-images-1.medium.com/max/800/0*qZS6sL0kKw5DVXPn.jpg

profile avator: here

Video tutorial:

	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

view raw pubspec.yaml hosted with ❤ by GitHub

	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(),
	],
	),
	),
	),
	],
	),
	);
	}
	}

view raw user_profile_ui.dart hosted with ❤ by GitHub