Flutter Dari noll -v2

Bismillah

jika pada buku pertama kita sudah belajar tentang dasar banget tentang flutter , dari instalasi ,
dart dan simple layout , pada volume ke dua ini ,kita akan lebih memperdalam mengenai layout,
mengapa gk langsung ke logic ?? karena flutter emang kuat dy layout salah satunya dan untuk
awalan logic dan layout masih menjadi satu, di tingkatan selanjutnya bisa dipisah menggunakan
pantern mvc, tau sejenis lainnya ,sering kali bagi pemula langsung ini menjangkau logic , disini maka
sering kerjaadi stack karena kualahan , beda dengan java yang xml dan logic java terpisah , di flutter
menjadi satu waalau nantinya kita bisa memisahkannya , ok jangan terlalu dipermasalahkan menurut
saya itu hal sepele , kapan mau logic duluan atau layout duluan , intinya tetep ngoding jangan patah
semangat.

layout populer

disini ada beberapa layout populer yang tentunya akan sering sekali digunakan

1. Container()
2. Column()
3. Row()
4. Padding()
5. Text()
6. Icon()
7. Image.assets()
8. Stack()
9. Card()
10. SizeBox()
11. GridView()
12. ListView()
13. SinggleChildScrollView()
14. Align()
15. Center()
16. dan lainnya ...

selengkapnya bisa dilihhat disini https://flutter.dev/docs/development/ui/widgets

Ingat ya , di flutter semuanya adalah widget , sesuatu yang bisa dibiongkar pasang dan dimodifikasi ,
jadi jangan kuatir ,gk usah takut , maju terus .

diflutter akan sangat jarang sekali kita akan menemui error , yang paling umum adalah kemungkinan
"NULL" apa itu null , nanti kita bahas di pembahasan logic
belajar langsung praktek

kali ini kita akan membuat signup ui, gambar diatas bukan buatan saya , saya ambil dr google
sebagai refressi saja https://dribbble.com/shots/5086395-Sign-Up-Screen#shot-description

tanpa basa basi langsung aja ya , sebelumnya kita uraikan dl apa saja widget yang dibutuhkan ,

1. container()
2. stack()
3. column()
4. Icon()
5. Text()
6. Row()
7. FlatButton()
8. TextField()
9. Image.assets()
biar ada bayangan mungkin lebih jelasnya seperti dibawah , walau tidak 100% akurat

ok langsung buka vscode dan buat class baru

import 'package:flutter/material.dart';

class LayoutSignUp extends StatelessWidget{

@override
 Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SafeArea(
child: Container(
child: Stack(
children: [

],
),
),
),
);
}
}

sasya rincikan dulu,

1. LayoutSignUp()

ini class utama sebagai pembungkus lauout

2. Extends aratinya perpanjangan , pada kasus kita kali ini adalah stateLessWidget, artinya
LayoutSignUp() kita adalah perpanjangan dari stateLessWidget class, jadi propert atau method
yang ada pada statelessWidget bisa kita ginakan di custom class kita , kl masih bingung , gk apa
sambil jalan aja

3. StateLessWidget() , ada statelessWidget ada stateFullWidget , ini adalah class utama yang
disediakan until pembahasan lebih detail next ya , sekarang pahami aja dahulu secara abstract
tidak masalah karena akan ada waktunya pembahasannya kesitu

4. @override artinya menunggangi , yg di override kali ini widget build , artinya cslass kita
menunggngi method kepunyaan dari statelessWidget, jadi karena kita meminjam properti milik
statelesswidget maka kita harus mengikuti aturanyang telah ditetapkanpada class
stateLessWidget yaitu codingan kita harus di tempatkan didalan method builder

5. Return atau pengembalian , hasil codingan kita nantinya kan dikembalikan pada variabel return
dan dapat dibaca oleh stateLessWidget

6. Scafold() adalah class turban milik SatateLessWidget untuk melihat turunan clas scafold kita bisa
arahkan pointer ke class tersebut lalu ctrl+clik kiri, mac cmd+click kiri,

7. SafeArea() ini adalah penyelamat pony, pada umumnya bentuk hp adalah kotak , namun tidak
sekarang , yaitu kotak dan adaponynya , nah safeArea() ini adalah penyelamat pony tersebut, jika
tidak menggunakan safeArea,maka objek paling atas akan masuk dan tertutupi oleh poni
tersebut
8. Container() ini adalah pembungkus , mungkin lebih mudahnya dipahami seperti div pada html,
turunannya bisa berupa padding , margin , color , dan sebagainya

