Laporan Praktikum 2

Pendahuluan

Flutter adalah sebuah framework open-source yang dikembangkan oleh Google untuk membangun aplikasi lintas platform dengan satu basis kode (single codebase). Dengan Flutter, pengembang dapat membuat aplikasi yang dapat dijalankan pada sistem operasi Android, iOS, Web, hingga Desktop tanpa perlu menulis kode terpisah untuk setiap platform. Keunggulan utama Flutter terletak pada kemampuannya menghasilkan antarmuka pengguna (User Interface) yang menarik, konsisten, dan memiliki performa tinggi.

Flutter menggunakan bahasa pemrograman Dart sebagai bahasa utamanya. Bahasa ini dirancang agar mudah dipelajari dan memiliki kinerja optimal untuk aplikasi modern. Selain itu, Flutter dilengkapi dengan fitur hot reload yang memungkinkan pengembang melihat perubahan kode secara instan tanpa harus menjalankan ulang aplikasi. Hal ini sangat memudahkan proses pengembangan dan pengujian aplikasi.

Selain performanya yang cepat, Flutter juga memiliki koleksi widget yang sangat lengkap, mulai dari widget dasar seperti Text, Container, dan Button, hingga widget kompleks yang dapat disesuaikan sesuai kebutuhan. Dengan widget ini, pengembang dapat menciptakan desain antarmuka yang fleksibel dan menarik dengan lebih efisien.

Sebagai framework yang terus berkembang, Flutter telah menjadi pilihan populer dalam pengembangan aplikasi modern karena kemudahan penggunaan, dukungan komunitas yang luas, serta kemampuannya menjangkau berbagai platform hanya dengan satu kode program.

Pastikan perangkat yang digunakan telah memenuhi syarat berikut :

1. Sudah menginstall git (atau boleh menggunakan cmd bawaan saja)

2. Sudah menginstall Android Studio

3. Sudah menginstall Visual Studio Code (VS Code)

4. Sudah menginstall Flutter SDK

5. Sudah menginstall Dart SDK

6. Sudah memasukkan Flutter dan Dart ke dalam PATH

Jika semua syarat di atas sudah dipenuhi, maka flutter dapat digunakan

Mengecek Instalasi Flutter

Buka terminal atau cmd, kemudian ketikkan perintah flutter doctor, Jika memenuhi persyaratan maka akan tampil seperti gambar berikut :

Membuat Proyek Flutter

Buka terminal atau cmd, kemudian ketikkan perintah flutter create nama_proyek, maka proyek flutter pertama dengan nama nama_proyek akan terbentuk, disini saya menggunakan nama proyeknya yaitu hai

Menjalankan Proyek Flutter

Buka terminal atau cmd, kemudian masuk ke directory proyek flutter yang telah dibuat, dan ketikkan perintah flutter run, maka proyek flutter akan dijalankan, dan akan keluar tampilan seperti berikut

Dasar Dasar Flutter

Struktur Proyek Flutter

Keterangan Gambar 4 :

lib/ berfungsi untuk menyimpan seluruh kode Dart. main.dart adalah class utama yang pertama kali akan di eksekusi

android/ berisi konfigurasi untuk aplikasi Android pada file build.gradle

ios/ berisi konfigurasi untuk aplikasi iOS pada file Info.plist

assets/ berisi file gambar, font, dan file lainnya yang digunakan dalam aplikasi

pubspec.yaml berisi konfigurasi untuk proyek Flutter, seperti dependensi dan aset yang digunakan

README.md berisi informasi tentang proyek, seperti cara menjalankan dan mengembangkan aplikasi

.gitignore digunakan untuk pengaturan GIT

Stateless dan Statefull Widget

Stateless Widget

Stateless Widget adalah widget yang tidak memiliki state atau data yang dapat berubah. Widget ini hanya menampilkan data yang diberikan saat dibuat dan tidak dapat diubah setelah itu. Contoh dari Stateless Widget adalah Text, Icon, dan Image.

Stateful Widget

Stateful Widget adalah widget yang memiliki state atau data yang dapat berubah. Widget ini dapat mengubah tampilannya berdasarkan perubahan state. Contoh dari Stateful Widget adalah Checkbox, Radio, dan TextField.

