• Ming. Nov 27th, 2022

    Sih4nk

    Dari Kita Untuk Kita

    #02 Belajar Flutter : Aplikasi Pertama

    Pada materi Belajar Flutter ini adalah membuat aplikasi pertama menggunakan flutter, dimana di flutter sendiri sudah memiliki widget untuk mempermudahkan kita dalam melakukan pembuatan aplikasi.

    Sebelum kita memulai perkodingan lebih baik kita mengenali terlebih dahulu apa itu widget. di flutter sendiri sering di gunakan istillah widget. jadi widget pada flutter sendiri dapat kita anggap sebagai sebuah benda didunia nyata. Di dunia nyata setiap benda  dapat dikatakan merubapakan gabungan dari benda-benda lainnya. contohnya kopi

    Ketika saya memiliki secangkir kopi panas, maka pasti kopi tersebut terbuat dari menggunakan air panas ( benda ), lalu Biji kopi (benda), dan diletakan didalam gelas (Benda). Maka seketika semuanya dikombinasikan terciptalah secakir kopi panas yang nikmat. Jika widget pada flutter dapat dijelaskan seperti ini .

    belajar fluuter

     

    Setiap widget pasti terdiri dari gabungan widget-widget lainnya, contoh ada sebuah aplikasi yang terdapat tulisan Hello World dengan judul Welcome to Flutter. Untuk membuat aplikasi ini saya menggunakan 2 widget, yang pertama widget appbar widget untuk menampilkan Welcome to Flutter sebagai judul aplikasi, dan yang kedua text widget untuk menampilkan hello world. Sebenarnya Appbar sendiri terdiri dari beberapa widget salah satunya text widget.

    sekarang kita akan membuat sebuah aplikasi pertama menggunakan flutter.

    tahapan yang dilakukan adalah :

    1.Buka Visual Studio Code

    2.Tekan F1 pada tab view pilih Command Pallete… ( Ctrl + Shift + P )

    Belajar Flutter Membuat Aplikasi Pertama

    3. Selanjutnya pilih Flutter : New Project

    4. Lalu pilih Application

    5. Tentukan folder tempat penyimpanan aplikasi tersebut.

    6. Buat nama Aplikasi, disini saya membuatkan nama dengan latihan_1

    7. Sebelum membuat sebuah file dart, visual code studio secara otomatis akan mendownload template default dari flutter. Biarkan proses tersebut selesai.

    8. Maka visual Code Studio akan langsung mengarahkan kita ke dalam file main.dart

    9. Sebenarnya bentuk class main dapat seperti ini :

    Fungsi keduanya sama, hanya perbedaan pada langkah ke 4 class main menggunakan Lambda Expressions.

    10. Untuk class MyApp kita buat dibawahnya ➡ cukup ketik stl di bawah class main, lalu pilih Flutter stateless widget

    Bentuk program saat ini adalah :

    Oke, disini sudah ada sebuah class MyApp yang merupakan turunan dari stateless widgetStateless widget sendiri memiliki sebuah method yang bernama build yang di override dengan class turunannya. Jadi nantinya method build ini akan mengembalikan sebuah widget yang merupakan tampilan dari stateless widget yang juga merupakan tampilkan dari MyApp yang akan ditampilkan di layar smartphone.

    11. Selanjutnya kita akan mengganti Container() menjadi MaterialApp()

    MaterialApp() merupakan sebuah widget yang berisi data-data dan tools yang diperlukan aplikasi ketika menggunakan material design.

    12. Oke, disini isi widget MaterialApp() dengan properti home:

    properti home: merupakan rute yang ditampilkan pertama kali ketika aplikasi dijalankan secara normal. Namun disini kita perlu menambahkan widget Scaffold yang berfungsi sebagai tampilan dasar dari sebuah aplikasi, karena memang awalnya widget MaterialApp() tidak memiliki tampilan sama sekali.

    13. Lalu untuk melengkapi isi dari widget Scaffold kita akan menambahkan 2 properti yaitu appbar dan body

    maka sekarang kita memiliki properti appbar yang didalamnya terdapat widget Appbar (berfungsi untuk menampilkan panel aplikasi atas). Kemudian kita lengkapi isi dari widget Appbar dengan properti title yang didalamnya kita isi dengan widget Text untuk menampilkan tulisan “Aplikasi Pertamaku”. Pada properti body kita isi dengan widget Text untuk menampilkan tulisan “Halo Semuaaa…”

    14. Save Project yang sudah dibuat

    15. Jalankan project tersebut dengan menekan F5 , jika berhasil maka tampilan aplikasinya seperti berikut ”

    16. Agar tulisan “Halo Semuaaa…” ada ditengah layar, maka dapat kita manfaatkan fitur berikut, arahkan kursor mouse kita ke widget Text dan klik kanan => pilih Refactor

    17. Lalu pilih Wrap With Center

    Hasil programnya adalah:

    hasil saat di jalankan

     

    Kesimpulan yang dapat dilihat pada aplikasi pertama ini adalah :

    Maka dari semua yang sudah dijelaskan dapat saya simpulkan:

    1. Aplikasi Flutter memiliki sebuah fungsi yang bernama main.
    2. Fungsi main tersebut akan menjalankan sebuah class bernama MyApp (penamaan bersifat optional).
    3. Lalu menampilkan widget yang dikembalikan oleh method build.
    4. Pada method build, kita membuat 1 buah widget yaitu MaterialApp().
    5. Tampilan utama dari MaterialApp() ini menggunakan widget Scaffold (merupakan tampilan dasar dari aplikasi android).
    6. Di dalam widget Scaffold terdapat 2 bagian utama yaitu properti appbar dan body.
    7. Pada properti appbar, kita isi dengan widget Appbar yang dilengkapi properti title dan saya isi dengan widget Text untuk menampilkan tulisan “Aplikasi Pertamaku”.
    8. Lalu properti body kita isi dengan widget Text untuk menampilkan tulisan “Halo Semuaaa…”, kemudian widget Text kita masukan ke dalam widget Center agar tulisan “Halo Semuaaa…” berada di tengah layar.

     

    Materi Belajar Flutter yang lainnya :

    #01 Belajar Flutter : Apa itu Flutter?

    Cara Mudah Install Flutter Tanpa Android Studio

    #02 Belajar Flutter : Aplikasi Pertama

    #03 Belajar Flutter : Bottom Navigation Bar

    #04 Belajar Flutter : Carousel Slider 

    #05 Belajar Flutter : GridView

    One thought on “#02 Belajar Flutter : Aplikasi Pertama”

    Tinggalkan Balasan

    Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

    //whairtoa.com/4/5415556