Mobile Application Report 2

Install GIT

Download dan Install GIT pada link berikut ini : https://git-scm.com/downloads, dan pilih instalasi untuk windows

Download dan Install Visual Studio pada link berikut ini : https://c2rsetup.officeapps.live.com/c2r/downloadVS.aspx?sku=community&channel=Release&version=VS2022&source=VSLandingPage&includeRecommended=true&cid=2030

Download dan Install Android Studio pada link berikut ini : https://developer.android.com/studio#get-android-studio

Download dan Install Visual Studio Code pada link berikut ini : https://code.visualstudio.com/download , dan install ekstensi Flutter

Download dan Install Flutter SDK pada link berikut ini : https://docs.flutter.dev/install/manual, dan tambahkan path environtment

Membuat Project Flutter

Untuk membuat project baru pada flutter, ketikkan code berikut pada CLI :

flutter create test

Masuk ke directory hai dan ketik flutter run untuk menjalankan project

Stateless Widget

Stateless Widget merupakan widget yang data atau tampilannya tidak mengalami perubahan ketika sebuah state dijalankan, Widget ini bersifat statis atau tetap misalnya teks statis, logo aplikasi dll

Buat class baru pada directory lib dengan nama stateless.dart kemudian tambahkan kode program berikut :

import 'package:flutter/material.dart';

void main() {
  runApp(const MyStateless());
}

class MyStateless extends StatelessWidget {
  const MyStateless({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Stateless Widget")),
        body: const Center(child: Text("ini body")),
      ),
    );
  }
}

Statefull Widget

Statefull Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga berubah. contohnya ketika tombol diklik atau ditekan maka tombol berubah warna atau form input nilainya berubah.

Buat file baru pada directory lib dengan nama statefull.dart kemudian tambahkan kode berikut :

import 'package:flutter/material.dart';
void main() {
runApp(const MyStatefull());
}
class MyStatefull extends StatefulWidget {
const MyStatefull({super.key});
@override
State createState() => _MyStatefullState();
}
class _MyStatefullState extends State {
int _kelipatan = 0;
void _kelipatanDua() {
setState(() {
_kelipatan += 2;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("Statefull Widget"),
),
body: Center(
child: Container(
width: 100,
height: 100,
color: Colors.amber,
child: Column(
children: [
const Text("Kelipatan 2 : "),
Text(
'$_kelipatan',
style: Theme.of(context).textTheme.headlineMedium,
)
],
),
),
),
floatingActionButton: FloatingActionButton(
onPressed: _kelipatanDua,
tooltip: "Kelipatan 2",
child: const Icon(Icons.add),
),
),
);
}
}

Basic Widget Text

Text merupakan widget dasar yang digunakan untuk menampikan teks pada layer , Propertinya:

1. data berisi teks yang akan ditampilkan

2. style properti yang menerima objek TextStyle yang digunakan untuk mengontrol tampilan teks seperti fontSize, color, fontWeight (bold), fontStyle (italic)

3. textAlign mengatur teks secara horizontal seperti TextAlign.center, left, right

4. maxLines berfungsi membatas jumlah baris yang akan ditampilkan

5. overflow mengatur teks yang terlalu panjang (TextOverflow.ellipsis) untuk menambahkan “.....” di akhir teks

Widget Container

Container merupakan widget yang berfungsi sebagai KOTAK yang dapat menampung ssatu widget child dan menyediakan berbagai properti untuk dekorasi, mengatur posisi dan mengatur ukuran widget.

1. child properti yang menerima satu widget yang akan ditempatkan didalam container

2. color mengatur warna background

3. width dan height mengatur lebar dan tinggi container

4. padding mengatur jarak antara konten dengan bagian dalam container

5. margin mengatur jarak antara container dengan widget lain diluar container

6. decoration properti yang menerima objek BoxDecoration yang dapat mengatur warna, border, corner radius dan shadow pada Container.

Widget Elevated Button

ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow

1. onPressed berfungsi untuk menerima sebuah fungsi atau callback ketika tombol di tekan

2. child properti yang berisi satu widget yang akan ditampilkan didalam tombol biasanya Text atau Icon

3. style properti yang menerima objek ButtonStyle sehingga dapat menyesuaikan tampilan tombol seperti backgroundColor, foregroundColor, padding dan shape

Widget Icon

Icon merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon seperti Material Icons dari Google atau Cupertino Icons dari Apple

1. icon properti yang menerima object IconData yang merepresentasikan ikon yang akan ditampilkan dari kelas Icons atau CupertinoIcons

2. color mengatur warna ikon

3. size mengatur ukuran ikon dalam piksel

Widget Image

Image merupakan widget dasar yang digunakan untuk menampikan gambar dari berbagai sumber seperti asset, network, memory (byte data), file system.

1. image properti yang menerima object ImageProvider seperti AssetImage, NetworkImage dll

2. width dan height mengatur lebar dan tinggi gambar

3. fit digunakan untuk menyesuaikan ukuran gambar seperti cover, fill, contain

4. aligment digunakan untuk mengatur posisi gambar

Widget Circle Avatar

CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atau inisialnya dalam bentuk lingkaran.

1. Child Widget yang akan ditampilkan di dalam lingkaran seperti Text (inisial) atau Icon.

2. backgroundImage Digunakan untuk menampilkan gambar dari ImageProvider, seperti NetworkImage atau AssetImage.

3. radius Mengontrol ukuran lingkaran, ukuran defaultnya adalah 20.

4. backgroundColor Mengatur warna latar belakang lingkaran.

Tugas

Buatlah tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan

Buatlah tampilan yang berisi informasi profile kalian (foto, nama, nim, Alamat, nomor handphone, jurusan) dengan mengimplementasikan seluruh basic widget yang ada pada modul praktikum ini.