Declaring a Styles file in Flutter

Question

I would like to know which is the best way of implementing a Styles file inside Flutter with all my color information and Text-style.

Running through some tutorials some seems to use an abstract class and others use functions. Also the import is done differently.

Performance/Convenience/Organization-wise what is the best way to do this?

Or should I avoid doing this entirely and just declare everything as Themes instead?

• First method:

  styles.dart file imported as

  import 'styles.dart';
  

  styles.dart file:

  import 'package:flutter/widgets.dart';
  
  abstract class ThemeText {
    static const TextStyle progressHeader = TextStyle(
        fontFamily: 'Montserrat',
        color: ThemeColor.bodyText,
        fontSize: 40,
        height: 0.5,
        fontWeight: FontWeight.w600);
  }
  
  

• Second method:

  utils.dart file imported as:

  import './utils.dart' as utils;
  

  utils.dart content:

  TextStyle getProgressHeaderStyle() {
    return const TextStyle(
        color: ThemeColor.bodyText,
        fontFamily: 'Montserrat',
        fontWeight: FontWeight.w600,
        fontSize: 40.0,
        height: 0.5);
  }
  

Answer 1

For the import part, you can use one of the below, they have the same meaning:

import 'package:your_project_name/utils.dart';
import './utils.dart';
import 'utils.dart';

it just a matter of convention.

You should use import 'package:your_project_name/utils.dart'; to classifying imported library from outside of your project. And use import 'utils.dart'; for your internal library.

using import './utils.dart'; feel superfluous to me. Seems that it use the unix file path convention which ./ means a current directory.

For the as keyword in the following line:

 import './utils.dart' as utils;

it means that you want to group all the code in utils.dart as utils. So, whenever you need to use the code from utils.dart, you need to use utils before calling the function in it. Something like this:

utils.getProgressHeaderStyle()

---

For styles.dart and utils.dart,

Using an abstract class and const variable is good way to organizing all your related style in a group. In your following code:

abstract class ThemeText {
  static const TextStyle progressHeader = TextStyle(
      fontFamily: 'Montserrat',
      color: ThemeColor.bodyText,
      fontSize: 40,
      height: 0.5,
      fontWeight: FontWeight.w600);
}

you're grouping the style as a group of ThemeText. Consider the following scenario: You need three progress styles for your Text header, body, and footer. So, you need to group all of them as a group of text. You can do the following then:

abstract class ThemeText {
  static const TextStyle progressHeader = TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.black,
      fontSize: 40,
      height: 0.5,
      fontWeight: FontWeight.w600);

  static const TextStyle progressBody = TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.white,
      fontSize: 10,
      height: 0.5,
      fontWeight: FontWeight.w400);

  static const TextStyle progressFooter = TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.black,
      fontSize: 20,
      height: 0.5,
      fontWeight: FontWeight.w600);
}

So, you now have three variables that you can access with:

ThemeText.progressHeader;
ThemeText.progressBody;
ThemeText.progressFooter;

You have one place for all the Text style properties now!

---

Now, how about using the utils.dart for organizing your style? Your utils.dart is the following:

TextStyle getProgressHeaderStyle() {
  return const TextStyle(
      color: ThemeColor.bodyText,
      fontFamily: 'Montserrat',
      fontWeight: FontWeight.w600,
      fontSize: 40.0,
      height: 0.5);
}

adding the body and footer will make it become this:

TextStyle getProgressHeaderStyle() {
      return const TextStyle(
          color: ThemeColor.bodyText,
          fontFamily: 'Montserrat',
          fontWeight: FontWeight.w600,
          fontSize: 40.0,
          height: 0.5);
    }

TextStyle getProgressBodyStyle() {
  return const TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.white,
      fontSize: 10,
      height: 0.5,
      fontWeight: FontWeight.w400);
}

TextStyle getProgressFooterStyle() {
  return const TextStyle(
      fontFamily: 'Montserrat',
      color: Colors.black,
      fontSize: 20,
      height: 0.5,
      fontWeight: FontWeight.w600);
}

where you can access all the function like this:

utils.getProgressHeaderStyle();
utils.getProgressBodyStyle();
utils.getProgressFooterStyle();

you can see that you're now accessing a group of method not a properties of styles.

You also have a small performance hits (though negligible) whenever you're calling a function.