Tutorial Flutter – Jika Anda ingin membuat aplikasi sendiri, Anda memiliki banyak pilihan. Pengembang yang merupakan alat siap pakai sangat populer karena kemudahan penggunaannya, namun kerangka kerja yang membuat proses pengembangan semudah mungkin bagi pengguna juga menjadi lebih populer. Contoh terbaru adalah Flutter, software development kit (SDK) yang dikembangkan oleh Google. Kerangka kerja sumber terbuka ini memungkinkan Anda membuat aplikasi seluler yang fungsional (untuk iOS dan Android), serta aplikasi web dan desktop dalam bahasa pemrograman Google Dart.
Dalam tutorial Flutter, kami akan membahas langkah-langkah paling penting untuk memulai Google SDK.
Tutorial Flutter
Jika Anda ingin mempelajari cara memprogram dengan Flutter, Anda tidak perlu memiliki pengalaman dalam pengembangan aplikasi dan web. Anda tidak perlu tahu apa-apa tentang bahasa pemrograman Google sebelumnya, Dart. Jika Anda familiar dengan aturan dan konsep dalam tindakan (seperti transisi, loop, dan pernyataan kondisional), Anda sudah siap untuk bekerja dengan kerangka kerja tersebut.
Flutter Geolocation Tutorial Using Live Tracking Example
Tutorial Flutter ini memberikan pengenalan dasar pengembangan perangkat lunak dengan membuat aplikasi sederhana yang menghubungkan kata-kata dalam format berbeda dan kemudian menampilkan koneksi tersebut. Untuk melakukan ini, Anda memerlukan alat dasar untuk bekerja dengan Flutter: Flutter SDK dan editor. SDK tersedia untuk Windows, macOS, dan Linux. Anda dapat mengunduh paket terkait langsung dari situs web resmi Flutter.
Pilih paket Flutter untuk sistem operasi Anda, lalu ikuti petunjuk penginstalan untuk menginstal dan mengonfigurasi SDK.
Anda dapat memilih mana yang Anda inginkan untuk editor. Namun, untuk pengalaman pengguna yang lebih baik dengan pelengkapan otomatis kode, penyorotan sintaksis, dan dukungan untuk debugging dan pengeditan widget, Google merekomendasikan penggunaan editor kode yang memiliki plugin Flutter resmi. Itu sebabnya kami memilih menggunakan Android Studio untuk tutorial Flutter kami. Setelah Anda menyiapkan lingkungan pengembangan yang sesuai untuk pengembangan aplikasi Android, instal plugin Flutter dengan mengikuti langkah-langkah berikut:
Sebelum Anda dapat menginstal plugin Flutter di Android Studio, Anda perlu menginstal ekstensi bahasa pemrograman Dart.
Real World Flutter… By Tutorial Team, Raywenderlich
Untuk alternatif Android Studio, Google merekomendasikan GNU Emacs, Visual Studio Code, atau IntelliJ IDEA, yang semuanya memiliki plugin Flutter.
Setelah Anda menginstal Flutter dan lingkungan pengembangan (atau editor) yang diperlukan, Anda dapat membuat aplikasi Flutter pertama Anda. Seperti disebutkan di atas, kami menggunakan tutorial Android Studio untuk Flutter, jadi sekarang mari kita rilis IDE untuk itu. Dari menu “File”, pertama pilih “Baru” lalu “Proyek Flutter Baru” untuk memulai proyek baru berdasarkan aplikasi ini.
Pilih “Aplikasi Flutter” sebagai jenis proyek yang diinginkan, lalu klik “Berikutnya”. Di menu konfigurasi, tentukan nama proyek dan lokasi aplikasi Anda. Anda juga mempunyai opsi untuk menambahkan deskripsi ke proyek. Masukkan jalur ke instalasi Flutter Anda di bidang yang disebut “Flutter SDK Path”.
Jalur ke Flutter SDK bersifat unik dan bergantung pada tempat Anda menyimpan perangkat keras di sistem Anda. Dalam tutorial Flutter ini, jalurnya adalah “C:srcflutter”.
How To Build A Custom Widget In Flutter
Terakhir, klik “Selesai” untuk membuat aplikasi Flutter baru. Di file main.dart, file proyek utama, dan tutorial Flutter, tambahkan kode berikut untuk membuat aplikasi menampilkan pesan sederhana “hello world” (opsional, hapus kode yang ada dari file main.dart):
Setelah memasukkan cuplikan kode ini, Anda dapat melihat pratinjau versi pertama aplikasi Anda. Di Android Studio, pilih mesin virtual yang diinginkan (di bagian “Flutter Device Selection”). Kemudian klik tombol play (“Jalankan main.dart”):
Mengklik tombol putar akan menjalankan file “main.dart” pada perangkat pengujian yang dipilih. Anda juga dapat menggunakan pintasan keyboard [Shift] + [F10].
Untuk mempratinjau aplikasi di Android Studio, sistem gambar target harus diinstal. Jika tidak, Anda tidak akan dapat memilih perangkat pengujian virtual di bawah “Pemilihan Perangkat Flutter” untuk menguji aplikasi. Untuk menambahkannya, pilih “Tools” dan kemudian “AVD Manager”. Kemudian klik “Buat Perangkat Virtual” dan instal perangkat virtual yang diinginkan. Anda dapat menemukan petunjuk mendetail tentang membuat dan mengelola perangkat virtual di Android Studio di Forum Developer Android.
Flutter Textfield Tutorial
Aplikasi akan membutuhkan waktu untuk dijalankan dan di-debug untuk pertama kalinya, jadi Anda harus menunggu beberapa saat hingga pesan selamat datang muncul di layar situs pengujian.
Setelah membuat aplikasi sederhana pada langkah pertama tutorial Flutter, kita akan menghubungkannya ke paket eksternal. Untuk lebih jelasnya, kami sekarang akan menambahkan paket bahasa yang diperlukan untuk tujuan proyek kami – proyek ini adalah aplikasi yang menyediakan kombinasi bahasa. Sebagai contoh, kami menggunakan paket open source “english_words” (lisensi MIT), yang dapat Anda temukan di pub.dev bersama dengan banyak paket open source lainnya. Templat ini berisi lebih dari 5.000 kata bahasa Inggris yang paling umum digunakan, sehingga cocok untuk kebutuhan pelatihan Flutter.
Aplikasi Flutter menggunakan file pubspec.yaml untuk mengelola paket dan dependensi. Buka file ini dan tambahkan entri bahasa paket ke daftar dependensi (periksa apakah ini mutakhir; di sini versi 3.1.5):
Kemudian jalankan perintah “flutter pub get”. Android Studio bahkan memiliki tombol bernama “Bagikan” untuk ini.
First Steps With Flutter Part 1: Exploring Widgets
Di konsol, Anda dapat memeriksa apakah perintah “pub get” berhasil. Jika ya, pesan berikut akan ditampilkan: “Prosedur selesai dengan kode keluar 0”.
Saat Anda memasukkan anak baru, Anda akan melihat beberapa kata dari kumpulan yang semua kata dimulai dengan huruf kapital (“asPascalCase”).
Setiap kali Anda berhasil memperbarui kode aplikasi, Anda sekarang akan menerima pasangan bahasa Inggris.
Widget tanpa kewarganegaraan, seperti yang digunakan sebelumnya dalam tutorial Google Flutter ini, bersifat statis. Mereka tidak dapat mengubah statusnya saat aplikasi sedang berjalan. Oleh karena itu, jenis widget ini tidak dapat diperbarui saat aplikasi sedang berjalan. Di sisi lain, widget stateful dapat mengubah statusnya saat aplikasi sedang berjalan, sehingga tidak selalu sama saat aplikasi sedang berjalan. Jika Anda ingin menambahkan interaksi ke beberapa bagian aplikasi Flutter, Anda memerlukan informasi berguna.
Flutter Tutorial For Android Developers By Codeplayon2 On Deviantart
Di Flutter, widget selalu berstatus atau tanpa kewarganegaraan. Contoh elemen stateless adalah ikon, tombol, dan teks, sedangkan contoh ekspresi sederhana adalah kotak centang, huruf, dan slider.
Aplikasi sampel kami juga akan menerima widget interaktif pada saat ini. Implementasi ini harus memiliki setidaknya dua kelas: kelas StatefulWidget yang membuat instance kelas Stateful.
Pertama, kita membuat status minimal yang disebut “RandomWordsState” dengan menambahkan kode berikut di akhir file main.dart:
Dalam hal ini, kelas negara didefinisikan secara eksplisit untuk digunakan dengan widget “RandomWords”. Widget status itu sendiri ditambahkan ke file main.dart pada langkah berikutnya menggunakan kode berikut (untuk mendahului kelas “RandomWordsState” dalam kode):
Introduction To Flutter Development With Dart
Saat Anda menyelesaikan aplikasi baru ini, Flutter akan memberi tahu Anda bahwa saat ini tidak ada fungsi Create() “RandomWordsState” yang ditentukan.
Dalam cuplikan kode kelas status yang ditambahkan, Anda akan melihat komentar placeholder “//TODO Tambahkan metode build()” di tempat yang sesuai, yang kini akan digantikan oleh kode fungsi build():
Terakhir, hapus baris “final wordPair = WordPair.random();” dari kelas MyApp dan ganti entri anak “anak: Teks(wordPair.asPascalCase)” dengan “anak: RandomWords(),”.
Saat Anda menyelesaikan kode baru ini, alat pengujian virtual masih akan menampilkan sepasang pesan, namun sekarang didasarkan pada status widget, yang dapat menyediakan interaksi pengguna.
Flutter Tooltip Tutorial
Untuk memberikan contoh widget Flutter interaktif, kami akan memperluas aplikasi Google Flutter di akhir tutorial. Agar lebih jelas, kami akan memodifikasi kelas “RandomWordsState” agar tidak hanya menampilkan satu pasangan kata, namun juga memberi pengguna daftar pasangan kata yang tak terbatas untuk dipilih. Selain itu, kami ingin menyimpan ekspresi sebelumnya secara berpasangan (untuk menghindari duplikat) dan menambah teks hasil.
Mari kita mulai dengan dua poin terakhir (yaitu menyimpan hasil dan mengubah ukuran) dengan menambahkan variabel _suggestions dan _biggerFont:
Fitur-fitur yang ditunjukkan di atas menghubungkan aplikasi dengan berbagai fitur. Ini mencakup daftar pasangan kata (List.View) yang membuat pembacaan lebih mudah menggunakan pembagi piksel (Divider). Ini juga berarti sepuluh saran tambahan (baris: _suggestions.addAll) akan ditampilkan setelah pengguna mencapai akhir daftar saat ini.
Bagian penting lainnya dari widget ekstensi adalah fungsi _buildRow(), yang dipanggil satu kali untuk setiap pasangan kata dan menampilkan setiap pasangan sebagai ListTile. Kami akan menggunakan fungsi ini pada langkah berikutnya:
Flutter Tutorial 2021 For Beginners: Giới Thiệu Về Series
Sekarang kita perlu menampilkan metode create() yang kita gunakan saat membuat widget status (langkah 3).