flutter

1. Fajarul Akbar
Core Team GDSC POLSRI 2022
@akbaraji731
Introduction & Installation to
Study Jam – GDSC POLSRI 2022

2. Muhammad Fajarul
Akbar Aji Putra
Curriculum GDSC POLSRI 2022
Flutter Mobile Developer
akbaraji731
@akbaraji731
@akbaraji731
Akbaraji731

3. Pengenalan Flutter
Persiapan Memulai Pemrograman Menggunakan Flutter
Minggu, 15 Januari 2023
Membuat Aplikasi Flutter Pertama
Demo Program

4. Apa itu Flutter?

5. Flutter adalah sebuah framework aplikasi mobile open source (terbuka)
yang diciptakan oleh Google. Flutter digunakan oleh para developer
untuk membuat aplikasi multiplatform hanya dengan menggunakan
satu basis coding (single codebase). Artinya, aplikasi yang dihasilkan
dapat dipakai di berbagai platform, baik Android, iOS, Web, maupun
Desktop.

6. Awal Mula Flutter?
Awalnya, Flutter dikenal
dengan nama "Sky" dan
berjalan hanya pada sistem
operasi Android.
Flutter pertama kali
diperkenalkan pada acara
Dart Developer Summit 2015.
Pada tanggal 4 Desember
2018, Google merilis Flutter 1.0
di acara Flutter Live Event.

7. Kapan Flutter Mulai Populer?
https://trends.google.com/trends/explore?cat=32&q=Flutter,React%20Native,Xamarin

8. Perusahaan Teknologi Indonesia yang Mengadopsi Flutter

9. 9
Struktur Kode Program pada Flutter

10. Apa saja hal yang perlu disiapkan dalam memulai pemrograman
menggunakan Flutter?
1. Text Editor
2. Flutter SDK
3. Emulator Android/ HP / Web

11. 11
Memulai Instalasi Flutter

12. 12
Membuat Aplikasi Flutter Pertama

13. Widget > Text
String studentName = “Tono”;
Text(“Tono”);
Text(“Hello, $studentName ! How are you?”,
textAlign: TextAlign.center,
overflow: TextOverflow.ellipsis,
style: TextStyle(fontWeight: FontWeight.bold),
);

14. Widget > Image
Image(
image:
NetworkImage('https://flutter.github.io/assets-
for-api-docs/assets/widgets/owl.jpg'),
)
Image(
image: AssetImage("assets/images/user.png"),
width: 200,
height: 200,
)
Image.asset("assets/images/user.png")

15. Widget > Button
TextButton(
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.green),
),
onPressed: () { },
child: Text(“INI BUTTON”),
)
*note : kita dapat mengganti ‘TextButton’ dengan ‘ElevatedButton’ ataupun ‘OutlinedButton’

16. Widget > Icon
Icon(
Icons.audiotrack,
color: Colors.green,
size: 30.0,
)
https://fonts.google.com/icons

17. InkWell adalah material widget pada flutter.
Inkwell memberikan respon pada aksi sentuhan yang dilakukan oleh user, yang meliputi aksi klik pada
tombol, double tap, long press, tap down, dan lain - lain.
InkWell(
splashColor: Colors.lightBlue,
onTap: (){
print("action after widget tapped in here");
},
child: Container(
width: 100,
height: 100,
),
),
Widget > Inkwell (Custom Button)

18. Widget > Container
Container merupakan widget yang berguna sebagai wadah penampung widget lain.
Container(
color: Colors.amber,
width: 150.0,
height: 25.0,
child : Text(“Ini Penampung Container”),
)

19. Widget > Row
View Widget yang Menampung Widget-Widget didalamnya dan menampilkannya secara baris
atau dari kiri ke kanan.
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child : Text("Text Row 1"),
),
Container(
child : Text("Text Row 2"),
),
],
),

20. Widget > Column
View Widget yang Menampung Widget-Widget didalamnya dan menampilkannya secara kolom
atau dari atas ke bawah.
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
child : Text("Text Column 1"),
),
Container(
child : Text("Text Column 2"),
),
],
),

