ฉันเริ่มเป็นนักพัฒนาเว็บส่วนหน้าแล้วกลายเป็น กระพือ นักพัฒนา ฉันคิดว่ามีแนวคิดบางอย่างที่ช่วยให้ฉันปรับใช้ Flutter ได้ง่ายขึ้น นอกจากนี้ยังมีแนวความคิดใหม่ๆ ที่แตกต่างออกไป
ในบทความนี้ ฉันต้องการแบ่งปันประสบการณ์ของฉันและสร้างแรงบันดาลใจให้กับทุกคนที่รู้สึกว่าเป็นอัมพาตด้วยการเลือกระบบนิเวศหนึ่งมากกว่าระบบนิเวศอื่น โดยแสดงให้เห็นว่าแนวคิดถ่ายทอดผ่านได้อย่างไร และสามารถเรียนรู้แนวคิดใหม่ ๆ ได้
แนวคิดที่ถ่ายทอดผ่าน
ส่วนนี้แสดงสถานที่ที่การพัฒนาเว็บส่วนหน้าและ Flutter คล้ายคลึงกัน มันอธิบายทักษะที่คุณมีอยู่แล้วซึ่งจะเป็นประโยชน์สำหรับคุณหากคุณเริ่ม Flutter
1. การใช้อินเทอร์เฟซผู้ใช้ (UI)
ในการใช้งาน UI ที่กำหนดในเว็บส่วนหน้า คุณต้องเขียนองค์ประกอบ HTML และจัดรูปแบบด้วย CSS ในการใช้งาน UI ใน Flutter คุณต้องเขียน วิดเจ็ต และจัดสไตล์ด้วย คุณสมบัติ.
เช่นเดียวกับ CSS, the Color คลาสใน Dart ใช้ได้กับ "rgba" และ "hex" เช่นเดียวกับ CSS Flutter ใช้พิกเซลสำหรับหน่วยพื้นที่และขนาด
ใน Flutter เรามีคลาส Dart และ enum สำหรับคุณสมบัติ CSS เกือบทั้งหมดและค่าของมัน ตัวอย่างเช่น:
กระพือยังมี Column และ Row วิดเจ็ต สิ่งเหล่านี้เทียบเท่ากับ Flutter สำหรับ display: flex ใน CSS การกำหนดค่า justify-content และ align-items สไตล์ที่คุณใช้ MainAxisAlignment และ CrossAxisAlignment คุณสมบัติ. เพื่อปรับค่า flex-grow สไตล์ ห่อวิดเจ็ตลูกที่ได้รับผลกระทบของ Column/Rowใน Expanded or Flexible.
สำหรับ UI ขั้นสูง Flutter มี CustomPaint คลาส – มันคือ Flutter สิ่งที่ Canvas API คือการพัฒนาเว็บ CustomPaint ให้จิตรกรวาด UI ตามที่คุณต้องการ ปกติคุณจะใช้ CustomPaint เมื่อคุณต้องการบางสิ่งที่ซับซ้อนจริงๆ อีกด้วย, CustomPaint เป็นวิธีที่ใช้ได้เมื่อวิดเจ็ตต่างๆ ใช้งานร่วมกันไม่ได้
2. การพัฒนาเพื่อหลายสิ่ง ความละเอียดหน้าจอ
เว็บไซต์ทำงานบนเบราว์เซอร์และแอปมือถือทำงานบนอุปกรณ์ ดังนั้น ในขณะที่กำลังพัฒนาสำหรับแพลตฟอร์มใดแพลตฟอร์มหนึ่ง คุณต้องคำนึงถึงแพลตฟอร์มนั้นด้วย แต่ละแพลตฟอร์มใช้คุณสมบัติเดียวกัน (กล้อง ตำแหน่ง การแจ้งเตือน ฯลฯ) ในรูปแบบต่างๆ
ในฐานะนักพัฒนาเว็บ คุณนึกถึงการตอบสนองของเว็บไซต์ของคุณ คุณใช้การสืบค้นข้อมูลสื่อเพื่อจัดการกับลักษณะเว็บไซต์ของคุณในหน้าจอที่เล็กลงและกว้างขึ้น
มาจากการพัฒนาเว็บบนมือถือไปจนถึง Flutter คุณมี MediaQuery ชั้นผู้ช่วย ดิ MediaQuery คลาสให้อุปกรณ์ปัจจุบันแก่คุณ orientation (แนวนอนหรือแนวตั้ง) นอกจากนี้ยังให้วิวพอร์ตปัจจุบันแก่คุณ sizeที่ devicePixelRatioท่ามกลางข้อมูลอุปกรณ์อื่นๆ เมื่อรวมกันแล้ว ค่าเหล่านี้จะให้ข้อมูลเชิงลึกเกี่ยวกับการกำหนดค่าอุปกรณ์เคลื่อนที่ คุณสามารถใช้มันเพื่อเปลี่ยนรูปลักษณ์ของแอพมือถือของคุณในขนาดหน้าจอต่างๆ
3. การทำงานกับดีบักเกอร์ บรรณาธิการ และเครื่องมือบรรทัดคำสั่ง
เบราว์เซอร์เดสก์ท็อปมีเครื่องมือสำหรับนักพัฒนา เครื่องมือเหล่านี้รวมถึงตัวตรวจสอบ คอนโซล การตรวจสอบเครือข่าย ฯลฯ เครื่องมือเหล่านี้ช่วยปรับปรุงกระบวนการพัฒนาเว็บ Flutter ก็มีของตัวเอง เครื่องมือสำหรับนักพัฒนา. มันมีตัวตรวจสอบวิดเจ็ต ตัวดีบัก ตัวตรวจสอบเครือข่าย ท่ามกลางคุณสมบัติอื่น ๆ
การสนับสนุน IDE ก็คล้ายกัน Visual Studio Code เป็นหนึ่งใน IDE ที่ได้รับความนิยมมากที่สุดสำหรับการพัฒนาเว็บ มีส่วนขยายที่เกี่ยวข้องกับเว็บมากมายสำหรับ VS Code Flutter ก็รองรับ VS Code เช่นกัน ดังนั้นขณะเปลี่ยน คุณไม่จำเป็นต้องเปลี่ยน IDE มีส่วนขยาย Dart และ Flutter สำหรับ VS Code Flutter ยังทำงานได้ดีกับ Android Studio ทั้ง Android Studio และ VS Code รองรับ Flutter DevTools การรวม IDE เหล่านี้ทำให้ Flutter tooling สมบูรณ์
เฟรมเวิร์ก JavaScript ส่วนหน้าส่วนใหญ่มาพร้อมกับ อินเทอร์เฟซบรรทัดคำสั่ง (CLI). ตัวอย่างเช่น: CLI เชิงมุม, สร้างแอป React, วิวคลิ, ฯลฯ Flutter ยังมาพร้อมกับพิเศษ CLI. Flutter CLI อนุญาตให้คุณสร้าง สร้าง และพัฒนาโครงการเชิงมุม มีคำสั่งสำหรับวิเคราะห์และทดสอบโครงการ Flutter
แนวคิดที่แปลกใหม่
ส่วนนี้พูดถึงแนวคิดเฉพาะของ Flutter ที่ง่ายกว่าหรือไม่มีเลยในการพัฒนาเว็บ มันอธิบายแนวคิดที่คุณควรจำไว้เมื่อคุณเข้าสู่ Flutter
วิธีจัดการกับการเลื่อน
เมื่อพัฒนาสำหรับเว็บ เว็บเบราว์เซอร์จะจัดการพฤติกรรมการเลื่อนเริ่มต้น อย่างไรก็ตาม คุณมีอิสระในการปรับแต่งการเลื่อนด้วย CSS (โดยใช้ overflow).
นี่ไม่ใช่กรณีใน Flutter กลุ่มวิดเจ็ตไม่เลื่อนตามค่าเริ่มต้น เมื่อคุณรู้สึกว่ากลุ่มวิดเจ็ตอาจล้น คุณต้องกำหนดค่าการเลื่อนในเชิงรุก
ใน Flutter คุณกำหนดค่าการเลื่อนโดยใช้วิดเจ็ตพิเศษที่อนุญาตให้เลื่อนได้ ตัวอย่างเช่น: ListView, SingleChildScrollView, CustomScrollViewฯลฯ วิดเจ็ตแบบเลื่อนได้เหล่านี้ช่วยให้คุณควบคุมการเลื่อนได้อย่างดีเยี่ยม กับ CustomScrollViewคุณสามารถกำหนดค่ากลไกการเลื่อนแบบผู้เชี่ยวชาญและซับซ้อนภายในแอปพลิเคชันได้
ทางด้าน Flutter ใช้ ScrollViews เป็นสิ่งที่หลีกเลี่ยงไม่ได้ Android และ iOS มี ScrollView และ UIScrollView เพื่อจัดการกับการเลื่อน Flutter ต้องการวิธีการรวมประสบการณ์การเรนเดอร์และนักพัฒนาโดยใช้ ScrollViews, ด้วย.
อาจช่วยหยุดคิดเกี่ยวกับการไหลของโครงสร้างเอกสาร และให้พิจารณาแอปพลิเคชันนี้เป็นพื้นที่เปิดสำหรับกลไกการวาดภาพดั้งเดิมของอุปกรณ์แทน
2. การตั้งค่าสภาพแวดล้อมการพัฒนาของคุณ
ในการสร้างเว็บไซต์ที่ง่ายที่สุด คุณสามารถสร้างไฟล์ด้วย a .html ส่วนขยายและเปิดในเบราว์เซอร์ Flutter ไม่ใช่เรื่องง่าย หากต้องการใช้ Flutter คุณต้องติดตั้ง Flutter SDK และ ได้กำหนดค่า Flutter สำหรับอุปกรณ์ทดสอบ ดังนั้นหากคุณต้องการโค้ด Flutter สำหรับ Android คุณต้อง ตั้งค่า Android SDK. คุณจะต้องกำหนดค่าอุปกรณ์ Android อย่างน้อยหนึ่งเครื่อง (Android Emulator หรืออุปกรณ์จริง)
นี่เป็นกรณีเดียวกันกับอุปกรณ์ Apple (iOS และ macOS) หลังจากติดตั้ง Flutter บน Mac คุณยังต้องตั้งค่า Xcode ก่อนดำเนินการต่อ คุณจะต้องมีเครื่องจำลอง iOS หรือ iPhone เป็นอย่างน้อยเพื่อทดสอบ Flutter บน iOS Flutter สำหรับเดสก์ท็อปก็เป็นการตั้งค่าที่สำคัญเช่นกัน บน Windows คุณต้องตั้งค่า Windows Development SDK ด้วย Visual Studio (ไม่ใช่ VS Code) บน Linux คุณจะต้องติดตั้งแพ็คเกจเพิ่มเติม
หากไม่มีการตั้งค่าเพิ่มเติม Flutter จะทำงานบนเบราว์เซอร์ ด้วยเหตุนี้ คุณจึงมองข้ามการตั้งค่าเพิ่มเติมสำหรับอุปกรณ์เป้าหมายได้ ในกรณีส่วนใหญ่ คุณจะใช้ Flutter สำหรับการพัฒนาแอพมือถือ ดังนั้น คุณต้องการตั้งค่าอย่างน้อย Android หรือ iOS Flutter มาพร้อมกับ flutter doctor สั่งการ. คำสั่งนี้รายงานสถานะของการตั้งค่าการพัฒนาของคุณ ด้วยวิธีนี้ คุณจะรู้ว่าต้องทำงานอะไร ในการตั้งค่า ถ้าจำเป็น
นี่ไม่ได้หมายความว่าการพัฒนาใน Flutter นั้นช้า Flutter มาพร้อมกับเครื่องยนต์ทรงพลัง ดิ flutter run คำสั่งอนุญาตให้โหลดซ้ำไปยังอุปกรณ์ทดสอบขณะเข้ารหัส แต่ต้องกด R เพื่อโหลดซ้ำร้อนจริง ๆ นี่ไม่ใช่ปัญหา ส่วนขยาย VS Code ของ Flutter อนุญาตให้โหลดซ้ำอัตโนมัติเมื่อมีการเปลี่ยนแปลงไฟล์
3. บรรจุภัณฑ์และการใช้งาน
การปรับใช้เว็บไซต์นั้นถูกกว่าและง่ายกว่าเมื่อเปรียบเทียบกับการปรับใช้แอปพลิเคชันมือถือ เมื่อคุณปรับใช้เว็บไซต์ คุณจะเข้าถึงได้ผ่านชื่อโดเมน ชื่อโดเมนเหล่านี้มักจะต่ออายุทุกปี อย่างไรก็ตาม เป็นตัวเลือก
วันนี้ หลายแพลตฟอร์มเสนอโฮสติ้งฟรี
ตัวอย่างเช่น: DigitalOcean ให้โดเมนย่อยฟรีแก่คุณบน .ondigitalocean.com.
คุณสามารถใช้โดเมนเหล่านี้ได้หากคุณกำลังสร้างเว็บไซต์เอกสาร คุณสามารถใช้ได้เมื่อคุณไม่กังวลเกี่ยวกับการสร้างแบรนด์
ในโลกของ Flutter ที่มีแอปพลิเคชันมือถือ โดยปกติแล้ว คุณจะปรับใช้แอปของคุณในสองแห่ง
คุณต้องลงทะเบียนบัญชีผู้พัฒนาในแต่ละแพลตฟอร์มเหล่านี้ การลงทะเบียนบัญชีนักพัฒนาซอฟต์แวร์ต้องเสียค่าธรรมเนียมหรือการสมัครและการยืนยันตัวตน
สำหรับ App Store คุณต้องลงทะเบียนสำหรับโปรแกรม Apple Developer ต้องบำรุง สมัครสมาชิกรายปี $99. สำหรับ Google Play คุณต้องสร้าง จ่ายครั้งเดียว $25 สำหรับบัญชี
ร้านค้าเหล่านี้จะตรวจสอบทุกแอปที่ได้รับการตรวจสอบก่อนที่จะเผยแพร่
พึงระลึกไว้เสมอว่าผู้ใช้ไม่ได้ใช้การอัปเดตแอปอย่างง่ายดาย ผู้ใช้ต้องอัปเดตแอปพลิเคชันที่ติดตั้งไว้อย่างชัดเจน ซึ่งตรงกันข้ามกับเว็บที่ทุกคนเพิ่งจะได้เห็นเว็บไซต์เวอร์ชันล่าสุดที่ปรับใช้
การจัดการแอปพลิเคชันที่ปรับใช้นั้นค่อนข้างมีความต้องการมากกว่าการจัดการเว็บไซต์ที่ปรับใช้ อย่างไรก็ตาม สิ่งนี้ไม่ควรทำให้คุณตกใจ ท้ายที่สุดแล้ว มีแอปนับล้านที่ปรับใช้ในร้านค้าทั้งสองแห่ง คุณจึงเพิ่มแอปของคุณได้เช่นกัน
ความคิดเพิ่มเติมเกี่ยวกับ Flutter
Flutter เป็นเครื่องมือข้ามแพลตฟอร์มเพื่อสร้างเดสก์ท็อป มือถือ หรือเว็บแอปพลิเคชัน แอพ Flutter นั้นสมบูรณ์แบบด้วยพิกเซล Flutter วาด UI เดียวกันในแต่ละแอพโดยไม่คำนึงถึงแพลตฟอร์มเป้าหมาย เนื่องจากแอป Flutter แต่ละแอปมีเอ็นจิ้น Flutter เอ็นจิ้นนี้แสดงรหัส Flutter UI Flutter จัดเตรียมผ้าใบสำหรับแต่ละอุปกรณ์และให้คุณวาดภาพตามที่คุณต้องการ เครื่องยนต์สื่อสารกับแพลตฟอร์มเป้าหมายเพื่อจัดการเหตุการณ์และการโต้ตอบ
กระพือปีกมีประสิทธิภาพ มีระดับประสิทธิภาพสูง นี่เป็นเพราะมันสร้างด้วย Dart และใช้ประโยชน์จากคุณสมบัติของ Dart
ด้วยคุณประโยชน์มากมายเหล่านี้ Flutter จึงเป็นตัวเลือกที่ดีสำหรับการใช้งานที่หลากหลาย แอพข้ามแพลตฟอร์มช่วยประหยัดเงินและเวลาระหว่างการผลิตและบำรุงรักษา อย่างไรก็ตาม Flutter (และโซลูชันข้ามแพลตฟอร์ม) อาจไม่ใช่ตัวเลือกที่เหมาะสมที่สุดในบางกรณี
อย่าใช้ Flutter หากคุณต้องการให้ผู้ใช้ใช้เครื่องมือสำหรับนักพัฒนาแพลตฟอร์มกับแอปพลิเคชันของคุณ เครื่องมือสำหรับนักพัฒนาแพลตฟอร์มในที่นี้หมายถึงเครื่องมือเฉพาะอุปกรณ์ เช่น ตัวเลือกสำหรับนักพัฒนา Android นอกจากนี้ยังมีเครื่องมือสำหรับนักพัฒนาเบราว์เซอร์
อย่าใช้ Flutter สำหรับเว็บ หากคุณคาดว่าส่วนขยายของเบราว์เซอร์จะโต้ตอบกับเว็บไซต์
นอกจากนี้ อย่าใช้ Flutter สำหรับเว็บไซต์ที่มีเนื้อหาจำนวนมาก
สรุป
นี่คือการทบทวนทักษะที่ส่งต่อจากการพัฒนาเว็บส่วนหน้าไปสู่การทำงานกับ Flutter เรายังพูดถึงแนวคิดการพัฒนาแอพที่คุณต้องเรียนรู้ในฐานะนักพัฒนาเว็บ
Flutter นั้นง่ายกว่าสำหรับนักพัฒนาเว็บเพราะทั้งคู่เกี่ยวข้องกับการติดตั้ง UI หากคุณเริ่ม Flutter คุณจะพบว่ามันให้ประสบการณ์นักพัฒนาที่ดีแก่คุณ ให้ Flutter ลอง! ใช้เพื่อสร้างแอปบนอุปกรณ์เคลื่อนที่ และแน่นอน แสดงสิ่งที่คุณสร้าง
ไชโย!
