Flutter环境配置展示插件env_banner的使用

Flutter环境配置展示插件env_banner的使用

环境配置展示插件env_banner

EnvBanner 是一个装饰性包装器，用于在小部件的角落显示一小段文本。它主要用于开发阶段，以便显示应用程序运行的环境，还可以显示版本或构建号。

此外，它也可以作为应用内部小部件的装饰。

开始使用

使用 env_banner 插件非常直观和简单。以下是一个快速示例：

在你的 main.dart 中创建应用时

import 'package:env_banner/env_banner.dart';
...

class MainApp extends StatelessWidget {
  ...

  [@override](/user/override)
  Widget build(BuildContext context) {
    ...
    return MaterialApp(
        ...
        home: EnvBanner(
          primary: 'DEV',
          secondary: '1.0.0',
          child: Scaffold(...),
        ),
    );
  }
}

计划改进

如果这个包得到了一些关注，我计划增加对图像、自定义小部件、动画等的支持。如果你有任何想法让这个包更适用，请打开一个问题！

完整示例

以下是完整的示例代码，演示如何在应用中使用 EnvBanner。

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

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

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false, // 关闭默认调试条
      home: EnvBanner(
        primary: 'DEV', // 主标签
        secondary: '1.0.0', // 次要标签
        child: MyHomePage(), // 主页面
      ),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('EnvBanner Demo Home Page')), // 设置AppBar标题
      body: Center(
        child: EnvBanner(
          ignoreMediaPadding: true, // 忽略媒体边距
          primary: 'Other label', // 另一个主标签
          location: EnvBannerLocation.bottomStart, // 设置位置
          child: Container(
            color: Colors.grey, // 设置背景颜色
            padding: const EdgeInsets.all(100), // 设置内边距
            child: const Text('EnvBanner as Widget Decoration'), // 显示文本
          ),
        ),
      ),
    );
  }
}

更多关于Flutter环境配置展示插件env_banner的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter环境配置展示插件env_banner的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


env_banner 是一个 Flutter 插件，用于在应用程序的 UI 中显示当前的环境（例如开发、测试、生产等）。它可以帮助开发者在不同的开发环境中轻松识别当前的应用版本或环境，避免混淆。

安装 env_banner 插件

首先，你需要在 pubspec.yaml 文件中添加 env_banner 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  env_banner: ^1.0.0

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

使用 env_banner

  1. 导入插件:

    在需要使用 env_banner 的 Dart 文件中，导入插件：

    import 'package:env_banner/env_banner.dart';

  2. 配置环境横幅:

    你可以在应用程序的根组件（通常是 MaterialApp 或 CupertinoApp）中配置 EnvBanner。EnvBanner 需要指定一个 child（通常是你的主应用程序组件）以及一个 environment 字符串。

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return EnvBanner(
      environment: 'Development', // 你可以根据当前环境设置不同的值
      color: Colors.red, // 横幅背景颜色
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: MyHomePage(),
      ),
    );
  }
}

  3. 自定义横幅样式:

    你可以通过 EnvBanner 的参数来自定义横幅的外观和行为。以下是一些常用的参数：

    • environment: 必填，指定当前环境的字符串。
    • color: 横幅的背景颜色，默认是红色。
    • textStyle: 横幅中文本的样式。
    • location: 横幅的位置，可以是 EnvBannerLocation.topLeft, EnvBannerLocation.topRight, EnvBannerLocation.bottomLeft, 或 EnvBannerLocation.bottomRight，默认是 EnvBannerLocation.topRight。
    return EnvBanner(
  environment: 'Staging',
  color: Colors.orange,
  textStyle: TextStyle(color: Colors.white, fontSize: 16),
  location: EnvBannerLocation.bottomLeft,
  child: MaterialApp(
    title: 'Flutter Demo',
    theme: ThemeData(
      primarySwatch: Colors.blue,
    ),
    home: MyHomePage(),
  ),
);
回到顶部