Flutter屏幕适配与配置管理插件flutter_fit_utils_config的使用

Flutter屏幕适配与配置管理插件flutter_fit_utils_config的使用

A flutter package to easily manage configurations. This package is part of the flutter_fit_utils environement.

flutter_fit_utils drawio

特性

使用此包可以：

  • 获取统一类的各个配置
  • 创建来自Firebase远程配置的配置

开始使用

  1. 打开你的pubspec.yaml文件
  2. 在dependencies下添加以下行：
flutter_fit_utils_config: ^1.0.0
  1. 获取依赖项
flutter pub get

使用方法

要从Firebase远程配置中读取值，只需创建一个继承自RemoteConfig的类：

/// 示例配置类。
class CharacterConfig extends RemoteConfig {
  int speed = 0;
  int attack = 0;

  [@override](/user/override)
  void read() {
    // 从appConfig中获取速度和攻击值
    speed = appConfig.getInt("speed");
    attack = appConfig.getInt("attack");
  }
}

要读取你的配置，只需调用initialize()方法：

final CharacterConfig characterConfig = CharacterConfig();
await characterConfig.initialize();

注意，所有RemoteConfig共享相同的FirebaseRemoteConfig实例。因此，只要对任何一个RemoteConfig实例调用了initialize()方法，你就不需要对其他实例再次调用它：

final CharacterConfig characterConfig = CharacterConfig();
await characterConfig.initialize();

final CharacterConfig otherConfig = CharacterConfig();
otherConfig.read();

对于那些没有调用initialize()方法的实例，请确保调用read()方法。

示例代码

以下是一个完整的示例代码，展示了如何使用该插件进行配置管理：

import 'package:flutter_fit_utils_config/remote_config.dart';

Future<void> main() async {
  // 初始化CharacterConfig
  final CharacterConfig characterConfig = CharacterConfig();
  await characterConfig.initialize();

  // 读取OtherConfig
  final OtherConfig config = OtherConfig();
  config.read();
}

/// 示例配置类。
class CharacterConfig extends RemoteConfig {
  int speed = 0;
  int attack = 0;

  [@override](/user/override)
  void read() {
    // 从appConfig中获取速度和攻击值
    speed = appConfig.getInt("speed");
    attack = appConfig.getInt("attack");
  }
}

/// 示例配置类。
class OtherConfig extends RemoteConfig {
  int stuff = 0;

  [@override](/user/override)
  void read() {
    // 从appConfig中获取stuff值
    stuff = appConfig.getInt("stuff");
  }
}

更多关于Flutter屏幕适配与配置管理插件flutter_fit_utils_config的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter屏幕适配与配置管理插件flutter_fit_utils_config的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何使用 flutter_fit_utils_config 插件进行 Flutter 屏幕适配与配置管理的代码示例。flutter_fit_utils_config 是一个方便的 Flutter 插件，可以帮助开发者进行屏幕适配以及配置管理。

1. 添加依赖

首先，在你的 pubspec.yaml 文件中添加 flutter_fit_utils_config 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_fit_utils_config: ^最新版本号  # 请替换为实际版本号

然后运行 flutter pub get 以获取依赖。

2. 初始化配置

在你的 Flutter 应用的主入口文件（通常是 main.dart）中，初始化配置和屏幕适配。

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

void main() {
  // 初始化配置管理
  FitUtilsConfig.init(
    designWidth: 375,  // 设计稿的宽度
    designHeight: 667, // 设计稿的高度
    isLog: true,       // 是否打印日志（开发时设置为true，生产环境设置为false）
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomeScreen(),
    );
  }
}

3. 使用适配后的尺寸

你可以使用 FitUtilsConfig 提供的适配方法来进行布局。例如，使用 FitUtilsConfig.scaleWidth 和 FitUtilsConfig.scaleHeight 来适配宽度和高度。

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

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter 屏幕适配示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: FitUtilsConfig.scaleWidth(100),  // 适配后的宽度
              height: FitUtilsConfig.scaleHeight(50), // 适配后的高度
              color: Colors.blue,
              child: Center(
                child: Text(
                  '适配后的容器',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            SizedBox(height: FitUtilsConfig.scaleHeight(20)), // 适配后的间距
            Text(
              '屏幕宽度: ${FitUtilsConfig.screenWidth} px\n屏幕高度: ${FitUtilsConfig.screenHeight} px',
              style: TextStyle(fontSize: FitUtilsConfig.scaleFontSize(16)), // 适配后的字体大小
            ),
          ],
        ),
      ),
    );
  }
}

4. 自定义配置

你还可以自定义一些全局配置，例如字体大小比例、间距比例等。

void main() {
  // 自定义配置
  FitUtilsConfig.init(
    designWidth: 375,
    designHeight: 667,
    isLog: true,
    baseFontSize: 16.0,  // 基础字体大小
    fontSizeRatio: 1.0,  // 字体大小比例
    widthRatio: 1.0,     // 宽度比例
    heightRatio: 1.0,    // 高度比例
  );

  runApp(MyApp());
}

5. 注意事项

  • 确保设计稿尺寸与 designWidth 和 designHeight 一致，以确保适配效果准确。
  • 在不同设备和屏幕尺寸上测试应用，确保适配效果良好。

通过上述代码示例，你可以在 Flutter 项目中方便地使用 flutter_fit_utils_config 插件进行屏幕适配和配置管理。

回到顶部