Moon Design System for Flutter

To customize the look and feel of Moon widgets, you can declare a MoonTokens variable and override specific values for colors or typography. You then inject this into your Flutter application by adding a MoonTheme extension to your ThemeData.

1. Customize Tokens

Use MoonTokens.light.copyWith to override colors and typography. For typography, you can use .apply() to modify font families, weights, or font variations.

2. Override Specific Widget Themes

If you need to target a specific widget (e.g., an Accordion), you can use MoonAccordionTheme within the MoonTheme.copyWith method to override its specific token set.

3. Apply the Theme

Pass the configured ThemeData to the theme property of your MaterialApp.

// 1. Declare tokens and override values
final lightTokens = MoonTokens.light.copyWith(
  colors: MoonColors.light.copyWith(
    piccolo: Colors.blue,
    textPrimary: Colors.amber,
  ),
  typography: MoonTypography.typography.copyWith(
    heading: MoonTypography.typography.heading.apply(
      fontFamily: "DMSans",
      fontWeightDelta: -1,
      fontVariations: [const FontVariation('wght', 500)],
    ),
  ),
);

// 2. Override specific widget theming (optional)
final lightTheme = ThemeData.light().copyWith(
  extensions: <ThemeExtension<dynamic>>[
    MoonTheme(tokens: lightTokens).copyWith(
      accordionTheme: MoonAccordionTheme(tokens: lightTokens).copyWith(
        colors: MoonAccordionTheme(tokens: lightTokens).colors.copyWith(
              backgroundColor: Colors.green,
            ),
      ),
    ),
  ],
);

// 3. Apply the declared theme
return MaterialApp(
      title: 'Moon Design System example',
      theme: lightTheme,
      home: const HomePage(),
 );

The MoonBottomSheet widget is the underlying component for Moon Design bottom sheets. While it is rarely used directly, it provides full control over drag behavior, expansion, and animation.

Note: For most standard use cases, you should prefer using showMoonModalBottomSheet instead of instantiating MoonBottomSheet manually.

Key properties:

• enableDrag: Enables vertical dragging and swipe-to-dismiss.
• isExpanded: If true, the sheet expands to full available width/height; if false, it resizes to fit content.
• onClosing: A callback triggered when the closing process begins.
• shouldClose: An optional Future<bool> callback used to intercept dismissal. If it returns false, the bottom sheet remains open. This is useful for preventing dismissal when user input is pending (e.g., form validation).
• animationController: An AnimationController that drives the entrance and exit transitions.
• scrollController: A ScrollController used to manage content scrolling within the sheet.

// Example of the manual setup required for MoonBottomSheet
final controller = MoonBottomSheet.createAnimationController(vsync, duration);
final scrollController = ScrollController();

MoonBottomSheet(
  animationController: controller,
  scrollController: scrollController,
  onClosing: () => print('Closing...'),
  shouldClose: () async {
    // Logic to decide if dismissal is allowed
    return true;
  },
  child: MyContentWidget(),
);

MoonBaseControl is a base class used to implement common control behaviors in the Moon Design System. It handles focus, hover, press, and long-press states, as well as visual effects like pulse, scale, and focus highlights.

When building a custom control, you can provide either a child or a builder. If you use the builder, you gain access to the current interaction states (isEnabled, isHovered, isFocused, isPressed), allowing you to style your widget dynamically based on user interaction.

Key Interaction States via Builder:

• isEnabled: True if onTap or onLongPress is provided.
• isHovered: True when the mouse/pointer is over the control.
• isFocused: True when the control has primary focus.
• isPressed: True during a tap or long-press interaction.

MoonBaseControl(
  onTap: () => print('Tapped!'),
  builder: (context, isEnabled, isHovered, isFocused, isPressed) {
    return Container(
      color: isPressed ? Colors.blue : Colors.grey,
      child: Text('Interactive Control'),
    );
  },
);

The MoonCarousel widget is used to scroll through a collection of items. It supports horizontal and vertical scrolling, automatic playback (autoplay), infinite looping, and item centering.

Key features:

• Looping: When loop is true, the carousel provides two indices to the itemBuilder: itemIndex (the modded index for UI purposes) and realIndex (the actual index in the data set, essential for logic like jumping to a specific item).
• Centering: If isCentered is true, the selected item is automatically aligned to the center of the viewport. This ignores the anchor property.
• Anchoring: If isCentered is false, the anchor property (0.0 to 1.0) determines where the selected item is positioned in the viewport (0.0 is start, 1.0 is end).
• Autoplay: Can be enabled via autoPlay. You can customize the delay, transition duration, and curve.

MoonCarousel(
  itemCount: 10,
  itemExtent: 200.0,
  loop: true,
  onIndexChanged: (index) => print('Selected: $index'),
  itemBuilder: (context, itemIndex, realIndex) {
    return Container(
      width: 200.0,
      color: Colors.blue,
      child: Text('Item $realIndex'),
    );
  },
);