140

Update

Delete

Back

Content ID	140
Category ID	3
Writer ID	(not set)
User ID	(not set)
Lang Mode	th
Content Name	ตัวอย่างการใช้ Widget ใน Flutter
Content Url	ตัวอย่างการใช้-Widget-ใน-Flutter
Content Desc	<p>Widget คือส่วนประกอบพื้นฐานใน Flutter ซึ่งใช้สร้างแอปพลิเคชัน ดังนั้น ส่วนมากจะต้องใช้ Widget ต่างๆ เพื่อสร้าง UI/UX ของแอปพลิเคชัน ดังนี้</p> <ol> <li> <p>MaterialApp: ใช้สร้างแอปพลิเคชันตามหลักการ Material Design ของ Google ซึ่งมี Widget ส่วนย่อยอื่นๆ เช่น Scaffold, AppBar, BottomNavigationBar ฯลฯ เพื่อช่วยในการสร้าง UI ของแอปพลิเคชัน</p> </li> <li> <p>Container: ใช้สร้างพื้นที่หรือกรอบของ Widget อื่นๆ ซึ่งสามารถกำหนดสีพื้นหลัง ขนาด และระยะห่างได้ตามต้องการ</p> </li> <li> <p>Row และ Column: ใช้สร้าง Layout แบบแถวและคอลัมน์ เพื่อจัดวาง Widget ให้เรียงกันได้อย่างเหมาะสม</p> </li> <li> <p>Text: ใช้สร้างข้อความแสดงผลบนหน้าจอ</p> </li> <li> <p>Image: ใช้แสดงรูปภาพบนหน้าจอ</p> </li> <li> <p>ListView: ใช้สร้างลิสต์ของ Widget อื่นๆ เพื่อแสดงผลบนหน้าจอ เช่น รายการสินค้า หรือรายชื่อผู้ใช้งาน</p> </li> <li> <p>Button: ใช้สร้างปุ่มที่สามารถกดได้ เพื่อใช้ในการทำงานต่างๆ ซึ่งแต่ละปุ่มสามารถกำหนดรูปแบบและสีได้ตามต้องการ</p> </li> </ol> <p>ตัวอย่างการใช้ Widget ใน Flutter:</p> <p style="padding-left: 80px;"><code>MaterialApp(</code><br><code>  title: 'My App',</code><br><code>  home: Scaffold(</code><br><code>    appBar: AppBar(</code><br><code>      title: Text('Welcome to My App'),</code><br><code>    ),</code><br><code>    body: Container(</code><br><code>      child: Row(</code><br><code>        children: <Widget>[</code><br><code>          Expanded(</code><br><code>            child: Image.asset('assets/images/logo.png'),</code><br><code>          ),</code><br><code>          Expanded(</code><br><code>            child: Column(</code><br><code>              children: <Widget>[</code><br><code>                Text('Welcome to My App'),</code><br><code>                RaisedButton(</code><br><code>                  child: Text('Click Me'),</code><br><code>                  onPressed: () {</code><br><code>                    // do something</code><br><code>                  },</code><br><code>                ),</code><br><code>              ],</code><br><code>            ),</code><br><code>          ),</code><br><code>        ],</code><br><code>      ),</code><br><code>    ),</code><br><code>  ),</code><br><code>);</code></p> <p> </p>
Content Short
Content View	3648
Content Thumb Highlight
Content Thumb
Content Img Alt	ตัวอย่างการใช้ Widget ใน Flutter
Content Tag	Widget ใน Flutter,Flutter
Content Date	(not set)
Active Status	1
Sort	99999
Meta Title	ตัวอย่างการใช้ Widget ใน Flutter
Meta Desc	ตัวอย่างการใช้ Widget ใน Flutter
Meta Keyword	Widget ใน Flutter,Flutter
Og Title	ตัวอย่างการใช้ Widget ใน Flutter
Og Desc	ตัวอย่างการใช้ Widget ใน Flutter
Status	1
Create Date Time	2023-03-29 10:53:51
Update Date Time	2023-03-29 10:53:51
Create By
Update By