Getting Started
FLEX UI is a collection of eCommerce widgets for Flutter developers that allows you to build stunning storefronts faster.
FLEX UI is NOT a component library - it’s better. It’s a carefully crafted collection of eCommerce widgets that you can copy and paste directly into your Flutter applications.
Why Not a Component Library?
We deliberately chose not to make this a traditional component library because:
- No Dependencies - You don’t install it as a package dependency
- Full Control - The code is yours to customize and modify
- Cherry Pick - Take only what you need, leave what you don’t
- Learn & Build - Use this as a reference to build your own component libraries
Think of FLEX UI as your personal UI cookbook - grab the recipes you like and make them your own. Check back for upgrades and new widgets as they become available!
Installation
- Install the Mason CLI:
dart pub global activate mason_cli
- Initialize Mason in your project:
mason init
- Add FLEX UI brick:
mason add flex_ui --git-url https://github.com/flex-storefront/flex_ui --git-path /brick
- Get the brick:
mason get
- Generate the UI components:
mason make flex_ui
Project Structure
When you generate the FLEX UI components, you’ll get the following structure:
lib/├── theme/ # Theme Configuration│ ├── flex_app_theme.dart # Main app theme│ └── subthemes/ # Widget-specific themes│├── tokens/ # Design System Tokens│ ├── colors.dart # Color palette│ ├── typography.dart # Text styles│ └── sizes.dart # Layout constants│├── utils/ # Utilities│ └── extensions/ # Common helper functions│├── widgets/ # FLEX UI Components│ ├── app_bar/ # Flex App Bar│ ├── carousel/ # Carousel display widget│ └── etc/ # Other components│└── main.dart # Widgetbook explorer app
How It Works
1. Design Tokens (/tokens
)
The foundation of your design system:
class FlexColors { static const primary = Color(0xFF2D3142); static const accent = Color(0xFFEF8354); // ...}
2. Theme Configuration (/theme
)
Customize the look and feel:
ThemeData buildFlexTheme() { return ThemeData( colorScheme: FlexColors.lightScheme, textTheme: FlexTextTheme.textTheme, // ... );}
3. You’re ready to go!
You’re ready to begin using the FlexWidgets in your storefront app.
FlexButton( title: 'Apply Sort & Filter', state: ButtonState.normal, onPressed: () => widget.onApplyFilters(),),
Support
- If you experience any issues, please open a ticket 🐛 Issue Tracker