Salam Teman Koding, pada tutorial Flutter series Bahasa Indonesia yang ke-18 KonsepKoding akan berbagi tutorial yang menarik. Karena tutorial ini banyak dipakai jika kamu membuat sebuah real world project application dengan flutter yang sudah terkoneksi dengan server atau task-task mobile device seperti penyimpanan local, camera dan lain sebagainya.

https://www.konsepkoding.com/2020/05/tutorial-flutter-membuat-circularprogressindicator.html
CircularProgressIndicator Flutter

Kamu pasti pernah dong pakai facebook atau instagram, nah saat kamu membuka feed instagram pasti akan ada loading sebelum gambar di muat, nah hal tersebut digunakan untuk user experience yang baik, jadi ketika data API belum berhasil di load maka akan ditampilkan loading atau loader nah di flutter sendiri nama widget nya adalah : CircularProgressIndicator. Di tutorial flutter ini kita akan membuat basic atau fundamental UI CircularProgressIndicator.

Apa Yang Akan Kita Pelajari?

1. Membuat Project Flutter
2. Basic Widget CircularProgressIndicator Flutter
3. Penjelasan Kode
4. Silahkan Explorasi 

Membuat Project Flutter

Pertama pastikan kamu terhuung ke internet dan sudah konfigurasi flutter, jika belum silahkan simak tutorial flutter sebelumnya atau kamu bisa kunjungi : https://flutter.dev/docs/get-started/install

Buka terminal atau cmd mu dan ketikan perintah di bawah ini :

flutter create circular


Basic Widget CircularProgressIndicator Flutter

Setelah kamu berhasil membuat project flutter mu, silahkan buka file lib/main.dart di text editor favorit mu.

Kemudian ubah kodenya menjadi seperti di bawah ini :

Setelah itu silahkan run project Flutter mu dengan perintah di bawah ini :

flutter run

Bila berhasil maka tampilan CircularProgressIndicator yang kita buat akan seperti gambar di bawah ini :

https://www.konsepkoding.com/2020/05/tutorial-flutter-membuat-circularprogressindicator.html
CircularProgressIndicator Flutter

Penjelasan Kode

 body: Center(
          // Center is a layout widget. It takes a single child and positions it
          // in the middle of the parent.
          child: CircularProgressIndicator(
        backgroundColor: Colors.black,
        value: 0.20,
      )),
Untuk kode value menggunakan tipe data Double dart dengan range dari 0.0 sampai 1.0,  1.0 berarti Circullar terisi penuh.  CircularProgressIndicator dapat digunakan untuk loading app mu dan bisa digabungkan dengan state, silahkan explorasi dengan mengubah warna, value dan state nya.

Sekian semoga tutorial Flutter Bahasa Indonesia KonsepKoding dapat bermanfaat dan membantu kamu yang sedang mempelajari Flutter.  Bila ada pertanyaa terkait tutorial ini silahkan ketikan di kolom komentar. Happy Coding Happy Flutter.