motion_x_ui 2.0.1 
motion_x_ui: ^2.0.1 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 MotionXShowcase());
}
class MotionXShowcase extends StatelessWidget {
const MotionXShowcase({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'MotionX UI Showcase',
debugShowCheckedModeBanner: false,
theme: ThemeData.dark(useMaterial3: true),
home: const ShowcaseScreen(),
);
}
}
class ShowcaseScreen extends StatefulWidget {
const ShowcaseScreen({super.key});
@override
State<ShowcaseScreen> createState() => _ShowcaseScreenState();
}
class _ShowcaseScreenState extends State<ShowcaseScreen> {
bool _switchVal = true;
double _progress = 0.65;
int _navIndex = 0;
@override
Widget build(BuildContext context) {
return MotionXTheme(
preset: MotionPreset.aurora,
child: Scaffold(
backgroundColor: const Color(0xFF0D0A14),
body: SingleChildScrollView(
padding: const EdgeInsets.all(24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const SizedBox(height: 48),
const Text('MotionX UI', style: TextStyle(fontSize: 36, fontWeight: FontWeight.w800, color: Colors.white)),
const SizedBox(height: 4),
Text('Flutter\'s Premium Design System + Motion Framework', style: TextStyle(fontSize: 14, color: Colors.white.withValues(alpha: 0.6))),
const SizedBox(height: 40),
_sectionTitle('🎯 Button Variants'),
const SizedBox(height: 12),
Wrap(
spacing: 12,
runSpacing: 12,
children: [
MotionButton.minimal(text: 'Minimal', onPressed: () {}),
MotionButton.glass(text: 'Glass', onPressed: () {}),
MotionButton.aurora(text: 'Aurora Beam', onPressed: () {}),
MotionButton.depth(text: '3D Depth', onPressed: () {}),
MotionButton.elegant(text: 'Elegant Glow', onPressed: () {}),
MotionButton.modern(text: 'Modern', onPressed: () {}),
],
),
const SizedBox(height: 40),
_sectionTitle('✨ Motion Effects'),
const SizedBox(height: 12),
MotionTilt3D(
child: MotionBorderBeam(
borderRadius: 20,
child: Container(
height: 160,
decoration: BoxDecoration(
color: const Color(0xFF1A1025),
borderRadius: BorderRadius.circular(20),
),
child: const Center(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.auto_awesome, color: Color(0xFF8B5CF6), size: 32),
SizedBox(height: 8),
Text('3D Tilt + Border Beam', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16)),
SizedBox(height: 4),
Text('Move your mouse over this card', style: TextStyle(color: Colors.white54, fontSize: 12)),
],
),
),
),
),
),
const SizedBox(height: 16),
ClipRRect(
borderRadius: BorderRadius.circular(16),
child: SizedBox(
height: 120,
child: MotionAurora(
borderRadius: 16,
child: const Center(
child: Text('Aurora Gradient Flow', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 18)),
),
),
),
),
const SizedBox(height: 16),
MotionMagnetic(
child: MotionGlow(
color: const Color(0xFFEC4899),
child: Container(
height: 80,
decoration: BoxDecoration(
color: const Color(0xFF1A1025),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: const Color(0xFFEC4899).withValues(alpha: 0.3)),
),
child: const Center(
child: Text('Magnetic Pull + Glow Ring', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
),
),
),
),
const SizedBox(height: 40),
_sectionTitle('📝 Inputs'),
const SizedBox(height: 12),
const MotionTextField(labelText: 'Email Address', prefixIcon: Icon(Icons.email_outlined)),
const SizedBox(height: 16),
const MotionTextField(labelText: 'Password', obscureText: true, prefixIcon: Icon(Icons.lock_outline)),
const SizedBox(height: 16),
const MotionOTP(length: 5),
const SizedBox(height: 40),
_sectionTitle('🃏 Cards'),
const SizedBox(height: 12),
MotionCard(
enableTilt: true,
enableGlow: true,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
const MotionAvatar(initials: 'YT', radius: 20, showStatus: true),
const SizedBox(width: 12),
const Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Yash Tiwari', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white)),
Text('Flutter Developer', style: TextStyle(color: Colors.white54, fontSize: 12)),
],
),
],
),
const SizedBox(height: 12),
const Text('Premium 3D Tilt + Glow Card with Avatar', style: TextStyle(color: Colors.white70)),
],
),
),
const SizedBox(height: 40),
_sectionTitle('🔄 Loaders (8 styles)'),
const SizedBox(height: 12),
const Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Column(children: [MotionLoader(size: 36), SizedBox(height: 6), Text('Circular', style: TextStyle(color: Colors.white38, fontSize: 10))]),
Column(children: [MotionLoader.dots(size: 36), SizedBox(height: 6), Text('Dots', style: TextStyle(color: Colors.white38, fontSize: 10))]),
Column(children: [MotionLoader.pulse(size: 36), SizedBox(height: 6), Text('Pulse', style: TextStyle(color: Colors.white38, fontSize: 10))]),
Column(children: [MotionLoader.orbit(size: 36), SizedBox(height: 6), Text('Orbit', style: TextStyle(color: Colors.white38, fontSize: 10))]),
Column(children: [MotionLoader.wave(size: 36), SizedBox(height: 6), Text('Wave', style: TextStyle(color: Colors.white38, fontSize: 10))]),
Column(children: [MotionLoader.bars(size: 36), SizedBox(height: 6), Text('Bars', style: TextStyle(color: Colors.white38, fontSize: 10))]),
],
),
const SizedBox(height: 40),
_sectionTitle('🎛️ Controls'),
const SizedBox(height: 12),
Row(
children: [
const Text('Motion Switch', style: TextStyle(color: Colors.white)),
const Spacer(),
MotionSwitch(value: _switchVal, onChanged: (v) => setState(() => _switchVal = v)),
],
),
const SizedBox(height: 16),
const Text('Progress', style: TextStyle(color: Colors.white54, fontSize: 12)),
const SizedBox(height: 8),
MotionProgress(value: _progress),
const SizedBox(height: 8),
Slider(
value: _progress,
onChanged: (v) => setState(() => _progress = v),
activeColor: const Color(0xFF8B5CF6),
),
const SizedBox(height: 40),
_sectionTitle('📋 Accordion'),
const SizedBox(height: 12),
Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color(0xFF1A1025),
borderRadius: BorderRadius.circular(16),
border: Border.all(color: const Color(0xFF2E1065)),
),
child: const MotionAccordion(
header: Text('What is MotionX UI?', style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold)),
content: Padding(
padding: EdgeInsets.only(top: 12),
child: Text(
'MotionX UI is Flutter\'s most premium Design System + Motion Framework. Build world-class apps with one line of code.',
style: TextStyle(color: Colors.white70),
),
),
),
),
const SizedBox(height: 40),
_sectionTitle('🧭 Navigation Bar'),
const SizedBox(height: 12),
MotionNavigationBar(
currentIndex: _navIndex,
onTap: (i) => setState(() => _navIndex = i),
items: const [
BottomNavigationBarItem(icon: Icon(Icons.home_rounded), label: 'Home'),
BottomNavigationBarItem(icon: Icon(Icons.search_rounded), label: 'Search'),
BottomNavigationBarItem(icon: Icon(Icons.favorite_rounded), label: 'Likes'),
BottomNavigationBarItem(icon: Icon(Icons.person_rounded), label: 'Profile'),
],
),
const SizedBox(height: 40),
_sectionTitle('🔔 Toast Notification'),
const SizedBox(height: 12),
Wrap(
spacing: 8,
children: [
MotionButton.minimal(
text: 'Show Toast',
onPressed: () => MotionToast.show(context, message: 'This is MotionX Toast!'),
),
MotionButton.minimal(
text: 'Success',
onPressed: () => MotionToast.show(context, message: 'Operation successful!', isSuccess: true),
),
MotionButton.minimal(
text: 'Error',
onPressed: () => MotionToast.show(context, message: 'Something went wrong!', isError: true),
),
],
),
const SizedBox(height: 40),
_sectionTitle('💬 Dialog'),
const SizedBox(height: 12),
MotionButton.glass(
text: 'Show Dialog',
onPressed: () {
MotionDialog.show<void>(
context: context,
child: const Column(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.check_circle, color: Color(0xFF34D399), size: 48),
SizedBox(height: 16),
Text('Payment Successful', style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white)),
SizedBox(height: 8),
Text('Your order has been placed', style: TextStyle(color: Colors.white54)),
],
),
);
},
),
const SizedBox(height: 40),
_sectionTitle('📃 Staggered List'),
const SizedBox(height: 12),
...List.generate(4, (i) {
return MotionListItem(
index: i,
child: Container(
margin: const EdgeInsets.only(bottom: 8),
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: const Color(0xFF1A1025),
borderRadius: BorderRadius.circular(12),
border: Border.all(color: const Color(0xFF2E1065)),
),
child: Row(
children: [
MotionAvatar(initials: '${i + 1}', radius: 18),
const SizedBox(width: 12),
Text('Animated List Item #${i + 1}', style: const TextStyle(color: Colors.white)),
],
),
),
);
}),
const SizedBox(height: 60),
Center(
child: Text('Created with ❤️ by Yash Tiwari', style: TextStyle(color: Colors.white.withValues(alpha: 0.4), fontSize: 13)),
),
const SizedBox(height: 40),
],
),
),
),
);
}
Widget _sectionTitle(String text) {
return Text(text, style: const TextStyle(fontSize: 20, fontWeight: FontWeight.w700, color: Colors.white));
}
}Metadata
2
likes
145
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)