Setup Flutter Development, Stateless & Stateful Widget, Basic Widgets

C.1.1 Windows

A. Install GIT

Download GIT disini kemudian install sesuai dengan wizard instalasinya.

B. Install Visual Studio

Ada library flutter yang dibut menggunakan Bahasa C++ maka perlu diinstall Visual Studio.

1. Download visual studio disini

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

C. Install Android Studio

Meskipun kita dapat membuat aplikasi flutter tanpa menggunakan Android Studio akan tetapi sangat direkomendasikan unutk menginstallnya, karena pada Android Studio terdapat Android SDK Manager dan kita dapat membuat emulator untuk menjalankan aplikasi flutter.

1. Download Android Studio disini

2. Install android studio, tutorial lengkap dapat dilihat disini

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

4. Pilih SDK Tools kemudian ceklis seperti gambar berikut:

5. Tunggu sampai proses download selesai

D. Install Visual Studio Code

1. Download visual studio code disini

2. Install visual studio code

3. Tambahkan extentions flutter

E. Install SDK Flutter

1. Download SDK Flutter versi stable disini

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

3. Selanjutnya tambahkan pada PATH dengan cara mengetikkan environment pada pencarian

4. Klik Environment Variables

5. Edit path dan tambahkan directory hasil extract kedalam path, misalkan directory extract C:\Users\{username}\dev tambahkan \bin

C.3.1 Via Terminal / Command Prompt

Muncul beberapa pilihan project akan dijalankan pada windows, chrome, edge

C.3.2 Via Visual Studio Code

C.5.1 Stateless

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

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

Output :

C.5.2 Stateful

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.

• MyStateFulWidget merupakan class widget yang bersifat tetap (immutable) dan tidak memiliki state
• _MyStateFulWidgetState kelas state yang memiliki properti yang dapat berubah (state) dan bertanggung jawab untuk membangun UI

import 'package:flutter/material.dart';

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

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

  @override
  State<MyStatefull> createState() => _MyStatefullState();
}

class _MyStatefullState extends State<MyStatefull> {
  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),
        ),
      ),
    );
  }
}

Output :

C.6.1 Text

Text merupakan widget dasar yang digunakan untuk menampikan teks pada layer

Properti :

• 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 :

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

Output :

C.6.2 Container

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

Properti Container :

• child properti yang menerima satu widget yang akan ditempatkan didalam container
• color mengatur warna background
• width dan height mengatur lebar dan tinggi container
• padding mengatur jarak antara konten dengan bagian dalam container
• margin mengatur jarak antara container dengan widget lain diluar container
• decoration properti yang menerima objek BoxDecoration yang dapat mengatur warna, border, corner radius dan shadow pada Container.

Contoh :

return Container(
      width: 200,
      height: 200,
      margin: const EdgeInsets.all(20),
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
          color: Colors.blueAccent,
          border: Border.all(color: Colors.white, width: 2),
          borderRadius: BorderRadius.circular(10)),
    );

Output :

C.6.3 ElevatedButton

ElevatedButton merupakan widget yang mewakili tombol dan memiliki shadow

Properti :

• onPressed berfungsi untuk menerima sebuah fungsi atau callback ketika tombol di tekan
• child properti yang berisi satu widget yang akan ditampilkan didalam tombol biasanya Text atau Icon
• style properti yang menerima objek ButtonStyle sehingga dapat menyesuaikan tampilan tombol seperti backgroundColor, foregroundColor, padding dan shape

Contoh :

return 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"));

Output :

C.6.4 Icon

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

Properti :

• icon properti yang menerima object IconData yang merepresentasikan ikon yang akan ditampilkan dari kelas Icons atau CupertinoIcons
• color mengatur warna ikon
• size mengatur ukuran ikon dalam piksel

Contoh :

Icon(
                Icons.add,
                color: Colors.amber,
                size: 50.0,
              ),
              // Apple Icons
              Icon(
                CupertinoIcons.add,
                color: Colors.red,
                size: 50.0,
              ),

Output :

C.6.5 Image

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

Properti :

• image properti yang menerima object ImageProvider seperti AssetImage, NetworkImage dll)
• width dan height mengatur lebar dan tinggi gambar
• fit digunakan untuk menyesuaikan ukuran gambar seperti cover, fill, contain
• aligment digunakan untuk mengatur posisi gambar

A. Network Image

Image.network(
            "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
            width: 100,
            height: 150,
          ),

Output :

B. Asset Image

1. Buat folder di dalam proyek misalnya assets/images.

2. Masukkan gambar (misalnya, logo.png) ke dalam folder tersebut.

3. Daftarkan di pubspec.yaml: Buka file pubspec.yaml dan tambahkan baris berikut di bawah bagian flutter:.

Contoh :

Image.asset(
            'assets/images/logo.png',
            width: 100,
            height: 150,
          ),

C.6.6 CircleAvatar

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

Properti :

• Child Widget yang akan ditampilkan di dalam lingkaran seperti Text (inisial) atau Icon.
• backgroundImage Digunakan untuk menampilkan gambar dari ImageProvider, seperti NetworkImage atau AssetImage.
• radius Mengontrol ukuran lingkaran, ukuran defaultnya adalah 20.
• backgroundColor Mengatur warna latar belakang lingkaran.

Contoh :

 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,
                    ))

Output :