Appearance

Core UX Library Documentation ​

Overview ​

The Core UX Library is a comprehensive collection of UI components, utilities, and helpers designed to streamline the development of Flutter applications with a consistent user interface. It provides a wide range of pre-built widgets, theming options, and utility functions to enhance the user experience and maintain design consistency across the app.

Key Components ​

1. Buttons ​

The library offers various button styles to cater to different UI needs:

  • CustomButton: A versatile button component with customizable appearance.
  • DialogButton: Specifically designed for use in dialogs.
  • HBButtonLarge: A large-sized button with Hubtel's design language.
  • HBButtonOutline: An outlined button style.
  • HBOutlinedButtonLarge: A large-sized outlined button.
  • HBPlainTextButton: A text-only button.

2. Dialogs ​

A collection of pre-built dialog components for common use cases:

  • CancelDialog: A dialog for confirmation of cancellation actions.
  • DialogWithTextField: A dialog that includes a text input field.
  • HBActionsDialog: A dialog with customizable action buttons.
  • HBInfoDialog: An informational dialog.
  • HBPrimaryDialog: A primary-styled dialog.
  • HBPromptDialog: A dialog for user prompts.
  • HBRoundedDialog: A dialog with rounded corners.
  • HBSuccessDialog: A dialog for displaying success messages.
  • LoadingDialog: A dialog to indicate loading states.

3. Navigation ​

Components to assist with navigation and routing:

  • AppNavigatorObserver: An observer for tracking navigation events.
  • DeeplinkNavigator: Handles deep linking within the app.
  • SlideLeftRoute: A custom page route with a slide-left transition.

4. Theming ​

Utilities for consistent theming across the app:

  • HubtelColors: A collection of color constants used in the Hubtel design system.
  • Dimension: Defines standard dimensions for spacing and sizing.
  • AppTextStyle: Provides consistent text styles.

5. Utility Widgets ​

A set of utility widgets to enhance UI development:

  • AppImageWidget: A widget for displaying images with error and placeholder handling.
  • AppRefreshIndicator: A custom refresh indicator for pull-to-refresh functionality.
  • CircleImage: Displays images in a circular shape.
  • CustomExpansionWidget: An expandable widget for collapsible content.
  • HBDivider: A custom divider component.
  • LoadingIndicator: Displays a loading spinner.
  • UniformLazyPagingColumn: A column widget with lazy loading capabilities.
  • UniformLazyPagingGrid: A grid widget with lazy loading capabilities.

Usage ​

Buttons ​

To use a custom button:

dart
CustomButton(
isEnabled: true,
title: 'Press Me',
buttonAction: () {
// Button action here
},
)

Dialogs ​

To show a loading dialog:

dart
LoadingDialog(
  context: context,
  loadingText: 'Please wait...',
);

Utility Widgets ​

To use the lazy loading column:

dart
UniformLazyPagingColumn<int, ItemType>(
  pagingController: _pagingController,
  itemBuilder: (context, item) => YourItemWidget(item: item),
)

6. Graphing ​

The library includes a customizable bar graph component for data visualization:

BarGraph ​

The BarGraph widget provides a flexible way to display bar charts, supporting both simple and stacked bar configurations.

Key features:

  • Support for simple and stacked bar charts
  • Customizable colors and styling
  • Interactive tooltips
  • Automatic scaling and labeling

Usage example:

dart
BarGraph(
    dataPoints: [
    BarGraphDataPoint(label: 'A', value: 10),
    BarGraphDataPoint(label: 'B', value: 20),
    BarGraphDataPoint(label: 'C', value: 15),
 ],
    formatter: (value) => '${value.toStringAsFixed(2)}',
    graphColor: GraphColor(
    barBackgroundColor: Colors.grey[200]!,
    barColor: Colors.blue,
    ouchedBarColor: Colors.blueAccent,
    borderColor: Colors.black,
),
    barGraphType: BarGraphType.simple,
)

For stacked bars:

dart
BarGraph(
    dataPoints: [
        BarGraphDataPoint(
        label: 'A',
        value: 30,
        stackedValues: [
            StackBarGraphDataPoint(barColor: Colors.red, value: 10),
            StackBarGraphDataPoint(barColor: Colors.green, value: 20),
        ],
),
// ... more data points
],
    formatter: (value) => '${value.toStringAsFixed(2)}',
    graphColor: GraphColor(/ ... /),
    barGraphType: BarGraphType.stacked,
)

Best Practices ​

  1. Utilize the pre-built components to maintain consistency across the app.
  2. Leverage the theming utilities to ensure adherence to the design system.
  3. Use the utility widgets to simplify common UI patterns and reduce boilerplate code.
  4. Implement the custom dialogs for a consistent user experience in modal interactions.
  5. Take advantage of the lazy loading widgets for efficient list and grid displays.

Conclusion ​

The Core UX Library provides a robust set of UI components and utilities that can significantly streamline Flutter development while maintaining a consistent look and feel. By leveraging these tools, developers can create polished, performant, and visually cohesive applications with reduced development time and effort.