M

MODUL
STMIK WIDYA

MOBILE APPLICATION 1
PEMROGRAMAN BERBASIS MOBILE 1
PERTEMUAN 2

DESKRIPSI MATAKULIAH
Mata Kuliah ini mempelajari konsep bahasa pemrograman Dart, membuat aplikasi mobile dengan flutter
menggunakan bahasa Dart, menerapkan widget pada flutter untuk membuat aplikasi mobile

CAPAIAN PEMBELAJARAN
Mahasiswa dapat memahami penggunaan Framework Flutter dengan IDE Visual Studio Code untuk membuat
aplikasi mobile.

DOSEN PENGAMPU
Bambang Ismanto, M.Kom

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

(STMIK) WIDYA PRATAMA
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

[POKOK BAHASAN/BAB/PERTEMUAN]

CAPAIAN PEMBELAJARAN
Mahasiswa dapat memahami penggunaan Framework Flutter dengan IDE Visual Studio Code
untuk membuat aplikasi mobile.

MATERI PEMBELAJARAN
1. Membuat Projek Baru
2. Menyiapkan file main.dart
3. Widget Text
4. Widget TextFormField
5. Widget Row dan Column

STMIK Widya Pratama

Jl. Patriot No 25 Pekalongan
2
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

MATERI

Untuk mempermudah praktek pembuatan aplikasi mobile, silahkan praktekkan

modul berikut pada website https://flutlab.io/.

Catatan:

- Projek yang bisa dibuat pada versi gratis maksimal 2 buah

- Hanya tersedia preview untuk build aplikasi berbasis web
- Untuk build versi android, akan dibuatkan file apk yang bisa didownload dan dijalankan
pada perangkat android masing-masing

1. Membuat Projek Baru

Pengembangan aplikasi mobile menggunakan framework flutter dengan aplikasi VSCode dan
Android Studio membutuhkan spesifikasi komputer yang tinggi. Oleh karena itu, untuk
mempermudah praktikum, kita bisa menggunakan flutlab.io. silahkan masuk ke website
https://flutlab.io/.

Kemudian sign in ke website, jika belum punya akun, silahkan daftar dulu.

STMIK Widya Pratama

Jl. Patriot No 25 Pekalongan
3
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

Berikut adalah tampilan setelah login.

Buat projek baru dengan klik pada button + Project, pilih Hello World. Beri nama projek dan
nama package. Beri nama projek dengan nama Pengenalan Widget 1.

STMIK Widya Pratama

Jl. Patriot No 25 Pekalongan
4
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

Berikut tampilan setelah membuat projek baru.

STMIK Widya Pratama

Jl. Patriot No 25 Pekalongan
5
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

Klik pada nama projek untuk membukanya.

2. Menyiapkan file main.dart

Silahkan sesuaikan isi dari file main.dart menjadi seperti di bawah ini:
import 'package:flutter/material.dart';
import 'textWidget.dart';

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

STMIK Widya Pratama

Jl. Patriot No 25 Pekalongan
6
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

class MyApp extends StatelessWidget {

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Pengenalan Widget',
home: TextWidget(),
debugShowCheckedModeBanner: false,
);
}
}
Nb: import TextWidget.dart untuk menambahkan class TextWidget (file akan dibuat setelah
ini).

3. Widget Text
Buat file baru pada folder lib dengan mengarahkan kursor pada folder lib, pilih Create File

Beri nama textWidget.dart

Berikut adalah sintaks lengkap dari file textWidget.dart

import 'package:flutter/material.dart';

class TextWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
STMIK Widya Pratama
Jl. Patriot No 25 Pekalongan
7
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

title: Text("Text Widget"),

),
body: Padding(
padding: const EdgeInsets.all(10),
child: Text(
"Selamat datang di kampus STMIK Widya Pratama Pekalo
ngan, yang merupakan satu-satunya sekolah tinggi dalam bidang
ilmu komputer di Kota pekalongan dan sekitarnya.",
maxLines: 3,
overflow: TextOverflow.ellipsis,
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.red,
fontStyle: FontStyle.italic,
fontWeight: FontWeight.bold,
fontSize: 24,
backgroundColor: Colors.grey,
decoration: TextDecoration.underline,
),
),
),
);
}
}

Penjelasan Singkat:
1. Widget Padding
Widget ini digunakan untuk memberikan padding (jarak tepi widget) dengan
menggunakan atribut padding.
2. Widget Text
Digunakan untuk menambahkan tampilan teks ke dalam aplikasi dari string yang
diberikan.
3. Atribut maxLines
Digunakan untuk mengatur jumlah maksimal baris yg dapat ditampilkan dari widget
Text.
4. Atribut overflow
Digunakan untuk memberikan penanda jika string yang akan ditampilkan melebihi
batas widget.
5. Atribut textAlign
Digunakan untuk mengatur perataan teks.
6. Atribut style
STMIK Widya Pratama
Jl. Patriot No 25 Pekalongan
8
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

Digunakan untuk mengatur teks yang akan ditampilkan menggunakan beberapa

atribut ini:
a. Atribut color
Untuk mengatur warna teks
b. Atribut fontStyle
Untuk mengatur style teks miring dan normal
c. Atribut fontWeight
Untuk mengatur ketebalan huruf (bold)
d. Atribut fontSize
Untuk mengatur ukuran font
e. Atribut backgroundColor
Untuk mengatur warna bacground
f. Atribut decoration
Untuk mengatur teks seperti TextDecoration untuk teks bergaris bawah
(underline)

4. Widget TextField
Buat file baru pada folder lib dengan mengarahkan kursor pada folder lib, pilih Create File

Beri nama textFieldWidget.dart

Berikut adalah sintaks lengkap dari file textFieldWidget.dart

