ป้องกันหน้าจอปิตอัตโนมัติด้วย Wakelock plus ใน Flutter

บทความใหม่ เดือนที่แล้ว โดย Ninenik Narkdee
wakelock plus

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ wakelock_plus

ดูแล้ว 227 ครั้ง


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

ตัวอย่างผลลัพธ์


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


กด Like หรือ Share เป็นกำลังใจ ให้มีบทความใหม่ๆ เรื่อยๆ น่ะครับ



ทบทวนบทความที่แล้ว









เนื้อหาที่เกี่ยวข้อง



Tags:: wakelock plus







URL สำหรับอ้างอิง





คำแนะนำ และการใช้งาน

สมาชิก กรุณา ล็อกอินเข้าระบบ เพื่อตั้งคำถามใหม่ หรือ ตอบคำถาม สมาชิกใหม่ สมัครสมาชิกได้ที่ สมัครสมาชิก


  • ถาม-ตอบ กรุณา ล็อกอินเข้าระบบ
  • เปลี่ยน


    ( หรือ เข้าใช้งานผ่าน Social Login )







เว็บไซต์ของเราให้บริการเนื้อหาบทความสำหรับนักพัฒนา โดยพึ่งพารายได้เล็กน้อยจากการแสดงโฆษณา โปรดสนับสนุนเว็บไซต์ของเราด้วยการปิดการใช้งานตัวปิดกั้นโฆษณา (Disable Ads Blocker) ขอบคุณครับ