Skip to content

Instantly share code, notes, and snippets.

@tailorvj

tailorvj/flutter-social-media-profile-app-ui.dart

Created September 25, 2020 04:57
Show Gist options
  • Save tailorvj/0aa5d60250fe24768be7f75fe29fc355 to your computer and use it in GitHub Desktop.
Save tailorvj/0aa5d60250fe24768be7f75fe29fc355 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
flutter-social-media-profile-app-ui.dart
import 'package:flutter/material.dart';
final appHeight = 650.0;
final appWidth = 350.0;
final topSectionHeight = 250.0;
final middleSectionHeight = 110.0;
final List<String> urls = [ 'https://media.wired.com/photos/5d8aab8bef84070009028d31/master/pass/Plant-Music-1162975190.jpg',
'https://images.photowall.com/products/58131/jungle-plants.jpg?h=699&q=85',
'https://ak.picdn.net/shutterstock/videos/19795549/thumb/8.jpg',
'https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSzIBq8nrrF631566zTKrioISfjIx9M868t-w&usqp=CAU',
'https://images-na.ssl-images-amazon.com/images/I/81reO0wmVBL._AC_SX466_.jpg', 'https://img.auctiva.com/imgdata/1/7/3/7/5/8/7/webimg/615338835_tp.jpg',
'https://images.unsplash.com/photo-1491147334573-44cbb4602074?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80',
'https://i.pinimg.com/originals/f8/2a/c0/f82ac0c390529f0a96d975c6b6f7c997.jpg', 'https://i.pinimg.com/originals/e2/21/55/e22155d78e4ab7d13195322ae3b50f4c.jpg',
'https://i.pinimg.com/originals/56/55/c5/5655c5df6a3f97377063ba5f17feb97e.jpg',
];
final GlobalKey<ScaffoldState> scaffoldKey = GlobalKey<ScaffoldState>();
final SnackBar snackBar = const SnackBar(content: Text('Showing Snackbar'));
const PrimaryColor = Color(0xffECFEF3);
const SecondaryColor = Color(0xffD9FDE8);
void main() {
runApp(
MaterialApp(
home: MyApp(),
debugShowCheckedModeBanner: false,
),
);
}
class MyWidget extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
key: scaffoldKey,
appBar: AppBar(
leading: Icon(
Icons.arrow_back,
color: PrimaryColor,
),
actions: <Widget>[
IconButton(
icon: const Icon(Icons.more_vert, color: PrimaryColor),
tooltip: 'Show Snackbar',
onPressed: () {
scaffoldKey.currentState.showSnackBar(snackBar);
},
),
],
elevation: 0.0,
backgroundColor: Colors.grey[900],
),
body: Container(
color: Colors.white,
child: CustomScrollView(
slivers: <Widget>[
SliverList(
delegate: SliverChildListDelegate(
[
ProfileInfo("Profile Info"),
Stack(
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Text(''),
width: appWidth/2,
height: middleSectionHeight,
decoration: BoxDecoration(
color: Color(0xffECFEF3),
),
),
Container(
child: Text(''),
width: appWidth/2,
height: middleSectionHeight,
decoration: BoxDecoration(
color: Colors.white,
),
),
]
),
ProfileStats("Profile Stats"),
]
),
Container(
height: 70.0,
child: Stack(
children: <Widget>[
Container(
color: SecondaryColor,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.only(topLeft: Radius.circular(70.0)),
color: Colors.white,
),
child: Center(
child: Text('Posts', style: TextStyle(fontFamily: 'Futura', fontSize: 16.0)),
),
),
],
),
),
],
),
),
SliverPadding(
padding: EdgeInsets.only(bottom: 20.0, left: 20.0, right: 20.0),
sliver: Container(
child: SliverGrid(
gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
maxCrossAxisExtent: 175.0,
mainAxisSpacing: 15.0,
crossAxisSpacing: 15.0,
childAspectRatio: 1.0,
),
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return Container(
padding: (index%2==0 ? EdgeInsets.only(left: 20.0) : EdgeInsets.only(right: 20.0)),
child: ImageWidget('${urls[index]}', index)
);
},
childCount: urls.length,
),
),
),
),
],
),
),
);
}
}
class ProfileInfo extends StatelessWidget {
final String text;
ProfileInfo(this.text);
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
Container(
color: SecondaryColor,
width: MediaQuery.of(context).size.width,
height: topSectionHeight,
),
Container(
height: topSectionHeight,
width: MediaQuery.of(context).size.width,
padding: EdgeInsets.all(16.0),
child: Center(
child: Column(
children: <Widget>[
Container(
alignment: Alignment.centerLeft,
padding: EdgeInsets.only(left: 30.0),
child: Text('My Profile', style: TextStyle(fontSize: 28.0, fontWeight: FontWeight.w500, color: Color(0xff205A48), fontFamily: 'Futura'))
),
Container(
margin: EdgeInsets.all(20.0),
decoration: BoxDecoration(
shape: BoxShape.circle,
boxShadow: [
BoxShadow(
color: Color(0xff022711).withOpacity(0.3),
spreadRadius: 1,
blurRadius: 10,
offset: Offset(0, 5), // changes position of shadow
),
],
),
child: CircleAvatar(
backgroundImage: NetworkImage('https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQlpABsTZz1ljJxRKEbV9HpYfWBcTzq3e2yww&usqp=CAU'),
radius: 35.0,
)
),
Container(
child: Text('Jane Doe', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w500, color: Color(0xff1B4B3D), fontFamily: 'Futura'))
),
Container(
margin: EdgeInsets.only(top: 12.0),
child: Text('@jane.doe', style: TextStyle(color: Color(0xff35977A), fontWeight: FontWeight.w100, fontFamily: 'Futura'))
)
]
)
),
decoration: BoxDecoration(
color: PrimaryColor,
borderRadius: BorderRadius.only(bottomRight: Radius.circular(70.0))
),
)
],
);
}
}
class ProfileStats extends StatelessWidget {
final String text;
ProfileStats(this.text);
@override
Widget build(BuildContext context) {
return Container(
height: middleSectionHeight,
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 2.0),
child: Text('Photos', style: TextStyle(color: Color(0xff35977A), fontWeight: FontWeight.w100, fontFamily: 'Futura')),
),
Container(
margin: EdgeInsets.only(top: 5.0),
child: Text('567', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400, color: Color(0xff1B4B3D), fontFamily: 'Futura'))
)
]
),
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 2.0),
child: Text('Followers', style: TextStyle(color: Color(0xff35977A), fontWeight: FontWeight.w100, fontFamily: 'Futura')),
),
Container(
margin: EdgeInsets.only(top: 5.0),
child: Text('12,454', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400, color: Color(0xff1B4B3D), fontFamily: 'Futura'))
)
]
),
Column(
children: <Widget>[
Container(
margin: EdgeInsets.only(top: 2.0),
child: Text('Follows', style: TextStyle(color: Color(0xff35977A), fontWeight: FontWeight.w100, fontFamily: 'Futura')),
),
Container(
margin: EdgeInsets.only(top: 5.0),
child: Text('127', style: TextStyle(fontSize: 18.0, fontWeight: FontWeight.w400, color: Color(0xff1B4B3D), fontFamily: 'Futura'))
)
]
),
]
)
]
),
decoration: BoxDecoration(
color: SecondaryColor,
borderRadius: BorderRadius.only(bottomRight: Radius.circular(70.0), topLeft: Radius.circular(70.0)),
),
);
}
}
class ImageWidget extends StatelessWidget {
final String url;
final int index;
ImageWidget(this.url, this.index);
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
image: DecorationImage(
fit: BoxFit.cover,
image: NetworkImage(this.url)),
borderRadius: BorderRadius.all(Radius.circular(40.0)),
),
alignment: Alignment.center,
width: 200.0,
);
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: PrimaryColor,
),
home: Scaffold(
body: Container(
decoration: BoxDecoration(
color: Colors.grey[800],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
width: appWidth,
height: appHeight,
child: Center(
child: MyWidget()
),
)
]
)
]
)
)
),
debugShowCheckedModeBanner: false,
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment