如何在flutter中以单独的方法在单独的文件中加载json数据？

Question

我有这个 json 文件，我用它来改变背景的颜色：

# settings.json

{
    "view_background_color": "#f5f242",
}

在我的

main.dart

文件中，我有一个名为

Future

的

initializeThemeData()

方法，它加载文件

settings.json

，然后将 json 字符串放入变量

data

中。该方法返回应用程序的

ThemeData()

。

ThemeData()

使用

data['view_background_color']

作为

scaffoldBackgroundColor

的值。

# main.dart 
Future<ThemeData> initializeThemeData() async {
  String jsonData =
      await rootBundle.loadString('assets/config/client_settings.json');
  Map<String, dynamic> data = jsonDecode(jsonData);

  return ThemeData(
    scaffoldBackgroundColor:
        Color(convertor.getColor(data['view_background_color'])),
    
  );
}

在

ThemeData()

中，我还获取了

Convertor()

类，我用它来将十六进制颜色转换为十六进制。这是转换

data['view_background_color']

:

的类

# convertor.dart
class Convertor {
  int getColor(String hexColor) {
    return int.parse("0xFF" + hexColor.substring(1));
  }

}

我的问题是我是否还可以创建一个单独的方法来加载 json 文件并将其放在单独的文件中，然后从

main.dart

调用此方法？

然后我想放置一个像这样的变量：

scaffoldBackgroundColor: Color(convertor.getColor(backGroundColor))

而不是：

scaffoldBackgroundColor: Color(convertor.getColor(data['view_background_color']))

Answer 1

我最初的想法是想知道为什么这些都需要来自

json

文件。

这并不是 Flutter 真正的做事方式。除非我在这里遗漏了一些东西，否则这些只是硬编码的值。因此，您有额外的代码来完成这项工作，没有任何额外的好处，并且实际上使应用程序做更多的工作来完成同样的事情。

您可以只拥有一个常量文件，这样就无需进行任何转换。

const viewBackgroundColor = Color(0xFFf5f242);

然后将其传递到您的

ThemeData

并完成。

scaffoldBackgroundColor: viewBackgroundColor,

或者你可以把它放在

Settings

类中。

class Settings {
 static const viewBackgroundColor = Color(0xFFf5f242);
}

然后就变成这样了

scaffoldBackgroundColor: Settings.viewBackgroundColor,

编辑：

当你的设计师仍在工作时，你可以做这样的事情。

class SettingsConverter {
  static Future<Color> getColorFromJson(String key) async {
    String jsonData = await rootBundle.loadString('assets/config/client_settings.json');
    Map<String, dynamic> data = jsonDecode(jsonData);
    return Color(ColorConvertor.getColor(data[key]));
  }
}

class ColorConvertor {
  static int getColor(String hexColor) {
    return int.parse("0xFF" + hexColor.substring(1));
  }
}

那么你的

initializeThemeData

就会像这样。

Future<ThemeData> initializeThemeData() async {
  final bgColor =
      await SettingsConverter.getColorFromJson('view_background_color');

  return ThemeData(
    scaffoldBackgroundColor: bgColor,
  );
}