Kuliah 4

Review The Basic of Flutter (WIDGET)

https://jagongoding.com/android/flutter/dasar/hello-world/
NAVIGASI
 Skenario Perkuliahan
1. Intro and preparing IDE 9. Accessing HTTP Server
2. Widget stateless 10. Accessing DB Local (SQLite)
3. Widget Stateful & Globalkey 11. Accessing DB Server (MySQL)
4. GlobalKey & Navigation & 12. Accessing Cloud DB (Firebase)
Form 13. Accessing Camera &
5. Accessing Local Asset 14. Accessing MAP
6. Accessing Local File 15. Project
7. Project 16. UAS
8. UTS
Kilas Balik Tentang Widget :

Container

Widget container adalah sebuah widget yang bertugas sebagai pembungkus widget lain.
Dinamakan container karena nantinya, ia bisa memiliki properti-properti bingkai seperti:

• padding
• margin
• border
• border radius
• box shadow
• dan lain-lain

Ilustrasi:

Pada ilustrasi di atas, kotak berwarna putih adalah child widget. Sedangkan semuanya dari margin,
border, dan padding adalah widget container.
 Coba Container : Tampilkan TeksUtama yg pernah di buat pd kuliah sebelumnya, lalu bungkus returnnya yg
semula berupa widget Columns dengan widget container, (lihat slide berikut) perhatikan efeknya

void main() { import 'package:flutter/material.dart';

runApp(MaterialApp( void main() {
title: 'Halo Dunia.!', runApp(MaterialApp(
home: Scaffold( title: 'Halo Dunia.!',
appBar: AppBar( title: Text('Halo Dunia'), ), home: Scaffold(
body: Center( appBar: AppBar( title: Text('Halo Dunia'), ),
child: body: Center(
TeksUtama(teks1: 'Hei..', teks2: 'piye kabare.',), child: Column(children : [TeksUtama(teks1: 'Apa Kabar', teks2:
), 'Budi',),]),
floatingActionButton: FloatingActionButton( ),
tooltip: 'Refresh', floatingActionButton: FloatingActionButton(
child: Icon(Icons.refresh), tooltip: 'Refresh',
onPressed: null, child: Icon(Icons.refresh),
), onPressed: null,
) ) ); ),
} ) ) );
}
class TeksUtama extends StatelessWidget {
@override
final String teks1; Widget build(BuildContext context) {
final String teks2; return
Container(
TeksUtama({ required this.teks1, required this.teks2 }); child: Column(
children: [
@override
Coba 1 : Text(
Widget build(BuildContext context) {
return Bungkus return dari teks1, // mengganti 'Halo',
TeksUtama semula textDirection: TextDirection.ltr,
Column( berupa widget
children: [ Column menjadi ),
Text( widget Container, Text(
teks1, // mengganti 'Halo', mengapa tidak ada teks2, // mengganti 'Dunia',
textDirection: TextDirection.ltr, perbedaan? 
textDirection: TextDirection.ltr,
), berbagai properties
dari container style: TextStyle(
Text(
belum dimainkan fontSize: 45,
teks2, // mengganti 'Dunia',
textDirection: TextDirection.ltr, fontWeight: FontWeight.bold,
style: TextStyle( color: Colors.red
fontSize: 45, ), ) ], ),
fontWeight: FontWeight.bold, );
color: Colors.red }
), ) ], );
}
}
Properti Decoration
Properti Container.decoration berfungsi untuk mendefinisikan dekorasi dari sebuah container.
Ada beberapa jenis dekorasi pada flutter semisal BoxDecoration, ShapeDecoration, dan lain-lain.
Di sini kita hanya akan menggunakan BoxDecoration karena tampilan yang kita inginkan dari object kita adalah sebuah box.
Properti Border
Kita mulai dari properti yang pertama: yaitu border.
Kenapa border?
Border berfungsi agar kita tahu batas dari objek yang kita bangun.
Istilah lainnya: border akan menjadi sebagai garis pembantu buat kita untuk mempermudah proses penyusunan layout.
Untuk garis bantuan sendiri, kita bisa menggunakan devtools inspector dari flutter, akan tetapi kita skip dulu untuk pertemuan kali ini.
Langsung saja, tambahkan kode program berikut ini pada Container yang telah kita buat tadi.
@override
Widget build(BuildContext context) {
return Container(
decoration: BoxDecoration(
border: Border.all(
color: Colors.blue, Coba 2 :
Sekarang
width: 5,
coba
), mainkan 
), hidupkan
child: Column( beberapa
... properties
), nya
)
}
Properti Padding Anda juga bisa menggunakan variasi lain dari padding seperti:

