magic_ui_core 1.1.8

A Universal Super-Widget architecture designed to flatten the Flutter widget tree and eliminate nesting hell.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:magic_ui_core/magic_ui_core.dart';

void main() {
  runApp(const MagicExampleApp());
}

/// The main entry point for the Magic UI Core demonstration.
class MagicExampleApp extends StatelessWidget {
  const MagicExampleApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Magic UI Core Demo',
      theme: ThemeData(
        useMaterial3: true,
        primarySwatch: Colors.indigo,
        fontFamily: 'Roboto',
      ),
      home: const MagicShowcasePage(),
    );
  }
}

/// A showcase page that demonstrates various components of the Magic UI library.
class MagicShowcasePage extends StatefulWidget {
  const MagicShowcasePage({super.key});

  @override
  State<MagicShowcasePage> createState() => _MagicShowcasePageState();
}

class _MagicShowcasePageState extends State<MagicShowcasePage> {
  // State variables for interactivity
  bool _isLoading = false;
  bool _isToggleOn = false;
  bool _isCheckboxChecked = false;
  String _radioValue = 'Option 1';
  String? _dropdownValue;
  
  final List<String> _dropdownItems = ['Flutter', 'React', 'Native', 'Magic UI'];

  @override
  Widget build(BuildContext context) {
    return MagicPage.creative(
      title: "Magic UI Gallery",
      // Modern dark gradient background
      colors: const [Color(0xFF0F2027), Color(0xFF203A43), Color(0xFF2C5364)],
      direction: MagicDirection.diagonal,
      isScrollable: true,
      padding: const EdgeInsets.all(20),
      body: MagicColumn(
        gap: 25,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: [
          
          // --- Section 1: Typography & Visuals ---
          _buildHeader("1. Typography & Visuals"),
          MagicBox(
            color: Colors.white10,
            radius: BorderRadius.circular(15),
            padding: const EdgeInsets.all(20),
            child: Column(
              children: [
                const MagicGradientText(
                  "The Magic Touch",
                  gradient: LinearGradient(
                    colors: [Colors.amber, Colors.orange, Colors.red],
                  ),
                  style: TextStyle(fontSize: 28, fontWeight: FontWeight.bold),
                ),
                const SizedBox(height: 10),
                const MagicText(
                  "This is a standard MagicText with custom weight and color.",
                  color: Colors.white70,
                  align: TextAlign.center,
                ),
              ],
            ),
          ),

          // --- Section 2: Buttons ---
          _buildHeader("2. Interactive Buttons"),
          MagicButton(
            text: "Primary Gradient Button",
            gradient: const LinearGradient(colors: [Colors.blue, Colors.purple]),
            icon: const Icon(Icons.touch_app, color: Colors.white),
            onPressed: () {
               MagicPopups.showSnackBar(context, "Ripple Effect Works!");
            },
          ),
          MagicButton(
            text: "Loading State Test",
            color: Colors.teal,
            isLoading: _isLoading,
            onPressed: () async {
              setState(() => _isLoading = true);
              await Future.delayed(const Duration(seconds: 2));
              if (mounted) setState(() => _isLoading = false);
            },
          ),
          const MagicButton(
            text: "Disabled Button",
            isDisabled: true,
            onPressed: null,
          ),

          // --- Section 3: Inputs & Selection ---
          _buildHeader("3. Inputs & Forms"),
          const MagicInput(
            label: "Email Address",
            prefixIcon: Icon(Icons.email_outlined),
            color: Colors.white10,
            textColor: Colors.white,
          ),
          const MagicInput(
            label: "Password",
            isPassword: true,
            prefixIcon: Icon(Icons.lock_outline),
            color: Colors.white10,
            textColor: Colors.white,
          ),
          
          // Dropdown integration
          MagicDropdown<String>(
            hint: "Select Framework",
            value: _dropdownValue,
            color: Colors.white10,
            textColor: Colors.white,
            icon: const Icon(Icons.arrow_drop_down, color: Colors.white),
            items: _dropdownItems.map((e) => DropdownMenuItem(
              value: e, 
              child: Text(e)
            )).toList(),
            onChanged: (val) => setState(() => _dropdownValue = val),
          ),

          // Toggles & Selection widgets
          MagicBox(
            color: Colors.white10,
            radius: BorderRadius.circular(15),
            padding: const EdgeInsets.all(15),
            child: Column(
              children: [
                MagicToggle(
                  value: _isToggleOn,
                  label: "Enable Magic Mode",
                  type: MagicToggleType.switchToggle,
                  activeColor: Colors.greenAccent,
                  onChanged: (val) => setState(() => _isToggleOn = val),
                ),
                const Divider(color: Colors.white24),
                MagicCheckbox(
                  value: _isCheckboxChecked,
                  label: "Agree to Terms",
                  checkColor: Colors.black,
                  activeColor: Colors.white,
                  onChanged: (val) => setState(() => _isCheckboxChecked = val!),
                ),
                const Divider(color: Colors.white24),
                MagicRadio<String>(
                  value: "Option 1",
                  groupValue: _radioValue,
                  label: "Option 1",
                  activeColor: Colors.blueAccent,
                  onChanged: (val) => setState(() => _radioValue = val!),
                ),
                MagicRadio<String>(
                  value: "Option 2",
                  groupValue: _radioValue,
                  label: "Option 2",
                  activeColor: Colors.pinkAccent,
                  onChanged: (val) => setState(() => _radioValue = val!),
                ),
              ],
            ),
          ),

          // --- Section 4: Media (Images) ---
          _buildHeader("4. Smart Images"),
          MagicRow(
            gap: 15,
            children: [
              const Expanded(
                child: MagicImage.url(
                  "https://picsum.photos/300/200",
                  height: 100,
                  radius: BorderRadius.all(Radius.circular(15)),
                ),
              ),
              Expanded(
                child: Center(
                  child: MagicImage.url(
                    "https://i.pravatar.cc/150?img=12",
                    width: 100,
                    height: 100,
                    isCircle: true,
                  ),
                ),
              ),
            ],
          ),

          // --- Section 5: List Tiles & Settings ---
          _buildHeader("5. List Tiles & Layouts"),
          MagicBox(
            color: Colors.white,
            radius: BorderRadius.circular(15),
            child: Column(
              children: [
                MagicListTile(
                  title: "Account Settings",
                  subtitle: "Manage your profile",
                  leading: const Icon(Icons.person, color: Colors.blue),
                  onPressed: () {},
                ),
                const MagicDivider(indent: 50),
                MagicListTile(
                  title: "Notifications",
                  subtitle: "On, Sound enabled",
                  leading: const Icon(Icons.notifications, color: Colors.orange),
                  trailing: MagicToggle(
                    value: true, 
                    type: MagicToggleType.switchToggle,
                    onChanged: (v) {},
                  ),
                ),
                const MagicDivider(indent: 50),
                MagicListTile(
                  title: "Logout",
                  leading: const Icon(Icons.logout, color: Colors.red),
                  titleColor: Colors.red,
                  onPressed: () => MagicPopups.showAlert(
                    context, 
                    title: "Logout", 
                    message: "Are you sure you want to log out?"
                  ),
                ),
              ],
            ),
          ),

          const SizedBox(height: 50),
        ],
      ),
    );
  }

  /// Helper widget to build consistent section headers.
  Widget _buildHeader(String title) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 10, top: 10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          MagicText(title, color: Colors.white70, size: 14, weight: FontWeight.bold),
          const Divider(color: Colors.white12),
        ],
      ),
    );
  }
}