PRATIKUM APLIKASI MOBILE 2

Leave a Comment / Blog / By

Pada praktikum kali ini, kita akan mempersiapkan flutter environtment seperti menginstall flutter SDK, Git, Android SDK, Vscode extension, dan lain-lain. Kemudian, kita akan melakukan beberapa contoh stateless dan statefull widget flutter serta membuat contoh basic widgets flutter

Pertama, install Git 

Kemudian, install Visual Studio dengan menginstal Desktop Development with C++

Kemudian, installasi android studio. Andoid studio dapat diinstal disini.

Install Visual Studio Code

  • Download visual studio code disini
  • Install visual studio code
  • Tambahkan extentions flutter

Install SDK Flutter

  • Download SDK Flutter versi stable disini
  • 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, misalkan directory extract
C:\Users{username}\dev tambahkan \bin

kemudian setelah semua ter-install buka terminal dan jalankan flutter doctor

Untuk membuat project flutter, pergi ke directory yang diinginkan kemudian gunakan kode terminal flutter create hai

dan untuk mengetes project flutter yang sudah dibuat, pergi ke folder tersebut dan gunakan perintah flutter rununtuk menjalankan project:

Maka tampilannya akan seperti berikut:

Sekarang kita akan belajar membuat Stateless Widget.
Stateless Widget adalah widget yang bersifat tetap (statis), artinya data dan tampilannya tidak akan berubah meskipun ada interaksi atau state yang dijalankan. Widget jenis ini biasanya digunakan untuk elemen yang tampilannya konstan, seperti teks yang tidak berubah, ikon, atau logo aplikasi.

Untuk mencobanya, buat sebuah class baru di dalam folder lib dengan nama stateless.dart, kemudian tambahkan kode program berikut.

kemudian jalan kan pada terminal vscode dengan perintah flutter run lib/stateless.dart

Selanjutnya adalah membuat Statefull. 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

Buatlah kode berikut di file baru bernama statefull.dart

setelah dijalankan seperti file dart sebelumnya,maka akan menampilkan tampilan seperti ini

Selanjutnya, kita akan mempelajari basic widget di flutter. Pertama ada text. Text merupakan widget dasar yang digunakan untuk menampikan teks pada layer

  • data berisi teks yang akan ditampilkan
  • style properti yang menerima objek TextStyle yang digunakan untuk mengontrol tampilan teks seperti fontSize, color, fontWeight (bold), fontStyle (italic)
  • textAlign mengatur teks secara horizontal seperti TextAlign.center, left, right
  • maxLines berfungsi membatas jumlah baris yang akan ditampilkan
  • overflow mengatur teks yang terlalu panjang (TextOverflow.ellipsis) untuk menambahkan “…..” di akhir teks

Contoh kodenya seperti berikut:

kemudian jalankan,dan hasilnya akan seperti berikut

Container adalah widget berupa kotak serbaguna yang dapat menampung satu widget child di dalamnya. Widget ini banyak digunakan karena menyediakan berbagai properti untuk mengatur dekorasi, posisi, serta ukuran dari widget yang ditampung.

Beberapa properti penting pada Container antara lain:

  • child → digunakan untuk menampung satu widget lain di dalam Container.
  • color → memberikan warna latar belakang (background) pada Container.
  • width dan height → menentukan lebar dan tinggi Container.
  • padding → mengatur jarak antara isi (konten) dengan bagian dalam Container.
  • margin → mengatur jarak antara Container dengan widget lain di luarnya.
  • decoration → menerima objek BoxDecoration, yang bisa dipakai untuk menambahkan warna, border, sudut melengkung (corner radius), maupun bayangan (shadow) pada Container.

Contoh kode penggunaan Container adalah sebagai berikut:

import ‘package:flutter/material.dart’;

class MyContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(“Contoh Container”),
),
body: Center(
child: Container(
width: 200,
height: 100,
padding: EdgeInsets.all(16),
margin: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(12),
boxShadow: [
BoxShadow(
color: Colors.grey.withOpacity(0.5),
blurRadius: 6,
offset: Offset(2, 4), // posisi bayangan
),
],
),
child: Center(
child: Text(
“Ini di dalam Container”,
style: TextStyle(color: Colors.white, fontSize: 16),
textAlign: TextAlign.center,
),
),
),
),
);
}
}

dan tampilannya akan seperti ini

Selanjutnya kita akan membahas ElevatedButton.
ElevatedButton adalah widget yang digunakan untuk membuat tombol dengan efek bayangan (shadow), sehingga terlihat sedikit menonjol dari permukaan layar. Tombol ini biasanya dipakai untuk menjalankan sebuah aksi ketika ditekan.

