Jiibuoy-Praktikum Aplikasi Mobile 2

Setup Lingkungan Flutter Development

Install Visual Studio → ada library flutter yang dibut menggunakan Bahasa C++ maka perlu diinstall Visual Studio.

Download Visual Studio disini

Install visual studio kemudan centang pada Desktop development with C++

tampilannya akan seperti dibawah jika sudah terinstall, kurang lebih filenya berukuran 10GB

Install Android Studio

Flutter sebenarnya bisa dijalankan tanpa Android Studio, tetapi disarankan untuk menggunakannya karena sudah dilengkapi dengan Android SDK Manager dan emulator untuk menjalankan aplikasi.

Download Android Studio disini

Setelah selesai diinstall, buat project baru kemudian cari menu "SDK Manager"

Pilih SDK Tools kemudian ceklis pada bagian "Android SDK build", "Android SDK command-line tools", "Android Emulator", "Android SDK Platform-tools", "Google Play Service"

Tunggu proses download selesai

Install SDK FLUTTER

Download SDK Flutter versi stable

Extract SDK Flutter pada computer, misalkan pada directory C:\Users\{username}\dev

Selanjutnya tambahkan pada PATH dengan cara mengetikkan environment pada pencarian

Klik Environment Variables

edit path dan tambahkan directory hasil extract kedalam path

Cek Setup Flutter Development

Kalau semua langkah tadi udah dijalankan, sekarang kita cek dulu apakah lingkungan Flutter-nya udah siap dipakai atau belum

Bukan Command Prompt, ketikkan flutter doctor

Jika tidak ada tanda silang maka kita siap untuk praktek membuat aplikasi menggunakan flutter

Project Flutter “hai”

Bikin project Flutter itu bisa lewat beberapa cara, misalnya pake Command Prompt / Terminal atau langsung dari IDE yang kita pakai

masuk ke diirektori hai dan ketik flutter run untuk menjalankan projek

Muncul beberapa pilihan, pilih yang chrome

Via Visual Studio Code

Langkah-langkah membuat project Flutter di VS Code:

Buka Visual Studio Code.
Buka Command Palette dengan menekan Ctrl + Shift + P.
Ketik Flutter: New Project.
Pilih Application.
Pilih direktori untuk menyimpan proyek, lalu masukkan nama project.

Berikut tampilan project Flutter (kecuali bagian Stateless karena baru ditambahkan).

Stateless dan Statefull Widget

Stateless Widget adalah jenis widget yang tampilannya tidak berubah meskipun ada state yang dijalankan. Widget ini bersifat tetap atau statis, contohnya seperti teks yang tidak berubah, ikon, maupun logo aplikasi.

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"),
        ),
      ),
    );
  }
}

Outputnya seperti ini:

Stateful Widget

Stateful Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga ikut berubah. Contohnya ketika tombol diklik atau ditekan maka tombol berubah warna, atau form input nilainya berubah.

MyStatefulWidget merupakan class widget yang bersifat tetap (immutable) dan tidak memiliki state.
_MyStatefulWidgetState adalah kelas state yang memiliki properti yang dapat berubah (state) dan bertanggung jawab untuk membangun UI.

Contoh:

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


import 'package:flutter/material.dart';

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

class MyStateful extends StatefulWidget {
  const MyStateful({super.key});

  @override
  State createState() => _MyStatefulState();
}

class _MyStatefulState extends State {
  int _kelipatan = 0;

  void _kelipatanDua() {
    setState(() {
      _kelipatan += 2;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Stateful 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),
        ),
      ),
    );
  }
}

Outputnya seperti ini:

Selain itu, terdapat beberapa widget dasar lainnya yang sering digunakan, seperti Text, Container, ElevatedButton, Icon, Image, dan CircleAvatar.

TUGAS

Buatlah tampilan widget secara vertikal dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan.
Buatlah tampilan yang berisi informasi profil kalian (foto, nama, NIM, alamat, nomor handphone, jurusan) dengan mengimplementasikan seluruh basic widget yang ada pada modul praktikum ini.

1. Untuk membuat widget secara vertikal (berderet ke bawah) kita gunakan Column, sedangkan untuk membuat widget secara horizontal (berderet ke samping) kita gunakan Row.

untuk kodenya bisa seperti di bawah ini


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Tugas Vertical & Horizontal")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // Vertical (Column)
              const Text(
                "Vertical",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              ElevatedButton(
                onPressed: () {
                  print("Tombol vertical ditekan");
                },
                child: const Text("Vertical"),
              ),
              const Icon(Icons.star, color: Colors.amber, size: 40),

              const SizedBox(height: 40), // Jeda antar bagian

              // Horizontal (Row)
              const Text(
                "Horizontal",
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  const Icon(Icons.home, color: Colors.blue, size: 40),
                  const SizedBox(width: 20),
                  ElevatedButton(
                    onPressed: () {
                      print("Tombol horizontal ditekan");
                    },
                    child: const Text("Horizontal"),
                  ),
                  const SizedBox(width: 20),
                  const Text("Ini Text"),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Outputnya seperti ini:

2. untuk membuat tampilan yang berisi tentang foto, nama, nim, dan keterangan lainnya, kita bisa menggunakan widget-widget dasar yang sudah dicoba tadi, untuk contoh penggunaan bisa seperti kode di bawah ini


import 'package:flutter/material.dart';

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

class MyProfileApp extends StatelessWidget {
  const MyProfileApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Profil Mahasiswa")),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              const CircleAvatar(
                radius: 60,
                backgroundImage: NetworkImage(
                  "https://fajri.infokand23.my.id/assets/img/profil.jpg",
                ),
              ),
              const SizedBox(height: 20),

              const Text(
                "Ahmad Fajri Arrizki",
                style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
              ),
              const Text(
                "NIM: 2311532004",
                style: TextStyle(
                  fontSize: 16,
                  color: Color.fromARGB(255, 0, 0, 0),
                ),
              ),
              const SizedBox(height: 20),

              Container(
                padding: const EdgeInsets.all(16),
                decoration: BoxDecoration(
                  color: Colors.blue.shade50,
                  borderRadius: BorderRadius.circular(12),
                  border: Border.all(
                    color: const Color.fromARGB(255, 12, 127, 215),
                  ),
                ),
                child: Column(
                  children: const [
                    Row(
                      children: [
                        Icon(
                          Icons.home,
                          color: Color.fromARGB(255, 0, 228, 245),
                        ),
                        SizedBox(width: 10),
                        Expanded(
                          child: Text(
                            "Alamat: kos mak inan, limau manih, kota padang",
                            style: TextStyle(fontSize: 14),
                          ),
                        ),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      children: [
                        Icon(
                          Icons.phone,
                          color: Color.fromARGB(255, 0, 217, 255),
                        ),
                        SizedBox(width: 10),
                        Text("No HP: 083807556588"),
                      ],
                    ),
                    SizedBox(height: 10),
                    Row(
                      children: [
                        Icon(
                          Icons.school,
                          color: Color.fromARGB(255, 54, 209, 244),
                        ),
                        SizedBox(width: 10),
                        Text("Jurusan: Informatika"),
                      ],
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Outputnya seperti ini: