how to load json data in a seperate method in a seperate file in flutter?

Issue

I have this json file which i use to change the color of the background:

# settings.json

{
    "view_background_color": "#f5f242",
}

In my main.dart file i have a Future method called initializeThemeData() which loads the file settings.json and then places the json string inside the variable data. The method returns a ThemeData() for the app. ThemeData() uses the data['view_background_color'] as the value for 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'])),
    
  );
}

Inside the ThemeData() i also grab the class Convertor() which i use to convert the hex color to a hexdecimal. This is the class that converts the data['view_background_color']:

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

}

My question is if i can also make a seperate method for loading the json file and place it in a seperate file and then call this method from the main.dart?

I then want to just place a variable like this: scaffoldBackgroundColor: Color(convertor.getColor(backGroundColor))

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

Solution

My initial thought is wondering why any of of this needs to come from a json file to begin with.

It's not really the Flutter way of doing things. Unless I'm missing something here, these are just hardcoded values. So you have extra code to make that work, with no added benefit, and actually making the app do more work to accomplish the same thing.

You could just have a constants file and that would spare you any conversion.

const viewBackgroundColor = Color(0xFFf5f242);

Then you pass that into your ThemeData and be done with it.

scaffoldBackgroundColor: viewBackgroundColor,

Or you could put it in a Settings class.

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

Then it would look like this

scaffoldBackgroundColor: Settings.viewBackgroundColor,

Edit:

While your designers are still working, you could do something like this.

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));
  }
}

Then your initializeThemeData would look like this.

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

  return ThemeData(
    scaffoldBackgroundColor: bgColor,
  );
}

Answered By - Loren.A