close

สร้าง UI ด้วย Scaffold และ AppBar ใน Flutter

ใน Flutter คุณสามารถสร้างอินเทอร์เฟซผู้ใช้ที่เรียบง่ายแต่ทรงพลังโดยใช้ Scaffold และ AppBar วิดเจ็ต Scaffold ให้โครงสร้างพื้นฐานสำหรับแอปที่มีองค์ประกอบทั่วไป เช่น แถบแอป เนื้อหาของแอป และปุ่มนำทาง AppBar เป็นส่วนหนึ่งของ Scaffold และประกอบด้วยชื่อแอปและตัวเลือกการนำทาง

ด้านล่างนี้เป็นคำแนะนำเกี่ยวกับวิธีสร้างส่วนต่อประสานผู้ใช้อย่างง่ายโดยใช้ Scaffold และ AppBar:

สร้าง Flutter แอพ ใหม่

ขั้นแรก สร้าง Flutter แอปใหม่โดยเรียกใช้คำสั่งต่อไปนี้ใน terminal:

flutter create app_name

(แทนที่ app_name ด้วยชื่อแอปที่ต้องการ)

แก้ไขไฟล์ main.dart

ในไฟล์ main.dart(ภายในโฟลเดอร์ lib) ให้แทนที่เนื้อหาด้วยสิ่งต่อไปนี้:

import 'package:flutter/material.dart';  
  
void main() {  
  runApp(MyApp());  
}  
  
class MyApp extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      home: MyHomePage(),  
   );  
  }  
}  
  
class MyHomePage extends StatelessWidget {  
  @override  
  Widget build(BuildContext context) {  
    return Scaffold(  
      appBar: AppBar(  
        title: Text('Flutter App with Scaffold and AppBar'),  
     ),  
      body: Center(  
        child: Text('Hello, world!'),  
     ),  
   );  
  }  
}

ในตัวอย่างข้างต้น เราสร้างแอป ด้วย Scaffold และ AppBar ประกอบด้วย Scaffold และ AppBar ส่วนติดต่อผู้ใช้ที่ส่งไปยัง body คุณสมบัติ

เรียกใช้แอพ

สุดท้าย ในการเรียกใช้แอป ให้รันคำสั่งต่อไปนี้ใน terminal:

flutter run

แอปของคุณจะแสดงหน้าจอชื่อ " Flutter แอปที่มี Scaffold และ AppBar " บนแถบแอปและข้อความ Hello, world!  ตรงกลางหน้าจอ

 

สรุป: Scaffold และ AppBar เป็นสองวิดเจ็ตที่จำเป็น Flutter ซึ่งช่วยให้คุณสร้างอินเทอร์เฟซผู้ใช้ที่เรียบง่ายและใช้งานได้จริง เมื่อใช้สิ่งเหล่านี้ คุณสามารถสร้างแอปที่น่าสนใจด้วยส่วนประกอบ UI พื้นฐาน เช่น แถบแอปและเนื้อหาแอป