Membuat UI Instagram dengan Flutter
Assalamualaikum Warahmatullahi Wabarakatuh, kembali lagi di blok saya.
Kali ini saya akan membagikan bagaimana cara membuat UI (User Interface) instagram dengan menggunakan flutter. Dibawa ini adalah hasil dari pengerjaan kita nanti:
Tanpa berlama-lama langsung saja kita masuk di tahapan-tahapan pembuatannya.
Pertama-tama buatlah project dengan nama ui_instagram, ingat dalam pembuatan project di aplikasi android studio tidak diperbolehkan menggunakan huruf besar dan memberikan spasi antara kata.
Setelah membuat project baru, buatlah sebuah folder baru di dalam folder "lib" dengan nama"pages", dalama folder pages buatlah sebuag file dengan nama "profile.dart" yang berfungsi untuk program utama dari tampilan widget.
Berikut kodingan dalam profile.dart:
import 'package:flutter/material.dart';
import '../widgets/profile_picture.dart';
import '../widgets/info_item.dart';
import '../widgets/tab_item.dart';
import '../widgets/story_item.dart';
class ProfilePage extends StatelessWidget {
const ProfilePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
elevation: 0,
backgroundColor: Colors.white,
title: Row(
children: [
Text(
"Nurhaiva",
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black
),
),
Icon(Icons.arrow_drop_down,
color: Colors.black),
],
),
actions: [
IconButton(onPressed: () {},
icon: Icon(Icons.add_box_outlined,
color: Colors.black)
),
IconButton(onPressed: () {},
icon: Icon(Icons.menu,
color: Colors.black)
),
],
),
body: ListView(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Row(
children: [
ProfilePicture(),
Expanded(
child: Row(
mainAxisAlignment : MainAxisAlignment.spaceEvenly,
children: [
inforItem("989","Posts"),
inforItem("12M","Followers"),
inforItem("124","Following"),
]
),
),
],
)
),
SizedBox(height: 15),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Text(
"Nurhaiva_203",
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
),
),
),
SizedBox(height: 5),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: RichText(text: TextSpan(
text: "It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout",
style: TextStyle(
color: Colors.black,
),
children:[
TextSpan(
text: "#hastag",
style: TextStyle(
color: Colors.blue,
),
),
],
),
)
),
SizedBox(height: 5),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: Text("Link goes here", style: TextStyle(
color: Colors.blue,
),)
),
SizedBox(height: 5),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: OutlinedButton(
onPressed: () {},
child: Text("Edit Profile",
style: TextStyle(
color: Colors.black,
),),
),
),
SizedBox(height: 5),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Row(
children: [
story_item("Story 1"),
story_item("Story 2"),
story_item("Story 3"),
story_item("Story 4"),
story_item("Story 5"),
story_item("Story 6"),
],
)
)
),
SizedBox(height: 15),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TabItem(Icons.grid_on_outlined, true),
TabItem(Icons.person_pin_outlined, false),
],
),
GridView.builder(
shrinkWrap: true,
physics: NeverScrollableScrollPhysics(),
itemCount: 213,
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
),
itemBuilder: (context, index) => Image.network(
"data:image/jpeg;base64,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",
fit : BoxFit.cover,
),
)
],
),
bottomNavigationBar: BottomNavigationBar(
currentIndex: 4,
selectedItemColor: Colors.black,
unselectedItemColor: Colors.grey,
showSelectedLabels: false,
showUnselectedLabels: false,
items: [
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: "",
),
BottomNavigationBarItem(
icon: Icon(Icons.search),
label: "",
),
BottomNavigationBarItem(
icon: Icon(Icons.movie_filter_rounded),
label: "",
),
BottomNavigationBarItem(
icon: Icon(Icons.shopping_bag_rounded),
label: "",
),
BottomNavigationBarItem(
icon: Icon(Icons.person),
label: "",
),
],
),
);
}
Selanjutnya
dalam folder ”lib” kita akan membuat folder baru yaitu “widgets”, dalam folder
ini terdapat 4 file yaitu:
info_item.dart
import 'package:flutter/material.dart';
class inforItem extends StatelessWidget {
inforItem(this.title, this.value);
final String title;
final String value;
@override
Widget build(BuildContext context) {
return Column(
children: [
Text(title,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold
)),
Text(value),
],
);
}
}
profile_picture.dart
import 'package:flutter/material.dart';
class ProfilePicture extends StatelessWidget {
const ProfilePicture({
super.key,
});
@override
Widget build(BuildContext context) {
return Stack(
alignment: Alignment.center,
children:[
Container(
width: 120,
height: 120,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Colors.red,
Colors.amber,
],
),
borderRadius: BorderRadius.circular(60),
),
),
Container(
width: 110,
height: 110,
decoration: BoxDecoration(
color: Colors.grey[300],
image: DecorationImage(
image: NetworkImage
("data:image/jpeg;base64,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"),
fit: BoxFit.cover,
),
border: Border.all(
color: Colors.white,
width: 5,
),
borderRadius: BorderRadius.circular(60),
),
)
],
);
}
}
story_item.dart
import 'package:flutter/material.dart';
class story_item extends StatelessWidget {
story_item(this.title);
final String title;
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 10),
child: Column(
children: [
Stack(
alignment: Alignment.center,
children: [
Container(
height: 70,
width: 70,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.grey[300],
),
),
Container(
height: 68,
width: 68,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(40),
color: Colors.grey,
border: Border.all(
color: Colors.white,
width: 5,
),
image: DecorationImage(
image: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTHd8HFCTIaOgVIMUxClCGYinuD-3k9cCdit5I-k5Zv9B31f3zsm2S8C8YERsBmYJFZMN4&usqp=CAU"),
fit: BoxFit.cover,
)
),
)
],
),
SizedBox(height: 5,),
Text(title)
],
),
);
}
}
tab_item.dart
import 'package:flutter/material.dart';
class TabItem extends StatelessWidget {
TabItem(this.icon, this.active);
final bool active;
final IconData icon;
@override
Widget build(BuildContext context) {
return Expanded(
child: Container(
padding: EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border(
bottom: BorderSide(
color: active == true ? Colors.black : Colors.white,
width: 1,
)
)
),
child: Icon(icon),
)
);
}
}
Jangan lupa pada file main.dart import pages profile.dart:
import './pages/profile.dart';
Itulah
tahapan pembuatan ui instagram dengan menggunakan flutter.
Semoga bisa
membatu yaa J
Assalamualaikum
Warahmatullahi Wabarakatuh.
Komentar
Posting Komentar