เนื้อหาตอนต่อไปนี้ จะขอเอาแพ็กเก็จที่น่าสนใจและอาจจะ
มีประโยชน์ในการนำไปปรับใช้กับโปรเจ็คแอปของเรามาแนะนำ
ชื่อว่า Wakelock_plus ใช้สำหรับป้องกันการปิดหน้าจออัตโนมัติ
ซึ่งเราเข้าใจกันอยู่แล้วว่า โดยปกติหน้าจอมือถือจะปิดหรือดับเมื่อถึงเวลา
ที่กำหนดในการตั้งค่าไว้ เพื่อประหยัดพลังงานในกรณีไม่ได้ใช้งานมือถือ
หรือหน้าจอนานๆ แต่ก็จะมีบางหน้า บางฟังก์ชั่นการทำงานของแอป ที่เรา
จำเป็นต้องต้องให้หน้าจอนั้นค้างไว้ แม้ว่าจะตั้งค่าการปิดหน้าจอไว้แล้วก็ตาม
ติดตั้ง package ที่จำเป็นเพิ่มเติม ตามรายการด้านล่าง
แพ็กเก็จที่จำเป็นต้องติดตั้งเพิ่มเติม สำหรับการทำงานมีดังนี้
wakelock_plus: ^1.2.8
การใช้งาน wakelock_plus
wakelock_plus เป็นแพ็กเกจใน Flutter ที่ใช้จัดการ wakelock (การป้องกันไม่ให้หน้า
จอปิดหรือเข้าสู่โหมดพัก) โดยสามารถเปิดหรือปิดการล็อกหน้าจอได้ตามต้องการ สามารถทำ
สิ่งต่างๆ เหล่านี้ได้
ป้องกันการปิดหน้าจออัตโนมัติ
ใช้เมื่อแอปต้องการให้หน้าจอแสดงผลอยู่ตลอดเวลา เช่น:
- การเล่นวิดีโอ
- การอ่านบทความหรือเอกสาร
- การแสดงข้อมูลเรียลไทม์ เช่น การติดตามตำแหน่ง GPS
ประหยัดพลังงานเมื่อไม่จำเป็น
สามารถปิด wakelock ได้เมื่อไม่ต้องการให้หน้าจอเปิดค้าง เช่น:
- เมื่อแอปเข้าสู่โหมดเบื้องหลัง
- ขณะพักหน้าจอระหว่างการทำงาน
นั่นคือเราสามารถกำหนดให้เปิด หรือปิดการใช้งาน wakelock เพื่อควบคุมสถานะหน้าจอใน
สถานการณ์เฉพาะเจาะจงอย่างยืดหยุ่น
การเรียกใช้งานได้ง่ายๆ
- เปิด wakelock ด้วยคำสั่ง WakelockPlus.enable()
- ปิด wakelock ด้วยคำสั่ง WakelockPlus.disable()
- เช็คสถานะของ wakelock ด้วยคำสั่ง WakelockPlus.enabled
- หรือ เปิด/ปิด ด้วยการส่งค่าเข้าไปใช้งานกับคำสั่ง ดังนี้ก็ได้
bool enable = false; // ตัวอย่างการส่งค่าตัวแปรเข้าไป เพื่อปิดใช้งาน wakelock WakelockPlus.toggle(enable: enable);
ตัวอย่างการใช้งาน สมมติเรามีหน้า วิดีโอ และต้องการให้หน้านี้ไม่ต้องปิดหน้าจอเมื่อไมได้มี
การใช้งานหรือไม่ได้มีการแตะหน้าจอนานๆ เช่น กำลังวิดีโออยู่
ไฟล์ videos.dart
import 'package:flutter/material.dart'; import 'package:wakelock_plus/wakelock_plus.dart'; class Videos extends StatefulWidget { static const routeName = '/videos'; const Videos({Key? key}) : super(key: key); @override State<StatefulWidget> createState() { return _VideosState(); } } class _VideosState extends State<Videos> { @override void initState() { super.initState(); // เปิดใช้งาน wakelock เมื่อเปิดหน้าวิดีโอนี้ WakelockPlus.enable(); } @override void dispose() { // ปิดใช้งาน wakelock เมื่อออกจากหน้านี้ ไม่ใช้งานแล้ว WakelockPlus.disable(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Videos'), ), body: const Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text('Videos Screen'), ], ) ), ); } }
ทันทีที่เข้าหรือเปิดมาหน้านี้ หน้าจอก็จะค้างไว้ไม่ดับหรือปิดลง แม้ว่าจะไม่ได้ทำอะไรก็ตาม และเมื่อ
ออกจากหน้าจอหน้า ตัวควบคุมการเปิดหน้าจอค้างก็จะถูกปิดไป ระบบก็จะใช้การปรับหน้าจอที่ได้ตั้งไว้
และไม่ถูกควบคุมด้วย wakelock
เราจะปรับโค้ดอีกเล็กน้อยดูการทำงานต่างๆ
ไฟล์ videos.dart (ปรับแต่งเพิ่มเติม)
import 'package:flutter/material.dart'; import 'package:wakelock_plus/wakelock_plus.dart'; class Videos extends StatefulWidget { static const routeName = '/videos'; const Videos({Key? key}) : super(key: key); @override State<StatefulWidget> createState() { return _VideosState(); } } class _VideosState extends State<Videos> { bool enable = true; // กำหนดค่าเริ่มต้นเป็นเปิด wakelock bool wakelockEnabled = false; // สถานะการเปิดใช้งาน wakelock @override void initState() { super.initState(); // ตั้งค่าเริ่มต้นเปิด wakelock _toggleWakelock(enable); } @override void dispose() { // ปิด wakelock เมื่อออกจากหน้านี้ WakelockPlus.disable(); super.dispose(); } Future<void> _toggleWakelock(bool enable) async { // ใช้ toggle เพื่อเปิดหรือปิด wakelock await WakelockPlus.toggle(enable: enable); // อัปเดตสถานะของ wakelock bool isEnabled = await WakelockPlus.enabled; setState(() { wakelockEnabled = isEnabled; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Videos'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Text( 'Wakelock is ${wakelockEnabled ? "Enabled" : "Disabled"}', style: const TextStyle(fontSize: 18), ), const SizedBox(height: 20), // แบบไม่ปรับแต่างสีสัน /* SwitchListTile( title: const Text('Enable Wakelock'), value: enable, onChanged: (bool value) { setState(() { enable = value; }); _toggleWakelock(value); }, ), */ // แบบปรับแต่งสีสันให้แตกต่าง SwitchListTile( title: Text( 'Enable Wakelock', style: TextStyle( fontSize: 18, fontWeight: FontWeight.bold, color: enable ? Colors.green : Colors.grey, // สีข้อความตามสถานะ ), ), value: enable, activeColor: Colors.green, // สีของ Switch เมื่อเปิด inactiveThumbColor: Colors.grey, // สีของ Switch เมื่อปิด inactiveTrackColor: Colors.grey.withOpacity(0.4), // สีแทร็กของ Switch เมื่อปิด onChanged: (bool value) { setState(() { enable = value; }); _toggleWakelock(value); }, ), ], ), ), ); } }
ตัวอย่างผลลัพธ์
เราสามารถนำไปปรับใช้กรณีที่ต้องการตั้งค่าก็ได้ แต่ถ้าปกติ เราสามารถใช้จากตัวอย่างแรกได้เลย
คือเปิดใช้งานในหน้าที่ต้องการ และปิดหรือยกเลิกการใช้งานเมื่อออกจากหน้านั้น
แพ็กเก็จนี้ดูเหมือนธรรมดา แต่ก็มีความสามารถเหมาะสมกับบางกรณีที่ต้องใช้งาน จึงนำมาเป็นบทความ
เผื่อเป็นประโยชน์ไม่มากก็น้อย