ตอนที่แล้วเราได้รู้จักโครงสร้าง ของโปรเจ็ค flutter
ที่เป็น Demo ไปแล้ว รวมถึงได้รู้ลำดับการพัฒนา App เบื่องต้น
สามารถทบทวนเนื้อหาได้ที่บทความ
ทดสอบรันโปรเจ็ค Demo ของ Flutter ใน Android Studio http://niik.in/952
https://www.ninenik.com/content.php?arti_id=952 via @ninenik
ในเนื้อหาตอนต่อไปนี้ เราจะมาสร้าง App แรกหรือจะเรียกว่า First App ซึ่ง
คุ้นเคยกับดีกับคำว่า Hello World สามารถสร้าง Flutter โปรเจ็คใหม่ขึ้นมา หรือจะใช้
ตัว Demo จากตอนที่แล้วก็ได้ แต่ในที่นี้จะใช้ตัว Demo จากตอนที่แล้ว โดยจะทำการ
ลบโค้ดเก่าในไฟล์ main.dart ออกให้หมด รวมถึงลบไฟล์ widget_test.dart ในโฟลเดอร์
test ออกไปก่อน แล้วเริ่มต้นสร้าง แต่ละองค์ประกอบ เพื่อ ทำความเข้าใจหลักการทำงาน
เริ่มสร้าง Hello World App
เมื่อเริ่มตันพัฒนา App ใดๆ เรามักคุ้นเคยกับการใช้งานรูปแบบ print("Hello World") หรือการแสดงข้อความออกทาง console เพื่อ
เตรียมความพร้อมสำหรับการเขียนโปรแกรม ซี่ง Flutter ก็เช่นกัน เนื่องจาก Flutter ใช้ภาษา Dart ในการพัฒนาโปรแกรม รูปแบบเริ่มต้น
ก็จะเป็น
void main(){
print("Hello World");
}
การใช้งาน Center และ Text widget
ตัวอย่างด้านบน เป็นการ print ข้อความ "Hello World" ออกทาง console แต่การใช้งาน Flutter Framework เกือบทั้งหมดจะเป็น widget ดังนั้น เราจะ
ใช้งาน Center widget และ Text widget สำหรับ แสดงข้อความอยู่กึ่งกลางของหน้าจอ โดยเรียกใช้งานคำสั่ง runApp() ของ Flutter
ในรูปแบบดังนี้
import 'package:flutter/material.dart';
void main(){
runApp(
const Center(
child: Text(
'Hello World',
textDirection: TextDirection.ltr,
),
)
);
}
เมื่อเรามีการเรียกใช้งาน Center widget ซึ่งเป็น widget ใน Material library ก็จะมีการ import package มาให้อัตโนมัติ หรือเรา
สามารถจะกำหนดเองเข้าไปก็ได้ ทดสอบรัน App ดูผลลัพธฺ์ที่ได้
การกำหนดข้อความด้วย Text widget ข้างต้น มีการใช้งาน textDirection เราสามารถดู parameter อื่นๆ ที่เป็น options ของ widget
ได้โดยทำการกดปุ่ม Ctrl แล้วคลิกที่ชื่อ widget ที่ต้องการ ไฟล์ widget นามสกุล dart นั้นๆ ก็จะแสดงขึ้นมา ให้เราสามารถดูค่า parameter
ที่ต้องการได้ เช่นต้องการดูในส่วนของ Text widget ก็จะได้เป็น
ไฟล์ text.dart ก็จะแสดงข้อมูลดังรูป
การใช้งาน MaterialApp และ Material widget
อย่างไรก็ตาม หากเรามีการใช้งาน MaterialApp widget ซึ่งมีค่า default ของภาษาเป้น American English และเป็นข้อความจาก
ซ้ายไปขวา หรือ left-to-right เราก็ไม่จำเป็นต้องกำหนด textDirection ที่เป็น ltr ให้กับ Text widget อีก ซึ่ง App ภาษาไทยก็ใช้รูปแบบ
เดียวกัน ดังนั้น เราจะเพิ่มการใช้งาน MaterialApp และ Material widget เข้ามาใช้งาน ดังนี้
runApp(
const MaterialApp(
title: 'First Flutter App',
home: Material(
color: Colors.lightGreen,
child: const Center(
child: Text(
'Hello World',
style: TextStyle(
color: Colors.white,
fontSize: 20.0
)
)
)
)
)
);
ตอนนี้เราไม่จำเป็นต้องกำหนด textDirection ให้กับ Text widget ที่ใช้งาน MaterialApp widget แล้ว โดยกำหนด style ให้กับข้อความ
แทน โดยกำหนดสี เป็นสีขาว และกำหนดขนาดเป็น 20.0 เพราะ fontSize เป็น double สำหรับ MaterialApp เรากำหนด parameter สองค่า
คือ title ค่านี้จะแสดงเมื่อเรากดย่อหน้า App เพื่อดู Recent App หรือ App ที่กำลังใช้งานอยู่ ก็จะแสดงชื่อ title ค่านี้ ต่อด้วย home ซึ่งก็
คือค่าที่จะกำหนด widget แรกของหน้าหลักหรือหน้าแรกของเรา โดยเราใช้ Material widget หรือชิ้นย่อยๆ ของ widget ที่เราสามารถกำหนด
คุณสมบัติต่างๆ เพิ่มเติมได้ เช่นในนี้เรากำหนดสี เป็นสีเขียวอ่อน ใช้ lightGreen และกำหนด child เป็น ส่วนที่เหลือเดิมทั้งหมด พอรันแล้ว
ก็ได้ผลลัพธฺ์ดังรูปด้านล่าง
การใช้งาน Scaffold widget
การใช้งาน Material wiget เพื่อใช้เป้นหน้า home ช่วยให้เราสามารถแสดงเนื้อหาได้เต็มพื้นที่ แต่โดยทั่วไปแล้ว และโดยส่วนใหญ่ มักมีการ
แสดงข้อมูลหัวข้อในหน้าแรก ดังนั้นเราจะใช้งาน Scaffold widget มากำหนดในส่วนของ home แทน Material widget โดย Scaffold จะรอง
รับการกำหนด app bar, title และ body เหมือนกับการแยกเป็นส่วนๆ อีกที จากนั้นเราก็กำหนด Material ไว้ในส่วนของ body จะได้เป็นดังนี้
runApp(
MaterialApp(
title: 'First Flutter App',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to Flutter'),
backgroundColor: Colors.green
),
body: Material(
color: Colors.lightGreen,
child: const Center(
child: Text(
'Hello World',
style: TextStyle(
color: Colors.white,
fontSize: 20.0
)
)
)
)
)
)
);
ในการใช้งาน Scaffold ทำให้เราเพิ่มและจัดการในส่วนของ appBar ได้ ในที่นี้เรากำหนด title และสีพื้นหลัวเป้นสีเขียว ให้ตัดกับสีเขียว
อ่อนในส่วนของ Material widget ทดสอบรัน จะได้ผลลัพธ์เป็นดังนี้
ถ้าเรามองลักษณะการโค้ดโปรแกรมข้างต้นจะเห็นว่า เป็นการวาง widget ซ้อนๆ กันเป็นโครงสร้างรูปแบบที่ต้องการ ดังนั้นถ้า App ของ
เรายิ่งมีความซับซ้อน หรือมีองค์ประกอบของ widget มากขึ้นเรื่อยๆ จำนวนบรรทัดของโค้ดในส่วนของ main() ฟังก์ชั่นก็จะมากขึ้นตามไป
ด้วย ในลำดับต่อไป เราจะทำการย้ายโค้ดในส่วนของ การใช้งาน widget โดยตรงในฟังก์ชั่น main() มาสร้างเป้น class ใหม่ โดยจะทำการ
สืบทอดมาจาก StatelessWidget และ StatefulWidget ตามลำดับ จะขออธิบายในตอนหน้า
ทบทวนเล็กน้อยก่อนจบเนื้อหาในตอนนี้
- ในตัวอย่างเราทำการสร้าง Material App โดย Material คือภาษาสำหรับออกแบบรูปแบบการแสดง ที่ใช้เป็นมาตรฐานทั้งในแบบ
mobile และ web โดย Flutter จะมี Material widget จำนวนมากให้ใช้งาน
- Scaffold widget เป็น widget จาก Material library ที่ใช้สำหรับกำหนด app bar, title และ body ที่รวมโครงสร้างของ widget สำหรับ
หน้า home โดย widget ที่เป็นโครงสร้างย่อย สามารถมีรูปแบบการกำหนดที่ซับซ้อนหรือมีหลายระดับได้ ตามต้องการ และตามความ
เหมาะสมของการใช้งาน เข้าใจอย่างง่ายก็คือ เหมือนการจัดเรียงโครงสร้าง html ของหน้าเว็บเพจ ที่มี DOM Element ต่างๆ ประกอบรวม
กันขึ้นรูปร่างหรือโครงสร้างตามต้องการ
- ส่วนของ body จะประกอบด้วย Center widget และมี Text widget อยู่ด้านในอีกที ตัว Center widget ใช้สำหรับจัดเรียง child หรือ
widget ที่อยู่ด้านในตัวมัน ให้เรียงอยู่กึ่งกลางของหน้าจอ
อ่านต่อที่บทความ
เนื้อหาที่เกี่ยวข้อง