Flutter环境信息显示插件environment_widget的使用

Flutter环境信息显示插件environment_widget的使用

Environment Widget 是一个用于轻松实现环境配置的插件。通过该插件，您可以轻松地在开发、测试和生产环境中切换不同的配置。

如何使用

首先，创建表示不同环境的文件。然后进行如下配置：

Environment(
    bannerColor: Colors.orange,
    bannerTag: 'Dev',
    baseUrl: 'https://dev.foo.bar',
)

Environment(
    bannerColor: Colors.purple,
    bannerTag: 'Hmg',
    baseUrl: 'https://hmg.foo.bar',
    bannerLocation: BannerLocation.bottomEnd,
)

Environment(
    baseUrl: 'https://foo.bar',
    lightThemeData: ThemeData(),
    darkThemeData: ThemeData(),
)

更多详细信息请查看 GitHub 上的示例项目。

示例代码

以下是一个完整的示例代码，展示了如何使用 environment_widget 插件：

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

// 定义一个异步函数，用于初始化环境并返回应用的主窗口
Future<Widget> run({
  required Environment environment,
}) async {
  WidgetsFlutterBinding.ensureInitialized(); // 确保Flutter绑定已初始化

  // 加载和检查所有必要的配置

  return Application(
    environment: environment,
  );
}

// 定义应用程序的主窗口
class Application extends StatelessWidget {
  final Environment environment;

  const Application({
    required this.environment,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    // 返回带有环境信息的窗口
    return this.environment.widget(
          appWidget: MaterialApp(
            theme: this.environment.lightThemeData, // 设置亮主题
            darkTheme: this.environment.darkThemeData, // 设置暗主题
            debugShowCheckedModeBanner: false, // 关闭调试模式横幅
            home: Home( // 设置主页
              baseURL: this.environment.baseUrl,
            ),
          ),
        );
  }
}

// 定义主页窗口
class Home extends StatelessWidget {
  final String? baseURL;

  const Home({
    this.baseURL,
  });

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Environment Widget'), // 设置标题
      ),
      body: Center(
        child: Text(
          this.baseURL ?? '', // 显示基础URL
        ),
      ),
    );
  }
}

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

1 回复

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


environment_widget 是一个 Flutter 插件，用于在开发环境中显示应用程序的环境信息，例如当前的环境（开发、测试、生产等）、版本号、构建号等。这些信息通常会在调试时非常有用，方便开发者快速了解应用程序的运行环境。

1. 安装插件

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

dependencies:
  flutter:
    sdk: flutter
  environment_widget: ^1.0.0  # 请使用最新版本

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

2. 配置环境信息

在你的应用程序中，你可以通过 EnvironmentConfig 类来配置环境信息。通常，你可以在 main.dart 文件中进行配置：

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

void main() {
  // 配置环境信息
  EnvironmentConfig(
    environment: 'Development',  // 当前环境
    version: '1.0.0',            // 版本号
    buildNumber: '1',            // 构建号
    showBanner: true,            // 是否显示环境横幅
  );

  runApp(MyApp());
}

3. 使用 EnvironmentWidget

EnvironmentWidget 是一个可以在应用程序中显示环境信息的组件。你可以在应用程序的任何地方使用它，例如在 MaterialApp 的 builder 中：

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

void main() {
  EnvironmentConfig(
    environment: 'Development',
    version: '1.0.0',
    buildNumber: '1',
    showBanner: true,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Environment Widget Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
      builder: (context, child) {
        return EnvironmentWidget(
          child: child,
        );
      },
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Hello, World!'),
      ),
    );
  }
}

4. 自定义环境横幅

你可以通过 EnvironmentConfig 的 bannerColor 和 bannerTextColor 属性来自定义环境横幅的颜色和文本颜色：

EnvironmentConfig(
  environment: 'Development',
  version: '1.0.0',
  buildNumber: '1',
  showBanner: true,
  bannerColor: Colors.red,      // 横幅背景颜色
  bannerTextColor: Colors.white,// 横幅文本颜色
);

5. 动态更新环境信息

如果你需要在运行时动态更新环境信息，可以使用 EnvironmentConfig.update 方法：

EnvironmentConfig.update(
  environment: 'Production',
  version: '2.0.0',
  buildNumber: '2',
);

6. 在应用程序中访问环境信息

你可以通过 EnvironmentConfig.of(context) 来访问当前的环境信息：

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    final envConfig = EnvironmentConfig.of(context);

    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Environment: ${envConfig.environment}'),
            Text('Version: ${envConfig.version}'),
            Text('Build Number: ${envConfig.buildNumber}'),
          ],
        ),
      ),
    );
  }
}
回到顶部