Copyright 2024 - Custom text here

ตามหัวข้อเลยครับ การใช้ AppBar บน Flutter เริ่มจาก การสร้าง โปรเจ็ค Flutter ขึ้นมาก่อน http://androidthai.in.th/android-flutter/171-create-project-flutter-by-terminal-on-mac

และขั้นตอนต่อไป ก็ เปิดโปรเจ็ค Flutter ที่สร้างด้วย VS code http://androidthai.in.th/android-flutter/172-open-project-flutter-by-vs-code-on-mac ลบโค้ดที่ main.dart ออกทั้งหมด

เริ่มจากการ import material.dart มาทำงานก่อน

 

 สร้าง main Method หรือ จะเรียนก main Function ก็ได้นะ

 

 

พิมพ์ stl ลงไป ระบบ Suggesstion จะแนะนำคำสั่งที่เป็นไปได้ (ถ้าไม่ขึ้นมาให้ Ctrl + Space) มองหา stlss

ตัว Flutter จะสร้าง คลาส ที่ไม่มีชื่อ (เดี๋ยวเราตั้งเองครับ) ที่ extends StatelessWidget

มาสเตอร์ ตั้งชื่อว่า MyApp และ ที่ main เมธอด กำหนดให้ runApp ที่ MyApp 

 

เปลี่ยนค่าที่จะ Reture ให้ Return MaterialApp

ใน MaterialApp กำหนด Argument ค่า home: ออกไป

กำหนดค่า Scaffold() ให้ home

 ที่นี่แหละ กำหนดค่า appBar ให้ Scaffold

จะได้แบบนี้

กำหนดค่า AppBar() ให้ appBar ใน Scaffold

สร้าง title:

แบบนี้

ส่ง เมธอด Text เข้าไปทำงานใน title: ของ AppBar

 

จะได้แบบนี้

ค่าที่กำหนดให้ Text ต้องเป็น String จากตัวอย่างคือ Flutter MasterUNG

ทดสอบโค้ดโดยพิมพ์คำสั่ง flutter run ที่ Terminal อ้อ เปิด Emulator หรือ Simulator หรือ เครื่องจริงด้วยก็จะได้แบบนี้ครับ 

 

 

 

คอร์ส สอนโปรเจ็คแอนดรอยด์ ตัวต่อตัว

privateProject2019v1

คอร์ส เบสิกแอนดรอยด์ สอน ตัวต่อตัว

privateAndroid2019v1

คอร์ส iOS สอน ตัวต่อตัว

privateIos2019V1

คอร์ส Flutter สอน ตัวต่อตัว

privateFlutter2019v1

f t g