Cara Menyiapkan Flutter dan Membuat Aplikasi Web Hello World di Linux

Flutter adalah kerangka pengembangan aplikasi yang dapat digunakan untuk mengembangkan aplikasi lintas platform yang berjalan pada kod asli setelah disusun atau dibina. Dikembangkan oleh Google, Flutter membolehkan anda membuat prototaip cepat dalam masa yang singkat dan juga membolehkan anda membuat aplikasi lengkap yang menggunakan API khusus platform. Dengan menggunakan Flutter, anda boleh membuat aplikasi yang kelihatan cantik untuk peranti mudah alih, sistem operasi desktop dan penyemak imbas web menggunakan widget reka bentuk bahan rasmi. Artikel ini akan membincangkan pemasangan Flutter dan penciptaan projek baru untuk mengembangkan aplikasi web. Flutter menggunakan "Dart" sebagai bahasa pengaturcaraan utama untuk menulis aplikasi.

Pasang Flutter pada Linux

Anda boleh memasang Flutter di Linux menggunakan dua kaedah. Kaedah pertama cukup mudah, yang harus anda lakukan ialah menjalankan perintah mudah untuk memasang Flutter dari snap store.

$ sudo snap install flutter --classic

Kaedah kedua melibatkan memuat turun repositori flutter dari GitHub. Jalankan perintah berikut berturut-turut untuk memasang Flutter secara manual:

$ sudo apt memasang git
$ git klon https: // github.com / turun naik / turun naik.git -b stabil - kedalaman 1 --tanpa-cabang tunggal

Perhatikan bahawa menjalankan perintah di atas akan membawa anda fail yang diperlukan dari repositori Flutter rasmi termasuk fail binari yang boleh dilaksanakan. Anda akan dapat melaksanakan fail binari ini dari folder "bin". Walau bagaimanapun, fail yang boleh dilaksanakan ini tidak akan ditambahkan ke pemboleh ubah PATH seluruh sistem anda dan anda tidak akan dapat menjalankannya dari mana sahaja melainkan jika anda menambahkannya secara manual ke pemboleh ubah PATH. Untuk melakukannya, ikuti langkah di bawah.

Buka ".fail bashrc ”yang terdapat di folder rumah anda menggunakan penyunting teks kegemaran anda:

$ nano “$ RUMAH /.bashrc ”

Tambahkan baris berikut di bahagian bawah fail, ganti dengan hati-hati tali.

eksport PATH = "$ PATH:/ flutter / tong sampah "

Sebagai contoh, jika anda memuat turun repositori Flutter dalam folder "Muat turun", anda perlu menambahkan baris berikut:

eksport PATH = "$ PATH: $ HOME / Muat turun / flutter / tong sampah"

Simpan fail setelah anda selesai. Segarkan “.fail bashrc ”dengan menjalankan perintah di bawah:

$ sumber “$ RUMAH /.bashrc ”

Untuk mengesahkan bahawa folder "bin" Flutter telah ditambahkan ke jalan, jalankan perintah di bawah:

$ gema $ PATH

Anda harus mendapat beberapa output seperti ini:

/ usr / local / sbin: / usr / local / bin: / usr / sbin: / usr / bin: / sbin: / bin: / usr / games: / usr / local / games: / snap / bin: / home / nit / Muat turun / turun naik / tong sampah

Perhatikan adanya kata kunci "flutter" dan jalan lengkap yang menunjukkan folder "bin" di direktori "flutter".

Untuk memeriksa apakah perintah "flutter" dapat dijalankan dari jalan mana pun, gunakan perintah di bawah ini:

$ yang turun naik

Anda harus mendapat beberapa output seperti ini:

/ rumah / nit / Muat turun / flutter / tong / flutter

Perhatikan bahawa bahasa "Dart", yang diperlukan untuk menulis aplikasi Flutter, dilengkapi dengan fail Flutter yang dimuat turun dari git repositori atau dari paket snap. Jalankan arahan berikut untuk memeriksa kebergantungan yang hilang yang diperlukan untuk menjalankan Flutter:

$ doktor flutter

Beberapa fail yang diperlukan mungkin mula dimuat turun untuk menyelesaikan persediaan Flutter. Sekiranya anda belum memasang Android SDK, mesej akan ditunjukkan dalam output untuk membimbing anda melalui pemasangan.

