LAPORAN PRAKTIKUM APLIKASI MOBILE 2

C. Project Visual Studio Code

Buka aplikasi visual studio code, pastikan ekstensi Flutter sudah ada di Visual Studio Code tersebut

Buat project bernama hai dengan cara membuka command pallete dengan shortcut ctrl+shift+p lalu ketik Flutter: New Project > Application

Stateless & Statefull

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

• Statefull – 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.

Basic Widget

Text – widget dasar yang digunakan untuk menampikan teks pada layer

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

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

 // Kotak biru
              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),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    const Text("Kelipatan 2 : "),
                    Text(
                      '$_kelipatan',
                      style: Theme.of(context).textTheme.headlineMedium,
                    ),
                  ],
                ),
              ),

ElevatedButton – widget yang mewakili tombol dan memiliki shadow

// ElevatedButton
              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"),
              ),

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

floatingActionButton: FloatingActionButton(
          onPressed: _kelipatanDua,
          tooltip: "Kelipatan 2",
          child: const Icon(
            Icons.add,
            color: Colors.amber,
            size: 50.0,
          ),
        ),

• Image NetworkImage – widget dasar yang digunakan untuk menampikan gambar dari jaringan internet

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

Untuk AssetsImage buatkan baris tambahan di dalam file pubspec.yaml menjadi seperti berikut, dan juga tambahkan folder assets/image lalu upload foto yang ingin digunakan di dalam folder image

 assets:
    - assets/images/devia.jpg

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Statefull Widget"),
          backgroundColor: Colors.purple[50],
          actions: [
            Padding(
              padding: const EdgeInsets.only(right: 40), // supaya tidak ketutup debug ribbon
              child: Row(
                children: [
                  CircleAvatar(
                    radius: 18,
                    backgroundColor: Colors.green,
                    child: const Text(
                      "IF",
                      style: TextStyle(fontSize: 12, color: Colors.white),
                    ),
                  ),
                  const SizedBox(width: 10),
                  CircleAvatar(
                    radius: 18,
                    backgroundColor: Colors.blue,
                    child: const Icon(
                      Icons.person,
                      color: Colors.white,
                      size: 18,
                    ),
                  ),