flutter_base_project

Proyek dasar flutter

• Ini adalah templat proyek yang mencakup beberapa perpustakaan untuk membantu dalam proses pengembangan proyek flutter menggunakan arsitektur MVVM. Template mencakup berbagai lapisan seperti dasar, konstanta, ekstensi, init, dan basis model view. Ini juga termasuk perpustakaan untuk manajemen negara, lokalisasi, cache, jaringan, dan serialisasi, antara lain. Templat memiliki kode yang telah ditentukan untuk membangun tampilan dan model tampilan, memudahkan pengembang untuk fokus pada desain halaman dan logika bisnis.

Langkah Lembaga

• 1-) Buka file "Flutter_Base_Project". (Tidak dengan vscode, studio android, dll.)
• 2-) Salin file 'lib', 'aset', dan 'skrip' dan tempel ke dalam proyek Anda sendiri.
• 3-) mengintegrasikan pustaka dan aset ke dalam folder "pubspec.yaml".
• 4-) Ganti impor dalam penutupan dengan nama proyek Anda sendiri dan perbaiki impor.

Perpustakaan Proyek Pangkalan Berbakar

• Manajemen negara

  • mobx => https://pub.dev/packages/mobx
  • flutter_mobx => https://pub.dev/packages/flutter_mobx
  • penyedia => https://pub.dev/packages/provider
  • mobx_codegen => https://pub.dev/packages/mobx_codegen
  • build_runner => https://pub.dev/packages/build_runner

• Lokalisasi

  • easy_localization => https://pub.dev/packages/easy_localization

• Cache

  • shared_preferences => https://pub.dev/packages/shared_preferences

• Jaringan

  • dio => https://pub.dev/packages/dio

• Serializable

  • json_serializable => https://pub.dev/packages/json_serializable

Lapisan proyek

• Basis

  • Dapat dipindahkan dari proyek ke proyek. Struktur yang dikandungnya dapat digunakan dengan lancar di setiap proyek.

  • Dalam sebuah proyek berdasarkan arsitektur MVVM, kami membuat struktur dasar lapisan model-view-viewModel dari sini.

• Konstanta

  • Folder di mana nilai yang tidak akan berubah di seluruh aplikasi dan dapat digunakan dari awal hingga akhir disimpan.

  • Termasuk nama navigasi yang akan digunakan oleh jalur aplikasi, nilai enum, konstanta gambar, jalur navigasi.

• Ekstensi

  • Ekstensi yang dapat digunakan di setiap bagian proyek dalam hal mentalitas kode bersih sangat penting.

  • context_extension => Tempat di mana nilai -nilai seperti lebar, tinggi, bantalan, dan durasi disimpan dalam aplikasi.

• Init

  • Tempat di mana kontrol penting seperti cache, lang, navigasi, jaringan, pemberitahuan, dan tema dikelola untuk aplikasi seluler.

  • Cache => Berisi Locale Manager untuk mengelola cache aplikasi di bagian ini.

  • Lang => berisi manajer bahasa untuk pelokalan. Untuk lokalisasi, bahasa yang akan dilokalkan harus dimasukkan ke dalam folder seperti en-us.json, tr-tr.json di bawah aset/lang. Setelah setiap perubahan yang dibuat di folder ini, perintah "FLutter Pub Run Easy_localization: menghasilkan -o lib/core/init/lang -f tombol -o locale_keys.g.dart -s aset/lang" harus ditulis di terminal.

  • Navigasi => Tempat di mana layanan navigasi dan rute navigasi disediakan.

  • Network => Digunakan untuk Mengelola Operasi Mengikis Web dari Situs Web Menggunakan DIO

  • Notifier => Mengelola perubahan tema antara tema gelap dan terang dengan notifier tema.

  • tema => digunakan untuk mengelola tema aplikasi.

Basis View-ViewModel

• Setelah menyelesaikan proses pengembangan arsitektur yang ditentukan di bagian Project Layers, kita dapat mulai mengisi tampilan dan viewmodels aplikasi secara umum.

• Di bagian ini, kita melihat bagaimana kita dapat menggunakan tampilan dan viewmodels aplikasi kita dengan cara yang terintegrasi dengan kode yang kita tulis di lapisan dasar.

  ViewModel

  • Ketika kita mulai membuat bagian ViewModel, pertama -tama kita mulai menghasilkan kode ViewModel menggunakan cuplikan Mobx. ( Perhatikan bahwa build_runner_watch aktif selama proses ini. )

  • Setelah menyelesaikan proses ini, MOBX_CODEGEN mulai menulis kode yang dihasilkan ke folder viewmodel.g.dart atas nama kami.

  • Saat mengembangkan ViewModel kami, kami menggunakan base_view_model yang kami buat di bagian dasar. Untuk proses ini, kami menambahkan kelas dengan Store, BaseviewModel struktur ke kelas untuk mendapatkannya dari kelas BaseviewModel.

  • Setelah menambahkan struktur ini, kami mengintegrasikan fungsi setContext () dan init () kami dari base_view_model kami. "

  

  Melihat

  • Saat mulai mengisi bagian tampilan, pertama -tama kami menggunakan view_base yang kami kembangkan di bagian dasar.

  • Untuk menggambar halaman kami, kami menambahkan pemandangan dasar kami ke bagian pengembalian, tetapi pandangan dasar ini harus berasal dari viewmodel (misalnya: baseeview ())

  • Setelah mengintegrasikan Baseview, kami mulai mengisi kode yang kami tulis di bagian Base_View di sini.

  • viewmodel => kami memberikan podium viewmodel yang kami gambar seperti yang dijelaskan di atas.

  • onModelready => Kami mengontrol interaksi konteks dari model yang kami berikan.

  • OnpageBuilder => Ini adalah bagian di mana kita mulai menggambar halaman kita.

  

  Publikasikan ke Android

  Kredit

  • Terima kasih kepada Hardwareandro YouTube Channel => https://www.youtube.com/@hardwareandro
  • Terima kasih kepada Veli Bacık yang menyediakan pelatihan ini karena berkontribusi pada pembelajaran saya tentang topik -topik ini. => https://github.com/vb10