Flutter应用信息获取插件flutter_app_info的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter应用信息获取插件flutter_app_info的使用

flutter_app_info 是一个实用工具包,它将以下流行包的功能集成到一个易于访问的 AppInfo 继承小部件中,使得开发者无需直接依赖这些包:

快速设置

要使用 flutter_app_info,只需在 main() 函数中进行如下修改:

import 'package:flutter_app_info/flutter_app_info.dart';

void main() async {
  runApp(
    AppInfo(
      data: await AppInfoData.get(),
      child: const MyApp(),
    ),
  );
}

这样,AppInfoData 结构就可以在整个应用程序中使用,而不需要多次调用异步构造函数。

使用示例

下面是一个完整的示例代码,展示了如何使用 flutter_app_info 插件来显示应用信息、平台信息和目标平台信息。

示例代码

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:flutter_app_info/flutter_app_info.dart';

// 主函数
void main() async {
  runApp(
    AppInfo(
      data: await AppInfoData.get(),
      child: const MyApp(),
    ),
  );
}

// 应用主类
class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter App Info',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.light().copyWith(
        splashColor: Colors.transparent,
        splashFactory: NoSplash.splashFactory,
      ),
      home: const FlutterAppInfoExample(),
    );
  }
}

// 示例页面
class FlutterAppInfoExample extends StatefulWidget {
  const FlutterAppInfoExample({super.key});

  @override
  State<FlutterAppInfoExample> createState() => _FlutterAppInfoExampleState();
}

