Langsung ke konten utama

Flutter Tutorial Indonesia | 3 Aplikasi Pertama

Dalam sesi ini kita akan membuat aplikasi sederhana sebagai pembukaan dari beberapa tutorial yang akan disampaikan pada blog ini, sebagai dasar pemahaman pada pembahasan ini kita juga akan belajar mengenai struktur dasar dari project flutter.

jika anda masih ragu dengan flutter, silahkan baca ini https://flutter.dev/docs/resources/technical-overview

Oke, sebelum membuat project baru, pastikan flutter sdk sudah siap digunakan, untuk mengaturnya anda bisa melihat pada tutorial sebelumnya.
1.Langkah Pertama : Membuat project baru
untuk membuat project baru di terminal cukup ketik : flutter create namaaplikasi
setelah project jadi, anda akan melihat beberapa kode yg disediakan sebagai contoh aplikasi sederhana dari flutter.

2. Pembahasan mengenai kode
Sekarang anda mungkin penasaran dari mana proses awal aplikasi itu dijalankan. . ?

Pada aplikasi flutter, file main.dart yang terletak pada folder lib merupakan file dart yang pertama kali di eksekusi, dan akan langsung mencari method main() kemudian menjalankannya. untuk lebih jelasnya, mari kita bahas pelan".
  • Pada baris pertama, Disana ada kode yang meng-import paket material yang dimana itu merupakan paket yang menyediakan kumpulan widget-widget dari material design yang akan digunakan pada pembangunan user interface aplikasi.
  • void main adalah method yang pertama kali akan di jalankan.
  • Pada kode berikutnya yaitu terdapat class yang meng-extend class StatelessWidget, kelas yang sedang mengextends kelas ini memiliki beberapa sifat, seperti (tidak memilik state, dan karena tidak memiliki state maka nilai variabel yang ada di dalam kelas ini tidak bisa di ubah, untuk merubah nilai dari suatu variabel di kelas ini yaitu harus di render ulang), 
  • setelah itu, class ini akan meng-override suatu widget yang berasal dari paket material, contohnya disini yaitu mereturn MaterialApp sebagai widget induk dari aplikasi tersebut, di dalam MaterialApp terdapat beberapa bagian widget lagi seperti title, thema, dan ada bagian home tempat meletakkan widget lagi, di bagian home kita bisa mengatur appBar dan body. dan seterusnya.,
  • Di dalam class yang meng-extend class StatefulWidget kita bisa menempatkan ui yang dinamis atau dengan variabel yang dapat berubah nilainya (ini kebalikan dari kelas StatelesWidget ),  kelas ini memiliki state dan disini semua data dapat di ubah dengan bantuan method setState. di dalam method setState kita bisa merubah nilai suatu data. seperti pada contoh kode yang disediakan disana yaitu mengubah nilai dari variabel _counter menggunakan method setState. 

3. Struktur folder

  • Folder android
    folder pengaturan untuk aplikasi yang akan di build menjadi android, disana seperti pengaturan akses jaringan, akses memori, dan lain-lain bisa di atur dalam folder android.
  • Folder ios
    sama halnya dengan folder android, yaitu untuk mengatur pengaturan untuk kebutuhan apliksi jika di build menjadi ios, yaitu seperti pengaturan akses jaringan, kamera dll.
  • Folder build
    aplikasi yang telah selesai di build, hasilnya akan berada di dalam folder ini, kita bisa hapus folder ini dalam keadaan tertentu, misalnya error saat build program, anda bisa menghapus folder ini dan mengulanginya lagi.
  • Folder lib
    folder dimana kode inti di tulis di dalam folder ini.
  • File pubspec.yaml
    jika kita ingin menambahkan suatu pluggin, mengatur dependencies, kita bisa mengaturnya di file ini.
Untuk penjelasan lebih detailnya, akan saya lakukan update pada postingan ini.

4. Experiment
Hal yang selanjutnya yang kita akan lakukan adalah mencoba untuk merombak aplikasi tersebut menjadi sangat sederhana, lalu akan kita pelajari kodenya baris-perbaris lagi.

untuk tutorial kali ini, saya mengambilnya dari https://codelabs.developers.google.com/codelabs/first-flutter-app-pt1/#0

mari ikuti saya. . .

hapus semua kode di dalam file main.dart yang terdapat pada folder lib, kemudian ganti semua nya dengan ini :


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Welcome to Flutter',
      home: new Scaffold(
        appBar: new AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: const Text('Hello World'),
        ),
      ),
    );
  }
}


Oke, .
mari kita bahas,
kita akan bahas kata-kata yang aneh satu-per-satu terlebih dahulu. .

1. import  = digunakan untuk mengimport suatu paket atau kelas, contohnya jika anda ingin mengimport kelas service_penduduk, maka anda bisa menulisnya : import 'package:service_penduduk.dart'

2. void = untuk menyatakan suatu fungsi, contohnya ni : jika anda ingin membuat suatu fungsi yang bernama "ambildata" maka anda bisa menulisnya dengan : void ambildata()  , dari contoh kode di atas, fungsi yang bernama "main" merupakan fungsi yang pertama kali akan di panggil.

3. 
class MyApp extends StatelessWidget  = mengextends kelas StatelessWidget, kelas ini digunakan untuk membuat ui yang dimana semua nilai didalamnya tidak bisa di rubah,