Seperti pada ilustrasi sebelumnya, padding adalah sebuah // ganti left, top, right, dan bottom dengan angka
jarak antara content (dalam hal ini child widget) dengan EdgeInsets.fromLTRB(left, top, right, bottom)
border.
Kita bisa menambahkannya dengan menambahkan Atau dengan mendefinisikan padding vertical dan padding horizontal:
arguman Container.padding:
EdgeInsets.symmetric(vertical: 20, horizontal: 50),
@override
Widget build(BuildContext context) { Atau menggunakan fungsi EdgeInsets.only() untuk mendefinisikan
return Container( arah tertentu saja yang diberi padding:
padding: EdgeInsets.all(20),
decoration: BoxDecoration( EdgeInsets.only(top: 50, right: 150)
border: Border.all(
color: Colors.blue, Kira-kira output-nya adalah seperti tangkapan layar berikut:
width: 5,
),
), Coba 3 :
... Sekarang
) coba
} mainkan
padding
Properti Margin
Kebalikan dari padding, margin adalah jarak antara border dengan
dunia luar.
Kita bisa mendefinisikannya dengan menambahkan
argumen margin saat membuat objek Container seperti berikut:
Sama seperti padding, Anda juga bisa menggunakan variasi lain untuk
mendefinisikan margin, seperti:
// ganti left, top, right, dan bottom dengan angka
EdgeInsets.fromLTRB(left, top, right, bottom)

@override Atau dengan mendefinisikan margin vertical dan margin horizontal:

Widget build(BuildContext context) {
return Container( EdgeInsets.symmetric(vertical: 20, horizontal: 50),
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
margin: EdgeInsets.all(20), Atau menggunakan fungsi EdgeInsets.only() untuk mendefinisikan arah
decoration: BoxDecoration( tertentu saja yang diberi margin:
border: Border.all(
color: Colors.blue, EdgeInsets.only(top: 50, right: 150)
width: 5,
), Output aplikasi kita setelah diberi margin, kira-kira seperti berikut:
),
Coba 4 :
...
Sekarang
)
coba
}
mainkan
margin
Properti Color (Background)

Dengan menggunakan container widget, kita bisa membungkus

sebuah UI tampilan dan memberikannya warna latar belakang.

Caranya adalah dengan mendefinisikan atribut atau argumen

decoration.color.

@override
Widget build(BuildContext context) {
return Container(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.lightBlue[50],
border: Border.all(
color: Colors.blue,
Coba 5 :
width: 5, Sekarang
), coba
), mainkan
background
... color
)
}
Properti Border Radius

Selain border, kita juga bisa mendefinisikan border radius dari

sebuah container. Border radius akan membuat box container kita
tidak 90% pada sudut-sudutnya.

Perhatikan contoh berikut:

Widget build(BuildContext context) {

return Container(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.lightBlue[50],
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: Colors.blue, Coba 6 :
Sekarang
width: 5, coba mainkan
), sudut
), container nya
supaya lebih
... keren
)
}
 Properti offset untuk mengatur kemana arah bayangan, lihat contoh
Properti Box Shadow berikut:

Dengan box shadow, kita bisa memberikan efek 3D kepada boxShadow: [BoxShadow(
suatu objek, atau kita juga bisa mempertegas tumpukan color: Colors.black12,
berbagai objek: mana objek yang ada di atas dan mana yang spreadRadius: 5,
ada di bawah. blurRadius: 5,
offset: Offset.fromDirection(-15, -53)
Agar bayangan lebih terlihat, kita hapus property border, )],
kemudian kita tambahkan property boxShadow. Test :

Widget build(BuildContext context) {

return Container(
padding: EdgeInsets.symmetric(vertical: 20, horizontal: 50),
margin: EdgeInsets.all(20), Coba 7 :
decoration: BoxDecoration( Sekarang
color: Colors.lightBlue[50], coba mainkan
borderRadius: BorderRadius.circular(20), bayangan
boxShadow: [BoxShadow(
color: Colors.black12,
spreadRadius: 5, Kesimpulan :
blurRadius: 5, • Tampilan widget diatur dgn mengisi
)], propertinya
...
• Propertinya bisa berupa state (value),
)
...
• Atau bisa berupa widget lagi yg
) mempunyai berbagai properti
}
FlatButton
Button ini tidak memiliki border, misalnya pada toolbar, atau menu, dan jika
di klik maka background flash nya akan kelihatan.

RaisedButton
Button ini digunakan jika button yang kita buat ingin terlihat, flash sahdow
akan muncul ketika di click

