Flutter屏幕信息获取插件mobile_screen_info的使用

mobile_screen_info

A plugin to get screen information of mobile devices.

开始使用

在 pubspec.yaml 文件中添加此依赖：

dependencies:
  mobile_screen_info: ^1.0.0

然后运行 flutter pub get 来安装该插件。

使用方法

首先，导入必要的包并初始化插件：

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:mobile_screen_info/mobile_screen_info.dart';

接下来，在 initState 方法中通过异步调用获取屏幕信息：

class _MyAppState extends State<MyApp> {
  ScreenInfo? _screenInfo;
  final _mobileScreenInfoPlugin = MobileScreenInfo();

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 异步方法用于获取屏幕信息
  Future<void> initPlatformState() async {
    ScreenInfo? screenInfo;

    // 可能会抛出平台异常，因此使用 try/catch 块处理
    try {
      screenInfo = await _mobileScreenInfoPlugin.getScreenInfo();
    } on PlatformException {}

    // 如果小部件从树中移除，则丢弃回复
    if (!mounted) return;

    // 更新 UI 状态
    setState(() {
      _screenInfo = screenInfo;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('移动设备屏幕信息'),
        ),
        body: Center(
          child: Column(
            children: [
              // 显示屏幕的 PPI
              Text('PPI: ${_screenInfo?.ppi ?? '未知'}'),
              // 显示屏幕缩放比例
              Text('Scale: ${_screenInfo?.scale ?? '未知'}'),
              // 显示屏幕宽度（像素）
              Text('Width: ${_screenInfo?.width ?? '未知'}'),
              // 显示屏幕高度（像素）
              Text('Height: ${_screenInfo?.height ?? '未知'}'),
              // 显示屏幕宽度（厘米）
              Text('Width in CM: ${_screenInfo?.widthInCm ?? '未知'}'),
              // 显示屏幕高度（厘米）
              Text('Height in CM: ${_screenInfo?.heightInCm ?? '未知'}'),
              // 显示屏幕宽度（英寸）
              Text('Width in Inch: ${_screenInfo?.widthInInch ?? '未知'}'),
              // 显示屏幕高度（英寸）
              Text('Height in Inch: ${_screenInfo?.heightInInch ?? '未知'}'),
            ],
          ),
        ),
      ),
    );
  }
}

完整示例代码

以下是完整的示例代码，展示了如何使用 mobile_screen_info 插件来获取屏幕信息：

import 'package:flutter/material.dart';
import 'dart:async';

import 'package:flutter/services.dart';
import 'package:mobile_screen_info/mobile_screen_info.dart';

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ScreenInfo? _screenInfo;
  final _mobileScreenInfoPlugin = MobileScreenInfo();

  @override
  void initState() {
    super.initState();
    initPlatformState();
  }

  // 平台消息是异步的，因此我们在此处进行初始化
  Future<void> initPlatformState() async {
    ScreenInfo? screenInfo;

    // 平台消息可能会失败，因此我们使用 try/catch 块处理 PlatformException
    try {
      screenInfo = await _mobileScreenInfoPlugin.getScreenInfo();
    } on PlatformException {}

    // 如果小部件从树中移除，则丢弃回复
    if (!mounted) return;

    // 更新 UI 状态
    setState(() {
      _screenInfo = screenInfo;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text('移动设备屏幕信息'),
        ),
        body: Center(
          child: Column(
            children: [
              Text('PPI: ${_screenInfo?.ppi ?? '未知'}'),
              Text('Scale: ${_screenInfo?.scale ?? '未知'}'),
              Text('Width: ${_screenInfo?.width ?? '未知'}'),
              Text('Height: ${_screenInfo?.height ?? '未知'}'),
              Text('Width in CM: ${_screenInfo?.widthInCm ?? '未知'}'),
              Text('Height in CM: ${_screenInfo?.heightInCm ?? '未知'}'),
              Text('Width in Inch: ${_screenInfo?.widthInInch ?? '未知'}'),
              Text('Height in Inch: ${_screenInfo?.heightInInch ?? '未知'}'),
            ],
          ),
        ),
      ),
    );
  }
}

输出结果

运行上述代码后，您将在屏幕上看到类似以下的输出：

PPI: 240
Scale: 2.0
Width: 1080
Height: 2400
Width in CM: 16.9
Height in CM: 38.0
Width in Inch: 6.7
Height in Inch: 15.0