[belum selesai di tulis]

Komentar

  1. Terima kasih pembelajarannya, sangat bermanfaat . kita nantikan kelanjutannya bang ya..

    BalasHapus
  2. 365SBOBET Situs Agen Sbobet, Agen Bola Terpercaya di Indonesia

    365sbobet adalah Agen SBOBET Terpercaya Indonesia, Situs Agen Bola Resmi Online Casino Terbaik Official Partner kami adalah Barcelona dan Liverpool.

    365Sbobet
    agen sbobet
    Agen Sbobet Online
    Agen Sbobet Terpercaya
    Agen Sbobet Indonesia
    Agen Sbobet Asia
    Agen Sbobet Resmi
    Agen Sbobet Mobile
    Daftar Agen Sbobet
    Situs Agen Sbobet
    Website Agen Sbobet
    Link ALternatif Agen Sbobet
    Bonus Agen Sbobet
    Sbobet
    Sbobet Online
    Sbobet Terpercaya
    Sbobet Indonesia
    Sbobet Asia
    Sbobet Resmi
    Sbobet Mobile
    Daftar Sbobet
    Situs Sbobet
    Website Sbobet
    Link ALternatif Sbobet
    Bonus SbobetAgen Bola
    Agen Bola Online
    Agen Bola Terpercaya
    Agen Bola Indonesia
    Agen Bola Asia,
    Agen Bola Resmi
    Agen Bola Mobile
    Daftar Agen Bola
    Situs Agen Bola
    Website Agen Bola
    Link ALternatif Agen Bola
    Bonus Agen Bola
    Agen Slot
    Main Slot
    Situs Sbobet
    Situs Slot
    Slot
    Slot Online
    Slot Terbaik
    Website Slot

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Situs Belajar Coding Dapat Sertifikat Untuk Pekerjaan

Situs belajar bahasa pemrograman yang akan saya bagikan pada tulisan kali ini akan adalah situs yang bisa membuat anda mendapatkan pekerjaan dan yang pastinya materi dari situs yang saya pilih ini adalah materi yang berstandar internasional. Kelebihan dari memilih courses online dari pada membaca ebook atau menonton video tutorial di youtube adalah kita akan mendapatkan sertifiat, diamana sertfikat tersebut bisa kita gunakan untuk mendapatkan pekerjaan, dan berita bagus bagi para freelancer yaitu adanya linkedin situs yang mempermudah pertemuan antara pencari pekerjaan dengan perekrut dari suatu perusahaan, disana kita bisa menambahkan sertifikat, pengalaman kerja, keahlian yang kita miliki dan masih banyak lagi, selain itu kita juga bisa print profil kita menjadi sebuah portofolio berbentuk file PDF. Dari pengalaman saya sendiri yaitu selain mendapatkan tawaran pekerjaan saya juga sering di mendapatkan client yang memesan untuk di buatkan suatu aplikasi dan itu sering menjadi

Apa itu API | 1 Belajar REST API Dengan Python Flask

Dalam sesi ini kita akan belajar cara membuat API menggunakan Flask, di perlukan sedikit dasar bahasa pemrograman python untuk mempermudah dalam mempelajari ini, dan jangan kawatir jika anda belum pernah  Belajar Flask  sebelumnya, karena pada tutorial kita akan membahas dari dasar. Flask ini framework yang sangat cocok digunakan untuk membuat suatu service yang kecil, dan ini telah banyak di gunakan oleh perusahaan-perusahaan besar, anda bisa lihat  disini . Di saat saya menulis tutorial ini, pengembangan Flask sudah mencapai seperti berikut: Contributors :503 Commits : 3,5037 Ok, saya akan mulai dengan membahas apa itu API ? API (Application programming interface) - Mudahnya bisa di sebut sebuah service yang berfungsi untuk menghubungkan service antar service, contohnya frontend dan backend agar bisa bertukar data kita butuh yang namanya API Service, jadi kalau istilah lainnya ini bisa di sebut sebuah gerbang penghubung. Secara "garis besar" pekerjaan pr

Flutter Tutorial Indonesia | 1 Pendahuluan

Setelah rilisnya bahasa pemrograman Dart yang di kembangkan oleh google pada tahun 2011 kini bahasa tersebut sudah memiliki framework yang bisa digunakan untuk membuat aplikasi moile yaitu untuk android dan ios sekaligus dalam satu waktu. Flutter juga digunakan sebagai framework utama dalam pengembangan aplikasi untuk OS Google Fuchsia. Tentang Flutter : Menggunakan Library Grafik Google Skia untuk mesin rendernya, alias tidak menggunakan bawan dari android atau iOS, dan ini yang membuat tampilan di android, iOS, atau desktop tetap sama. Semua UI adalah Widget Rendering Lebih Cepat Tidak hanya untuk membuat UI Flutter juga untuk menangani aliran data dan status data yang rumit dengan cara yang elegan dengan model Reactive. Dalam acara Google I/O 2018 menyatakan bahwa sekarang sudah menyediakan dokumentasi yang lengkap di flutter.dev dan anda bisa langsung belajar framework ini dari dokumentasi tersebut atau bisa mengambil courses di udacity atau tempat courses lainnya sep