flutter_declarative_mdx_extensions
Common, production-ready MDX components for use with flutter_declarative_mdx.
This package provides a collection of reusable TagHandler implementations for frequently used input and validation scenarios — particularly for UK financial and personal data.
It is designed to be used alongside flutter_declarative_mdx and offers quick, drop-in components that can be registered via Customizations.
What This Package Provides
The extensions package contains ready-made MDX components organised by domain.
- Financial Components (
/financials)- SortCode
- AccountNumber
- Personal Components (
/personal)- NiNumber
Installation
Add to your pubspec.yaml:
dependencies:
flutter_declarative_mdx: ^latest
flutter_declarative_mdx_extensions: ^latest
Usage
Import the extension package:
import 'package:flutter_declarative_mdx_extensions/flutter_declarative_mdx_extensions.dart';
Register the provided components via Customizations:
DeclarativeMdx.fromPageContent(
mdxContent,
customizations: Customizations(
customComponents: [
SortCodeTagHandler(),
AccountNumberTagHandler(),
NINumberTagHandler(),
],
),
);
Then in your markdown:
Sort Code
<SortCode name="sortCode" label="Sort code" required="true">
</SortCode>
Account Number
<AccountNumber name="accountNumber" label="Account number" required="true">
</AccountNumber>
National Insurance Number
<NINumber name="niNumber" label="National Insurance number" required="true">
</NINumber>
Design Principles
This package aims to:
- Provide sensible defaults for common UK use cases
- Keep implementations lightweight
- Avoid opinionated styling
- Integrate cleanly with ModelStateProvider
- Remain extensible and composable
It is not a full form framework, it simply provides reusable building blocks.
Model Binding
All components:
- Store raw values in the model (digits-only where appropriate)
- Perform client-side validation
- Surface errors inline
- Remain compatible with server-driven workflows
When to Use This Package
Use this extensions package when:
- You are building UK financial flows
- You need quick, consistent validation components
- You want to reduce boilerplate TagHandler code
- You are prototyping workflows rapidly
If you require deeper domain validation (e.g. modulus checking for bank accounts), you may extend these handlers.
Status
This package is evolving alongside flutter_declarative_mdx. APIs may expand as additional common components are identified.
Contributions are welcome.