Sekiranya anda ingin mengembangkan aplikasi Android menggunakan Flutter, klik pada pautan yang kelihatan di output terminal dan ikuti langkah-langkah yang relevan untuk memasang Android SDK.

Tutorial ini memfokuskan pada pembinaan aplikasi web menggunakan Flutter. Untuk mengaktifkan sokongan untuk membuat aplikasi web, jalankan perintah berikut berturut-turut:

$ saluran flutter beta
$ naik turun naik
$ flutter config --enable-web

Untuk mengesahkan bahawa sokongan aplikasi web telah diaktifkan, jalankan arahan di bawah:

$ alat berkibar

Anda harus mendapat beberapa output seperti ini:

2 peranti bersambung:
Pelayan Web (web) • pelayan web • javascript web • Alat Flutter
Chrome (web) • chrome • javascript web • Google Chrome 87.0.4280.66

Sekiranya anda telah mengikuti langkah-langkah dengan betul sejauh ini, Flutter kini harus dipasang dengan betul pada sistem anda, siap membuat beberapa aplikasi web.

Buat Projek Flutter Baru

Untuk membuat projek aplikasi web "HelloWorld" baru menggunakan Flutter, jalankan arahan yang disebutkan di bawah:

$ flutter mencipta helloworld
$ cd helloworld

Untuk menguji projek anda yang baru dibuat, jalankan arahan:

$ flutter run -d chrome

Anda akan melihat demo aplikasi web Flutter seperti ini:

Anda boleh menyahpepijat aplikasi web Flutter menggunakan alat pengembangan yang terdapat di dalam Chrome.

Ubahsuai Projek Anda

Projek demo yang anda buat di atas mengandungi "utama.fail dart "yang terletak di folder" lib ". Kod yang terdapat dalam "utama" ini.fail dart ”dikomentari dengan baik dan dapat difahami dengan mudah. Saya mengesyorkan anda membaca kod sekurang-kurangnya sekali untuk memahami struktur asas aplikasi Flutter.

Flutter menyokong "tambah nilai panas", yang membolehkan anda memuat semula aplikasi dengan cepat tanpa melancarkannya semula untuk melihat perubahannya. Cuba ubah tajuk aplikasi dari "Halaman Depan Flutter Demo" menjadi "Hello World !!" di dalam utama.fail dart ”. Setelah selesai, tekan masukkan terminal untuk memuat semula keadaan aplikasi tanpa melancarkannya semula.

Bina Aplikasi Flutter Anda

Untuk membina aplikasi web Flutter anda, gunakan arahan yang dinyatakan di bawah dari direktori projek anda:

$ membina laman web

Setelah proses build selesai, anda harus mempunyai folder baru di direktori projek anda yang terletak di jalan "build / web". Di sini anda akan dapati semua yang diperlukan ".html ",".js "dan".fail css ”diperlukan untuk melayani projek secara dalam talian. Anda juga akan menemui pelbagai fail aset yang digunakan dalam projek tersebut.

Sumber Berguna

Untuk mengetahui lebih lanjut mengenai pengembangan aplikasi web menggunakan Flutter, rujuk dokumentasi rasminya. Anda boleh merujuk dokumentasi rasmi untuk bahasa Dart untuk mendapatkan pemahaman yang lebih baik mengenai aplikasi Flutter. Flutter dilengkapi dengan banyak pakej rasmi dan pihak ketiga yang boleh anda gunakan untuk mengembangkan aplikasi dengan cepat. Anda boleh mendapatkan pakej ini di sini. Anda boleh menggunakan widget Flutter reka bentuk bahan di aplikasi web anda. Anda dapat mencari dokumentasi untuk widget ini dalam dokumentasi Flutter rasmi. Anda juga dapat merasakan widget ini dengan melayari demo berfungsi komponen web reka bentuk bahan.

Kesimpulannya

Flutter telah lama dikembangkan dan berkembang sebagai kerangka untuk mengembangkan aplikasi lintas platform "tulis sekali pakai di mana sahaja". Penerapan dan popularitasnya mungkin tidak setinggi kerangka kerja lain, tetapi menyediakan API yang stabil dan mantap untuk mengembangkan aplikasi lintas platform.