บทความ
ตัวอย่างการใช้ Widget ใน Flutter
Widget คือส่วนประกอบพื้นฐานใน Flutter ซึ่งใช้สร้างแอปพลิเคชัน ดังนั้น ส่วนมากจะต้องใช้ Widget ต่างๆ เพื่อสร้าง UI/UX ของแอปพลิเคชัน ดังนี้
-
MaterialApp: ใช้สร้างแอปพลิเคชันตามหลักการ Material Design ของ Google ซึ่งมี Widget ส่วนย่อยอื่นๆ เช่น Scaffold, AppBar, BottomNavigationBar ฯลฯ เพื่อช่วยในการสร้าง UI ของแอปพลิเคชัน
-
Container: ใช้สร้างพื้นที่หรือกรอบของ Widget อื่นๆ ซึ่งสามารถกำหนดสีพื้นหลัง ขนาด และระยะห่างได้ตามต้องการ
-
Row และ Column: ใช้สร้าง Layout แบบแถวและคอลัมน์ เพื่อจัดวาง Widget ให้เรียงกันได้อย่างเหมาะสม
-
Text: ใช้สร้างข้อความแสดงผลบนหน้าจอ
-
Image: ใช้แสดงรูปภาพบนหน้าจอ
-
ListView: ใช้สร้างลิสต์ของ Widget อื่นๆ เพื่อแสดงผลบนหน้าจอ เช่น รายการสินค้า หรือรายชื่อผู้ใช้งาน
-
Button: ใช้สร้างปุ่มที่สามารถกดได้ เพื่อใช้ในการทำงานต่างๆ ซึ่งแต่ละปุ่มสามารถกำหนดรูปแบบและสีได้ตามต้องการ
ตัวอย่างการใช้ Widget ใน Flutter:
MaterialApp(
title: 'My App',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome to My App'),
),
body: Container(
child: Row(
children: <Widget>[
Expanded(
child: Image.asset('assets/images/logo.png'),
),
Expanded(
child: Column(
children: <Widget>[
Text('Welcome to My App'),
RaisedButton(
child: Text('Click Me'),
onPressed: () {
// do something
},
),
],
),
),
],
),
),
),
);
หนังสือพัฒนาตัวเอง
จุดเริ่มต้นที่ชัดเจน