Flutter: Create Profile Page UI With Masonry Gallery View
Flutter
UI
page
In this blog, I am going to introduce Profile Page UI With Masonry Gallery View. Along with learning the awesome Profile Page UI With Masonry Gallery ViewI implementation in Flutter, we will also learn how its coding workflows and structures work.
How to Create a New Future Project
First, we need to create a new Flutter project. For that, make sure that you've installed the Flutter SDK and other Flutter app development-related requirements.
If everything is properly set up, then in order to create a project we can simply run the following command in our desired local directory:
flutter create flutter-product-detail-carousel-ui
After we've set up the project, we can navigate inside the project directory and execute the following command in the terminal to run the project in either an available emulator or an actual device:
flutter runHow to create the Main Chat Screen UI
Now, we are going to start building the UI for our chat application.
First, we need to make some simple configurations to the default boilerplate code in the main.dart file. We'll remove some default code and add the simple MaterialApp pointing to the remove Container and Call ProfilePage page for now:
import 'package:detailpageui/pages/home/home.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Profile(),
);
}
}For Masonry Grid View to add. simple_animations package here link
installation Command
flutter pub add flutter_staggered_grid_view
How to Build the Main Profile Screen
Inside the ./lib directory of our root project folder, we need to create a folder called ./pages. This folder will hold all the dart files for different screens.
Inside ./lib/pages/ directory, we need to create a file called ProfilePage.dart. Inside the ProfilePage.dart file, we need to add the basic Stateful widget code as shown in the code snippet below:
import 'package:flutter/material.dart';
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
class Profile extends StatefulWidget {
const Profile({super.key});
@override
State<Profile> createState() => _ProfileState();
}
class _ProfileState extends State<Profile> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xff09032f),
appBar: AppBar(
leading: Icon(Icons.arrow_back_ios, color: Colors.white),
title: Text("Profile"),
elevation: 0,
backgroundColor: Color(0xff09032f),
actions: [
Padding(padding: EdgeInsets.all(8.0), child: Icon(Icons.more_vert_outlined, color: Colors.white))
],
),
body: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(left: 25.0, top:8),
child: CircleAvatar(
radius: 40,
backgroundImage: AssetImage('assets/images/1.jpeg'),
),
),
Padding(
padding: EdgeInsets.only(left: 35),
child:Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text("Avanya", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 24, color: Colors.white),),
Padding(
padding: const EdgeInsets.only(top: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Icon(Icons.location_on, color: Colors.white, size: 18),
Padding(
padding: const EdgeInsets.only(left: 8),
child: Text("Indore- IN", style: TextStyle(color: Colors.white, wordSpacing: 2, letterSpacing: 4),),
)
],
),
)
],
),
)
],
),
Padding(
padding: const EdgeInsets.all(24),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("18K",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25),),
Text("Followers",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16, ),),
],
),
Container(
color: Colors.white,
width: 0.2,
height: 22,
),
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("400",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 25),),
Text("Following",style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16, ),),
],
),
Container(
color: Colors.white,
width: 0.2,
height: 22,
),
Container(
padding: EdgeInsets.only(left: 18, top: 8 ,right: 18, bottom: 8),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(33)),
gradient: LinearGradient(
colors: [Color(0xff6d0eb5), Color(0xff4059f1)],
begin: Alignment.bottomRight,
end: Alignment.centerLeft
)
),
child: Text("Follow", style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),),
)
],
),
),
Container(
height: 44,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 10,
itemBuilder: (BuildContext context, int index){
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30),
border: Border.all(color: Colors.white12)
),
margin: EdgeInsets.only(right: 10),
child: Padding(
padding: const EdgeInsets.only(top: 14, bottom: 5, right: 20, left: 20),
child: Text("tag ${index}", style: TextStyle(color: Colors.white)),
),
);
},
),
),
Expanded(
child: Container(
width: double.infinity,
margin: EdgeInsets.only(top: 15),
decoration: BoxDecoration(
color: Color(0xffefefef),
borderRadius: BorderRadius.vertical(top: Radius.circular(30)),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Padding(
padding: EdgeInsets.only(top:30, right: 25, left: 25),
child: Text("Protfllio", style: TextStyle(fontWeight: FontWeight.bold, fontSize: 30)),
),
Container(
padding: EdgeInsets.only(right: 25, left: 25),
height: 40,
child: ListView.builder(
scrollDirection: Axis.horizontal,
itemCount: 5,
itemBuilder: (BuildContext context, int index){
return Padding(
padding: const EdgeInsets.only(right: 17, top:3),
child: index ==1 ?
Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text("Seleted", style: TextStyle(color:Color(0xff434ae8), fontSize: 20)),
CircleAvatar(
radius: 2,
backgroundColor: Color(0xff434ae8),
)
],
)
: Text("Featured ${index}", style: TextStyle(color:Colors.grey.withOpacity(0.9), fontSize: 18)),
);
Container();
}
),
),
Expanded(
child: Stack(
alignment:Alignment.bottomCenter,
children: [
Align(
alignment: Alignment.topCenter,
child: Container(
padding: EdgeInsets.only(right: 25, left: 25),
// height: 300,
child: ListView(
shrinkWrap: true,
children: [
StaggeredGrid.count(
crossAxisCount: 4,
mainAxisSpacing: 4,
crossAxisSpacing: 4,
children: [
StaggeredGridTile.count(
crossAxisCellCount: 2, mainAxisCellCount: 2,
child: Image.asset('assets/images/1.jpeg', fit: BoxFit.cover)
),
StaggeredGridTile.count(
crossAxisCellCount: 2, mainAxisCellCount: 1,
child: Image.asset('assets/images/2.jpeg', fit: BoxFit.cover,)
),
StaggeredGridTile.count(
crossAxisCellCount: 1, mainAxisCellCount: 1,
child: Image.asset('assets/images/3.jpeg', fit: BoxFit.cover,)
),
StaggeredGridTile.count(
crossAxisCellCount: 1, mainAxisCellCount: 1,
child: Image.asset('assets/images/4.jpg', fit: BoxFit.cover)
),
StaggeredGridTile.count(
crossAxisCellCount: 4, mainAxisCellCount: 2,
child: Image.asset('assets/images/1.jpeg', fit: BoxFit.cover)
),
StaggeredGridTile.count(
crossAxisCellCount: 2, mainAxisCellCount: 2,
child: Image.asset('assets/images/2.jpeg', fit: BoxFit.cover)
),
StaggeredGridTile.count(
crossAxisCellCount: 2, mainAxisCellCount: 2,
child: Image.asset('assets/images/3.jpeg', fit: BoxFit.cover)
),
StaggeredGridTile.count(
crossAxisCellCount: 1, mainAxisCellCount: 2,
child: Image.asset('assets/images/1.jpeg', fit: BoxFit.cover)
),
StaggeredGridTile.count(
crossAxisCellCount: 1, mainAxisCellCount: 2,
child: Image.asset('assets/images/2.jpeg', fit: BoxFit.cover,)
),
StaggeredGridTile.count(
crossAxisCellCount: 2, mainAxisCellCount: 1,
child: Image.asset('assets/images/3.jpeg', fit: BoxFit.cover,)
),
StaggeredGridTile.count(
crossAxisCellCount: 2, mainAxisCellCount: 1,
child: Image.asset('assets/images/4.jpg', fit: BoxFit.cover)
),
],
)
],
),
),
),
],
),
)
],
),
),
)
],
),
);
}
}
Output:
Flutter
UI
page
