Tutorial Flutter — Styling Component
Belajar cara membuat halaman login dengan tampilan yang menarik di Flutter
Halo teman-teman, kembali lagi bersama saya Jeremy selaku mentor Mobile Development di Komunitas Android CCIT — FTUI. Pada kesempatan kali ini kita akan sama-sama belajar untuk membuat halaman login dengan tampilan yang menarik menggunakan fungsi Styling.
Ketika kita membuat aplikasi, tentu saja kita akan membuat aplikasi yang menarik. Mengapa? Karena tentu saja jika kita membuat aplikasi menarik, banyak pengguna akan suka dengan aplikasi buatan kita. sehingga mereka akan terus menggunakan aplikasi tersebut.
Untuk kali ini, Widget yang akan kita gunakan :
1. Icon
2. Text Field
3. Image
4. Drop down button
5. Text
6. Flat button
Pertama, buat dulu folder baru. Buat nama folder sesuka kalian. Setelah itu, open folder yang kalian buat, dan buat project baru lalu beri nama “login”.
Buka lib/main.dart. Disitu kita akan melihat contoh syntax. Hapus widget stateful yang dinamai MyApp. Sampai hanya menyisakan kode dibawah ini:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());Setelah itu kita buat widget Stateful. Untuk membuat widget stateful, Flutter sudah membuatkan shortcut untuk memanggil stateless widget dan stateful widget dengan mengetikkan “stl” dan pilih stateful widget.
Jika tidak ada pilihan yang muncul, tekan Ctrl + space.
Kemudian akan muncul multikursor untuk menulis nama class. Masukan saja MyApp, MyApp akan menjadi nama class dalam aplikasi kita. Sebenarnya kita bisa menggantinya dengan apa saja, namun kita harus merubah isi dari void main kita nantinya. Lihat contoh dibawah:
Setelah itu ganti Container menjadi MaterialApp. MaterialApp adalah widget design material. MaterialApp digunakan untuk memanggil widget-widget yang developer ingin gunakan. Tanpa MaterialApp, akan mendapat error seperti dibawah ini.
Kemudian property title( title di isi judul singkat ) dan home. Lalu, isi home dengan Scaffold (scafflod akan digunakan untuk meletakkan widget-widget nya). Hasilnya akan seperti ini:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flut',
home: Scaffold(
appBar: AppBar(
title: Text("login Page"),
),
body: Container(
),
)
);
}
}
Sekarang kita sudah bisa melanjutkan tutorial styling flutter.
1. Mengatur Background
Kita bisa mengatur background dengan warna atau gambar. Caranya dengan menggunakaan BoxDecoration yang di ketik di dalam property decoration.
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flut',
home: Scaffold(
appBar: AppBar(
title: Text("login Page"),
),
body: Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/srg.jpg"),
fit: BoxFit.contain,
)
),
), //container isi
)
);
}
}
Untuk memunculkan gambar sudah ada ya pada post tentang widget. Gambar default disini diatur menjadi fixed size. Dengan bantuan kelas fill kita bisa mengatur ingin seberapa penuh gambar pada container. Tapi, kali ini bakground yang akan sesi ini gunakan adalah background warna / color.
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flut',
home: Scaffold(
appBar: AppBar(
title: Text("login Page"),
),
body: Container(
decoration: BoxDecoration(
color: Colors.yellow
),
),
)
);
}
}
Berikut adalah hasil apabila dijalankan.
Di flutter, kita juga dapat menggunakan gradien. Jadi kita dapat membuat sekumpulan warna menjadi menjadi satu dalam sebuah layar. Contohnya adalah seperti ini.
Syntaxnya:
import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flut',
home: Scaffold(
appBar: AppBar(
title: Text("login Page"),
),
body: Container(
decoration: BoxDecoration(
//jumlah stop berbanding lurus dengan jumlah warna
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomCenter,
//jumlah stop berbanding lurus dengan jumlah warna
stops: [0.3, 0.6, 0.9],
colors: [
Color.fromRGBO(12, 235, 235, 1),
Color.fromRGBO(32, 227, 178, 1),
Color.fromRGBO(41, 255, 198, 1),
],
),
),
//pembatas
),
)
);
}
}
Dan kali ini kita menggunakan nya sebagai tutorial kali ini.
2. Border Radius
Untuk mengatur posisi setiap widget, Kita menggunakan column dan row. Seperti yang di jelaskan di medium sebelumnya tentang layout, column mengatur widget secara horizontal sedangkan row mengatur widget didalamnya secara vertikal. Disini kita akan menggunakan column untuk mengatur widget-widget kita.
Langkah berikutnya kita buat Container lagi. Container ini kita akan buat effect “timbul”.
Ganti komen “pembatas” di atas dengan syntax ini:
Catatan: Jika kalian mengcopy syntax di setiap medium, jangan bawa titik — titik(atas dan bawah) syntax. Itu hanya menjelaskan syntax ini adalah potongannya saja.
.......................
child: Container(
//isi child: Container
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomCenter,
//jumlah stop berbanding lurus dengan jumlah warna
stops: [0.3, 0.6, 0.9],
colors: [
Color.fromRGBO(12, 235, 235, 1),
Color.fromRGBO(32, 227, 178, 1),
Color.fromRGBO(41, 255, 198, 1),
],
),
boxShadow: [
]),
margin: EdgeInsets.fromLTRB(40, 35, 40, 50),
//child: Container
),
............
Disini kita menimpa lagi container ini dengan warna yang sama. Lalu kita tambahkan property boxShadow di dalam BoxDecoration untuk memanggil constuctor BoxShadow dimana constructor ini memberikan shadow. Lalu tambah syntax ini di dalam (kurung siku)boxShadow:
...........
BoxShadow(
blurRadius: 18.0,
color: Colors.transparent.withOpacity(.5),
spreadRadius: 12.5),
..........
blurRadius menentukan seberapa blur warna yang ingin dibuat. Color menentukan warna apa yang ingin digunakan. Di bagian color ada “withOpacity” untuk nentuka opacity/ ke-transparannya. spreadRadius untuk menentukan seberapa jauh blur yang dibuat.
borderRadius: BorderRadius.all(Radius.circular(12)),borderRadius(pada syntax di atas) digunakan untuk mengatur lengkungan setiap titik sudut di Container. Untuk baris diatas itu menjelaskan setiap sudut container “menumpul”.
Jika hanya ingin membuat beberapa titik saja, kita bisa menggunakan Syntax ini:
borderRadius: BorderRadius.only(),Untuk mengatur titik containernya, gunakan “spesifikasi”(topLeft , topRight ,bottomLeft,bottomRight). Contoh:
borderRadius: BorderRadius.only(topLeft:Radius.circular(12)),Artinya, hanya diatas kiri saja yang akan dilengkungkan.
borderRadius: BorderRadius.only(topLeft:Radius.circular(12), bottomRight:Radius.circular(12)),Artinya, hanya diatas kiri dan bawah kanan saja yang akan dilengkungkan.
3. Padding & Margin
Beri margin dibawah sytax tadi(dibawah tutup kurung boxShadow).
margin: EdgeInsets.fromLTRB(40, 35, 40, 50),Penjelasan
Margin dan padding hanya bisa dipanggil di dalam beberapa widget, contohnya Containner. Margin digunakan untuk mengatur jarak antara layout luar dengan layout tersebut. Singkatnya untuk “memperkecil” layoutnya. Sedangkan padding, digunakan untuk mengatur jarak antara layout dengan widget di dalamnya(termaksud widget layout)/”memperkecil bagian dalamnya”.
EdgeInsets adalah default untuk mengatur “ruang lingkup” untuk margin dan padding. margin memiliki 4 Constructor(sala satu contoh ada di atas).
EdgeInsets.all( )
Constructor ini membuat semua sisi(kiri, kanan, atas, bawah) memiliki nilai yang sama.
margin: EdgeInsets.all(40),EdgeInsets.fromLTRB(left, top, right, bottom)
Fungsi ini mengcustom semua sisi di widget(termaksud container). Jadi, setiap sisi kita harus memberikan nilai/ jaraknya(contohnya ada di atas dan kita akan gunakan).
EdgeInsets.only()
Fungsi ini meng-”custom” hanya sisi mana saja yang ingin diberikan nilai.Misalnya syntax ini
margin: EdgeInsets.only(top:40),Pada baris di atas, hanya memberikan margin yang berada pada bagian atas(top) saja.
EdgeInsets.symetric()
Consturctor ini hanya bisa di isi 2 saja. Itu vertical atau horizontal. Vertikal menetukan sisi atas dan bawah. Sedangkan horizontal menetukan kiri dan kanan.
margin: EdgeInsets.symmetric(vertical: 8);Untuk lebih memahaminya, kalian bisa mengganti marginnya sesuai Syntax/baris di atas. Dan untuk paddingnya, akan kita gunakan untuk mengatur bagian widget di dalamnya.
Dibawahnya margin, kita tambahkan Column. Row dan column harus menggunakan children: <Widget>[] untuk menempatkan widget widget lainya.
child: Column(
children: <Widget>[ ]
),
Dan di dalam Column kita akan menambahkan widget yang kita butuhkan.
4. Menambah Font
Kali ini kita akan mengganti font text supaya… keliatan beda aja.
Langkahnya seperti memanggil image.
Pertama, Kita cari dulu font yang ingin kita unduh. Kalian bisa cari font di web mana saja. Tapi, saya sarankan di https://fonts.google.com/. Kali ini kita akan menggunakan font “Lexend Deca” kalian bisa mencarinya di web yang saya recommendasikan.
Lalu, kita buat folder dengan nama “fonts”
Sekarang, extract file yang kalian unduh di folder tersebut.
Pergi ke pubspec.yaml. Cari kata “fonts” dan hapus tanda pagarnya. Setelah itu, ketikkan seperti dibawah ini(pastikan semua space sesuai).
Lalu tekan Ctrl + s / save. Jadi di sini, kita membuat semacam pintasan untuk mengakses fontnya. Text family di sana artinya kita membuat “nama panggilan” supaya kita bisa memanggil font tersebut. Lalu dibawahnya kita menaruh lokasi font tersebut.
Jangan lupa untuk mendownload ikon “user” di flaticon.com, klik link disini. Setelah itu sisipkan gambar pada direktori proyek flutter kita dan arahkan sesuai kode dibawah.
Jika sudah, sekarang ketik sintaks ini:
...................................
Container(
margin: EdgeInsets.only(bottom: 45, top: 15),
child: Column(
children: <Widget>[
Image.asset('assets/srg.png', width: 99, height: 45),
Text(
"Login",
style: TextStyle(
fontFamily: 'LexendDeca',
fontSize: 19,
fontWeight: FontWeight.bold),
),
],
),
),
............................
Untuk menampilkan gambar, sekali lagi itu sudah pernah di jelaskan pada post sebelumnya tentang widget. Pada container baru ini, kita hanya membuat Logo dan tulisan login saja.
Dibawah container selanjutnya,
.............................
Container(
padding: EdgeInsets.fromLTRB(10, 5, 10, 20),
child: Column(
children: <Widget>[
Text("Email"),
Container(
margin: EdgeInsets.only(top: 10, bottom: 8),
child: TextFormField(
decoration: InputDecoration(
hintText: "Email",
prefixIcon: Icon(Icons.message),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28))),
)),
Text("Password"),
Container(
margin: EdgeInsets.only(top: 10, bottom: 8),
child: TextFormField(
decoration: InputDecoration(
hintText: "Password",
prefixIcon: Icon(Icons.lock),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28))),
)),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
color: Colors.blue,
textColor: Colors.white,
child: Text('Sign In'),
onPressed: () {},
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
color: Colors.black12,
textColor: Colors.white,
child: Text('Forgot password'),
onPressed: () {},
)],
),)
....................
Pada dasarnya ini tidak berbeda dengan widget yang pernah di jelaskan sebelumnya. Pada TextFormField, kita bisa mengubah atau mengcustom tampilanya dengan InputDecoration. Dan itu sama seperti BoxDecoration, yang membedakan hanya penempatannya. InputDecoration untuk TextFormField/ TextField sedangkan BoxDecoration untuk Container.
Coba kalian run dan tampilannya akan seperti ini:
Tentu saja pada smartphone kalian bisa saja sedikit berbeda tampilannya karena versi Android atau tipe Android yang kalian gunakan berbeda dengan saya.
Tapi, kemungkinan besar ketika kalian menjalankan dan menekan TextFormField maka akan seperti ini:
Itu terjadi karena ketika kita memunculkan KeyboarPad, sistem me-reSize ukuran Container dan menambrak widget di dalamnya. Dan ini default. Kita bisa mengaturnya dengan mengganti defaulnya menjadi false . Caranya dengan menaruhh syntax ini tepat di bawah scaffold:
resizeToAvoidBottomPadding: false,
untuk full code nya:
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flut',
home: Scaffold(
//isi scaffold
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text("login Page"),
),
body: Container(
//isi body: Container
decoration: BoxDecoration(
//jumlah stop berbanding lurus dengan jumlah warna
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomCenter,
//jumlah stop berbanding lurus dengan jumlah warna
stops: [0.3, 0.6, 0.9],
colors: [
Color.fromRGBO(12, 235, 235, 1),
Color.fromRGBO(32, 227, 178, 1),
Color.fromRGBO(41, 255, 198, 1),
],
),
),
child: Container(
//isi child: Container
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(12)),
gradient: LinearGradient(
begin: Alignment.topLeft,
end: Alignment.bottomCenter,
//jumlah stop berbanding lurus dengan jumlah warna
stops: [0.3, 0.6, 0.9],
colors: [
Color.fromRGBO(12, 235, 235, 1),
Color.fromRGBO(32, 227, 178, 1),
Color.fromRGBO(41, 255, 198, 1),
],
),
boxShadow: [
BoxShadow(
blurRadius: 18.0,
color: Colors.transparent.withOpacity(.5),
spreadRadius: 12.5),
]),
margin: EdgeInsets.fromLTRB(40, 35, 40, 50),
child: Column(
//isi child: Column
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 45, top: 15),
child: Column(
children: <Widget>[
Image.asset('assets/srg.png', width: 99, height: 45),
Text(
"Login",
style: TextStyle(
fontFamily: 'LexendDeca',
fontSize: 19,
fontWeight: FontWeight.bold),
),
],
),
),
Container(
padding: EdgeInsets.fromLTRB(10, 5, 10, 20),
child: Column(
children: <Widget>[
Text("Email"),
Container(
margin: EdgeInsets.only(top: 10, bottom: 8),
child: TextFormField(
decoration: InputDecoration(
hintText: "Email",
prefixIcon: Icon(Icons.message),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28))),
)),
Text("Password"),
Container(
margin: EdgeInsets.only(top: 10, bottom: 8),
child: TextFormField(
decoration: InputDecoration(
hintText: "Password",
prefixIcon: Icon(Icons.lock),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(28))),
)),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
color: Colors.blue,
textColor: Colors.white,
child: Text('Sign In'),
onPressed: () {},
),
FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0)),
color: Colors.black12,
textColor: Colors.white,
child: Text('Forgot password'),
onPressed: () {},
)
],
),
),
],
//isi child: Column
),
//child: Container
),
//body: Container
),
//scaffold
),
);
}
}Sekian pada artikel kali ini kurang lebih nya mohon maaf. Sampai bertemu pada artikel berikunya~.