IconButton
Flash background berbentuk lingkaran akan terlihat ketika button di klik.

OutlineButton
Button dengan border (tepi) lebih tebal dan backgroundnya menjadi tidak
terlihat (opaque) pada saat di klik.

DropdownButton
Button ini digunakan untuk melakukan pemilihan, menunjukkan menu
pada saat di klik.

BackButton
Widget IconButton diperukan untuk mengunakan button ini, flash
background berbentuk linkaran pada saat button ini diclick.

CloseButton
Widget IconButton diperlukan untuk menggunakan button ini di dikonten
apapu yang bisa ditutup.

FloatingActionButton
Sebuah tombol yang terletak mengambang (hover) diatas konten,
disarankan digunakan sekali saja, dapat mengganti warna background dan
foregroundnya, kita dapat menggunakan nama konstruktor 'extended'
untuk membuat button ini menjadi lebih besar dan lebar.
Multi Child Layout Widget Column
Layout (tata letak) Widget digunakan untuk tata letak dari child widget, pada Flutter ada
dua jenis Layout Widget, yang pertama adalah Single Child Layout dan yang kedua adalah
Multi Child Layout.

Multi Child Layout akan menggunakan properti children bertipe array Widget,

Single Child Layout akan menggunakan properti child bertipe Widget.

Multi-Child Layout Widget digunakan untuk meletakkan child widget yang akan
ditampilkan jika lebih dari satu, adapun widget ini terdiri dari: Column, Row, Flex,
ListView, Stack. Layout ini baik digunakan untuk komponen yang sudah kita ketahui
ukurannya, seperti buttons, textboxes. dll, layout ini juga baik digunakan ketika widget
yang kita letakkan pada layout ini tidak meng-overflow layar, maksud dari overflow adalah
ukuran widget lebih besar dari layar smartphone. Layout ini kurang baik untuk diguankan
pada komponen yang ukurannya dinamis, misalnya Widget Text yang akan menampilkan
data yang diambil dari server, dimana kita tidak tahu ukuran (jumlah) data yang akan
ditampilkan, jika kita mendapat kasus seperti itu maka lebih baik kita menggunakan Table,
karena Table dapat menangani text overflow dengan baik.
body: Column( children: <Widget>[
MyTextWidget('First Text', Colors.redAccent, 48.0),
Terkadang kita menghadapi kasus dimana ketika menggunakan Layout Widget ini, child
MyTextWidget('Second Text', Colors.blueAccent, 48.0),
yang kita buat tidak pas pada area dari layar smartphone, Hal ini membuat garis kuning
MyTextWidget('Third Text', Colors.greenAccent, 48.0),
hitam (chevrons) terlihat seperti gambar berikut disertai keterangan error pada console.
], ),
Expanded
Widget ini digunakan jika kita ingin memenuhi ruang yang ada pada, Misalnya: Row,
Column, atau Flex, jika child widget yang menggunakan Expanded lebih dari 1 maka
ukurannya akan dibagi sesuai dengan flex factor.
 Bagaimana menentukan widget yg diperlukan  Design
Layout

Sebelum kita melakukan pengkodean, alangkah baiknya jika kita membuat

sketsa layout yang akan kita buat, dengan demikian akan memudahkan kita
untuk membuat kode programnya, perhatikan contoh berikut, dimana
menggabungkan Column dan Row untuk membuat layout yang diiginkan.

Hasil akhir yang kita inginkan adalah sebagai berikut.

Jika kita lihat gambar diatas, maka kita akan menggunakan :
• Widget TextBox, Button, Column, Row,
• kemudian ada jarak dari tepi layar ke widget TextField, kita bisa
menggunakan padding,
seketsa sederhananya adalah sebagai berikut:
Perhatikan Setelah Widget Scaffold, yaitu Container, widget inilah yang akan
membungkus semua widget yang akan ditampilkan, tujuan dari widget Container ini
adalah agar bisa memberikan padding pada widget didalamnya, kemudian child dari
widget Container adalah Column, pada widget ini kita gunakan
MainAxisAlignmen.Center untuk membuat child nya berada di tenggah, kemudian
didalam widget Column terdapat 3 buah widget Row, pada Row ke 3, kita gunakan
MainAxisAlignment.End, sehingga widget Button akan diletakkan ke kanan.
1 3

MAP  List of Key Widget Pair

dipelajari di struktur data dan PBO

Cara lain untuk melakukan hal sama tanpa menciptakan MaterialPageRoute

adalah dengan PageRouteBuilder.

