Update Article: 140

Category ID

Content Name

Clear URLs

URL Off page

Content Desc

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

Content Short

Content Img Alt

Content Tag

อัพโหลดรูปภาพ

สำหรับ SEO

Meta Title

Meta Desc

Meta Keyword

Og Title

Og Desc

สถานะเปิดใช้งานบทความ

Back home