Flutter如何调用AppUtils的package_info方法在仪表盘抽屉展示应用版本

步骤1：导入工具类文件 #

在dashboard.dart顶部引入你封装好的工具类，路径根据你项目的实际目录结构调整即可：

import 'package:你的项目名/对应路径/app_util.dart';

步骤2：选择异步加载版本号的方案 #

你封装的getAppDetails是异步方法，有两种常用的调用方案，按需选择即可：

方案一：页面初始化时预加载版本号（推荐） #

进入仪表盘页面时就提前加载版本号存到状态变量中，抽屉打开后可以直接展示，不会出现数据加载闪烁。

class _DashboardState extends State<Dashboard> {
  // 存储应用版本号的状态变量
  String _appVersion = '';

  @override
  void initState() {
    super.initState();
    // 页面初始化时触发版本号加载
    _loadAppVersion();
  }

  Future<void> _loadAppVersion() async {
    final version = await AppUtils.getAppDetails();
    // 加mounted判断，避免页面销毁后调用setState报错
    if (mounted) {
      setState(() {
        _appVersion = version;
      });
    }
  }

  // 其余原有页面代码...
}

在抽屉的列表项中直接调用变量即可：

Drawer(
  child: ListView(
    children: [
      // 你原有抽屉的其他列表项...
      ListTile(
        leading: Icon(Icons.info_outline),
        title: Text("应用版本"),
        trailing: Text(_appVersion.isEmpty ? "加载中..." : "v$_appVersion"),
      )
    ],
  ),
)

方案二：在抽屉位置直接用FutureBuilder加载 #

如果不想提前预存变量，可以直接在抽屉的对应位置用FutureBuilder处理异步逻辑：

Drawer(
  child: ListView(
    children: [
      // 你原有抽屉的其他列表项...
      FutureBuilder(
        future: AppUtils.getAppDetails(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done && snapshot.hasData) {
            return ListTile(
              leading: Icon(Icons.info_outline),
              title: Text("应用版本"),
              trailing: Text("v${snapshot.data}"),
            );
          }
          return ListTile(
            leading: Icon(Icons.info_outline),
            title: Text("应用版本"),
            trailing: Text("加载中..."),
          );
        },
      )
    ],
  ),
)

可选优化：明确工具类返回类型 #

建议你把现有的getAppDetails方法明确指定返回类型为Future<String>，避免后续开发出现类型校验错误，修改后代码如下：

class AppUtils {
  static Future<String> getAppDetails() async {
    final packageInfo = await PackageInfo.fromPlatform();
    String version = packageInfo.version;
    return version;
  }
}

内容的提问来源于stack exchange，提问作者Dhaval Chaudhari