import 'package:flutter/material.dart';

class TextFieldWidget extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
STMIK Widya Pratama
Jl. Patriot No 25 Pekalongan
9
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

title: Text("TextFromField"),
),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
prefixIcon: Icon(Icons.person),
hintText: 'Tuliskan nama lengkap',
labelText: 'Nama *',
),
),
SizedBox(height: 15.0),
TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
suffixIcon: Icon(Icons.phone),
hintText: 'Tuliskan nomer telepon',
labelText: 'Nomer Telepon *',
prefixText: '+62',
),
keyboardType: TextInputType.phone,
),
SizedBox(height: 15.0),
TextField(
decoration: InputDecoration(
border: UnderlineInputBorder(),
filled: true,
icon: Icon(Icons.email),
hintText: 'Your email address',
labelText: 'E-mail',
),
keyboardType: TextInputType.emailAddress,
),
SizedBox(height: 15.0),
TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Tell us about yourself',
labelText: 'Life story',
),
maxLines: 3,
STMIK Widya Pratama
Jl. Patriot No 25 Pekalongan
10
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

),
SizedBox(height: 24.0),
// "Salary" form.
TextField(
keyboardType: TextInputType.number,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Salary',
prefixText: '\$',
suffixText: 'Rupiah',
suffixStyle: TextStyle(color: Colors.green)),
),
SizedBox(height: 24.0),
TextField(
obscureText: true,
maxLength: 8,
decoration: InputDecoration(
labelText: 'Password',
border: OutlineInputBorder(),
filled: true,
suffixIcon: Icon(Icons.visibility),
),
),
],
),
),
),
);
}
}

Sebelum menjalankan projek, tambahkan import pada file main.dart

import 'textFieldWidget.dart';

dan panggil class TextFieldWidget pada bagian home.

home: TextFieldWidget(),

Beberapa atribut yang biasa digunakan pada widget TextFromField:

1. keyboardType
untuk mengatur jenis input seperti phone, number, url, emailaddres dll.
2. obscureText
untuk menyembunyikan teks yang diketikkan, biasanya untuk input password
3. maxLength
untuk membatasi jumlah karakter yang bisa diketikkan
4. maxLines
STMIK Widya Pratama
Jl. Patriot No 25 Pekalongan
11
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

untuk membatasi jumlah maksimal baris yang ditampilkan

5. decoration
untuk mengatur tampilan seperti InputDecoration dengan atribut:
a. border
mengatur border TextFromField seperti UnderlineInputBorder dan
OutlineInputBorder
b. labelText
untuk menampilkan judul input. Label ini akan berpindah ke pojok kiri atas ketika
user mengisi TextFromField
c. prefixText
menampilkan teks tambahan di awal input
d. suffixText
menampilkan teks tambahan di akhir input
e. hintText
menampilkan judul input. Teks ini akan hilang jika user mengisi TextFromField

5. Widget Row dan Column

Buat file baru pada folder lib dengan mengarahkan kursor pada folder lib, pilih Create File

Beri nama rowColumn.dart

Berikut adalah sintaks lengkap dari file row_Column.dart
import 'package:flutter/material.dart';

class RowColumn extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
STMIK Widya Pratama
Jl. Patriot No 25 Pekalongan
12
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

title: Text("Row dan Column"),

),
body: Padding(
padding: EdgeInsets.all(10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text("Andi"),
Text("Bagus"),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Text("Caca"),
Text("Deni"),
MaterialButton(
onPressed: () {},
child: Text("Detail"),
color: Colors.blue,
),
],
),
],
),
),
);
}
}

Sebelum menjalankan projek, tambahkan import pada file main.dart

import 'rowColumn.dart';

dan panggil class Row_Column pada bagian home.

home: RowColumn(),

Beberapa atibut penting pada widget Column:

1. mainAxisAlignment
untuk mengatur perataan widget secara vertikal
2. crossAxisAlignment
untuk mengatur perataan widget secara horisontal

Beberapa atibut penting pada widget Row:

1. mainAxisAlignment
untuk mengatur perataan widget secara horisontal
2. crossAxisAlignment
STMIK Widya Pratama
Jl. Patriot No 25 Pekalongan
13
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

untuk mengatur perataan widget secara vertikal

Nilai dari alignment di atas adalah start, center, end, spaceAround, spaceBetween,
spaceEvenly.

6. Running Aplikasi dengan Platform Web

Untuk mencoba aplikasi, kita bisa menggunakan platform web pada flutlab.io. pilih Web
pada jenis build di pojok kiri atas, kemudian klik Build Project.

Tunggu proses build selesai, setelah itu akan muncul tampilan seperti berikut.

7. Build Apk
Untuk build aplikasi android, pilih android-arm pada jenis build di pojok kiri atas, kemudian
klik Build Project.

Tunggu proses build selesai, setelah itu akan muncul tampilan seperti berikut.
STMIK Widya Pratama
Jl. Patriot No 25 Pekalongan
14
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

Aplikasi bisa dijalankan menggunakan emulator di komputer atau perangkat smartphone

android.

STMIK Widya Pratama

Jl. Patriot No 25 Pekalongan
15
stmik-wp.ac.id
[Nama Matakuliah]
[Pokok
Bahasan/Bab/Pertemuan]

RANGKUMAN
[Diisi dengan rangkuman materi yang telah diuraikan]

TES FORMATIF
[Diisi dengan tes formatif sesuai dengan materi yang telah diuraikan]

DAFTAR PUSTAKA
[Diisi dengan daftar pustaka yang digunakan dalam menyusun modul pembelajaran]

STMIK Widya Pratama

Jl. Patriot No 25 Pekalongan
16
stmik-wp.ac.id