Berkibar untuk pemaju web front-end

Artikel ini akan berkongsi pengalaman saya untuk membantu anda menjadikan peralihan anda mudah. Saya akan menunjukkan konsep -konsep yang biasa kepada kedua -duanya, dan konsep baru untuk belajar di Flutter, jadi anda tidak perlu bimbang tentang ekosistem mana yang hendak dipilih.

Konsep Biasa

Bahagian ini menyenaraikan persamaan antara pembangunan web front-end dan flutter, serta bagaimana kemahiran yang sudah anda masanya dapat membantu anda memulakan dengan lebih cepat.

1. Dalam Flutter, anda menggunakan widget untuk membina UI dan gaya dengan sifat.

Color kelas dalam

DART menyokong nilai warna "RGBA" dan "Hex", seperti CSS. Flutter juga menggunakan piksel sebagai unit ruang dan saiz, seperti CSS.

...

lajur flutter dan row widget bersamaan dengan paparan: flex dalam CSS. mainaxisalignment dan crossaxisalignment properties sesuai dengan Justify-Content dan Align-items styles. Untuk menyesuaikan gaya flex-grow , anda boleh membungkus widget kanak-kanak yang sepadan dengan diperluas atau fleksibel .

Untuk Kompleks UIS, Flutter menyediakan kelas customPaint, yang bersamaan dengan API canvas dalam pembangunan web. CustomPaint membolehkan anda menyesuaikan lukisan mana -mana UI. CustomPaint biasanya digunakan apabila anda perlu melaksanakan kesan yang tidak dapat dicapai oleh kombinasi UI atau widget yang sangat kompleks.

2. Semasa proses pembangunan, perbezaan platform perlu dipertimbangkan. Setiap platform melaksanakan ciri yang sama (kamera, kedudukan, pemberitahuan, dll) dengan cara yang berbeza.

Sebagai pemaju web, anda sudah biasa dengan reka bentuk responsif laman web dan menggunakan pertanyaan media untuk memproses kesan paparan laman web di bawah saiz skrin yang berbeza.

Dalam Flutter, Kelas MediaQuery menyediakan fungsi yang sama. Ia boleh mendapatkan maklumat peranti seperti Arah Peranti (Landskap atau Potret), Saiz Viewport, DevicePixelRatio , dan membantu anda menyesuaikan UI aplikasi mengikut saiz skrin yang berbeza.

3. Flutter juga mempunyai DevTools sendiri, termasuk Inspektor Widget, Debugger, Pemantauan Rangkaian dan fungsi lain.

Sokongan IDE juga serupa. Kod Visual Studio adalah IDE pembangunan web yang popular dengan banyak sambungan berkaitan web. Flutter juga menyokong VS Code, serta Android Studio. Kedua -duanya menyokong Flutter Devtools, menjadikan toolchain Flutter sangat sempurna.

Rangka kerja JavaScript yang paling depan datang dengan antara muka baris arahan (CLI), seperti: CLI sudut, membuat aplikasi React, Vue CLI, dll. Flutter juga mempunyai CLI proprietari untuk membina, mencipta, dan membangunkan projek -projek flutter, serta melaksanakan analisis dan ujian kod.

Konsep baru

Bahagian ini memperkenalkan konsep yang unik untuk Flutter, yang sama ada tidak wujud dalam pembangunan web atau dilaksanakan dengan cara yang berbeza.

1.

Tetapi dalam flutter, kumpulan widget tidak menatal secara lalai. Jika kumpulan widget boleh melimpah, anda perlu mengkonfigurasi secara aktif menatal.

Flutter menggunakan widget khas untuk mengkonfigurasi skrol, seperti: listView , singlechildscrollview , customscrollview , dll. Widget scrollable ini memberikan kawalan berbutir ke atas tingkah laku menatal. CustomScrollView membolehkan anda mengkonfigurasi mekanisme menatal kompleks dan profesional.

Dalam Flutter, menggunakan ScrollView tidak dapat dielakkan. Android dan iOS mempunyai scrollView dan uiscrollView masing -masing untuk mengendalikan tatal. Flutter memerlukan cara untuk menyatukan pengalaman rendering dan pemaju, jadi ia juga menggunakan scrollview .

Cobalah untuk mengubah minda anda, dan berhenti memikirkan aliran struktur dokumen, tetapi fikirkan aplikasi sebagai kanvas terbuka mekanisme lukisan asli peranti.

2. Flutter jauh lebih rumit. Anda perlu memasang SDK Flutter dan konfigurasi Flutter untuk peranti ujian. Jika anda ingin membangunkan aplikasi Flutter untuk Android, anda perlu menyediakan SDK Android dan mengkonfigurasi sekurang -kurangnya satu peranti Android (emulator atau peranti fizikal).

