Bangun aplikasi seluler lintas platform dengan flutter Google

Ada banyak kerangka kerja mobile lintas platform selama bertahun-tahun, dengan peningkatan yang stabil untuk pengalaman dan kinerja pengembang di seluruh. Google Flutter. adalah tambahan baru untuk paket, dan sangat menarik karena daripada menggunakan 'jembatan' javascript sebanyak kerangka kerja (seperti reaksi asli) lakukan, ia mengkompilasi ke kode asli sejati.

Anda dapat mengetahui sedikit tentang cara kerjanya di video pengantar di bawah ini, atau membaca untuk panduan langkah demi langkah untuk memulai dengan flutter. Untuk saran lebih lanjut, lihatlah koleksi tutorial kami yang menjelaskan Cara Membangun Aplikasi . Atau, jika Anda sedang membangun situs, pilih Pembangun Situs Web dan hosting web. Layanan dari panduan kami. Tidak senang dengan penyimpanan Anda? Ini beberapa penyimpanan awan pilihan.

Dalam tutorial ini, kita akan melihat bagaimana mengatur flutter dan menjelajahi dasar-dasar membangun aplikasi menggunakan kerangka kerja, menggunakan MacOS untuk pengembangan kami. Kami akan berasumsi bahwa Anda telah diprogram sebelumnya dan tahu cara menggunakan BASH Shell, tetapi mungkin belum dikembangkan untuk seluler.

01. Atur

Anda harus mengunduh dan menginstal beberapa hal sebelum Anda dapat menggunakan Flutter:

• Xcode untuk dukungan iOS
• Android Studio untuk dukungan Android
• Android SDK (Unduh Via Android Studio Setelah Anda membuat proyek baru)

Setelah Anda memiliki semua ini, jalankan Xcode dan Android Studio, instal komponen tambahan yang mereka tawarkan dan buat proyek baru untuk memastikan mereka berjalan.

Sekarang Anda siap untuk memulai dengan flutter. Unduh Flutter SDK. . Ekstrak ke mana pun Anda ingin diinstal. Kita perlu memperbarui jalan kita sehingga MacOS dapat menemukan flutter di mana pun Anda memohonnya. Buka (atau buat) $ Home / .bash_profile :

sudo atom $HOME/.bash_profile

Sekarang tambahkan direktori flutter / bin ke $ Path. :

export PATH=/Users/simon/dev/flutter/bin:$PATH

Jalankan perintah shell untuk menyegarkan profil bash:

source $HOME/.bash_profile

Sekarang kita bisa mulai menggunakan flutter cli. Hal pertama yang harus dilakukan adalah memastikan bahwa Anda memiliki versi terbaru:

flutter upgrade

02. Perbaiki masalah apa pun

Setelah selesai, flutter menawarkan alat diagnostik praktis, yang akan memeriksa apakah semua yang Anda butuhkan diinstal dan diatur dengan benar. Ini sangat berguna:

flutter doctor

Perhatikan apa yang dikatakan dokter dan menanggapi masalah apa pun yang muncul. Anda mungkin harus menjalankan dokter beberapa kali untuk mendapatkan umpan balik tambahan dan bertindak di atasnya.

Setelah alat ini senang dengan flutter, toolchain Android, iOS Toolchain dan Android Studio, Anda baik untuk pergi. Jangan khawatir tentang perangkat yang terhubung untuk saat ini.

Xcode dapat memerlukan beberapa langkah ekstra di shell untuk mengatur sepenuhnya:

 sudo xcode-pilih --switch /applics/xcode.app/contents/developer
Brew Install --head libimobiledevice
PEMBAIK INSTALL IDEVICEINSTALLER.
PEMBAIK INSTALL COCOAPODS.
Pengaturan POD 

Dan Android Studio sering membutuhkan perjanjian lisensi yang menerima:

 Flutter Doctor - Lisensi-Lisensi 

03. Temukan IDE dan mulai proyek baru

Sekarang flutter sudah diatur, Anda akan menginginkan IDE untuk bekerja. Ada plugin yang tersedia untuk Android Studio dan IntelliJ. Kita akan pergi dengan kode vs, yang juga memiliki plugin flutter sendiri.

Mulai dari kode vs dan klik Lihat & GT; Palet perintah. Ketik 'instal' dan pilih ekstensi: Instal aksi ekstensi. Cari 'Flutter' dan instal plugin flutter. Setelah selesai, restart kode vs.

