logo icon
ธนินัชดอทคอม - รับสร้าง Website, Mobile Application
image

บทความ

ธนินัช ดอทคอม - ผู้เชี่ยวชาญทำเว็บไซต์

ตัวอย่างการใช้ Widget ใน Flutter

Widget คือส่วนประกอบพื้นฐานใน Flutter ซึ่งใช้สร้างแอปพลิเคชัน ดังนั้น ส่วนมากจะต้องใช้ Widget ต่างๆ เพื่อสร้าง UI/UX ของแอปพลิเคชัน ดังนี้

  1. MaterialApp: ใช้สร้างแอปพลิเคชันตามหลักการ Material Design ของ Google ซึ่งมี Widget ส่วนย่อยอื่นๆ เช่น Scaffold, AppBar, BottomNavigationBar ฯลฯ เพื่อช่วยในการสร้าง UI ของแอปพลิเคชัน

  2. Container: ใช้สร้างพื้นที่หรือกรอบของ Widget อื่นๆ ซึ่งสามารถกำหนดสีพื้นหลัง ขนาด และระยะห่างได้ตามต้องการ

  3. Row และ Column: ใช้สร้าง Layout แบบแถวและคอลัมน์ เพื่อจัดวาง Widget ให้เรียงกันได้อย่างเหมาะสม

  4. Text: ใช้สร้างข้อความแสดงผลบนหน้าจอ

  5. Image: ใช้แสดงรูปภาพบนหน้าจอ

  6. ListView: ใช้สร้างลิสต์ของ Widget อื่นๆ เพื่อแสดงผลบนหน้าจอ เช่น รายการสินค้า หรือรายชื่อผู้ใช้งาน

  7. 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
                  },
                ),
              ],
            ),
          ),
        ],
      ),
    ),
  ),
);

 

เลือกโปรทำเว็บ เดือนมีนาคม

หนังสือพัฒนาตัวเอง

จุดเริ่มต้นที่ชัดเจน

เว็บไซต์หรือแอปพลิเคชั่นของคุณเริ่มต้นที่นี่

ลงทะเบียนแล้วเราจะส่งข้อเสนอที่ดีที่สุดให้กับคุณ