## Pengenalan Flutter

Flutter adalah SDK untuk pengembangan aplikasi Mobile yang dikembangkan oleh Google. Sama seperti React Native, Framework ini dapat digunakan untuk membuat atau mengembangkan Aplikasi Mobile yang dapat berjalan pada Device iOS dan Android. 

Hal yang menarik pada Framework ini adalah semua kodenya di Compile dalam kode Native nya (Android NDK, LLVM, AOT-compiled) tanpa ada Intrepeter pada prosesnya sehingga proses Compile-nya menjadi lebih cepat.

Pada pembahasan kali ini, penulis menggunakan Dart sebagai bahasa pemrogramannya.Apa itu Dart? Bahasa pemrograman [Dart](https://dart.dev/) merupakan bahasa pemrograman General-Purpose yang dirancang oleh Lars Bak dan Kasper Lund. Bahasa pemrograman ini dikembangkan sebagai bahasa pemrograman aplikasi yang dapat dengan mudah untuk dipelajari dan disebarkan.



## Apa itu Dart ?

Bahasa pemrograman [Dart](https://dart.dev/) merupakan bahasa pemrograman General-Purpose yang dirancang oleh Lars Bak dan Kasper Lund. Bahasa pemrograman ini dikembangkan sebagai bahasa pemrograman aplikasi yang dapat dengan mudah untuk dipelajari dan disebarkan.

Dart digunakan untuk mengembangkan berbagai macam platform termasuk di dalamnya adalah *web,* aplikasi *mobile*, *server*, dan perangkat yang mengarah pada teknologi Internet of Things.

Bahasa pemrograman tersebut dapat digunakan untuk mengembangkan aplikasi untuk dijalankan pada berbagai macam peramban modern. Dart juga dapat digunakan untuk mengembangkan aplikasi dari *codebase* tunggal menjadi aplikasi [Android](https://teknojurnal.com/tag/android/) maupun [iOS](https://teknojurnal.com/tag/ios/). Pada pembahasan kali ini, penulis menggunakan bahasa pemrograman Dart dan Flutter sebagai Framework nya.



## Persiapan

Sebelum memulai yang lain, mari unduh dulu file-file yang diperlukan:

- [git.scm](https://git-scm.com/downloads)
- [Usb-driver-for-android](https://software.intel.com/en-us/android/articles/intel-usb-driver-for-android-devices)
- [flutter.dev](https://flutter.dev/docs/get-started/install/windows)
- [visualstudio.code](https://code.visualstudio.com/docs?start=true)

### Install Git

Klik link disini [git.scm](https://git-scm.com/downloads), silahkan download. Langkah-langkahnya seperti dibawah ini :

![](https://i.imgur.com/0Iv3Cdc.jpg)



Pilih versi windows jika Anda mengggunakan Windows atau di sesuaikan dengan penggunaan.

![](https://i.imgur.com/kpMPIbb.jpg)



Anda cukup klik next-next saja.

![](https://i.imgur.com/BwlwODR.jpg)



Next.

![](https://i.imgur.com/OBOVKP9.jpg)

Memilih editor default yang digunakan oleh git

![](https://i.imgur.com/8ZD1R97.jpg)



Menyesuaikan penggunaan. Bagaimana Anda ingin menggunakan git dari command line.

![](https://i.imgur.com/rdxlL41.jpg)



Kemudian pilih transportasi HTTP yang didukung.

![](https://i.imgur.com/jh9tg7h.jpg)



Konfigurasi emulator terminal untuk menggunakan git bash.

![](https://i.imgur.com/D1f0I6y.jpg)



Pilih fitur mana yang ingin Anda aktifkan.

![](https://i.imgur.com/gEfqnQp.jpg)



Pilih juga fitur-fitur terkini yang ingin Anda aktifkan.

![](https://i.imgur.com/U2OcKh0.jpg)



Silahkan pilih install dan tunggu hingga proses install selesai.



### Install Usb-driver-for-android

Klik link ini [usb-driver-for-android](https://software.intel.com/en-us/android/articles/intel-usb-driver-for-android-devices).

![](https://i.imgur.com/OYkboey.jpg)





Pilih download pada bagian bawah gambar tersebut.

![](https://i.imgur.com/69Z0XMA.jpg)



Anda Pilih next saja.

![](https://i.imgur.com/geqo0FQ.jpg)



Ini berupa persyaratan lisensi sebelum menginstal perangkat Anda.

Silahkan Anda pilih **I Agree**.

![](https://i.imgur.com/XqmMlsP.jpg)



Pilih fitur mana dari perangkat Anda yang ingin di instal

![](https://i.imgur.com/UkPm8z1.jpg)



Pilih folder tempat untuk menginstal Device USB Driver Anda.

![](https://i.imgur.com/7rPxExr.jpg)



Pilih install saja untuk mulai Install Software nya, tunggu hingga proses instalasi selesai.

### Install Visual Studio Code

![](https://i.imgur.com/JCZXaHi.jpg)



Klik link ini [visual.studiocode](https://code.visualstudio.com/docs?start=true) scroll ke bagian bawah kemudian download.

![](https://i.imgur.com/SyuUKko.jpg)

Silahkan Anda pilih windows saja,disesuaikan dengan penggunaan laptop, Setelah selesai download, silahkan run *Install Visual Studio Code* nya.

![](https://i.imgur.com/5h2O3D8.jpg)



Silakan baca informasi penting berikut sebelum melanjutkan, Jika setuju pilih **I accept the agreement** dan next.

![](https://i.imgur.com/BGUJ46f.jpg)



Ceklis semua **Other**, kemudian next untukmelanjutkan.

![](https://i.imgur.com/WUQzlW6.jpg)



Kemudian langkah akhir Anda pilih install, tunggu hingga proses instalasinya selesai.



### Install Framework Flutter

Klik link ini [flutter.dev](https://flutter.dev/docs/get-started/install/windows) kemudian download.

![](https://i.imgur.com/zXpNAXn.jpg)



Pilih install.

![](https://i.imgur.com/f89LXhS.jpg)



Kemudian disini seperti biasa pilih yang versi windows saja.

![](https://i.imgur.com/0KnDvDt.jpg)



Lalu silahkan Anda klik file Zip pada Flutter Tunggu hingga proses downloadnya selesai, jika sudah silahkan Anda buat folder baru didalam localdisk C dengan nama *src* lalu extract file flutter yang sudah di download tersebut ke dalamnya. Maka struktur folder extract *Flutter* yang terdapat di localdisk C akan seperti ini :

![](https://i.imgur.com/iEau7qb.jpg)



Nahh.. didalam folder *src* terdapat folder lagi yang berisi flutternya.

![](https://i.imgur.com/TP81Ein.jpg)



Maka struktur folder didalam nya akan seperti dibawah ini.

![](https://i.imgur.com/2QxOy3H.jpg)



### Install *Plugins Flutter* di Android Studio

Sebelum melakukan langkah ini, pastikan Anda telah menginstall Android Studio beserta SDK nya. Setelah itu buka app android studio Anda, kemudian ikuti langkah-langkah berikut untuk Install *Plugins Flutter* nya.

![](https://i.imgur.com/MmF7QFD.jpg)



Langkah ini dilakukan jika Anda ingin membuat project dengan app Android Studio, tetapi jika Anda merasa  menggunakan Android Studio terlalu berat silahkan menggunakan Visual Studio Code untuk memudahkan proses pembuatan project tersebut. 

![](https://i.imgur.com/FosLGAG.jpg)



Silahkan Anda search cari ektensi Dart nya lalu install.

![](https://i.imgur.com/c9oPfU8.jpg)



Silahkan Anda search cari ektensi Flutter nya lalu install.

![](https://i.imgur.com/YFyscok.jpg)



Tunggu hingga proses instalasi selesai. Setelah selesai Install ektensi Dart dan Flutter di Visual Studio Code. Anda sudah dapat membuat suatu project di Visual studio code dengan ektensi Framework Flutter dan bahasa pemrograman Dart. 

![](https://i.imgur.com/a2SbT5m.jpg)



## Pengaturan Environment Variables di Windows

Silahkan setting pengaturan Environment Variables, edit Path nya agar dapat dibaca oleh system. Ikuti langkah-langkah yang penulis buat.

![](https://i.imgur.com/wtP5zmq.jpg)



Cari dan pilih system pada properties, environment variables.

![](https://i.imgur.com/WbtNU9r.jpg)



Disini silahkan anda klik **Path** pilih edit.

![](https://i.imgur.com/QdOZYus.jpg)



Pada gambar tersebut, silahkan anda masukkan alamat flutternya yang terdapat di localdisk C, src, flutter, bin.

![](https://i.imgur.com/Bwwnfkm.jpg)



Lakukan hal yang sama seperti langkah diatas, masukkan dart-sdk nya dalam **Path**.



### Pengaturan Device untuk *Debugging*

Langkah ini lakukan untuk setting didalam ponsel hp Anda.Ikuti langkah-langkah serikut :

![](https://i.imgur.com/lOeoi3m.jpg)



Silahkan cari pengaturan **Tentang Ponsel**.

![](https://i.imgur.com/PLMWW2e.jpg)



Disini silahkan anda klik 7 kali pada **Nomor Bentukan**.

![](https://i.imgur.com/H48yDJv.jpg)



Selanjutnya silahkan Anda cari pengaturan tambahan, pilih **Opsi Pengembang**.

![](https://i.imgur.com/Dae348W.jpg)



Masukkan kode Capthca klik gunakan.

![](https://i.imgur.com/2aHQgVi.jpg)



Aktifkan **Opsi Pengembangnya**.

![](https://i.imgur.com/LjbzvK0.jpg)



Lalu scroll kebagian bawah,disitu terdapat debugging USB silahkan Anda aktifkan.

Selanjutnya, Anda buat folder di localdisk D atau dimana saja, kemudian klik kanan didalam folder tersebut untuk mulai membuat project nya, pilih gitbush here.

![](https://i.imgur.com/wfZgPTd.jpg)



Jika selesai, pastikan bahwa ponsel Android Anda telah disambungkan ke komputer laptop dengan menggunakan kabel USB. Ketikkan perintah dibawah ini :

```
flutter
```

![](https://i.imgur.com/qLG1Trs.jpg)

```
$ flutter doctor
```

![](https://i.imgur.com/KGINxpM.jpg)



Jika ada notif seperti itu, Silahkan anda ketikkan perintah seperti dibawah ini :

```
$ flutter doctor --android-licenses
```

```
$ flutter create project1
```

![](https://i.imgur.com/YePOcrh.jpg)



Ini adalah proses Anda membuat suatu folder project menggunakan git bash. tunggu hingga proses selesai.

![](https://i.imgur.com/wl6xu7l.jpg)

Kemudian masukkan perintah seperti dibawah ini untuk mengarahkan kedalam folder project yang sudah anda buat.

```
$ cd project1
```

![](https://i.imgur.com/ydpkAQX.jpg)



Selanjutnya masukkan perintah dibawah ini juga,untuk melihat apakah device dari telepon android anda sudah terbaca atau belum. Pada gambar tersebut telepon sudah terbaca oleh system.

```
$ flutter devices
```

![](https://i.imgur.com/90okd2h.jpg)

```
$ flutter run
```

![](https://i.imgur.com/zuveF5q.jpg)



Pada gambar diatas, menunjukan bahwa Anda telah berhasil membuat satu Project Flutter. Tampilannya cukup sederhana, ini cara untuk membuat *Project Flutter* dengan SDK nya *Flutter* atau Command Prompt.

Pada gambar dibawah ini, terdapat source code package Flutternya. Anda dapat merubah tampilan sesuai yang di inginkan `main.dart` disini .

```dart
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
          
 	// .... Source Code disembunyikan agar lebih ringkas


```

<u>Output</u>

![](https://i.imgur.com/aV86llM.jpg)



#### Membuat kelas DropdownButton

Masukan Source code ini kedalam file `main.dart` project Flutter Anda.

```
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  //class baru dengan menggunakan turunan StatelessWidget
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      //nama aplikasi
      title: 'Demo Flutter',
      theme: ThemeData(
        primarySwatch: Colors.orange,
      ),
      //ThemeData
      home: Home(),
    );
    //MaterialApp
  }
}

class Home extends StatefulWidget {
  @override
  HomeState createState() => HomeState();
}

//create class baru dengan nama HomeState
//didalamnya terdapat list
//isi list berupa Dart, java, c, c++, c#, kotlin,javascript
//atau bisa disesuaikan dengan keinginan

class HomeState extends State<Home> {
  List<String> list = ['Dart', 'Java','C','C++','C#','Kotlin','JavaScript'];
  String item = 'Dart';
  
  void onChanged(String value) {
    setState(() {
      item = value;
    });
  }

  @override
  //Memunculkan Tulisan atau icon atas, Tampilan DropDown Button
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Tampilan DropDown Button'),
      ),
      
      //Tata Letak
      
      body: Container(
        alignment: Alignment.center,
        padding: EdgeInsets.all(30.0),
        child: Column(
          children: <Widget>[
            // Text('Item aktif : $item'),
            DropdownButton(
              value: item,
              items: list.map((String val) {
                return DropdownMenuItem(
                  value: val,
                  child: Row(
                    children: <Widget> [
                    //ini untuk icon gambar androidnya
                    //jika ingin menambahkan icon lagi
                    //jika ingin menambahkan icon lagi, cukup tambahkan list baru
                      Icon(Icons.phone_android),
                      Text(val),
                    ],
                  ),
                );
              }).toList(),
              onChanged: (String value) { onChanged(value); },
            ),
          ],
        )
      ),
    );  
  }
}


```



<u>Output :</u>

![](https://i.imgur.com/rZzh8gU.jpg)

Selamat Mencoba.



Sumber :

[Flutter](http://biobses.com/product/pemrograman-android-dengan-flitter-cd/)

[teknojurnal](https://teknojurnal.com/kelebihan-bahasa-pemrograman-dart/)

Belajar Flutter Di Visual Studio Code :  Membuat kelas DropdownButton

GenAI Video Fest adalah ajang kompetisi video kreatif yang diselenggarakan oleh CODEPOLITAN bekerjasama dengan Alibaba Cloud.

Kami menantang kreator, tech-enthusiast, dan siapa saja untuk mendobrak batas imajinasi menggunakan teknologi Generative AI terbaru. Di sini, kamu wajib menggunakan WAN Model Studio dari Alibaba Cloud sebagai tools utama untuk menghasilkan karya videomu (bisa dikombinasikan dengan tools editing lainnya).

Tunjukkan pada dunia bagaimana teknologi dan kreativitas bisa bersatu menciptakan karya visual yang berdampak!

Kategori Kompetisi
Pilih satu dari empat tema besar ini untuk karyamu:
* Humanity (Kemanusiaan): Cerita yang menyentuh hati, sosial, dan kepedulian antar sesama.
* Sports (Olahraga): Energi, semangat juang, dan dinamika dunia olahraga.
* Entertainment (Hiburan): Komedi, musik, video klip, atau parodi yang menghibur.
* Science (Sains): Visualisasi masa depan, teknologi, alam semesta, atau penemuan ilmiah.

Total Prize Pool senilai Rp 250.000.000 menunggu para pemenang!
* Top Winners Rewards: Uang Tunai, Alibaba Cloud Credits (hingga $500), Merchandise Eksklusif, dan SWAG CODEPOLITAN.
* Lucky Draw Event: Kesempatan menang hadiah tambahan bagi peserta yang beruntung.
* Massive Exposure: Karya terbaik akan di-highlight di media sosial CODEPOLITAN, Alibaba Cloud, dan channel industri kreatif lainnya.
* Special Access (Khusus Alumni RuangAI): Dapatkan 2 Token untuk klaim Kelas Spesialisasi di RuangAI secara gratis.

Jangan sampai ketinggalan tanggal penting ini:
* Pendaftaran & Submission: 23 Desember 2024 - 23 Januari 2025
* Penjurian (Judging Phase): 24 - 26 Januari 2025
* Pengumuman Pemenang: 27 Januari 2025

Cara Ikutan:
1. Daftar: Klik tombol "Daftar Sekarang" dan pastikan kamu punya akun RuangAI.
2. Join Discord: Masuk ke server Discord komunitas untuk info teknis dan diskusi.
3. Create: Buat video kreatifmu menggunakan WAN Model Studio (Alibaba Cloud) sesuai kategori pilihan.
4. Upload & Submit: Unggah videomu ke media sosial (IG/TikTok/YouTube) dan submit link karyamu di halaman submission RuangAI.

Ikuti kompetisi video Generative AI terbesar dari CODEPOLITAN dan Alibaba Cloud! Gunakan teknologi WAN Model Studio untuk menyulap ide liarmu menjadi visual memukau. Rebut total hadiah senilai Rp 250.000.000!

GenAI Video Fest

Beasiswa Basic Cybersecurity adalah program inisiatif dari JagoanSiber yang dirancang untuk membuka wawasan masyarakat luas tentang dunia keamanan digital. Program ini hadir untuk menjawab kebutuhan talenta keamanan siber yang tinggi, dimulai dengan membangun pemahaman fundamental yang kokoh.

Program ini berbentuk Kelas Online Belajar Mandiri (Self-Paced Learning) berbasis video. Peserta diberikan keleluasaan penuh untuk mengakses materi kapan saja dan di mana saja tanpa terikat jadwal, sehingga sangat fleksibel bagi pelajar, mahasiswa, maupun pekerja profesional.

Kelebihan utama program ini adalah aksesnya yang 100% GRATIS dan terbuka untuk siapa saja tanpa syarat latar belakang IT. Peserta akan dibimbing langsung oleh Mahrus Qusaery, seorang praktisi keamanan siber berpengalaman, yang akan mengupas tuntas materi dasar yang krusial.

Program beasiswa kelas online gratis untuk mempelajari dasar keamanan siber dari nol. Belajar mandiri berbasis video langsung dari praktisi ahli, Mahrus Qusaery.

Belajar Flutter Di Visual Studio Code : Membuat kelas DropdownButton

Learning

KelasFullstack

RuangAI

JagoanSiber

Baca Artikel Lainnya

Robouts, Kapal Robot Pintar Berteknologi IoT

Membuat Alarm Elektronik Menggunakan Arduino dengan Sensor Ultrasonik dan MP3 Module

Belajar Flutter Di Visual Studio Code : Membuat kelas DropdownButton

Mengakses Database SQLite dengan Flutter

Navigation dan Routes Pada Flutter

Membuat Aplikasi Menggambar di Flutter