Kami sekarang siap untuk mulai berkembang. Mulai proyek baru melalui Palet Perintah dengan memilih Flutter: opsi proyek baru. Beri nama proyek Anda, pilih tempat untuk menyimpannya dan kode vs akan memohon flutter untuk menghasilkan proyek baru.

04. Siapkan perangkat virtual

Untuk menguji proyek kami, kami akan menginginkan simulator perangkat untuk memungkinkan kami di desktop. Di sudut kanan bawah kode VS (di bilah biru), Anda akan melihat sesuatu yang mengatakan tidak ada perangkat. Jika Anda telah mengembangkan untuk seluler sebelumnya, ketika Anda mengklik ini, Anda akan melihat simulator Anda tersedia di palet perintah.

Jika Anda tidak memiliki simulator, jalankan yang berikut di terminal untuk membuka simulator iOS untuk pertama kalinya:

 Buka -a simulator 

Anda kemudian akan melihat simulator iOS yang tersedia saat Anda memulai kembali VS Code.

Android lebih kompleks. Muat Studio Android dan dalam proyek Android, klik Alat & GT; Android & gt; AVD Manager. Pilih Buat perangkat virtual.

Pilih perangkat yang akan ditiru - misalnya Google Pixel 2. Klik Berikutnya dan Anda juga dapat memilih gambar sistem (versi I.E. OS) untuk diunduh. Pada halaman berikutnya dalam kinerja yang ditiru, pilih Hardware - GLES 2.0 untuk mengaktifkan percepatan grafis perangkat keras pada emulator. Selesaikan prosesnya.

Setelah Anda membuat perangkat virtual di Android Studio, restart VS Code dan Anda akan melihat emulator Android Anda muncul di samping iOS simulator dalam daftar perangkat VS Code.

Sekarang, jika Anda mengklik tidak ada perangkat, Anda dapat memilih perangkat iOS atau Android dan telepon virtual akan menyala di desktop Anda. Cobalah dengan simulator iPhone X.

04. Uji aplikasi Starter

Sekarang simulator sedang berjalan, Anda dapat menguji aplikasi starter. Tekan F5 atau klik Debug & GT; Mulai debugging. Aplikasi akan memuat pada simulator dan Anda dapat mencoba berinteraksi dengannya. Bersabarlah jika itu tidak terjadi segera, karena dapat meluangkan waktu untuk membangun.

Sebelum kita dapat melakukan hal yang sama di Android, kita perlu menginstal dependensi Gradle untuk proyek kita (nuansa kecil flutter sekarang). Arahkan ke direktori root proyek dan jalankan:

 Android / GradleW 

Kemudian Anda dapat membuka emulator Android dan menjalankan proyek dalam mode debug seperti yang Anda lakukan untuk iOS.

Fitur hebat dari flutter adalah bahwa ia mendukung 'reload panas' - yaitu, Anda dapat memodifikasi sumber Anda dan melihat perubahan yang tercermin dalam simulator segera. Di main.dart. , mari kita buat beberapa perubahan pada kelas myapp sementara iPhone X simulator berjalan:

 PrimarySchatch: Colors.green,
Beranda: MyHomepage Baru (Judul: 'Buku Resep'), = 

Anda harus melihat perubahan itu berlaku segera setelah Anda menyimpan.

06. Jelajahi sistem widget flutter

Apa yang belum kita bicarakan adalah bahasa pemrograman DART yang bergetar. DART adalah bahasa berorientasi objek dengan sintaks gaya C, yang dikembangkan oleh Google dan semua pengembangan flutter menggunakannya. Jika Anda sudah mendapatkan pengalaman pengembangan web atau seluler, maka itu seharusnya tidak sepenuhnya asing bagi Anda.

Segala sesuatu dalam flutter didasarkan pada widget, yang merupakan blok bangunan aplikasi. Jika Anda pernah menggunakan bereaksi sebelumnya, pendekatan Flutter sangat mirip dan widget analog dengan komponen. Pada dasarnya seluruh aplikasi Anda dapat didekomposisi menjadi hierarki widget.

Ini mudah dilihat dalam MyApp. kelas. MyApp. adalah Statelelelelelwidget. (Ini berarti tidak berubah). Itu membangun() Metode kami mengesampingkan memberitahukan flutter bagaimana widget harus diberikan. Ini mirip dengan reaksi memberikan() fungsi.

