Day01-เป้าหมายและแหล่งข้อมูลในการเรียนรู้Flutter ด้วยตนเอง
สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days)
ref=’https://www.freepik.com/vectors/menu' Menu vector created by freepik — www.freepik.com
Day01
ที่มาและเป้าหมาย
อยากเรียนเขียน app ด้วยFlutter ไปทำไม ก็ต้องตอบว่าเพื่อเอามาสร้างไอเดียที่มีให้เป็นจริงหรือใกล้เคียงความจริงมากที่สุด หรือในภาษาของการทำ Start up เค้าเรียกว่าการทำ MVP หรือ Minimal Viable Product และเนื่องจากไอเดียที่มีส่วนใหญ่เป็นเรื่องของธุรกิจบนดิจิทัลเป็นส่วนใหญ่ ก็เป็นการหลีกเลี่ยงไม่ได้ที่จะต้องมารู้จักกับการพัฒนาPrototype ด้วยตัวเอง ข้อมูลการเรียนรู้เกี่ยวกับการพัฒนา app ด้วย Flutter ส่วนมากก็จะเป็นการสอนเรื่องหลักการเขียนโค๊ดแบบทำให้ดูเสียเป็นส่วนใหญ่ น้อยมากที่จะสอนให้เข้าใจภาพใหญ่หรือหลักการวิธีคิด
เริ่มต้นปีใหม่ 2021 นี้ก็เลยตั้งเป็น New Year Resolution ที่จะ Challenge ตัวเองขึ้นมาที่จะเรียนเขียน app ด้วยตัวเองใน 25 วัน
ดังนั้นหลังจากที่ได้หาข้อมูลเกี่ยวกับการเรียน Flutter ด้วยตัวเองมามากพอสมควร ทำให้พบว่า มาชอบเรื่องของการสร้าง UI โดยการเขียนโค๊ดขึ้นมามากกว่า เพราะมันสามารถต่อยอดได้จากการออกแบบ UI จากโปรแกรม Adobe XD ดังนั้นเมื่อทำใน Flutter จะทำให้สามารถรันตัว UI ได้จริงจากบนโทรศัพท์เลย ดังนั้นคีย์เวิร์ดหรือเป้าหมายในการเรียน Flutter จึงมุ่งเน้นไปที่การเป็น Flutter UI app design development เพราะมันจะตอบโจทย์ในเรื่องของการคิดหรือมีไอเดียใหม่อยู่เสมอๆ และถ้าสามารถแปลงจากไอเดียเหล่านั้นขึ้นมาเป็น MVP หรือ Prototype ต้นแบบได้
แหล่งข้อมูลที่น่าสนใจ
ว่าไปแล้ว document ที่ทาง Google ทำไว้ให้สำหรับการเรียน Flutter นั้นก็น่าสนใจไม่น้อย รวมถึงการมี Codelabs ที่สอนแบบเป็นขั้นตอนให้ทดลองเขียนตาม ซึ่งอันนี้ดีมาก การเรียนอะไรก็แล้วแต่ควรจะทำอย่าง Codelabs
https://flutter.dev/docs/development/ui/widgets-intro
https://flutter.dev/docs/codelabs
แหล่งข้อมูลอีกอันคือตัวอย่างของ Solution ต่างๆในเรื่องของการทำ UI และการแก้ปัญหา ที่พร้อมให้เราเอามาดัดแปลงหรือเอามาใช้ในการเขียน app ของเรา
สิ่งที่ชื่นชอบอีกอย่างนึงคือการทำ Onboarding design concept ที่ทำให้เราได้เห็นไอเดียของ app ที่เราจะพัฒนาได้อย่างรวดเร็ว ดีกว่า Adobe XD ตรงที่มันสามารถสัมผัสและโต้ตอบได้จริงๆ และมีความรู้สึกว่าพอลองเขียนโปรแกรมด้วย Flutter ไปซักพัก การเขียน Onboarding app นี่ถือว่าเป็นพื้นฐานที่สุดในการเข้าใจถึงการเริ่มต้นออกแบบ app เลย
https://uxdesign.cc/flutter-design-challenge-onboarding-concept-1f5774d55646
และแหล่งข้อมูลสุดท้ายที่สำคัญคือวีดีโอจาก youtube ทั้งหลายที่มีอยู่มากมายหากเพียงแต่เราต้องมีคีย์เวิร์ดที่เราสนใจใส่เข้าไปเพื่อหาวิธีหรือตัวอย่างของการเขียนโปรแกรมด้วย Flutter
ตอนที่ได้ที่มาและเป้าหมายของการเรียน Flutter ก็ได้ไปเจอบทความใน Medium เขียนเกี่ยวกับ Flutter Design Patterns Series เลยตั้งใจว่าจะศึกษาและเรียนรู้จากบทความชุดนี้ทั้งหมด แต่คิดว่าน่าจะยากอยู่พอสมควร อาจจะขอเก็บไว้เรียนตอนท้ายๆถ้ามีเวลาเหลือ
ดังนั้นวันแรกของการเรียน Flutter นี้จึงเป็นการรวบรวมข้อมูลและแหล่งความรู้ต่างๆเพื่อการเริ่มต้น โชคดีตรงที่ได้รู้เป้าหมายที่ชัดเจนของการเรียนว่าเพื่อเอาไปทำอะไรก็ทำให้ขอบเขตของการเรียนรู้ลดลงและมีความเป็นไปได้มากที่สุด
เริ่มจากตรงไหนก่อนดี
พอมาลองพิจารณาแหล่งข้อมูลเริ่มต้นที่หามาทั้งหมดแล้วคิดว่าก็คงจะเริ่มทำความเข้าใจเกี่ยวกับเรื่อง Widgets ก่อน แล้วมาทำ Codelabs เรื่อง Basic Layout Design
จากนั้นก็จะมาดูในส่วน Good for beginners ที่มีทั้งหมด4หัวข้อ
Good for beginners
If you’re new to Flutter, we recommend starting with one of these codelabs:
- Write your first Flutter app, part 1
- Create a simple mobile app that generates proposed names for a startup company. In part one, you’ll use a package that returns pairs of words at random and inserts them into an infinite scrolling list. You can also find this codelab on flutter.dev.
- Write your first Flutter app, part 2
- Create a simple mobile app that generates proposed names for a startup company. In part two, you’ll extend the example from part 1 to allow the user to select favorite word pairs, and add a second “Saved Favorites” page where users can view the selected names. Finally, you’ll change the app’s theme color.
- Write your first Flutter app on the web
- Implement a simple web app in DartPad (no downloads required!) that displays a sign-in screen containing three text fields. As the user fills out the fields, a progress bar animates along the top of the sign-in area. This codelab is written specifically for the web, but if you have downloaded and configured Android and iOS tooling, the completed app works on Android and iOS devices, as well.
- Building beautiful UIs with Flutter
- A deeper “first dive” than “Write your first Flutter app.” Create a chat app that includes a simple animation, and customizes the UI for iOS and Android. As part of this codelab, learn how to use keyboard shortcuts in Android Studio.
จากนั้นค่อยมาเริ่มวีดีโอใน youtube ที่สอน Flutter ใน 25 วัน แต่อาจจะต้องรวบบางหัวข้อเพื่อให้อยู่ในกำหนดเวลา
แต่ไหนๆแล้ววันแรกก็ขอลองเขียนเล่นๆดูหน่อยว่าโค๊ดที่น้อยที่สุดในการสร้างคำว่า Hello World บนหน้าจอต้องเขียนอะไรบ้าง ตามภาพ
Support me at:
Ko-fi :https://ko-fi.com/bitesizestory
Buy me a coffee :https://www.buymeacoffee.com/bitesizestory
ติดตามบทความ สอนตัวเองเขียน app ด้วย Flutter ใน25วัน (Flutter Self-Learning Challenge in 25 Days) ทั้งหมดได้จากลิงค์ด้านล่าง
Day25-สร้าง app สำหรับอัพเดทยอดผู้ติดเชื้อโควิด19 ทั่วโลก
Day24-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่3
Day23-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่2
Day22-สร้าง app สำหรับอ่านข่าวด้วย NewsAPI ตอนที่1
Day21-ใช้ WebView ในการแสดงผลไฟล์ html5 ด้วย webview_flutter_plus package
Day20-ใช้ GridView และการเปลี่ยน interface แนวตั้งและแนวนอน
Day19-ทำ Flip Card ด้วย flip_card package
Day18-สร้าง ListView จากไฟล์ json
Day17-ทำ Splash Screen ง่ายๆด้วย splashscreen package
Day16-สร้าง Bottom Navigation Bar
Day15-สร้าง Animated Container
Day14-สร้าง Page Navigation Animation ง่ายๆ
Day13-สร้างหน้าจอ slideshow ด้วย carousel_slider package
Day12-สร้างBar Graph ด้วย charts_flutter package
Day11-การทำ Animated Bar Graph จากค่าสุ่มอย่างง่ายๆ
Day10-การทำ Bar Graph จากค่าสุ่มอย่างง่ายๆ
Day09-สร้าง Animationให้ Bar Graph
Day08-ทำ OnBoarding Screen ด้วย Package introduction_screen
Day07-สร้างInteractionง่ายๆบน Page Layout
Day04-สร้าง Interaction ให้กับไอคอนและเก็บค่าสถานะ