2
PageRouteBuilder pageRoute = PageRouteBuilder (

pageBuilder : (BuildContext context, Animation anim1, Animation Anim2) {

return YourWidget(yourWidget);
}
);
Setelah di definisikan di atas
Navigator.push(context, pageRoute,);
Selanjutnya tinggal push key nya saja
Yg ini rada ribet jadi jarang di pakai
Prak Navigasi 1 :
Dgn Instant Navigator :
Navigator.push(context, MaterialPageRoute(builder: (context) => PageWidget()),);

import class Home extends StatelessWidget { class About extends StatelessWidget {

'package:flutter/material.dart'; @override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
void main() { return Scaffold( return Scaffold(
runApp(MaterialApp( appBar: AppBar(title: Text('Home'),), appBar: AppBar(title: Text('Page About'), ),
title: 'Navigation Basics', body: Center( body: Center(
home: Home(), child: ElevatedButton( child: ElevatedButton(
)); child: Text('Route ke About'), child: Text('Kembali Ke Home'),
} onPressed: () { onPressed: () {
//Kode Untuk Navigasi //Kode Kembali Home
Navigator.push( Navigator.pop(context);
context, }),
MaterialPageRoute(builder: (context) => About()), ),
); );
}, }
), }
),
);
}
}
import 'package:flutter/material.dart'; Prak Navigasi 2 :
void main() {
Dgn Predefine Routes Map :
runApp(MaterialApp( Note.. Map = <widget>{key : value pair}
title: 'Named Route',
theme: ThemeData(primarySwatch: Colors.blue),
initialRoute: '/',
routes: {
'/': (context) => Home(), class Home extends StatelessWidget {
'/about': (context) => About(), @override class About extends StatelessWidget {
})); Widget build(BuildContext context) { @override
} return Scaffold( Widget build(BuildContext context) {
appBar: AppBar( return Scaffold(
title: Text('Layar Home'), ), appBar: AppBar(title: Text('Layar About'), ),
body: Center( body: Center(
child: ElevatedButton( child: ElevatedButton(
child: Text('Menuju Halaman About'), child: Text('Kembali Ke Home'),
onPressed: () { onPressed: () {
Navigator.pushNamed(context, '/about'); Navigator.pop(context);
}), key }),
), '/about’, akan diganti dgn ),
); (context) => About() );
} }
} }
import 'package:flutter/material.dart'; class About extends StatelessWidget {
@override
final Color darkBlue = Color.fromARGB(255, 18, 32, 47); Widget build(BuildContext context) {
final pesan = ModalRoute.of(context)!.settings.arguments;
void main() {
runApp(MaterialApp( return Scaffold(
title: 'Passing Parameter', appBar: AppBar(title: Text('Halaman About')),
theme: ThemeData(primarySwatch: Colors.blue), body: Center(
routes: { child: Column(
'/': (context) => Home(), children: <Widget>[
'/about': (contex) => About(), Text('$pesan'),
}, ElevatedButton(
)); child: Text('Kembali ke Home'),
} onPressed: () {
Navigator.pop(context);
class Home extends StatelessWidget { }),
String message = "Ini adalah pesan dari Widget Home"; ],
@override ),
Widget build(BuildContext context) { ),
return Scaffold( );
appBar: AppBar(title: Text('Halaman Home'), ), }
body: Center( }
child: ElevatedButton(
child: Text('Ke halaman about'),
onPressed: () {
Navigator.pushNamed(context, '/about', arguments: message);
},
),
), Prak Navigasi 3 :
);
}
Menyisipkan Paramater
} pd saat push ke other page
Prak Navigasi 4 :
Lagi.. Dgn Instant Navigator :
Navigator.push(context, MaterialPageRoute(builder: (context) => PageWidget()),);
import 'package:flutter/material.dart'; class Page1 extends StatefulWidget { class Page2 extends StatefulWidget {
Page1({Key? key}) : super(key: key); Page2({Key? key}) : super(key: key);
void main() {
runApp(MyApp()); @override @override
} _Page1State createState() => _Page1State(); _Page2State createState() => _Page2State();
} }
class MyApp extends StatelessWidget {
@override class _Page1State extends State { class _Page2State extends State {
Widget build(BuildContext context) { @override @override
return MaterialApp( Widget build(BuildContext context) { Widget build(BuildContext context) {
title: 'Flutter Demo', return Scaffold( return Scaffold(
theme: ThemeData( appBar: AppBar( appBar: AppBar(
primarySwatch: Colors.blue, title: Text("Halaman 2"), title: Text("Halaman 2"),
visualDensity: VisualDensity.adaptivePlatformDensity, ), ),
), body: Container( body: Center(
home: Page1(), child: Center( child: MaterialButton(
); child: MaterialButton( color: Theme.of(context).primaryColor,
} onPressed: () { onPressed: () {
} Navigator.of(context).push(MaterialPageRoute( Navigator.of(context).pop();
builder: (context) => Page2(), },
)); child: Text("Kembali ke Halaman 1"),
}, ),
color: Theme.of(context).primaryColor, ),
child: Text("Ke Halaman 2"), );
), }
), }
),
);
}
}
Prak Navigasi 5 :
Lagi.. Routing dengan Menggunakan Predefine Route Map
Kemudahan dalam mengelola routing di aplikasi kamu, dengan menggunakan options routes dan initialRoute. Untuk route ini di pergunakan untuk menampung dari page widget yang dijadikan route dari aplikasi.
Format untuk mengisi routes ini berupa Map<String, BuilderWidget>, dengan String akan menjadi sebuah initial name untuk suatu page.

Dengan initial page menggunakan String dari routes kamu dapat

menerapkan tampilan yang akan ditampilkan pada awal aplikasi akan class Page1 extends StatefulWidget {
tampil dengan menambahkan initialRoute dengan nama dari String routes. Page1({Key? key}) : super(key: key);
Kamu dapat lihat contoh pada coding berikut ini class Page2 extends StatefulWidget {
@override Page2({Key? key}) : super(key: key);
_Page1State createState() => _Page1State();
import 'package:flutter/material.dart'; } @override
_Page2State createState() => _Page2State();
void main() { class _Page1State extends State { }
runApp(MyApp()); @override
} Widget build(BuildContext context) { class _Page2State extends State {
return Scaffold( @override
class MyApp extends StatelessWidget { appBar: AppBar( Widget build(BuildContext context) {
@override title: Text("Halaman 2"), return Scaffold(
Widget build(BuildContext context) { ), appBar: AppBar(
return MaterialApp( body: Container( title: Text("Halaman 2"),
title: 'Flutter Demo', child: Center( ),
theme: ThemeData( child: MaterialButton( body: Center(
primarySwatch: Colors.blue, onPressed: () { child: MaterialButton(
visualDensity: VisualDensity.adaptivePlatformDensity, Navigator.pushNamed(context, "page2"); color: Theme.of(context).primaryColor,
), }, onPressed: () {
initialRoute: "page1", color: Theme.of(context).primaryColor, Navigator.of(context).pop();
routes: { child: Text("Ke Halaman 2"), },
"page1": (context) => Page1(), ), child: Text("Kembali ke Halaman 1"),
"page2": (context) => Page2(), ), ),
}, ), ),
); ); );
} } }
} } }
 Note.. Cara balik lompat
onPressed: () { onPressed: () {
Prak Navigasi 6 : //Navigator.of(context).pop(); Navigator.of(context).pop();
Navigator.of(context).pushNamedAndRemoveUntil('page1', (route) => false); }
Challenge.. Buatlah aplikasi routing sbb : }

initialRoute: "page1",
onPressed: () {
routes: { Navigator.of(context).pop();
"page1": (context) => Page1(), }
"page2": (context) => Page2(),
"page2a": (context) => Page2a(),
"page2b": (context) => Page2b(),

onPressed: () {
Navigator.pushNamed(context, "page2b");
onPressed: () { }
Navigator.pushNamed(context, "page2");
},
 Prak Navigasi 7 :
+ directory.dart Challenge.. Rakitlah aplikasi
Signup & login dgn navigasi seperti
gmbr ini.. Potongan Sourcecode :
https://www.nintyzeros.com/2021/0
1/flutter-login-signup.html
Main.dart
import 'package:flutter/material.dart';
import 'home.dart';
import 'login.dart';
import 'signup.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
initialRoute: "beranda",
routes: {
"signup": (context) => SignupPage(),
"login": (context) => LoginPage(),
},
home: beranda(),
);
}
}
 Input.dart
import 'package:flutter/material.dart';

login.dart  import 'input.dart'; Widget makeInput({label,obsureText = false}){

return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label,style:TextStyle(
fontSize: 15,
fontWeight: FontWeight.w400,
color: Colors.black87
),),
SizedBox(height: 5,),
TextField(
obscureText: obsureText,
decoration: InputDecoration(
contentPadding: EdgeInsets.symmetric(vertical: 0,horizontal: 10),
signup.dart  perlu import 'input.dart'; enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.grey, //color: Colors.grey[400],
),
),
border: OutlineInputBorder(
borderSide: BorderSide(color: Colors.grey)
//BorderSide(color: Colors.grey[400])
),
),
),
SizedBox(height: 30,)
],
);
}