Metode kembali a Materiapp. Widget, yang mewakili aplikasi yang menggunakan desain materi Google. Ini pada gilirannya memiliki beberapa properti, yang merupakan widget: Themedata. mendefinisikan gaya visual untuk digunakan dan MyHomepage. adalah widget khusus yang didefinisikan lebih jauh ke bawah main.dart. file yang berisi bodi aplikasi.

07. Edit konten Anda

Berbeda dengan stateless. MyApp. , MyHomepage. adalah widget yang stateful. Ini berarti perilakunya didefinisikan oleh _Myhomepagestate. kelas, memungkinkannya untuk menyimpan informasi dan mengubahnya, seperti ketika Anda menekan tombol pada aplikasi.

Anda dapat melihatnya saat ini menggunakan banyak widget bawaan yang disediakan untuk menangani hal-hal umum seperti tata letak, tombol dan tampilan teks. Mari kita buat beberapa perubahan pada kelas itu untuk memodifikasi apa yang disajikan aplikasi kami.

 kelas _myhomepagestate memanjang negara & lt; myhomepage & gt; {
 @mengesampingkan
 Widget build (konteks buildcontext) {
   mengembalikan perancah baru (
     AppBar: AppBar Baru (
       Judul: teks baru (widget.title),
     ),
     Tubuh: wadah baru (
       Dekorasi: BoxDecoration Baru (Warna: Warna.Brown 
),
       ANAK: BARU REGICPEGGET ()
     )
   );
 }
} 

Kami telah membuang konten yang ada dan menggantinya dengan widget wadah cokelat tetapi kami juga perlu membuat widget khusus, resistewidget, yang akan dimasukkan ke dalam wadah.

 Recipewidget kelas memperpanjang statelesswidget {
 @mengesampingkan
 Widget build (konteks buildcontext) {
   Daftar & lt; widget & gt; widget = daftar baru & lt; widget & gt; ();
   Kembalikan ListView Baru (Anak-Anak: Widget);
 }
} 

08. Muat beberapa aset

Selanjutnya, mari memuat beberapa aset dengan aplikasi sehingga kita dapat menambahkannya ke ListView. widget dalam. Recipewidget. . Aset statis untuk suatu aplikasi ditentukan dalam pubspec.yaml. Di bawah bagian 'Flutter':

 Aset:
   - img / breakfast.jpg
   - img / curry.jpg
   - img / pasta.jpg 

Kami juga akan membuat struktur data sederhana di Main.dart, memasangkan gambar dengan string untuk bertindak sebagai thumbnail dan ringkasan untuk resep.

 resep var = {
   'Breakfast.jpg': 'Mulailah hari dengan sarapan bergizi ini.',
   'pasta.jpg': 'Wow teman-teman Anda dengan membuat pasta segar Anda sendiri.',
   'Curry.jpg': 'Pamerkan keterampilan kuliner Anda dengan kari kaya.',
}; 

09. selesai

Akhirnya, mari kita perbarui Recipewidget. untuk membangun daftar widget yang menampilkan resep. Kita gunakan Gambar.set. untuk memuat aset statis yang kami sertakan dalam pubspec.yaml. .

 resep.foreach ((ibu jari, keterangan) = & gt; widget.add (
       Wadah baru (anak:
         Padding Baru (Padding:
           EdgeInsets.all (16.0), Anak:
             Listtile Baru (
               memimpin: image.setset ('img /' + ibu jari, lebar: 80.0),
               Judul: Teks (Keterangan)
             )
           ),
           dekorasi:
             boxdecoration baru (
                 Perbatasan: Batas baru (
                     Bawah: borderide baru (Warna: Warna.Brown)
                 ),
                 Warna: Colors.Brown 

             )
       )
     )
); 

Semoga Anda mulai merasakan bagaimana flutter menggunakan widget untuk membuat aplikasi. Coba gunakan simulator untuk memutar perangkat. Tata letak flutter secara otomatis mengakomodasi perubahan. Sebagai perbandingan, cobalah aplikasi pada emulator Android.

Artikel ini awalnya diterbitkan di bersih , majalah terlaris di dunia untuk desainer dan pengembang web. Membeli Masalah 310. atau langganan .

Baca lebih lajut:

• Dapatkan kepala Anda bereaksi dengan lima faktor ini
• 11 Aplikasi iPhone gratis kreatif untuk desainer
• Cara Merancang Ikon Aplikasi