Flutter гэж юу вэ?
2B | +1% better 2day | dev.002
2019 оны байдлаар дэлхий дээр 3.3 тэрбум мобайл төхөөрөмж (mobile device) байгаагаас 70% нь Android, 28% нь iOS үйлдлийн системтэй байна. Харин төхөөрөмжөө хэрэглэж буй нийт хугацааны 90% нь аппликэйшн үлдсэн хувийг вэб хөтөч эзэлдэг.
Аймар тоо байна уу?
Одоо тэгээд бүх юм ийм ил тод байхад гар утасны хувилбар гаргахгүй, эсвэл зөвхөн аль нэг platform-д нь л зориулж гаргана гэж зөрүүдлэхгүй юм байгаа биздээ. 😁
Өнөөдөр ярих гэж байгаа сэдэв Flutter маань iOS болон Android хоёуланлуу нь код гаргаж өгдөг янзтай эд байгаа. Би анх Java хэл дээр Android аппликэйшн хөгжүүлж байсан, дараа нь Ionic ашиглан hybrid аппликэйшн хэсэг хийж үзсэн. Тэгээд дараачийн алхам нь React Native уу эсвэл Flutter уу гэж нилээн эргэлзээд байж байгаад азаар ч гэх үү, хүчээр ч гэх үү Flutter-луу хальтраад орчихсон юм.
За тэр ч яахав. Гол хэсэгрүүгээ оръё. Өнөөдөр Flutter гэж юу болох, зарим чухал ойлголтууд, жишээ энгийн апп хийж үзүүлнэ ээ.
Flutter гэж юу вэ?
2017 оны 5-р сард Google компаниас гаргасан native application хөгжүүлэх framework юм. Өнгө үзэмж сайтай, натив аппликэйшнийг НЭГ кодноос гаргаж авах боломж олгодгоороо давуу талтай. Дан ганц мобайл гэлтгүй вэб болон desktop хөгжүүлэлтийг бүгдийг нь хийж болно.
Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile, web, and desktop from a single codebase.
Ашигладаг хэл нь Dart (2013) бөгөөд Object Oriented language гэгддэг. Бичиглэлийн хувьд Swift, C#, Java, Javascript-тай төстэй.
Орчин бэлдэх
Өнөөдөр зүгээр унших биш гар дүрцгээнэ шүү залуусаа. Тиймээс эхлээд орчноо бэлдэнэ ээ. Шинэ технологиуд сайн documentation-тэй байх нь анхлан суралцагчдад их хэрэгтэй байдаг. Гэхдээ түүнээсээ илүү хийх үйлдэл нь амархан байвал бүүр nice.
Миний хувьд Flutter-г Windows 10 болон Ubuntu 18 хоёр дээр суулгаж ашиглахад чанарын ялгаагүй амархааан байсан. ✅
git clone https://github.com/flutter/flutter.git -b stable
export PATH="$PATH:`pwd`/flutter/bin"
flutter doctor --android-licenses
Би өөрөө Samsung барьдаг болохоор Android Studio суулгаад байнга хэрэглэдэг VS Code дээрээ Flutter plugin-г бас оруулж ирсэн. Ингээд хөгжүүлэлт эхлэхэд бэлэн. ✅
Чухал ойлголтууд
0-оос нь эхэлж байгаа болохоор Google ахаасаа хэдэн үнэгүй хичээл, Medium дээрх нийтлэл нтр олж үзээд дараах 2 хичээлийг эхний ээлжид үзчихэд Flutter-н анхан шатны ойлголттой болчхоор юм байна гэж дүгнэсэн байгаа.
За тэгээд энэ 2 дотроос голж шилээд хэдэн юмыг нь энд хуваалцъя.
- Widget (Stateless & Stateful)
- Hot Reload
- Packages
Everything within a Flutter application is a widget.
- Widget (def) : a relatively simple and easy-to-use software
Flutter бол тэр чигээрээ widget. Аппликэйшний эхлэлийг цэгээс авахуулаад, нэвтрэх товч, текст оруулах хэсэг хүртэл бүгдээрээ widget.
Нэг widget нь дотроо нөгөөхөө агуулна, тэр нь дотроо дахиад нэгийг, магадгүй зарим нь хэд хэдэн widget агуулдаг. Widget нь дотроо бас 2 янз.
- Stateless widget : төлөв нь өөрчлөгддөггүй
- Stateful widget : төлөв нь өөрчлөгдөх боломжтой
Stateless widget-н жишээ жагсаалтын нэг элемент болох (📏 Length) -н өөрийнх нь бүтцийг задлаад харах юм бол.
[Container]
(Row)
-{icon - with padding} : {text - align center}
Аа харин Stateful widget-н хувьд дараах байдлаар өөрчлөлт явагддаг. Анх createState-г дуудаж хувьсагчаа үүсгээд дараа нь initState-р анхны утгыг нь олгоно. Тэгснийхээ дараа build хийж widget маань хэрэглэхэд бэлэн UI нь гарч ирнэ.
0. UI build хийгдэнэ (State initialized & Widget built)
1. Хэрэглэгч ямар нэг үйлдэл хийнэ (User input)
2. Төлөв өөрчлөгдөнө (State changes)
3. Төлөвийг шинэчилнэ (Update state using setState())
4. Re-build UI хийгдэнэ (Reflect changes - UI build)
Flutter includes a modern reactive framework and a 2D rendering engine.
- Hot reload (def) : quickly reload the code on a running app
Код дотор ганцхан мөр өөрчилчхөөд аппликэйшнээ бүтнээр нь build хийнэ гэдэг ч зовлон шүү. Ялангуяа мобайл апп дээр бол бүхэл бүтэн apk гаргах, суулгах гэдэг бүүр ч том асуудал болно. Ionic-н Live Reload, React Native-н Hot Reloading, Node.js-н nodemon шиг л гэсэн үг.
Packages are a library of functions that can be shared easily.
- Package (def) : an group of objects packed in a box.
Ямар нэг функц нэмэхээсээ өмнө түүнийг чинь хийдэг бэлэн package байна уу шалгах хэрэгтэй. Учир нь чи бүх юмыг өөрөө 0-с нь хийх албагүй. Flutter package-н хувьд нэг том давуу тал байдаг нь хичнээн том package байсан ч хэрэглэгчид зориулсан хувилбар (release mode) гаргах үед зөвхөн ашиглагдсан код л compile хийгддэг.
Өөр тэгээд Platforms, Themes, Colors, Assets (Image & Icon), Navigation гэх мэт зөндөө л зүйлс байна гэхдээ одоохондоо дээрх 3-н ойлголтыг мэдчихсэн байхад болчих байх аа.
Хөгжүүлэлт
За тэгээд ерөнхий ойлголтоо авчихсан бол ганц сайхан апп хийчих үү? Жоохон царай муутай ч гэсэн гол үүргээ гүйцэтгэдэг л байвал яахавдээ тэ?
Үлгэр уншиж өгдөг апп
1. Features / Боломжууд
- Апп дотроо 3ш үлгэр агуулсан (assets)
- Үлгэрүүдийн жагсаалт харуулах (list)
- Жагсаалтаас 1 үлгэр сонгох (select → route navigation)
- Үлгэрийг тоглуулах & зогсоох (button & state change)
2. Загвар
Апп маань ердөө 2-хон хуудастай бөгөөд нэг нь үлгэрүүдийн жагсаалт харуулах, нөгөөх нь сонгосон үлгэрийг тоглуулах/зогсоох үүрэгтэй байна.
3. Source code
Аппликэйшний pubspec.yaml файл. Ер нь бол ямар ямар package ашиглахаа тохируулж байгаа гэсэн үг. Node.js дээр бол package.json-тай адилхан.
main.dart : Аппликэйшний маань эхлэлийн цэг нь энэ. Апп асах үед MyHomePage-г дуудаж харуулна.
home.dart : ListView Үлгэрүүдийн жагсаалтыг харуулах бөгөөд аль нэг үлгэрийг сонгон дарах үед шинэ хуудасруу шилжинэ (Navigator.push). Мөн Story.dart файлаас үлгэрийн жагсаалтыг авна. (initializeStories)
Story.dart : Assets дотор 3-н үлгэрийн mp3 файл хэлбэрээр оруулах бөгөөд нэр болон замыг нь хадгалж өгнө.
play.dart : Text + Play & Stop товч. Сонгосон үлгэрийг тоглуулах хуудас. — assets_audio_player : 1.6.0+4 package-г ашиглан үлгэрээ тоглуулна.
Ингээд л болоо шүүдээ. Бэлэн болсон апп-аа доорх зургаас хараарай. Царай муутай ч гэсэн ажлаа хийдэг шүү. Хамгийн гол ажлаа л хийж байвал бусад нь тэгээд аяандаа болно доо.
Source code : GitHub repository
