สร้าง 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
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({
super.key,
});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter App',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Colors.blue,
),
useMaterial3: true,
),
home: const HelloWorldPage(),
);
}
}
คำแนะนำ
สิ่งสำคัญของไฟล์ main.dart มีทั้งหมด 4 ส่วน เริ่มต้นจากส่วนที่ 1 ในเมื่อเราต้องการใช้งาน Material 3 Design เราจะต้องมีการนำเข้าไฟล์ flutter/material.dart ทุกครั้ง ส่วนที่ 2 คลาสที่ชื่อ main() ถ้าหากไม่มีการสร้างหรือประกาศชื่อคลาสนี้ แอพเราจะรันไม่ได้
ส่วนที่ 3 คลาสที่เป็นแบบ Stateless Widget เสมือนเป็น Widget ที่ครอบคลุมแอพของเราไว้ทั้งหมด และ ส่วนสุดท้ายคือส่วนของ build() ซึ่งจะหมายถึงว่าจะให้ Flutter แสดงอะไรออกมา
ไฟล์:main.dart
สร้างไฟล์ hello.dart เป็น Main Screen (หน้าหลัก)
Path: [skeleton]\flutter-app\lib\screens\hello.dart
Language: Dart
import 'package:flutter/material.dart';
class HelloWorldPage extends StatefulWidget {
const HelloWorldPage({
super.key,
});
@override
State<HelloWorldPage> createState() => HelloWorldState();
}
class HelloWorldState extends State<HelloWorldPage> {
@override
Widget build(BuildContext context) {
return const Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget> [
Text(
'Hello World !!',
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" ออกจากกันได้ ตัวอย่างสามารถติดตามในบนถัดไป
ไฟล์:hello.dart
แก้ไขไฟล์ main.dart (นำเข้าไฟล์ hello.dart มาใช้งาน)
Path: [skeleton]\flutter-app\lib\main.dart
Language: Dart
import 'package:flutter_app/screens/hello.dart'; // <== เพิ่มคำสั่งนี้ (1/2)
class MyApp extends StatelessWidget {
// .....
Widget build(BuildContext context) {
return MaterialApp(
// ...
home: const HelloWorldPage() // <== เพิ่มคำสั่งนี้ (2/2)
);
}
}
ตัวอย่าง