9. satack() , ini adalah layout lapisan , yang kita padami layout itu berbaris kesamping seperti row
atau berbaris menurun seperti column, bagaimana jika berbaris kadepan?? inilah stack , layout
menumpuk , coba bayangkan , kotak berbaris kesamping, lalu kotak berbaris kebawah, lalu
kotak berbaris kedepan, bukan keatas ya , tp kedepan dan kebelakang, seperti column dan row,
stak adalah layout tipe array mereka sejenis, beda dengan container yang hanya punya child
yang artinya tunggal , hanya bisa menurunkan atau ditempati satu widget, untuk type array
mereka seperti tampungan , bisa menampung beberapa widget sekaligus
ok lanjut , saya harap pengertian antara tyepe tunggal dan jamak tuntas heheh, lanjut ke masalah
codingan

edit layout seperti dibawah ini

import 'package:flutter/material.dart';

class LayoutSignUp extends StatelessWidget{

@override
 Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SafeArea(
child: Container(
child: Stack(
children: [
Container(
child: Column(
children: [
// fleksible untuk membagi column
// ditandai dengan flex :
// felex : 2 artinya layout ini mengambil 2 bagian dari
keseluruhan column
// flex : hanya mendapatkan 1 bagian
// untuk besarannya terserah sesuai kebutuhan
Flexible(
flex: 2,
child: Container(
color: Colors.red,
),
),
Flexible(
flex: 1,
child: Container(
color: Colors.green,
),
)
],
),
)
],
),
),
),
);
}
}

jika tidak ada error hasilnya akan seperti dibwah ini

sekarang untuk colum bagian pertamakita rubah warnanya , disitu terlihat warnanya adalah gradasi

warna gradasi bagian atas adalah 0xff7ADCE8

dan warna bagian bawahanya adalah 0xff6FC3E0

ok langsung kita garap,edit flexible widget pertama didalamcolumn

Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
 Color(0xff7ADCE8),
Color(0xff6FC3E0)
]
)
),
),
),

dan untuk flexible kedua warnanya adalah 0xffEEF0F2 ,langsung terapkan

Flexible(
flex: 1,
child: Container(
color: Color(0xffEEF0F2),
),
)

jika berhasil seperti dibawah

sekarang kita lanjut ke prosses lapisan kedua, edit main.dart jadi seperti dibawah

import 'package:flutter/material.dart';

class LayoutSignUp extends StatelessWidget{

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SafeArea(
 child: Container(
child: Stack(
children: [

// ini anakan stack pertama

Container(
child: Column(
children: [
// fleksible untuk membagi column
// ditandai dengan flex :
// felex : 2 artinya layout ini mengambil 2 bagian dari
keseluruhan column
// flex : hanya mendapatkan 1 bagian
// untuk besarannya terserah sesuai kebutuhan
Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xff7ADCE8),
Color(0xff6FC3E0)
]
)
),
),
),
Flexible(
flex: 1,
child: Container(
color: Color(0xffEEF0F2),
),
)
],
),
),
//tambahkan anakan kedua
// ini anakan stack kedua akan menumpuk didepannya anakan
pertama
Container(
child: Column(
children: [
// ankan column pertama
 Container(
child: BackButton(color: Colors.white,),
)
],
),
)
],
),
),
),
);
}
}

yang saya tambahkan adalah lapisan kedua pada stack,dan menambahka back button

Container(
child: Column(
children: [
// ankan column pertama
Container(
child: BackButton(color: Colors.white,),
)
],
),
)

ok lanjut , langsung kebut ya , edit main.dart agar seperti dibawah

import 'package:flutter/material.dart';