Sama berlaku untuk peranti iOS (iOS dan macOS). Selepas memasang Flutter pada Mac anda, anda juga perlu menyediakan Xcode. Sekurang -kurangnya satu simulator iOS atau iPhone juga diperlukan untuk menguji aplikasi Flutter. Tetapan desktop flutter juga agak rumit. Pada Windows, anda perlu menyediakan SDK Pembangunan Windows menggunakan Visual Studio (bukan kod VS). Pada Linux, anda perlu memasang lebih banyak pakej.

Flutter berjalan dalam penyemak imbas tanpa bergantung pada tetapan tambahan. Oleh itu, anda mungkin mengabaikan tetapan tambahan peranti sasaran. Tetapi dalam kebanyakan kes, anda menggunakan Flutter untuk pembangunan aplikasi mudah alih, jadi anda perlu menyediakan persekitaran Android atau iOS. Flutter menyediakan arahan flutter Doctor untuk melaporkan status tetapan persekitaran pembangunan dan membantu anda memahami tetapan yang perlu anda buat.

Tetapi ini tidak bermakna bahawa Flutter sedang berkembang dengan perlahan. Flutter mempunyai enjin yang kuat, dan flutter run perintah membolehkan memuat semula panas ke peranti ujian semasa pengekodan. Walau bagaimanapun, anda perlu menekan R untuk melakukan tambah nilai panas. Pelanjutan Kod VS Flutter membolehkan memuat semula panas automatik apabila fail berubah.

3. Apabila menggunakan laman web, anda mengaksesnya melalui nama domain, yang biasanya memerlukan pembaharuan tahunan, tetapi tidak diperlukan.

Banyak platform menawarkan perkhidmatan hosting percuma, seperti DigitalOcean menyediakan .onDigitalocean.com Subdomain. Anda boleh menggunakan nama domain ini untuk membina laman web atau laman web dokumen yang tidak memberi tumpuan kepada penjenamaan. Dalam pembangunan aplikasi mudah alih Flutter, anda biasanya perlu menggunakan aplikasi anda ke dua platform:

• App Store (peranti iOS)
• Google Play (Android Device)

Kedai App memerlukan mendaftar untuk program pemaju Apple dan membayar yuran langganan sebanyak $ 99 setahun. Google Play memerlukan yuran pendaftaran satu kali sebanyak $ 25.

Kedai aplikasi ini akan dikaji semula sebelum aplikasi berjalan dalam talian.

Di samping itu, pengguna tidak akan mendapat kemas kini aplikasi secara automatik, mereka mesti mengemas kini aplikasi yang dipasang secara manual. Ini berbeza dari web, di mana pengguna di web secara automatik dapat melihat versi terkini laman web.

Menguruskan aplikasi yang digunakan agak lebih susah payah daripada menguruskan tapak yang digunakan. Walau bagaimanapun, ini tidak akan menakutkan anda, selepas semua, berjuta -juta aplikasi telah digunakan di kedai -kedai ini.

Pemikiran tambahan tentang Flutter

Flutter adalah alat silang platform untuk membina desktop, mudah alih atau aplikasi web. Aplikasi Flutter mempunyai ketepatan peringkat piksel, menjadikan UI yang sama pada setiap platform, kerana setiap aplikasi Flutter mengandungi enjin berkilauan yang menjadikan kod UI yang berkilauan dan berkomunikasi dengan platform sasaran untuk mengendalikan peristiwa dan interaksi.

Flutter adalah cekap dan mempunyai prestasi yang baik kerana ia menggunakan DART untuk membina dan menggunakan ciri -ciri DART.

Dengan banyak kelebihan, Flutter sangat sesuai untuk banyak aplikasi. Aplikasi silang platform menjimatkan wang dan masa semasa pengeluaran dan penyelenggaraan. Walau bagaimanapun, Flutter (dan penyelesaian silang platform) mungkin bukan pilihan terbaik dalam beberapa kes.

Jika anda mahu pengguna menggunakan alat pemaju platform untuk berinteraksi dengan aplikasi anda, anda tidak boleh menggunakan Flutter. Alat pemaju platform di sini merujuk kepada alat khusus peranti, seperti pilihan pemaju Android, dan alat pemaju pelayar.

Jika anda mengharapkan sambungan penyemak imbas untuk berinteraksi dengan laman web anda, Flutter tidak boleh digunakan untuk pembangunan web.

Di samping itu, Flutter tidak boleh digunakan untuk laman web yang kaya dengan kandungan.

KESIMPULAN

Artikel ini mengkaji pemindahan kemahiran dari pembangunan web front-end untuk pembangunan flutter, serta konsep pembangunan aplikasi baru yang anda perlukan untuk belajar.

Flutter agak mudah bagi pemaju web untuk memulakan, kerana kedua -duanya melibatkan pelaksanaan UI. Cuba Flutter dan anda akan mendapati ia memberikan pengalaman pemaju yang baik. Cuba bina aplikasi mudah alih dengan flutter dan tunjukkan hasil anda!

Atas ialah kandungan terperinci Berkibar untuk pemaju web front-end. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!