Beberapa properti penting dari ElevatedButton adalah:

  • onPressed → digunakan untuk menampung sebuah fungsi atau callback yang akan dijalankan ketika tombol ditekan. Jika nilai null, tombol akan otomatis nonaktif (disabled).
  • child → berisi widget yang ditampilkan di dalam tombol, umumnya berupa Text atau Icon.
  • style → digunakan untuk mengatur tampilan tombol dengan ButtonStyle. Melalui properti ini, kita bisa menyesuaikan warna background, warna teks/icon (foregroundColor), ukuran padding, hingga bentuk tombol (shape).

berikut kodenya

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("Contoh ElevatedButton"),
        ),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print("Tombol ditekan");
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.green,     // warna background
              foregroundColor: Colors.white,     // warna teks/icon
              padding: const EdgeInsets.all(20), // jarak dalam tombol
              shape: RoundedRectangleBorder(     // bentuk tombol
                borderRadius: BorderRadius.circular(16),
              ),
            ),
            child: const Text("Elevated Button"),
          ),
        ),
      ),
    );
  }
}

maka setelah dijalankan akan seperti ini

Selanjutnya kita akan membahas tentang Icon.
Icon adalah widget yang digunakan untuk menampilkan gambar ikon di dalam aplikasi. Flutter sudah menyediakan kumpulan ikon bawaan seperti Material Icons (dari Google) dan Cupertino Icons (dari Apple).

Beberapa properti penting pada Icon yaitu:

  • icon → properti yang wajib diisi dengan IconData, biasanya diambil dari Icons (Material) atau CupertinoIcons.
  • color → digunakan untuk memberi warna pada ikon.
  • size → menentukan ukuran ikon dalam satuan piksel.

Contoh kodeIcon:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.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("Contoh Icon")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: const [
              // Ikon dari Material Icons (Google)
              Icon(
                Icons.add,
                color: Colors.amber,
                size: 50.0,
              ),
              SizedBox(height: 20), // jarak antar ikon
              
              // Ikon dari Cupertino Icons (Apple)
              Icon(
                CupertinoIcons.add,
                color: Colors.red,
                size: 50.0,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

dan hasilnya akan seperti ini

Selanjutnya kita akan membahas tentang Image.
Image adalah widget dasar di Flutter yang berfungsi untuk menampilkan gambar dari berbagai sumber. Flutter mendukung beberapa cara untuk memuat gambar, misalnya dari asset aplikasi, internet (network), memori (byte data), maupun dari file system.

Beberapa properti penting dari Image adalah:

  • image → menerima objek ImageProvider seperti AssetImage, NetworkImage, dan lainnya.
  • width & height → untuk mengatur ukuran gambar.
  • fit → menentukan bagaimana gambar menyesuaikan ruang, misalnya cover, fill, contain.
  • alignment → untuk mengatur posisi gambar di dalam area yang tersedia.

Contoh kode penggunaan Image dari Internet:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.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("Contoh Image")),
        body: Center(
          child: Image.network(
            "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
            width: 100,
            height: 150,
            fit: BoxFit.contain, // menyesuaikan proporsi gambar
            alignment: Alignment.center, // posisi gambar di tengah
          ),
        ),
      ),
    );
  }
}

hasilnya akan seperti ini

Selanjutnya adalah images.

  • Buat folder di dalam proyek misalnya assets/images.
  • Masukkan gambar (misalnya, logo.png) ke dalam folder tersebut.
  • Daftarkan di pubspec.yaml: Buka file pubspec.yaml dan tambahkan baris berikut di bawah bagian flutter:

Karena assets/images sudah dimasukkan, coba ganti logo unand yang sebelumnya menjadi file. Ubah menjadi seperti berikut

Selanjutnya kita akan membahas CircleAvatar.

CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil pengguna atau inisial nama dalam bentuk lingkaran. Widget ini banyak digunakan pada aplikasi yang memiliki fitur akun atau daftar pengguna karena tampilannya sederhana dan menarik.

Beberapa properti penting dari CircleAvatar adalah:

  • child → digunakan untuk menampilkan widget di dalam lingkaran, biasanya berupa Text (misalnya inisial nama) atau Icon.
  • backgroundImage → dipakai untuk menampilkan gambar profil dari ImageProvider seperti NetworkImage atau AssetImage.
  • radius → menentukan ukuran lingkaran. Jika tidak diatur, ukuran defaultnya adalah 20.
  • backgroundColor → mengatur warna latar belakang lingkaran jika tidak ada gambar yang ditampilkan.

Contoh kode penggunaan CircleAvatar:

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.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("Contoh CircleAvatar"),
        ),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              // CircleAvatar dengan teks
              CircleAvatar(
                radius: 30,
                backgroundColor: Colors.green,
                child: const Text(
                  "IF",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),

              const SizedBox(width: 10),

              // CircleAvatar dengan ikon
              CircleAvatar(
                radius: 30,
                backgroundColor: Colors.blue,
                child: const Icon(
                  Icons.person,
                  color: Colors.white,
                  size: 30,
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

maka hasilnya seperti ini

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

hasil :

Leave a Comment

Your email address will not be published. Required fields are marked *