How to Use Reusable Widgets in the App

This is a guide to help developers find and use the reusable widgets created to improve code quality, maintain unity in the design and reduce code duplication. The widget is created once and can be implemented wherever needed, if something in it needs to be modified, it only needs to be done in one central place.

Components Reusable Widget

These are some examples:

Helper Functions:

widget/helpers/capitalize.dart should be used in the app when you want to capitalize words.

config/theme/constants/sizes.dart Whenever using dimensions to build UI elements, use the sizes found here. For example height: Sizes.medium instead of height: 24

config/theme/constants/colours.dart If a widget needs a colour that is not specific to a client, then use the theme colours found in this file. color: ThemeColours.blue

widgets/helpers/layout.dart: The layout helpers in this file should be used to make the code cleaner and design more consistent. For example for padding, instead of using EdgeInsets.all(24.0) we can use paddingMedium or instead of SizedBox(height: 24) use VerticalSpace()

widgets/helpers/text.dart: Use these text helpers to create unified typographic styles throughout the app. There is a limited amount of text elements, and these should have specific sizes, font weights, etc.

For example, instead of using:

Text(
    'Hello', 
    fontSize: 14,
    letterSpacing: 0.2,
    fontWeight: FontWeight.w700,
    color: Colors.blue,
)

Use this:
BodyLarge(
  data: 'Hello',
  colour: ThemeColours.blue,
)

The widgets in this file are mapped to all the text elements found in Figma, and have their respective names as a comment.