FlutterFX Widgets

The OrbitConfig class is a ChangeNotifier. You can use it with an AnimatedBuilder to allow runtime updates to the orbit's direction, duration, or path visibility without manual state management.

final config = OrbitConfig(reverse: false, duration: 6.0);

AnimatedBuilder(
  animation: config,
  builder: (context, _) => OrbitingIcons(
    reverse: config.reverse,
    duration: config.duration,
    showPaths: config.showPaths,
  ),
)

// Mutating the config triggers a rebuild
config.duration = 4.0;
config.reverse = !config.reverse;

The animation uses Curves.easeOut across two overlapping phases to create a seamless transition:

1. Opacity Phase (0% - 60% of duration): Fades the widget from 0 to 1.
2. Blur Phase (40% - 100% of duration): Transitions the blur sigma from 10 to 0.

Visibility Logic

• isVisible: null (default): The animation plays forward automatically when the widget is first built.
• isVisible: true: The animation plays forward.
• isVisible: false: The animation reverses (fades out while increasing blur).

The widget operates using the following mechanism:

1. A gradient image is rendered onto an offscreen canvas using the provided gradientColors.
2. A CustomPainter draws that image on top of the child widget, using BlendMode.clear to erase the path as the user performs the scratch gesture.
3. Once the bounding box of the scratch path covers the specified minScratchPercentage of the total area, a scale + wiggle animation plays and the onComplete callback is triggered.

To get started with FlutterFX locally, follow these steps:

1. Clone the repository to your local machine.
2. Run flutter pub get in the project root to install dependencies.
3. Open the project in your preferred IDE (e.g., VS Code, Android Studio).
4. Run the application on a connected device or simulator.

To change the launch screen image for the iOS version of the example app, you can use one of two methods:

1. Direct File Replacement: Replace the existing image files located in the packages/flutterfx_blur_fade/example/ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory with your own assets.
2. Xcode Interface:
   • Open the iOS workspace using the command: open ios/Runner.xcworkspace.
   • In the Xcode Project Navigator, navigate to Runner/Assets.xcassets.
   • Drag and drop your desired images into the asset catalog.

To change the image displayed during the app's launch on iOS, you can either replace the image files directly in the ios/Runner/Assets.xcassets/LaunchImage.imageset/ directory or use Xcode for a more visual approach.

Method 1: Direct File Replacement

Replace the existing image files within the LaunchImage.imageset directory with your own assets.

When creating a new widget package from the blur_fade template, you must update the following files to replace blur_fade or WIDGET_NAME with your specific widget's identity:

To use the ScratchToReveal widget in your Flutter project, install the package via the terminal or by manually adding it to your pubspec.yaml file.

flutter pub add flutterfx_scratch_to_reveal

You can style the bottom sheet using built-in presets or by fine-tuning an existing style using copyWith().

Presets:

• FxBottomSheetStyle.light(): The default light theme.
• FxBottomSheetStyle.dark(): A dark theme preset.

Fine-tuning: Use .copyWith() to override specific visual properties like topBorderRadius, mainContentScale, or mainContentSlide.

// Using presets
FxBottomSheet(style: FxBottomSheetStyle.light(), ...)
FxBottomSheet(style: FxBottomSheetStyle.dark(), ...)

// Fine-tuning with copyWith
FxBottomSheet(
  style: FxBottomSheetStyle.dark().copyWith(
    topBorderRadius: 28,
    mainContentScale: 0.90,   // less dramatic scale
    mainContentSlide: 16,     // less upward slide
  ),
  maxHeight: 0.75,            // sheet takes 75% of screen height
  ...
)

Add flutterfx_bottom_sheet to your pubspec.yaml dependencies to use the animated bottom sheet widget.

dependencies:
  flutterfx_bottom_sheet: ^1.0.0