class _FlutterAppInfoExampleState extends State<FlutterAppInfoExample>
    with SingleTickerProviderStateMixin {
  late final TabController controller = TabController(vsync: this, length: 3);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Material(
            color: const Color(0xff2a416f),
            child: TabBar(
              controller: controller,
              labelColor: Colors.white,
              unselectedLabelColor: Colors.grey.shade300,
              indicatorColor: Colors.white,
              indicatorWeight: 4,
              indicatorPadding: const EdgeInsets.only(bottom: 2),
              overlayColor: WidgetStateColor.resolveWith((states) {
                if (states.contains(WidgetState.hovered)) {
                  return Colors.white24;
                } else {
                  return Colors.transparent;
                }
              }),
              tabs: [
                const Text('Package Info'),
                const Text('Platform Info'),
                const Text('Target Info'),
              ].map((e) => Padding(
                    padding: const EdgeInsets.symmetric(vertical: 12),
                    child: e,
                  )).toList(),
            ),
          ),
          Expanded(
            child: TabBarView(
              controller: controller,
              children: const [
                PackageInfoTab(),
                PlatformInfoTab(),
                TargetInfoTab(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

// 属性类
class Prop {
  Prop(this.prop, Object? value) {
    this.value = value.toString().isEmpty ? "''" : value.toString();
  }
  final String prop;
  late final String value;
}

// 属性表格类
class PropTable extends StatelessWidget {
  const PropTable({
    required this.title,
    required this.children,
    super.key,
  });

  final String title;
  final List<Prop> children;

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
      padding: const EdgeInsets.all(15),
      child: SelectionArea(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.only(bottom: 20),
              child: Text(
                title,
                style: const TextStyle(fontWeight: FontWeight.bold),
              ),
            ),
            SizedBox(
              width: MediaQuery.of(context).size.width.clamp(0, 1000) * 0.80,
              child: Table(
                border: TableBorder.all(color: Colors.grey.shade300),
                defaultVerticalAlignment: TableCellVerticalAlignment.middle,
                columnWidths: const {
                  0: IntrinsicColumnWidth(flex: 1),
                  1: FlexColumnWidth(2),
                },
                children: children
                    .map(
                      (e) => TableRow(
                        decoration: BoxDecoration(
                          color: children.indexOf(e).isEven
                              ? Colors.grey.shade200
                              : Theme.of(context).scaffoldBackgroundColor,
                        ),
                        children: [
                          Padding(
                            padding: const EdgeInsets.all(8),
                            child: Text(
                              e.prop,
                              style: const TextStyle(
                                fontFamily: 'Verdana',
                                fontWeight: FontWeight.bold,
                                fontSize: 12,
                              ),
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.all(8),
                            child: Text(
                              e.value,
                              style: const TextStyle(
                                fontFamily: 'Verdana',
                                fontSize: 12,
                              ),
                            ),
                          ),
                        ],
                      ),
                    )
                    .toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

// 包信息标签页
class PackageInfoTab extends StatelessWidget {
  const PackageInfoTab({super.key});

  @override
  Widget build(BuildContext context) {
    final package = AppInfo.of(context).package;

    return PropTable(
      title: 'Information about the installed package and version',
      children: [
        Prop('appName', package.appName),
        Prop('packageName', package.packageName),
        Prop('buildSignature', package.buildSignature),
        Prop('installerStore', package.installerStore),
        Prop('version', package.version.toString()),
        Prop('versionWithoutBuild', package.versionWithoutBuild.toString()),
      ],
    );
  }
}

// 平台信息标签页
class PlatformInfoTab extends StatelessWidget {
  const PlatformInfoTab({super.key});

  @override
  Widget build(BuildContext context) {
    final platform = AppInfo.of(context).platform;
    const encoder = JsonEncoder.withIndent('  ');

    return PropTable(
      title: 'Information about the platform for which the app was built',
      children: [
        Prop('isAndroid', platform.isAndroid),
        Prop('isIOS', platform.isIOS),
        Prop('isLinux', platform.isLinux),
        Prop('isMacOS', platform.isMacOS),
        Prop('isWeb', platform.isWeb),
        Prop('isWindows', platform.isWindows),
        Prop('isFuchsia', platform.isFuchsia),
        Prop('isDesktop', platform.isDesktop),
        Prop('isMobile', platform.isMobile),
        Prop('device', 'BaseDeviceInfo'),
        Prop('deviceJson', encoder.convert(platform.deviceJson)),
        Prop('executable', platform.executable),
        Prop('resolvedExecutable', platform.resolvedExecutable),
        Prop('executableArguments', platform.executableArguments),
        Prop('localHostname', platform.localHostname),
        Prop('localeName', platform.localeName),
        Prop('numberOfProcessors', platform.numberOfProcessors),
        Prop('operatingSystem', platform.operatingSystem),
        Prop('operatingSystemVersion', platform.operatingSystemVersion),
        Prop('packageConfig', platform.packageConfig),
        Prop('pathSeparator', platform.pathSeparator),
        Prop('script', platform.script),
        Prop('version', platform.version),
        Prop('environment', 'Map<String, String>'),
      ],
    );
  }
}

// 目标平台信息标签页
class TargetInfoTab extends StatelessWidget {
  const TargetInfoTab({super.key});

  @override
  Widget build(BuildContext context) {
    final target = AppInfo.of(context).target;

    return PropTable(
      title:
          'Information about the platform on which the app is currently executing',
      children: [
        Prop('defaultPlatform', target.defaultPlatform),
        Prop('isAndroid', target.isAndroid),
        Prop('isIOS', target.isIOS),
        Prop('isLinux', target.isLinux),
        Prop('isMacOS', target.isMacOS),
        Prop('isWeb', target.isWeb),
        Prop('isWindows', target.isWindows),
        Prop('isFuchsia', target.isFuchsia),
        Prop('isDesktop', target.isDesktop),
        Prop('isDesktopWeb', target.isDesktopWeb),
        Prop('isMobile', target.isMobile),
        Prop('isMobileWeb', target.isMobileWeb),
        Prop('isTablet', target.isTablet),
      ],
    );
  }
}

关键点总结

  1. 快速集成:通过在 main() 函数中添加 AppInfo 小部件,可以轻松获取应用信息。
  2. 属性访问:使用 AppInfo.of(context) 可以方便地访问应用、平台和目标平台的信息。
  3. 跨平台支持flutter_app_info 提供了对所有平台的支持,并且在 Web 上也能安全地访问平台信息。
  4. 静态属性:提供了几个静态属性(如 AppInfo.isWeb),可以在应用启动时使用。

通过上述示例代码和说明,您可以快速上手并充分利用 flutter_app_info 插件来获取和展示应用的相关信息。


更多关于Flutter应用信息获取插件flutter_app_info的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter应用信息获取插件flutter_app_info的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个关于如何使用 flutter_app_info 插件来获取 Flutter 应用信息的代码示例。这个插件允许你访问应用的包名、版本名、版本号等信息。

首先,你需要在 pubspec.yaml 文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  flutter_app_info: ^0.9.4  # 请检查最新版本号

然后,运行 flutter pub get 命令来安装依赖。

接下来,在你的 Dart 文件中导入 flutter_app_info 插件并使用它。以下是一个简单的示例代码:

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

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  AppInfo _appInfo;

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

  Future<void> _getAppInfo() async {
    try {
      _appInfo = await FlutterAppInfo.platformInfo;
      setState(() {});
    } catch (e) {
      print('Error fetching app info: $e');
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('App Info Example'),
        ),
        body: _appInfo == null
            ? Center(child: CircularProgressIndicator())
            : Padding(
                padding: const EdgeInsets.all(16.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text('Package Name: ${_appInfo.packageName}'),
                    SizedBox(height: 16),
                    Text('App Name: ${_appInfo.name}'),
                    SizedBox(height: 16),
                    Text('Version Name: ${_appInfo.versionName}'),
                    SizedBox(height: 16),
                    Text('Version Code: ${_appInfo.versionCode}'),
                    SizedBox(height: 16),
                    Text('Build Number: ${_appInfo.buildNumber}'),
                    SizedBox(height: 16),
                    Text('Application ID: ${_appInfo.applicationId}'),
                  ],
                ),
              ),
      ),
    );
  }
}

在这个示例中,我们首先导入了 flutter_app_info 包,然后在 MyApp 组件的 initState 方法中调用 _getAppInfo 方法来获取应用信息。_getAppInfo 方法是一个异步函数,它使用 FlutterAppInfo.platformInfo 来获取应用信息,并将结果存储在 _appInfo 变量中。

build 方法中,我们根据 _appInfo 是否为 null 来显示加载指示器或应用信息。如果 _appInfo 不为 null,我们将显示包名、应用名、版本名、版本代码、构建号和应用程序 ID。

这个示例展示了如何使用 flutter_app_info 插件来获取并显示 Flutter 应用的基本信息。你可以根据需要扩展这个示例,以显示更多或不同的信息。

回到顶部