motion_x_ui 1.0.1

The ultimate Flutter Motion & Animation Framework. Powerful physics, spring dynamics, micro-interactions, and 30+ production-grade animated UI modules 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 MotionXExampleApp());
}

class MotionXExampleApp extends StatelessWidget {
  const MotionXExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'MotionX Showcase',
      debugShowCheckedModeBanner: false,
      theme: ThemeData.dark(),
      home: const MotionXShowcaseScreen(),
    );
  }
}

class MotionXShowcaseScreen extends StatefulWidget {
  const MotionXShowcaseScreen({super.key});

  @override
  State<MotionXShowcaseScreen> createState() => _MotionXShowcaseScreenState();
}

class _MotionXShowcaseScreenState extends State<MotionXShowcaseScreen> {
  MotionPreset _selectedPreset = MotionPreset.apple;
  bool _switchVal = true;
  bool _checkVal = true;

  @override
  Widget build(BuildContext context) {
    return MotionXTheme(
      preset: _selectedPreset,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('MotionX Framework Showcase'),
          centerTitle: true,
        ),
        body: ListView(
          padding: const EdgeInsets.all(20.0),
          children: [
            // Preset Picker
            const Text(
              'Select Preset Theme',
              style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
            ),
            const SizedBox(height: 12),
            SingleChildScrollView(
              scrollDirection: Axis.horizontal,
              child: Row(
                children: MotionPreset.values.map((preset) {
                  return Padding(
                    padding: const EdgeInsets.only(right: 8.0),
                    child: MotionChip(
                      label: preset.name.toUpperCase(),
                      selected: _selectedPreset == preset,
                      onSelected: (selected) {
                        if (selected) {
                          setState(() {
                            _selectedPreset = preset;
                          });
                        }
                      },
                    ),
                  );
                }).toList(),
              ),
            ),
            const SizedBox(height: 28),

            // MotionButtons
            const Text('MotionButtons (Tap / 3D / Async Loading / Haptics)',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            const SizedBox(height: 12),
            MotionButton(
              text: 'Interactive Button',
              preset: _selectedPreset,
              onPressed: () async {
                await Future<void>.delayed(const Duration(seconds: 2));
              },
            ),
            const SizedBox(height: 28),

            // MotionTextField & MotionOTP
            const Text('MotionTextField & MotionOTP',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            const SizedBox(height: 12),
            MotionTextField(
              labelText: 'Email Address',
              prefixIcon: const Icon(Icons.email_rounded),
              preset: _selectedPreset,
            ),
            const SizedBox(height: 16),
            MotionOTP(
              length: 5,
              preset: _selectedPreset,
              onCompleted: (code) {
                MotionSnackBar.show(context, message: 'OTP Entered: $code', preset: _selectedPreset);
              },
            ),
            const SizedBox(height: 28),

            // God-Level FX Engines
            const Text('🔥 God-Level FX Engines (3D Tilt / Particles / Liquid Wave / Magnetic)',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            const SizedBox(height: 12),
            MotionMagnetic(
              child: Motion3DTilt(
                child: MotionCyberBorder(
                  borderRadius: 20,
                  child: MotionParticleCanvas(
                    enabled: true,
                    child: MotionCard(
                      preset: _selectedPreset,
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          const Row(
                            children: [
                              Icon(Icons.auto_awesome, color: Color(0xFF00F0FF)),
                              SizedBox(width: 8),
                              Text('Interactive 3D Gyro + Magnetic Card',
                                  style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
                            ],
                          ),
                          const SizedBox(height: 8),
                          const Text('Move cursor around to experience magnetic physics pull & live dynamic 3D tilt!'),
                          const SizedBox(height: 8),
                          Text('Active Preset: ${_selectedPreset.name.toUpperCase()}',
                              style: const TextStyle(fontWeight: FontWeight.w600, color: Color(0xFFFF0055))),
                        ],
                      ),
                    ),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 16),
            ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: const MotionLiquidWave(
                height: 80,
                child: Center(
                  child: Text(
                    'Fluid Realtime Shader Wave Engine',
                    style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 16),
                  ),
                ),
              ),
            ),
            const SizedBox(height: 28),

            // Controls (Switch, Checkbox, Progress, Loader)
            const Text('Controls & Loaders',
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
            const SizedBox(height: 12),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: [
                MotionSwitch(
                  value: _switchVal,
                  preset: _selectedPreset,
                  onChanged: (val) => setState(() => _switchVal = val),
                ),
                MotionCheckbox(
                  value: _checkVal,
                  preset: _selectedPreset,
                  onChanged: (val) => setState(() => _checkVal = val!),
                ),
                MotionLoader(size: 32, preset: _selectedPreset),
              ],
            ),
            const SizedBox(height: 16),
            MotionProgress(value: 0.65, preset: _selectedPreset),
          ],
        ),
      ),
    );
  }
}