Flutter ปุ่มลอยค้าง ด้วย floatingActionButton

Flutter ปุ่มลอยค้าง ด้วย floatingActionButton บทความนี้สอนสร้างปุ่มลอยค้าง โดย Widget นี้ประกอบด้วยคำสั่งที่สำคัญ 2 คำสั่งคือ onPressed และ child ซึ่ง WIdget นี้จะอยู่ใน Scaffold Widget สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง Flutter ปุ่มลอยค้าง ด้วย floatingActionButton

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Page A'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          print('Hello Devdit');
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

ผลลัพธ์

Hello Devdit

จากตัวอย่างสร้างปุ่มลอยค้างที่หน้าจอ Flutter ด้วย floatingActionButton และเมื่อผู้ใช้งานกดที่ปุ่มจะเข้าทำงานในคำสั่ง onPressed พร้อมกับใส่ Icon ให้กับปุ่มด้วย child ร่วมกับ Icon(Icons.add) ซึ่งเป็น Icon แสดงเครื่องหมายบวก