storing appearance and metrics constants in Flutter app

Question

While developing flutter app with many widgets involved on the same screen I realised that it can be useful to store some structs with appearance and metrics constants that are used on screen somewhere outside widgets but I am not sure where.

For example - I have blog post widget that consists of 8-10 Text widgets. And I want to store their TextStyles properties somewhere together so it would be easy to modify them and this widgets code will be shorter.

Same thing can be applied to metrics: width, padding, corner radius etc.

Answer 1

Your question context in reducing boilerplate code by creating custom component with high reuse-ability and maintenance.

So you can achieve this with 4 simple steps:

1. Create application directory as :

    -\resources (parent resource directory)
      -\menus (store all menus list constants)
      -\values
        -\app_strings.dart (store all strings constants)
        -\app_colors.dart  (store all colors constants)
        -\app_styles.dart  (store all styles i.e. material dark, light, cupertino etc.)
        -\app_dimens.dart  (store all dimension constants)

    -\components (parent component directory)
      -\your_custom_widget.dart(create custom component here)
      -\.....

    -\views
      -\your_view.dart(your view where you import custom component)

2. Creating resource constants:

Its very easy steps as you have to add only constants in respective resource files.

Example - creating color constants in app_colors.dart

import 'package:flutter/material.dart';

/// App Colors Class - Resource class for storing app level color constants
class AppColors {

  static const Color PRIMARY_COLOR = Color(0xFF35B4C5);
  static const Color PRIMARY_COLOR_LIGHT = Color(0xFFA5CFF1);
  static const Color PRIMARY_COLOR_DARK = Color(0xFF0D3656);
  static const Color ACCENT_COLOR = Color(0xFFF2DA04);
}

3. Create custom components:

Now in components directory create a custom widget as :

class CustomWidget extends StatefulWidget{
   // Declare your widget parameters 
   final data-type your_parameter;
   .....
   .....
   .....

  // Create constant constructor 
  const CustomWidget(
    // Initialize all your widget parameters
    this.your_parameter
    .....
    .....
    .....)
  @override
  _CustomWidgetState createState() => _CustomWidgetState();
}


/// CustomWidget State class
class _CustomWidgetState extends State<CustomWidget>{
   // Here you should use existing widget from either material library or cupertino etc

    @override
    Widget build(BuildContext context) {
       return ExistingBaseWidget(
          // Set here all necessary parameters for customization
          // For setting constansts from resources you do it like this
          color : AppColors.COLOR_NAME,
          radius : AppDimens.BORDER_RADIUS,
          .......
       );
   }

}

4. Import custom widget to any views: In your any views you can import custom widgets as use like this

child: CustomWidget(
       // Initialize all required parameters
       )

Advantages

1. In future whenever you want to change your custom widgets or resources constants, you have to change it in only one place and it will reflect in all places.

2. Also you can use this custom widgets and resource constants in all your projects with minor modification.

3. Views code looks more clean and readable.