Flutter版本展示插件version_banner的使用

Version Banner

一个可以显示当前应用程序版本的Banner小部件。可以与应用口味一起使用，以显示当前正在使用的应用口味。

使用步骤

此小部件应该包裹在MaterialApp或CupertinoApp周围。

VersionBanner(
          text: "Yay!", // 显示的文字
          packageExtensions: [".dev"], // 匹配包名后缀
          child: MaterialApp(
                       debugShowCheckedModeBanner: false,
                       title: 'Flutter Demo',
                       theme: ThemeData(
                         primarySwatch: Colors.blue,
                       ),
                       home: MyHomePage(title: 'Flutter Demo Home Page'),
                     )
      );

packageExtensions会检查应用程序的包名是否包含给定数组中的字符串部分。如果包名包含数组中的字符串，则显示Banner。

可以更改以下属性：

• color - Banner的颜色
• textStyle - Banner的文本样式
• text - 要显示的文本。如果设置为null，则会显示pubspec文件中的版本号
• location - Banner在屏幕上的位置，基于类BannerLocation
• packageExtensions - 检查应用程序的包名是否包含给定数组中的字符串部分。如果包名包含数组中的字符串，则显示Banner
• visible - 决定Banner是否可见。如果设置为false，则覆盖packageExtensions属性

完整示例

以下是完整的示例代码，展示了如何使用version_banner插件来显示开发版本的Banner。

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

void main() {
  bool isDevVersion = true; // 是否为开发版本
  runApp(MyApp(isDevVersion)); // 运行应用程序
}

class MyApp extends StatelessWidget {
  bool isDevVersion; // 开发版本标志

  MyApp(this.isDevVersion); // 构造函数

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建MaterialApp
    var materialApp = MaterialApp(
      debugShowCheckedModeBanner: false, // 禁用默认调试标志
      title: 'Flutter Demo', // 应用名称
      theme: ThemeData(
        primarySwatch: Colors.blue, // 主色调
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'), // 主页面
    );

    // 如果是开发版本，添加Banner
    if (isDevVersion) {
      return VersionBanner(
        packageExtensions: ["example"], // 匹配包名后缀
        child: materialApp, // 子组件
      );
    }

    // 否则直接返回MaterialApp
    return materialApp;
  }
}

// 主页面
class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0; // 计数器

  void _incrementCounter() {
    setState(() {
      _counter++; // 增加计数器
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title), // 设置标题
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center, // 居中对齐
          children: <Widget>[
            Text(
              '你点击按钮的次数:', // 提示文字
            ),
            Text(
              '$_counter', // 显示计数器值
              style: Theme.of(context).textTheme.display1, // 设置字体样式
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton( // 浮动按钮
        onPressed: _incrementCounter, // 点击事件
        tooltip: '增加', // 提示文字
        child: Icon(Icons.add), // 图标
      ),
    );
  }
}