Pada artikel kali ini kita akan belajar membuat sebuah UI (User Interface) menggunakan flutter, dengan menerapkan UI sederhana ini semoga bisa dikembangkan lebih bagus lagi ya,, yang perlu disiapkan adalah membuat sebuah new flutter project pada IDE (Android Studio atau Visual Code Studio).
Daftar Isi
dependencies :
dependencies:
flutter:
sdk: flutter
font_awesome_flutter: ^8.8.1
flutter_swiper: ^1.1.6
polygon_clipper: ^1.0.2Lalu kita akan memulai ngoding pada file main.dart, dan kita ubah kode yang berada pada file main.dart menjadi seperti ini :
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'BelajarFlutter',
debugShowCheckedModeBanner: false,
home: MyHomePage(),
);
}
}langkah berikutnya pada properti home terdapat MyHomePage() dimana class MyHomePage akan menampung beberapa widget yang kita butuhkan. Buatlah class MyHomePage() dengan menggunakan statelesswidget
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: MyActionButton(),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: MyAppbar(),
body: Container(
child: ListView(
children: <Widget>[
SizedBox(height: 16.0),
MyAppBar(),
SizedBox(height: 16.0),
FoodListview(),
SizedBox(height: 16.0),
SelectTypeSection(),
SizedBox(height: 16.0),
MenuItemsList()
],
),
));
}
}Kode diatas terdapat class yang akan kita buat terdiri dari :
- MyActionButton
- MyAppbar
- MyAppBar
- FoodListview
- SelectTypeSection
- MenuItemsList
pada kasus ini kita akan coba membuat class MyActionButton dan MyAppBar terlebih dahulu, kodenya masih terdapat di dalam main.dart :
MyActionButton
class MyActionButton extends StatelessWidget {
const MyActionButton({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 100.0,
width: 100.0,
child: ClipPolygon(
sides: 6,
child: Container(
color: iconYellow,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(FontAwesomeIcons.book),
SizedBox(
height: 4.0,
),
Text(
'Menu',
style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16.0),
)
],
),
),
),
);
}
}dan Class MyAppBar :
MyAppBar
class MyAppbar extends StatelessWidget {
const MyAppbar({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return BottomAppBar(
child: Container(
height: 60.0,
child: Padding(
padding: const EdgeInsets.only(top: 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Column(
children: <Widget>[
Icon(Icons.home),
Text('Home', style: TextStyle(fontSize: 12.0))
],
),
Column(
children: <Widget>[
Icon(Icons.search, color: Colors.black45),
Text('Search', style: TextStyle(fontSize: 12.0))
],
),
Container(
width: 100.0,
),
Column(
children: <Widget>[
Icon(Icons.shop, color: Colors.black45),
Text(
'Wishlist',
style: TextStyle(fontSize: 12.0),
)
],
),
Column(
children: <Widget>[
Icon(
Icons.shopping_cart,
color: Colors.black45,
),
Text('Cart', style: TextStyle(fontSize: 12.0))
],
),
],
),
),
),
);
}
}
Untuk Mengetes Kode Diatas berikan komentar terlebih dahulu pada bagian
MyHomePage ListView.
belajarflutter.com
Selanjutnya buat variabel untuk menampung data image dan membuat variabel warna untuk mengatur warna apps
// IMAGES
var meatImage =
'https://i.ibb.co/5FRwHtB/unnamed.jpg';
var foodImage =
'https://i.ibb.co/qk6PzDy/London-broil.jpg';
var burgerImage =
'https://images.unsplash.com/photo-1534790566855-4cb788d389ec?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
var chickenImage =
'https://images.unsplash.com/photo-1532550907401-a500c9a57435?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80';
// COLORS
var textYellow = Color(0xFFf6c24d);
var iconYellow = Color(0xFFf4bf47);
var green = Color(0xFF4caf6a);
var greenLight = Color(0xFFd8ebde);
var red = Color(0xFFf36169);
var redLight = Color(0xFFf2dcdf);
var blue = Color(0xFF398bcf);
var blueLight = Color(0xFFc1dbee);
Selanjutnya buat class FoodListView()
FoodListView
class FoodListview extends StatelessWidget {
const FoodListview({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(left: 8.0),
child: Container(
height: 160.0,
child: ListView(
scrollDirection: Axis.horizontal,
children: <Widget>[
ItemCard(),
ItemCard(),
ItemCard(),
ItemCard(),
],
),
),
);
}
}Widget Class ItemCard()
ItemCard
class ItemCard extends StatelessWidget {
const ItemCard({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(right: 8.0),
child: Container(
height: 160.0,
width: 300.0,
decoration: BoxDecoration(
image: DecorationImage(
image: NetworkImage(meatImage), fit: BoxFit.cover)),
child: Stack(
children: <Widget>[
Container(
height: 160.0,
width: 300.0,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: [Colors.black.withOpacity(0.1), Colors.black],
begin: Alignment.topCenter,
end: Alignment.bottomCenter)),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Spacer(),
Text(
'25% OFF',
style: TextStyle(
color: textYellow,
fontWeight: FontWeight.bold,
fontSize: 24.0,
letterSpacing: 1.1),
),
Text(
'ON FIRST 3 ORDERS',
style: TextStyle(
color: Colors.white,
fontSize: 16.0,
letterSpacing: 1.1),
),
],
),
),
],
)),
);
}
}
Outputnya :
Selanjutnya membuat widget class SelectTypeSection()
SelectTypeSection
class SelectTypeSection extends StatelessWidget {
const SelectTypeSection({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
// final height = MediaQuery.of(context).size.height;
// final width = MediaQuery.of(context).size.width;
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: SingleChildScrollView(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Expanded(
child: Container(
height: 92.0,
width: 120.0,
color: greenLight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.starHalfAlt,
color: green,
),
SizedBox(
height: 4.0,
),
Text(
'Special Menu',
style:
TextStyle(color: green, fontWeight: FontWeight.w500),
)
],
),
),
),
Container(
height: 92.0,
width: 120.0,
color: redLight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.solidClock,
color: red,
),
SizedBox(
height: 4.0,
),
Text(
'Book a Table',
style: TextStyle(color: red, fontWeight: FontWeight.w500),
)
],
),
),
Container(
height: 92.0,
width: 124.0,
color: blueLight,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Icon(
FontAwesomeIcons.solidLaugh,
color: blue,
),
SizedBox(
height: 4.0,
),
Text(
'Caterings',
style: TextStyle(color: blue, fontWeight: FontWeight.w500),
)
],
),
),
],
),
),
);
}
}
outputnya :
MenuItemsList()
class MenuItemsList extends StatelessWidget {
const MenuItemsList({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Popular Dishes',
style: TextStyle(fontSize: 22.0, color: Colors.black54),
),
SizedBox(height: 16.0),
MenuItem(),
MenuItem(),
],
),
);
}
}MenuItem()
class MenuItem extends StatelessWidget {
const MenuItem({
Key key,
}) : super(key: key);
@override
Widget build(BuildContext context) {
return Padding(
padding: const EdgeInsets.only(bottom: 8.0),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 100.0,
width: 100.0,
child: Image.network(
burgerImage,
fit: BoxFit.cover,
),
),
SizedBox(
width: 16.0,
),
Container(
child: Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
decoration: BoxDecoration(
color: iconYellow,
borderRadius: BorderRadius.circular(4.0)),
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 8.0, vertical: 4.0),
child: Row(
children: <Widget>[
Icon(
Icons.star,
size: 15.0,
),
Text('4.5')
],
),
),
),
SizedBox(
height: 8.0,
),
Text(
'Special Chicken Burger',
style: TextStyle(fontWeight: FontWeight.w600),
),
Container(
width: 200.0,
child: Text(
'Chicken, Yogurt, Red chilli, Ginger paste, Carlic paste, ...',
style: TextStyle(color: Colors.grey),
)),
],
),
),
)
],
),
);
}
}
Output
Source Code Lengkapnya
Permisi, maaf mau tanya
untuk fungsi MyAppBar yang bagian atas itu tidak ada kodingnya diartikel
ada kok mas
bagaimana untuk setting dependensi
Bagaimana cara merubah project flutter menjadi apk ?