21. 1. Masuk ke dalam android studio, dan
buatlah project flutter baru.
2. Buatlah 1 page yang berisikan text, image,
icon dan button
3. Implementasikan materi yang sudah
dijelaskan sebelumnya.
GDSC POLSRI
Login

22. Stateless Widget vs Stateful Widget
Stateless Widget, secara sederhana dapat diartikan sebagai
Widget yang tidak dapat dirubah atau tidak akan pernah
berubah.
Stateful Widget merupakan widget yang dinamis atau dapat
berubah. Berbanding terbalik dengan stateless, stateful widget
dapat mengupdate tampilan, merubah warna, menambah
jumlah baris dll. Jadi dapat disimpulkan bahwa apapun widget
yang dapat berubah maka itulah stateful widget.

23. Stateless Widget
import 'package:flutter/material.dart';
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: Scaffold(
body: Center(
child: Column(
children: <Widget>[
],
),
),
),
);
}
}

24. Stateful Widget
import 'package:flutter/material.dart';
class PageStatefulSample extends StatefulWidget {
@override
_PageStatefulSample createState() => _PageStatefulSample();
}
class _PageStatefulSample extends State<PageStatefulSample> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Sample Stateful',
home: Scaffold(
body: Center(
child: Column(
children: <Widget>[
],
),
),
),
);
}
}

25. Tipe Data & Variabel
Tipe data adalah himpunan nilai yang dapat dimiliki oleh
sebuah data. Variabel adalah obyek yang nilainya dapat
berubah-ubah dalam sebuah program. Pada saat sebuah
variabel dideklarasikan, program "memesan" tempat
dengan ukuran tertentu (sesuai tipe datanya) pada memori
untuk menyimpan nilai dari variabel tersebut.
Pemrogram dapat memberikan nama pada sebuah
variabel untuk mempermudah pemanggilan variabel
tersebut di dalam program. Pada saat mendeklarasikan
sebuah variabel, pemrogram harus menyebutkan nama
variabel dan tipe data dari variabel tersebut.

26. 26
Penggunaan Tipe Data & Variabel
int studentID = 062130801948;
double studentScore = 80.5;
String studentName = “Fajarul”;
bool isGraduated = false;
List<String> listNameFriends = ["andi", "budi", "eko", "tono", "ani", "yuni"];

27. Counter Button
1. Masuk ke dalam android studio, dan
buatlah project flutter baru.
2. Buatlah 1 page yang berisikan text dan
button, dengan fungsi sebagai berikut;
text berisikan angka yang dimulai dari 0,
setiap button di klik, angka pada text akan
bertambah 1.
3. Implementasikan stateful widget pada
bagian ini.
1
+

28. Widget > ListView
ListView adalah scrolling widget yang paling umum. ListView menampilkan children widget satu
persatu berdasarkan dari scroll direction -nya (horizontal / vertikal).

29. Vertical List View
Sampel penggunaan ListView Widget pada Koding
Container(
width: 300,
height: 500,
child : ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
],
scrollDirection: Axis.vertical,
),
),
https://api.flutter.dev/flutter/widgets/ListView-class.html

30. Horizontal List View
Sampel penggunaan ListView Widget pada Koding
Container(
width: 300,
height: 500,
child : ListView(
padding: const EdgeInsets.all(8),
children: <Widget>[
],
scrollDirection: Axis.horizontal,
),
),
https://api.flutter.dev/flutter/widgets/ListView-class.html

31. List View Image
1. Masuk ke dalam android studio, dan
bukalah project flutter sebelumnya.
2. Buatlah 1 page yang baru menyerupai
page disamping.
3. Implementasikan widget-widget yang
sudah dipelajari.

32. “You affect the world by what you browse.”
“Kamu memengaruhi dunia dengan apa yang kamu jelajahi.”
- Tim Berners-Lee

33. Thank You!
Fajarul Akbar
Core Team GDSC POLSRI 2022
@akbaraji731