เนื้อหาตอนต่อไปนี้ จะขอเอาแพ็กเก็จที่น่าสนใจและอาจจะ
มีประโยชน์ในการนำไปปรับใช้กับโปรเจ็คแอปของเรามาแนะนำ
ชื่อว่า 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);
},
),
],
),
),
);
}
}
ตัวอย่างผลลัพธ์

เราสามารถนำไปปรับใช้กรณีที่ต้องการตั้งค่าก็ได้ แต่ถ้าปกติ เราสามารถใช้จากตัวอย่างแรกได้เลย
คือเปิดใช้งานในหน้าที่ต้องการ และปิดหรือยกเลิกการใช้งานเมื่อออกจากหน้านั้น
แพ็กเก็จนี้ดูเหมือนธรรมดา แต่ก็มีความสามารถเหมาะสมกับบางกรณีที่ต้องใช้งาน จึงนำมาเป็นบทความ
เผื่อเป็นประโยชน์ไม่มากก็น้อย