Contoh Stateful Widget

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(
              mainAxisAlignment: MainAxisAlignment.center,
              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 :

Contoh Stateless Widget :

import 'package:flutter/material.dart';
import 'package:flutter/cupertino.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: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
                Image.network(
                    "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
                width: 100,
                height: 150,
                ),
                
                Image.asset('assets/logo.png',
                width: 100,
                height: 150,
                ),

                CircleAvatar(
                    radius: 30,
                    backgroundColor: Colors.green,
                    child: Text("IF",
                    style: TextStyle(fontSize: 20, color: Colors.white),
                    ),
                    ),
                    SizedBox(width: 10,),
                CircleAvatar(
                    radius: 30,
                    backgroundColor: Colors.blue,
                    child: Icon(
                        Icons.person,
                        color: Colors.white,
                        size: 30,
                        )),

                const Icon(
                    Icons.add,           
                    color: Colors.amber,
                    size: 50.0,
                    ),
                const Icon(
                    CupertinoIcons.add,
                    color: Colors.red,
                    size: 50.0,
                    ),
                const SizedBox(height: 20),

              ElevatedButton(
                onPressed: () {
                  print("tombol ditekan");
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.green,
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.all(20),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16),
                  ),
                ),
                child: const Text("Elevated Button"),
              ),
              const SizedBox(height: 20), 
            ],
          ),
        ),
      ),
    );
  }
}

Outputnya :

Pada contoh keduanya diatas, terdapat dasar dasar dart, yaitu :

1. Text

Teks adalah elemen dasar dalam Flutter yang digunakan untuk menampilkan teks pada layar.

Contoh penggunaan Text :

return Text(
  "Hai i am Text Widget",
  style: TextStyle(
    fontSize: 14.0,
    color: Colors.red,
    fontWeight: FontWeight.bold,
    fontStyle: FontStyle.italic,
  ),
  textAlign: TextAlign.center,
);

2. Container

Container adalah widget yang digunakan untuk mengatur tata letak dan gaya dari elemen-elemen lain di dalamnya.

Properties yang umum digunakan pada Container antara lain:

Contoh penggunaan Container :

  return Container(
    width: 200,
    height: 100,
    color: Colors.blue,
    child: Center(
      child: Text(
        "Hai i am Container",
        style: TextStyle(
          fontSize: 14.0,
          color: Colors.white,
        ),
      ),
    ),
  );

3. Elevated Button

Elevated Button adalah tombol yang memiliki efek elevasi (bayangan) dan dapat digunakan untuk melakukan aksi ketika ditekan.

Properties yang umum digunakan pada Elevated Button antara lain:

Contoh penggunaan Elevated Button :

  ElevatedButton(
    onPressed: () {
      print("Elevated Button Pressed");
    },
    style: ElevatedButton.styleFrom(
      backgroundColor: Colors.blue,
      foregroundColor: Colors.white,
      padding: const EdgeInsets.all(12),
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(8),
      ),
    ),
    child: const Text("Elevated Button"),
  );

4. Icon

Icon adalah widget yang digunakan untuk menampilkan gambar atau simbol pada layar.

Properties yang umum digunakan pada Icon antara lain:

Contoh penggunaan Icon :

return Icon(
  Icons.favorite,
  color: Colors.red,
  size: 24.0,
);

5. Image

Image adalah widget yang digunakan untuk menampilkan gambar pada layar.

Properties yang umum digunakan pada Image antara lain:

Contoh penggunaan Image :

return Image.asset(
  'assets/images/example.png',
  width: 100,
  height: 100,
);

6. Circle Avatar

Circle Avatar adalah widget yang digunakan untuk menampilkan gambar atau teks dalam bentuk lingkaran.

Properties yang umum digunakan pada Circle Avatar antara lain:

Contoh penggunaan Circle Avatar :

return CircleAvatar(
  backgroundImage: AssetImage('assets/images/example.png'),
  child: Text('A'),
  radius: 50,
);

Latihan Tugas

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

Jawaban Tugas

Kode yang saya gunakan yaitu : 

import 'package:flutter/material.dart';