class LayoutSignUp extends StatelessWidget{

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SafeArea(
child: Container(
child: Stack(
children: [
// ini anakan stack pertama
 Container(
child: Column(
children: [
// fleksible untuk membagi column
// ditandai dengan flex :
// felex : 2 artinya layout ini mengambil 2 bagian dari
keseluruhan column
// flex : hanya mendapatkan 1 bagian
// untuk besarannya terserah sesuai kebutuhan
Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xff7ADCE8),
Color(0xff6FC3E0)
]
)
),
),
),
Flexible(
flex: 1,
child: Container(
color: Color(0xffEEF0F2),
),
)
],
),
),
//tambahkan anakan kedua
// ini anakan stack kedua akan menumpuk didepannya anakan
pertama
SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ankan column pertama
Container(
child: Icon(Icons.arrow_back,color: Colors.white,),
 margin: EdgeInsets.only(bottom: 16),
),
Text("Sign Up",style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w500,
color: Colors.white
),),
Text("create an account to access all features.
signup with Twitter ,Facebook or with your email address",
style: TextStyle(
color: Colors.white
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Row(
children: [
Expanded(
child: Card(
elevation: 10,
color: Color(0xff3297EE),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Container(
padding: EdgeInsets.all(8),
child: Text("Twitter",style:
TextStyle(color: Colors.white),)
),
),
),
Expanded(
child: Card(
elevation: 10,
color: Color(0xff3A5CA9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Container(
padding: EdgeInsets.all(8),
child: Text("Facebook",style:
TextStyle(color: Colors.white),)
),
),
)
 ],
),
),
Card(
margin: EdgeInsets.only(bottom: 32,right: 8,left:
8),
elevation: 10,
shadowColor: Colors.grey[300],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
child: Container(
padding: EdgeInsets.all(8),
width: double.infinity,
child: Column(
children: [
Container(
padding: EdgeInsets.all(8),
child:
Icon(Icons.account_balance_wallet,color: Color(0xff6FC3E0),),
),
TextField(
decoration: InputDecoration(
labelText: "full name".toUpperCase(),
labelStyle: TextStyle(color:
Color(0xff6FC3E0),fontSize: 12)
),
),
TextField(
decoration: InputDecoration(
labelText: "email address".toUpperCase(),
labelStyle: TextStyle(color:
Color(0xff6FC3E0),fontSize: 12),

),
),
TextField(
decoration: InputDecoration(
labelText: "password".toUpperCase(),
labelStyle: TextStyle(color:
Color(0xff6FC3E0),fontSize: 12)
),
),
Container(
margin: EdgeInsets.symmetric(vertical: 16),
 decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[200],
blurRadius: 6,
spreadRadius: 2,
offset: Offset(
5,5
)
)
],
border: Border.all(color:
Colors.transparent),
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [
Color(0xff6FB7E3),
Color(0xff7CE1E8)
]
)
),
padding: EdgeInsets.only(top: 8,bottom:
8,right: 64,left: 64),
child: Text("Get Started",style:
TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
)
],
),
),
),
Container(
alignment: Alignment.center,
child: Text("login",style: TextStyle(fontWeight:
FontWeight.bold,color: Color(0xff6FC3E0)),),
)
],
),
),
)
],
),
),
),
 );
}
}

jika berhasil maka hasilnya akan seperti dibawah

walaupun tidak persis persis amat , karena sample menggunakan cocoknya emulator iphone
.sedangkan yang saya gunakakn adalah emulator android ,

jika kita lihat pada kolom tombol flutter dan facebook blm ada iconnya , ok mari kita garap ke next
step yaitu menambahkan gambar

lihat pada kolom vscode sebelah kiri , cari file namanya pubspec.yaml lalu buka

yang akan kita edit adalah pada bagian yang saya blok biru

kembali kekolom viscose sebelah kiri, cari icon newfolder

buat folder namanya assets didalamnya buat folder lagi namanya images , selanjutnya cari icon
twitter dan facebook di google contoh saya ambil di alamat ini https://www.freeiconspng.com/upload
s/logo-twitter-transparent-background-10.png lalu pindahkan hasil downlod ke folder yang telah kita
buat tadi assets/images dan rubah nama file gambarnya menjadi logo_twitter
lanjutkan dengan facebook juga , cari icon yang berformat png dan transparant background, lalu
kembali ke file pubspec.yaml lalu kita edit

jadi seperti ini

# To add assets to your application, add an assets section, like this:

assets:
- assets/images/

kembali ke codingan cari pada bagian tombol twitter, edit tambahkan row , jadi seperti dibawah

Expanded(
child: Card(
elevation: 10,
color: Color(0xff3297EE),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Container(
padding: EdgeInsets.all(8),
child: Row(
children: [
Image.asset("assets/images/logo_twitter.png",width: 15,height:
15,color: Colors.white,),
Text(" Twitter",style: TextStyle(color: Colors.white),)
],
)
),
),
)

reload dan lihat hasilnya , jika berhasil akan seperti gambar dibawah
Horeeee kita sudah bisa input gambar , lalu lanjutkan yang sama dengan tombol facebooknya ya ...

kesimpulan
ok padakesempatan kaliini kita uda belajar memperdalam layout dan widget step by step , dan kita
juga sudah belajar bagaimana memunculkan gambar pada flutter dengan mudah, untuk tutorial
diatas mungkin tidak standar dari tutorial flutter , namun saya berusaha sebisa mungkin agar mudah
untuk dipahami , selanjutnya kalian bisa kembangkan sendiri,
jika ada pertanyaan atau kegalauan , jangan sungkan langsung tanyakan saja ,

final coding

import 'package:flutter/material.dart';

