สร้าง Hello World ด้วย Flutter
Flutter 3 by Keptcode.com
หลังจากที่เราติดตั้งและสร้างโปรเจกเสร็จ พร้อมกับรันโปรเจกเทสผ่านหมดแล้ว ลำดับต่อไปก็จะเป็นส่วนของ การเริ่มต้นพัฒนาแอพพลิเคชั่นด้วย Flutter กันแล้ว โดยปกติแล้วไม่ว่าจะเขียนภาษาไหนก็ตาม เรามักจะเริ่มต้นด้วยการสร้างแอพ Hello World กันก่อน
Repo: Github.com (รบกวนกด Start ให้ด้วยนะคับ)
คำแนะนำ
main.dart คือไฟล์ที่เป็นจุดเริ่มต้นของการทำงานภายในแอพที่ถูกพัฒนาด้วย Flutter ทั้งระบบ หรือก็คือ Flutter จะเข้าถึงไฟล์ main.dart เป็นไฟล์แรกทุกครั้ง เมื่อเข้าใช้งานแอพ
ไฟล์นี้จึงสำคัญต่อโปรเจก Flutter มาก ๆ
ดังนั้นการตั้งค่าต่าง ๆ ของระบบจะถูกกำหนดไว้ภายในไฟล์นี้แทบจะทั้งหมด ยกตัวอย่างเช่น การตั้งค่าภาษาที่ใช้ภายในแอพ ตั้งค่าธีมแอพ หรือ จะเป็นการเช็คเงื่อนไขการเข้าสู่ระบบ ส่วนใหญ่จะถูกเขียนไว้ในไฟล์นี้ทั้งหมด
สร้างไฟล์ main.dart
Path: [skeleton]\flutter-app\lib\main.dart
Language: Dart
// Step 01 : นำเข้าไฟล์
import 'package:flutter/material.dart';
// Step 02 : ประกาศตัวแปร main() ได้เท่านั้น
void main() {
// Step 03 : เรียกใช้งาน Stateless Widget สำหรับ "รันแอพ"
runApp(const MyApp());
}
// Step 04 : สร้างคลาส MyApp แบบ Stateless Widget
class MyApp extends StatelessWidget {
// Step 05 : ประกาศตัวแปรนี้ "ทุกครั้ง" เมื่อใช้ Stateless Widget
// โดยตั้งชื่อให้ "เหมือนกับชื่อคลาส" หลักเช่น MyApp นั่นเอง
const MyApp({
super.key,
});
// Step 06 : สร้าง Widget สำหรับ "แสดงผล" ชื่อว่า "build" เท่านั้น
@override
Widget build(BuildContext context) {
// Step 07 : เรียกใช้งาน Material 3 Design
return MaterialApp(
title: 'Flutter App', // Step 08 : ตั้งชื่อ "แอพ" ของเรา
theme: ThemeData(
// Step 09 : ตั้งค่า "สีน้ำเงิน" เป็นสีของ "ธีม" ในแอพเรา
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
// Step 10 : เปืดใช้งาน Material 3 ทั้งแอพ
useMaterial3: true,
),
// Step 11 : กำหนด "หน้าหลัก" ให้กับ "แอพของเรา"
home: const HelloWorldPage(),
);
}
}
คำแนะนำ
สิ่งสำคัญของไฟล์ main.dart มีทั้งหมด 4 ส่วน เริ่มต้นจากส่วนที่ 1 ในเมื่อเราต้องการใช้งาน Material 3 Design เราจะต้องมีการนำเข้าไฟล์ flutter/material.dart ทุกครั้ง ส่วนที่ 2 คลาสที่ชื่อ main() ถ้าหากไม่มีการสร้างหรือประกาศชื่อคลาสนี้ แอพเราจะรันไม่ได้
ส่วนที่ 3 คลาสที่เป็นแบบ Stateless Widget เสมือนเป็น Widget ที่ครอบคลุมแอพของเราไว้ทั้งหมด และ ส่วนสุดท้ายคือส่วนของ build() ซึ่งจะหมายถึงว่าจะให้ Flutter แสดงอะไรออกมา
File: main.dart
สร้างไฟล์ hello.dart เป็น Main Screen (หน้าหลัก)
Path: [skeleton]\flutter-app\lib\screens\hello.dart
Language: Dart
// Step 01 : นำเข้าไฟล์
import 'package:flutter/material.dart';
// Step 02 : สร้างคลาส HelloWorldPage สำหรับใช้เป็น "หน้าหลัก" ของแอพ
class HelloWorldPage extends StatefulWidget {
// Step 03 : ประกาศตัวแปรนี้ "ทุกครั้ง" เมื่อใช้ Stateful Widget เช่นกัน
// โดยตั้งชื่อให้ "เหมือนกับชื่อคลาส" หลักเช่น HelloWorldPage นั่นเอง
const HelloWorldPage({
super.key,
});
// Step 04 : ประกาศตัวแปร
// กรณีที่ "แอพของเรา" มีการใช้งาน State สำหรับจัดการ "ข้อมูล" ภายในหน้าเหล่านั้น
@override
State<HelloWorldPage> createState() => HelloWorldState();
}
// Step 05 : สร้างคลาส HelloWorldState สำหรับจัดการ State โดยเฉพาะ
class HelloWorldState extends State<HelloWorldPage> {
// Step 06 : สร้าง Widget สำหรับ "แสดงผล" ชื่อว่า "build" เท่านั้น
@override
Widget build(BuildContext context) {
// Step 07 : เรียกใช้งาน Scaffold ที่มาพร้อมกับ Material 3 Design
// ทำให้เราสามารถกำหนด AppBar และ Body ให้กับแอพของเราได้ (ใช้ทุกหน้า)
return const Scaffold(
// Center: กำหนดให้แสดง Content อยู่ตรง "กึ่งกลาง" ทั้งหมด
body: Center(
// Column: จัด Layout ให้มีมีลักษณะของ Column (แนวตั้ง)
child: Column(
// กำหนดให้แสดง Content อยู่ตรง "กึ่งกลาง" ทั้งหมด
mainAxisAlignment: MainAxisAlignment.center,
// children: สามารถเพิ่ม Widget ที่ต้องการ "แสดง" เข้าไปได้เลย
children: <Widget> [
// ตัวอย่าง: เพิ่ม Widget ประเภท Text เพื่อแสดงข้อความ "Hello World" ลงไป
Text(
'Hello World !!',
// style: คือการ "ตกแต่ง" ข้อความให้ "สวยงาม" มากยิ่งขึ้น
style: TextStyle(
fontSize: 22, // ตัวหนังสือ
color: Colors.black, // สีตัวหนังสือ
fontWeight: FontWeight.w400, // น้ำหนักของตัวหนักสือ
),
),
],
),
),
);
}
}
คำแนะนำ
หน้านี้ เราจะทำเป็น "หน้าหลัก" ของแอพ และเราจะใช้ "หน้าหลัก" นี้เป็นแนวทางให้กับการสร้างหน้าอื่น ๆ ในอนาคต จุดสำคัญอยู่ตรงที่มีการเรียกใช้งาน Stateful Widget ซึ่งจะแตกต่างจากไฟล์ main.dart ที่เรียกใช้งาน Stateless Widget ต่อด้วยการใช้งาน State หรือการจัดการข้อมูลภายในหน้านั้น ๆ
ต่อจากนั้น ก็จะมีตัวอย่างคำสั่งการจัด Layout ให้กับ Content ต่าง ๆ ยกตัวอย่างเช่นคำสั่ง Center (จัดตำแหน่งกึ่งกลาง), Column (จัดเนื้อหาเป็นแบบคอลัมน์) และ Text (แสดงข้อความพร้อมตกแต่ง) เป็นต้น
เกือบลืมคำสั่ง Scaffold ซึ่งจำเป็นจะต้องใส่ไว้บนสุดของทุก ๆ หน้าที่ต้องการใช้งาน Material 3 Design เป็นธีมของแอพ ความสามารถของสำคำสั่งนี้ จะทำให้เราสามารถ "แยก" การแสดงผลระหว่าง "AppBar" กับ "Body" ออกจากกันได้ ตัวอย่างสามารถติดตามในบนถัดไป
File: hello.dart
แก้ไขไฟล์ main.dart (นำเข้าไฟล์ hello.dart มาใช้งาน)
Path: [skeleton]\flutter-app\lib\main.dart
Language: Dart
// Step 01 : นำเข้าไฟล์ hello.dart มาใช้งาน เป็น "หน้าหลัก" ของแอพ
import 'package:flutter_app/screens/hello.dart'; // <== เพิ่มคำสั่งนี้ (1)
class MyApp extends StatelessWidget {
// .....
Widget build(BuildContext context) {
return MaterialApp(
// ...
// Step 02 : เรียกใช้งาน HelloWorldPage เข้ามาเป็น "หน้าหลัก" ของแอพ
home: const HelloWorldPage(), // <== เพิ่มคำสั่งนี้ (2)
);
}
}
ตัวอย่าง