void main() => runApp(const MyWidgetApp());

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: WidgetScreen(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueGrey.shade50,
      appBar: AppBar(
        title: const Text("Vertical & Horizontal Widgets"),
        centerTitle: true,
        backgroundColor: Colors.teal,
      ),
      body: Center(
        child: Column(               // VERTICAL layout utama
          mainAxisAlignment: MainAxisAlignment.center,
          children: [

            // Bagian 1: Teks
            const Text(
              "Contoh Basic Widgets",
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 20),

            // Bagian 2: Deretan icon horizontal
            Row(                     // HORIZONTAL layout
              mainAxisAlignment: MainAxisAlignment.center,
              children: const [
                Icon(Icons.home, size: 50, color: Colors.teal),
                SizedBox(width: 30),
                Icon(Icons.favorite, size: 50, color: Colors.red),
                SizedBox(width: 30),
                Icon(Icons.star, size: 50, color: Colors.orange),
              ],
            ),
            const SizedBox(height: 30),

            // Bagian 3: Container
            Container(
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.teal.shade100,
                borderRadius: BorderRadius.circular(12),
              ),
              child: const Text(
                "Ini adalah Container",
                style: TextStyle(fontSize: 18),
              ),
            ),
            const SizedBox(height: 30),

            // Bagian 4: Tombol
            ElevatedButton.icon(
              onPressed: () {},
              icon: const Icon(Icons.touch_app),
              label: const Text("Tekan Saya"),
              style: ElevatedButton.styleFrom(
                backgroundColor: Colors.teal,
                foregroundColor: Colors.white,
                padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Outputnya :

2. 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.

Jawaban Tugas

Kode yang saya gunakan yaitu : 

import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfilePage(), 
    );
  }
}

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

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

class _ProfilePageState extends State {
  int _likeCount = 0; 

  void _tambahLike() {
    setState(() {
      _likeCount++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Profil Mahasiswa"),
        backgroundColor: Colors.blueAccent,
        centerTitle: true,
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Container(
            padding: const EdgeInsets.all(20),
            alignment: Alignment.center,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [

                // FOTO PROFIL
                const CircleAvatar(
                  radius: 60,
                  backgroundImage: AssetImage("assets/foto.png"),
                ),

                const SizedBox(height: 20),

                // NAMA & NIM
                const Text(
                  "Fikhri Hanif",
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                  ),
                  textAlign: TextAlign.center,
                ),
                const SizedBox(height: 5),
                const Text(
                  "NIM: 2311533007",
                  style: TextStyle(fontSize: 16, color: Colors.grey),
                  textAlign: TextAlign.center,
                ),

                const SizedBox(height: 20),

                // INFORMASI PROFILE
                infoItem(Icons.home, "Alamat: Bukittinggi, Sumatera Barat"),
                const SizedBox(height: 10),
                infoItem(Icons.phone, "HP: 0822-4700-6098"),
                const SizedBox(height: 10),
                infoItem(Icons.school, "Jurusan: Informatika"),

                const SizedBox(height: 30),

                
                Text(
                  "Jumlah Like: $_likeCount",
                  style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 10),

                
                ElevatedButton(
                  onPressed: _tambahLike,
                  style: ElevatedButton.styleFrom(
                    padding: const EdgeInsets.symmetric(horizontal: 40, vertical: 15),
                    backgroundColor: Colors.blueAccent,
                    foregroundColor: Colors.white,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(12),
                    ),
                  ),
                  child: const Text("👍 Like Profil"),
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }


  Widget infoItem(IconData icon, String text) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Icon(icon, color: Colors.blueAccent),
        const SizedBox(width: 8),
        Flexible(
          child: Text(
            text,
            style: const TextStyle(fontSize: 16),
            textAlign: TextAlign.center,
          ),
        ),
      ],
    );
  }
}

Outputnya :

Jika tombol like ditekan, maka jumlah like akan bertambah

Kesimpulan

Flutter adalah framework open-source yang dikembangkan oleh Google untuk membangun aplikasi lintas platform dengan satu basis kode. Flutter menggunakan bahasa pemrograman Dart dan menawarkan fitur hot reload untuk mempercepat pengembangan aplikasi. Dengan koleksi widget yang lengkap, Flutter memungkinkan pengembang menciptakan antarmuka pengguna yang menarik dan konsisten di berbagai platform.

Dalam Flutter, terdapat dua jenis widget utama yaitu Stateless Widget dan Stateful Widget. Stateless Widget tidak memiliki