motion_x_ui 2.0.2 
motion_x_ui: ^2.0.2 copied to clipboard
The ultimate Flutter Premium Design System + Motion Framework. 200+ components, 10 presets, border beam, aurora, glass, 3D tilt, magnetic effects, and premium loaders — all with zero boilerplate.
example/lib/main.dart
import 'package:flutter/material.dart';
import 'package:motion_x_ui/motion_x_ui.dart';
void main() {
runApp(const MotionXShowcaseApp());
}
class MotionXShowcaseApp extends StatefulWidget {
const MotionXShowcaseApp({super.key});
@override
State<MotionXShowcaseApp> createState() => _MotionXShowcaseAppState();
}
class _MotionXShowcaseAppState extends State<MotionXShowcaseApp> {
Color _primaryColor = const Color(0xFF3B82F6); // Default Clean Royal Blue
bool _isDarkMode = false; // Default Clean White Mode as requested
double _customProgress = 0.68;
bool _switchVal1 = true;
bool _switchVal2 = false;
String _segmentedVal = 'Overview';
// Story sample data
final List<Map<String, dynamic>> _stories = [
{'username': 'sarah.ui', 'color': const Color(0xFFEC4899), 'unseen': true},
{'username': 'alex.dev', 'color': const Color(0xFF3B82F6), 'unseen': true},
{'username': 'design_hub', 'color': const Color(0xFF8B5CF6), 'unseen': true},
{'username': 'motion_x', 'color': const Color(0xFF10B981), 'unseen': false},
{'username': 'linear_ui', 'color': const Color(0xFFF59E0B), 'unseen': true},
];
final List<Color> _colorPalette = const [
Color(0xFF3B82F6), // Royal Blue
Color(0xFF6366F1), // Indigo
Color(0xFF8B5CF6), // Neon Purple
Color(0xFFEC4899), // Sunset Pink
Color(0xFF10B981), // Emerald Green
Color(0xFFF59E0B), // Amber Gold
Color(0xFF0F172A), // Dark Slate
];
@override
Widget build(BuildContext context) {
final bgColor = _isDarkMode ? const Color(0xFF09090B) : const Color(0xFFF8FAFC);
final cardBgColor = _isDarkMode ? const Color(0xFF18181B) : Colors.white;
final textColor = _isDarkMode ? Colors.white : const Color(0xFF0F172A);
final subTextColor = _isDarkMode ? const Color(0xFFA1A1AA) : const Color(0xFF64748B);
return MaterialApp(
title: 'MotionX UI - Design System Studio',
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
brightness: _isDarkMode ? Brightness.dark : Brightness.light,
scaffoldBackgroundColor: bgColor,
fontFamily: 'Roboto',
),
home: Scaffold(
body: SafeArea(
child: SingleChildScrollView(
padding: const EdgeInsets.symmetric(horizontal: 24, vertical: 20),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 860),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Header Bar with Title + Mode Switches
_buildHeaderBar(textColor, subTextColor),
const SizedBox(height: 24),
// Color Picker Control Panel
_buildColorCustomizerCard(cardBgColor, textColor, subTextColor),
const SizedBox(height: 36),
// Section 1: Clean Primary & Tactile Buttons Showcase
_buildSectionHeader('🔘 Buttons & Tactile Pills', 'Clean Primary, Aurora AI, Metallic Tactile & 3D Glowing buttons', textColor, subTextColor),
const SizedBox(height: 16),
_buildButtonsShowcase(cardBgColor),
const SizedBox(height: 36),
// Section 2: Status Badges Showcase
_buildSectionHeader('🏷️ Clean Status Chips & Badges', 'Modern pill badges for Online, AI, Tasks, and System States', textColor, subTextColor),
const SizedBox(height: 16),
_buildStatusBadgesShowcase(cardBgColor),
const SizedBox(height: 36),
// Section 3: 3D Glowing Toggles & Controls
_buildSectionHeader('⚡ 3D Illuminated Controls', 'Tactile switches with glowing active tracks & segmented pills', textColor, subTextColor),
const SizedBox(height: 16),
_buildControlsShowcase(cardBgColor, textColor),
const SizedBox(height: 36),
// Section 4: Progress Bars & Rings
_buildSectionHeader('📊 Clean Progress Bars', 'Smooth 3D bars with gradient shimmer, glowing tip & percentage ring', textColor, subTextColor),
const SizedBox(height: 16),
_buildProgressShowcase(cardBgColor, textColor, subTextColor),
const SizedBox(height: 36),
// Section 5: Instagram Feed & Story Cards
_buildSectionHeader('📸 Instagram Story & Feed Card', 'Ultra-clean white Instagram feed card with double-tap heart response', textColor, subTextColor),
const SizedBox(height: 16),
MotionInstaStoryBar(stories: _stories),
const SizedBox(height: 16),
MotionInstaCard(primaryColor: _primaryColor),
const SizedBox(height: 36),
// Section 6: Clean Media Player Card
_buildSectionHeader('🎵 Clean Media Player Card', 'High-end audio player with audio visualizer, seek bar & glowing controls', textColor, subTextColor),
const SizedBox(height: 16),
MotionMediaCard(primaryColor: _primaryColor),
const SizedBox(height: 48),
// Footer
Center(
child: Text(
'MotionX UI Studio • Built with ❤️ for Ultra-Clean Design',
style: TextStyle(color: subTextColor, fontSize: 13, fontWeight: FontWeight.w500),
),
),
const SizedBox(height: 32),
],
),
),
),
),
),
),
);
}
Widget _buildHeaderBar(Color textColor, Color subTextColor) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Text(
'MotionX UI',
style: TextStyle(
fontSize: 32,
fontWeight: FontWeight.w900,
color: textColor,
letterSpacing: -0.5,
),
),
const SizedBox(width: 10),
Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: _primaryColor.withValues(alpha: 0.15),
borderRadius: BorderRadius.circular(100),
),
child: Text(
'PRO STUDIO',
style: TextStyle(
color: _primaryColor,
fontWeight: FontWeight.w800,
fontSize: 11,
letterSpacing: 0.8,
),
),
),
],
),
const SizedBox(height: 4),
Text(
'Ultra-Clean Tactile Design System & Motion Framework',
style: TextStyle(fontSize: 14, color: subTextColor, fontWeight: FontWeight.w500),
),
],
),
// Dark / Light Theme Toggle Switch
Row(
children: [
Icon(_isDarkMode ? Icons.dark_mode_rounded : Icons.light_mode_rounded, color: _primaryColor, size: 20),
const SizedBox(width: 8),
MotionSwitch(
value: _isDarkMode,
activeColor: _primaryColor,
onChanged: (val) => setState(() => _isDarkMode = val),
),
],
),
],
);
}
Widget _buildColorCustomizerCard(Color cardBgColor, Color textColor, Color subTextColor) {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: cardBgColor,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: _isDarkMode ? const Color(0xFF27272A) : const Color(0xFFE2E8F0)),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.04),
blurRadius: 16,
offset: const Offset(0, 4),
),
],
),
child: Row(
children: [
Icon(Icons.palette_rounded, color: _primaryColor, size: 28),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Primary Color Customizer',
style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: textColor),
),
Text(
'Tap any color to customize buttons, progress bars & cards live',
style: TextStyle(fontSize: 12, color: subTextColor),
),
],
),
),
Wrap(
spacing: 10,
children: _colorPalette.map((color) {
final isSelected = _primaryColor == color;
return GestureDetector(
onTap: () {
MotionHaptics.selection();
setState(() => _primaryColor = color);
},
child: AnimatedContainer(
duration: const Duration(milliseconds: 200),
width: 34,
height: 34,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: color,
border: Border.all(
color: isSelected ? Colors.white : Colors.transparent,
width: 2.5,
),
boxShadow: [
BoxShadow(
color: color.withValues(alpha: isSelected ? 0.6 : 0.2),
blurRadius: isSelected ? 12 : 4,
spreadRadius: isSelected ? 2 : 0,
),
],
),
child: isSelected
? const Icon(Icons.check, color: Colors.white, size: 18)
: null,
),
);
}).toList(),
),
],
),
);
}
Widget _buildSectionHeader(String title, String subtitle, Color textColor, Color subTextColor) {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: TextStyle(fontSize: 20, fontWeight: FontWeight.w800, color: textColor),
),
const SizedBox(height: 2),
Text(
subtitle,
style: TextStyle(fontSize: 13, color: subTextColor, fontWeight: FontWeight.w500),
),
],
);
}
Widget _buildButtonsShowcase(Color cardBgColor) {
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: cardBgColor,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: _isDarkMode ? const Color(0xFF27272A) : const Color(0xFFE2E8F0)),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 16,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Wrap(
spacing: 16,
runSpacing: 16,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
// Primary Gloss Button (Custom Color)
MotionButton.primary(
text: 'Primary',
color: _primaryColor,
onPressed: () {},
),
// Ask AI Aurora Gradient Button
MotionButton.aurora(
text: 'Ask AI',
icon: const Icon(Icons.auto_awesome, color: Colors.white, size: 18),
onPressed: () {},
),
// Dark Capsule Button
MotionButton.dark(
text: 'Dark',
onPressed: () {},
),
// Light Capsule Button
MotionButton.light(
text: 'Light',
onPressed: () {},
),
// 3D Glowing Button
MotionButton.glowing3D(
text: 'OK',
color: _primaryColor,
onPressed: () {},
),
],
),
const SizedBox(height: 24),
const Divider(height: 1, color: Color(0xFFE2E8F0)),
const SizedBox(height: 20),
// Tactile White Buttons (Matching Images 2 & 3)
const Text(
'Tactile Metallic Rim Buttons',
style: TextStyle(fontSize: 13, fontWeight: FontWeight.w700, color: Color(0xFF64748B)),
),
const SizedBox(height: 12),
Wrap(
spacing: 16,
runSpacing: 16,
crossAxisAlignment: WrapCrossAlignment.center,
children: [
// Circular "+" Tactile Icon Button
MotionButton.tactile(
height: 52,
width: 52,
borderRadius: BorderRadius.circular(100),
onPressed: () {},
child: const Icon(Icons.add, color: Color(0xFF334155), size: 24),
),
// Capsule "Upload" Tactile Button
MotionButton.tactile(
text: 'Upload',
height: 52,
icon: const Icon(Icons.upload_file_rounded, color: Color(0xFF334155), size: 20),
onPressed: () {},
),
],
),
],
),
);
}
Widget _buildStatusBadgesShowcase(Color cardBgColor) {
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: cardBgColor,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: _isDarkMode ? const Color(0xFF27272A) : const Color(0xFFE2E8F0)),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 16,
offset: const Offset(0, 4),
),
],
),
child: const Wrap(
spacing: 12,
runSpacing: 12,
children: [
MotionStatusBadge.online(),
MotionStatusBadge.filter(label: 'Filter • 4'),
MotionStatusBadge.uploadDashed(),
MotionStatusBadge.askAI(),
MotionStatusBadge.searchAI(),
MotionStatusBadge.newTask(),
MotionStatusBadge.inProgress(),
MotionStatusBadge.complete(),
MotionStatusBadge.pending(),
MotionStatusBadge.failed(),
],
),
);
}
Widget _buildControlsShowcase(Color cardBgColor, Color textColor) {
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: cardBgColor,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: _isDarkMode ? const Color(0xFF27272A) : const Color(0xFFE2E8F0)),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 16,
offset: const Offset(0, 4),
),
],
),
child: Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('3D Illuminated Glow Switch', style: TextStyle(fontWeight: FontWeight.w700, fontSize: 15, color: textColor)),
const Text('Active state features glowing background track & 3D knob', style: TextStyle(fontSize: 12, color: Color(0xFF64748B))),
],
),
Row(
children: [
MotionSwitch(
value: _switchVal1,
activeColor: _primaryColor,
onChanged: (val) => setState(() => _switchVal1 = val),
),
const SizedBox(width: 16),
MotionSwitch(
value: _switchVal2,
activeColor: const Color(0xFF10B981),
onChanged: (val) => setState(() => _switchVal2 = val),
),
],
),
],
),
const SizedBox(height: 20),
const Divider(height: 1, color: Color(0xFFE2E8F0)),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Segmented Control Pill', style: TextStyle(fontWeight: FontWeight.w700, fontSize: 15, color: textColor)),
const Text('Smooth sliding white indicator', style: TextStyle(fontSize: 12, color: Color(0xFF64748B))),
],
),
MotionSegmentedControl<String>(
selectedValue: _segmentedVal,
activeColor: _primaryColor,
children: const {
'Overview': 'Overview',
'Analytics': 'Analytics',
'Settings': 'Settings',
},
onValueChanged: (val) => setState(() => _segmentedVal = val),
),
],
),
],
),
);
}
Widget _buildProgressShowcase(Color cardBgColor, Color textColor, Color subTextColor) {
return Container(
padding: const EdgeInsets.all(24),
decoration: BoxDecoration(
color: cardBgColor,
borderRadius: BorderRadius.circular(24),
border: Border.all(color: _isDarkMode ? const Color(0xFF27272A) : const Color(0xFFE2E8F0)),
boxShadow: [
BoxShadow(
color: Colors.black.withValues(alpha: 0.03),
blurRadius: 16,
offset: const Offset(0, 4),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// Slider controller to test progress bar live
Row(
children: [
Text('Interactive Progress Test:', style: TextStyle(fontWeight: FontWeight.w700, fontSize: 14, color: textColor)),
Expanded(
child: Slider(
value: _customProgress,
activeColor: _primaryColor,
onChanged: (val) => setState(() => _customProgress = val),
),
),
Text('${(_customProgress * 100).toInt()}%', style: TextStyle(fontWeight: FontWeight.w800, color: _primaryColor)),
],
),
const SizedBox(height: 16),
// Glowing 3D Progress Bar
MotionProgressBar(
value: _customProgress,
color: _primaryColor,
showPercentage: true,
height: 14,
enableGlow: true,
enableShimmer: true,
),
const SizedBox(height: 24),
// Secondary Circular Ring Progress
Row(
children: [
MotionCircularProgressRing(
value: _customProgress,
color: _primaryColor,
size: 76,
),
const SizedBox(width: 20),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Radial Glow Ring Indicator', style: TextStyle(fontWeight: FontWeight.w700, fontSize: 15, color: textColor)),
const SizedBox(height: 4),
Text('Clean circular percentage visualization for dashboards & uploads', style: TextStyle(fontSize: 13, color: subTextColor)),
],
),
),
],
),
],
),
);
}
}Metadata
2
likes
150
points
207
downloads
Documentation
Publisher
unverified uploader
Weekly Downloads
Metadata
The ultimate Flutter Premium Design System + Motion Framework. 200+ components, 10 presets, border beam, aurora, glass, 3D tilt, magnetic effects, and premium loaders — all with zero boilerplate.
Repository (GitHub)
View/report issues
License
MIT (license)