class LayoutSignUp extends StatelessWidget{

@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
body: SafeArea(
child: Container(
child: Stack(
children: [
// ini anakan stack pertama
Container(
child: Column(
 children: [
// fleksible untuk membagi column
// ditandai dengan flex :
// felex : 2 artinya layout ini mengambil 2 bagian dari
keseluruhan column
// flex : hanya mendapatkan 1 bagian
// untuk besarannya terserah sesuai kebutuhan
Flexible(
flex: 2,
child: Container(
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color(0xff7ADCE8),
Color(0xff6FC3E0)
]
)
),
),
),
Flexible(
flex: 1,
child: Container(
color: Color(0xffEEF0F2),
),
)
],
),
),
//tambahkan anakan kedua
// ini anakan stack kedua akan menumpuk didepannya anakan
pertama
SingleChildScrollView(
child: Container(
padding: EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// ankan column pertama
Container(
child: Icon(Icons.arrow_back,color: Colors.white,),
margin: EdgeInsets.only(bottom: 16),
),
 Text("Sign Up",style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w500,
color: Colors.white
),),
Text("create an account to access all features.
signup with Twitter ,Facebook or with your email address",
style: TextStyle(
color: Colors.white
),
),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16),
child: Row(
children: [
Expanded(
child: Card(
elevation: 10,
color: Color(0xff3297EE),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Container(
padding: EdgeInsets.all(8),
child: Row(
children: [

Image.asset("assets/images/logo_twitter.png",width: 15,height: 15,color:

Colors.white,),
Text(" Twitter",style:
TextStyle(color: Colors.white),)
],
)
),
),
),
Expanded(
child: Card(
elevation: 10,
color: Color(0xff3A5CA9),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15)
),
child: Container(
padding: EdgeInsets.all(8),
 child: Row(
children: [

Image.asset("assets/images/icon_facebook.png",width: 15,height: 15,color:

Colors.white,),
Text(" Facebook",style:
TextStyle(color: Colors.white),)
],
)
),
),
)
],
),
),
Card(
margin: EdgeInsets.only(bottom: 32,right: 8,left:
8),
elevation: 10,
shadowColor: Colors.grey[300],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)
),
child: Container(
padding: EdgeInsets.all(8),
width: double.infinity,
child: Column(
children: [
Container(
padding: EdgeInsets.all(8),
child:
Icon(Icons.account_balance_wallet,color: Color(0xff6FC3E0),),
),
TextField(
decoration: InputDecoration(
labelText: "full name".toUpperCase(),
labelStyle: TextStyle(color:
Color(0xff6FC3E0),fontSize: 12)
),
),
TextField(
decoration: InputDecoration(
labelText: "email address".toUpperCase(),
labelStyle: TextStyle(color:
Color(0xff6FC3E0),fontSize: 12),
 ),
),
TextField(
decoration: InputDecoration(
labelText: "password".toUpperCase(),
labelStyle: TextStyle(color:
Color(0xff6FC3E0),fontSize: 12)
),
),
Container(
margin: EdgeInsets.symmetric(vertical: 16),
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[200],
blurRadius: 6,
spreadRadius: 2,
offset: Offset(
5,5
)
)
],
border: Border.all(color:
Colors.transparent),
borderRadius: BorderRadius.circular(15),
gradient: LinearGradient(
begin: Alignment.centerRight,
end: Alignment.centerLeft,
colors: [
Color(0xff6FB7E3),
Color(0xff7CE1E8)
]
)
),
padding: EdgeInsets.only(top: 8,bottom:
8,right: 64,left: 64),
child: Text("Get Started",style:
TextStyle(color: Colors.white,fontWeight: FontWeight.bold),),
)
],
),
),
),
Container(
 alignment: Alignment.center,
child: Text("login",style: TextStyle(fontWeight:
FontWeight.bold,color: Color(0xff6FC3E0)),),
)
],
),
),
)
],
),
),
),
);
}
}

di pertemuan selanjutnya kita akan lebih mempelajari lebih kebagian logicnya , dan perpindahan page
satu ke page lainnya .

penulis
nama : malik kurosaki

seorang programer mobile yang berkeja pada perusahaan software terkenal di bali (probus system)
disela sela aktifitas kerja dihabiskan untuk mempelajari hal-hal baru , membuat aplikasi dan menulis
buku ,yang berkaitan dengan dunia teknologi ,dan dunia perkodingan.

PHP,JAVASCRIPT,NODEJS,MYSQL,JAVA ANDROID,HTML,CSS,FLUTTER , adalah beberapa

keahlian coding yang telah dikuasai tidak menutup kemungkinan untuk mempelajari hal baru lainnya

github : https://github.com/malikkurosaki

site : https://malikkurosaki.github.io/

wa : 081338929722

Playstore : https://play.google.com/store/search?q=malikkurosaki&c=apps

group : https://web.facebook.com/groups/286790142309709/