fluent_ui

To run the showcase application for fluent_ui, you must first generate the platform-specific build files and then execute the application using the Flutter CLI.

1. Generate platform-specific builds: flutter create .
2. Run the application: flutter run

Add fluent_ui to your Flutter project's dependencies. It is recommended to use the stable channel of Flutter when using this library.

You can install it via pub.dev or directly from the GitHub repository.

dependencies:
  fluent_ui: ^4.15.1

OR

dependencies:
  fluent_ui:
    git: https://github.com/bdlukaa/fluent_ui.git

To contribute a new language localization to fluent_ui, follow these steps:

1. Fork the repository.
2. Copy the lib/l10n/intl_en.arb file into the lib/l10n folder using a new language code (following ISO 859-1 codes).
3. Update the contents of the new .arb file, ensuring you update the @locale value with the corresponding ISO code.
4. Run flutter gen-l10n or run your project to trigger code generation.
5. Submit a pull request.

The Expander widget allows you to show or hide secondary content related to a primary header. The header remains visible, while the content area expands or collapses when the header is interacted with. It supports expanding either downwards or upwards and can contain complex, interactive UI, including nested expanders.

Key features:

• State Management: Maintains its own expanded/collapsed state. Use initiallyExpanded for the starting state and onStateChanged to listen to changes.
• Persistence: Supports PageStorage to persist state across rebuilds.
• Customization: You can customize the header/content shapes, background colors, animation duration, and direction.

Expander(
  header: Text('Click to expand'),
  content: Text('This is the expanded content.'),
)

Use ToggleSwitchThemeData to customize the visual properties of ToggleSwitch widgets. This includes decorations for both checked and unchecked states of the switch and the knob, as well as animation settings.

Available properties:

• checkedKnobDecoration: WidgetStateProperty<Decoration?>?
• uncheckedKnobDecoration: WidgetStateProperty<Decoration?>?
• checkedDecoration: WidgetStateProperty<Decoration?>?
• uncheckedDecoration: WidgetStateProperty<Decoration?>?
• padding: EdgeInsetsGeometry?
• margin: EdgeInsetsGeometry?
• animationDuration: Duration?
• animationCurve: Curve?
• foregroundColor: WidgetStateProperty<Color?>?

FluentUI widgets support a wide range of languages out-of-the-box. Note that using an unsupported language may cause your app to crash.

Supported languages include:

• Arabic, Bahasa Indonesia, Belarusian, Czech, Croatian, Dutch, English, French, German, Greek, Hebrew, Hindi, Hungarian, Italian, Japanese, Korean, Malay, Nepali, Persian, Polish, Portuguese, Romanian, Russian, Simplified Chinese, Tagalog, Tamil, Traditional Chinese, Thai, Turkish, Spanish, Ukranian, Urdu, Uzbek.

You can add a label or icon to the right of the checkbox using the content property. The content widget is affected by user touch, meaning clicking the label will also toggle the checkbox.

Checkbox(
  checked: isAccepted,
  content: Text('I accept the terms and conditions'),
  onChanged: (value) => setState(() => isAccepted = value ?? false),
)

To apply a consistent style to all sliders within a specific part of your widget tree, wrap them in a SliderTheme widget.

SliderTheme(
  data: SliderThemeData(
    activeColor: Colors.blue,
    thumbRadius: WidgetStatePropertyAll(15.0),
  ),
  child: Column(
    children: [
      Slider(value: 10, min: 0, max: 100, onChanged: (v) {}),
      Slider(value: 50, min: 0, max: 100, onChanged: (v) {}),
    ],
  ),
)

To represent a group where the parent checkbox reflects the state of its children, use a nullable bool? for the checked property. When the checkbox is clicked, you can toggle between true and false, while null represents the indeterminate state.

// null = indeterminate (some children checked)
// true = all children checked
// false = no children checked
bool? parentChecked;

Checkbox(
  checked: parentChecked,
  content: Text('Select all'),
  onChanged: (value) {
    setState(() {
      // When clicked, toggle between checked and unchecked
      parentChecked = value == true ? true : false;
    });
  },
)