Repository: coingaming/moon_flutter Branch: main Commit: 177adb791d5d Files: 443 Total size: 1.8 MB Directory structure: gitextract_z60v7ksx/ ├── .editorconfig ├── .github/ │ └── workflows/ │ ├── analyze_and_test.yml │ ├── lint_pr_title.yml │ ├── publish.yml │ ├── release.yml │ └── s3_deploy.yml ├── .gitignore ├── .metadata ├── .release-please-manifest.json ├── .vscode/ │ ├── launch.json │ └── settings.json ├── CHANGELOG.md ├── LICENSE ├── README.md ├── analysis_options.yaml ├── example/ │ ├── .gitignore │ ├── .metadata │ ├── README.md │ ├── analysis_options.yaml │ ├── android/ │ │ ├── .gitignore │ │ ├── app/ │ │ │ ├── build.gradle │ │ │ └── src/ │ │ │ ├── debug/ │ │ │ │ └── AndroidManifest.xml │ │ │ ├── main/ │ │ │ │ ├── AndroidManifest.xml │ │ │ │ ├── kotlin/ │ │ │ │ │ └── com/ │ │ │ │ │ └── example/ │ │ │ │ │ └── example/ │ │ │ │ │ └── MainActivity.kt │ │ │ │ └── res/ │ │ │ │ ├── drawable/ │ │ │ │ │ └── launch_background.xml │ │ │ │ ├── drawable-v21/ │ │ │ │ │ └── launch_background.xml │ │ │ │ ├── values/ │ │ │ │ │ └── styles.xml │ │ │ │ └── values-night/ │ │ │ │ └── styles.xml │ │ │ └── profile/ │ │ │ └── AndroidManifest.xml │ │ ├── build.gradle │ │ ├── gradle/ │ │ │ └── wrapper/ │ │ │ └── gradle-wrapper.properties │ │ ├── gradle.properties │ │ └── settings.gradle │ ├── assets/ │ │ └── code_snippets/ │ │ ├── accordion.md │ │ ├── alert.md │ │ ├── auth_code.md │ │ ├── avatar.md │ │ ├── bottom_sheet.md │ │ ├── breadcrumb.md │ │ ├── button.md │ │ ├── carousel.md │ │ ├── checkbox.md │ │ ├── chip.md │ │ ├── circular_loader.md │ │ ├── circular_progress.md │ │ ├── combobox_multi_select.md │ │ ├── combobox_single_select.md │ │ ├── dot_indicator.md │ │ ├── drawer.md │ │ ├── dropdown.md │ │ ├── icons.md │ │ ├── linear_loader.md │ │ ├── linear_progress.md │ │ ├── menu_item.md │ │ ├── modal.md │ │ ├── popover.md │ │ ├── radio.md │ │ ├── search_with_dropdown.md │ │ ├── search_with_list.md │ │ ├── segmented_control.md │ │ ├── switch.md │ │ ├── tab_bar.md │ │ ├── table.md │ │ ├── tag.md │ │ ├── text_area.md │ │ ├── text_input.md │ │ ├── text_input_group.md │ │ ├── toast.md │ │ └── tooltip.md │ ├── ios/ │ │ ├── .gitignore │ │ ├── Flutter/ │ │ │ ├── AppFrameworkInfo.plist │ │ │ ├── Debug.xcconfig │ │ │ └── Release.xcconfig │ │ ├── Podfile │ │ ├── Runner/ │ │ │ ├── AppDelegate.swift │ │ │ ├── Assets.xcassets/ │ │ │ │ ├── AppIcon.appiconset/ │ │ │ │ │ └── Contents.json │ │ │ │ └── LaunchImage.imageset/ │ │ │ │ ├── Contents.json │ │ │ │ └── README.md │ │ │ ├── Base.lproj/ │ │ │ │ ├── LaunchScreen.storyboard │ │ │ │ └── Main.storyboard │ │ │ ├── Info.plist │ │ │ └── Runner-Bridging-Header.h │ │ ├── Runner.xcodeproj/ │ │ │ ├── project.pbxproj │ │ │ ├── project.xcworkspace/ │ │ │ │ ├── contents.xcworkspacedata │ │ │ │ └── xcshareddata/ │ │ │ │ ├── IDEWorkspaceChecks.plist │ │ │ │ └── WorkspaceSettings.xcsettings │ │ │ └── xcshareddata/ │ │ │ └── xcschemes/ │ │ │ └── Runner.xcscheme │ │ └── Runner.xcworkspace/ │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata/ │ │ ├── IDEWorkspaceChecks.plist │ │ └── WorkspaceSettings.xcsettings │ ├── lib/ │ │ ├── main.dart │ │ └── src/ │ │ └── storybook/ │ │ ├── common/ │ │ │ ├── color_options.dart │ │ │ ├── colors_page_options.dart │ │ │ ├── component_options.dart │ │ │ ├── constants.dart │ │ │ ├── home_page_options.dart │ │ │ ├── methods/ │ │ │ │ └── navigation.dart │ │ │ ├── pages/ │ │ │ │ ├── colors_page.dart │ │ │ │ ├── home_page.dart │ │ │ │ └── typography_page.dart │ │ │ ├── social_media_options.dart │ │ │ ├── typography_page_options.dart │ │ │ └── widgets/ │ │ │ ├── logo.dart │ │ │ ├── page_footer.dart │ │ │ ├── routing_error_widget.dart │ │ │ ├── segment.dart │ │ │ ├── text_divider.dart │ │ │ └── version.dart │ │ ├── routing/ │ │ │ ├── app_router.dart │ │ │ └── route_aware_stories.dart │ │ ├── stories/ │ │ │ ├── composites/ │ │ │ │ ├── combobox_multi_select.dart │ │ │ │ ├── combobox_single_select.dart │ │ │ │ ├── search_with_dropdown.dart │ │ │ │ └── search_with_list.dart │ │ │ └── primitives/ │ │ │ ├── accordion.dart │ │ │ ├── alert.dart │ │ │ ├── auth_code.dart │ │ │ ├── avatar.dart │ │ │ ├── bottom_sheet.dart │ │ │ ├── breadcrumb.dart │ │ │ ├── button.dart │ │ │ ├── carousel.dart │ │ │ ├── checkbox.dart │ │ │ ├── chip.dart │ │ │ ├── circular_loader.dart │ │ │ ├── circular_progress.dart │ │ │ ├── dot_indicator.dart │ │ │ ├── drawer.dart │ │ │ ├── dropdown.dart │ │ │ ├── icons.dart │ │ │ ├── linear_loader.dart │ │ │ ├── linear_progress.dart │ │ │ ├── menu_item.dart │ │ │ ├── modal.dart │ │ │ ├── popover.dart │ │ │ ├── radio.dart │ │ │ ├── segmented_control.dart │ │ │ ├── switch.dart │ │ │ ├── tab_bar.dart │ │ │ ├── table.dart │ │ │ ├── tag.dart │ │ │ ├── text_area.dart │ │ │ ├── text_input.dart │ │ │ ├── text_input_group.dart │ │ │ ├── toast.dart │ │ │ └── tooltip.dart │ │ └── storybook.dart │ ├── linux/ │ │ ├── .gitignore │ │ ├── CMakeLists.txt │ │ ├── flutter/ │ │ │ ├── CMakeLists.txt │ │ │ ├── generated_plugin_registrant.cc │ │ │ ├── generated_plugin_registrant.h │ │ │ └── generated_plugins.cmake │ │ ├── main.cc │ │ ├── my_application.cc │ │ └── my_application.h │ ├── macos/ │ │ ├── .gitignore │ │ ├── Flutter/ │ │ │ ├── Flutter-Debug.xcconfig │ │ │ ├── Flutter-Release.xcconfig │ │ │ └── GeneratedPluginRegistrant.swift │ │ ├── Podfile │ │ ├── Runner/ │ │ │ ├── AppDelegate.swift │ │ │ ├── Assets.xcassets/ │ │ │ │ └── AppIcon.appiconset/ │ │ │ │ └── Contents.json │ │ │ ├── Base.lproj/ │ │ │ │ └── MainMenu.xib │ │ │ ├── Configs/ │ │ │ │ ├── AppInfo.xcconfig │ │ │ │ ├── Debug.xcconfig │ │ │ │ ├── Release.xcconfig │ │ │ │ └── Warnings.xcconfig │ │ │ ├── DebugProfile.entitlements │ │ │ ├── Info.plist │ │ │ ├── MainFlutterWindow.swift │ │ │ └── Release.entitlements │ │ ├── Runner.xcodeproj/ │ │ │ ├── project.pbxproj │ │ │ ├── project.xcworkspace/ │ │ │ │ └── xcshareddata/ │ │ │ │ └── IDEWorkspaceChecks.plist │ │ │ └── xcshareddata/ │ │ │ └── xcschemes/ │ │ │ └── Runner.xcscheme │ │ └── Runner.xcworkspace/ │ │ ├── contents.xcworkspacedata │ │ └── xcshareddata/ │ │ └── IDEWorkspaceChecks.plist │ ├── pubspec.yaml │ ├── test/ │ │ └── widget_test.dart │ ├── web/ │ │ ├── index.html │ │ └── manifest.json │ └── windows/ │ ├── .gitignore │ ├── CMakeLists.txt │ ├── flutter/ │ │ ├── CMakeLists.txt │ │ ├── generated_plugin_registrant.cc │ │ ├── generated_plugin_registrant.h │ │ └── generated_plugins.cmake │ └── runner/ │ ├── CMakeLists.txt │ ├── Runner.rc │ ├── flutter_window.cpp │ ├── flutter_window.h │ ├── main.cpp │ ├── resource.h │ ├── runner.exe.manifest │ ├── utils.cpp │ ├── utils.h │ ├── win32_window.cpp │ └── win32_window.h ├── lib/ │ ├── moon_design.dart │ └── src/ │ ├── theme/ │ │ ├── accordion/ │ │ │ ├── accordion_colors.dart │ │ │ ├── accordion_properties.dart │ │ │ ├── accordion_shadows.dart │ │ │ ├── accordion_size_properties.dart │ │ │ ├── accordion_sizes.dart │ │ │ └── accordion_theme.dart │ │ ├── alert/ │ │ │ ├── alert_colors.dart │ │ │ ├── alert_properties.dart │ │ │ └── alert_theme.dart │ │ ├── auth_code/ │ │ │ ├── auth_code_colors.dart │ │ │ ├── auth_code_properties.dart │ │ │ └── auth_code_theme.dart │ │ ├── avatar/ │ │ │ ├── avatar_colors.dart │ │ │ ├── avatar_size_properties.dart │ │ │ ├── avatar_sizes.dart │ │ │ └── avatar_theme.dart │ │ ├── bottom_sheet/ │ │ │ ├── bottom_sheet_colors.dart │ │ │ ├── bottom_sheet_properties.dart │ │ │ └── bottom_sheet_theme.dart │ │ ├── breadcrumb/ │ │ │ ├── breadcrumb_colors.dart │ │ │ ├── breadcrumb_properties.dart │ │ │ └── breadcrumb_theme.dart │ │ ├── button/ │ │ │ ├── button_colors.dart │ │ │ ├── button_size_properties.dart │ │ │ ├── button_sizes.dart │ │ │ └── button_theme.dart │ │ ├── carousel/ │ │ │ ├── carousel_colors.dart │ │ │ ├── carousel_properties.dart │ │ │ └── carousel_theme.dart │ │ ├── checkbox/ │ │ │ ├── checkbox_colors.dart │ │ │ ├── checkbox_properties.dart │ │ │ └── checkbox_theme.dart │ │ ├── chip/ │ │ │ ├── chip_colors.dart │ │ │ ├── chip_size_properties.dart │ │ │ ├── chip_sizes.dart │ │ │ └── chip_theme.dart │ │ ├── dot_indicator/ │ │ │ ├── dot_indicator_colors.dart │ │ │ ├── dot_indicator_properties.dart │ │ │ └── dot_indicator_theme.dart │ │ ├── drawer/ │ │ │ ├── drawer_colors.dart │ │ │ ├── drawer_properties.dart │ │ │ ├── drawer_shadows.dart │ │ │ └── drawer_theme.dart │ │ ├── dropdown/ │ │ │ ├── dropdown_colors.dart │ │ │ ├── dropdown_properties.dart │ │ │ ├── dropdown_shadows.dart │ │ │ └── dropdown_theme.dart │ │ ├── effects/ │ │ │ ├── control_effect.dart │ │ │ ├── effects_theme.dart │ │ │ ├── focus_effect.dart │ │ │ └── hover_effect.dart │ │ ├── loaders/ │ │ │ ├── circular_loader/ │ │ │ │ ├── circular_loader_colors.dart │ │ │ │ ├── circular_loader_size_properties.dart │ │ │ │ ├── circular_loader_sizes.dart │ │ │ │ └── circular_loader_theme.dart │ │ │ └── linear_loader/ │ │ │ ├── linear_loader_colors.dart │ │ │ ├── linear_loader_size_properties.dart │ │ │ ├── linear_loader_sizes.dart │ │ │ └── linear_loader_theme.dart │ │ ├── menu_item/ │ │ │ ├── menu_item_colors.dart │ │ │ ├── menu_item_properties.dart │ │ │ └── menu_item_theme.dart │ │ ├── modal/ │ │ │ ├── modal_colors.dart │ │ │ ├── modal_properties.dart │ │ │ └── modal_theme.dart │ │ ├── popover/ │ │ │ ├── popover_colors.dart │ │ │ ├── popover_properties.dart │ │ │ ├── popover_shadows.dart │ │ │ └── popover_theme.dart │ │ ├── progress/ │ │ │ ├── circular_progress/ │ │ │ │ ├── circular_progress_colors.dart │ │ │ │ ├── circular_progress_size_properties.dart │ │ │ │ ├── circular_progress_sizes.dart │ │ │ │ └── circular_progress_theme.dart │ │ │ └── linear_progress/ │ │ │ ├── linear_progress_colors.dart │ │ │ ├── linear_progress_size_properties.dart │ │ │ ├── linear_progress_sizes.dart │ │ │ └── linear_progress_theme.dart │ │ ├── progress_pin/ │ │ │ ├── progress_pin_colors.dart │ │ │ ├── progress_pin_properties.dart │ │ │ └── progress_pin_theme.dart │ │ ├── radio/ │ │ │ ├── radio_colors.dart │ │ │ └── radio_theme.dart │ │ ├── segmented_control/ │ │ │ ├── segmented_control_colors.dart │ │ │ ├── segmented_control_properties.dart │ │ │ ├── segmented_control_size_properties.dart │ │ │ ├── segmented_control_sizes.dart │ │ │ └── segmented_control_theme.dart │ │ ├── switch/ │ │ │ ├── switch_colors.dart │ │ │ ├── switch_properties.dart │ │ │ ├── switch_shadows.dart │ │ │ ├── switch_size_properties.dart │ │ │ ├── switch_sizes.dart │ │ │ └── switch_theme.dart │ │ ├── tab_bar/ │ │ │ ├── tab_bar_colors.dart │ │ │ ├── tab_bar_properties.dart │ │ │ ├── tab_bar_size_properties.dart │ │ │ ├── tab_bar_sizes.dart │ │ │ └── tab_bar_theme.dart │ │ ├── table/ │ │ │ ├── table_colors.dart │ │ │ ├── table_properties.dart │ │ │ ├── table_size_properties.dart │ │ │ ├── table_sizes.dart │ │ │ └── table_theme.dart │ │ ├── tag/ │ │ │ ├── tag_colors.dart │ │ │ ├── tag_size_properties.dart │ │ │ ├── tag_sizes.dart │ │ │ └── tag_theme.dart │ │ ├── text_area/ │ │ │ ├── text_area_colors.dart │ │ │ ├── text_area_properties.dart │ │ │ └── text_area_theme.dart │ │ ├── text_input/ │ │ │ ├── text_input_colors.dart │ │ │ ├── text_input_properties.dart │ │ │ ├── text_input_size_properties.dart │ │ │ ├── text_input_sizes.dart │ │ │ └── text_input_theme.dart │ │ ├── text_input_group/ │ │ │ ├── text_input_group_colors.dart │ │ │ ├── text_input_group_properties.dart │ │ │ └── text_input_group_theme.dart │ │ ├── theme.dart │ │ ├── toast/ │ │ │ ├── toast_colors.dart │ │ │ ├── toast_properties.dart │ │ │ ├── toast_shadows.dart │ │ │ └── toast_theme.dart │ │ ├── tokens/ │ │ │ ├── borders.dart │ │ │ ├── opacities.dart │ │ │ ├── shadows.dart │ │ │ ├── sizes.dart │ │ │ ├── tokens.dart │ │ │ ├── transitions.dart │ │ │ └── typography/ │ │ │ ├── text_styles.dart │ │ │ └── typography.dart │ │ └── tooltip/ │ │ ├── tooltip_colors.dart │ │ ├── tooltip_properties.dart │ │ ├── tooltip_shadows.dart │ │ └── tooltip_theme.dart │ ├── utils/ │ │ ├── brightness_from_pixels.dart │ │ ├── color_premul_lerp.dart │ │ ├── color_tween_premul.dart │ │ ├── extensions.dart │ │ ├── linked_scroll_controller.dart │ │ ├── measure_size.dart │ │ ├── shape_decoration_premul.dart │ │ ├── squircle/ │ │ │ ├── clip_squircle_rect.dart │ │ │ ├── path_squircle_corners.dart │ │ │ ├── processed_squircle_radius.dart │ │ │ ├── squircle_border.dart │ │ │ ├── squircle_border_radius.dart │ │ │ └── squircle_radius.dart │ │ ├── touch_target_padding.dart │ │ └── widget_surveyor.dart │ └── widgets/ │ ├── accordion/ │ │ └── accordion.dart │ ├── alert/ │ │ └── alert.dart │ ├── auth_code/ │ │ └── auth_code.dart │ ├── avatar/ │ │ ├── avatar.dart │ │ └── avatar_clipper.dart │ ├── bottom_sheet/ │ │ ├── bottom_sheet.dart │ │ ├── modal_bottom_sheet.dart │ │ └── utils/ │ │ ├── bottom_sheet_custom_scroll_physics.dart │ │ ├── bottom_sheet_suspended_curve.dart │ │ └── scroll_to_top_status_bar.dart │ ├── breadcrumb/ │ │ ├── breadcrumb.dart │ │ └── breadcrumb_item.dart │ ├── buttons/ │ │ ├── button.dart │ │ ├── filled_button.dart │ │ ├── outlined_button.dart │ │ └── text_button.dart │ ├── carousel/ │ │ └── carousel.dart │ ├── checkbox/ │ │ ├── checkbox.dart │ │ └── checkbox_painter.dart │ ├── chip/ │ │ └── chip.dart │ ├── common/ │ │ ├── animated_icon_theme.dart │ │ ├── base_control.dart │ │ ├── base_segmented_tab_bar.dart │ │ ├── border_container.dart │ │ ├── default_animated_text_style.dart │ │ ├── effects/ │ │ │ ├── focus_effect.dart │ │ │ ├── painters/ │ │ │ │ ├── focus_effect_painter.dart │ │ │ │ └── pulse_effect_painter.dart │ │ │ └── pulse_effect.dart │ │ ├── error_message_widgets.dart │ │ └── progress_indicators/ │ │ ├── base_progress.dart │ │ ├── circular_progress_indicator.dart │ │ ├── linear_progress_indicator.dart │ │ └── painters/ │ │ ├── circular_progress_indicator_painter.dart │ │ └── linear_progress_indicator_painter.dart │ ├── dot_indicator/ │ │ └── dot_indicator.dart │ ├── drawer/ │ │ └── drawer.dart │ ├── dropdown/ │ │ └── dropdown.dart │ ├── loaders/ │ │ ├── circular_loader.dart │ │ └── linear_loader.dart │ ├── menu_item/ │ │ └── menu_item.dart │ ├── modal/ │ │ └── modal.dart │ ├── popover/ │ │ └── popover.dart │ ├── progress/ │ │ ├── circular_progress.dart │ │ └── linear_progress.dart │ ├── progress_pin/ │ │ ├── pin_style.dart │ │ ├── progress_pin.dart │ │ └── progress_pin_painter.dart │ ├── radio/ │ │ ├── radio.dart │ │ └── radio_painter.dart │ ├── segmented_control/ │ │ ├── segment.dart │ │ ├── segment_style.dart │ │ └── segmented_control.dart │ ├── switch/ │ │ └── switch.dart │ ├── tab_bar/ │ │ ├── pill_tab.dart │ │ ├── pill_tab_style.dart │ │ ├── tab.dart │ │ ├── tab_bar.dart │ │ └── tab_style.dart │ ├── table/ │ │ ├── table.dart │ │ └── table_controllers.dart │ ├── tag/ │ │ └── tag.dart │ ├── text_area/ │ │ └── text_area.dart │ ├── text_input/ │ │ ├── form_text_input.dart │ │ └── text_input.dart │ ├── text_input_group/ │ │ └── text_input_group.dart │ ├── toast/ │ │ └── toast.dart │ └── tooltip/ │ ├── tooltip.dart │ └── tooltip_shape.dart ├── pubspec.yaml ├── release-please-config.json └── test/ ├── accordion_test.dart ├── alert_test.dart ├── auth_code_test.dart ├── bottom_sheet_test.dart ├── breadcrumb_test.dart ├── button_test.dart ├── carousel_test.dart ├── checkbox_test.dart ├── chip_test.dart ├── drawer_test.dart ├── dropdown_test.dart ├── menu_item_test.dart ├── modal_test.dart ├── popover_test.dart ├── radio_test.dart ├── segmented_control_test.dart ├── switch_test.dart ├── tab_bar_test.dart ├── tag_test.dart ├── text_area_test.dart ├── text_input_test.dart ├── toast_test.dart └── tooltip_test.dart ================================================ FILE CONTENTS ================================================ ================================================ FILE: .editorconfig ================================================ root = true [**/*.dart] max_line_length = 120 ================================================ FILE: .github/workflows/analyze_and_test.yml ================================================ name: Analyze and test on: pull_request: types: [ opened, synchronize, reopened ] jobs: build: runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 with: flutter-version: '3.19.3' channel: stable - name: Install Dependencies run: flutter pub get working-directory: ./example - name: Run static analysis run: flutter analyze . - name: Run tests run: flutter test ================================================ FILE: .github/workflows/lint_pr_title.yml ================================================ name: "Lint PR" on: pull_request_target: types: - opened - edited - synchronize jobs: main: name: Validate PR title runs-on: ubuntu-latest steps: - uses: amannn/action-semantic-pull-request@v5 id: lint_pr_title env: GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} - uses: marocchino/sticky-pull-request-comment@v2 # When the previous steps fails, the workflow would stop. By adding this # condition you can continue the execution with the populated error message. if: always() && (steps.lint_pr_title.outputs.error_message != null) with: header: pr-title-lint-error message: | Hey there and thank you for opening this pull request! 👋🏼 We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted. Details: ``` ${{ steps.lint_pr_title.outputs.error_message }} ``` # Delete a previous comment when the issue has been resolved - if: ${{ steps.lint_pr_title.outputs.error_message == null }} uses: marocchino/sticky-pull-request-comment@v2 with: header: pr-title-lint-error delete: true ================================================ FILE: .github/workflows/publish.yml ================================================ name: Publish to pub.dev on: push: branches: - main jobs: publish: if: "${{ contains(github.event.head_commit.message, 'chore(main): release') }}" permissions: id-token: write runs-on: ubuntu-latest steps: - uses: actions/checkout@v4 - name: Publish uses: k-paxian/dart-package-publisher@v1.6 with: credentialJson: ${{ secrets.CREDENTIAL_JSON }} flutter: true skipTests: true force: true ================================================ FILE: .github/workflows/release.yml ================================================ name: release-please on: push: branches: - main jobs: release-please: runs-on: ubuntu-latest steps: - uses: google-github-actions/release-please-action@v3 id: release with: release-type: "dart" command: manifest outputs: release_created: ${{ steps.release.outputs.release_created }} release_tag_name: ${{ steps.release.outputs.tag_name }} ================================================ FILE: .github/workflows/s3_deploy.yml ================================================ name: Deploy to S3 on: push: branches: - main jobs: build: if: "${{ contains(github.event.head_commit.message, 'chore(main): release') }}" runs-on: ubuntu-latest env: AWS_ACCESS_KEY_ID: ${{ secrets.AWS_ACCESS_KEY_ID }} AWS_SECRET_ACCESS_KEY: ${{ secrets.AWS_SECRET_ACCESS_KEY }} steps: - uses: actions/checkout@v4 - uses: subosito/flutter-action@v2 with: flutter-version: '3.19.3' channel: stable - name: Install Dependencies run: flutter pub get working-directory: ./example - name: Run static analysis run: flutter analyze . - name: Run tests run: flutter test - name: Build Web run: flutter build web --web-renderer canvaskit --release working-directory: ./example - name: Deploy uses: reggionick/s3-deploy@v3 with: folder: example/build/web bucket: ${{ secrets.S3_BUCKET }} bucket-region: ${{ secrets.S3_BUCKET_REGION }} invalidation: / delete-removed: true no-cache: true private: true filesToInclude: ".*/*,*/*,**" ================================================ FILE: .gitignore ================================================ # Miscellaneous *.class *.log *.pyc *.swp .DS_Store .atom/ .buildlog/ .history .svn/ migrate_working_dir/ # IntelliJ related *.iml *.ipr *.iws .idea/ # The .vscode folder contains launch configuration and tasks you configure in # VS Code which you may wish to be included in version control, so this line # is commented out by default. #.vscode/ # Flutter/Dart/Pub related # Libraries should not include pubspec.lock, per https://dart.dev/guides/libraries/private-files#pubspeclock. /pubspec.lock **/doc/api/ .dart_tool/ .packages build/ .fvm/ ================================================ FILE: .metadata ================================================ # This file tracks properties of this Flutter project. # Used by Flutter tool to assess capabilities and perform upgrades etc. # # This file should be version controlled and should not be manually edited. version: revision: 135454af32477f815a7525073027a3ff9eff1bfd channel: stable project_type: package ================================================ FILE: .release-please-manifest.json ================================================ { ".": "1.1.0" } ================================================ FILE: .vscode/launch.json ================================================ { // Use IntelliSense to learn about possible attributes. // Hover to view descriptions of existing attributes. // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 "version": "0.3.0", "dart.lineLength": 120, "dart.flutterSdkPath": ".fvm/flutter_sdk", // Remove .fvm files from search "search.exclude": { "**/.fvm": true }, // Remove from file watching "files.watcherExclude": { "**/.fvm": true }, "configurations": [ { "name": "moon_flutter", "request": "launch", "type": "dart" }, { "name": "moon_flutter (profile mode)", "request": "launch", "type": "dart", "flutterMode": "profile" }, { "name": "moon_flutter (release mode)", "request": "launch", "type": "dart", "flutterMode": "release" }, { "name": "example", "cwd": "example", "request": "launch", "type": "dart" }, { "name": "example (profile mode)", "cwd": "example", "request": "launch", "type": "dart", "flutterMode": "profile" }, { "name": "example (release mode)", "cwd": "example", "request": "launch", "type": "dart", "flutterMode": "release" } ] } ================================================ FILE: .vscode/settings.json ================================================ { "dart.flutterSdkPath": ".fvm/flutter_sdk", // Remove .fvm files from search "search.exclude": { "**/.fvm": true }, // Remove from file watching "files.watcherExclude": { "**/.fvm": true } } ================================================ FILE: CHANGELOG.md ================================================ # Changelog ## [1.1.0](https://github.com/coingaming/moon_flutter/compare/v1.0.7...v1.1.0) (2025-01-23) ### Features * [MDS-1487] Bump moon_flutter to use the latest moon_flutter_icons ([#458](https://github.com/coingaming/moon_flutter/issues/458)) ([3065ce2](https://github.com/coingaming/moon_flutter/commit/3065ce2a207d92136596b7ea83d29310adfbdc38)) ## [1.0.7](https://github.com/coingaming/moon_flutter/compare/v1.0.6...v1.0.7) (2024-11-27) ### Bug Fixes * [MDS-1415] Update dependencies ([#451](https://github.com/coingaming/moon_flutter/issues/451)) ([cffceac](https://github.com/coingaming/moon_flutter/commit/cffceac0ae93471db57084507bc59c8ce8102e49)) ## [1.0.6](https://github.com/coingaming/moon_flutter/compare/v1.0.5...v1.0.6) (2024-10-09) ### Bug Fixes * [MDS-1351] Fix input assertions. ([#444](https://github.com/coingaming/moon_flutter/issues/444)) ([034059f](https://github.com/coingaming/moon_flutter/commit/034059f956335b224310c687302dea66d79b023f)) ## [1.0.5](https://github.com/coingaming/moon_flutter/compare/v1.0.4...v1.0.5) (2024-09-25) ### Bug Fixes * [MDS-1331] Dispose animation controllers for tooltip and popover ([#441](https://github.com/coingaming/moon_flutter/issues/441)) ([3466cfd](https://github.com/coingaming/moon_flutter/commit/3466cfda9e96940661e77d6aaacfafd072299da4)) ## [1.0.4](https://github.com/coingaming/moon_flutter/compare/v1.0.3...v1.0.4) (2024-08-30) ### Bug Fixes * [MDS-1318] Fix Accordion clip behavior ([#439](https://github.com/coingaming/moon_flutter/issues/439)) ([2c33904](https://github.com/coingaming/moon_flutter/commit/2c33904790ee518e0e0dc98b715474336aa7d24a)) ## [1.0.3](https://github.com/coingaming/moon_flutter/compare/v1.0.2...v1.0.3) (2024-08-09) ### Bug Fixes * revert back to MIT license ([372bc1a](https://github.com/coingaming/moon_flutter/commit/372bc1a1c1ea7357bbb482de612fe03efd8471d8)) ## [1.0.2](https://github.com/coingaming/moon_flutter/compare/v1.0.1...v1.0.2) (2024-08-08) ### Bug Fixes * add license link to footer [MDS-1279] ([#435](https://github.com/coingaming/moon_flutter/issues/435)) ([deaa1a0](https://github.com/coingaming/moon_flutter/commit/deaa1a0cfa90357dc36d6f613148f0cef126a4ca)) ## [1.0.1](https://github.com/coingaming/moon_flutter/compare/v1.0.0...v1.0.1) (2024-08-08) ### Bug Fixes * update license ([2a678cd](https://github.com/coingaming/moon_flutter/commit/2a678cd26fbed732e381a1aa2035fcbd8caff619)) ## [1.0.0](https://github.com/coingaming/moon_flutter/compare/v0.59.3...v1.0.0) (2024-08-02) ### ⚠ BREAKING CHANGES * [MDS-1264] Release v1.0.0 ([#432](https://github.com/coingaming/moon_flutter/issues/432)) ### Features * [MDS-1264] Release v1.0.0 ([#432](https://github.com/coingaming/moon_flutter/issues/432)) ([a7c8713](https://github.com/coingaming/moon_flutter/commit/a7c8713efa61d97ce570d2aca42ba3d3c5d0c1bc)) ## [0.59.3](https://github.com/coingaming/moon_flutter/compare/v0.59.2...v0.59.3) (2024-07-17) ### Bug Fixes * [MDS-1244] General fixes and improvements ([#426](https://github.com/coingaming/moon_flutter/issues/426)) ([7edc0c4](https://github.com/coingaming/moon_flutter/commit/7edc0c4960ae603f26f6a91affc7f8a995aeaa95)) ## [0.59.2](https://github.com/coingaming/moon_flutter/compare/v0.59.1...v0.59.2) (2024-07-05) ### Bug Fixes * [MDS-1231] Fix Accordion absorbing children actions ([#423](https://github.com/coingaming/moon_flutter/issues/423)) ([c119d15](https://github.com/coingaming/moon_flutter/commit/c119d158958e4c41004b8bd69f545c6aab22c86b)) ## [0.59.1](https://github.com/coingaming/moon_flutter/compare/v0.59.0...v0.59.1) (2024-06-07) ### Bug Fixes * [MDS-1176] Fix input components context menu ([#417](https://github.com/coingaming/moon_flutter/issues/417)) ([ff6cf21](https://github.com/coingaming/moon_flutter/commit/ff6cf2150d303b16ab19c813608e65fd9fe82adc)) ## [0.59.0](https://github.com/coingaming/moon_flutter/compare/v0.58.0...v0.59.0) (2024-06-05) ### Features * [MDS-1173] Add inputFormatters property to AuthCode ([#415](https://github.com/coingaming/moon_flutter/issues/415)) ([b1e0102](https://github.com/coingaming/moon_flutter/commit/b1e010203cf3e3e485cf05b852182e21b3e8b7bc)) ## [0.58.0](https://github.com/coingaming/moon_flutter/compare/v0.57.0...v0.58.0) (2024-06-05) ### Features * [MDS-1172] Create typography page ([#412](https://github.com/coingaming/moon_flutter/issues/412)) ([88bd6a7](https://github.com/coingaming/moon_flutter/commit/88bd6a7946dd354e440cd828e83eeb36ea2db328)) ## [0.57.0](https://github.com/coingaming/moon_flutter/compare/v0.56.0...v0.57.0) (2024-05-24) ### Features * [MDS-1140] Create Colors page ([#404](https://github.com/coingaming/moon_flutter/issues/404)) ([95e1c47](https://github.com/coingaming/moon_flutter/commit/95e1c47885819bb27fe9efd96ad1f98f47b768cb)) ## [0.56.0](https://github.com/coingaming/moon_flutter/compare/v0.55.0...v0.56.0) (2024-05-20) ### Features * [MDS-1096] Create home page ([#402](https://github.com/coingaming/moon_flutter/issues/402)) ([8fce52c](https://github.com/coingaming/moon_flutter/commit/8fce52c35ca898cf48ca8a266583377284c571f2)) ## [0.55.0](https://github.com/coingaming/moon_flutter/compare/v0.54.0...v0.55.0) (2024-05-14) ### Features * [MDS-1129] Deprecate Tag uppercase property ([#400](https://github.com/coingaming/moon_flutter/issues/400)) ([cbd666b](https://github.com/coingaming/moon_flutter/commit/cbd666bed42edb2b7172f166626e740860cb88e7)) ## [0.54.0](https://github.com/coingaming/moon_flutter/compare/v0.53.0...v0.54.0) (2024-04-25) ### Features * [MDS-1093] Add pages functionality ([#397](https://github.com/coingaming/moon_flutter/issues/397)) ([78eccf9](https://github.com/coingaming/moon_flutter/commit/78eccf972d0d73689a7933ec1d29855be66f8427)) ## [0.53.0](https://github.com/coingaming/moon_flutter/compare/v0.52.3...v0.53.0) (2024-04-19) ### Features * [MDS-1091] Storybook UI update ([#395](https://github.com/coingaming/moon_flutter/issues/395)) ([12887d3](https://github.com/coingaming/moon_flutter/commit/12887d3c6f93ba2747f5d6ae8ef5b30c57cc0e46)) ## [0.52.3](https://github.com/coingaming/moon_flutter/compare/v0.52.2...v0.52.3) (2024-04-05) ### Bug Fixes * [MDS-1080] Fix MoonTooltip not showing on init ([#392](https://github.com/coingaming/moon_flutter/issues/392)) ([5514dd5](https://github.com/coingaming/moon_flutter/commit/5514dd5f154875c60480a1533a0cbdc900e10021)) ## [0.52.2](https://github.com/coingaming/moon_flutter/compare/v0.52.1...v0.52.2) (2024-04-01) ### Bug Fixes * [MDS-1060] Fix Tag icon alignment ([#389](https://github.com/coingaming/moon_flutter/issues/389)) ([5eac85b](https://github.com/coingaming/moon_flutter/commit/5eac85ba971840a7606d971a36f1075a4dae4dd7)) ## [0.52.1](https://github.com/coingaming/moon_flutter/compare/v0.52.0...v0.52.1) (2024-04-01) ### Bug Fixes * [MDS-1057] Fix moon_icons icon font glyphs vertical misalignment ([#387](https://github.com/coingaming/moon_flutter/issues/387)) ([459172d](https://github.com/coingaming/moon_flutter/commit/459172d46b7caa8fffb9ec0e74f48aaf61d1786e)) ## [0.52.0](https://github.com/coingaming/moon_flutter/compare/v0.51.1...v0.52.0) (2024-03-20) ### Features * [MDS-1034] Create search component ([#384](https://github.com/coingaming/moon_flutter/issues/384)) ([955c039](https://github.com/coingaming/moon_flutter/commit/955c039bc070f363b67c04082a940577b61ed73c)) ## [0.51.1](https://github.com/coingaming/moon_flutter/compare/v0.51.0...v0.51.1) (2024-03-13) ### Bug Fixes * [MDS-1033] Fix popover closing automatically on tap outside. ([#381](https://github.com/coingaming/moon_flutter/issues/381)) ([e696219](https://github.com/coingaming/moon_flutter/commit/e696219d3d2f671909ce3e593596f962cf7086e6)) ## [0.51.0](https://github.com/coingaming/moon_flutter/compare/v0.50.0...v0.51.0) (2024-03-13) ### Features * [MDS-1032] Add onTapAlwaysCalled and cursorErrorColor to Input widgets props ([#379](https://github.com/coingaming/moon_flutter/issues/379)) ([82b0f13](https://github.com/coingaming/moon_flutter/commit/82b0f13ed002ca6d1a9357cdc1ab48fc21bd1cff)) ## [0.50.0](https://github.com/coingaming/moon_flutter/compare/v0.49.8...v0.50.0) (2024-03-12) ### Features * [MDS-1031] Bump minimum Flutter version to 3.19.3 ([#377](https://github.com/coingaming/moon_flutter/issues/377)) ([b25c5a0](https://github.com/coingaming/moon_flutter/commit/b25c5a0453ccf5c24498dbb021a2ca733c5a50da)) ## [0.49.8](https://github.com/coingaming/moon_flutter/compare/v0.49.7...v0.49.8) (2024-03-08) ### Bug Fixes * [MDS-1020] Carousel fixes ([#375](https://github.com/coingaming/moon_flutter/issues/375)) ([99b45db](https://github.com/coingaming/moon_flutter/commit/99b45db66a32f72697b7e2d3ba947033c1dd9d8a)) ## [0.49.7](https://github.com/coingaming/moon_flutter/compare/v0.49.6...v0.49.7) (2024-03-06) ### Bug Fixes * [MDS-1019] Fix carousel bugs ([#373](https://github.com/coingaming/moon_flutter/issues/373)) ([dc7f93f](https://github.com/coingaming/moon_flutter/commit/dc7f93f98ab9677a218eda6803c612ae64e28f5f)) ## [0.49.6](https://github.com/coingaming/moon_flutter/compare/v0.49.5...v0.49.6) (2024-02-26) ### Bug Fixes * [MDS-1010] Fix modal and combobox code snippets ([#370](https://github.com/coingaming/moon_flutter/issues/370)) ([1badea7](https://github.com/coingaming/moon_flutter/commit/1badea77346e718007a253e707a63014d56d5906)) ## [0.49.5](https://github.com/coingaming/moon_flutter/compare/v0.49.4...v0.49.5) (2024-02-26) ### Bug Fixes * [MDS-1009] Fix Tag uppercase vertical misalignment ([#369](https://github.com/coingaming/moon_flutter/issues/369)) ([b2e049a](https://github.com/coingaming/moon_flutter/commit/b2e049a05bd85932684048486615a5f48301bb1c)) ## [0.49.4](https://github.com/coingaming/moon_flutter/compare/v0.49.3...v0.49.4) (2024-02-26) ### Bug Fixes * [MDS-1008] Fix open modal giving error on Storybook navigation ([#367](https://github.com/coingaming/moon_flutter/issues/367)) ([170173a](https://github.com/coingaming/moon_flutter/commit/170173a3ab87382851b8befa1a54c6b1470eb854)) ## [0.49.3](https://github.com/coingaming/moon_flutter/compare/v0.49.2...v0.49.3) (2024-02-26) ### Bug Fixes * [MDS-1006] Fix bottom sheet not closing on Storybook navigation ([#365](https://github.com/coingaming/moon_flutter/issues/365)) ([d1f1584](https://github.com/coingaming/moon_flutter/commit/d1f158484806a483a55faa8ead74b80eb618097b)) ## [0.49.2](https://github.com/coingaming/moon_flutter/compare/v0.49.1...v0.49.2) (2024-02-26) ### Bug Fixes * [MDS-1007] Fix Storybook story selection and knobs not updating on we… ([#363](https://github.com/coingaming/moon_flutter/issues/363)) ([5f1e934](https://github.com/coingaming/moon_flutter/commit/5f1e9347ffaf3b2a23405a8824fd014a0e5ae65e)) ## [0.49.1](https://github.com/coingaming/moon_flutter/compare/v0.49.0...v0.49.1) (2024-02-23) ### Bug Fixes * [NO-TASK] Hotfix for clearing input ([#361](https://github.com/coingaming/moon_flutter/issues/361)) ([991a6ba](https://github.com/coingaming/moon_flutter/commit/991a6ba9aea4c0e1e53a0d952961a2d24d362fbd)) ## [0.49.0](https://github.com/coingaming/moon_flutter/compare/v0.48.5...v0.49.0) (2024-02-23) ### Features * [MDS-990] Combobox component ([#359](https://github.com/coingaming/moon_flutter/issues/359)) ([ee2f3b6](https://github.com/coingaming/moon_flutter/commit/ee2f3b6baf2939e96f00ff7e02e4e8a810fe309a)) ## [0.48.5](https://github.com/coingaming/moon_flutter/compare/v0.48.4...v0.48.5) (2024-02-19) ### Bug Fixes * [MDS-1003] Fix TextInput overflow issues ([#355](https://github.com/coingaming/moon_flutter/issues/355)) ([058042c](https://github.com/coingaming/moon_flutter/commit/058042cb12e78e6860a82c94a8e17b5b35b31e35)) ## [0.48.4](https://github.com/coingaming/moon_flutter/compare/v0.48.3...v0.48.4) (2024-02-19) ### Bug Fixes * [MDS-1002] Fix Storybook focusing bug ([#356](https://github.com/coingaming/moon_flutter/issues/356)) ([d3181ac](https://github.com/coingaming/moon_flutter/commit/d3181ac5dcb027b67ca34ba2d1d11974bb805179)) ## [0.48.3](https://github.com/coingaming/moon_flutter/compare/v0.48.2...v0.48.3) (2024-02-15) ### Bug Fixes * [MDS-998] Pin storybook_flutter temporarily to previous commit ([#353](https://github.com/coingaming/moon_flutter/issues/353)) ([5a3f14b](https://github.com/coingaming/moon_flutter/commit/5a3f14b41b942047fad7487981264c7cfebf46b4)) ## [0.48.2](https://github.com/coingaming/moon_flutter/compare/v0.48.1...v0.48.2) (2024-02-15) ### Bug Fixes * [MDS-997] Fix MoonTextInputGroup not being interactable and minor story fixes ([#351](https://github.com/coingaming/moon_flutter/issues/351)) ([ee9e0cc](https://github.com/coingaming/moon_flutter/commit/ee9e0ccaeb0dc7006aef2f965acfc698e6a3a740)) ## [0.48.1](https://github.com/coingaming/moon_flutter/compare/v0.48.0...v0.48.1) (2024-02-14) ### Bug Fixes * [MDS-993] Bottomsheet route pop hotfix ([#349](https://github.com/coingaming/moon_flutter/issues/349)) ([218cbe0](https://github.com/coingaming/moon_flutter/commit/218cbe042227286daca4c88d9fe8199bc5d45093)) ## [0.48.0](https://github.com/coingaming/moon_flutter/compare/v0.47.3...v0.48.0) (2024-02-14) ### Features * [MDS-991] Bump minimum Flutter version to 3.16.8 ([#347](https://github.com/coingaming/moon_flutter/issues/347)) ([4b946e4](https://github.com/coingaming/moon_flutter/commit/4b946e434dc95bd0f9fe978d6a0214b0be378f24)) ## [0.47.3](https://github.com/coingaming/moon_flutter/compare/v0.47.2...v0.47.3) (2024-02-14) ### Bug Fixes * [MDS-985] Deprecate Checkbox and Radio label constructor and replace usages with MenuItem ([#345](https://github.com/coingaming/moon_flutter/issues/345)) ([e9a1c84](https://github.com/coingaming/moon_flutter/commit/e9a1c84cd22462469647bb9ec3599234d1910b88)) ## [0.47.2](https://github.com/coingaming/moon_flutter/compare/v0.47.1...v0.47.2) (2024-02-09) ### Bug Fixes * [MDS-942] Improve documentation ([#340](https://github.com/coingaming/moon_flutter/issues/340)) ([c7caf16](https://github.com/coingaming/moon_flutter/commit/c7caf1679a4137686b27bab52ca08c80da331d0b)) ## [0.47.1](https://github.com/coingaming/moon_flutter/compare/v0.47.0...v0.47.1) (2024-02-05) ### Bug Fixes * [MDS-984] Update LinearProgress according to design ([#342](https://github.com/coingaming/moon_flutter/issues/342)) ([2294a0b](https://github.com/coingaming/moon_flutter/commit/2294a0b147f11b785d303f35e854dd0462ff995e)) ## [0.47.0](https://github.com/coingaming/moon_flutter/compare/v0.46.0...v0.47.0) (2024-01-19) ### Features * [MDS-924] Add breadcrumb widget ([#334](https://github.com/coingaming/moon_flutter/issues/334)) ([6767d86](https://github.com/coingaming/moon_flutter/commit/6767d868c5b118a6d7106a6c801674f38a244f33)) ## [0.46.0](https://github.com/coingaming/moon_flutter/compare/v0.45.0...v0.46.0) (2024-01-11) ### Features * [MDS-946] Add search functionality to Icons story ([#337](https://github.com/coingaming/moon_flutter/issues/337)) ([b6cf11a](https://github.com/coingaming/moon_flutter/commit/b6cf11aa99bb569162e996c2ba8b71f71ee0ed0e)) ## [0.45.0](https://github.com/coingaming/moon_flutter/compare/v0.44.2...v0.45.0) (2024-01-09) ### Features * [MDS-941] Change property names ([#335](https://github.com/coingaming/moon_flutter/issues/335)) ([ef79d4e](https://github.com/coingaming/moon_flutter/commit/ef79d4ea15109dc2c63321a42b85a068b3e49a6d)) ## [0.44.2](https://github.com/coingaming/moon_flutter/compare/v0.44.1...v0.44.2) (2024-01-02) ### Bug Fixes * [MDS-923] Fix semibold fontWeight from 600 to 500 ([#331](https://github.com/coingaming/moon_flutter/issues/331)) ([bcbae9a](https://github.com/coingaming/moon_flutter/commit/bcbae9aac8d217c4417919a92d1c74611684475b)) ## [0.44.1](https://github.com/coingaming/moon_flutter/compare/v0.44.0...v0.44.1) (2023-12-22) ### Bug Fixes * [MDS-920] Fix AuthCode validation ([#328](https://github.com/coingaming/moon_flutter/issues/328)) ([f25dbe0](https://github.com/coingaming/moon_flutter/commit/f25dbe00d363dca0e4559b9680a518afec8e45e0)) ## [0.44.0](https://github.com/coingaming/moon_flutter/compare/v0.43.0...v0.44.0) (2023-12-21) ### Features * [MDS-917] Refactor TabBar and SegmentedControl components ([#325](https://github.com/coingaming/moon_flutter/issues/325)) ([13256fc](https://github.com/coingaming/moon_flutter/commit/13256fcdf9dc481fa8e7571a7c7be08d4cf531d8)) ## [0.43.0](https://github.com/coingaming/moon_flutter/compare/v0.42.0...v0.43.0) (2023-12-21) ### Features * [MDS-916] Change code snippet text font family ([#324](https://github.com/coingaming/moon_flutter/issues/324)) ([8c9f851](https://github.com/coingaming/moon_flutter/commit/8c9f851f167e2dfdf83c04829748e2f2febcf585)) ## [0.42.0](https://github.com/coingaming/moon_flutter/compare/v0.41.0...v0.42.0) (2023-12-21) ### Features * [MDS-915] Modify MoonToast to align with design ([#320](https://github.com/coingaming/moon_flutter/issues/320)) ([7837be9](https://github.com/coingaming/moon_flutter/commit/7837be910bd51523045d5da48e8e57afc8e4ea54)) ## [0.41.0](https://github.com/coingaming/moon_flutter/compare/v0.40.1...v0.41.0) (2023-12-21) ### Features * [MDS-914] Modify filled and outlined versions of MoonAlert to align with design ([#319](https://github.com/coingaming/moon_flutter/issues/319)) ([7cb4440](https://github.com/coingaming/moon_flutter/commit/7cb4440e9f302af3b4c050a6fd1ee72b26625599)) ## [0.40.1](https://github.com/coingaming/moon_flutter/compare/v0.40.0...v0.40.1) (2023-12-20) ### Bug Fixes * [MDS-913] Bump moon_icons_flutter dependency to 0.4.0 ([#317](https://github.com/coingaming/moon_flutter/issues/317)) ([5a429b6](https://github.com/coingaming/moon_flutter/commit/5a429b65e085a9f2a3d4cd7fe183c2cbc172924b)) ## [0.40.0](https://github.com/coingaming/moon_flutter/compare/v0.39.0...v0.40.0) (2023-12-19) ### Features * [MDS-742] Enable code plugin and add code snippets ([#315](https://github.com/coingaming/moon_flutter/issues/315)) ([0887fd7](https://github.com/coingaming/moon_flutter/commit/0887fd7edf1ee189650f0ef190c8e2b6180a0af6)) ## [0.39.0](https://github.com/coingaming/moon_flutter/compare/v0.38.0...v0.39.0) (2023-12-15) ### Features * [MDS-912] Add moon_tokens as dependency of moon_flutter ([#313](https://github.com/coingaming/moon_flutter/issues/313)) ([3ae5f93](https://github.com/coingaming/moon_flutter/commit/3ae5f935f0b0ab114fb2ee352744b1f273c467e6)) ## [0.38.0](https://github.com/coingaming/moon_flutter/compare/v0.37.0...v0.38.0) (2023-12-15) ### Features * [MDS-910] Rename color tokens to align more with design variables ([#311](https://github.com/coingaming/moon_flutter/issues/311)) ([3c54130](https://github.com/coingaming/moon_flutter/commit/3c541304ee74a4239ad25d5c80a892a2b868fe51)) ## [0.37.0](https://github.com/coingaming/moon_flutter/compare/v0.36.1...v0.37.0) (2023-12-08) ### Features * [MDS-896] Pin storybook_flutter temporarily to previous commit ([#309](https://github.com/coingaming/moon_flutter/issues/309)) ([1ba24e0](https://github.com/coingaming/moon_flutter/commit/1ba24e0627a5cd3b8179de89d883cde59dd18676)) ## [0.36.1](https://github.com/coingaming/moon_flutter/compare/v0.36.0...v0.36.1) (2023-12-01) ### Bug Fixes * [MDS-844] Adjust Input helper text padding ([#307](https://github.com/coingaming/moon_flutter/issues/307)) ([b453a71](https://github.com/coingaming/moon_flutter/commit/b453a715fde01c7dac930cc088474c205a8b4097)) ## [0.36.0](https://github.com/coingaming/moon_flutter/compare/v0.35.0...v0.36.0) (2023-11-24) ### Features * [MDS-833] Create an example of multi-select Dropdown ([43070b6](https://github.com/coingaming/moon_flutter/commit/43070b671c35da9c17c4f08f64c9f3ca8c85337e)) ### Bug Fixes * [NO-TASK] Add actual code for multi-select Dropdown ([9ef71b9](https://github.com/coingaming/moon_flutter/commit/9ef71b9fccb855aabb91e85d17adfd1093d8b9f6)) * [NO-TASK] Upload actual Dropdown changes ([0957268](https://github.com/coingaming/moon_flutter/commit/0957268c887357e91db4e789c3f9701bb4364833)) * [NO-TASK] Upload actual Dropdown changes ([ff309b1](https://github.com/coingaming/moon_flutter/commit/ff309b14c0b966c7b34a8d220bc6dc8f7b6b33c6)) ## [0.35.0](https://github.com/coingaming/moon_flutter/compare/v0.34.7...v0.35.0) (2023-11-24) ### Features * [MDS-833] Create an example of multi-select Dropdown ([#302](https://github.com/coingaming/moon_flutter/issues/302)) ([bd520b4](https://github.com/coingaming/moon_flutter/commit/bd520b4f1e7ffad35f59a4ac15d0bc4e496e3c38)) ## [0.34.7](https://github.com/coingaming/moon_flutter/compare/v0.34.6...v0.34.7) (2023-11-24) ### Bug Fixes * [NO-TASK] Revert deploy workflow version ([5452bf8](https://github.com/coingaming/moon_flutter/commit/5452bf8aec3114e647984aaf1c3c32ae8b1fffd1)) ## [0.34.6](https://github.com/coingaming/moon_flutter/compare/v0.34.5...v0.34.6) (2023-11-22) ### Bug Fixes * [MDS-830] Reduce the amount of RepaintBoundary's in use ([#299](https://github.com/coingaming/moon_flutter/issues/299)) ([a712571](https://github.com/coingaming/moon_flutter/commit/a712571c07d1f2f660fff664ac63cec8c2e83fa4)) ## [0.34.5](https://github.com/coingaming/moon_flutter/compare/v0.34.4...v0.34.5) (2023-11-21) ### Bug Fixes * [MDS-827] Add sm version for MoonTag ([#297](https://github.com/coingaming/moon_flutter/issues/297)) ([ad0f1ef](https://github.com/coingaming/moon_flutter/commit/ad0f1ef194260360a44bfe7c61b9fe7081003a41)) ## [0.34.4](https://github.com/coingaming/moon_flutter/compare/v0.34.3...v0.34.4) (2023-11-21) ### Bug Fixes * [MDS-828] Adjust MDS color scheme to latest ([#295](https://github.com/coingaming/moon_flutter/issues/295)) ([e5285fe](https://github.com/coingaming/moon_flutter/commit/e5285fec4d0e17e8a1cea80bf08086eca25574b5)) ## [0.34.3](https://github.com/coingaming/moon_flutter/compare/v0.34.2...v0.34.3) (2023-11-19) ### Bug Fixes * [MDS-818] Fix storybook_flutter icons display issues on mobile browsers ([#293](https://github.com/coingaming/moon_flutter/issues/293)) ([069a8f6](https://github.com/coingaming/moon_flutter/commit/069a8f67ae71fc1ab420fd20e56bd2e977fc63fe)) ## [0.34.2](https://github.com/coingaming/moon_flutter/compare/v0.34.1...v0.34.2) (2023-11-13) ### Bug Fixes * [MDS-804] Export moon_flutter_icons from moon_flutter ([#291](https://github.com/coingaming/moon_flutter/issues/291)) ([cc9ef2f](https://github.com/coingaming/moon_flutter/commit/cc9ef2f98912b6df7eb307a9eca94f6a9f11c446)) ## [0.34.1](https://github.com/coingaming/moon_flutter/compare/v0.34.0...v0.34.1) (2023-11-13) ### Bug Fixes * [MDS-801] Bump moon_flutter_icons version ([#289](https://github.com/coingaming/moon_flutter/issues/289)) ([fa6b0c5](https://github.com/coingaming/moon_flutter/commit/fa6b0c5995de475b3b450ff546b21fbc7c66de47)) ## [0.34.0](https://github.com/coingaming/moon_flutter/compare/v0.33.3...v0.34.0) (2023-11-12) ### Features * [MDS-800] Make relevant changes to use the latest moon_icons_flutter library in moon_flutter ([#287](https://github.com/coingaming/moon_flutter/issues/287)) ([4c9d572](https://github.com/coingaming/moon_flutter/commit/4c9d572833ba3cd802bb9a99b0ae6f90f768a494)) ## [0.33.3](https://github.com/coingaming/moon_flutter/compare/v0.33.2...v0.33.3) (2023-11-01) ### Bug Fixes * [MDS-774] Add Icons to Storybook ([#285](https://github.com/coingaming/moon_flutter/issues/285)) ([7e8b56d](https://github.com/coingaming/moon_flutter/commit/7e8b56dde178eadb82351f20af1ff703f67eea50)) ## [0.33.2](https://github.com/coingaming/moon_flutter/compare/v0.33.1...v0.33.2) (2023-10-30) ### Bug Fixes * [NO-TASK] Add routing dependency ([#283](https://github.com/coingaming/moon_flutter/issues/283)) ([1f396a5](https://github.com/coingaming/moon_flutter/commit/1f396a58e6e186a152030b67bc48d5257bb8ffff)) ## [0.33.1](https://github.com/coingaming/moon_flutter/compare/v0.33.0...v0.33.1) (2023-10-30) ### Bug Fixes * [MDS-767] Change url error image format ([#281](https://github.com/coingaming/moon_flutter/issues/281)) ([d07e196](https://github.com/coingaming/moon_flutter/commit/d07e1961c351cc105ecd5c8938ea4036cf5cbb66)) ## [0.33.0](https://github.com/coingaming/moon_flutter/compare/v0.32.2...v0.33.0) (2023-10-30) ### Features * [MDS-766] Change storybook routing library ([#279](https://github.com/coingaming/moon_flutter/issues/279)) ([1d74da0](https://github.com/coingaming/moon_flutter/commit/1d74da0789e069091e725eb7f737dd98aa508ad3)) ## [0.32.2](https://github.com/coingaming/moon_flutter/compare/v0.32.1...v0.32.2) (2023-10-25) ### Bug Fixes * [NO-TASK] Pin storybook_flutter temporarily to previous commit ([#277](https://github.com/coingaming/moon_flutter/issues/277)) ([72969b8](https://github.com/coingaming/moon_flutter/commit/72969b859a8c4910ab2fa731c55bcfef4872eee2)) ## [0.32.1](https://github.com/coingaming/moon_flutter/compare/v0.32.0...v0.32.1) (2023-10-23) ### Bug Fixes * [NO-TASK] CI token verification ([e3530fc](https://github.com/coingaming/moon_flutter/commit/e3530fce95171952b28c8db41cc1694eeecf2f2b)) ## [0.32.0](https://github.com/coingaming/moon_flutter/compare/v0.31.5...v0.32.0) (2023-10-20) ### Features * [MDS-741] Add routing for stories ([#274](https://github.com/coingaming/moon_flutter/issues/274)) ([6db4ca5](https://github.com/coingaming/moon_flutter/commit/6db4ca5f55346b5139fb8f30b6b6efbf8b7f261d)) ## [0.31.5](https://github.com/coingaming/moon_flutter/compare/v0.31.4...v0.31.5) (2023-10-20) ### Bug Fixes * [MDS-758] Pin storybook_flutter temporarily to previous commit again ([#272](https://github.com/coingaming/moon_flutter/issues/272)) ([66712b5](https://github.com/coingaming/moon_flutter/commit/66712b5bcced705eba3dc4e24a769f3af7347c1e)) ## [0.31.4](https://github.com/coingaming/moon_flutter/compare/v0.31.3...v0.31.4) (2023-10-18) ### Bug Fixes * [MDS-756] Use moon_flutter_icons package for icons ([#270](https://github.com/coingaming/moon_flutter/issues/270)) ([78d7735](https://github.com/coingaming/moon_flutter/commit/78d7735b1a8b14a92a1d7d91a9dbd8bff30741d1)) ## [0.31.3](https://github.com/coingaming/moon_flutter/compare/v0.31.2...v0.31.3) (2023-10-16) ### Bug Fixes * [MDS-739] Update code after Storybook fork changes ([#268](https://github.com/coingaming/moon_flutter/issues/268)) ([e9affcb](https://github.com/coingaming/moon_flutter/commit/e9affcb73f0cab0509b08912137fa4e770f2ba1c)) ## [0.31.2](https://github.com/coingaming/moon_flutter/compare/v0.31.1...v0.31.2) (2023-10-12) ### Bug Fixes * [MDS-743] Pin storybook_flutter temporarily to previous commit ([#266](https://github.com/coingaming/moon_flutter/issues/266)) ([5d110c8](https://github.com/coingaming/moon_flutter/commit/5d110c892ad6aa3528ab2073b50ed3a5f499ec4a)) ## [0.31.1](https://github.com/coingaming/moon_flutter/compare/v0.31.0...v0.31.1) (2023-10-06) ### Bug Fixes * Table width fix ([#264](https://github.com/coingaming/moon_flutter/issues/264)) ([91bcb92](https://github.com/coingaming/moon_flutter/commit/91bcb92a181d11f1ee7f76a5541037e80af3b219)) ## [0.31.0](https://github.com/coingaming/moon_flutter/compare/v0.30.2...v0.31.0) (2023-10-05) ### Features * [MDS-649] Create Table component ([#262](https://github.com/coingaming/moon_flutter/issues/262)) ([5ad503f](https://github.com/coingaming/moon_flutter/commit/5ad503fa936b6b12750f0ed250afdf6a425d16af)) ## [0.30.2](https://github.com/coingaming/moon_flutter/compare/v0.30.1...v0.30.2) (2023-10-03) ### Bug Fixes * [MDS-728] Bump minimum Flutter version to 3.13.5 ([#260](https://github.com/coingaming/moon_flutter/issues/260)) ([5c3ff61](https://github.com/coingaming/moon_flutter/commit/5c3ff61f8b53619299777f051fae6e7b8977f5b7)) ## [0.30.1](https://github.com/coingaming/moon_flutter/compare/v0.30.0...v0.30.1) (2023-09-25) ### Bug Fixes * [MDS-696] Swap light gohan and goku colors ([#258](https://github.com/coingaming/moon_flutter/issues/258)) ([0fb1750](https://github.com/coingaming/moon_flutter/commit/0fb1750b299452476f70dccac53eec5be7e565b6)) ## [0.30.0](https://github.com/coingaming/moon_flutter/compare/v0.29.5...v0.30.0) (2023-09-22) ### Features * [MDS-592] Create Dropdown component ([#256](https://github.com/coingaming/moon_flutter/issues/256)) ([adee0d1](https://github.com/coingaming/moon_flutter/commit/adee0d19fd23696a2b45a57ffac67de05b355143)) ## [0.29.5](https://github.com/coingaming/moon_flutter/compare/v0.29.4...v0.29.5) (2023-09-14) ### Bug Fixes * [MDS-682] Fix InputGroup auto validate mode ([#254](https://github.com/coingaming/moon_flutter/issues/254)) ([81bcf3d](https://github.com/coingaming/moon_flutter/commit/81bcf3dff063d69cdccf599ad243e0482049fccb)) ## [0.29.4](https://github.com/coingaming/moon_flutter/compare/v0.29.3...v0.29.4) (2023-09-12) ### Bug Fixes * [MDS-675] Add missing container border and helper animations for InputGroup ([#252](https://github.com/coingaming/moon_flutter/issues/252)) ([e254b16](https://github.com/coingaming/moon_flutter/commit/e254b16d0593b9cd89fcbbb0640c879d2949c66f)) ## [0.29.3](https://github.com/coingaming/moon_flutter/compare/v0.29.2...v0.29.3) (2023-09-12) ### Bug Fixes * [MDS-669] Fix InputGroup bugs ([#250](https://github.com/coingaming/moon_flutter/issues/250)) ([f7a6759](https://github.com/coingaming/moon_flutter/commit/f7a6759bb3ded699629f4e7b43beff224aa0067a)) ## [0.29.2](https://github.com/coingaming/moon_flutter/compare/v0.29.1...v0.29.2) (2023-09-08) ### Bug Fixes * [MDS-665] Fix Input bugs and add border animations ([#248](https://github.com/coingaming/moon_flutter/issues/248)) ([2f22b29](https://github.com/coingaming/moon_flutter/commit/2f22b29cfa193fd2883b57f64a37f38f8fd2dcdc)) ## [0.29.1](https://github.com/coingaming/moon_flutter/compare/v0.29.0...v0.29.1) (2023-09-06) ### Bug Fixes * [MDS-664] Update icon font and MDS text font ([#246](https://github.com/coingaming/moon_flutter/issues/246)) ([95aed8e](https://github.com/coingaming/moon_flutter/commit/95aed8e34e13db01e797d57d617c94a1181bdf9e)) ## [0.29.0](https://github.com/coingaming/moon_flutter/compare/v0.28.1...v0.29.0) (2023-09-06) ### Features * [MDS-617] Refactor Input to align with Flutter 3.10.x changes and create InputGroup component ([#239](https://github.com/coingaming/moon_flutter/issues/239)) ([32ec1c7](https://github.com/coingaming/moon_flutter/commit/32ec1c79588239167ac559ef8aceab445c6b33d2)) ## [0.28.1](https://github.com/coingaming/moon_flutter/compare/v0.28.0...v0.28.1) (2023-08-11) ### Bug Fixes * [MDS-643] Fix progress bar clipping bug ([#242](https://github.com/coingaming/moon_flutter/issues/242)) ([b5d650b](https://github.com/coingaming/moon_flutter/commit/b5d650bcffbbec5a5222ba1c3125d3d70d560f1e)) ## [0.28.0](https://github.com/coingaming/moon_flutter/compare/v0.27.2...v0.28.0) (2023-08-11) ### Features * [MDS-629] Add pin for linear progress ([#240](https://github.com/coingaming/moon_flutter/issues/240)) ([7f81e38](https://github.com/coingaming/moon_flutter/commit/7f81e3870f273ad2f162872fc0863e104b3a46ab)) ## [0.27.2](https://github.com/coingaming/moon_flutter/compare/v0.27.1...v0.27.2) (2023-08-09) ### Bug Fixes * [MDS-631] Components API changes ([#237](https://github.com/coingaming/moon_flutter/issues/237)) ([6e56792](https://github.com/coingaming/moon_flutter/commit/6e56792625c51c231eec37fa9f21319d334951ce)) ## [0.27.1](https://github.com/coingaming/moon_flutter/compare/v0.27.0...v0.27.1) (2023-08-03) ### Bug Fixes * Padding fixes ([#235](https://github.com/coingaming/moon_flutter/issues/235)) ([821da7b](https://github.com/coingaming/moon_flutter/commit/821da7b024f030d24aa31568e3ccb1aabad1c810)) ## [0.27.0](https://github.com/coingaming/moon_flutter/compare/v0.26.19...v0.27.0) (2023-08-02) ### Features * [MDS-618] Menu item component ([#233](https://github.com/coingaming/moon_flutter/issues/233)) ([41ee0e1](https://github.com/coingaming/moon_flutter/commit/41ee0e1fa29406e1226e62148522001223fc0259)) ## [0.26.19](https://github.com/coingaming/moon_flutter/compare/v0.26.18...v0.26.19) (2023-08-02) ### Bug Fixes * [MDS-624] Fix Accordion content outside version focus and hover ([#231](https://github.com/coingaming/moon_flutter/issues/231)) ([96585a3](https://github.com/coingaming/moon_flutter/commit/96585a3278e0a9835363b7cc24899e091e53b163)) ## [0.26.18](https://github.com/coingaming/moon_flutter/compare/v0.26.17...v0.26.18) (2023-07-28) ### Bug Fixes * Publish fix ([4cb38dc](https://github.com/coingaming/moon_flutter/commit/4cb38dcd56291619f5a9473945d9551dca0144f9)) ## [0.26.5](https://github.com/coingaming/moon_flutter/compare/v0.26.4...v0.26.5) (2023-07-26) ### Bug Fixes * [MDS-602] Fix Bottomsheet bugs ([#216](https://github.com/coingaming/moon_flutter/issues/216)) ([9743bc3](https://github.com/coingaming/moon_flutter/commit/9743bc3e8cb27693cb71d5d400d3d41a3cf6e14e)) ## [0.26.4](https://github.com/coingaming/moon_flutter/compare/v0.26.3...v0.26.4) (2023-07-25) ### Bug Fixes * [MDS-611] Fix Toast queueing mechanism and add more properties ([#214](https://github.com/coingaming/moon_flutter/issues/214)) ([4470593](https://github.com/coingaming/moon_flutter/commit/4470593c181384e8fa557fb7ba2d558893234513)) ## [0.26.3](https://github.com/coingaming/moon_flutter/compare/v0.26.2...v0.26.3) (2023-07-19) ### Bug Fixes * [MDS-594] Carousel edge case fixes and story expansion ([#212](https://github.com/coingaming/moon_flutter/issues/212)) ([74d82ee](https://github.com/coingaming/moon_flutter/commit/74d82eec2126e81d432927de2332937effa8147a)) ## [0.26.2](https://github.com/coingaming/moon_flutter/compare/v0.26.1...v0.26.2) (2023-07-18) ### Bug Fixes * [MDS-596] Refactor theming for extensibility ([#210](https://github.com/coingaming/moon_flutter/issues/210)) ([2c1cd27](https://github.com/coingaming/moon_flutter/commit/2c1cd279616ae3ef168f2cb402dcc2d97261c639)) ## [0.26.1](https://github.com/coingaming/moon_flutter/compare/v0.26.0...v0.26.1) (2023-07-13) ### Bug Fixes * [MDS-601] Refactor components properties ([#208](https://github.com/coingaming/moon_flutter/issues/208)) ([598f9ae](https://github.com/coingaming/moon_flutter/commit/598f9ae54d89a9342681f69ea71772d814db399b)) ## [0.26.0](https://github.com/coingaming/moon_flutter/compare/v0.25.1...v0.26.0) (2023-07-10) ### Features * [MDS-590] Create Drawer widget ([#204](https://github.com/coingaming/moon_flutter/issues/204)) ([df73463](https://github.com/coingaming/moon_flutter/commit/df73463e843fa95130807d03d1634500e5376288)) ## [0.25.1](https://github.com/coingaming/moon_flutter/compare/v0.25.0...v0.25.1) (2023-07-10) ### Bug Fixes * [MDS-593] Upgrade Flutter to 3.10.5 ([#205](https://github.com/coingaming/moon_flutter/issues/205)) ([a469868](https://github.com/coingaming/moon_flutter/commit/a4698685f9bac6f40f604cbb4a0132c9c29ab8b3)) ## [0.25.0](https://github.com/coingaming/moon_flutter/compare/v0.24.0...v0.25.0) (2023-07-07) ### Features * [MDS-565] Create Carousel widget ([#200](https://github.com/coingaming/moon_flutter/issues/200)) ([fc6534b](https://github.com/coingaming/moon_flutter/commit/fc6534b7796c45d681f79a4cf3e1c287e5598ca6)) ## [0.24.0](https://github.com/coingaming/moon_flutter/compare/v0.23.0...v0.24.0) (2023-07-03) ### Features * [MDS-576] Create DotIndicator widget ([#201](https://github.com/coingaming/moon_flutter/issues/201)) ([41b0ab9](https://github.com/coingaming/moon_flutter/commit/41b0ab993187fc424c41eaaf6082693c1f67346b)) ## [0.23.0](https://github.com/coingaming/moon_flutter/compare/v0.22.9...v0.23.0) (2023-06-21) ### Features * [MDS-552] Create BottomSheet widget ([#198](https://github.com/coingaming/moon_flutter/issues/198)) ([d0ec518](https://github.com/coingaming/moon_flutter/commit/d0ec518815280b54f375c87cae52737ebe620f95)) ## [0.22.9](https://github.com/coingaming/moon_flutter/compare/v0.22.8...v0.22.9) (2023-06-20) ### Bug Fixes * [MDS-564] Remove vector_math transitive dependency ([#196](https://github.com/coingaming/moon_flutter/issues/196)) ([fa8490a](https://github.com/coingaming/moon_flutter/commit/fa8490adc54cbf9e32d7de4324fb107be143aa9e)) ## [0.22.8](https://github.com/coingaming/moon_flutter/compare/v0.22.7...v0.22.8) (2023-06-20) ### Bug Fixes * [MDS-562] Update the icon font ([#194](https://github.com/coingaming/moon_flutter/issues/194)) ([af43608](https://github.com/coingaming/moon_flutter/commit/af43608b20f4a4efcaa8cfd798ca875145346e86)) ## [0.22.7](https://github.com/coingaming/moon_flutter/compare/v0.22.6...v0.22.7) (2023-06-14) ### Bug Fixes * [MDS-551] Add default theming for icons ([#192](https://github.com/coingaming/moon_flutter/issues/192)) ([fc476a0](https://github.com/coingaming/moon_flutter/commit/fc476a0ade1684b2b12e24a5d78f98451db6e1ca)) ## [0.22.6](https://github.com/coingaming/moon_flutter/compare/v0.22.5...v0.22.6) (2023-06-07) ### Bug Fixes * [MDS-539] Fix theme switching issues ([#190](https://github.com/coingaming/moon_flutter/issues/190)) ([7a0d179](https://github.com/coingaming/moon_flutter/commit/7a0d1798c8f0a6616424362f6467c34761fbfed7)) ## [0.22.5](https://github.com/coingaming/moon_flutter/compare/v0.22.4...v0.22.5) (2023-05-31) ### Bug Fixes * [MDS-538] Remove computeLuminace method ([#188](https://github.com/coingaming/moon_flutter/issues/188)) ([bc4ebd7](https://github.com/coingaming/moon_flutter/commit/bc4ebd7b65f0e9a467b08370fc625a1720a3f552)) ## [0.22.4](https://github.com/coingaming/moon_flutter/compare/v0.22.3...v0.22.4) (2023-05-29) ### Bug Fixes * Fix accordion missing text style ([#186](https://github.com/coingaming/moon_flutter/issues/186)) ([b61d5af](https://github.com/coingaming/moon_flutter/commit/b61d5afc1c58f46da1171698d3fcb5fd1003b4be)) ## [0.22.3](https://github.com/coingaming/moon_flutter/compare/v0.22.2...v0.22.3) (2023-05-26) ### Bug Fixes * Fix tabBar and segmentedControl animation ([#184](https://github.com/coingaming/moon_flutter/issues/184)) ([af64b94](https://github.com/coingaming/moon_flutter/commit/af64b9486999f96ae602177a77179d42f4aa4975)) ## [0.22.2](https://github.com/coingaming/moon_flutter/compare/v0.22.1...v0.22.2) (2023-05-26) ### Bug Fixes * [MDS-510] Fix theme switching color being out of sync in widgets - Part 1 ([#178](https://github.com/coingaming/moon_flutter/issues/178)) ([0e58cd1](https://github.com/coingaming/moon_flutter/commit/0e58cd168b30c50c1058ce375074e76bd4081f66)) ## [0.22.1](https://github.com/coingaming/moon_flutter/compare/v0.22.0...v0.22.1) (2023-05-26) ### Bug Fixes * Add selected tab pill text color ([#181](https://github.com/coingaming/moon_flutter/issues/181)) ([1ce39cf](https://github.com/coingaming/moon_flutter/commit/1ce39cfc8439801bf83d8b925f250b2fd1918d4b)) ## [0.22.0](https://github.com/coingaming/moon_flutter/compare/v0.21.3...v0.22.0) (2023-05-26) ### Features * [MDS-535] Create MoonTabBar component ([#179](https://github.com/coingaming/moon_flutter/issues/179)) ([cf19d9f](https://github.com/coingaming/moon_flutter/commit/cf19d9ff061932390ff791d10ba4a7a4b1f97777)) ## [0.21.3](https://github.com/coingaming/moon_flutter/compare/v0.21.2...v0.21.3) (2023-05-22) ### Bug Fixes * [MDS-534] Replace Color.lerp with premul one where possible ([#176](https://github.com/coingaming/moon_flutter/issues/176)) ([e87e103](https://github.com/coingaming/moon_flutter/commit/e87e103dff231696f814577d5c5b9bc420fe1d03)) ## [0.21.2](https://github.com/coingaming/moon_flutter/compare/v0.21.1...v0.21.2) (2023-05-22) ### Bug Fixes * [MDS-527] Extract out figma_squircle logic and fix various issues ([#172](https://github.com/coingaming/moon_flutter/issues/172)) ([08e7752](https://github.com/coingaming/moon_flutter/commit/08e7752bb61665b269d22a3cee7b2fc7d41a367c)) ## [0.21.1](https://github.com/coingaming/moon_flutter/compare/v0.21.0...v0.21.1) (2023-05-22) ### Bug Fixes * [MDS-532] Add ShapeDecoration as props to every widget where it makes sense ([#173](https://github.com/coingaming/moon_flutter/issues/173)) ([b4eba9c](https://github.com/coingaming/moon_flutter/commit/b4eba9c7945bc930007c239ecd287e6b653d8ada)) ## [0.21.0](https://github.com/coingaming/moon_flutter/compare/v0.20.3...v0.21.0) (2023-05-17) ### Features * [MDS-518] Create MoonSegmentedControl component ([#170](https://github.com/coingaming/moon_flutter/issues/170)) ([04cb654](https://github.com/coingaming/moon_flutter/commit/04cb654ace91bb96fbd1f616f4237f11fd3ce750)) ## [0.20.3](https://github.com/coingaming/moon_flutter/compare/v0.20.2...v0.20.3) (2023-05-17) ### Bug Fixes * [MDS-525] Fix EdgeInsetsGeometry behaviour that is passed in as props ([#166](https://github.com/coingaming/moon_flutter/issues/166)) ([c7552e3](https://github.com/coingaming/moon_flutter/commit/c7552e3164ed2362a58e88e7c24526c2bcbd9464)) ## [0.20.2](https://github.com/coingaming/moon_flutter/compare/v0.20.1...v0.20.2) (2023-05-17) ### Bug Fixes * [MDS-526] Replace custom outside Popover tapping logic with inbuilt TapRegion ([#167](https://github.com/coingaming/moon_flutter/issues/167)) ([8717282](https://github.com/coingaming/moon_flutter/commit/871728255401d7b2527b5fc7049b9a6c349c6005)) ## [0.20.1](https://github.com/coingaming/moon_flutter/compare/v0.20.0...v0.20.1) (2023-05-15) ### Bug Fixes * [MDS-517] Fix TextInput and TextArea bugs ([#164](https://github.com/coingaming/moon_flutter/issues/164)) ([abcb01c](https://github.com/coingaming/moon_flutter/commit/abcb01c04d019a357566f35dc333abcc85bfad3a)) ## [0.20.0](https://github.com/coingaming/moon_flutter/compare/v0.19.9...v0.20.0) (2023-05-05) ### Features * [MDS-503] Create Input widget ([#144](https://github.com/coingaming/moon_flutter/issues/144)) ([fc5cd2a](https://github.com/coingaming/moon_flutter/commit/fc5cd2a7514097b688ffe3fe088447f4eb8156b9)) ## [0.19.9](https://github.com/coingaming/moon_flutter/compare/v0.19.8...v0.19.9) (2023-05-02) ### Bug Fixes * [MDS-514] Recreate icon font once more and fix scaling and platform alignment problems ([#161](https://github.com/coingaming/moon_flutter/issues/161)) ([1fd1c47](https://github.com/coingaming/moon_flutter/commit/1fd1c474ab623727deae39dc6b280c17dfcbf493)) ## [0.19.8](https://github.com/coingaming/moon_flutter/compare/v0.19.7...v0.19.8) (2023-05-02) ### Bug Fixes * [NO-TASK] Add icon font config.json ([4ca90f4](https://github.com/coingaming/moon_flutter/commit/4ca90f47e5e31e0eb39e9d5ce8817c40fd717472)) ## [0.19.7](https://github.com/coingaming/moon_flutter/compare/v0.19.6...v0.19.7) (2023-04-28) ### Bug Fixes * [MDS-513] Replace BorderRadius with BorderRadiusGeometry ([#158](https://github.com/coingaming/moon_flutter/issues/158)) ([d91418f](https://github.com/coingaming/moon_flutter/commit/d91418f6012e4a7b16f32496a348af39b2e80d4b)) ## [0.19.6](https://github.com/coingaming/moon_flutter/compare/v0.19.5...v0.19.6) (2023-04-27) ### Bug Fixes * [MDS-512] Storybook naming ([#156](https://github.com/coingaming/moon_flutter/issues/156)) ([6dc9cbd](https://github.com/coingaming/moon_flutter/commit/6dc9cbdb5dfe88e6e664d847a9bf5a871f1b0607)) ## [0.19.5](https://github.com/coingaming/moon_flutter/compare/v0.19.4...v0.19.5) (2023-04-25) ### Bug Fixes * [MDS-508] Props check and ordering ([#154](https://github.com/coingaming/moon_flutter/issues/154)) ([cc6025f](https://github.com/coingaming/moon_flutter/commit/cc6025f27cffac02b48cb708da83c7b4aecac5bf)) ## [0.19.4](https://github.com/coingaming/moon_flutter/compare/v0.19.3...v0.19.4) (2023-04-25) ### Bug Fixes * [MDS-511] Fix disappearing widgets in mobile web / PWA ([#152](https://github.com/coingaming/moon_flutter/issues/152)) ([7b96ea5](https://github.com/coingaming/moon_flutter/commit/7b96ea54d0b6105cf5fe8af2f48142f97707a958)) ## [0.19.3](https://github.com/coingaming/moon_flutter/compare/v0.19.2...v0.19.3) (2023-04-24) ### Bug Fixes * [MDS-509] Fix Avatar clipping with uneven height and width combinations ([#150](https://github.com/coingaming/moon_flutter/issues/150)) ([87f8b72](https://github.com/coingaming/moon_flutter/commit/87f8b72f3d8f5042370e4ecbacfda4b335fac96d)) ## [0.19.2](https://github.com/coingaming/moon_flutter/compare/v0.19.1...v0.19.2) (2023-04-24) ### Bug Fixes * [MDS-504] Fork storybook_flutter, create extra functionality and add it as dependency. ([#148](https://github.com/coingaming/moon_flutter/issues/148)) ([c92a516](https://github.com/coingaming/moon_flutter/commit/c92a5167dee698da8366c5a9d43ae0a89fdc6cca)) ## [0.19.1](https://github.com/coingaming/moon_flutter/compare/v0.19.0...v0.19.1) (2023-04-19) ### Bug Fixes * [MDS-502] Add additional storybook knobs to components ([#145](https://github.com/coingaming/moon_flutter/issues/145)) ([53523fe](https://github.com/coingaming/moon_flutter/commit/53523fe82353a812b731ec83b40dd98a61910293)) ## [0.19.0](https://github.com/coingaming/moon_flutter/compare/v0.18.3...v0.19.0) (2023-04-18) ### Features * [MDS-491] Create TextArea widget ([#140](https://github.com/coingaming/moon_flutter/issues/140)) ([6c00719](https://github.com/coingaming/moon_flutter/commit/6c00719de846f68bb60d84b08c02d349d526afae)) ## [0.18.3](https://github.com/coingaming/moon_flutter/compare/v0.18.2...v0.18.3) (2023-04-18) ### Bug Fixes * [MDS-501] RepaintBoundary and mounted usage ([#141](https://github.com/coingaming/moon_flutter/issues/141)) ([a7e555f](https://github.com/coingaming/moon_flutter/commit/a7e555fd7d0b106432bf172565ce105f1b50a10b)) ## [0.18.2](https://github.com/coingaming/moon_flutter/compare/v0.18.1...v0.18.2) (2023-04-17) ### Bug Fixes * [MDS-499] Refactor EdgeInsets and Alignment to use Geometry variants ([#138](https://github.com/coingaming/moon_flutter/issues/138)) ([7b88df7](https://github.com/coingaming/moon_flutter/commit/7b88df7f1c6ed55e7959fae234aafbe04b8ed3a7)) * [MDS-500] Convert borderRadiusValue usage to BorderRadius ([#137](https://github.com/coingaming/moon_flutter/issues/137)) ([755bbb9](https://github.com/coingaming/moon_flutter/commit/755bbb9a154ad038e2b071de736a984d178e600e)) ## [0.18.1](https://github.com/coingaming/moon_flutter/compare/v0.18.0...v0.18.1) (2023-04-14) ### Bug Fixes * [MDS-498] Add missing Semantics and semanticLabels ([#135](https://github.com/coingaming/moon_flutter/issues/135)) ([10478f4](https://github.com/coingaming/moon_flutter/commit/10478f4454cd8913c82f1b97c1d1a72d0393e02b)) ## [0.18.0](https://github.com/coingaming/moon_flutter/compare/v0.17.1...v0.18.0) (2023-04-12) ### Features * [MDS-489] Create MoonAuthCode component ([#109](https://github.com/coingaming/moon_flutter/issues/109)) ([59d72b7](https://github.com/coingaming/moon_flutter/commit/59d72b790edb2b75b75fdb4505ed2608bbdcfab1)) ## [0.17.1](https://github.com/coingaming/moon_flutter/compare/v0.17.0...v0.17.1) (2023-04-10) ### Bug Fixes * [NO-TASK] Resize Icons story icons ([#107](https://github.com/coingaming/moon_flutter/issues/107)) ([acdcc9d](https://github.com/coingaming/moon_flutter/commit/acdcc9d8c491d1d972ea4dd9b0c039b201037eee)) ## [0.17.0](https://github.com/coingaming/moon_flutter/compare/v0.16.1...v0.17.0) (2023-04-10) ### Features * [MDS-447] Create Toast component ([#103](https://github.com/coingaming/moon_flutter/issues/103)) ([191fc13](https://github.com/coingaming/moon_flutter/commit/191fc1374c5624ecd4ac7eff5e719c3313a58636)) ## [0.16.1](https://github.com/coingaming/moon_flutter/compare/v0.16.0...v0.16.1) (2023-04-10) ### Bug Fixes * [MDS-488] Recreate icon font due to glyphs being slightly off-center ([#104](https://github.com/coingaming/moon_flutter/issues/104)) ([01e5bf2](https://github.com/coingaming/moon_flutter/commit/01e5bf206d7f762d673a5fdf5930bca6f72e8f1d)) ## [0.16.0](https://github.com/coingaming/moon_flutter/compare/v0.15.6...v0.16.0) (2023-04-03) ### Features * [MDS-463] Create Alert widget ([#97](https://github.com/coingaming/moon_flutter/issues/97)) ([a491dc7](https://github.com/coingaming/moon_flutter/commit/a491dc735b1717b2e4099c0a53f8b7c9c81a33b7)) ## [0.15.6](https://github.com/coingaming/moon_flutter/compare/v0.15.5...v0.15.6) (2023-03-30) ### Bug Fixes * [MDS-465] Fix Accordion disappearing titles and color transitions ([#100](https://github.com/coingaming/moon_flutter/issues/100)) ([9392330](https://github.com/coingaming/moon_flutter/commit/939233073621afd67cef9556a7ad957f8a7b5549)) ## [0.15.5](https://github.com/coingaming/moon_flutter/compare/v0.15.4...v0.15.5) (2023-03-28) ### Bug Fixes * [MDS-461] Make widgets accept BorderRadius instead of SmoothBorderRadius ([#98](https://github.com/coingaming/moon_flutter/issues/98)) ([f855f70](https://github.com/coingaming/moon_flutter/commit/f855f7046558b43780c8936d29ab5e35340ec0e5)) ## [0.15.4](https://github.com/coingaming/moon_flutter/compare/v0.15.3...v0.15.4) (2023-03-24) ### Bug Fixes * [MDS-460] Various minor bug fixes ([#95](https://github.com/coingaming/moon_flutter/issues/95)) ([4e1772b](https://github.com/coingaming/moon_flutter/commit/4e1772bd9b6ce18f632d44bc929cea57b1a0c6ab)) ## [0.15.3](https://github.com/coingaming/moon_flutter/compare/v0.15.2...v0.15.3) (2023-03-23) ### Bug Fixes * [MDS-453] Chip types should be separated via intrinsic properties ([#93](https://github.com/coingaming/moon_flutter/issues/93)) ([99d0c08](https://github.com/coingaming/moon_flutter/commit/99d0c08d91fd4bf5a946059d4186f0a867646cbd)) ## [0.15.2](https://github.com/coingaming/moon_flutter/compare/v0.15.1...v0.15.2) (2023-03-23) ### Bug Fixes * [MDS-451] Button types should be separated via intrinsic properties ([#91](https://github.com/coingaming/moon_flutter/issues/91)) ([a87dadc](https://github.com/coingaming/moon_flutter/commit/a87dadcd780ffb609c9e81086b58f17aa75aef4e)) ## [0.15.1](https://github.com/coingaming/moon_flutter/compare/v0.15.0...v0.15.1) (2023-03-23) ### Bug Fixes * [MDS-450] Accordion functionality fixes ([#89](https://github.com/coingaming/moon_flutter/issues/89)) ([2f84351](https://github.com/coingaming/moon_flutter/commit/2f8435109b1382020657bd1d3c0ef636f8e7f1d8)) ## [0.15.0](https://github.com/coingaming/moon_flutter/compare/v0.14.0...v0.15.0) (2023-03-22) ### Features * [MDS-448] Create Modal widget ([#87](https://github.com/coingaming/moon_flutter/issues/87)) ([1eb9562](https://github.com/coingaming/moon_flutter/commit/1eb95620e9175c6199e354d268d7461c267f97db)) ## [0.14.0](https://github.com/coingaming/moon_flutter/compare/v0.13.0...v0.14.0) (2023-03-20) ### Features * [MDS-442] Create Radio widget ([#85](https://github.com/coingaming/moon_flutter/issues/85)) ([1c4f674](https://github.com/coingaming/moon_flutter/commit/1c4f674cf09b8eccef6507617e0d40376be3204a)) ## [0.13.0](https://github.com/coingaming/moon_flutter/compare/v0.12.0...v0.13.0) (2023-03-18) ### Features * [MDS-404] Create Accordion widget ([#83](https://github.com/coingaming/moon_flutter/issues/83)) ([3170b92](https://github.com/coingaming/moon_flutter/commit/3170b929d0ec44d649697e1dc6ba5193d38baa13)) ## [0.12.0](https://github.com/coingaming/moon_flutter/compare/v0.11.1...v0.12.0) (2023-03-15) ### Features * [MDS-436] Create Checkbox component ([#81](https://github.com/coingaming/moon_flutter/issues/81)) ([21a66dd](https://github.com/coingaming/moon_flutter/commit/21a66dddad90942864ebe6fa8b4621d935b7563c)) ## [0.11.1](https://github.com/coingaming/moon_flutter/compare/v0.11.0...v0.11.1) (2023-03-15) ### Bug Fixes * [MDS-437 Fix specific components theming naming and Storybook story weights ([#79](https://github.com/coingaming/moon_flutter/issues/79)) ([f01999f](https://github.com/coingaming/moon_flutter/commit/f01999f7f0af6fffa428d97cea4da26ff3e9472b)) ## [0.11.0](https://github.com/coingaming/moon_flutter/compare/v0.10.1...v0.11.0) (2023-03-14) ### Features * [MDS-431] Create Switch widget ([#77](https://github.com/coingaming/moon_flutter/issues/77)) ([434fb73](https://github.com/coingaming/moon_flutter/commit/434fb73bb36095adcff7948fe1228ff4f031390c)) ## [0.10.1](https://github.com/coingaming/moon_flutter/compare/v0.10.0...v0.10.1) (2023-03-11) ### Bug Fixes * Hotfix Tooltip and Popover RTL position error ([270b4eb](https://github.com/coingaming/moon_flutter/commit/270b4ebcc410a1cd628e6109229aba3163c509c9)) ## [0.10.0](https://github.com/coingaming/moon_flutter/compare/v0.9.6...v0.10.0) (2023-03-11) ### Features * [MDS-429] Create Popover component ([#74](https://github.com/coingaming/moon_flutter/issues/74)) ([33ec0c9](https://github.com/coingaming/moon_flutter/commit/33ec0c9dfed52148af61dd6a074142ef510617ef)) ## [0.9.6](https://github.com/coingaming/moon_flutter/compare/v0.9.5...v0.9.6) (2023-03-10) ### Bug Fixes * [MDS-430] Fix Chip border properties inconsistencies ([#72](https://github.com/coingaming/moon_flutter/issues/72)) ([781d0e8](https://github.com/coingaming/moon_flutter/commit/781d0e86ef13de85c6ba305c3e7fd830ab7eaf27)) ## [0.9.5](https://github.com/coingaming/moon_flutter/compare/v0.9.4...v0.9.5) (2023-03-09) ### Bug Fixes * [MDS-409] Improve theming ([#70](https://github.com/coingaming/moon_flutter/issues/70)) ([a8523a5](https://github.com/coingaming/moon_flutter/commit/a8523a5c92d37c8b92349690d8f82efcea44dc46)) ## [0.9.4](https://github.com/coingaming/moon_flutter/compare/v0.9.3...v0.9.4) (2023-03-08) ### Bug Fixes * [MDS-408] Rewrite Tooltip to add ordinal directions functionality ([#68](https://github.com/coingaming/moon_flutter/issues/68)) ([5cbed50](https://github.com/coingaming/moon_flutter/commit/5cbed5021be69dadf555b1828e25d21cb4fe4de7)) ## [0.9.3](https://github.com/coingaming/moon_flutter/compare/v0.9.2...v0.9.3) (2023-03-02) ### Bug Fixes * [MDS-410] Button fullWidth property bugs out in some conditions ([#66](https://github.com/coingaming/moon_flutter/issues/66)) ([52ed9b7](https://github.com/coingaming/moon_flutter/commit/52ed9b74d9f4d4aa38ce9fe8fd39d8f8218025d1)) ## [0.9.2](https://github.com/coingaming/moon_flutter/compare/v0.9.1...v0.9.2) (2023-03-01) ### Bug Fixes * [MDS-411] Update icons and extract them to separate thematic fonts ([#64](https://github.com/coingaming/moon_flutter/issues/64)) ([39f7063](https://github.com/coingaming/moon_flutter/commit/39f7063d86ff786936a5bb31806ba86990720bfc)) ## [0.9.1](https://github.com/coingaming/moon_flutter/compare/v0.9.0...v0.9.1) (2023-02-28) ### Bug Fixes * [MDS-407] Fix Chip not handling some colors with opacity properly ([#62](https://github.com/coingaming/moon_flutter/issues/62)) ([a62ba9b](https://github.com/coingaming/moon_flutter/commit/a62ba9b17bb9699e532ed525d9de565bf224a827)) ## [0.9.0](https://github.com/coingaming/moon_flutter/compare/v0.8.0...v0.9.0) (2023-02-27) ### Features * [MDS-412] Create LinearProgress and LinearLoader widgets ([#60](https://github.com/coingaming/moon_flutter/issues/60)) ([000de10](https://github.com/coingaming/moon_flutter/commit/000de10f4e6479e42a22e64e758fd26195b86292)) ## [0.8.0](https://github.com/coingaming/moon_flutter/compare/v0.7.0...v0.8.0) (2023-02-23) ### Features * [MDS-405] Create CircularProgress widget ([#58](https://github.com/coingaming/moon_flutter/issues/58)) ([03d8832](https://github.com/coingaming/moon_flutter/commit/03d88323e758e612d6834743d24bea91226360d5)) ## [0.7.0](https://github.com/coingaming/moon_flutter/compare/v0.6.0...v0.7.0) (2023-02-23) ### Features * [MDS-389] Create MoonLoader ([#56](https://github.com/coingaming/moon_flutter/issues/56)) ([1f5b025](https://github.com/coingaming/moon_flutter/commit/1f5b02565bd30cd82986c0f81a5af2befb8c63c0)) ## [0.6.0](https://github.com/coingaming/moon_flutter/compare/v0.5.6...v0.6.0) (2023-02-23) ### Features * [MDS-390] Add MoonTooltip ([#53](https://github.com/coingaming/moon_flutter/issues/53)) ([96a13a6](https://github.com/coingaming/moon_flutter/commit/96a13a6529be9d055c83f1d0e084291bed737931)) ## [0.5.6](https://github.com/coingaming/moon_flutter/compare/v0.5.5...v0.5.6) (2023-02-20) ### Bug Fixes * avatar and button to capitalize in Storybook ([#52](https://github.com/coingaming/moon_flutter/issues/52)) ([db95d21](https://github.com/coingaming/moon_flutter/commit/db95d21b39feb82e9a3b7eda3aa430b46000bf98)) ## [0.5.5](https://github.com/coingaming/moon_flutter/compare/v0.5.4...v0.5.5) (2023-02-20) ### Bug Fixes * chip to Chip in Storybook [MDS-398] ([#48](https://github.com/coingaming/moon_flutter/issues/48)) ([0ef0871](https://github.com/coingaming/moon_flutter/commit/0ef08710852137e4958440319ff0ab100860d5b3)) ## [0.5.4](https://github.com/coingaming/moon_flutter/compare/v0.5.3...v0.5.4) (2023-02-20) ### Bug Fixes * Fix MDS logo ([#49](https://github.com/coingaming/moon_flutter/issues/49)) ([2eccb18](https://github.com/coingaming/moon_flutter/commit/2eccb18bf6195946ac708a3509a6d5d5665676a8)) ## [0.5.3](https://github.com/coingaming/moon_flutter/compare/v0.5.2...v0.5.3) (2023-02-20) ### Bug Fixes * Add AnimatedIconTheme to MoonButton ([#46](https://github.com/coingaming/moon_flutter/issues/46)) ([7c99334](https://github.com/coingaming/moon_flutter/commit/7c993341146b57be24ee288cd11a79b308f75f2a)) ## [0.5.2](https://github.com/coingaming/moon_flutter/compare/v0.5.1...v0.5.2) (2023-02-20) ### Bug Fixes * Convert AnimatedIconTheme to ImplicitlyAnimatedWidget ([#43](https://github.com/coingaming/moon_flutter/issues/43)) ([c1a5216](https://github.com/coingaming/moon_flutter/commit/c1a5216340f540ffde4e2e2d80d4b945021a4e27)) ## [0.5.1](https://github.com/coingaming/moon_flutter/compare/v0.5.0...v0.5.1) (2023-02-19) ### Bug Fixes * Create AnimatedIconTheme ([#41](https://github.com/coingaming/moon_flutter/issues/41)) ([1c24eca](https://github.com/coingaming/moon_flutter/commit/1c24ecab3143ee68afe711a468b0961c1c252245)) ## [0.5.0](https://github.com/coingaming/moon_flutter/compare/v0.4.3...v0.5.0) (2023-02-17) ### Features * [MDS-387] Add/convert MDS icons to the project ([#39](https://github.com/coingaming/moon_flutter/issues/39)) ([2074f9a](https://github.com/coingaming/moon_flutter/commit/2074f9a01d5af650ed2227fcdf505003bdbd451c)) ## [0.4.3](https://github.com/coingaming/moon_flutter/compare/v0.4.2...v0.4.3) (2023-02-15) ### Bug Fixes * Add letter spacing to upper case MoonTag ([1454be1](https://github.com/coingaming/moon_flutter/commit/1454be18271f2838f0061d30ea7bf2fd2cf664f8)) ## [0.4.2](https://github.com/coingaming/moon_flutter/compare/v0.4.1...v0.4.2) (2023-02-14) ### Bug Fixes * Add semantics to MoonTag ([#36](https://github.com/coingaming/moon_flutter/issues/36)) ([e83bea2](https://github.com/coingaming/moon_flutter/commit/e83bea230801d6307b84a88aea35548c516e9211)) ## [0.4.1](https://github.com/coingaming/moon_flutter/compare/v0.4.0...v0.4.1) (2023-02-14) ### Bug Fixes * Correct MoonChip padding ([f14eb2d](https://github.com/coingaming/moon_flutter/commit/f14eb2d5444330cf5a89d911c541988c63cca8a9)) ## [0.4.0](https://github.com/coingaming/moon_flutter/compare/v0.3.0...v0.4.0) (2023-02-14) ### Features * [MDS-378] Create Chip widget ([#33](https://github.com/coingaming/moon_flutter/issues/33)) ([4f41fcd](https://github.com/coingaming/moon_flutter/commit/4f41fcddef034d78c8b13c0a177d3f501c21ffa8)) ## [0.3.0](https://github.com/coingaming/moon_flutter/compare/v0.2.4...v0.3.0) (2023-02-10) ### Features * [MDS-379] Finalize the MoonTag ([#31](https://github.com/coingaming/moon_flutter/issues/31)) ([95ecf31](https://github.com/coingaming/moon_flutter/commit/95ecf31f7ee38a07fdbfc0782b6687b04dfa7369)) ## [0.2.4](https://github.com/coingaming/moon_flutter/compare/v0.2.3...v0.2.4) (2023-02-10) ### Bug Fixes * hotfix page title in storybook ([8d1d24d](https://github.com/coingaming/moon_flutter/commit/8d1d24d8a2198bcab4ee7b3f441efa68fca35a76)) ## [0.2.3](https://github.com/coingaming/moon_flutter/compare/v0.2.2...v0.2.3) (2023-02-10) ### Bug Fixes * RTL and web title fixes ([#28](https://github.com/coingaming/moon_flutter/issues/28)) ([25619e5](https://github.com/coingaming/moon_flutter/commit/25619e56d20c3adb60c14615c5c4b40e22466fe1)) ## [0.2.2](https://github.com/coingaming/moon_flutter/compare/v0.2.1...v0.2.2) (2023-02-10) ### Bug Fixes * Changelog fix ([#26](https://github.com/coingaming/moon_flutter/issues/26)) ([aa428ba](https://github.com/coingaming/moon_flutter/commit/aa428ba61baeedbe7d484157ce08a39f8aca01e8)) ## [0.2.1](https://github.com/coingaming/moon_flutter/compare/v0.2.0...v0.2.1) (2023-02-10) ### Bug Fixes * Fix placeholder asset path ([#24](https://github.com/coingaming/moon_flutter/issues/24)) ([e884b86](https://github.com/coingaming/moon_flutter/commit/e884b860e882cb83e71615de0c46f30c0572dfb1)) ## [0.2.0](https://github.com/coingaming/moon_flutter/compare/v0.1.5...v0.2.0) (2023-02-10) ### Features * [MDS-377] Create avatar widget ([#22](https://github.com/coingaming/moon_flutter/issues/22)) ([57d0a0d](https://github.com/coingaming/moon_flutter/commit/57d0a0d2db6afbb25193b4080b2166e59d718f70)) ## [0.1.5](https://github.com/coingaming/moon_flutter/compare/v0.1.4...v0.1.5) (2023-02-09) ### Bug Fixes * Add MoonButton.icon constructor ([#16](https://github.com/coingaming/moon_flutter/issues/16)) ([a94f79d](https://github.com/coingaming/moon_flutter/commit/a94f79d0b1d9683296670c1591bb04fb9ad290ab)) ## [0.1.4](https://github.com/coingaming/moon_flutter/compare/v0.1.3...v0.1.4) (2023-02-08) ### Bug Fixes * release-please config changes ([393ec4a](https://github.com/coingaming/moon_flutter/commit/393ec4a93f7be23fcd235e24cb1063c613ad55fd)) ## [0.1.3](https://github.com/coingaming/moon_flutter/compare/moon_design-v0.1.2...moon_design-v0.1.3) (2023-02-08) ### Bug Fixes * Color staleness in the example ([#11](https://github.com/coingaming/moon_flutter/issues/11)) ([e979150](https://github.com/coingaming/moon_flutter/commit/e979150034b657288be446c6702d40f4ad96189b)) ## [0.1.2](https://github.com/coingaming/moon_flutter/compare/v0.1.1...v0.1.2) (2023-02-07) ### Bug Fixes * Retry dynamic version fix in storybook ([316c11a](https://github.com/coingaming/moon_flutter/commit/316c11a172a8142e85e6748baf16b189b913fc0b)) ## [0.1.1](https://github.com/coingaming/moon_flutter/compare/v0.1.0...v0.1.1) (2023-02-07) ### Bug Fixes * Get MDS version dynamically ([#7](https://github.com/coingaming/moon_flutter/issues/7)) ([568092c](https://github.com/coingaming/moon_flutter/commit/568092c1adb846dfff00bdc72e3a270928136165)) ## [0.1.0](https://github.com/coingaming/moon_flutter/pull/5) (2023-02-07) ### Features * [MDS-351] Create Buttons ([57bf4cb](https://github.com/coingaming/moon_flutter/commit/57bf4cba1d41adc2d463a5f54b323c13645a94e0)) ## 0.0.1 (2023-01-16) * Initial project setup. ================================================ FILE: LICENSE ================================================ MIT License Copyright (c) 2024 Yolo Group Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. ================================================ FILE: README.md ================================================ # Moon Design System [![Version](https://img.shields.io/pub/v/moon_design.svg)](https://pub.dev/packages/moon_design) ![Build](https://github.com/coingaming/moon_flutter/actions/workflows/analyze_and_test.yml/badge.svg) [![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-%23FE5196?logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org) Moon Design System _Note: This project uses **[Release Please](https://github.com/googleapis/release-please)** and **[Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/)** spec, please follow the conventions or consider using **[Commitizen](https://github.com/commitizen/cz-cli)** to write commit messages._ ## Disclaimer The current major release, v1.0.0, will be maintained as-is and will not receive further updates, except for patches. The v1 theming is based on the soon-to-be deprecated Moon Design Figma v1 and lacks flexibility. For greater control over theming with v1 of moon_flutter, it is recommended to create custom wrapper widgets around the moon_flutter widgets that align with your project's specific theming requirements. There is ongoing background work for v2 which aims to be more modular, scalable and themable. ## Resources - 📱 [Playground](https://flutter.moon.io) ## Applying theming and overrides - Declare tokens variable and optionally override values: ```dart final lightTokens = MoonTokens.light.copyWith( colors: MoonColors.light.copyWith( piccolo: Colors.blue, textPrimary: Colors.amber, ), typography: MoonTypography.typography.copyWith( heading: MoonTypography.typography.heading.apply( // Using variable font and bumping down the font weight compared to the // baseline 600 for heading. fontFamily: "DMSans", fontWeightDelta: -1, fontVariations: [const FontVariation('wght', 500)], ), ), ); final lightTheme = ThemeData.light().copyWith( extensions: >[MoonTheme(tokens: lightTokens)], ); ``` - Or if needed override widget theming: ```dart final lightTheme = ThemeData.light().copyWith( extensions: >[ MoonTheme(tokens: lightTokens).copyWith( accordionTheme: MoonAccordionTheme(tokens: lightTokens).copyWith( colors: MoonAccordionTheme(tokens: lightTokens).colors.copyWith( backgroundColor: Colors.green, ), ), ), ], ); ``` - Apply the declared theme: ```dart return MaterialApp( title: 'Moon Design System example', theme: lightTheme, home: const HomePage(), ); ``` ================================================ FILE: analysis_options.yaml ================================================ include: package:lint/analysis_options.yaml analyzer: language: strict-casts: true strict-inference: true strict-raw-types: true exclude: - "lib/generated/**" - "lib/generated_*" - "lib/i18n/messages_*.dart" - "lib/gen-l10n/**" - "lib/gen/**" - "**/*.freezed.dart" - "**/*.g.dart" - "**/*.graphql.dart" - "**/*.mocks.dart" - "/pubspec.lock" errors: deprecated_member_use: info linter: rules: depend_on_referenced_packages: false use_setters_to_change_properties: false avoid_classes_with_only_static_members: false ================================================ FILE: example/.gitignore ================================================ # Miscellaneous *.class *.log *.pyc *.swp .DS_Store .atom/ .buildlog/ .history .svn/ migrate_working_dir/ # IntelliJ related *.iml *.ipr *.iws .idea/ # The .vscode folder contains launch configuration and tasks you configure in # VS Code which you may wish to be included in version control, so this line # is commented out by default. #.vscode/ # Flutter/Dart/Pub related **/doc/api/ **/ios/Flutter/.last_build_id .dart_tool/ .flutter-plugins .flutter-plugins-dependencies .packages .pub-cache/ .pub/ /build/ # Symbolication related app.*.symbols # Obfuscation related app.*.map.json # Android Studio will place build artifacts here /pubspec.lock /android/app/debug /android/app/profile /android/app/release /pubspec.lock ================================================ FILE: example/.metadata ================================================ # This file tracks properties of this Flutter project. # Used by Flutter tool to assess capabilities and perform upgrades etc. # # This file should be version controlled. version: revision: 135454af32477f815a7525073027a3ff9eff1bfd channel: stable project_type: app # Tracks metadata for the flutter migrate command migration: platforms: - platform: root create_revision: 135454af32477f815a7525073027a3ff9eff1bfd base_revision: 135454af32477f815a7525073027a3ff9eff1bfd - platform: android create_revision: 135454af32477f815a7525073027a3ff9eff1bfd base_revision: 135454af32477f815a7525073027a3ff9eff1bfd - platform: ios create_revision: 135454af32477f815a7525073027a3ff9eff1bfd base_revision: 135454af32477f815a7525073027a3ff9eff1bfd - platform: linux create_revision: 135454af32477f815a7525073027a3ff9eff1bfd base_revision: 135454af32477f815a7525073027a3ff9eff1bfd - platform: macos create_revision: 135454af32477f815a7525073027a3ff9eff1bfd base_revision: 135454af32477f815a7525073027a3ff9eff1bfd - platform: web create_revision: 135454af32477f815a7525073027a3ff9eff1bfd base_revision: 135454af32477f815a7525073027a3ff9eff1bfd - platform: windows create_revision: 135454af32477f815a7525073027a3ff9eff1bfd base_revision: 135454af32477f815a7525073027a3ff9eff1bfd # User provided section # List of Local paths (relative to this file) that should be # ignored by the migrate tool. # # Files that are not part of the templates will be ignored by default. unmanaged_files: - 'lib/main.dart' - 'ios/Runner.xcodeproj/project.pbxproj' ================================================ FILE: example/README.md ================================================ # example A new Flutter project. ## Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this is your first Flutter project: - [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) - [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) For help getting started with Flutter development, view the [online documentation](https://docs.flutter.dev/), which offers tutorials, samples, guidance on mobile development, and a full API reference. ================================================ FILE: example/analysis_options.yaml ================================================ include: package:lint/analysis_options.yaml analyzer: language: strict-casts: true strict-inference: true strict-raw-types: true exclude: - "lib/generated/**" - "lib/generated_*" - "lib/i18n/messages_*.dart" - "lib/gen-l10n/**" - "lib/gen/**" - "**/*.freezed.dart" - "**/*.g.dart" - "**/*.graphql.dart" - "**/*.mocks.dart" - "/pubspec.lock" errors: deprecated_member_use: info linter: rules: depend_on_referenced_packages: false ================================================ FILE: example/android/.gitignore ================================================ gradle-wrapper.jar /.gradle /captures/ /gradlew /gradlew.bat /local.properties GeneratedPluginRegistrant.java # Remember to never publicly share your keystore. # See https://flutter.dev/docs/deployment/android#reference-the-keystore-from-the-app key.properties **/*.keystore **/*.jks ================================================ FILE: example/android/app/build.gradle ================================================ def localProperties = new Properties() def localPropertiesFile = rootProject.file('local.properties') if (localPropertiesFile.exists()) { localPropertiesFile.withReader('UTF-8') { reader -> localProperties.load(reader) } } def flutterRoot = localProperties.getProperty('flutter.sdk') if (flutterRoot == null) { throw new GradleException("Flutter SDK not found. Define location with flutter.sdk in the local.properties file.") } def flutterVersionCode = localProperties.getProperty('flutter.versionCode') if (flutterVersionCode == null) { flutterVersionCode = '1' } def flutterVersionName = localProperties.getProperty('flutter.versionName') if (flutterVersionName == null) { flutterVersionName = '1.0' } apply plugin: 'com.android.application' apply plugin: 'kotlin-android' apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle" android { compileSdkVersion flutter.compileSdkVersion ndkVersion flutter.ndkVersion compileOptions { sourceCompatibility JavaVersion.VERSION_1_8 targetCompatibility JavaVersion.VERSION_1_8 } kotlinOptions { jvmTarget = '1.8' } sourceSets { main.java.srcDirs += 'src/main/kotlin' } defaultConfig { // TODO: Specify your own unique Application ID (https://developer.android.com/studio/build/application-id.html). applicationId "com.example.example" // You can update the following values to match your application needs. // For more information, see: https://docs.flutter.dev/deployment/android#reviewing-the-build-configuration. minSdkVersion flutter.minSdkVersion targetSdkVersion flutter.targetSdkVersion versionCode flutterVersionCode.toInteger() versionName flutterVersionName } buildTypes { release { // TODO: Add your own signing config for the release build. // Signing with the debug keys for now, so `flutter run --release` works. signingConfig signingConfigs.debug } } } flutter { source '../..' } dependencies { implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version" } ================================================ FILE: example/android/app/src/debug/AndroidManifest.xml ================================================ ================================================ FILE: example/android/app/src/main/AndroidManifest.xml ================================================ ================================================ FILE: example/android/app/src/main/kotlin/com/example/example/MainActivity.kt ================================================ package com.example.example import io.flutter.embedding.android.FlutterActivity class MainActivity: FlutterActivity() { } ================================================ FILE: example/android/app/src/main/res/drawable/launch_background.xml ================================================ ================================================ FILE: example/android/app/src/main/res/drawable-v21/launch_background.xml ================================================ ================================================ FILE: example/android/app/src/main/res/values/styles.xml ================================================ ================================================ FILE: example/android/app/src/main/res/values-night/styles.xml ================================================ ================================================ FILE: example/android/app/src/profile/AndroidManifest.xml ================================================ ================================================ FILE: example/android/build.gradle ================================================ buildscript { ext.kotlin_version = '1.6.10' repositories { google() mavenCentral() } dependencies { classpath 'com.android.tools.build:gradle:7.1.2' classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version" } } allprojects { repositories { google() mavenCentral() } } rootProject.buildDir = '../build' subprojects { project.buildDir = "${rootProject.buildDir}/${project.name}" } subprojects { project.evaluationDependsOn(':app') } tasks.register("clean", Delete) { delete rootProject.buildDir } ================================================ FILE: example/android/gradle/wrapper/gradle-wrapper.properties ================================================ distributionBase=GRADLE_USER_HOME distributionPath=wrapper/dists zipStoreBase=GRADLE_USER_HOME zipStorePath=wrapper/dists distributionUrl=https\://services.gradle.org/distributions/gradle-7.4-all.zip ================================================ FILE: example/android/gradle.properties ================================================ org.gradle.jvmargs=-Xmx1536M android.useAndroidX=true android.enableJetifier=true ================================================ FILE: example/android/settings.gradle ================================================ include ':app' def localPropertiesFile = new File(rootProject.projectDir, "local.properties") def properties = new Properties() assert localPropertiesFile.exists() localPropertiesFile.withReader("UTF-8") { reader -> properties.load(reader) } def flutterSdkPath = properties.getProperty("flutter.sdk") assert flutterSdkPath != null, "flutter.sdk not set in local.properties" apply from: "$flutterSdkPath/packages/flutter_tools/gradle/app_plugin_loader.gradle" ================================================ FILE: example/assets/code_snippets/accordion.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; enum AccordionItems { first, second } class Accordion extends StatefulWidget { const Accordion({super.key}); @override State createState() => _AccordionState(); } class _AccordionState extends State { AccordionItems? _currentlyOpenAccordionItem = AccordionItems.first; @override Widget build(BuildContext context) { const String contentText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, " "sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, " "quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."; return Column( children: [ MoonAccordion( // The identityValue and groupIdentityValue can be used to control the // auto collapse behaviour of the accordion. identityValue: AccordionItems.first, groupIdentityValue: _currentlyOpenAccordionItem, accordionSize: MoonAccordionSize.sm, childrenPadding: const EdgeInsets.all(12), onExpansionChanged: (AccordionItems? value) => setState( () => _currentlyOpenAccordionItem = value, ), leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("Grouped MoonAccordion item #1"), children: const [ Text(contentText), ], ), MoonAccordion( // The identityValue and groupIdentityValue can be used to control the // auto collapse behaviour of the accordion. identityValue: AccordionItems.second, groupIdentityValue: _currentlyOpenAccordionItem, accordionSize: MoonAccordionSize.sm, hasContentOutside: true, childrenPadding: const EdgeInsets.all(12), onExpansionChanged: (AccordionItems? value) => setState( () => _currentlyOpenAccordionItem = value, ), leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("Grouped MoonAccordion item #2"), children: const [ Text(contentText), ], ), ], ); } } ================================================ FILE: example/assets/code_snippets/alert.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Alert extends StatelessWidget { const Alert({super.key}); @override Widget build(BuildContext context) { return Column( children: [ MoonAlert( show: true, leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("Base MoonAlert"), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, onTap: () => {}, icon: const Icon(MoonIcons.controls_close_24_light), ), content: const Text("Here goes MoonAlert content"), ), MoonAlert.filled( show: true, color: context.moonColors!.chichi, backgroundColor: context.moonColors!.chichi10, leading: const Icon(MoonIcons.notifications_alert_24_light), label: const Text("Filled error MoonAlert"), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, onTap: () {}, icon: Icon( MoonIcons.controls_close_small_24_light, color: context.moonColors!.chichi, ), ), ), MoonAlert.outlined( show: true, color: context.moonColors!.roshi, borderColor: context.moonColors!.roshi, leading: const Icon(MoonIcons.generic_check_rounded_24_light), label: const Text("Outlined success MoonAlert"), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, onTap: () {}, icon: Icon( MoonIcons.controls_close_small_24_light, color: context.moonColors!.roshi, ), ), ), ], ); } } ================================================ FILE: example/assets/code_snippets/auth_code.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class AuthCode extends StatelessWidget { const AuthCode({super.key}); @override Widget build(BuildContext context) { return SizedBox( height: 95, // To avoid widget jumping with error text, use a fixed-height wrapper. child: MoonAuthCode( validator: (String? pin) { if (pin != null && pin != '000000' && pin.length == 6) { return 'The input must be exactly "000000".'; } else { return null; } }, errorBuilder: (BuildContext context, String? errorText) { return Align( child: Padding( padding: const EdgeInsets.only(top: 8), child: Text(errorText ?? ''), ), ); }, ), ); } } ================================================ FILE: example/assets/code_snippets/avatar.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Avatar extends StatelessWidget { const Avatar({super.key}); @override Widget build(BuildContext context) { return const MoonAvatar( avatarSize: MoonAvatarSize.sm, showBadge: true, content: Text('MD'), ); } } ================================================ FILE: example/assets/code_snippets/bottom_sheet.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class BottomSheet extends StatelessWidget { const BottomSheet({super.key}); @override Widget build(BuildContext context) { Future bottomSheetBuilder(BuildContext context) { return showMoonModalBottomSheet( context: context, enableDrag: true, height: MediaQuery.of(context).size.height * 0.7, builder: (BuildContext context) => Column( children: [ // Drag handle for the bottom sheet. Container( height: 4, width: 40, margin: const EdgeInsets.symmetric(vertical: 8), decoration: ShapeDecoration( color: context.moonColors!.beerus, shape: MoonSquircleBorder( borderRadius: BorderRadius.circular(16).squircleBorderRadius(context), ), ), ), const Expanded( child: Align( child: Text('MoonBottomSheet example'), ), ), ], ), ); } return Center( child: MoonFilledButton( onTap: () => bottomSheetBuilder(context), label: const Text("Tap me"), ), ); } } ================================================ FILE: example/assets/code_snippets/breadcrumb.md ================================================ import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class BreadcrumbStory extends StatefulWidget { const BreadcrumbStory({super.key}); @override State createState() => _BreadcrumbStoryState(); } class _BreadcrumbStoryState extends State { bool _showDropdown = false; @override Widget build(BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ // The default MoonBreadcrumb. // Expands horizontally to the full path when the indicated show more item is tapped. Column( children: [ MoonBreadcrumb( items: List.generate( 6, (int index) { return MoonBreadcrumbItem( onTap: () {}, label: Text('Page $index'), ); }, ), ), // Provides an explicit method to restore the expanded breadcrumb path // to its collapsed state, enabling external control. // By default, the state is automatically restored during rebuild. MoonButton( onTap: () => setState(() => {}), label: const Text('Reset'), ), ], ), // MoonBreadcrumb with the MoonDropdown and a custom showMoreWidget. MoonBreadcrumb( divider: Icon( Directionality.of(context) == TextDirection.ltr ? MoonIcons.controls_chevron_right_small_16_light : MoonIcons.controls_chevron_left_small_16_light, ), showMoreWidget: MoonBreadcrumbItem( onTap: () => setState(() => _showDropdown = !_showDropdown), label: MoonDropdown( show: _showDropdown, onTapOutside: () => setState(() => _showDropdown = false), content: Column( children: List.generate( 3, (int index) => MoonMenuItem( onTap: () {}, label: Text('Page ${index + 1}'), ), ), ), child: const Icon(MoonIcons.generic_burger_regular_16_light), ), ), items: List.generate( 6, (int index) { return MoonBreadcrumbItem( onTap: () {}, label: Text('Page $index'), ); }, ), ), ], ); } } ================================================ FILE: example/assets/code_snippets/button.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Button extends StatelessWidget { const Button({super.key}); @override Widget build(BuildContext context) { return Column( children: [ MoonButton( buttonSize: MoonButtonSize.sm, onTap: () {}, leading: const Icon(MoonIcons.other_frame_24_light), label: const Text('MoonButton'), trailing: const Icon(MoonIcons.other_frame_24_light), ), MoonButton.icon( buttonSize: MoonButtonSize.sm, onTap: () {}, icon: const Icon(MoonIcons.other_frame_24_light), ), MoonFilledButton( buttonSize: MoonButtonSize.sm, onTap: () {}, leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("MoonFilledButton"), trailing: const Icon(MoonIcons.other_frame_24_light), ), MoonOutlinedButton( buttonSize: MoonButtonSize.sm, onTap: () {}, leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("MoonOutlinedButton"), trailing: const Icon(MoonIcons.other_frame_24_light), ), MoonTextButton( buttonSize: MoonButtonSize.sm, onTap: () {}, leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("MoonTextButton"), trailing: const Icon(MoonIcons.other_frame_24_light), ), ], ); } } ================================================ FILE: example/assets/code_snippets/carousel.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Carousel extends StatefulWidget { const Carousel({super.key}); @override State createState() => _CarouselState(); } class _CarouselState extends State { int selectedDot = 0; @override Widget build(BuildContext context) { return Column( children: [ // Default MoonCarousel. SizedBox( height: 110, child: OverflowBox( maxWidth: MediaQuery.of(context).size.width, child: MoonCarousel( itemCount: 10, itemExtent: 110, itemBuilder: (BuildContext context, int itemIndex, int _) => Container( decoration: ShapeDecoration( color: context.moonColors!.goku, shape: MoonSquircleBorder( borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), ), ), child: Center( child: Text("${itemIndex + 1}"), ), ), ), ), ), // Full width MoonCarousel with MoonDotIndicator. Column( children: [ SizedBox( height: 180, child: OverflowBox( maxWidth: MediaQuery.of(context).size.width, child: MoonCarousel( gap: 32, itemCount: 5, itemExtent: MediaQuery.of(context).size.width - 32, physics: const PageScrollPhysics(), onIndexChanged: (int index) => setState(() => selectedDot = index), itemBuilder: (BuildContext context, int itemIndex, int _) => Container( decoration: ShapeDecoration( color: context.moonColors!.goku, shape: MoonSquircleBorder( borderRadius: BorderRadius.circular(12).squircleBorderRadius(context), ), ), child: Center( child: Text("${itemIndex + 1}"), ), ), ), ), ), MoonDotIndicator( selectedDot: selectedDot, dotCount: 5, ), ], ), ], ); } } ================================================ FILE: example/assets/code_snippets/checkbox.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Checkbox extends StatefulWidget { const Checkbox({super.key}); @override State createState() => _CheckboxState(); } class _CheckboxState extends State { bool? checkboxValue = false; bool checkboxWithLabelValue = false; bool? tristateCheckboxWithLabelValue = false; @override Widget build(BuildContext context) { return Column( children: [ MoonCheckbox( value: checkboxValue, onChanged: (bool? newValue) => setState(() => checkboxValue = newValue), ), MoonMenuItem( absorbGestures: true, onTap: () => setState(() => checkboxWithLabelValue = !checkboxWithLabelValue), label: const Text("MoonCheckbox with label"), trailing: MoonCheckbox( value: checkboxWithLabelValue, tapAreaSizeValue: 0, onChanged: (_) => {}, ), ), MoonMenuItem( absorbGestures: true, onTap: () => setState( () => switch (tristateCheckboxWithLabelValue) { true => tristateCheckboxWithLabelValue = null, null => tristateCheckboxWithLabelValue = false, false => tristateCheckboxWithLabelValue = true, }, ), label: const Text("Tristate MoonCheckbox with label"), trailing: MoonCheckbox( value: tristateCheckboxWithLabelValue, tapAreaSizeValue: 0, onChanged: (_) => {}, ), ), ], ); } } ================================================ FILE: example/assets/code_snippets/chip.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Chip extends StatelessWidget { const Chip({super.key}); @override Widget build(BuildContext context) { return const Column( children: [ MoonChip( chipSize: MoonChipSize.sm, leading: Icon(MoonIcons.other_frame_24_light), label: Text('MoonChip'), trailing: Icon(MoonIcons.other_frame_24_light), ), MoonChip.text( chipSize: MoonChipSize.sm, leading: Icon(MoonIcons.other_frame_24_light), label: Text('MoonChip with text'), trailing: Icon(MoonIcons.other_frame_24_light), ), ], ); } } ================================================ FILE: example/assets/code_snippets/circular_loader.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class CircularLoader extends StatelessWidget { const CircularLoader({super.key}); @override Widget build(BuildContext context) { return const MoonCircularLoader( circularLoaderSize: MoonCircularLoaderSize.sm, ); } } ================================================ FILE: example/assets/code_snippets/circular_progress.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class CircularProgress extends StatelessWidget { const CircularProgress({super.key}); @override Widget build(BuildContext context) { return const MoonCircularProgress( value: 0.75, circularProgressSize: MoonCircularProgressSize.sm, ); } } ================================================ FILE: example/assets/code_snippets/combobox_multi_select.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; enum Options { accordion, alert, bottomSheet, button, carousel, chip, dropdown, menuItem, tag, tooltip; String get name { final String rawName = toString().split('.').last; return rawName[0].toUpperCase() + rawName.substring(1); } } class ComboboxMultiSelect extends StatefulWidget { const ComboboxMultiSelect({super.key}); @override State createState() => _ComboboxMultiSelectState(); } class _ComboboxMultiSelectState extends State { final FocusNode _focusNode = FocusNode(); final TextEditingController _searchController = TextEditingController(); final Map _selectedOptions = {}; final List _optionsList = Options.values; List _filteredOptionsList = []; bool _showDropdown = false; String get _inputValue => _searchController.text.trim().toLowerCase(); void _performSearch() { setState(() { _filteredOptionsList = _ optionsList.where((Options option) => option.name.toLowerCase().contains(_inputValue)).toList(); _showDropdown = true; }); } void _handleSelect(Options option, bool isSelected) { setState(() => isSelected ? _selectedOptions[option] = true : _selectedOptions.remove(option)); } void _showAllOptionsList() { setState(() { _filteredOptionsList = _optionsList; _showDropdown = !_showDropdown; }); } void _handleDropdownTapOutside() { setState(() { _showDropdown = false; _searchController.clear(); _focusNode.unfocus(); }); } void _handleInputTapOutside() { if (_focusNode.hasFocus && !_showDropdown) { _searchController.clear(); _focusNode.unfocus(); } } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Center( child: MoonDropdown( show: _showDropdown, constrainWidthToChild: true, onTapOutside: () => _handleDropdownTapOutside(), content: ConstrainedBox( constraints: const BoxConstraints(maxHeight: 200), child: _filteredOptionsList.isEmpty ? const MoonMenuItem( label: Text('Nothing found.'), ) : ListView.builder( shrinkWrap: true, padding: EdgeInsets.zero, itemCount: _filteredOptionsList.length, itemBuilder: (BuildContext _, int index) { if (index >= _filteredOptionsList.length) return const SizedBox.shrink(); final Options currentOption = _filteredOptionsList[index]; final bool isSelected = _selectedOptions.containsKey(currentOption); return MoonMenuItem( absorbGestures: true, onTap: () => _handleSelect(currentOption, !isSelected), label: Text(currentOption.name), trailing: MoonCheckbox( value: isSelected, tapAreaSizeValue: 0, onChanged: (bool? _) {}, ), ); }, ), ), child: MoonTextInput( focusNode: _focusNode, hintText: "Select multiple components", controller: _searchController, // The onTap() and onChanged() properties are used instead of a listener to initiate search on every input tap. // Listener only triggers on input change. onTap: () => _performSearch(), onTapOutside: (PointerDownEvent _) => _handleInputTapOutside(), onChanged: (String _) => _performSearch(), leading: _selectedOptions.isNotEmpty ? Center( child: GestureDetector( onTap: () => setState(() => _selectedOptions.clear()), child: MoonTag( tagSize: MoonTagSize.xs, backgroundColor: context.moonColors!.bulma, label: Text( "${_selectedOptions.keys.length}", style: TextStyle(color: context.moonColors!.gohan), ), trailing: Icon( MoonIcons.controls_close_small_16_light, color: context.moonColors!.gohan, ), ), ), ) : null, trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, hoverEffectColor: Colors.transparent, onTap: () => _showAllOptionsList(), icon: AnimatedRotation( duration: const Duration(milliseconds: 200), turns: _showDropdown ? -0.5 : 0, child: const Icon(MoonIcons.controls_chevron_down_16_light), ), ), ), ), ); } } ================================================ FILE: example/assets/code_snippets/combobox_single_select.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; enum Options { accordion, alert, bottomSheet, button, carousel, chip, dropdown, menuItem, tag, tooltip; String get name { final String rawName = toString().split('.').last; return rawName[0].toUpperCase() + rawName.substring(1); } } class ComboboxSingleSelect extends StatefulWidget { const ComboboxSingleSelect({super.key}); @override State createState() => _ComboboxSingleSelectState(); } class _ComboboxSingleSelectState extends State { final FocusNode _focusNode = FocusNode(); final TextEditingController _searchController = TextEditingController(); final List _optionsList = Options.values; List _filteredOptionsList = []; Options? _selectedOption; bool _showDropdown = false; bool get _optionIsSelected => _selectedOption?.name == _searchController.text; String get _inputValue => _searchController.text.trim().toLowerCase(); void _performSearch() { setState(() { if (!_optionIsSelected && _selectedOption != null) _selectedOption = null; _filteredOptionsList = _optionsList.where((Options option) => option.name.toLowerCase().contains(_inputValue)).toList(); _showDropdown = true; }); } void _handleSelect(Options option) { setState(() { _showDropdown = false; _searchController.text = option.name; _selectedOption = option; _focusNode.unfocus(); }); } void _showAllOptionsList() { setState(() { _filteredOptionsList = _optionsList; _showDropdown = !_showDropdown; }); } void _handleDropdownTapOutside() { setState(() { _showDropdown = false; if (!_optionIsSelected) _searchController.clear(); _focusNode.unfocus(); }); } void _handleInputTapOutside() { if (_focusNode.hasFocus && !_showDropdown) { if (!_optionIsSelected) _searchController.clear(); _focusNode.unfocus(); } } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Center( child: MoonDropdown( show: _showDropdown, constrainWidthToChild: true, onTapOutside: () => _handleDropdownTapOutside(), content: ConstrainedBox( constraints: const BoxConstraints(maxHeight: 200), child: _filteredOptionsList.isEmpty ? const MoonMenuItem( label: Text('No results found.'), ) : ListView.builder( shrinkWrap: true, padding: EdgeInsets.zero, itemCount: _filteredOptionsList.length, itemBuilder: (BuildContext _, int index) { if (index >= _filteredOptionsList.length) return const SizedBox.shrink(); final Options option = _filteredOptionsList[index]; return MoonMenuItem( onTap: () => _handleSelect(option), label: Text(option.name), ); }, ), ), child: MoonTextInput( focusNode: _focusNode, hintText: "Select single component", controller: _searchController, // The onTap() and onChanged() properties are used instead of a listener to initiate search on every input tap. // Listener only triggers on input change. onTap: () => _performSearch(), onTapOutside: (PointerDownEvent _) => _handleInputTapOutside(), onChanged: (String _) => _performSearch(), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, hoverEffectColor: Colors.transparent, onTap: () => _showAllOptionsList(), icon: AnimatedRotation( duration: const Duration(milliseconds: 200), turns: _showDropdown ? -0.5 : 0, child: const Icon(MoonIcons.controls_chevron_down_16_light), ), ), ), ), ); } } ================================================ FILE: example/assets/code_snippets/dot_indicator.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class DotIndicator extends StatelessWidget { const DotIndicator({super.key}); @override Widget build(BuildContext context) { return const MoonDotIndicator( dotCount: 4, selectedDot: 2, ); } } ================================================ FILE: example/assets/code_snippets/drawer.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Drawer extends StatelessWidget { const Drawer({super.key}); @override Widget build(BuildContext context) { return OverflowBox( maxHeight: MediaQuery.of(context).size.height, maxWidth: MediaQuery.of(context).size.width, child: Scaffold( drawer: MoonDrawer( width: MediaQuery.of(context).size.width * 0.4, child: const Align( child: Text("MoonDrawer"), ), ), body: Builder( builder: (BuildContext context) { return Center( child: MoonFilledButton( onTap: () => Scaffold.of(context).openDrawer(), label: const Text("Open MoonDrawer"), ), ); }, ), ), ); } } ================================================ FILE: example/assets/code_snippets/dropdown.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; const String _groupId = "dropdown"; enum Choices { first, second; String get name { return switch (this) { Choices.first => "Choice #1", Choices.second => "Choice #2", }; } } class Dropdown extends StatefulWidget { const Dropdown({super.key}); @override State createState() => _DropdownState(); } class _DropdownState extends State { final Map _availableChoices = { Choices.first: false, Choices.second: false, }; bool _showChoices = false; bool _showMenu = false; bool _showMenuInner = false; Color? _buttonColor; String _buttonName = "Piccolo"; @override Widget build(BuildContext context) { return Column( children: [ // MoonDropdown with multiple choices. MoonDropdown( show: _showChoices, constrainWidthToChild: true, onTapOutside: () => setState(() => _showChoices = false), content: Column( children: List.generate( 2, (int index) => MoonMenuItem( absorbGestures: true, onTap: () => setState( () => _availableChoices[Choices.values[index]] = !_availableChoices[Choices.values[index]]!, ), label: Text(Choices.values[index].name), trailing: MoonCheckbox( value: _availableChoices[Choices.values[index]], tapAreaSizeValue: 0, onChanged: (_) {}, ), ), ), ), child: MoonTextInput( width: 250, readOnly: true, canRequestFocus: false, mouseCursor: MouseCursor.defer, hintText: "Choose an option", onTap: () => setState(() => _showChoices = !_showChoices), leading: _availableChoices.values.any((element) => element == true) ? Center( child: MoonTag( tagSize: MoonTagSize.xs, backgroundColor: context.moonColors!.bulma, onTap: () => setState(() => _availableChoices.updateAll((key, value) => false)), label: Text( "${_availableChoices.values.where((element) => element == true).length}", style: TextStyle(color: context.moonColors!.gohan), ), trailing: Icon( MoonIcons.controls_close_small_16_light, color: context.moonColors!.gohan, ), ), ) : null, trailing: Center( child: AnimatedRotation( duration: const Duration(milliseconds: 200), turns: _showChoices ? -0.5 : 0, child: const Icon(MoonIcons.controls_chevron_down_small_16_light), ), ), ), ), // MoonDropdown as a menu. MoonDropdown( show: _showMenu, groupId: _groupId, constrainWidthToChild: true, onTapOutside: () => setState(() { _showMenu = false; _showMenuInner = false; }), content: Column( children: [ MoonMenuItem( onTap: () => setState(() { _showMenu = false; _buttonName = "Piccolo"; _buttonColor = context.moonColors!.piccolo; }), label: const Text("Piccolo"), ), MoonDropdown( show: _showMenuInner, groupId: _groupId, constrainWidthToChild: true, followerAnchor: Alignment.topLeft, targetAnchor: Alignment.topRight, offset: const Offset(8, 0), content: Column( children: [ MoonMenuItem( onTap: () => setState(() { _showMenu = false; _showMenuInner = false; _buttonName = "Roshi"; _buttonColor = context.moonColors!.roshi; }), label: const Text("Roshi"), ), MoonMenuItem( onTap: () => setState(() { _showMenu = false; _showMenuInner = false; _buttonName = "Roshi60"; _buttonColor = context.moonColors!.roshi60; }), label: const Text("Roshi60"), ), MoonMenuItem( onTap: () => setState(() { _showMenu = false; _showMenuInner = false; _buttonName = "Roshi10"; _buttonColor = context.moonColors!.roshi10; }), label: const Text("Roshi10"), ), ], ), child: MoonMenuItem( backgroundColor: _showMenuInner ? context.moonColors!.heles : null, onTap: () => setState(() => _showMenuInner = !_showMenuInner), label: const Text("Roshi"), trailing: const Icon( MoonIcons.controls_chevron_right_16_light, size: 16, ), ), ), ], ), child: MoonFilledButton( width: 120, backgroundColor: _buttonColor, onTap: () => setState(() => _showMenu = !_showMenu), label: Text(_buttonName), ), ), ], ); } } ================================================ FILE: example/assets/code_snippets/icons.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Icons extends StatelessWidget { const Icons({super.key}); @override Widget build(BuildContext context) { return const Icon(MoonIcons.other_frame_24_light); } } ================================================ FILE: example/assets/code_snippets/linear_loader.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class LinearLoader extends StatelessWidget { const LinearLoader({super.key}); @override Widget build(BuildContext context) { return const MoonLinearLoader( linearLoaderSize: MoonLinearLoaderSize.x4s, ); } } ================================================ FILE: example/assets/code_snippets/linear_progress.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class LinearProgress extends StatelessWidget { const LinearProgress({super.key}); @override Widget build(BuildContext context) { return const MoonLinearProgress( value: 0.75, linearProgressSize: MoonLinearProgressSize.x4s, ); } } ================================================ FILE: example/assets/code_snippets/menu_item.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class MenuItem extends StatefulWidget { const MenuItem({super.key}); @override State createState() => _MenuItemState(); } class _MenuItemState extends State { @override Widget build(BuildContext context) { return MoonMenuItem( onTap: () {}, label: const Text("Menu Item"), leading: const Icon(MoonIcons.notifications_activity_32_regular), trailing: const Icon(MoonIcons.controls_chevron_right_24_light), ); } } ================================================ FILE: example/assets/code_snippets/modal.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Modal extends StatelessWidget { const Modal({super.key}); @override Widget build(BuildContext context) { Future modalBuilder(BuildContext context) { return showMoonModal( context: context, builder: (BuildContext context) { return MoonModal( child: SizedBox( height: 150, width: MediaQuery.of(context).size.width - 64, child: const Center( child: Text("This is MoonModal."), ), ), ); }, ); } return Center( child: Builder( builder: (BuildContext context) { return MoonFilledButton( label: const Text("Open MoonModal"), onTap: () => modalBuilder(context), ); }, ), ); } } ================================================ FILE: example/assets/code_snippets/popover.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Popover extends StatefulWidget { const Popover({super.key}); @override State createState() => _PopoverState(); } class _PopoverState extends State { bool show = false; @override Widget build(BuildContext context) { return MoonPopover( show: show, onTapOutside: () => setState(() => show = false), content: const Text('This is MoonPopover'), child: MoonFilledButton( onTap: () => setState(() => show = !show), label: const Text("Show MoonPopover"), ), ); } } ================================================ FILE: example/assets/code_snippets/radio.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; enum RadioSelection { first, second } class Radio extends StatefulWidget { const Radio({super.key}); @override State createState() => _RadioState(); } class _RadioState extends State { RadioSelection? radioSelection = RadioSelection.first; @override Widget build(BuildContext context) { return Column( children: [ MoonRadio( value: RadioSelection.first, groupValue: radioSelection, onChanged: (RadioSelection? selection) => setState(() => radioSelection = selection), ), MoonMenuItem( absorbGestures: true, onTap: () => setState(() => radioSelection = RadioSelection.second), label: const Text("MoonRadio with label"), trailing: MoonRadio( value: RadioSelection.second, groupValue: radioSelection, tapAreaSizeValue: 0, onChanged: (_) {}, ), ), ], ); } } ================================================ FILE: example/assets/code_snippets/search_with_dropdown.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; enum Options { accordion, alert, bottomSheet, button, carousel, chip, dropdown, menuItem, tag, tooltip; String get name { final String rawName = toString().split('.').last; return rawName[0].toUpperCase() + rawName.substring(1); } } class SearchWithDropdown extends StatefulWidget { const SearchWithDropdown({super.key}); @override State createState() => _SearchWithDropdownState(); } class _SearchWithDropdownState extends State { final TextEditingController _searchController = TextEditingController(); final List _optionsList = Options.values; List _filteredOptionsList = []; Options? _selectedOption; bool _showDropdown = false; bool get _optionIsSelected => _selectedOption?.name == _searchController.text; String get _inputValue => _searchController.text.trim().toLowerCase(); void _performSearch() { setState(() { if (!_optionIsSelected && _selectedOption != null) _selectedOption = null; _filteredOptionsList = _optionsList.where((Options option) => option.name.toLowerCase().contains(_inputValue)).toList(); _showDropdown = true; }); } void _handleSelect(Options option) { setState(() { _showDropdown = false; _searchController.text = option.name; _selectedOption = option; FocusManager.instance.primaryFocus?.unfocus(); }); } void _handleClearButton() { setState(() { _searchController.clear(); _filteredOptionsList = _optionsList; }); } void _handleDropdownTapOutside() { setState(() { _showDropdown = false; if (!_optionIsSelected) _searchController.clear(); FocusManager.instance.primaryFocus?.unfocus(); }); } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Center( child: MoonDropdown( show: _showDropdown, distanceToTarget: 0, constrainWidthToChild: true, decoration: BoxDecoration( color: context.moonColors!.goku, borderRadius: const BorderRadius.vertical(bottom: Radius.circular(8.0)), border: Border( left: BorderSide(color: context.moonColors!.beerus), right: BorderSide(color: context.moonColors!.beerus), bottom: BorderSide(color: context.moonColors!.beerus), ), ), onTapOutside: () => _handleDropdownTapOutside(), content: ConstrainedBox( constraints: const BoxConstraints(maxHeight: 200), child: _filteredOptionsList.isEmpty ? const MoonMenuItem( label: Text('No results found.'), ) : ListView.builder( shrinkWrap: true, padding: EdgeInsets.zero, itemCount: _filteredOptionsList.length, itemBuilder: (BuildContext _, int index) { if (index >= _filteredOptionsList.length) return const SizedBox.shrink(); final Options option = _filteredOptionsList[index]; return MoonMenuItem( onTap: () => _handleSelect(option), label: Text(option.name), ); }, ), ), child: MoonTextInput( hintText: "Search components", controller: _searchController, borderRadius: _showDropdown ? const BorderRadius.vertical(top: Radius.circular(8)) : null, // The onTap() and onChanged() properties are used instead of a listener to initiate search // on every input tap. Listener only triggers on input change. onTap: () => _performSearch(), onChanged: (String _) => _performSearch(), leading: const Icon(MoonIcons.generic_search_24_light), trailing: MoonButton( padding: EdgeInsets.zero, hoverEffectColor: Colors.transparent, onTap: () => _handleClearButton(), label: Text( 'Clear', style: TextStyle(color: context.moonColors!.trunks), ), ), ), ), ); } } ================================================ FILE: example/assets/code_snippets/search_with_list.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; enum Options { accordion, alert, bottomSheet, button, carousel, chip, dropdown, menuItem, tag, tooltip; String get name { final String rawName = toString().split('.').last; return rawName[0].toUpperCase() + rawName.substring(1); } } class SearchWithList extends StatefulWidget { const SearchWithList({super.key}); @override State createState() => _SearchWithListState(); } class _SearchWithListState extends State { final TextEditingController _searchController = TextEditingController(); final List _optionsList = Options.values; List _filteredOptionsList = []; bool _showSearchResults = false; String get _inputValue => _searchController.text.trim().toLowerCase(); void _performSearch() { setState(() { _filteredOptionsList = _optionsList.where((Options option) => option.name.toLowerCase().contains(_inputValue)).toList(); _showSearchResults = true; }); } void _handleCloseButton() { setState(() { _searchController.clear(); _filteredOptionsList = _optionsList; _showSearchResults = false; FocusManager.instance.primaryFocus?.unfocus(); }); } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Stack( children: [ Column( children: [ MoonTextInput( hintText: "Search components", controller: _searchController, // The onTap() and onChanged() properties are used instead of a listener to initiate search on every input tap. // Listener only triggers on input change. onTap: () => _performSearch(), onChanged: (String _) => _performSearch(), leading: const Icon(MoonIcons.generic_search_24_light), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, hoverEffectColor: Colors.transparent, onTap: () => _handleCloseButton(), icon: const Icon(MoonIcons.controls_close_16_light), ), ), if (_showSearchResults && _filteredOptionsList.isNotEmpty) Expanded( child: ListView.builder( shrinkWrap: true, padding: const EdgeInsets.only(top: 8.0), itemCount: _filteredOptionsList.length, itemBuilder: (BuildContext _, int index) { if (index >= _filteredOptionsList.length) return const SizedBox.shrink(); final Options option = _filteredOptionsList[index]; return MoonMenuItem( onTap: () => {}, label: Text(option.name), ); }, ), ), ], ), if (_showSearchResults && _filteredOptionsList.isEmpty) const Align( child: Text('No results found.'), ), ], ); } } ================================================ FILE: example/assets/code_snippets/segmented_control.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class SegmentedControl extends StatelessWidget { const SegmentedControl({super.key}); @override Widget build(BuildContext context) { return MoonSegmentedControl( segmentedControlSize: MoonSegmentedControlSize.sm, segments: List.generate( 3, (int index) => Segment( leading: const Icon(MoonIcons.other_frame_24_light), label: Text('Tab${index + 1}'), trailing: const Icon(MoonIcons.other_frame_24_light), ), ), ); } } ================================================ FILE: example/assets/code_snippets/switch.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Switch extends StatefulWidget { const Switch({super.key}); @override State createState() => _SwitchState(); } class _SwitchState extends State { bool switchValue = false; @override Widget build(BuildContext context) { return MoonSwitch( value: switchValue, switchSize: MoonSwitchSize.sm, onChanged: (bool newValue) => setState(() => switchValue = newValue), ); } } ================================================ FILE: example/assets/code_snippets/tab_bar.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class TabBar extends StatefulWidget { const TabBar({super.key}); @override State createState() => _TabBarState(); } class _TabBarState extends State with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Column( children: [ MoonTabBar( tabBarSize: MoonTabBarSize.sm, tabs: List.generate( 3, (int index) => MoonTab( leading: const Icon(MoonIcons.other_frame_24_light), label: Text('Tab${index + 1}'), trailing: const Icon(MoonIcons.other_frame_24_light), ), ), ), MoonTabBar.pill( tabBarSize: MoonTabBarSize.sm, pillTabs: List.generate( 3, (int index) => MoonPillTab( leading: const Icon(MoonIcons.other_frame_24_light), label: Text('Tab${index + 1}'), trailing: const Icon(MoonIcons.other_frame_24_light), ), ), ), // MoonTabBar with TabBarView. MoonTabBar( isExpanded: true, tabController: _tabController, tabs: List.generate( 3, (int index) => MoonTab( label: Text('Tab${index + 1}'), ), ), ), SizedBox( height: 112, child: TabBarView( controller: _tabController, children: [ Container( color: context.moonColors!.whis60, padding: const EdgeInsets.all(16), child: Stack( children: [ const Align( child: Text('Tab1'), ), Align( alignment: Alignment.centerRight, child: MoonButton.icon( onTap: () => _tabController.animateTo(1), icon: const Icon(MoonIcons.controls_chevron_right_24_light), ), ), ], ), ), Container( color: context.moonColors!.frieza60, padding: const EdgeInsets.all(16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ MoonButton.icon( onTap: () => _tabController.animateTo(0), icon: const Icon(MoonIcons.controls_chevron_left_24_light), ), const Text('Tab2'), MoonButton.icon( onTap: () => _tabController.animateTo(2), icon: const Icon(MoonIcons.controls_chevron_right_24_light), ), ], ), ), Container( color: context.moonColors!.whis60, padding: const EdgeInsets.all(16), child: Stack( children: [ const Align( child: Text('Tab3'), ), Align( alignment: Alignment.centerLeft, child: MoonButton.icon( onTap: () => _tabController.animateTo(1), icon: const Icon( MoonIcons.controls_chevron_left_24_light, ), ), ), ], ), ), ], ), ), ], ); } } ================================================ FILE: example/assets/code_snippets/table.md ================================================ import 'dart:math'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; const int _rowsCount = 50; class Table extends StatefulWidget { const Table({super.key}); @override State createState() => _TableState(); } class _TableState extends State
{ late List<_TableData> _tableData; final List _columnNames = ['ID', 'First name', 'Last name', 'Age', 'Activity']; final List _columnSorting = List.generate(5, (int _) => true); bool _sortAscending = true; int _sortColumnIndex = 0; List<_TableData> _generateTableData() { return List<_TableData>.generate( _rowsCount, (int index) => _TableData( id: index, selected: false, firstName: 'Test$index', lastName: 'Subject$index', age: Random().nextInt(81), activity: Random().nextInt(100), ), ); } void _onSort(int columnIndex, bool sortAscending) { if (_sortColumnIndex == columnIndex || _sortAscending != sortAscending) { setState(() { if (columnIndex == _sortColumnIndex) { _sortAscending = _columnSorting[columnIndex] = sortAscending; } else { _sortColumnIndex = columnIndex; _sortAscending = _columnSorting[columnIndex]; } switch (columnIndex) { case 0: _tableData.sort((a, b) => a.id.compareTo(b.id)); case 1: _tableData.sort((a, b) => a.firstName.compareTo(b.firstName)); case 2: _tableData.sort((a, b) => a.lastName.compareTo(b.lastName)); case 3: _tableData.sort((a, b) => a.age.compareTo(b.age)); case 4: _tableData.sort((a, b) => a.activity.compareTo(b.activity)); } if (!_sortAscending) _tableData = _tableData.reversed.toList(); }); } } @override void initState() { super.initState(); _tableData = _generateTableData(); } MoonTableHeader _generateTableHeader() { return MoonTableHeader( columns: List.generate( 5, (int index) => MoonTableColumn( onSort: (int columnIndex, bool sortAscending) => _onSort(columnIndex, sortAscending), cell: Text(_columnNames[index]), ), ), ); } List _generateTableRows() { return List.generate( _rowsCount, (int index) => MoonTableRow( cells: [ Text(_tableData[index].id.toString()), Text(_tableData[index].firstName), Text(_tableData[index].lastName), Text(_tableData[index].age.toString()), Text(_tableData[index].activity.toString()), ], ), ); } @override Widget build(BuildContext context) { return OverflowBox( maxWidth: MediaQuery.of(context).size.width, child: MoonTable( columnsCount: 5, width: 564, rowSize: MoonTableRowSize.sm, tablePadding: const EdgeInsets.symmetric(horizontal: 16), sortAscending: _sortAscending, sortColumnIndex: _sortColumnIndex, header: _generateTableHeader(), rows: _generateTableRows(), ), ); } } class _TableData { bool selected; int age; int activity; int id; String firstName; String lastName; _TableData({ required this.selected, required this.age, required this.activity, required this.id, required this.firstName, required this.lastName, }); } ================================================ FILE: example/assets/code_snippets/tag.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Tag extends StatelessWidget { const Tag({super.key}); @override Widget build(BuildContext context) { return MoonTag( tagSize: MoonTagSize.sm, onTap: () {}, leading: const Icon(MoonIcons.controls_close_small_16_light), label: const Text('This is MoonTag'), trailing: const Icon(MoonIcons.controls_close_small_16_light), ); } } ================================================ FILE: example/assets/code_snippets/text_area.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class TextArea extends StatelessWidget { const TextArea({super.key}); @override Widget build(BuildContext context) { return Form( child: Builder( builder: (BuildContext context) { return Column( children: [ MoonTextArea( height: 200, validator: (String? value) => value?.length != null && value!.length < 5 ? "The text should be longer than 5 characters." : null, ), MoonFilledButton( onTap: () => Form.of(context).validate(), label: const Text("Submit"), ), ], ); }, ), ); } } ================================================ FILE: example/assets/code_snippets/text_input.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class TextInput extends StatefulWidget { const TextInput({super.key}); @override State createState() => _TextInputState(); } class _TextInputState extends State { final TextEditingController _textController = TextEditingController(); @override Widget build(BuildContext context) { return Form( child: Builder( builder: (BuildContext context) { return Column( children: [ MoonFormTextInput( controller: _textController, validator: (String? value) => value != null && value.length < 5 ? "The text should be longer than 5 characters." : null, onTap: () => _textController.clear(), leading: const Icon(MoonIcons.generic_search_24_light), trailing: GestureDetector( child: const Icon(MoonIcons.controls_close_small_24_light), ), ), MoonFilledButton( onTap: () => Form.of(context).validate(), label: const Text("Submit"), ), ], ); }, ), ); } } ================================================ FILE: example/assets/code_snippets/text_input_group.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class TextInputGroup extends StatefulWidget { const TextInputGroup({super.key}); @override State createState() => _TextInputGroupState(); } class _TextInputGroupState extends State { final TextEditingController _textController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); bool _hidePassword = true; @override Widget build(BuildContext context) { return Form( child: Builder( builder: (context) { return Column( children: [ MoonTextInputGroup( children: [ MoonFormTextInput( textInputSize: MoonTextInputSize.xl, controller: _textController, validator: (String? value) => value?.length != null && value!.length < 5 ? "The text should be longer than 5 characters." : null, leading: const Icon(MoonIcons.generic_search_24_light), trailing: GestureDetector( onTap: () => _textController.clear(), child: const Icon(MoonIcons.controls_close_small_24_light), ), ), MoonFormTextInput( textInputSize: MoonTextInputSize.xl, obscureText: _hidePassword, controller: _passwordController, validator: (String? value) => value != "123" ? "Wrong password." : null, leading: const Icon(MoonIcons.security_password_24_light), trailing: GestureDetector( onTap: () => setState(() => _hidePassword = !_hidePassword), child: Align( child: Text(_hidePassword ? "Show" : "Hide"), ), ), ), ], ), MoonFilledButton( onTap: () => Form.of(context).validate(), label: const Text("Submit"), ), ], ); }, ), ); } } ================================================ FILE: example/assets/code_snippets/toast.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Toast extends StatelessWidget { const Toast({super.key}); @override Widget build(BuildContext context) { return MoonFilledButton( onTap: () => MoonToast.show( context, label: const Text('This is MoonToast'), ), label: const Text("Show MoonToast"), ); } } ================================================ FILE: example/assets/code_snippets/tooltip.md ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class Tooltip extends StatefulWidget { const Tooltip({super.key}); @override State createState() => _TooltipState(); } class _TooltipState extends State { bool showOnTap = false; @override Widget build(BuildContext context) { return MoonTooltip( show: showOnTap, content: const Text('This is MoonTooltip'), child: MoonFilledButton( buttonSize: MoonButtonSize.sm, onTap: () => setState(() => showOnTap = true), label: const Text("Show MoonTooltip"), ), ); } } ================================================ FILE: example/ios/.gitignore ================================================ **/dgph *.mode1v3 *.mode2v3 *.moved-aside *.pbxuser *.perspectivev3 **/*sync/ .sconsign.dblite .tags* **/.vagrant/ **/DerivedData/ Icon? **/Pods/ **/.symlinks/ profile xcuserdata **/.generated/ Flutter/App.framework Flutter/Flutter.framework Flutter/Flutter.podspec Flutter/Generated.xcconfig Flutter/ephemeral/ Flutter/app.flx Flutter/app.zip Flutter/flutter_assets/ Flutter/flutter_export_environment.sh ServiceDefinitions.json Runner/GeneratedPluginRegistrant.* # Exceptions to above rules. !default.mode1v3 !default.mode2v3 !default.pbxuser !default.perspectivev3 ================================================ FILE: example/ios/Flutter/AppFrameworkInfo.plist ================================================ CFBundleDevelopmentRegion en CFBundleExecutable App CFBundleIdentifier io.flutter.flutter.app CFBundleInfoDictionaryVersion 6.0 CFBundleName App CFBundlePackageType FMWK CFBundleShortVersionString 1.0 CFBundleSignature ???? CFBundleVersion 1.0 MinimumOSVersion 11.0 ================================================ FILE: example/ios/Flutter/Debug.xcconfig ================================================ #include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig" #include "Generated.xcconfig" ================================================ FILE: example/ios/Flutter/Release.xcconfig ================================================ #include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig" #include "Generated.xcconfig" ================================================ FILE: example/ios/Podfile ================================================ # Uncomment this line to define a global platform for your project # platform :ios, '11.0' # CocoaPods analytics sends network stats synchronously affecting flutter build latency. ENV['COCOAPODS_DISABLE_STATS'] = 'true' project 'Runner', { 'Debug' => :debug, 'Profile' => :release, 'Release' => :release, } def flutter_root generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'Generated.xcconfig'), __FILE__) unless File.exist?(generated_xcode_build_settings_path) raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure flutter pub get is executed first" end File.foreach(generated_xcode_build_settings_path) do |line| matches = line.match(/FLUTTER_ROOT\=(.*)/) return matches[1].strip if matches end raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Generated.xcconfig, then run flutter pub get" end require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root) flutter_ios_podfile_setup target 'Runner' do use_frameworks! use_modular_headers! flutter_install_all_ios_pods File.dirname(File.realpath(__FILE__)) end post_install do |installer| installer.pods_project.targets.each do |target| flutter_additional_ios_build_settings(target) end end ================================================ FILE: example/ios/Runner/AppDelegate.swift ================================================ import UIKit import Flutter @UIApplicationMain @objc class AppDelegate: FlutterAppDelegate { override func application( _ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]? ) -> Bool { GeneratedPluginRegistrant.register(with: self) return super.application(application, didFinishLaunchingWithOptions: launchOptions) } } ================================================ FILE: example/ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json ================================================ { "images" : [ { "size" : "20x20", "idiom" : "iphone", "filename" : "Icon-App-20x20@2x.png", "scale" : "2x" }, { "size" : "20x20", "idiom" : "iphone", "filename" : "Icon-App-20x20@3x.png", "scale" : "3x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "Icon-App-29x29@1x.png", "scale" : "1x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "Icon-App-29x29@2x.png", "scale" : "2x" }, { "size" : "29x29", "idiom" : "iphone", "filename" : "Icon-App-29x29@3x.png", "scale" : "3x" }, { "size" : "40x40", "idiom" : "iphone", "filename" : "Icon-App-40x40@2x.png", "scale" : "2x" }, { "size" : "40x40", "idiom" : "iphone", "filename" : "Icon-App-40x40@3x.png", "scale" : "3x" }, { "size" : "60x60", "idiom" : "iphone", "filename" : "Icon-App-60x60@2x.png", "scale" : "2x" }, { "size" : "60x60", "idiom" : "iphone", "filename" : "Icon-App-60x60@3x.png", "scale" : "3x" }, { "size" : "20x20", "idiom" : "ipad", "filename" : "Icon-App-20x20@1x.png", "scale" : "1x" }, { "size" : "20x20", "idiom" : "ipad", "filename" : "Icon-App-20x20@2x.png", "scale" : "2x" }, { "size" : "29x29", "idiom" : "ipad", "filename" : "Icon-App-29x29@1x.png", "scale" : "1x" }, { "size" : "29x29", "idiom" : "ipad", "filename" : "Icon-App-29x29@2x.png", "scale" : "2x" }, { "size" : "40x40", "idiom" : "ipad", "filename" : "Icon-App-40x40@1x.png", "scale" : "1x" }, { "size" : "40x40", "idiom" : "ipad", "filename" : "Icon-App-40x40@2x.png", "scale" : "2x" }, { "size" : "76x76", "idiom" : "ipad", "filename" : "Icon-App-76x76@1x.png", "scale" : "1x" }, { "size" : "76x76", "idiom" : "ipad", "filename" : "Icon-App-76x76@2x.png", "scale" : "2x" }, { "size" : "83.5x83.5", "idiom" : "ipad", "filename" : "Icon-App-83.5x83.5@2x.png", "scale" : "2x" }, { "size" : "1024x1024", "idiom" : "ios-marketing", "filename" : "Icon-App-1024x1024@1x.png", "scale" : "1x" } ], "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: example/ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json ================================================ { "images" : [ { "idiom" : "universal", "filename" : "LaunchImage.png", "scale" : "1x" }, { "idiom" : "universal", "filename" : "LaunchImage@2x.png", "scale" : "2x" }, { "idiom" : "universal", "filename" : "LaunchImage@3x.png", "scale" : "3x" } ], "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: example/ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md ================================================ # Launch Screen Assets You can customize the launch screen with your own desired assets by replacing the image files in this directory. You can also do it by opening your Flutter project's Xcode project with `open ios/Runner.xcworkspace`, selecting `Runner/Assets.xcassets` in the Project Navigator and dropping in the desired images. ================================================ FILE: example/ios/Runner/Base.lproj/LaunchScreen.storyboard ================================================ ================================================ FILE: example/ios/Runner/Base.lproj/Main.storyboard ================================================ ================================================ FILE: example/ios/Runner/Info.plist ================================================ CFBundleDevelopmentRegion $(DEVELOPMENT_LANGUAGE) CFBundleDisplayName Example CFBundleExecutable $(EXECUTABLE_NAME) CFBundleIdentifier $(PRODUCT_BUNDLE_IDENTIFIER) CFBundleInfoDictionaryVersion 6.0 CFBundleName example CFBundlePackageType APPL CFBundleShortVersionString $(FLUTTER_BUILD_NAME) CFBundleSignature ???? CFBundleVersion $(FLUTTER_BUILD_NUMBER) LSRequiresIPhoneOS UILaunchStoryboardName LaunchScreen UIMainStoryboardFile Main UISupportedInterfaceOrientations UIInterfaceOrientationPortrait UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight UISupportedInterfaceOrientations~ipad UIInterfaceOrientationPortrait UIInterfaceOrientationPortraitUpsideDown UIInterfaceOrientationLandscapeLeft UIInterfaceOrientationLandscapeRight UIViewControllerBasedStatusBarAppearance CADisableMinimumFrameDurationOnPhone UIApplicationSupportsIndirectInputEvents ================================================ FILE: example/ios/Runner/Runner-Bridging-Header.h ================================================ #import "GeneratedPluginRegistrant.h" ================================================ FILE: example/ios/Runner.xcodeproj/project.pbxproj ================================================ // !$*UTF8*$! { archiveVersion = 1; classes = { }; objectVersion = 50; objects = { /* Begin PBXBuildFile section */ 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */ = {isa = PBXBuildFile; fileRef = 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */; }; 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */ = {isa = PBXBuildFile; fileRef = 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */; }; 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 74858FAE1ED2DC5600515810 /* AppDelegate.swift */; }; 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FA1CF9000F007C117D /* Main.storyboard */; }; 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FD1CF9000F007C117D /* Assets.xcassets */; }; 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */ = {isa = PBXBuildFile; fileRef = 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */; }; /* End PBXBuildFile section */ /* Begin PBXCopyFilesBuildPhase section */ 9705A1C41CF9048500538489 /* Embed Frameworks */ = { isa = PBXCopyFilesBuildPhase; buildActionMask = 2147483647; dstPath = ""; dstSubfolderSpec = 10; files = ( ); name = "Embed Frameworks"; runOnlyForDeploymentPostprocessing = 0; }; /* End PBXCopyFilesBuildPhase section */ /* Begin PBXFileReference section */ 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = GeneratedPluginRegistrant.h; sourceTree = ""; }; 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = GeneratedPluginRegistrant.m; sourceTree = ""; }; 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; name = AppFrameworkInfo.plist; path = Flutter/AppFrameworkInfo.plist; sourceTree = ""; }; 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = "Runner-Bridging-Header.h"; sourceTree = ""; }; 74858FAE1ED2DC5600515810 /* AppDelegate.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = Release.xcconfig; path = Flutter/Release.xcconfig; sourceTree = ""; }; 9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Debug.xcconfig; path = Flutter/Debug.xcconfig; sourceTree = ""; }; 9740EEB31CF90195004384FC /* Generated.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; name = Generated.xcconfig; path = Flutter/Generated.xcconfig; sourceTree = ""; }; 97C146EE1CF9000F007C117D /* Runner.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = Runner.app; sourceTree = BUILT_PRODUCTS_DIR; }; 97C146FB1CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/Main.storyboard; sourceTree = ""; }; 97C146FD1CF9000F007C117D /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = ""; }; 97C147001CF9000F007C117D /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.storyboard; name = Base; path = Base.lproj/LaunchScreen.storyboard; sourceTree = ""; }; 97C147021CF9000F007C117D /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ 97C146EB1CF9000F007C117D /* Frameworks */ = { isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ 9740EEB11CF90186004384FC /* Flutter */ = { isa = PBXGroup; children = ( 3B3967151E833CAA004F5970 /* AppFrameworkInfo.plist */, 9740EEB21CF90195004384FC /* Debug.xcconfig */, 7AFA3C8E1D35360C0083082E /* Release.xcconfig */, 9740EEB31CF90195004384FC /* Generated.xcconfig */, ); name = Flutter; sourceTree = ""; }; 97C146E51CF9000F007C117D = { isa = PBXGroup; children = ( 9740EEB11CF90186004384FC /* Flutter */, 97C146F01CF9000F007C117D /* Runner */, 97C146EF1CF9000F007C117D /* Products */, ); sourceTree = ""; }; 97C146EF1CF9000F007C117D /* Products */ = { isa = PBXGroup; children = ( 97C146EE1CF9000F007C117D /* Runner.app */, ); name = Products; sourceTree = ""; }; 97C146F01CF9000F007C117D /* Runner */ = { isa = PBXGroup; children = ( 97C146FA1CF9000F007C117D /* Main.storyboard */, 97C146FD1CF9000F007C117D /* Assets.xcassets */, 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */, 97C147021CF9000F007C117D /* Info.plist */, 1498D2321E8E86230040F4C2 /* GeneratedPluginRegistrant.h */, 1498D2331E8E89220040F4C2 /* GeneratedPluginRegistrant.m */, 74858FAE1ED2DC5600515810 /* AppDelegate.swift */, 74858FAD1ED2DC5600515810 /* Runner-Bridging-Header.h */, ); path = Runner; sourceTree = ""; }; /* End PBXGroup section */ /* Begin PBXNativeTarget section */ 97C146ED1CF9000F007C117D /* Runner */ = { isa = PBXNativeTarget; buildConfigurationList = 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */; buildPhases = ( 9740EEB61CF901F6004384FC /* Run Script */, 97C146EA1CF9000F007C117D /* Sources */, 97C146EB1CF9000F007C117D /* Frameworks */, 97C146EC1CF9000F007C117D /* Resources */, 9705A1C41CF9048500538489 /* Embed Frameworks */, 3B06AD1E1E4923F5004D2608 /* Thin Binary */, ); buildRules = ( ); dependencies = ( ); name = Runner; productName = Runner; productReference = 97C146EE1CF9000F007C117D /* Runner.app */; productType = "com.apple.product-type.application"; }; /* End PBXNativeTarget section */ /* Begin PBXProject section */ 97C146E61CF9000F007C117D /* Project object */ = { isa = PBXProject; attributes = { LastUpgradeCheck = 1300; ORGANIZATIONNAME = ""; TargetAttributes = { 97C146ED1CF9000F007C117D = { CreatedOnToolsVersion = 7.3.1; LastSwiftMigration = 1100; }; }; }; buildConfigurationList = 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */; compatibilityVersion = "Xcode 9.3"; developmentRegion = en; hasScannedForEncodings = 0; knownRegions = ( en, Base, ); mainGroup = 97C146E51CF9000F007C117D; productRefGroup = 97C146EF1CF9000F007C117D /* Products */; projectDirPath = ""; projectRoot = ""; targets = ( 97C146ED1CF9000F007C117D /* Runner */, ); }; /* End PBXProject section */ /* Begin PBXResourcesBuildPhase section */ 97C146EC1CF9000F007C117D /* Resources */ = { isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( 97C147011CF9000F007C117D /* LaunchScreen.storyboard in Resources */, 3B3967161E833CAA004F5970 /* AppFrameworkInfo.plist in Resources */, 97C146FE1CF9000F007C117D /* Assets.xcassets in Resources */, 97C146FC1CF9000F007C117D /* Main.storyboard in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXResourcesBuildPhase section */ /* Begin PBXShellScriptBuildPhase section */ 3B06AD1E1E4923F5004D2608 /* Thin Binary */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputPaths = ( ); name = "Thin Binary"; outputPaths = ( ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" embed_and_thin"; }; 9740EEB61CF901F6004384FC /* Run Script */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputPaths = ( ); name = "Run Script"; outputPaths = ( ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "/bin/sh \"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh\" build"; }; /* End PBXShellScriptBuildPhase section */ /* Begin PBXSourcesBuildPhase section */ 97C146EA1CF9000F007C117D /* Sources */ = { isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = ( 74858FAF1ED2DC5600515810 /* AppDelegate.swift in Sources */, 1498D2341E8E89220040F4C2 /* GeneratedPluginRegistrant.m in Sources */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXSourcesBuildPhase section */ /* Begin PBXVariantGroup section */ 97C146FA1CF9000F007C117D /* Main.storyboard */ = { isa = PBXVariantGroup; children = ( 97C146FB1CF9000F007C117D /* Base */, ); name = Main.storyboard; sourceTree = ""; }; 97C146FF1CF9000F007C117D /* LaunchScreen.storyboard */ = { isa = PBXVariantGroup; children = ( 97C147001CF9000F007C117D /* Base */, ); name = LaunchScreen.storyboard; sourceTree = ""; }; /* End PBXVariantGroup section */ /* Begin XCBuildConfiguration section */ 249021D3217E4FDB00AE95B9 /* Profile */ = { isa = XCBuildConfiguration; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_NONNULL = YES; CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_COMMA = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_STRICT_PROTOTYPES = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CLANG_WARN_UNREACHABLE_CODE = YES; CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = NO; DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; ENABLE_NS_ASSERTIONS = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_NO_COMMON_BLOCKS = YES; GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNDECLARED_SELECTOR = YES; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; IPHONEOS_DEPLOYMENT_TARGET = 11.0; MTL_ENABLE_DEBUG_INFO = NO; SDKROOT = iphoneos; SUPPORTED_PLATFORMS = iphoneos; TARGETED_DEVICE_FAMILY = "1,2"; VALIDATE_PRODUCT = YES; }; name = Profile; }; 249021D4217E4FDB00AE95B9 /* Profile */ = { isa = XCBuildConfiguration; baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; ENABLE_BITCODE = NO; INFOPLIST_FILE = Runner/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", ); PRODUCT_BUNDLE_IDENTIFIER = com.example.example; PRODUCT_NAME = "$(TARGET_NAME)"; SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; }; name = Profile; }; 97C147031CF9000F007C117D /* Debug */ = { isa = XCBuildConfiguration; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_NONNULL = YES; CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_COMMA = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_STRICT_PROTOTYPES = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CLANG_WARN_UNREACHABLE_CODE = YES; CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = NO; DEBUG_INFORMATION_FORMAT = dwarf; ENABLE_STRICT_OBJC_MSGSEND = YES; ENABLE_TESTABILITY = YES; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_DYNAMIC_NO_PIC = NO; GCC_NO_COMMON_BLOCKS = YES; GCC_OPTIMIZATION_LEVEL = 0; GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", ); GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNDECLARED_SELECTOR = YES; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; IPHONEOS_DEPLOYMENT_TARGET = 11.0; MTL_ENABLE_DEBUG_INFO = YES; ONLY_ACTIVE_ARCH = YES; SDKROOT = iphoneos; TARGETED_DEVICE_FAMILY = "1,2"; }; name = Debug; }; 97C147041CF9000F007C117D /* Release */ = { isa = XCBuildConfiguration; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_NONNULL = YES; CLANG_CXX_LANGUAGE_STANDARD = "gnu++0x"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_COMMA = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_STRICT_PROTOTYPES = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CLANG_WARN_UNREACHABLE_CODE = YES; CLANG_WARN__DUPLICATE_METHOD_MATCH = YES; "CODE_SIGN_IDENTITY[sdk=iphoneos*]" = "iPhone Developer"; COPY_PHASE_STRIP = NO; DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; ENABLE_NS_ASSERTIONS = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; GCC_C_LANGUAGE_STANDARD = gnu99; GCC_NO_COMMON_BLOCKS = YES; GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNDECLARED_SELECTOR = YES; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; IPHONEOS_DEPLOYMENT_TARGET = 11.0; MTL_ENABLE_DEBUG_INFO = NO; SDKROOT = iphoneos; SUPPORTED_PLATFORMS = iphoneos; SWIFT_COMPILATION_MODE = wholemodule; SWIFT_OPTIMIZATION_LEVEL = "-O"; TARGETED_DEVICE_FAMILY = "1,2"; VALIDATE_PRODUCT = YES; }; name = Release; }; 97C147061CF9000F007C117D /* Debug */ = { isa = XCBuildConfiguration; baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; ENABLE_BITCODE = NO; INFOPLIST_FILE = Runner/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", ); PRODUCT_BUNDLE_IDENTIFIER = com.example.example; PRODUCT_NAME = "$(TARGET_NAME)"; SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; }; name = Debug; }; 97C147071CF9000F007C117D /* Release */ = { isa = XCBuildConfiguration; baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CURRENT_PROJECT_VERSION = "$(FLUTTER_BUILD_NUMBER)"; ENABLE_BITCODE = NO; INFOPLIST_FILE = Runner/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/Frameworks", ); PRODUCT_BUNDLE_IDENTIFIER = com.example.example; PRODUCT_NAME = "$(TARGET_NAME)"; SWIFT_OBJC_BRIDGING_HEADER = "Runner/Runner-Bridging-Header.h"; SWIFT_VERSION = 5.0; VERSIONING_SYSTEM = "apple-generic"; }; name = Release; }; /* End XCBuildConfiguration section */ /* Begin XCConfigurationList section */ 97C146E91CF9000F007C117D /* Build configuration list for PBXProject "Runner" */ = { isa = XCConfigurationList; buildConfigurations = ( 97C147031CF9000F007C117D /* Debug */, 97C147041CF9000F007C117D /* Release */, 249021D3217E4FDB00AE95B9 /* Profile */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; 97C147051CF9000F007C117D /* Build configuration list for PBXNativeTarget "Runner" */ = { isa = XCConfigurationList; buildConfigurations = ( 97C147061CF9000F007C117D /* Debug */, 97C147071CF9000F007C117D /* Release */, 249021D4217E4FDB00AE95B9 /* Profile */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; /* End XCConfigurationList section */ }; rootObject = 97C146E61CF9000F007C117D /* Project object */; } ================================================ FILE: example/ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata ================================================ ================================================ FILE: example/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist ================================================ IDEDidComputeMac32BitWarning ================================================ FILE: example/ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings ================================================ PreviewsEnabled ================================================ FILE: example/ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme ================================================ ================================================ FILE: example/ios/Runner.xcworkspace/contents.xcworkspacedata ================================================ ================================================ FILE: example/ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist ================================================ IDEDidComputeMac32BitWarning ================================================ FILE: example/ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings ================================================ PreviewsEnabled ================================================ FILE: example/lib/main.dart ================================================ import 'package:example/src/storybook/storybook.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:flutter_web_plugins/url_strategy.dart'; import 'package:moon_design/moon_design.dart'; void main() async { usePathUrlStrategy(); WidgetsFlutterBinding.ensureInitialized(); await SystemChrome.setPreferredOrientations( [DeviceOrientation.portraitUp], ); runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); bool get _isInStorybookMode => true; @override Widget build(BuildContext context) { return _isInStorybookMode ? const StorybookPage() : MaterialApp( theme: ThemeData.light().copyWith( extensions: >[ MoonTheme(tokens: MoonTokens.light), ], ), darkTheme: ThemeData.dark().copyWith( extensions: >[ MoonTheme(tokens: MoonTokens.dark), ], ), home: Scaffold( body: Center( child: Text( "Moon Design for Flutter", style: TextStyle( fontSize: MediaQuery.of(context).size.width > 800 ? 72 : 32, ), ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/common/color_options.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; enum MoonColor { piccolo, hit, beerus, goku, gohan, bulma, trunks, goten, popo, jiren, heles, zeno, krillin, krillin60, krillin10, chichi, chichi60, chichi10, roshi, roshi60, roshi10, frieza, frieza60, frieza10, dodoria, dodoria60, dodoria10, cell, cell60, cell10, raditz, raditz60, raditz10, nappa, nappa60, nappa10, whis, whis60, whis10, } List mainColorsList = [ MoonColor.piccolo, MoonColor.hit, MoonColor.beerus, MoonColor.goku, MoonColor.gohan, MoonColor.bulma, MoonColor.trunks, MoonColor.goten, MoonColor.popo, MoonColor.jiren, MoonColor.heles, MoonColor.zeno, ]; List supportiveColorsList = [ MoonColor.krillin, MoonColor.krillin60, MoonColor.krillin10, MoonColor.chichi, MoonColor.chichi60, MoonColor.chichi10, MoonColor.roshi, MoonColor.roshi60, MoonColor.roshi10, MoonColor.cell, MoonColor.cell60, MoonColor.cell10, MoonColor.dodoria, MoonColor.dodoria60, MoonColor.dodoria10, MoonColor.frieza, MoonColor.frieza60, MoonColor.frieza10, MoonColor.nappa, MoonColor.nappa60, MoonColor.nappa10, MoonColor.raditz, MoonColor.raditz60, MoonColor.raditz10, MoonColor.whis, MoonColor.whis60, MoonColor.whis10, ]; Color getColor(BuildContext context, MoonColor color) => switch (color) { MoonColor.piccolo => context.moonColors!.piccolo, MoonColor.hit => context.moonColors!.hit, MoonColor.beerus => context.moonColors!.beerus, MoonColor.goku => context.moonColors!.goku, MoonColor.gohan => context.moonColors!.gohan, MoonColor.bulma => context.moonColors!.bulma, MoonColor.trunks => context.moonColors!.trunks, MoonColor.goten => context.moonColors!.goten, MoonColor.popo => context.moonColors!.popo, MoonColor.jiren => context.moonColors!.jiren, MoonColor.heles => context.moonColors!.heles, MoonColor.zeno => context.moonColors!.zeno, MoonColor.krillin => context.moonColors!.krillin, MoonColor.krillin60 => context.moonColors!.krillin60, MoonColor.krillin10 => context.moonColors!.krillin10, MoonColor.chichi => context.moonColors!.chichi, MoonColor.chichi60 => context.moonColors!.chichi60, MoonColor.chichi10 => context.moonColors!.chichi10, MoonColor.roshi => context.moonColors!.roshi, MoonColor.roshi60 => context.moonColors!.roshi60, MoonColor.roshi10 => context.moonColors!.roshi10, MoonColor.frieza => context.moonColors!.frieza, MoonColor.frieza60 => context.moonColors!.frieza60, MoonColor.frieza10 => context.moonColors!.frieza10, MoonColor.dodoria => context.moonColors!.dodoria, MoonColor.dodoria60 => context.moonColors!.dodoria60, MoonColor.dodoria10 => context.moonColors!.dodoria10, MoonColor.cell => context.moonColors!.cell, MoonColor.cell60 => context.moonColors!.cell60, MoonColor.cell10 => context.moonColors!.cell10, MoonColor.raditz => context.moonColors!.raditz, MoonColor.raditz60 => context.moonColors!.raditz60, MoonColor.raditz10 => context.moonColors!.raditz10, MoonColor.nappa => context.moonColors!.nappa, MoonColor.nappa60 => context.moonColors!.nappa60, MoonColor.nappa10 => context.moonColors!.nappa10, MoonColor.whis => context.moonColors!.whis, MoonColor.whis60 => context.moonColors!.whis60, MoonColor.whis10 => context.moonColors!.whis10, }; /// The index of the color options. List> colorOptions = [ ...MoonColor.values.map( (MoonColor color) => Option(label: color.name, value: color.index), ), Option(label: 'transparent', value: MoonColor.values.length), ]; // The combination of "indexes" and colors in the colorTable() look-up table // (LUT) is designed to circumvent the issue of a stale closure that would // occur with the knob otherwise. /// The look-up table for the color options. List colorTable(BuildContext context) => [ ...MoonColor.values.map((MoonColor color) => getColor(context, color)), Colors.transparent, null, ]; ================================================ FILE: example/lib/src/storybook/common/colors_page_options.dart ================================================ enum ColorsPageSection { header, mainColors, supportiveColors; String get titleText => switch (this) { header => 'Colors', mainColors => 'Main colors', supportiveColors => 'Supportive colors', }; String get bodyText => switch (this) { header => 'Moon Design System is decentralized and intended to support multiple ' 'products. The use of different-color naming conventions and ' 'numbers makes maintenance more difficult. We decided to give ' 'each of our colors a distinct name, adopting the Dragon Ball Z ' 'approach. Each color name is assigned for a specific purpose, ' 'and the values vary according to the product. Please do not use ' 'hex values; they will not change if you need theme support.', mainColors => 'The main colors serve a specific purpose. piccolo and hit are used ' 'for accent colors; beerus for borders and lines; goku and gohan ' 'for backgrounds; bulma and trunks for text and icons; goten and ' 'popo for forced theme-less colors; and jiren, heles, and zeno ' 'for semi-transparent overlays.', supportiveColors => 'Every HEX color in all supportive colors is represented by three ' 'shades. The difference between shades is in their transparency ' 'levels. Some colors may have a semantic purpose. krillin is ' 'usually used for warnings, chichi for errors, and roshi for ' 'success colors. Other colors are used for variety of secondary ' 'reasons.' }; } ================================================ FILE: example/lib/src/storybook/common/component_options.dart ================================================ import 'package:example/src/storybook/stories/composites/combobox_single_select.dart'; import 'package:example/src/storybook/stories/composites/search_with_list.dart'; import 'package:example/src/storybook/stories/primitives/accordion.dart'; import 'package:example/src/storybook/stories/primitives/alert.dart'; import 'package:example/src/storybook/stories/primitives/auth_code.dart'; import 'package:example/src/storybook/stories/primitives/avatar.dart'; import 'package:example/src/storybook/stories/primitives/bottom_sheet.dart'; import 'package:example/src/storybook/stories/primitives/breadcrumb.dart'; import 'package:example/src/storybook/stories/primitives/button.dart'; import 'package:example/src/storybook/stories/primitives/carousel.dart'; import 'package:example/src/storybook/stories/primitives/checkbox.dart'; import 'package:example/src/storybook/stories/primitives/chip.dart'; import 'package:example/src/storybook/stories/primitives/circular_loader.dart'; import 'package:example/src/storybook/stories/primitives/circular_progress.dart'; import 'package:example/src/storybook/stories/primitives/dot_indicator.dart'; import 'package:example/src/storybook/stories/primitives/drawer.dart'; import 'package:example/src/storybook/stories/primitives/dropdown.dart'; import 'package:example/src/storybook/stories/primitives/icons.dart'; import 'package:example/src/storybook/stories/primitives/linear_loader.dart'; import 'package:example/src/storybook/stories/primitives/linear_progress.dart'; import 'package:example/src/storybook/stories/primitives/menu_item.dart'; import 'package:example/src/storybook/stories/primitives/modal.dart'; import 'package:example/src/storybook/stories/primitives/popover.dart'; import 'package:example/src/storybook/stories/primitives/radio.dart'; import 'package:example/src/storybook/stories/primitives/segmented_control.dart'; import 'package:example/src/storybook/stories/primitives/switch.dart'; import 'package:example/src/storybook/stories/primitives/tab_bar.dart'; import 'package:example/src/storybook/stories/primitives/table.dart'; import 'package:example/src/storybook/stories/primitives/tag.dart'; import 'package:example/src/storybook/stories/primitives/text_area.dart'; import 'package:example/src/storybook/stories/primitives/text_input.dart'; import 'package:example/src/storybook/stories/primitives/text_input_group.dart'; import 'package:example/src/storybook/stories/primitives/toast.dart'; import 'package:example/src/storybook/stories/primitives/tooltip.dart'; enum Component { accordion, alert, authCode, avatar, bottomSheet, breadcrumb, button, carousel, checkbox, chip, circularLoader, circularProgress, combobox, dotIndicator, drawer, dropdown, icons, linearLoader, linearProgress, menuItem, modal, popover, radio, search, segmentedControl, switchX, tabBar, table, tag, textArea, textInput, textInputGroup, toast, tooltip; String get name { String rawName = toString().split('.').last; if (this == switchX) rawName = rawName.substring(0, rawName.length - 1); return rawName[0].toUpperCase() + rawName.substring(1); } String get description => switch (this) { accordion => "Accordion is a clickable list that toggles detailed content on header tap.", alert => "Alert is a way of informing a user of important changes in a prominent way.", authCode => "One-time password (OTP) is a unique code generated for secure logins.", avatar => "Avatars typically display images, icons, or initials for people or entities.", bottomSheet => "Bottom sheet is a modified dialog that slides from the bottom of the screen.", breadcrumb => "A list of links indicating the current location in the navigation hierarchy.", button => "Buttons communicate actions that users can take with a single tap.", carousel => "Carousel displays multiple images or content in a swipeable format.", checkbox => "Checkbox allows to select multiple options from a limited set of choices.", chip => "Chip is used to filter or trigger actions in a clickable format.", circularLoader => "Loaders provide visual feedback for in-progress tasks.", circularProgress => "Progress indicator visually tracks a user’s progress through a set of steps.", combobox => "Combination of dropdown and free text input for filtering options.", dotIndicator => 'Dot indicator visually tracks a user’s position in a series of items or pages.', drawer => 'Drawer is a panel that slides out from the edge of the screen.', dropdown => "Dropdown list allows users to choose one value from a menu by clicking.", icons => 'Commonly used interface icons provided by Moon Design System.', linearLoader => "Loaders provide visual feedback for in-progress tasks.", linearProgress => "Progress indicator visually tracks a user’s progress through a set of steps.", menuItem => "Menu item is a selectable option within a menu or container.", modal => "Modal appears above content, requiring user interaction before returning.", popover => "Popover displays additional content or actions in response to user input.", radio => 'Radio buttons represent a group of choices with single selection.', search => 'Search allows users to input a word or phrase to find relevant content.', segmentedControl => 'Segmented control lets user choose from multiple options displayed in segments.', switchX => 'Switch is a control used to toggle between two states.', tabBar => 'Tabs allow users to navigate easily between views within the same context.', table => 'Table is used to display large amounts of data in rows and columns.', tag => "Tags are interactive keywords used to organize and categorize objects.", textArea => 'A form control for entering and editing multi-line text.', textInput => 'Text input fields allow users to enter text.', textInputGroup => 'Combine different types of inputs into groups to save vertical space on designs.', toast => "Toast provides brief feedback message without interrupting the interface.", tooltip => 'Tooltip displays additional information about an element.', }; String get urlPath => switch (this) { accordion => AccordionStory.path, alert => AlertStory.path, authCode => AuthCodeStory.path, avatar => AvatarStory.path, bottomSheet => BottomSheetStory.path, button => ButtonStory.path, breadcrumb => BreadcrumbStory.path, carousel => CarouselStory.path, checkbox => CheckboxStory.path, chip => ChipStory.path, circularLoader => CircularLoaderStory.path, circularProgress => CircularProgressStory.path, combobox => ComboboxSingleSelectStory.path, dotIndicator => DotIndicatorStory.path, drawer => DrawerStory.path, dropdown => DropdownStory.path, icons => IconsStory.path, linearLoader => LinearLoaderStory.path, linearProgress => LinearProgressStory.path, menuItem => MenuItemStory.path, modal => ModalStory.path, popover => PopoverStory.path, radio => RadioStory.path, search => SearchWithListStory.path, segmentedControl => SegmentedControlStory.path, switchX => SwitchStory.path, tabBar => TabBarStory.path, table => TableStory.path, tag => TagStory.path, textArea => TextAreaStory.path, textInput => TextInputStory.path, textInputGroup => TextInputGroupStory.path, toast => ToastStory.path, tooltip => TooltipStory.path, }; String get imagePath { final name = toString().split('.').last; final formattedName = this == switchX ? 'switch' : name.replaceAllMapped( RegExp('[A-Z]'), (Match match) => '_${match.group(0)!.toLowerCase()}', ); return 'assets/components/$formattedName.png'; } } ================================================ FILE: example/lib/src/storybook/common/constants.dart ================================================ // Layout constants. const double extraSmallScreenWidth = 385; const double smallScreenWidth = 576; const double mediumScreenWidth = 768; const double largeScreenWidth = 1600; const double storybookAutoLayoutThreshold = 1024; ================================================ FILE: example/lib/src/storybook/common/home_page_options.dart ================================================ enum HomePageContentType { headerTitle, headerSubtitle, bodyTitle; String get text => switch (this) { headerTitle => 'Moon Design System', headerSubtitle => 'Moon is Yolo Group product design system that helps' ' us maintain the integrity of their user experience and optimize ' 'design and development resources.', bodyTitle => 'Accelerate your mobile development journey with Flutter ' 'moon components.', }; } ================================================ FILE: example/lib/src/storybook/common/methods/navigation.dart ================================================ import 'package:url_launcher/url_launcher.dart'; Future launchURL(String url) async { final Uri uri = Uri.parse(url); if (await canLaunchUrl(uri)) { await launchUrl(uri, webOnlyWindowName: '_blank'); } else { throw 'Could not launch $uri'; } } ================================================ FILE: example/lib/src/storybook/common/pages/colors_page.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/colors_page_options.dart'; import 'package:example/src/storybook/common/constants.dart'; import 'package:example/src/storybook/common/widgets/page_footer.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:moon_design/moon_design.dart'; typedef ItemsPerRow = int Function(int); class ColorsPage extends StatelessWidget { static const path = '/colors'; const ColorsPage({super.key}); static const int _defaultColorContainersInRow = 3; static const double _colorContainerSizeValue = 128.0; static const double _colorContainerGap = 24.0; Widget _buildMainColorsSection(BuildContext context) { return _buildColorsSection( context: context, rows: 6, itemsPerRow: (int rowIndex) => switch (rowIndex) { 1 => 1, 5 => _defaultColorContainersInRow, _ => 2, }, section: ColorsPageSection.mainColors, colors: mainColorsList, ); } Widget _buildSupportiveColorsSection(BuildContext context) { return _buildColorsSection( context: context, rows: 9, itemsPerRow: (int _) => _defaultColorContainersInRow, section: ColorsPageSection.supportiveColors, colors: supportiveColorsList, ); } double _getFooterWidth(BuildContext context) { return MediaQuery.of(context).size.width < storybookAutoLayoutThreshold ? mediumScreenWidth : _colorContainerSizeValue * _defaultColorContainersInRow + (_defaultColorContainersInRow - 1) * _colorContainerGap; } int _getColorIndex(int rowIndex, int childIndex, ItemsPerRow getItemsPerRow) { int colorIndex = 0; for (int i = 0; i < rowIndex; i++) { colorIndex += getItemsPerRow(i); } return colorIndex + childIndex; } Widget _highlightedBodyText(BuildContext context, String text) { if (text.isEmpty) return const Text(''); final TextStyle textStyle = context.moonTypography!.body.text16; final String pattern = MoonColor.values.map((color) => color.name).toList().join('|'); final regex = RegExp(pattern, caseSensitive: false); final List spans = []; int start = 0; for (final match in regex.allMatches(text)) { if (start == match.start) continue; spans.addAll([ TextSpan( text: text.substring(start, match.start), style: textStyle, ), WidgetSpan( alignment: PlaceholderAlignment.baseline, baseline: TextBaseline.alphabetic, child: Container( padding: const EdgeInsets.symmetric(horizontal: 6.0), decoration: BoxDecoration( color: context.moonColors!.gohan, border: Border.all( color: context.moonColors!.goten, width: 0, ), borderRadius: BorderRadius.circular(4.0), ), child: Text( match.group(0)!, style: textStyle, ), ), ), ]); start = match.end; } spans.add( TextSpan( text: text.substring(start), style: textStyle, ), ); return Text.rich( TextSpan( style: textStyle, children: spans, ), ); } Widget _buildSectionHeader(BuildContext context, ColorsPageSection section) { final bool isHeader = section == ColorsPageSection.header; final bool showLogo = MediaQuery.of(context).size.width < storybookAutoLayoutThreshold; return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ if (isHeader && showLogo) Padding( padding: const EdgeInsets.only(left: 12.0, bottom: 24.0), child: SvgPicture.asset( 'assets/svg/moon-logo-long.svg', height: 16.0, ), ), Text( section.titleText, style: isHeader ? context.moonTypography!.heading.text40 : context.moonTypography!.heading.text24, ), const SizedBox(height: 24), _highlightedBodyText(context, section.bodyText), const SizedBox(height: 24), ], ); } Widget _buildColorsSection({ required BuildContext context, required int rows, required ItemsPerRow itemsPerRow, required ColorsPageSection section, required List colors, }) { return ListView.builder( shrinkWrap: true, itemCount: rows * 2 - 1, itemBuilder: (BuildContext context, int rowIndex) { final int derivedRowIndex = rowIndex ~/ 2; final int itemsInRow = itemsPerRow(derivedRowIndex); return rowIndex.isEven ? Row( children: List.generate( _defaultColorContainersInRow * 2 - 1, (int rowItemIndex) { if (rowItemIndex.isEven) { final int derivedItemIndex = rowItemIndex ~/ 2; if (derivedItemIndex < itemsInRow) { final int colorIndex = _getColorIndex( derivedRowIndex, derivedItemIndex, itemsPerRow, ); final MoonColor moonColor = colors[colorIndex % colors.length]; return _buildColorContainer(context, moonColor); } else { return const Flexible( child: SizedBox( height: _colorContainerSizeValue, width: _colorContainerSizeValue, ), ); } } else { return const SizedBox(width: _colorContainerGap); } }, ), ) : const SizedBox(height: _colorContainerGap); }, ); } Widget _buildColorContainer(BuildContext context, MoonColor moonColor) { final double colorContainerWidth = MediaQuery.of(context).size.width < storybookAutoLayoutThreshold ? double.infinity : _colorContainerSizeValue; return Flexible( child: Column( children: [ Container( height: _colorContainerSizeValue, width: colorContainerWidth, decoration: BoxDecoration( borderRadius: BorderRadius.circular(16.0), border: Border.all(color: context.moonColors!.beerus), ), child: DecoratedBox( decoration: BoxDecoration( color: getColor(context, moonColor), borderRadius: BorderRadius.circular(15.0), ), ), ), const SizedBox(height: 8.0), Text(moonColor.name), ], ), ); } @override Widget build(BuildContext context) { final bool showLogo = MediaQuery.of(context).size.width < storybookAutoLayoutThreshold; return Scaffold( backgroundColor: Colors.white, body: SingleChildScrollView( padding: EdgeInsets.only( top: showLogo ? 40.0 : 80, left: 24, right: 24, bottom: 16.0, ), child: Center( child: SizedBox( width: largeScreenWidth, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ ConstrainedBox( constraints: const BoxConstraints( maxWidth: mediumScreenWidth, ), child: Column( children: [ _buildSectionHeader( context, ColorsPageSection.header, ), const SizedBox(height: 24.0), _buildSectionHeader( context, ColorsPageSection.mainColors, ), _buildMainColorsSection(context), const SizedBox(height: 48.0), _buildSectionHeader( context, ColorsPageSection.supportiveColors, ), _buildSupportiveColorsSection(context), ], ), ), ConstrainedBox( constraints: BoxConstraints( maxWidth: _getFooterWidth(context), ), child: const Center( child: PageFooter(), ), ), ], ), ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/common/pages/home_page.dart ================================================ import 'dart:math'; import 'package:example/src/storybook/common/component_options.dart'; import 'package:example/src/storybook/common/constants.dart'; import 'package:example/src/storybook/common/home_page_options.dart'; import 'package:example/src/storybook/common/methods/navigation.dart'; import 'package:example/src/storybook/common/social_media_options.dart'; import 'package:example/src/storybook/common/widgets/page_footer.dart'; import 'package:example/src/storybook/routing/app_router.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:moon_design/moon_design.dart'; class HomePage extends StatelessWidget { static const path = '/'; const HomePage({super.key}); double _getCardWidth(BuildContext context, double gap, double layoutWidth) { const double cardMaxWidth = 448.0; final int itemsInRow = switch (MediaQuery.of(context).size.width) { < mediumScreenWidth => 1, >= mediumScreenWidth && < largeScreenWidth => 2, _ => 3, }; final double effectiveLayoutWidth = itemsInRow == 3 ? layoutWidth * 0.85 : layoutWidth; final double totalGap = gap * (itemsInRow - 1); return min((effectiveLayoutWidth - totalGap) / itemsInRow, cardMaxWidth); } Widget _buildHeaderSection(BuildContext context, bool showLogo) { final MoonTypography typography = context.moonTypography!; return ConstrainedBox( constraints: const BoxConstraints(maxWidth: mediumScreenWidth), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ if (showLogo) Padding( padding: const EdgeInsets.only(left: 12.0, bottom: 24.0), child: SvgPicture.asset( 'assets/svg/moon-logo-long.svg', height: 16.0, ), ), Text( HomePageContentType.headerTitle.text, style: typography.heading.text64, ), const SizedBox(height: 24.0), Text( HomePageContentType.headerSubtitle.text, style: typography.heading.text24, ), const SizedBox(height: 48.0), _buildHeaderButtons(context), const SizedBox(height: 72.0), Text( HomePageContentType.bodyTitle.text, style: typography.heading.text40, ), ], ), ); } Widget _buildHeaderButtons(BuildContext context) { const double buttonGap = 12.0; return MediaQuery.of(context).size.width < smallScreenWidth ? Column( children: [ _buildButton(context, SocialMedia.gitHub), const SizedBox(height: buttonGap), _buildButton(context, SocialMedia.figma), ], ) : Row( children: [ Flexible(child: _buildButton(context, SocialMedia.gitHub)), const SizedBox(width: buttonGap), Flexible(child: _buildButton(context, SocialMedia.figma)), ], ); } Widget _buildButton(BuildContext context, SocialMedia socialMedia) { final bool isGitHub = socialMedia == SocialMedia.gitHub; return MoonButton( width: double.infinity, backgroundColor: isGitHub ? context.moonColors!.piccolo : context.moonColors!.krillin, onTap: () => launchURL(socialMedia.url), leading: SvgPicture.asset( socialMedia.buttonIconPath, width: 20.0, ), label: Flexible( child: SizedBox( width: 56, child: Text( socialMedia.name, style: isGitHub ? TextStyle(color: context.moonColors!.goten) : null, ), ), ), ); } Widget _buildCards(BuildContext context, double layoutWidth) { const double cardGap = 24.0; const double cardHeight = 346.0; const double cardImageHeight = 208.0; final BorderRadiusGeometry borderRadius = BorderRadius.circular(16); final double cardWidth = _getCardWidth(context, cardGap, layoutWidth); final bool isExtraSmallScreen = MediaQuery.of(context).size.width < extraSmallScreenWidth; return Wrap( spacing: cardGap, runSpacing: cardGap, alignment: layoutWidth < mediumScreenWidth ? WrapAlignment.center : WrapAlignment.start, children: List.generate( Component.values.length, (int index) { final Component component = Component.values[index]; return MoonBaseControl( borderRadius: borderRadius, onTap: () => router.go(component.urlPath), builder: (BuildContext context, _, bool isHovered, __, ___) { return Container( height: cardHeight, width: cardWidth, decoration: BoxDecoration( color: context.moonColors!.goten, borderRadius: borderRadius, border: Border.all(color: context.moonColors!.beerus), boxShadow: isHovered ? [ BoxShadow( color: context.moonColors!.trunks.withOpacity(.4), blurRadius: 6.0, spreadRadius: -3.0, offset: const Offset(0, 4), ), ] : null, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ Container( height: cardImageHeight, width: cardWidth, margin: const EdgeInsets.all(8.0), clipBehavior: Clip.hardEdge, decoration: BoxDecoration(borderRadius: borderRadius), child: Image.asset( colorBlendMode: BlendMode.saturation, color: isHovered ? Colors.transparent : Colors.grey, component.imagePath, fit: BoxFit.cover, ), ), Padding( padding: EdgeInsets.only( left: 24.0, right: 24.0, top: isExtraSmallScreen ? 8.0 : 16.0, ), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ Text( component.name, overflow: TextOverflow.ellipsis, style: context.moonTypography!.heading.text20, ), SizedBox(height: isExtraSmallScreen ? 4.0 : 8.0), Text( component.description, maxLines: isExtraSmallScreen ? 3 : 2, overflow: TextOverflow.ellipsis, style: context.moonTypography!.heading.text14, ), ], ), ), ], ), ); }, ); }, ), ); } @override Widget build(BuildContext context) { final double layoutWidth = MediaQuery.of(context).size.width; final bool showLogo = layoutWidth < storybookAutoLayoutThreshold; return Scaffold( backgroundColor: Colors.white, body: SingleChildScrollView( padding: EdgeInsets.only( top: showLogo ? 40.0 : 80, left: 24, right: 24, bottom: 16.0, ), child: Center( child: SizedBox( width: largeScreenWidth, child: Column( crossAxisAlignment: layoutWidth > mediumScreenWidth ? CrossAxisAlignment.start : CrossAxisAlignment.center, children: [ _buildHeaderSection(context, showLogo), const SizedBox(height: 48.0), LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return Column( children: [ _buildCards(context, constraints.maxWidth), const PageFooter(), ], ); }, ), ], ), ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/common/pages/typography_page.dart ================================================ import 'package:example/src/storybook/common/constants.dart'; import 'package:example/src/storybook/common/typography_page_options.dart'; import 'package:example/src/storybook/common/widgets/page_footer.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:moon_design/moon_design.dart'; class TypographyPage extends StatelessWidget { static const path = '/typography'; const TypographyPage({super.key}); Widget _buildSectionHeader( BuildContext context, TypographyPageSection section, ) { final bool isHeader = section == TypographyPageSection.typography; final bool showLogo = MediaQuery.of(context).size.width < storybookAutoLayoutThreshold; return Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ if (isHeader && showLogo) Padding( padding: const EdgeInsets.only(left: 12.0, bottom: 24.0), child: SvgPicture.asset( 'assets/svg/moon-logo-long.svg', height: 16.0, ), ), Text( section.titleText, style: isHeader ? context.moonTypography!.heading.text40 : context.moonTypography!.heading.text24, ), const SizedBox(height: 24), if (section.bodyText.isNotEmpty) Text( section.bodyText, style: context.moonTypography!.body.text16, ), ], ); } Widget _buildTypographyContainer(BuildContext context, MoonTextStyle style) { return Container( width: double.infinity, padding: const EdgeInsets.all(24.0), decoration: BoxDecoration( color: context.moonColors!.gohan, borderRadius: BorderRadius.circular(16.0), ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: List.generate( MoonTextSize.values.length * 2 - 1, (int index) { final int derivedIndex = index ~/ 2; return index.isEven ? Text( MoonTextSize.values[derivedIndex].name, style: style == MoonTextStyle.body ? getBodyTextStyle( context, MoonTextSize.values[derivedIndex], ) : getHeadingTextStyle( context, MoonTextSize.values[derivedIndex], ), ) : const SizedBox(height: 8.0); }, ), ), ); } @override Widget build(BuildContext context) { final bool showLogo = MediaQuery.of(context).size.width < storybookAutoLayoutThreshold; return Scaffold( backgroundColor: Colors.white, body: SingleChildScrollView( padding: EdgeInsets.only( top: showLogo ? 40.0 : 80, left: 24, right: 24, bottom: 16.0, ), child: Center( child: SizedBox( width: largeScreenWidth, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ ConstrainedBox( constraints: const BoxConstraints( maxWidth: mediumScreenWidth, ), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ _buildSectionHeader( context, TypographyPageSection.typography, ), const SizedBox(height: 48.0), _buildSectionHeader( context, TypographyPageSection.body, ), _buildTypographyContainer(context, MoonTextStyle.body), const SizedBox(height: 48.0), _buildSectionHeader( context, TypographyPageSection.heading, ), _buildTypographyContainer( context, MoonTextStyle.heading, ), const Center( child: PageFooter(), ), ], ), ), ], ), ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/common/social_media_options.dart ================================================ const yoloUrl = 'https://www.yolo.com'; enum SocialMedia { medium, linkedIn, gitHub, figma, license; String get name { final String rawName = toString().split('.').last; return rawName[0].toUpperCase() + rawName.substring(1); } String get url => switch (this) { medium => 'https://moonds.medium.com/', linkedIn => 'https://www.linkedin.com/company/moon-io/', gitHub => 'https://github.com/coingaming/moon_flutter', figma => 'https://www.figma.com/community/file/1002945721703152933/moon-design-system', license => 'https://github.com/coingaming/moon_flutter/blob/main/LICENSE', }; String get buttonIconPath => switch (this) { gitHub => 'assets/svg/github_logo.svg', figma => 'assets/svg/figma_logo.svg', _ => '', }; } ================================================ FILE: example/lib/src/storybook/common/typography_page_options.dart ================================================ import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; enum MoonTextStyle { body, heading, } enum MoonTextSize { size6, size8, size9, size10, size12, size14, size16, size18, size20, size24, size32, size40, size48, size56, size64, size72; String get name { final String rawName = toString().split('.').last; return rawName.replaceFirst('size', 'Size '); } } TextStyle getBodyTextStyle(BuildContext context, MoonTextSize textSize) => switch (textSize) { MoonTextSize.size6 => context.moonTypography!.body.text6, MoonTextSize.size8 => context.moonTypography!.body.text8, MoonTextSize.size9 => context.moonTypography!.body.text9, MoonTextSize.size10 => context.moonTypography!.body.text10, MoonTextSize.size12 => context.moonTypography!.body.text12, MoonTextSize.size14 => context.moonTypography!.body.text14, MoonTextSize.size16 => context.moonTypography!.body.text16, MoonTextSize.size18 => context.moonTypography!.body.text18, MoonTextSize.size20 => context.moonTypography!.body.text20, MoonTextSize.size24 => context.moonTypography!.body.text24, MoonTextSize.size32 => context.moonTypography!.body.text32, MoonTextSize.size40 => context.moonTypography!.body.text40, MoonTextSize.size48 => context.moonTypography!.body.text48, MoonTextSize.size56 => context.moonTypography!.body.text56, MoonTextSize.size64 => context.moonTypography!.body.text64, MoonTextSize.size72 => context.moonTypography!.body.text72, }; TextStyle getHeadingTextStyle(BuildContext context, MoonTextSize textSize) => switch (textSize) { MoonTextSize.size6 => context.moonTypography!.heading.text6, MoonTextSize.size8 => context.moonTypography!.heading.text8, MoonTextSize.size9 => context.moonTypography!.heading.text9, MoonTextSize.size10 => context.moonTypography!.heading.text10, MoonTextSize.size12 => context.moonTypography!.heading.text12, MoonTextSize.size14 => context.moonTypography!.heading.text14, MoonTextSize.size16 => context.moonTypography!.heading.text16, MoonTextSize.size18 => context.moonTypography!.heading.text18, MoonTextSize.size20 => context.moonTypography!.heading.text20, MoonTextSize.size24 => context.moonTypography!.heading.text24, MoonTextSize.size32 => context.moonTypography!.heading.text32, MoonTextSize.size40 => context.moonTypography!.heading.text40, MoonTextSize.size48 => context.moonTypography!.heading.text48, MoonTextSize.size56 => context.moonTypography!.heading.text56, MoonTextSize.size64 => context.moonTypography!.heading.text64, MoonTextSize.size72 => context.moonTypography!.heading.text72, }; enum TypographyPageSection { typography, body, heading; String get titleText => switch (this) { typography => 'Typography', body => 'Body', heading => 'Heading', }; String get bodyText => switch (this) { typography => 'Moon typography includes body and heading text styles. ' 'The body and header text styles have a set font size, while the ' 'heading text style also includes a semibold font weight.', _ => '', }; } ================================================ FILE: example/lib/src/storybook/common/widgets/logo.dart ================================================ import 'package:example/src/storybook/common/pages/home_page.dart'; import 'package:example/src/storybook/routing/app_router.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:moon_design/moon_design.dart'; class MoonLogoWidget extends StatefulWidget { const MoonLogoWidget({super.key}); @override State createState() => _MoonLogoWidgetState(); } class _MoonLogoWidgetState extends State { @override Widget build(BuildContext context) { return Padding( padding: const EdgeInsets.only(top: 28.0, left: 20.0), child: Align( alignment: Alignment.centerLeft, child: MoonButton( showScaleEffect: false, hoverEffectColor: Colors.transparent, onTap: () => router.go(HomePage.path), label: SvgPicture.asset( "assets/svg/moon-logo-long.svg", height: 16.0, ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/common/widgets/page_footer.dart ================================================ import 'package:example/src/storybook/common/methods/navigation.dart'; import 'package:example/src/storybook/common/social_media_options.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:moon_design/moon_design.dart'; class PageFooter extends StatelessWidget { const PageFooter({super.key}); Widget _buildFooterSocialMediaButtons(BuildContext context) { return Wrap( crossAxisAlignment: WrapCrossAlignment.center, alignment: WrapAlignment.center, children: List.generate( SocialMedia.values.length * 2 - 1, (int index) { final int derivedIndex = index ~/ 2; return index.isEven ? MoonTextButton( buttonSize: MoonButtonSize.sm, onTap: () => launchURL(SocialMedia.values[derivedIndex].url), label: Text( SocialMedia.values[derivedIndex].name, overflow: TextOverflow.ellipsis, ), ) : Padding( padding: const EdgeInsets.all(4.0), child: Text( '•', style: TextStyle(color: context.moonColors!.trunks), ), ); }, ), ); } @override Widget build(BuildContext context) { return Column( children: [ const SizedBox(height: 112.0), Text.rich( textAlign: TextAlign.center, TextSpan( text: 'With the help of ', style: context.moonTypography!.body.text14, children: [ TextSpan( text: 'Yolo Group', style: context.moonTypography!.heading.text14, recognizer: TapGestureRecognizer() ..onTap = () => launchURL(yoloUrl), ), const WidgetSpan( child: SizedBox(width: 4), ), WidgetSpan( child: SvgPicture.asset( 'assets/svg/heart.svg', width: 20.0, ), ), ], ), ), const SizedBox(height: 8.0), _buildFooterSocialMediaButtons(context), ], ); } } ================================================ FILE: example/lib/src/storybook/common/widgets/routing_error_widget.dart ================================================ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; import 'package:moon_design/moon_design.dart'; import 'package:transparent_image/transparent_image.dart'; class RoutingErrorWidget extends StatelessWidget { const RoutingErrorWidget({super.key}); @override Widget build(BuildContext context) => Scaffold( body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ FadeInImage( height: 200, placeholder: MemoryImage(kTransparentImage), image: const AssetImage('assets/images/url_error.jpg'), ), Text( 'Lost in space', style: context.moonTypography!.heading.text32, ), const SizedBox(height: 8), Text( 'Houston, we have a problem. Moon not found.', style: context.moonTypography!.body.text16, textAlign: TextAlign.center, ), const SizedBox(height: 32), MoonButton( onTap: () => context.go('/'), borderColor: context.moonColors!.piccolo, showBorder: true, label: Text( 'Go back to home', style: TextStyle(color: context.moonColors!.piccolo), ), ), ], ), ), ); } ================================================ FILE: example/lib/src/storybook/common/widgets/segment.dart ================================================ import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; class IconsSegment extends StatelessWidget { final Map segmentMap; const IconsSegment({ super.key, required this.segmentMap, }); @override Widget build(BuildContext context) { String createSegmentTitle(String text) { final String title = text.split('_').first; return title[0].toUpperCase() + title.substring(1); } return SliverPadding( padding: const EdgeInsets.symmetric(horizontal: 16.0), sliver: SliverMainAxisGroup( slivers: [ SliverPadding( padding: const EdgeInsets.only(top: 16), sliver: SliverToBoxAdapter( child: TextDivider( text: createSegmentTitle(segmentMap.keys.first), paddingBottom: 0, ), ), ), SliverGrid.builder( itemCount: segmentMap.length, gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount( crossAxisCount: 3, crossAxisSpacing: 8, mainAxisSpacing: 8, mainAxisExtent: 104, ), itemBuilder: (BuildContext context, int index) { return Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.end, children: [ if (segmentMap.keys.toList()[index].contains("16")) Icon(segmentMap.values.toList()[index], size: 16) else if (segmentMap.keys.toList()[index].contains("24")) Icon(segmentMap.values.toList()[index], size: 24) else Icon(segmentMap.values.toList()[index], size: 32), const SizedBox(height: 16), Text( segmentMap.keys.toList()[index], style: TextStyle( fontSize: 12, color: Colors.grey[600], ), ), ], ); }, ), const SliverPadding( padding: EdgeInsets.only(bottom: 16), ), ], ), ); } } ================================================ FILE: example/lib/src/storybook/common/widgets/text_divider.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class TextDivider extends StatelessWidget { final String text; final double paddingTop; final double paddingBottom; const TextDivider({ super.key, required this.text, this.paddingTop = 48, this.paddingBottom = 32, }); @override Widget build(BuildContext context) { return Padding( padding: EdgeInsets.only(top: paddingTop, bottom: paddingBottom), child: Row( children: [ const Expanded( child: Divider(), ), Padding( padding: const EdgeInsets.symmetric(horizontal: 16.0), child: Text( text, style: context.moonTypography?.body.text12 .copyWith(color: context.moonColors?.trunks), ), ), const Expanded( child: Divider(), ), ], ), ); } } ================================================ FILE: example/lib/src/storybook/common/widgets/version.dart ================================================ import 'dart:ui'; import 'package:example/src/storybook/common/constants.dart'; import 'package:flutter/material.dart'; import 'package:flutter_svg/svg.dart'; import 'package:moon_design/moon_design.dart'; import 'package:package_info_plus/package_info_plus.dart'; class MoonVersionWidget extends StatefulWidget { const MoonVersionWidget({super.key}); @override State createState() => _MoonVersionWidgetState(); } class _MoonVersionWidgetState extends State { bool isLargeScreen = MediaQueryData.fromView(PlatformDispatcher.instance.implicitView!) .size .width > storybookAutoLayoutThreshold; String? _version = ""; @override Future didChangeDependencies() async { super.didChangeDependencies(); final PackageInfo packageInfo = await PackageInfo.fromPlatform(); if (mounted) setState(() => _version = packageInfo.version); } @override Widget build(BuildContext context) { return IgnorePointer( child: Material( color: Colors.transparent, child: Padding( padding: const EdgeInsets.all(8.0), child: Row( mainAxisAlignment: isLargeScreen ? MainAxisAlignment.center : MainAxisAlignment.end, children: [ SvgPicture.asset( "assets/svg/moon-logo-short.svg", width: 24.0, height: 24.0, ), if (isLargeScreen) ...[ const SizedBox(width: 8.0), Text( "Moon Design", style: MoonTypography.typography.heading.text14, ), ], const SizedBox(width: 6.0), Text( "v$_version", style: MoonTypography.typography.heading.text14, ), ], ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/routing/app_router.dart ================================================ import 'package:example/src/storybook/common/pages/colors_page.dart'; import 'package:example/src/storybook/common/pages/home_page.dart'; import 'package:example/src/storybook/common/pages/typography_page.dart'; import 'package:example/src/storybook/common/widgets/routing_error_widget.dart'; import 'package:example/src/storybook/stories/composites/combobox_multi_select.dart'; import 'package:example/src/storybook/stories/composites/combobox_single_select.dart'; import 'package:example/src/storybook/stories/composites/search_with_dropdown.dart'; import 'package:example/src/storybook/stories/composites/search_with_list.dart'; import 'package:example/src/storybook/stories/primitives/accordion.dart'; import 'package:example/src/storybook/stories/primitives/alert.dart'; import 'package:example/src/storybook/stories/primitives/auth_code.dart'; import 'package:example/src/storybook/stories/primitives/avatar.dart'; import 'package:example/src/storybook/stories/primitives/bottom_sheet.dart'; import 'package:example/src/storybook/stories/primitives/breadcrumb.dart'; import 'package:example/src/storybook/stories/primitives/button.dart'; import 'package:example/src/storybook/stories/primitives/carousel.dart'; import 'package:example/src/storybook/stories/primitives/checkbox.dart'; import 'package:example/src/storybook/stories/primitives/chip.dart'; import 'package:example/src/storybook/stories/primitives/circular_loader.dart'; import 'package:example/src/storybook/stories/primitives/circular_progress.dart'; import 'package:example/src/storybook/stories/primitives/dot_indicator.dart'; import 'package:example/src/storybook/stories/primitives/drawer.dart'; import 'package:example/src/storybook/stories/primitives/dropdown.dart'; import 'package:example/src/storybook/stories/primitives/icons.dart'; import 'package:example/src/storybook/stories/primitives/linear_loader.dart'; import 'package:example/src/storybook/stories/primitives/linear_progress.dart'; import 'package:example/src/storybook/stories/primitives/menu_item.dart'; import 'package:example/src/storybook/stories/primitives/modal.dart'; import 'package:example/src/storybook/stories/primitives/popover.dart'; import 'package:example/src/storybook/stories/primitives/radio.dart'; import 'package:example/src/storybook/stories/primitives/segmented_control.dart'; import 'package:example/src/storybook/stories/primitives/switch.dart'; import 'package:example/src/storybook/stories/primitives/tab_bar.dart'; import 'package:example/src/storybook/stories/primitives/table.dart'; import 'package:example/src/storybook/stories/primitives/tag.dart'; import 'package:example/src/storybook/stories/primitives/text_area.dart'; import 'package:example/src/storybook/stories/primitives/text_input.dart'; import 'package:example/src/storybook/stories/primitives/text_input_group.dart'; import 'package:example/src/storybook/stories/primitives/toast.dart'; import 'package:example/src/storybook/stories/primitives/tooltip.dart'; import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; const String primitivesDirectory = '/primitives'; const String compositesDirectory = '/composites'; GoRouter router = GoRouter( debugLogDiagnostics: true, initialLocation: HomePage.path, errorBuilder: (BuildContext _, GoRouterState __) => const RoutingErrorWidget(), redirect: (BuildContext _, GoRouterState state) { switch (state.uri.path) { case primitivesDirectory: return AccordionStory.path; case compositesDirectory: return ComboboxSingleSelectStory.path; case ComboboxSingleSelectStory.subdirectory: return ComboboxSingleSelectStory.path; case '$compositesDirectory${ComboboxSingleSelectStory.subdirectory}': return ComboboxSingleSelectStory.path; case SearchWithListStory.subdirectory: return SearchWithListStory.path; case '$compositesDirectory${SearchWithListStory.subdirectory}': return SearchWithListStory.path; case CircularLoaderStory.subdirectory: return CircularLoaderStory.path; case '$primitivesDirectory${CircularLoaderStory.subdirectory}': return CircularLoaderStory.path; case CircularProgressStory.subdirectory: return CircularProgressStory.path; case '$primitivesDirectory${CircularProgressStory.subdirectory}': return CircularProgressStory.path; default: return null; } }, routes: [ // Pages. GoRoute( path: HomePage.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: HomePage(), ), ), GoRoute( path: ColorsPage.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: ColorsPage(), ), ), GoRoute( path: TypographyPage.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: TypographyPage(), ), ), // Stories. GoRoute( path: AccordionStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: AccordionStory(), ), ), GoRoute( path: AlertStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: AlertStory(), ), ), GoRoute( path: AuthCodeStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: AuthCodeStory(), ), ), GoRoute( path: AvatarStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: AvatarStory(), ), ), GoRoute( path: BottomSheetStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: BottomSheetStory(), ), onExit: (BuildContext _) { if (router.canPop()) router.pop(); return true; }, ), GoRoute( path: BreadcrumbStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: BreadcrumbStory(), ), ), GoRoute( path: ButtonStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: ButtonStory(), ), ), GoRoute( path: CarouselStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: CarouselStory(), ), ), GoRoute( path: CheckboxStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: CheckboxStory(), ), ), GoRoute( path: ChipStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: ChipStory(), ), ), GoRoute( path: CircularLoaderStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: CircularLoaderStory(), ), ), GoRoute( path: CircularProgressStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: CircularProgressStory(), ), ), GoRoute( path: ComboboxSingleSelectStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: ComboboxSingleSelectStory(), ), ), GoRoute( path: ComboboxMultiSelectStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: ComboboxMultiSelectStory(), ), ), GoRoute( path: DotIndicatorStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: DotIndicatorStory(), ), ), GoRoute( path: DrawerStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: DrawerStory(), ), ), GoRoute( path: DropdownStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: DropdownStory(), ), ), GoRoute( path: IconsStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: IconsStory(), ), ), GoRoute( path: LinearLoaderStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: LinearLoaderStory(), ), ), GoRoute( path: LinearProgressStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: LinearProgressStory(), ), ), GoRoute( path: MenuItemStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: MenuItemStory(), ), ), GoRoute( path: ModalStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: ModalStory(), ), onExit: (BuildContext _) { if (router.canPop()) router.pop(); return true; }, ), GoRoute( path: PopoverStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: PopoverStory(), ), ), GoRoute( path: RadioStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: RadioStory(), ), ), GoRoute( path: SearchWithListStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: SearchWithListStory(), ), ), GoRoute( path: SearchWithDropdownStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: SearchWithDropdownStory(), ), ), GoRoute( path: SegmentedControlStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: SegmentedControlStory(), ), ), GoRoute( path: SwitchStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: SwitchStory(), ), ), GoRoute( path: TabBarStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: TabBarStory(), ), ), GoRoute( path: TableStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: TableStory(), ), ), GoRoute( path: TagStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: TagStory(), ), ), GoRoute( path: TextAreaStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: TextAreaStory(), ), ), GoRoute( path: TextInputStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: TextInputStory(), ), ), GoRoute( path: TextInputGroupStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: TextInputGroupStory(), ), ), GoRoute( path: ToastStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: ToastStory(), ), ), GoRoute( path: TooltipStory.path, pageBuilder: (BuildContext _, GoRouterState __) => const NoTransitionPage( child: TooltipStory(), ), ), ], ); ================================================ FILE: example/lib/src/storybook/routing/route_aware_stories.dart ================================================ import 'package:example/src/storybook/common/pages/colors_page.dart'; import 'package:example/src/storybook/common/pages/home_page.dart'; import 'package:example/src/storybook/common/pages/typography_page.dart'; import 'package:example/src/storybook/routing/app_router.dart'; import 'package:example/src/storybook/stories/composites/combobox_multi_select.dart'; import 'package:example/src/storybook/stories/composites/combobox_single_select.dart'; import 'package:example/src/storybook/stories/composites/search_with_dropdown.dart'; import 'package:example/src/storybook/stories/composites/search_with_list.dart'; import 'package:example/src/storybook/stories/primitives/accordion.dart'; import 'package:example/src/storybook/stories/primitives/alert.dart'; import 'package:example/src/storybook/stories/primitives/auth_code.dart'; import 'package:example/src/storybook/stories/primitives/avatar.dart'; import 'package:example/src/storybook/stories/primitives/bottom_sheet.dart'; import 'package:example/src/storybook/stories/primitives/breadcrumb.dart'; import 'package:example/src/storybook/stories/primitives/button.dart'; import 'package:example/src/storybook/stories/primitives/carousel.dart'; import 'package:example/src/storybook/stories/primitives/checkbox.dart'; import 'package:example/src/storybook/stories/primitives/chip.dart'; import 'package:example/src/storybook/stories/primitives/circular_loader.dart'; import 'package:example/src/storybook/stories/primitives/circular_progress.dart'; import 'package:example/src/storybook/stories/primitives/dot_indicator.dart'; import 'package:example/src/storybook/stories/primitives/drawer.dart'; import 'package:example/src/storybook/stories/primitives/dropdown.dart'; import 'package:example/src/storybook/stories/primitives/icons.dart'; import 'package:example/src/storybook/stories/primitives/linear_loader.dart'; import 'package:example/src/storybook/stories/primitives/linear_progress.dart'; import 'package:example/src/storybook/stories/primitives/menu_item.dart'; import 'package:example/src/storybook/stories/primitives/modal.dart'; import 'package:example/src/storybook/stories/primitives/popover.dart'; import 'package:example/src/storybook/stories/primitives/radio.dart'; import 'package:example/src/storybook/stories/primitives/segmented_control.dart'; import 'package:example/src/storybook/stories/primitives/switch.dart'; import 'package:example/src/storybook/stories/primitives/tab_bar.dart'; import 'package:example/src/storybook/stories/primitives/table.dart'; import 'package:example/src/storybook/stories/primitives/tag.dart'; import 'package:example/src/storybook/stories/primitives/text_area.dart'; import 'package:example/src/storybook/stories/primitives/text_input.dart'; import 'package:example/src/storybook/stories/primitives/text_input_group.dart'; import 'package:example/src/storybook/stories/primitives/toast.dart'; import 'package:example/src/storybook/stories/primitives/tooltip.dart'; import 'package:flutter/services.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; const String directory = 'assets/code_snippets/'; final List routeAwareStories = [ // Pages. Story.asRoute( name: 'Home', routePath: HomePage.path, router: router, isPage: true, ), Story.asRoute( name: 'Colors', routePath: ColorsPage.path, router: router, isPage: true, ), Story.asRoute( name: 'Typography', routePath: TypographyPage.path, router: router, isPage: true, ), // Composite stories. Story.asRoute( name: 'Composites/Combobox/single select combobox', routePath: ComboboxSingleSelectStory.path, router: router, codeString: fetchAsset('combobox_single_select.md'), ), Story.asRoute( name: 'Composites/Combobox/multi select combobox', routePath: ComboboxMultiSelectStory.path, router: router, codeString: fetchAsset('combobox_multi_select.md'), ), Story.asRoute( name: 'Composites/Search/search with list', routePath: SearchWithListStory.path, router: router, codeString: fetchAsset('search_with_list.md'), ), Story.asRoute( name: 'Composites/Search/search with dropdown', routePath: SearchWithDropdownStory.path, router: router, codeString: fetchAsset('search_with_dropdown.md'), ), // Primitive stories. Story.asRoute( name: 'Primitives/Accordion', routePath: AccordionStory.path, router: router, codeString: fetchAsset('accordion.md'), ), Story.asRoute( name: 'Primitives/Alert', routePath: AlertStory.path, router: router, codeString: fetchAsset('alert.md'), ), Story.asRoute( name: 'Primitives/AuthCode', routePath: AuthCodeStory.path, router: router, codeString: fetchAsset('auth_code.md'), ), Story.asRoute( name: 'Primitives/Avatar', routePath: AvatarStory.path, router: router, codeString: fetchAsset('avatar.md'), ), Story.asRoute( name: 'Primitives/BottomSheet', routePath: BottomSheetStory.path, router: router, codeString: fetchAsset('bottom_sheet.md'), ), Story.asRoute( name: 'Primitives/Breadcrumb', routePath: BreadcrumbStory.path, router: router, codeString: fetchAsset('breadcrumb.md'), ), Story.asRoute( name: 'Primitives/Button', routePath: ButtonStory.path, router: router, codeString: fetchAsset('button.md'), ), Story.asRoute( name: 'Primitives/Carousel', routePath: CarouselStory.path, router: router, codeString: fetchAsset('carousel.md'), ), Story.asRoute( name: 'Primitives/Checkbox', routePath: CheckboxStory.path, router: router, codeString: fetchAsset('checkbox.md'), ), Story.asRoute( name: 'Primitives/Chip', routePath: ChipStory.path, router: router, codeString: fetchAsset('chip.md'), ), Story.asRoute( name: 'Primitives/Loader/CircularLoader', routePath: CircularLoaderStory.path, router: router, codeString: fetchAsset('circular_loader.md'), ), Story.asRoute( name: 'Primitives/Progress/CircularProgress', routePath: CircularProgressStory.path, router: router, codeString: fetchAsset('circular_progress.md'), ), Story.asRoute( name: 'Primitives/DotIndicator', routePath: DotIndicatorStory.path, router: router, codeString: fetchAsset('dot_indicator.md'), ), Story.asRoute( name: 'Primitives/Drawer', routePath: DrawerStory.path, router: router, codeString: fetchAsset('drawer.md'), ), Story.asRoute( name: 'Primitives/Dropdown', routePath: DropdownStory.path, router: router, codeString: fetchAsset('dropdown.md'), ), Story.asRoute( name: 'Primitives/Icons', routePath: IconsStory.path, router: router, codeString: fetchAsset('icons.md'), ), Story.asRoute( name: 'Primitives/Loader/LinearLoader', routePath: LinearLoaderStory.path, router: router, codeString: fetchAsset('linear_loader.md'), ), Story.asRoute( name: 'Primitives/Progress/LinearProgress', routePath: LinearProgressStory.path, router: router, codeString: fetchAsset('linear_progress.md'), ), Story.asRoute( name: 'Primitives/MenuItem', routePath: MenuItemStory.path, router: router, codeString: fetchAsset('menu_item.md'), ), Story.asRoute( name: 'Primitives/Modal', routePath: ModalStory.path, router: router, codeString: fetchAsset('modal.md'), ), Story.asRoute( name: 'Primitives/Popover', routePath: PopoverStory.path, router: router, codeString: fetchAsset('popover.md'), ), Story.asRoute( name: 'Primitives/Radio', routePath: RadioStory.path, router: router, codeString: fetchAsset('radio.md'), ), Story.asRoute( name: 'Primitives/SegmentedControl', routePath: SegmentedControlStory.path, router: router, codeString: fetchAsset('segmented_control.md'), ), Story.asRoute( name: 'Primitives/Switch', routePath: SwitchStory.path, router: router, codeString: fetchAsset('switch.md'), ), Story.asRoute( name: 'Primitives/TabBar', routePath: TabBarStory.path, router: router, codeString: fetchAsset('tab_bar.md'), ), Story.asRoute( name: 'Primitives/Table', routePath: TableStory.path, router: router, codeString: fetchAsset('table.md'), ), Story.asRoute( name: 'Primitives/Tag', routePath: TagStory.path, router: router, codeString: fetchAsset('tag.md'), ), Story.asRoute( name: 'Primitives/TextArea', routePath: TextAreaStory.path, router: router, codeString: fetchAsset('text_area.md'), ), Story.asRoute( name: 'Primitives/TextInput', routePath: TextInputStory.path, router: router, codeString: fetchAsset('text_input.md'), ), Story.asRoute( name: 'Primitives/TextInputGroup', routePath: TextInputGroupStory.path, router: router, codeString: fetchAsset('text_input_group.md'), ), Story.asRoute( name: 'Primitives/Toast', routePath: ToastStory.path, router: router, codeString: fetchAsset('toast.md'), ), Story.asRoute( name: 'Primitives/Tooltip', routePath: TooltipStory.path, router: router, codeString: fetchAsset('tooltip.md'), ), ]; Future fetchAsset(String assetName) async => rootBundle.loadString('$directory$assetName'); ================================================ FILE: example/lib/src/storybook/stories/composites/combobox_multi_select.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/component_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class ComboboxMultiSelectStory extends StatefulWidget { static const path = '/composites/combobox/multi_select'; const ComboboxMultiSelectStory({super.key}); @override State createState() => _ComboboxMultiSelectStoryState(); } class _ComboboxMultiSelectStoryState extends State { final FocusNode _focusNode = FocusNode(); final TextEditingController _searchController = TextEditingController(); final Map _selectedOptions = {}; final List _optionsList = Component.values; List _filteredOptionsList = []; bool _showDropdown = false; String get _inputValue => _searchController.text.trim().toLowerCase(); void _performSearch() { setState(() { _filteredOptionsList = _optionsList .where( (Component option) => option.name.toLowerCase().contains(_inputValue), ) .toList(); _showDropdown = true; }); } void _handleSelect(Component option, bool isSelected) { setState( () => isSelected ? _selectedOptions[option] = true : _selectedOptions.remove(option), ); } void _showAllOptionsList() { setState(() { _filteredOptionsList = _optionsList; _showDropdown = !_showDropdown; }); } void _handleDropdownTapOutside() { setState(() { _showDropdown = false; _searchController.clear(); _focusNode.unfocus(); }); } void _handleInputTapOutside() { if (_focusNode.hasFocus && !_showDropdown) { _searchController.clear(); _focusNode.unfocus(); } } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final textInputSizeKnob = context.knobs.nullable.options( label: "textInputSize", description: "Size variants for MoonTextInput.", enabled: false, initial: MoonTextInputSize.md, options: const [ Option(label: "sm", value: MoonTextInputSize.sm), Option(label: "md", value: MoonTextInputSize.md), Option(label: "lg", value: MoonTextInputSize.lg), Option(label: "xl", value: MoonTextInputSize.xl), ], ); final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextInput active border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonTextInput inactive border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; final hoverBorderColorKnob = context.knobs.nullable.options( label: "hoverBorderColor", description: "MoonColors variants for MoonTextInput border on hover.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hoverBorderColor = colorTable(context)[hoverBorderColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextInput and MoonDropdown background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTextInput and MoonDropdown", enabled: false, initial: 8, max: 32, ); final distanceToTargetKnob = context.knobs.nullable.slider( label: "distanceToTarget", description: "Distance to target child widget.", enabled: false, initial: 8, max: 100, ); final showShadowKnob = context.knobs.boolean( label: "Show shadow", description: "Show shadows for MoonDropdown.", initial: true, ); final enabledKnob = context.knobs.boolean( label: "enabled", description: "Switch between MoonTextInput enabled and disabled states.", initial: true, ); final hasFloatingLabelKnob = context.knobs.boolean( label: "hasFloatingLabel", description: "Whether MoonTextInput has floating label.", ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: Padding( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: MoonDropdown( show: _showDropdown && enabledKnob, constrainWidthToChild: true, backgroundColor: backgroundColor, borderRadius: borderRadius, distanceToTarget: distanceToTargetKnob, dropdownShadows: showShadowKnob == true ? null : [], onTapOutside: () => _handleDropdownTapOutside(), content: ConstrainedBox( constraints: const BoxConstraints(maxHeight: 200), child: ScrollConfiguration( behavior: const ScrollBehavior().copyWith(scrollbars: false), child: _filteredOptionsList.isEmpty ? const MoonMenuItem( label: Text('Nothing found.'), ) : ClipRRect( borderRadius: borderRadius ?? BorderRadius.zero, child: ListView.builder( shrinkWrap: true, clipBehavior: Clip.none, padding: EdgeInsets.zero, itemCount: _filteredOptionsList.length, itemBuilder: (BuildContext _, int index) { if (index >= _filteredOptionsList.length) { return const SizedBox.shrink(); } final Component currentOption = _filteredOptionsList[index]; final bool isSelected = _selectedOptions.containsKey(currentOption); return MoonMenuItem( absorbGestures: true, onTap: () => _handleSelect( currentOption, !isSelected, ), label: Text(currentOption.name), trailing: MoonCheckbox( value: isSelected, tapAreaSizeValue: 0, onChanged: (bool? _) {}, ), ); }, ), ), ), ), child: MoonTextInput( enabled: enabledKnob, hasFloatingLabel: hasFloatingLabelKnob, width: 270, focusNode: _focusNode, textInputSize: textInputSizeKnob, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, backgroundColor: backgroundColor, hoverBorderColor: hoverBorderColor, borderRadius: borderRadius, hintText: "Select multiple components", controller: _searchController, onTap: () => _performSearch(), onTapOutside: (PointerDownEvent _) => _handleInputTapOutside(), onChanged: (String _) => _performSearch(), leading: _selectedOptions.isNotEmpty ? Center( child: MoonTag( tagSize: MoonTagSize.xs, backgroundColor: context.moonColors!.bulma, onTap: () => setState(() => _selectedOptions.clear()), label: Text( "${_selectedOptions.keys.length}", style: TextStyle(color: context.moonColors!.gohan), ), trailing: Icon( MoonIcons.controls_close_small_16_light, color: context.moonColors!.gohan, ), ), ) : null, trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, hoverEffectColor: Colors.transparent, onTap: () => _showAllOptionsList(), icon: AnimatedRotation( duration: const Duration(milliseconds: 200), turns: _showDropdown ? -0.5 : 0, child: const Icon(MoonIcons.controls_chevron_down_16_light), ), ), ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/composites/combobox_single_select.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/component_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class ComboboxSingleSelectStory extends StatefulWidget { static const subdirectory = '/combobox'; static const path = '/composites/combobox/single_select'; const ComboboxSingleSelectStory({super.key}); @override State createState() => _ComboboxSingleSelectStoryState(); } class _ComboboxSingleSelectStoryState extends State { final FocusNode _focusNode = FocusNode(); final TextEditingController _searchController = TextEditingController(); final List _optionsList = Component.values; List _filteredOptionsList = []; Component? _selectedOption; bool _showDropdown = false; bool get _optionIsSelected => _selectedOption?.name == _searchController.text; String get _inputValue => _searchController.text.trim().toLowerCase(); void _performSearch() { setState(() { if (!_optionIsSelected && _selectedOption != null) _selectedOption = null; _filteredOptionsList = _optionsList .where( (Component option) => option.name.toLowerCase().contains(_inputValue), ) .toList(); _showDropdown = true; }); } void _handleSelect(Component option) { setState(() { _showDropdown = false; _searchController.text = option.name; _selectedOption = option; _focusNode.unfocus(); }); } void _showAllOptionsList() { setState(() { _filteredOptionsList = _optionsList; _showDropdown = !_showDropdown; }); } void _handleDropdownTapOutside() { setState(() { _showDropdown = false; if (!_optionIsSelected) _searchController.clear(); _focusNode.unfocus(); }); } void _handleInputTapOutside() { if (_focusNode.hasFocus && !_showDropdown) { if (!_optionIsSelected) _searchController.clear(); _focusNode.unfocus(); } } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final textInputSizeKnob = context.knobs.nullable.options( label: "textInputSize", description: "Size variants for MoonTextInput.", enabled: false, initial: MoonTextInputSize.md, options: const [ Option(label: "sm", value: MoonTextInputSize.sm), Option(label: "md", value: MoonTextInputSize.md), Option(label: "lg", value: MoonTextInputSize.lg), Option(label: "xl", value: MoonTextInputSize.xl), ], ); final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextInput active border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonTextInput inactive border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; final hoverBorderColorKnob = context.knobs.nullable.options( label: "hoverBorderColor", description: "MoonColors variants for MoonTextInput border on hover.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hoverBorderColor = colorTable(context)[hoverBorderColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextInput and MoonDropdown background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTextInput and MoonDropdown", enabled: false, initial: 8, max: 32, ); final distanceToTargetKnob = context.knobs.nullable.slider( label: "distanceToTarget", description: "Distance to target child widget.", enabled: false, initial: 8, max: 100, ); final showShadowKnob = context.knobs.boolean( label: "Show shadow", description: "Show shadows for MoonDropdown.", initial: true, ); final enabledKnob = context.knobs.boolean( label: "enabled", description: "Switch between MoonTextInput enabled and disabled states.", initial: true, ); final hasFloatingLabelKnob = context.knobs.boolean( label: "hasFloatingLabel", description: "Whether MoonTextInput has floating label.", ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: Padding( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: MoonDropdown( show: _showDropdown && enabledKnob, constrainWidthToChild: true, backgroundColor: backgroundColor, borderRadius: borderRadius, distanceToTarget: distanceToTargetKnob, dropdownShadows: showShadowKnob == true ? null : [], onTapOutside: () => _handleDropdownTapOutside(), content: ConstrainedBox( constraints: const BoxConstraints(maxHeight: 200), child: ScrollConfiguration( behavior: const ScrollBehavior().copyWith(scrollbars: false), child: _filteredOptionsList.isEmpty ? const MoonMenuItem( label: Text('No results found.'), ) : ClipRRect( borderRadius: borderRadius ?? BorderRadius.zero, child: ListView.builder( shrinkWrap: true, clipBehavior: Clip.none, padding: EdgeInsets.zero, itemCount: _filteredOptionsList.length, itemBuilder: (BuildContext _, int index) { if (index >= _filteredOptionsList.length) { return const SizedBox.shrink(); } final Component option = _filteredOptionsList[index]; return MoonMenuItem( onTap: () => _handleSelect(option), label: Text(option.name), ); }, ), ), ), ), child: MoonTextInput( enabled: enabledKnob, hasFloatingLabel: hasFloatingLabelKnob, width: 270, focusNode: _focusNode, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, backgroundColor: backgroundColor, hoverBorderColor: hoverBorderColor, borderRadius: borderRadius, textInputSize: textInputSizeKnob, hintText: "Select single component", controller: _searchController, onTap: () => _performSearch(), onTapOutside: (PointerDownEvent _) => _handleInputTapOutside(), onChanged: (String _) => _performSearch(), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, hoverEffectColor: Colors.transparent, onTap: () => _showAllOptionsList(), icon: AnimatedRotation( duration: const Duration(milliseconds: 200), turns: _showDropdown ? -0.5 : 0, child: const Icon(MoonIcons.controls_chevron_down_16_light), ), ), ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/composites/search_with_dropdown.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/component_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; enum _Section { input, dropdown } class SearchWithDropdownStory extends StatefulWidget { static const path = '/composites/search/search_with_dropdown'; const SearchWithDropdownStory({super.key}); @override State createState() => _SearchWithDropdownStoryState(); } class _SearchWithDropdownStoryState extends State { final TextEditingController _searchController = TextEditingController(); final List _optionsList = Component.values; List _filteredOptionsList = []; Component? _selectedOption; bool _showDropdown = false; bool get _optionIsSelected => _selectedOption?.name == _searchController.text; String get _inputValue => _searchController.text.trim().toLowerCase(); void _performSearch() { setState(() { if (!_optionIsSelected && _selectedOption != null) _selectedOption = null; _filteredOptionsList = _optionsList .where( (Component option) => option.name.toLowerCase().contains(_inputValue), ) .toList(); _showDropdown = true; }); } void _handleSelect(Component option) { setState(() { _showDropdown = false; _searchController.text = option.name; _selectedOption = option; FocusManager.instance.primaryFocus?.unfocus(); }); } void _handleClearButton() { setState(() { _searchController.clear(); _filteredOptionsList = _optionsList; }); } void _handleDropdownTapOutside() { setState(() { _showDropdown = false; if (!_optionIsSelected) _searchController.clear(); FocusManager.instance.primaryFocus?.unfocus(); }); } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextInput active border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonTextInput inactive border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; final hoverBorderColorKnob = context.knobs.nullable.options( label: "hoverBorderColor", description: "MoonColors variants for MoonTextInput border on hover.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hoverBorderColor = colorTable(context)[hoverBorderColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextInput background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTextInput and MoonDropdown", enabled: false, initial: 8, max: 32, ); final distanceToTargetKnob = context.knobs.nullable.slider( label: "distanceToTarget", description: "Distance to target child widget.", enabled: false, initial: 8, max: 100, ); final showShadowKnob = context.knobs.boolean( label: "Show shadow", description: "Show shadows for MoonDropdown.", initial: true, ); final enabledKnob = context.knobs.boolean( label: "enabled", description: "Switch between MoonTextInput enabled and disabled states.", initial: true, ); final hasFloatingLabelKnob = context.knobs.boolean( label: "hasFloatingLabel", description: "Whether MoonTextInput has floating label.", ); BorderRadiusGeometry? getBorderRadius(_Section variant) { final double borderRadiusValue = borderRadiusKnob != null ? borderRadiusKnob.toDouble() : 8; return (distanceToTargetKnob == null || distanceToTargetKnob == 0) && _showDropdown && enabledKnob ? BorderRadius.vertical( top: Radius.circular( variant == _Section.input ? borderRadiusValue : 0, ), bottom: Radius.circular( variant == _Section.dropdown ? borderRadiusValue : 0, ), ) : BorderRadius.circular(borderRadiusValue); } return Padding( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16), child: Stack( children: [ LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return MoonDropdown( show: _showDropdown && enabledKnob, constrainWidthToChild: true, distanceToTarget: distanceToTargetKnob ?? 0, backgroundColor: backgroundColor, borderRadius: getBorderRadius(_Section.dropdown), decoration: BoxDecoration( color: context.moonColors!.goku, borderRadius: getBorderRadius(_Section.dropdown), boxShadow: showShadowKnob == true ? const [ BoxShadow( color: Color(0x28000000), blurRadius: 6, offset: Offset(0, 6), spreadRadius: -6, ), ] : [], border: Border( left: BorderSide(color: context.moonColors!.beerus), right: BorderSide(color: context.moonColors!.beerus), bottom: BorderSide(color: context.moonColors!.beerus), top: distanceToTargetKnob == null || distanceToTargetKnob == 0 ? BorderSide.none : BorderSide(color: context.moonColors!.beerus), ), ), onTapOutside: () => _handleDropdownTapOutside(), content: LayoutBuilder( builder: (context, constraints) { return ConstrainedBox( constraints: const BoxConstraints(maxHeight: 300), child: ScrollConfiguration( behavior: const ScrollBehavior().copyWith(scrollbars: false), child: _filteredOptionsList.isEmpty ? const MoonMenuItem( label: Text('No results found.'), ) : ClipRRect( borderRadius: getBorderRadius(_Section.dropdown) ?? BorderRadius.zero, child: ListView.builder( shrinkWrap: true, clipBehavior: Clip.none, padding: EdgeInsets.zero, itemCount: _filteredOptionsList.length, itemBuilder: (BuildContext _, int index) { if (index >= _filteredOptionsList.length) { return const SizedBox.shrink(); } final Component option = _filteredOptionsList[index]; return MoonMenuItem( onTap: () => _handleSelect(option), label: Text(option.name), ); }, ), ), ), ); }, ), child: MoonTextInput( enabled: enabledKnob, width: constraints.maxWidth, hasFloatingLabel: hasFloatingLabelKnob, activeBorderColor: activeBorderColor ?? context.moonColors!.beerus, inactiveBorderColor: inactiveBorderColor, backgroundColor: backgroundColor, hoverBorderColor: hoverBorderColor, borderRadius: getBorderRadius(_Section.input), hintText: "Search components", controller: _searchController, onTap: () => _performSearch(), onChanged: (String _) => _performSearch(), leading: const Icon(MoonIcons.generic_search_24_light), trailing: MoonButton( padding: EdgeInsets.zero, hoverEffectColor: Colors.transparent, onTap: () => _handleClearButton(), label: Text( 'Clear', style: TextStyle(color: context.moonColors!.trunks), ), ), ), ); }, ), if (!_showDropdown) const Align( child: Text('Search results displayed within MoonDropdown.'), ), ], ), ); } } ================================================ FILE: example/lib/src/storybook/stories/composites/search_with_list.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/component_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class SearchWithListStory extends StatefulWidget { static const subdirectory = '/search'; static const path = '/composites/search/search_with_list'; const SearchWithListStory({super.key}); @override State createState() => _SearchWithListStoryState(); } class _SearchWithListStoryState extends State { final TextEditingController _searchController = TextEditingController(); final List _optionsList = Component.values; List _filteredOptionsList = []; bool _showSearchResults = false; String get _inputValue => _searchController.text.trim().toLowerCase(); void _performSearch() { setState(() { _filteredOptionsList = _optionsList .where( (Component option) => option.name.toLowerCase().contains(_inputValue), ) .toList(); _showSearchResults = true; }); } void _handleClearButton() { setState(() { _searchController.clear(); _filteredOptionsList = _optionsList; }); } void _handleCloseButton() { setState(() { _searchController.clear(); _showSearchResults = false; FocusManager.instance.primaryFocus?.unfocus(); }); } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final textInputSizeKnob = context.knobs.nullable.options( label: "textInputSize", description: "Size variants for MoonTextInput.", enabled: false, initial: MoonTextInputSize.md, options: const [ Option(label: "sm", value: MoonTextInputSize.sm), Option(label: "md", value: MoonTextInputSize.md), Option(label: "lg", value: MoonTextInputSize.lg), Option(label: "xl", value: MoonTextInputSize.xl), ], ); final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextInput active border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonTextInput inactive border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; final hoverBorderColorKnob = context.knobs.nullable.options( label: "hoverBorderColor", description: "MoonColors variants for MoonTextInput border on hover.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hoverBorderColor = colorTable(context)[hoverBorderColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextInput background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTextInput", enabled: false, initial: 8, max: 32, ); final enabledKnob = context.knobs.boolean( label: "enabled", description: "Switch between MoonTextInput enabled and disabled states.", initial: true, ); final hasFloatingLabelKnob = context.knobs.boolean( label: "hasFloatingLabel", description: "Whether MoonTextInput has floating label.", ); return Padding( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Stack( children: [ Column( children: [ MoonTextInput( enabled: enabledKnob, hasFloatingLabel: hasFloatingLabelKnob, activeBorderColor: activeBorderColor ?? context.moonColors!.beerus, inactiveBorderColor: inactiveBorderColor, backgroundColor: backgroundColor, hoverBorderColor: hoverBorderColor, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, textInputSize: textInputSizeKnob, hintText: "Search components", controller: _searchController, onTap: () => _performSearch(), onChanged: (String _) => _performSearch(), leading: const Icon(MoonIcons.generic_search_24_light), trailing: Row( children: [ MoonButton( padding: const EdgeInsetsDirectional.only(end: 8), hoverEffectColor: Colors.transparent, onTap: () => _handleClearButton(), label: Text( 'Clear', style: TextStyle(color: context.moonColors!.trunks), ), ), SizedBox( height: 16, child: VerticalDivider( width: 8, color: context.moonColors!.beerus, ), ), MoonButton.icon( buttonSize: MoonButtonSize.xs, hoverEffectColor: Colors.transparent, onTap: () => _handleCloseButton(), icon: const Icon(MoonIcons.controls_close_16_light), ), ], ), ), if (_showSearchResults && _filteredOptionsList.isNotEmpty && enabledKnob) Expanded( child: ScrollConfiguration( behavior: const ScrollBehavior().copyWith(scrollbars: false), child: ListView.builder( shrinkWrap: true, padding: const EdgeInsets.only(top: 8.0), itemCount: _filteredOptionsList.length, itemBuilder: (BuildContext _, int index) { if (index >= _filteredOptionsList.length) { return const SizedBox.shrink(); } final Component option = _filteredOptionsList[index]; return MoonMenuItem( hoverEffectColor: Colors.transparent, onTap: () => {}, label: Text(option.name), ); }, ), ), ), ], ), if (_showSearchResults && _filteredOptionsList.isEmpty && enabledKnob) const Align( child: Text('No results found.'), ), if (!_showSearchResults) const Align( child: Text('Search results displayed as a list.'), ), ], ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/accordion.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; enum AccordionItems { first, second } class AccordionStory extends StatefulWidget { static const path = '/primitives/accordion'; const AccordionStory({super.key}); @override State createState() => _AccordionStoryState(); } class _AccordionStoryState extends State { AccordionItems? _currentlyOpenAccordionItem = AccordionItems.first; @override Widget build(BuildContext context) { final accordionSizeKnob = context.knobs.nullable.options( label: "accordionSize", description: "Size variants for MoonAccordion.", enabled: false, initial: MoonAccordionSize.md, options: const [ Option(label: "sm", value: MoonAccordionSize.sm), Option(label: "md", value: MoonAccordionSize.md), Option(label: "lg", value: MoonAccordionSize.lg), Option(label: "xl", value: MoonAccordionSize.xl), ], ); final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonAccordion header text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final expandedTextColorKnob = context.knobs.nullable.options( label: "expandedTextColor", description: "MoonColors variants for expanded MoonAccordion header text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final expandedTextColor = colorTable(context)[expandedTextColorKnob ?? 40]; final contentTextColorKnob = context.knobs.nullable.options( label: "Content text color", description: "MoonColors variants for MoonAccordion content text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final contentTextColor = colorTable(context)[contentTextColorKnob ?? 40]; final iconColorKnob = context.knobs.nullable.options( label: "iconColor", description: "MoonColors variants for MoonAccordion icon.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final iconColor = colorTable(context)[iconColorKnob ?? 40]; final expandedIconColorKnob = context.knobs.nullable.options( label: "expandedIconColor", description: "MoonColors variants for expanded MoonAccordion icon.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final expandedIconColor = colorTable(context)[expandedIconColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonAccordion background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final expandedBackgroundColorKnob = context.knobs.nullable.options( label: "expandedBackgroundColor", description: "MoonColors variants for expanded MoonAccordion background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final expandedBackgroundColor = colorTable(context)[expandedBackgroundColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonAccordion border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final dividerColorKnob = context.knobs.nullable.options( label: "dividerColor", description: "MoonColors variants for expanded MoonAccordion divider.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final dividerColor = colorTable(context)[dividerColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonAccordion.", enabled: false, initial: 8, max: 32, ); final showBorderKnob = context.knobs.boolean( label: "showBorder", description: "Show border for MoonAccordion.", ); final showDividerKnob = context.knobs.boolean( label: "showDivider", description: "Show divider between MoonAccordion header and body.", initial: true, ); final showShadowKnob = context.knobs.boolean( label: "Show shadows", description: "Show shadows for MoonAccordion.", initial: true, ); const String contentText = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do " "eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim " "ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " "aliquip ex ea commodo consequat. Duis aute irure dolor in " "reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla " "pariatur. Excepteur sint occaecat cupidatat non proident, sunt in " "culpa qui officia deserunt mollit anim id est laborum."; final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return ListView( clipBehavior: Clip.none, padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), children: [ const TextDivider( text: "Grouped MoonAccordion", paddingTop: 0, ), MoonAccordion( identityValue: AccordionItems.first, groupIdentityValue: _currentlyOpenAccordionItem, accordionSize: accordionSizeKnob, textColor: textColor, expandedTextColor: expandedTextColor, iconColor: iconColor, expandedIconColor: expandedIconColor, borderColor: borderColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, dividerColor: dividerColor, borderRadius: borderRadius, showBorder: showBorderKnob, showDivider: showDividerKnob, shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.all(12), onExpansionChanged: (AccordionItems? value) => setState(() => _currentlyOpenAccordionItem = value), leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("Grouped MoonAccordion item #1"), children: [ Text( contentText, style: TextStyle(color: contentTextColor), ), ], ), const SizedBox(height: 8), MoonAccordion( identityValue: AccordionItems.second, groupIdentityValue: _currentlyOpenAccordionItem, accordionSize: accordionSizeKnob, textColor: textColor, expandedTextColor: expandedTextColor, iconColor: iconColor, expandedIconColor: expandedIconColor, borderColor: borderColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, dividerColor: dividerColor, borderRadius: borderRadius, showBorder: showBorderKnob, showDivider: showDividerKnob, shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.all(12), onExpansionChanged: (AccordionItems? value) => setState(() => _currentlyOpenAccordionItem = value), leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("Grouped MoonAccordion item #2"), children: [ Text( contentText, style: TextStyle(color: contentTextColor), ), ], ), const TextDivider(text: "Ungrouped MoonAccordion with content outside"), MoonAccordion( accordionSize: accordionSizeKnob, initiallyExpanded: true, hasContentOutside: true, textColor: textColor, expandedTextColor: expandedTextColor, iconColor: iconColor, expandedIconColor: expandedIconColor, borderColor: borderColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, borderRadius: borderRadius, showBorder: showBorderKnob, shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.symmetric(vertical: 12), label: const Text("Ungrouped MoonAccordion item #1"), children: [ Text( contentText, style: TextStyle(color: contentTextColor), ), ], ), const SizedBox(height: 8), MoonAccordion( accordionSize: accordionSizeKnob, hasContentOutside: true, textColor: textColor, expandedTextColor: expandedTextColor, iconColor: iconColor, expandedIconColor: expandedIconColor, borderColor: borderColor, backgroundColor: backgroundColor, expandedBackgroundColor: expandedBackgroundColor, dividerColor: dividerColor, borderRadius: borderRadius, showBorder: showBorderKnob, shadows: showShadowKnob == true ? null : [], childrenPadding: const EdgeInsets.symmetric(vertical: 12), label: const Text("Ungrouped MoonAccordion item #2"), children: [ Text( contentText, style: TextStyle(color: contentTextColor), ), ], ), ], ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/alert.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class AlertStory extends StatefulWidget { static const path = '/primitives/alert'; const AlertStory({super.key}); @override State createState() => _AlertStoryState(); } class _AlertStoryState extends State { bool _showAlert = true; @override Widget build(BuildContext context) { final leadingColorKnob = context.knobs.nullable.options( label: "Leading Color", description: "MoonColors variants for MoonAlert leading slot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final leadingColor = colorTable(context)[leadingColorKnob ?? 40]; final labelColorKnob = context.knobs.nullable.options( label: "Label color", description: "MoonColors variants for MoonAlert label slot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final labelColor = colorTable(context)[labelColorKnob ?? 40]; final trailingColorKnob = context.knobs.nullable.options( label: "Trailing color", description: "MoonColors variants for MoonAlert trailing slot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final trailingColor = colorTable(context)[trailingColorKnob ?? 40]; final contentColorKnob = context.knobs.nullable.options( label: "Content color", description: "MoonColors variants for MoonAlert content slot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final contentColor = colorTable(context)[contentColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonAlert background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonAlert border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonAlert.", enabled: false, initial: 8, max: 32, ); final showBorderKnob = context.knobs.boolean( label: "showBorder", description: "Show border for MoonAlert.", ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonAlert leading slot.", initial: true, ); final showContentKnob = context.knobs.boolean( label: "content", description: "Show widget in MoonAlert content slot.", ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonAlert trailing slot.", initial: true, ); final showDisabledKnob = context.knobs.boolean( label: "Disabled", description: "MoonAlert onTrailingTap() is null.", ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 16), child: Column( children: [ const TextDivider( text: "Base MoonAlert", paddingTop: 0, ), Column( mainAxisAlignment: MainAxisAlignment.center, children: [ MoonAlert( show: _showAlert, showBorder: showBorderKnob, borderColor: borderColor, backgroundColor: backgroundColor, borderRadius: borderRadius, leading: showLeadingKnob ? Icon( MoonIcons.other_frame_24_light, color: leadingColor, ) : null, label: SizedBox( height: 24, child: Align( alignment: AlignmentDirectional.centerStart, child: Text( "Base MoonAlert", style: TextStyle(color: labelColor), ), ), ), trailing: showTrailingKnob ? MoonButton.icon( buttonSize: MoonButtonSize.xs, borderRadius: borderRadius, disabledOpacityValue: 1, icon: Icon( MoonIcons.controls_close_small_24_light, color: trailingColor, size: 24, ), gap: 0, onTap: showDisabledKnob ? null : () => setState(() => _showAlert = !_showAlert), ) : null, content: showContentKnob ? SizedBox( height: 24, child: Align( alignment: AlignmentDirectional.centerStart, child: Text( "Here goes MoonAlert content", style: TextStyle(color: contentColor), ), ), ) : null, ), const SizedBox(height: 16), MoonFilledButton( label: const Text("Show/Hide MoonAlert"), backgroundColor: context.moonColors!.piccolo, onTap: () => setState(() => _showAlert = !_showAlert), ), ], ), const TextDivider(text: "Filled MoonAlert variant"), MoonAlert.filled( show: true, color: context.moonColors!.chichi, backgroundColor: context.moonColors!.chichi10, borderRadius: borderRadius, leading: showLeadingKnob ? const Icon(MoonIcons.notifications_alert_24_light) : null, label: const Text("Filled error MoonAlert"), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, borderRadius: borderRadius, gap: 0, onTap: () {}, icon: Icon( MoonIcons.controls_close_small_24_light, size: 24, color: context.moonColors!.chichi, ), ), content: showContentKnob ? const SizedBox( height: 24, child: Align( alignment: AlignmentDirectional.centerStart, child: Text("Here goes MoonAlert content"), ), ) : null, ), const SizedBox(height: 16), MoonAlert.filled( show: true, color: context.moonColors!.krillin, backgroundColor: context.moonColors!.krillin10, borderRadius: borderRadius, leading: showLeadingKnob ? const Icon(MoonIcons.generic_alarm_round_24_light) : null, label: const Text("Filled warning MoonAlert"), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, borderRadius: borderRadius, gap: 0, onTap: () {}, icon: Icon( MoonIcons.controls_close_small_24_light, size: 24, color: context.moonColors!.krillin, ), ), content: showContentKnob ? const SizedBox( height: 24, child: Align( alignment: AlignmentDirectional.centerStart, child: Text("Here goes MoonAlert content"), ), ) : null, ), const TextDivider(text: "Outlined MoonAlert variant"), MoonAlert.outlined( show: true, color: context.moonColors!.roshi, borderColor: context.moonColors!.roshi, borderRadius: borderRadius, leading: showLeadingKnob ? const Icon(MoonIcons.generic_check_rounded_24_light) : null, label: const Text("Outlined success MoonAlert"), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, borderRadius: borderRadius, gap: 0, onTap: () {}, icon: Icon( MoonIcons.controls_close_small_24_light, size: 24, color: context.moonColors!.roshi, ), ), content: showContentKnob ? const SizedBox( height: 24, child: Align( alignment: AlignmentDirectional.centerStart, child: Text("Here goes MoonAlert content"), ), ) : null, ), const SizedBox(height: 16), MoonAlert.outlined( show: true, color: context.moonColors!.whis, borderColor: context.moonColors!.whis, borderRadius: borderRadius, leading: showLeadingKnob ? const Icon(MoonIcons.notifications_alert_24_light) : null, label: const Text('Outlined info MoonAlert'), trailing: MoonButton.icon( buttonSize: MoonButtonSize.xs, borderRadius: borderRadius, gap: 0, onTap: () {}, icon: Icon( MoonIcons.controls_close_small_24_light, size: 24, color: context.moonColors!.whis, ), ), content: showContentKnob ? const SizedBox( height: 24, child: Align( alignment: AlignmentDirectional.centerStart, child: Text("Here goes MoonAlert content"), ), ) : null, ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/auth_code.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class AuthCodeStory extends StatelessWidget { static const path = '/primitives/auth_code'; const AuthCodeStory({super.key}); @override Widget build(BuildContext context) { final mainAxisAlignmentKnob = context.knobs.nullable.options( label: "mainAxisAlignment", description: "Horizontal alignment for MoonAuthCode input fields.", enabled: false, initial: MainAxisAlignment.center, options: const [ Option(label: "start", value: MainAxisAlignment.start), Option(label: "center", value: MainAxisAlignment.center), Option(label: "end", value: MainAxisAlignment.end), Option(label: "spaceBetween", value: MainAxisAlignment.spaceBetween), Option(label: "spaceAround", value: MainAxisAlignment.spaceAround), Option(label: "spaceEvenly", value: MainAxisAlignment.spaceEvenly), ], ); final shapeKnob = context.knobs.nullable.options( label: "shape", description: "Shape of MoonAuthCode input fields.", enabled: false, initial: AuthFieldShape.box, options: const [ Option(label: "box", value: AuthFieldShape.box), Option(label: "circle", value: AuthFieldShape.circle), Option(label: "underline", value: AuthFieldShape.underline), ], ); final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonAuthCode text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final cursorColorKnob = context.knobs.nullable.options( label: "authFieldCursorColor", description: "MoonColors variants for MoonAuthCode cursor.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final cursorColor = colorTable(context)[cursorColorKnob ?? 40]; final selectedFillColorKnob = context.knobs.nullable.options( label: "selectedFillColor", description: "MoonColors variants for MoonAuthCode selected input field.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final selectedFillColor = colorTable(context)[selectedFillColorKnob ?? 40]; final activeFillColorKnob = context.knobs.nullable.options( label: "activeFillColor", description: "MoonColors variants for MoonAuthCode active input field.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeFillColor = colorTable(context)[activeFillColorKnob ?? 40]; final inactiveFillColorKnob = context.knobs.nullable.options( label: "inactiveFillColor", description: "MoonColors variants for MoonAuthCode inactive input field.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveFillColor = colorTable(context)[inactiveFillColorKnob ?? 40]; final selectedBorderColorKnob = context.knobs.nullable.options( label: "selectedBorderColor", description: "MoonColors variants for MoonAuthCode selected input field border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final selectedBorderColor = colorTable(context)[selectedBorderColorKnob ?? 40]; final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonAuthCode active input field border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonAuthCode inactive input field border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonAuthCode input fields.", enabled: false, initial: 8, max: 32, ); final gapKnob = context.knobs.nullable.sliderInt( label: "gap", description: "Gap between MoonAuthCode input fields.", enabled: false, initial: 8, max: 12, ); final enableKnob = context.knobs.boolean( label: "enabled", description: "Enable MoonAuthCode.", ); final obscuringKnob = context.knobs.boolean( label: "obscureText", description: "Obscure MoonAuthCode input fields.", ); final peekWhenObscuringKnob = context.knobs.boolean( label: "peekWhenObscuring", description: "Peek when obscuring.", ); final errorAnimationKnob = context.knobs.boolean( label: "Error shake animation", description: "Show error with shake animation (ErrorAnimationType.shake).", ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( children: [ const TextDivider( text: "Disabled MoonAuthCode", paddingTop: 0, ), MoonAuthCode( enabled: enableKnob, enableInputFill: true, authInputFieldCount: 4, mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center, borderRadius: borderRadius, textStyle: TextStyle(color: textColor), authFieldCursorColor: cursorColor, selectedFillColor: selectedFillColor, activeFillColor: activeFillColor, inactiveFillColor: inactiveFillColor, selectedBorderColor: selectedBorderColor, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, gap: gapKnob?.toDouble(), authFieldShape: shapeKnob, obscureText: obscuringKnob, peekWhenObscuring: peekWhenObscuringKnob, validator: (String? value) => null, errorBuilder: (BuildContext context, String? errorText) => const SizedBox(), ), const TextDivider(text: "Active MoonAuthCode"), MoonAuthCode( autoFocus: true, enableInputFill: true, mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center, borderRadius: borderRadius, textStyle: TextStyle(color: textColor), authFieldCursorColor: cursorColor, selectedFillColor: selectedFillColor, activeFillColor: activeFillColor, inactiveFillColor: inactiveFillColor, selectedBorderColor: selectedBorderColor, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, gap: gapKnob?.toDouble(), authFieldShape: shapeKnob, obscureText: obscuringKnob, peekWhenObscuring: peekWhenObscuringKnob, validator: (String? value) => null, errorBuilder: (BuildContext context, String? errorText) => const SizedBox(), ), const TextDivider(text: "Error MoonAuthCode"), SizedBox( height: 95, child: MoonAuthCode( enableInputFill: true, authInputFieldCount: 4, mainAxisAlignment: mainAxisAlignmentKnob ?? MainAxisAlignment.center, errorAnimationType: errorAnimationKnob ? ErrorAnimationType.shake : ErrorAnimationType.noAnimation, borderRadius: borderRadius, textStyle: TextStyle(color: textColor), authFieldCursorColor: cursorColor, selectedFillColor: selectedFillColor, activeFillColor: activeFillColor, inactiveFillColor: inactiveFillColor, selectedBorderColor: selectedBorderColor, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, gap: gapKnob?.toDouble(), authFieldShape: shapeKnob, obscureText: obscuringKnob, peekWhenObscuring: peekWhenObscuringKnob, validator: (String? pin) { return (pin != null && pin != '0000' && pin.length == 4) ? 'The input must be exactly "0000".' : null; }, errorBuilder: (BuildContext context, String? errorText) { return Align( child: Padding( padding: const EdgeInsets.only(top: 8), child: Text(errorText ?? ''), ), ); }, ), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/avatar.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class AvatarStory extends StatelessWidget { static const path = '/primitives/avatar'; const AvatarStory({super.key}); @override Widget build(BuildContext context) { final customLabelTextKnob = context.knobs.text( label: "Content text", initial: "MD", ); final avatarSizeKnob = context.knobs.nullable.options( label: "avatarSize", description: "Size variants for MoonAvatar.", enabled: false, initial: MoonAvatarSize.md, options: const [ Option(label: "xs", value: MoonAvatarSize.xs), Option(label: "sm", value: MoonAvatarSize.sm), Option(label: "md", value: MoonAvatarSize.md), Option(label: "lg", value: MoonAvatarSize.lg), Option(label: "xl", value: MoonAvatarSize.xl), Option(label: "x2l", value: MoonAvatarSize.x2l), ], ); final avatarTextColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonAvatar text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[avatarTextColorKnob ?? 40]; final avatarBackgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonAvatar background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[avatarBackgroundColorKnob ?? 40]; final badgeColorKnob = context.knobs.nullable.options( label: "badgeColor", description: "MoonColors variants for MoonAvatar badge.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final badgeColor = colorTable(context)[badgeColorKnob ?? 40]; final avatarBadgeAlignmentKnob = context.knobs.nullable.options( label: "badgeAlignment", description: "Badge alignment for MoonAvatar.", enabled: false, initial: MoonBadgeAlignment.bottomRight, options: const [ Option(label: "topLeft", value: MoonBadgeAlignment.topLeft), Option(label: "topRight", value: MoonBadgeAlignment.topRight), Option(label: "bottomLeft", value: MoonBadgeAlignment.bottomLeft), Option(label: "bottomRight", value: MoonBadgeAlignment.bottomRight), ], ); final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonAvatar.", enabled: false, initial: 8, max: 32, ); final badgeMarginKnob = context.knobs.nullable.sliderInt( label: "badgeMarginValue", description: "Badge margin value for MoonAvatar.", enabled: false, initial: 4, max: 8, ); final badgeSizeKnob = context.knobs.nullable.sliderInt( label: "badgeSize", description: "Badge size for MoonAvatar.", enabled: false, initial: 8, max: 16, ); final showBadgeKnob = context.knobs.boolean( label: "showBadge", description: "Show MoonAvatar badge.", initial: true, ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const TextDivider( text: "MoonAvatar", paddingTop: 0, ), MoonAvatar( avatarSize: avatarSizeKnob, badgeSize: badgeSizeKnob?.toDouble(), borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, badgeMarginValue: badgeMarginKnob?.toDouble(), backgroundColor: backgroundColor, showBadge: showBadgeKnob, badgeColor: badgeColor, badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight, content: Padding( padding: const EdgeInsets.only(top: 1.0), child: Text( customLabelTextKnob, style: TextStyle(color: textColor), ), ), ), const TextDivider(text: "Custom MoonAvatar with image background"), MoonAvatar( avatarSize: avatarSizeKnob, badgeSize: badgeSizeKnob?.toDouble(), borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, badgeMarginValue: badgeMarginKnob?.toDouble(), backgroundColor: backgroundColor, showBadge: showBadgeKnob, badgeColor: badgeColor, badgeAlignment: avatarBadgeAlignmentKnob ?? MoonBadgeAlignment.bottomRight, backgroundImage: const AssetImage("assets/images/placeholder-640x359.png"), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/bottom_sheet.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class BottomSheetStory extends StatelessWidget { static const path = '/primitives/bottom_sheet'; const BottomSheetStory({super.key}); @override Widget build(BuildContext context) { final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonBottomSheet background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final barrierColorKnob = context.knobs.nullable.options( label: "barrierColor", description: "MoonColors variants for MoonBottomSheet barrier.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final barrierColor = colorTable(context)[barrierColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonBottomSheet.", enabled: false, initial: 8, max: 32, ); final heightKnob = context.knobs.nullable.slider( label: "height", description: "Height of MoonBottomSheet.", enabled: false, initial: 0.64, min: 0.1, ); final closeProgressThresholdKnob = context.knobs.nullable.slider( label: "closeProgressThreshold", description: "Close progress threshold for MoonBottomSheet.", enabled: false, initial: 0.6, ); Future bottomSheetBuilder(BuildContext context) { return showMoonModalBottomSheet( context: context, backgroundColor: backgroundColor, barrierColor: barrierColor, height: heightKnob != null ? MediaQuery.of(context).size.height * heightKnob : MediaQuery.of(context).size.height * 0.7, closeProgressThreshold: closeProgressThresholdKnob, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, builder: (BuildContext context) => Column( children: [ Container( height: 4, width: 40, margin: const EdgeInsets.symmetric(vertical: 8), decoration: ShapeDecoration( color: context.moonColors!.beerus, shape: const StadiumBorder(), ), ), Row( children: [ const SizedBox(width: 48), Expanded( child: Center( child: Text( 'Pick your choice!', style: MoonTypography.typography.body.text16, ), ), ), SizedBox( width: 48, height: 48, child: Align( alignment: Alignment.centerLeft, child: MoonButton.icon( icon: const Icon(MoonIcons.controls_close_small_16_light), buttonSize: MoonButtonSize.sm, backgroundColor: context.moonColors!.beerus, borderRadius: BorderRadius.circular(24), onTap: () => Navigator.of(context).pop(), ), ), ), ], ), Divider( height: 0, thickness: 1, color: context.moonColors!.beerus, ), Expanded( child: ListView.builder( primary: true, itemCount: 100, padding: EdgeInsets.zero, itemBuilder: (BuildContext _, int index) => Padding( padding: const EdgeInsets.all(16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ const Text("Item nr:"), Text("$index"), ], ), ), ), ), ], ), ); } return Center( child: Builder( builder: (BuildContext context) { return MoonFilledButton( label: const Text("Tap me"), onTap: () => bottomSheetBuilder(context), ); }, ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/breadcrumb.dart ================================================ import 'dart:math'; import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class BreadcrumbStory extends StatefulWidget { static const path = '/primitives/breadcrumb'; const BreadcrumbStory({super.key}); @override State createState() => _BreadcrumbStoryState(); } class _BreadcrumbStoryState extends State { bool _showDropdown = false; @override Widget build(BuildContext context) { final itemColorKnob = context.knobs.nullable.options( label: "Item color", description: "MoonColors variants for MoonBreadcrumb item.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final itemColor = colorTable(context)[itemColorKnob ?? 40]; final currentItemColorKnob = context.knobs.nullable.options( label: "Current item color", description: "MoonColors variants for MoonBreadcrumb current item.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final currentItemColor = colorTable(context)[currentItemColorKnob ?? 40]; final hoverEffectColorKnob = context.knobs.nullable.options( label: "hoverEffectColor", description: "MoonColors variants for MoonBreadcrumb item on hover.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hoverEffectColor = colorTable(context)[hoverEffectColorKnob ?? 40]; final dividerColorKnob = context.knobs.nullable.options( label: "dividerColor", description: "MoonColors variants for MoonBreadcrumb divider.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final dividerColor = colorTable(context)[dividerColorKnob ?? 40]; final itemCountKnob = context.knobs.nullable.sliderInt( label: "Item count", description: "Total count of items for MoonBreadcrumb.", enabled: false, initial: 7, max: 12, ); final visibleItemCountKnob = context.knobs.nullable.sliderInt( label: "visibleItemCount", description: "Number of items to display for MoonBreadcrumb.", enabled: false, initial: 3, max: 12, ); final gapKnob = context.knobs.nullable.sliderInt( label: "gap", description: "Gap between MoonBreadcrumb items.", enabled: false, initial: 8, max: 16, ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonBreadcrumb item leading slot.", ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonBreadcrumb item trailing slot.", ); final List breadcrumbItems = List.generate( itemCountKnob ?? 7, (int index) { final bool isHomePage = index == 0; return MoonBreadcrumbItem( semanticLabel: index.toString(), onTap: () => MoonToast.show( context, displayDuration: const Duration(seconds: 1), label: Text(isHomePage ? 'Home Page' : 'Page $index'), ), leading: showLeadingKnob && isHomePage ? const Icon( MoonIcons.generic_home_16_light, size: 16, ) : null, label: Text(isHomePage ? 'Home' : 'Page $index'), trailing: showTrailingKnob && isHomePage ? const Icon( MoonIcons.generic_home_16_light, size: 16, ) : null, ); }, ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const TextDivider( text: "MoonBreadcrumb", paddingTop: 0, ), MoonBreadcrumb( visibleItemCount: visibleItemCountKnob ?? 3, gap: gapKnob?.toDouble(), padding: const EdgeInsets.symmetric(horizontal: 16), hoverEffectColor: hoverEffectColor, dividerColor: dividerColor, itemTextStyle: TextStyle(color: itemColor), currentItemTextStyle: TextStyle(color: currentItemColor), items: breadcrumbItems, ), const SizedBox(height: 32), MoonButton( backgroundColor: context.moonColors!.piccolo, onTap: () => setState(() => {}), label: Text( 'Reset', style: TextStyle(color: context.moonColors!.goten), ), ), const TextDivider(text: "Custom MoonBreadcrumb with MoonDropdown"), StatefulBuilder( builder: (BuildContext context, StateSetter setState) { return MoonBreadcrumb( visibleItemCount: visibleItemCountKnob ?? 3, gap: gapKnob?.toDouble(), padding: const EdgeInsets.symmetric(horizontal: 16), hoverEffectColor: hoverEffectColor, dividerColor: dividerColor, itemTextStyle: TextStyle(color: itemColor), currentItemTextStyle: TextStyle(color: currentItemColor), itemDecoration: BoxDecoration( borderRadius: BorderRadius.circular(8), ), divider: Icon( Directionality.of(context) == TextDirection.ltr ? MoonIcons.controls_chevron_right_small_16_light : MoonIcons.controls_chevron_left_small_16_light, ), showMoreWidget: MoonBreadcrumbItem( onTap: () => setState(() => _showDropdown = !_showDropdown), label: MoonDropdown( maxHeight: 250, maxWidth: 150, show: _showDropdown, onTapOutside: () => setState(() => _showDropdown = false), content: ListView( shrinkWrap: true, padding: EdgeInsets.zero, children: List.generate( max( (itemCountKnob ?? 7) - (visibleItemCountKnob ?? 3), 0, ), (int index) => MoonMenuItem( onTap: () => MoonToast.show( context, displayDuration: const Duration(seconds: 1), label: Text('Page ${index + 1}'), ), label: Text('Page ${index + 1}'), ), ), ), child: const Icon( MoonIcons.generic_burger_regular_16_light, ), ), ), items: breadcrumbItems, ); }, ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/button.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class ButtonStory extends StatelessWidget { static const path = '/primitives/button'; const ButtonStory({super.key}); @override Widget build(BuildContext context) { final customLabelTextKnob = context.knobs.text( label: "Label text", initial: "MoonButton", ); final buttonSizeKnob = context.knobs.nullable.options( label: "buttonSize", description: "Size variants for MoonButton.", enabled: false, initial: MoonButtonSize.md, options: const [ Option(label: "xs", value: MoonButtonSize.xs), Option(label: "sm", value: MoonButtonSize.sm), Option(label: "md", value: MoonButtonSize.md), Option(label: "lg", value: MoonButtonSize.lg), Option(label: "xl", value: MoonButtonSize.xl), ], ); final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for base MoonButton background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonButton border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonButton text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for base MoonButton.", enabled: false, initial: 8, max: 32, ); final showBorderKnob = context.knobs.boolean( label: "showBorder", description: "Show border for base MoonButton.", initial: true, ); final showPulseEffectKnob = context.knobs.boolean( label: "showPulseEffect", description: "Show pulse animation.", ); final showPulseEffectJiggleKnob = context.knobs.boolean( label: "showPulseEffectJiggle", description: "Show jiggling with pulse animation.", ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonButton leading slot.", initial: true, ); final showLabelKnob = context.knobs.boolean( label: "label", description: "Show widget in MoonButton label slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonButton trailing slot.", ); final setFullWidthKnob = context.knobs.boolean( label: "isFullWidth", description: "Set MoonButton to full width.", ); final isDisabledKnob = context.knobs.boolean( label: "Disabled", description: "MoonButton onTap() or onLongPress() is null.", ); IconData resolveIconVariant(MoonButtonSize? buttonSize) { switch (buttonSize) { case MoonButtonSize.xs: return MoonIcons.other_frame_16_light; case MoonButtonSize.sm: return MoonIcons.other_frame_24_light; case MoonButtonSize.md: return MoonIcons.other_frame_24_light; case MoonButtonSize.lg: return MoonIcons.other_frame_24_light; case MoonButtonSize.xl: return MoonIcons.other_frame_24_light; default: return MoonIcons.other_frame_24_light; } } final IconData resolvedIconVariant = resolveIconVariant(buttonSizeKnob); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( children: [ const TextDivider( text: "Base and icon MoonButton", paddingTop: 0, ), MoonButton( onTap: isDisabledKnob ? null : () {}, borderRadius: borderRadius, showBorder: showBorderKnob, buttonSize: buttonSizeKnob, isFullWidth: setFullWidthKnob, backgroundColor: backgroundColor, borderColor: borderColor, textColor: textColor, showPulseEffect: showPulseEffectKnob, showPulseEffectJiggle: showPulseEffectJiggleKnob, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, label: showLabelKnob ? Text(customLabelTextKnob) : null, trailing: showTrailingKnob ? Icon(resolvedIconVariant) : null, ), const SizedBox(height: 32), MoonButton.icon( onTap: isDisabledKnob ? null : () {}, borderRadius: borderRadius, showBorder: showBorderKnob, buttonSize: buttonSizeKnob, backgroundColor: backgroundColor, iconColor: textColor, borderColor: borderColor, showPulseEffect: showPulseEffectKnob, showPulseEffectJiggle: showPulseEffectJiggleKnob, icon: showLeadingKnob ? Icon(resolvedIconVariant) : null, ), const TextDivider(text: "MoonButton variants"), MoonFilledButton( onTap: isDisabledKnob ? null : () {}, buttonSize: buttonSizeKnob, isFullWidth: setFullWidthKnob, showPulseEffect: showPulseEffectKnob, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, label: showLabelKnob ? const Text("MoonFilledButton") : null, trailing: showTrailingKnob ? Icon(resolvedIconVariant) : null, ), const SizedBox(height: 32), MoonOutlinedButton( onTap: isDisabledKnob ? null : () {}, buttonSize: buttonSizeKnob, isFullWidth: setFullWidthKnob, showPulseEffect: showPulseEffectKnob, borderColor: borderColor, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, label: showLabelKnob ? const Text("MoonOutlinedButton") : null, trailing: showTrailingKnob ? Icon(resolvedIconVariant) : null, ), const SizedBox(height: 32), MoonTextButton( onTap: isDisabledKnob ? null : () {}, buttonSize: buttonSizeKnob, isFullWidth: setFullWidthKnob, showPulseEffect: showPulseEffectKnob, leading: showLeadingKnob ? Icon(resolvedIconVariant) : null, label: showLabelKnob ? const Text("MoonTextButton") : null, trailing: showTrailingKnob ? Icon(resolvedIconVariant) : null, ), const TextDivider( text: "Custom MoonButtons with non-standard children", ), MoonButton( onTap: isDisabledKnob ? null : () {}, height: 40, padding: const EdgeInsets.symmetric(horizontal: 8), showFocusEffect: false, decoration: const ShapeDecoration( image: DecorationImage( image: AssetImage("assets/images/placeholder-640x359.png"), fit: BoxFit.cover, ), shape: RoundedRectangleBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(20), bottomRight: Radius.circular(20), ), ), ), leading: Container( width: 24, height: 24, padding: const EdgeInsets.all(4), child: CircularProgressIndicator( strokeWidth: 2, color: context.moonColors!.popo, ), ), ), const SizedBox(height: 32), MoonButton( onTap: isDisabledKnob ? null : () {}, height: 72, padding: const EdgeInsets.symmetric(horizontal: 8), showFocusEffect: false, decoration: ShapeDecorationWithPremultipliedAlpha( shadows: const [ BoxShadow( blurRadius: 3, offset: Offset(0, 2), ), ], gradient: LinearGradient( begin: Alignment.topLeft, end: Alignment.bottomRight, colors: [ context.moonColors!.krillin, context.moonColors!.dodoria, ], ), shape: const StarBorder( pointRounding: 0.5, valleyRounding: 0.5, ), ), label: SizedBox( width: 32, height: 32, child: CircleAvatar( backgroundColor: context.moonColors!.frieza60, child: const Icon( MoonIcons.other_rocket_24_light, size: 24, color: Colors.white, ), ), ), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/carousel.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class CarouselStory extends StatefulWidget { static const path = '/primitives/carousel'; const CarouselStory({super.key}); @override State createState() => _CarouselStoryState(); } class _CarouselStoryState extends State { MoonCarouselScrollController carouselController = MoonCarouselScrollController(); int selectedDot = 0; @override Widget build(BuildContext context) { final backgroundColorKnob = context.knobs.nullable.options( label: "Background color", description: "MoonColors variants for MoonCarousel item background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final itemExtentKnob = context.knobs.nullable.sliderInt( label: "itemExtent", description: "Extent for MoonCarousel item.", enabled: false, initial: 114, min: 1, max: MediaQuery.of(context).size.width.round(), ); final gapKnob = context.knobs.nullable.sliderInt( label: "gap", description: "Gap between MoonCarousel items.", enabled: false, initial: 8, max: 64, ); final anchorKnob = context.knobs.nullable.slider( label: "anchor", description: "Anchor placement for MoonCarousel.", enabled: false, initial: 0.04, ); final velocityFactorKnob = context.knobs.nullable.slider( label: "velocityFactor", description: "Velocity factor for MoonCarousel.", enabled: false, min: 0.1, initial: 0.5, ); final autoPlayKnob = context.knobs.boolean( label: "autoPlay", description: "Whether MoonCarousel is auto playing.", ); final isCenteredKnob = context.knobs.boolean( label: "isCentered", description: "Whether MoonCarousel items are centered.", ); final isLoopedKnob = context.knobs.boolean( label: "loop", description: "Whether MoonCarousel is looped (infinite scroll).", ); final clampMaxExtentKnob = context.knobs.boolean( label: "clampMaxExtent", description: "Whether to clamp the maxExtent of MoonCarousel.", initial: true, ); return Center( child: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { return SingleChildScrollView( padding: const EdgeInsets.symmetric( vertical: 64.0, horizontal: 16.0, ), child: Column( children: [ const TextDivider( text: "MoonCarousel", paddingTop: 0, ), SizedBox( height: 114, child: OverflowBox( maxWidth: constraints.maxWidth, child: MoonCarousel( gap: gapKnob?.toDouble() ?? 8, velocityFactor: velocityFactorKnob ?? 0.5, loop: isLoopedKnob, autoPlay: autoPlayKnob, isCentered: isCenteredKnob, itemCount: 10, itemExtent: itemExtentKnob?.toDouble() ?? 114, anchor: anchorKnob ?? 16 / (constraints.maxWidth - 16), clampMaxExtent: clampMaxExtentKnob, itemBuilder: ( BuildContext context, int itemIndex, int _, ) => Container( decoration: ShapeDecoration( color: backgroundColor ?? context.moonColors!.goku, shape: MoonSquircleBorder( borderRadius: BorderRadius.circular(12) .squircleBorderRadius(context), ), ), child: Center( child: Text("${itemIndex + 1}"), ), ), ), ), ), const TextDivider(text: "Custom MoonCarousel with extras"), Column( children: [ SizedBox( height: 180, child: OverflowBox( maxWidth: constraints.maxWidth, child: Stack( children: [ MoonCarousel( gap: 64, itemCount: 5, itemExtent: constraints.maxWidth - 64, loop: isLoopedKnob, autoPlay: autoPlayKnob, controller: carouselController, physics: const PageScrollPhysics(), onIndexChanged: (int index) => setState(() => selectedDot = index), itemBuilder: ( BuildContext context, int itemIndex, int _, ) => Container( decoration: ShapeDecoration( color: backgroundColor ?? context.moonColors!.goku, shape: MoonSquircleBorder( borderRadius: BorderRadius.circular(12) .squircleBorderRadius(context), ), ), child: Center( child: Text("${itemIndex + 1}"), ), ), ), Align( child: Padding( padding: const EdgeInsets.symmetric( horizontal: 16.0, ), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ MoonButton.icon( buttonSize: MoonButtonSize.sm, showBorder: true, icon: Icon( Directionality.of(context) == TextDirection.ltr ? MoonIcons .controls_chevron_left_small_24_light : MoonIcons .controls_chevron_right_small_24_light, ), decoration: ShapeDecorationWithPremultipliedAlpha( color: context.moonColors!.goku, shadows: context.moonShadows!.sm, shape: MoonSquircleBorder( borderRadius: BorderRadius.circular(8) .squircleBorderRadius(context), ), ), onTap: selectedDot == 0 && !isLoopedKnob ? null : () => carouselController.previousItem(), ), MoonButton.icon( buttonSize: MoonButtonSize.sm, showBorder: true, icon: Icon( Directionality.of(context) == TextDirection.ltr ? MoonIcons .controls_chevron_right_small_24_light : MoonIcons .controls_chevron_left_small_24_light, ), decoration: ShapeDecorationWithPremultipliedAlpha( color: context.moonColors!.goku, shadows: context.moonShadows!.sm, shape: MoonSquircleBorder( borderRadius: BorderRadius.circular(8) .squircleBorderRadius(context), ), ), onTap: selectedDot == 4 && !isLoopedKnob ? null : () => carouselController.nextItem(), ), ], ), ), ), ], ), ), ), const SizedBox(height: 16), MoonDotIndicator( selectedDot: selectedDot, dotCount: 5, ), ], ), ], ), ); }, ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/checkbox.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class CheckboxStory extends StatefulWidget { static const path = '/primitives/checkbox'; const CheckboxStory({super.key}); @override State createState() => _CheckboxStoryState(); } class _CheckboxStoryState extends State { bool? checkboxValue = false; bool? checkboxWithLabelValue = false; @override Widget build(BuildContext context) { final checkColorKnob = context.knobs.nullable.options( label: "checkColor", description: "MoonColors variants for MoonCheckbox check icon.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final checkColor = colorTable(context)[checkColorKnob ?? 40]; final activeColorKnob = context.knobs.nullable.options( label: "activeColor", description: "MoonColors variants for checked MoonCheckbox.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeColor = colorTable(context)[activeColorKnob ?? 40]; final inactiveColorKnob = context.knobs.nullable.options( label: "inactiveColor", description: "MoonColors variants for unchecked MoonCheckbox.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveColor = colorTable(context)[inactiveColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for unchecked MoonCheckbox border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final isTristateKnob = context.knobs.boolean( label: "tristate", description: "Whether MoonCheckbox uses tristate.", ); final isDisabledKnob = context.knobs.boolean( label: "Disabled", description: "MoonCheckbox onChanged() is null.", ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const TextDivider( text: "MoonCheckbox", paddingTop: 0, ), MoonCheckbox( activeColor: activeColor, inactiveColor: inactiveColor, checkColor: checkColor, borderColor: borderColor, tristate: isTristateKnob, value: checkboxValue, onChanged: isDisabledKnob ? null : (bool? newValue) => setState(() => checkboxValue = newValue), ), const TextDivider(text: "MoonCheckbox with label"), MoonMenuItem( absorbGestures: true, onTap: isDisabledKnob ? null : () => setState( () => switch (checkboxWithLabelValue) { true when isTristateKnob => checkboxWithLabelValue = null, false when isTristateKnob => checkboxWithLabelValue = true, null => checkboxWithLabelValue = false, _ => checkboxWithLabelValue = !checkboxWithLabelValue!, }, ), label: const Text("With label"), trailing: MoonCheckbox( activeColor: activeColor, inactiveColor: inactiveColor, checkColor: checkColor, tristate: isTristateKnob, value: checkboxWithLabelValue, tapAreaSizeValue: 0, onChanged: isDisabledKnob ? null : (_) {}, ), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/chip.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class ChipStory extends StatelessWidget { static const path = '/primitives/chip'; const ChipStory({super.key}); @override Widget build(BuildContext context) { final customLabelTextKnob = context.knobs.text( label: "Label text", initial: "MoonChip", ); final chipSizeKnob = context.knobs.nullable.options( label: "chipSize", description: "Size variants for MoonChip.", enabled: false, initial: MoonChipSize.md, options: const [ Option(label: "sm", value: MoonChipSize.sm), Option(label: "md", value: MoonChipSize.md), ], ); final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonChip text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final activeColorKnob = context.knobs.nullable.options( label: "activeColor", description: "MoonColors variants for active MoonChip.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeColor = colorTable(context)[activeColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonChip background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final activeBackgroundColorKnob = context.knobs.nullable.options( label: "activeBackgroundColor", description: "MoonColors variants for active MoonChip background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBackgroundColor = colorTable(context)[activeBackgroundColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonChip border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonChip.", enabled: false, initial: 8, max: 32, ); final showBorderKnob = context.knobs.boolean( label: "showBorder", description: "Show border when hovered, focused or isActive is true.", ); final isActiveKnob = context.knobs.boolean( label: "isActive", description: "Whether MoonChip is active/selected.", ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonChip leading slot.", initial: true, ); final showLabelKnob = context.knobs.boolean( label: "label", description: "Show widget in MoonChip label slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonChip trailing slot.", ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( children: [ const TextDivider( text: "MoonChip", paddingTop: 0, ), MoonChip( activeColor: activeColor, borderColor: borderColor, backgroundColor: backgroundColor, activeBackgroundColor: activeBackgroundColor, textColor: textColor, isActive: isActiveKnob, borderRadius: borderRadius, showBorder: showBorderKnob, chipSize: chipSizeKnob, leading: showLeadingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, label: showLabelKnob ? Text(customLabelTextKnob) : null, trailing: showTrailingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, ), const TextDivider(text: "Text MoonChip"), MoonChip.text( activeBackgroundColor: activeBackgroundColor, borderColor: borderColor, textColor: textColor, isActive: isActiveKnob, borderRadius: borderRadius, showBorder: showBorderKnob, chipSize: chipSizeKnob, leading: showLeadingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, label: showLabelKnob ? Text(customLabelTextKnob) : null, trailing: showTrailingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, ), const TextDivider(text: "Custom MoonChip"), MoonChip( isActive: isActiveKnob, activeColor: context.moonColors!.dodoria, backgroundColor: context.moonColors!.krillin, activeBackgroundColor: context.moonColors!.chichi10, textColor: context.moonColors!.goten, borderWidth: 2, showBorder: showBorderKnob, chipSize: chipSizeKnob, leading: showLeadingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, label: showLabelKnob ? Text(customLabelTextKnob) : null, trailing: showTrailingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/circular_loader.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class CircularLoaderStory extends StatelessWidget { static const subdirectory = '/loader'; static const path = '/primitives/loader/circular_loader'; const CircularLoaderStory({super.key}); @override Widget build(BuildContext context) { final circularLoaderSizeKnob = context.knobs.nullable.options( label: "circularLoaderSize", description: "Size variants for CircularLoader.", enabled: false, initial: MoonCircularLoaderSize.md, options: const [ Option(label: "x2s", value: MoonCircularLoaderSize.x2s), Option(label: "xs", value: MoonCircularLoaderSize.xs), Option(label: "sm", value: MoonCircularLoaderSize.sm), Option(label: "md", value: MoonCircularLoaderSize.md), Option(label: "lg", value: MoonCircularLoaderSize.lg), ], ); final loaderColorKnob = context.knobs.nullable.options( label: "color", description: "MoonColors variants for CircularLoader.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final color = colorTable(context)[loaderColorKnob ?? 40]; final loaderBackgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for CircularLoader background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[loaderBackgroundColorKnob ?? 40]; final loaderStrokeCapKnob = context.knobs.nullable.options( label: "strokeCap", description: "Stroke gap for CircularLoader.", enabled: false, initial: StrokeCap.round, options: const [ Option(label: "round", value: StrokeCap.round), Option(label: "square", value: StrokeCap.square), Option(label: "butt", value: StrokeCap.butt), ], ); return Center( child: Padding( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: MoonCircularLoader( color: color, backgroundColor: backgroundColor, circularLoaderSize: circularLoaderSizeKnob, strokeCap: loaderStrokeCapKnob, ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/circular_progress.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class CircularProgressStory extends StatelessWidget { static const subdirectory = '/progress'; static const path = '/primitives/progress/circular_progress'; const CircularProgressStory({super.key}); @override Widget build(BuildContext context) { final circularProgressSizeKnob = context.knobs.nullable.options( label: "circularProgressSize", description: "Size variants for CircularProgress.", enabled: false, initial: MoonCircularProgressSize.md, options: const [ Option(label: "x2s", value: MoonCircularProgressSize.x2s), Option(label: "xs", value: MoonCircularProgressSize.xs), Option(label: "sm", value: MoonCircularProgressSize.sm), Option(label: "md", value: MoonCircularProgressSize.md), Option(label: "lg", value: MoonCircularProgressSize.lg), ], ); final circularProgressColorKnob = context.knobs.nullable.options( label: "color", description: "MoonColors variants for CircularProgress.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final color = colorTable(context)[circularProgressColorKnob ?? 40]; final circularProgressBackgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for CircularProgress background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[circularProgressBackgroundColorKnob ?? 40]; final circularProgressStrokeCapKnob = context.knobs.nullable.options( label: "strokeCap", description: "Stroke gap for CircularProgress.", enabled: false, initial: StrokeCap.round, options: const [ Option(label: "round", value: StrokeCap.round), Option(label: "square", value: StrokeCap.square), Option(label: "butt", value: StrokeCap.butt), ], ); final circularProgressValueKnob = context.knobs.slider( label: "value", description: "Value for CircularProgress.", initial: 0.75, ); return Center( child: Padding( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: MoonCircularProgress( value: circularProgressValueKnob, color: color, backgroundColor: backgroundColor, circularProgressSize: circularProgressSizeKnob, strokeCap: circularProgressStrokeCapKnob, ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/dot_indicator.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class DotIndicatorStory extends StatefulWidget { static const path = '/primitives/dot_indicator'; const DotIndicatorStory({super.key}); @override State createState() => _DotIndicatorStoryState(); } class _DotIndicatorStoryState extends State { int _selectedDot = 0; @override Widget build(BuildContext context) { final selectedColorKnob = context.knobs.nullable.options( label: "selectedColor", description: "MoonColors variants for MoonDotIndicator selected dot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final selectedColor = colorTable(context)[selectedColorKnob ?? 40]; final unselectedColorKnob = context.knobs.nullable.options( label: "unselectedColor", description: "MoonColors variants for MoonDotIndicator unselected dot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final unselectedColor = colorTable(context)[unselectedColorKnob ?? 40]; final sizeKnob = context.knobs.nullable.sliderInt( label: "size", description: "Dot size for MoonDotIndicator.", enabled: false, initial: 8, max: 32, ); final gapKnob = context.knobs.nullable.sliderInt( label: "gap", description: "Gap between MoonDotIndicator dots.", enabled: false, initial: 8, max: 32, ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ MoonDotIndicator( selectedDot: _selectedDot, dotCount: 4, size: sizeKnob?.toDouble(), gap: gapKnob?.toDouble(), selectedColor: selectedColor, unselectedColor: unselectedColor, ), const SizedBox(height: 32), Row( mainAxisAlignment: MainAxisAlignment.center, children: List.generate( 4, (int index) => Padding( padding: EdgeInsets.only(right: index != 3 ? 8.0 : 0), child: MoonFilledButton( label: Text("${index + 1}"), onTap: () => setState(() => _selectedDot = index), ), ), ), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/drawer.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class DrawerStory extends StatelessWidget { static const path = '/primitives/drawer'; const DrawerStory({super.key}); @override Widget build(BuildContext context) { final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonDrawer background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final barrierColorKnob = context.knobs.nullable.options( label: "barrierColor", description: "MoonColors variants for MoonDrawer barrier.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final barrierColor = colorTable(context)[barrierColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonDrawer.", enabled: false, initial: 8, max: 32, ); final drawerWidthKnob = context.knobs.nullable.sliderInt( label: "width", description: "Width for MoonDrawer.", enabled: false, initial: 200, max: MediaQuery.of(context).size.width.round(), ); return OverflowBox( maxHeight: MediaQuery.of(context).size.height, maxWidth: MediaQuery.of(context).size.width, child: Scaffold( drawerScrimColor: barrierColor, drawer: MoonDrawer( backgroundColor: backgroundColor, borderRadius: BorderRadiusDirectional.horizontal( end: Radius.circular(borderRadiusKnob?.toDouble() ?? 0), ), width: drawerWidthKnob?.toDouble() ?? MediaQuery.of(context).size.width * 0.8, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const Text("MoonDrawer"), const SizedBox(height: 32), Builder( builder: (BuildContext context) { return MoonFilledButton( label: const Text("Close"), onTap: () => Navigator.of(context).pop(), ); }, ), ], ), ), body: Center( child: Builder( builder: (BuildContext context) { return Padding( padding: const EdgeInsets.symmetric( vertical: 64.0, horizontal: 16.0, ), child: MoonFilledButton( label: const Text("Tap me"), onTap: () => Scaffold.of(context).openDrawer(), ), ); }, ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/dropdown.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; const String _groupId = "dropdown"; enum Choices { first, second, third; String get name { return switch (this) { Choices.first => "Choice #1", Choices.second => "Choice #2", Choices.third => "Choice #3", }; } } class DropdownStory extends StatefulWidget { static const path = '/primitives/dropdown'; const DropdownStory({super.key}); @override State createState() => _DropdownStoryState(); } class _DropdownStoryState extends State { final Map _availableChoices = { Choices.first: false, Choices.second: false, Choices.third: false, }; bool _showChoices = false; bool _showMenu = false; bool _showMenuInner = false; Color? _buttonColor; String _buttonName = "Piccolo"; @override Widget build(BuildContext context) { final dropdownAnchorPositionKnob = context.knobs.nullable.options( label: "dropdownAnchorPosition", description: "Anchor position variants for MoonDropdown on the child (target).", enabled: false, initial: MoonDropdownAnchorPosition.bottom, options: const [ Option(label: "top", value: MoonDropdownAnchorPosition.top), Option(label: "bottom", value: MoonDropdownAnchorPosition.bottom), Option(label: "left", value: MoonDropdownAnchorPosition.left), Option(label: "right", value: MoonDropdownAnchorPosition.right), Option(label: "topLeft", value: MoonDropdownAnchorPosition.topLeft), Option(label: "topRight", value: MoonDropdownAnchorPosition.topRight), Option( label: "bottomLeft", value: MoonDropdownAnchorPosition.bottomLeft, ), Option( label: "bottomRight", value: MoonDropdownAnchorPosition.bottomRight, ), Option(label: "vertical", value: MoonDropdownAnchorPosition.vertical), Option( label: "horizontal", value: MoonDropdownAnchorPosition.horizontal, ), ], ); final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonDropdown background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonDropdown border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonDropdown.", enabled: false, initial: 8, max: 32, ); final distanceToTargetKnob = context.knobs.nullable.slider( label: "distanceToTarget", description: "Distance to target child widget.", enabled: false, initial: 8, max: 100, ); final showShadowKnob = context.knobs.boolean( label: "Show shadow", description: "Show shadows for MoonDropdown.", initial: true, ); final constrainWidthToChildKnob = context.knobs.boolean( label: "constrainWidthToChild", description: "Constrain the width of MoonDropdown to be the same as the child (target).", initial: true, ); // Used to avoid the stale closure within callbacks in Story. final colorPiccolo = context.moonColors!.piccolo; final colorKrillin = context.moonColors!.krillin; final colorRoshi100 = context.moonColors!.roshi; final colorRoshi60 = context.moonColors!.roshi60; final colorRoshi10 = context.moonColors!.roshi10; final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular( borderRadiusKnob.toDouble(), ) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Center( child: Column( mainAxisSize: MainAxisSize.min, children: [ const TextDivider( text: "MoonDropdown with multiple choices", paddingTop: 0, ), MoonDropdown( show: _showChoices, minWidth: 250, borderColor: borderColor ?? Colors.transparent, backgroundColor: backgroundColor, borderRadius: borderRadius, constrainWidthToChild: constrainWidthToChildKnob, distanceToTarget: distanceToTargetKnob, dropdownAnchorPosition: dropdownAnchorPositionKnob ?? MoonDropdownAnchorPosition.bottom, dropdownShadows: showShadowKnob == true ? null : [], onTapOutside: () => setState(() => _showChoices = false), content: ClipRRect( borderRadius: borderRadius ?? BorderRadius.zero, child: Column( children: List.generate( 3, (int index) => MoonMenuItem( absorbGestures: true, onTap: () => setState( () => _availableChoices[Choices.values[index]] = !_availableChoices[Choices.values[index]]!, ), label: Text(Choices.values[index].name), trailing: MoonCheckbox( value: _availableChoices[Choices.values[index]], tapAreaSizeValue: 0, onChanged: (_) {}, ), ), ), ), ), child: MoonTextInput( width: 270, readOnly: true, canRequestFocus: false, mouseCursor: MouseCursor.defer, hintText: "Choose an option", onTap: () => setState(() => _showChoices = !_showChoices), onTapOutside: (PointerDownEvent _) => FocusManager.instance.primaryFocus?.unfocus(), leading: _availableChoices.values .any((element) => element == true) ? Center( child: MoonTag( tagSize: MoonTagSize.xs, backgroundColor: context.moonColors!.bulma, onTap: () => setState( () => _availableChoices .updateAll((key, value) => false), ), label: Text( "${_availableChoices.values.where((element) => element == true).length}", style: TextStyle(color: context.moonColors!.gohan), ), trailing: Icon( MoonIcons.controls_close_small_16_light, color: context.moonColors!.gohan, ), ), ) : null, trailing: MouseRegion( cursor: SystemMouseCursors.click, child: Center( child: AnimatedRotation( duration: const Duration(milliseconds: 200), turns: _showChoices ? -0.5 : 0, child: const Icon( MoonIcons.controls_chevron_down_16_light, size: 16, ), ), ), ), ), ), const TextDivider(text: "MoonDropdown as a menu"), MoonDropdown( show: _showMenu, groupId: _groupId, maxWidth: 250, borderColor: borderColor ?? Colors.transparent, backgroundColor: backgroundColor, constrainWidthToChild: constrainWidthToChildKnob, distanceToTarget: distanceToTargetKnob, dropdownAnchorPosition: dropdownAnchorPositionKnob ?? MoonDropdownAnchorPosition.bottom, dropdownShadows: showShadowKnob == true ? null : [], onTapOutside: () => setState(() { _showMenu = false; _showMenuInner = false; }), content: Column( children: [ MoonMenuItem( onTap: () => setState(() { _showMenu = false; _buttonName = "Piccolo"; _buttonColor = colorPiccolo; }), label: const Text("Piccolo"), ), const SizedBox(height: 4), MoonMenuItem( onTap: () => setState(() { _showMenu = false; _buttonName = "Krillin"; _buttonColor = colorKrillin; }), label: const Text("Krillin"), ), const SizedBox(height: 4), MoonDropdown( show: _showMenuInner, groupId: _groupId, maxWidth: 100, constrainWidthToChild: constrainWidthToChildKnob, distanceToTarget: distanceToTargetKnob, dropdownAnchorPosition: dropdownAnchorPositionKnob ?? MoonDropdownAnchorPosition.bottom, followerAnchor: dropdownAnchorPositionKnob == null ? Alignment.topLeft : null, targetAnchor: dropdownAnchorPositionKnob == null ? Alignment.topRight : null, offset: dropdownAnchorPositionKnob == null ? const Offset(8, 0) : null, content: Column( children: [ MoonMenuItem( onTap: () => setState(() { _showMenu = false; _showMenuInner = false; _buttonName = "Roshi100"; _buttonColor = colorRoshi100; }), label: const Text("Roshi100"), ), const SizedBox(height: 4), MoonMenuItem( onTap: () => setState(() { _showMenu = false; _showMenuInner = false; _buttonName = "Roshi60"; _buttonColor = colorRoshi60; }), label: const Text("Roshi60"), ), const SizedBox(height: 4), MoonMenuItem( onTap: () => setState(() { _showMenu = false; _showMenuInner = false; _buttonName = "Roshi10"; _buttonColor = colorRoshi10; }), label: const Text("Roshi10"), ), ], ), child: MoonMenuItem( backgroundColor: _showMenuInner ? context.moonColors!.heles : null, onTap: () => setState(() => _showMenuInner = !_showMenuInner), label: const Text("Roshi"), trailing: const Icon( MoonIcons.controls_chevron_right_16_light, size: 16, ), ), ), ], ), child: MoonFilledButton( width: 128, label: Text(_buttonName), backgroundColor: _buttonColor, onTap: () => setState(() => _showMenu = !_showMenu), ), ), ], ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/icons.dart ================================================ import 'dart:math'; import 'dart:ui'; import 'package:example/src/storybook/common/widgets/segment.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class IconsStory extends StatefulWidget { static const path = '/primitives/icons'; const IconsStory({super.key}); @override State createState() => _IconsStoryState(); } class _IconsStoryState extends State { final TextEditingController _searchController = TextEditingController(); Map _filteredIcons = {}; // Helper function for grouping keys into trios. List> _groupInTrios(List keys) { final List> trios = []; for (int i = 0; i < keys.length; i += 3) { trios.add(keys.sublist(i, min(i + 3, keys.length))); } return trios; } Iterable> _getSortedIcons( Map iconsMap, ) { final Map> lightSegments = {}; final Map> regularSegments = {}; for (final String key in iconsMap.keys) { // Extract the segment and type (light or regular). final List parts = key.split('_'); final String segment = parts.first; final String type = parts.last; if (type == "light") { if (!lightSegments.containsKey(segment)) { lightSegments[segment] = {}; } lightSegments[segment]![key] = iconsMap[key]!; } else if (type == "regular") { if (!regularSegments.containsKey(segment)) { regularSegments[segment] = {}; } regularSegments[segment]![key] = iconsMap[key]!; } } final Map> combinedSegments = {}; // Get all unique segment names. final Set allSegments = lightSegments.keys.toSet() ..addAll(regularSegments.keys); for (final String segment in allSegments) { combinedSegments[segment] = {}; // Get the list of keys from light and regular segments for this segment. final List lightKeys = lightSegments[segment]?.keys.toList() ?? []; final List regularKeys = regularSegments[segment]?.keys.toList() ?? []; // Group the keys in trios. final List> lightTrios = _groupInTrios(lightKeys); final List> regularTrios = _groupInTrios(regularKeys); // Maximum number of trios in either list. final int maxTrios = max(lightTrios.length, regularTrios.length); for (int i = 0; i < maxTrios; i++) { // Add light trios if available. if (i < lightTrios.length) { for (final String key in lightTrios[i]) { combinedSegments[segment]![key] = lightSegments[segment]![key]!; } } // Add regular trios if available. if (i < regularTrios.length) { for (final String key in regularTrios[i]) { combinedSegments[segment]![key] = regularSegments[segment]![key]!; } } } } return combinedSegments.values; } void _performSearch() { setState(() { _filteredIcons = Map.fromEntries( iconsMap.entries .where( (entry) => entry.key.contains(_searchController.text.toLowerCase()), ) .map((entry) => MapEntry(entry.key, entry.value)), ); }); } void _handleClear() { setState(() { _searchController.clear(); _performSearch(); }); } @override void initState() { super.initState(); _searchController.addListener(_performSearch); // Initialize by performing a search to display all icons. _performSearch(); } @override void dispose() { _searchController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final sortedIcons = _getSortedIcons(_filteredIcons); final ScrollBehavior scrollBehaviour = ScrollConfiguration.of(context).copyWith( scrollbars: false, overscroll: false, dragDevices: { PointerDeviceKind.touch, PointerDeviceKind.mouse, }, ); return Scaffold( appBar: AppBar( backgroundColor: context.moonColors?.goku, title: Theme( data: Theme.of(context), child: MoonTextInput( controller: _searchController, hintText: "Search icons", leading: const Icon( MoonIcons.generic_search_24_light, size: 24, ), trailing: MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( onTap: _handleClear, child: const Icon( MoonIcons.controls_close_small_24_light, size: 24, ), ), ), ), ), ), body: CustomScrollView( scrollBehavior: scrollBehaviour, slivers: sortedIcons.map((e) => IconsSegment(segmentMap: e)).toList(), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/linear_loader.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class LinearLoaderStory extends StatelessWidget { static const path = '/primitives/loader/linear_loader'; const LinearLoaderStory({super.key}); @override Widget build(BuildContext context) { final linearLoaderSizeKnob = context.knobs.nullable.options( label: "linearLoaderSize", description: "Size variants for MoonLinearLoader.", enabled: false, initial: MoonLinearLoaderSize.x4s, options: const [ Option(label: "x6s", value: MoonLinearLoaderSize.x6s), Option(label: "x5s", value: MoonLinearLoaderSize.x5s), Option(label: "x4s", value: MoonLinearLoaderSize.x4s), Option(label: "x3s", value: MoonLinearLoaderSize.x3s), Option(label: "x2s", value: MoonLinearLoaderSize.x2s), ], ); final loaderColorKnob = context.knobs.nullable.options( label: "color", description: "MoonColors variants for MoonLinearLoader.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final color = colorTable(context)[loaderColorKnob ?? 40]; final loaderBackgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonLinearLoader background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[loaderBackgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonLinearLoader.", enabled: false, initial: 8, max: 32, ); return Center( child: Padding( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: MoonLinearLoader( linearLoaderSize: linearLoaderSizeKnob, color: color, backgroundColor: backgroundColor, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/linear_progress.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class LinearProgressStory extends StatelessWidget { static const path = '/primitives/progress/linear_progress'; const LinearProgressStory({super.key}); @override Widget build(BuildContext context) { final progressSizeKnob = context.knobs.nullable.options( label: "linearProgressSize", description: "Size variants for MoonLinearProgress.", enabled: false, initial: MoonLinearProgressSize.x4s, options: const [ Option(label: "x6s", value: MoonLinearProgressSize.x6s), Option(label: "x5s", value: MoonLinearProgressSize.x5s), Option(label: "x4s", value: MoonLinearProgressSize.x4s), Option(label: "x3s", value: MoonLinearProgressSize.x3s), Option(label: "x2s", value: MoonLinearProgressSize.x2s), ], ); final progressColorKnob = context.knobs.nullable.options( label: "color", description: "MoonColors variants for MoonLinearProgress progress.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final color = colorTable(context)[progressColorKnob ?? 40]; final progressBackgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonLinearProgress background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[progressBackgroundColorKnob ?? 40]; final pinColorKnob = context.knobs.nullable.options( label: "pinColor", description: "MoonColors variants for MoonLinearProgress pin.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final pinColor = colorTable(context)[pinColorKnob ?? 40]; final pinBorderColorKnob = context.knobs.nullable.options( label: "pinBorderColor", description: "MoonColors variants for MoonLinearProgress pin border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final pinBorderColor = colorTable(context)[pinBorderColorKnob ?? 40]; final thumbColorKnob = context.knobs.nullable.options( label: "thumbColor", description: "MoonColors variants for MoonLinearProgress thumb.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final thumbColor = colorTable(context)[thumbColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonLinearProgress.", enabled: false, initial: 8, max: 32, ); final linearProgressValueKnob = context.knobs.slider( label: "value", description: "Progress value for MoonLinearProgress.", initial: 0.5, ); final showPinKnob = context.knobs.boolean( label: "showPin", description: "Show pin for MoonLinearProgress.", ); final showMinLabelKnob = context.knobs.boolean( label: "showMinLabel", description: "Show minimum label for MoonLinearProgress.", ); final showMaxLabelKnob = context.knobs.boolean( label: "showMaxLabel", description: "Show maximum label for MoonLinearProgress.", ); final showPinShadowKnob = context.knobs.boolean( label: "showPinShadow", description: "Show pin shadow for MoonLinearProgress.", initial: true, ); return Center( child: Padding( padding: const EdgeInsets.symmetric(vertical: 64, horizontal: 20), child: MoonLinearProgress( linearProgressSize: progressSizeKnob, value: linearProgressValueKnob, color: color, backgroundColor: backgroundColor, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, showMinLabel: showMinLabelKnob, showMaxLabel: showMaxLabelKnob, showPin: showPinKnob, pinStyle: PinStyle( pinColor: pinColor, pinBorderColor: pinBorderColor, thumbColor: thumbColor, showShadow: showPinShadowKnob, ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/menu_item.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; enum MenuItem { first, second } class MenuItemStory extends StatefulWidget { static const path = '/primitives/menu_item'; const MenuItemStory({super.key}); @override State createState() => _MenuItemStoryState(); } class _MenuItemStoryState extends State { MenuItem currentlySelectedMenuItem = MenuItem.first; bool? checkboxIsSelected = false; bool switchIsSelected = false; @override Widget build(BuildContext context) { final leadingColorKnob = context.knobs.nullable.options( label: "Leading color", description: "MoonColors variants for MoonMenuItem leading slot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final leadingColor = colorTable(context)[leadingColorKnob ?? 40]; final labelColorKnob = context.knobs.nullable.options( label: "Label color", description: "MoonColors variants for MoonMenuItem label slot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final labelTextColor = colorTable(context)[labelColorKnob ?? 40]; final contentTextColorKnob = context.knobs.nullable.options( label: "Content color", description: "MoonColors variants for MoonMenuItem content slot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final contentTextColor = colorTable(context)[contentTextColorKnob ?? 40]; final trailingColorKnob = context.knobs.nullable.options( label: "Trailing color", description: "MoonColors variants for MoonMenuItem trailing slot.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final trailingColor = colorTable(context)[trailingColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonMenuItem background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final menuItemCrossAxisAlignmentKnob = context.knobs.nullable.options( label: "menuItemCrossAxisAlignment", description: "CrossAxisAlignment variants for MoonMenuItem.", enabled: false, initial: CrossAxisAlignment.center, options: [ Option( label: CrossAxisAlignment.start.name, value: CrossAxisAlignment.start, ), Option( label: CrossAxisAlignment.center.name, value: CrossAxisAlignment.center, ), Option( label: CrossAxisAlignment.end.name, value: CrossAxisAlignment.end, ), ], ); final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonMenuItem.", enabled: false, initial: 8, max: 32, ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonMenuItem leading slot.", initial: true, ); final showContentKnob = context.knobs.boolean( label: "content", description: "Show widget in MoonMenuItem content slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonMenuItem trailing slot.", initial: true, ); final isDisabledKnob = context.knobs.boolean( label: "Disabled", description: "MoonMenuItem onTap() is null.", ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( mainAxisSize: MainAxisSize.min, children: [ const TextDivider( text: "MoonMenuItem", paddingTop: 0, ), MoonMenuItem( borderRadius: borderRadius, backgroundColor: backgroundColor, menuItemCrossAxisAlignment: menuItemCrossAxisAlignmentKnob, onTap: isDisabledKnob ? null : () {}, label: Text( "Multi-line menu item", style: TextStyle(color: labelTextColor), ), content: showContentKnob ? Text( "Multi-line default content field as an example for MoonMenuItem component.", style: TextStyle(color: contentTextColor), ) : null, leading: showLeadingKnob ? MoonAvatar( borderRadius: borderRadius, backgroundColor: context.moonColors!.jiren, avatarSize: MoonAvatarSize.lg, content: const Icon( MoonIcons.travel_airplane_32_regular, size: 32, ), ) : null, trailing: showTrailingKnob ? Icon( MoonIcons.controls_chevron_right_24_light, color: trailingColor, ) : null, ), const SizedBox(height: 16), MoonMenuItem( backgroundColor: backgroundColor, borderRadius: borderRadius, menuItemCrossAxisAlignment: menuItemCrossAxisAlignmentKnob, onTap: isDisabledKnob ? null : () {}, label: Text( "One-line menu item", style: TextStyle(color: labelTextColor), ), content: showContentKnob ? Text( 'One-line content field example', style: TextStyle(color: contentTextColor), ) : null, leading: showLeadingKnob ? MoonAvatar( borderRadius: borderRadius, backgroundColor: context.moonColors!.jiren, avatarSize: MoonAvatarSize.md, content: const Icon( MoonIcons.notifications_activity_32_regular, size: 24, ), ) : null, trailing: showTrailingKnob ? Icon( MoonIcons.controls_chevron_right_24_light, color: trailingColor, ) : null, ), const TextDivider(text: "MoonMenuItem with selection control"), MoonMenuItem( borderRadius: borderRadius, backgroundColor: backgroundColor, menuItemCrossAxisAlignment: menuItemCrossAxisAlignmentKnob, onTap: isDisabledKnob ? null : () => setState(() => checkboxIsSelected = !checkboxIsSelected!), label: Text( "Menu item with MoonCheckbox", style: TextStyle(color: labelTextColor), ), leading: showLeadingKnob ? Icon( MoonIcons.other_frame_24_light, color: leadingColor, ) : null, trailing: showTrailingKnob ? MoonCheckbox( value: checkboxIsSelected, tapAreaSizeValue: 24, onChanged: (bool? isSelected) => setState(() => checkboxIsSelected = isSelected), ) : null, ), const SizedBox(height: 16), MoonMenuItem( borderRadius: borderRadius, backgroundColor: backgroundColor, menuItemCrossAxisAlignment: menuItemCrossAxisAlignmentKnob, onTap: isDisabledKnob ? null : () => setState(() => switchIsSelected = !switchIsSelected), label: Text( "Menu item with MoonSwitch", style: TextStyle(color: labelTextColor), ), leading: showLeadingKnob ? Icon( MoonIcons.other_frame_24_light, color: leadingColor, ) : null, trailing: showTrailingKnob ? MoonSwitch( switchSize: MoonSwitchSize.x2s, value: switchIsSelected, onChanged: (bool isSelected) => setState(() => switchIsSelected = isSelected), ) : null, ), const TextDivider(text: "Expandable MoonMenuItem with divider"), MoonAccordion( shadows: const [], isDisabled: isDisabledKnob, hasContentOutside: true, borderRadius: borderRadius, accordionSize: MoonAccordionSize.md, iconColor: trailingColor, backgroundColor: backgroundColor ?? Colors.transparent, expandedBackgroundColor: backgroundColor ?? context.moonColors!.heles, label: Text( 'Expandable menu item', style: context.moonTypography!.body.textDefault.copyWith( color: labelTextColor, fontWeight: FontWeight.w400, ), ), leading: showLeadingKnob ? Icon( MoonIcons.other_frame_24_light, color: leadingColor ?? context.moonColors!.iconPrimary, ) : null, childrenPadding: const EdgeInsets.only(top: 8, bottom: 8, left: 24), children: MoonMenuItem.divideMenuItems( context: context, menuItems: List.generate( 2, (index) => MoonMenuItem( backgroundColor: backgroundColor, borderRadius: borderRadius, menuItemCrossAxisAlignment: menuItemCrossAxisAlignmentKnob, onTap: () => setState( () => currentlySelectedMenuItem = MenuItem.values[index], ), label: Text( "Menu item ${index + 1} with MoonRadio", style: TextStyle(color: labelTextColor), ), leading: showLeadingKnob ? MoonRadio( value: MenuItem.values[index], groupValue: currentlySelectedMenuItem, tapAreaSizeValue: 24, onChanged: (MenuItem? selectedMenuItem) => setState( () => currentlySelectedMenuItem = selectedMenuItem!, ), ) : null, trailing: showTrailingKnob ? Icon( MoonIcons.other_frame_24_light, color: trailingColor, ) : null, ), ), ).toList(), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/modal.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class ModalStory extends StatelessWidget { static const path = '/primitives/modal'; const ModalStory({super.key}); @override Widget build(BuildContext context) { final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonModal text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonModal background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final barrierColorKnob = context.knobs.nullable.options( label: "barrierColor", description: "MoonColors variants for MoonModal barrier.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final barrierColor = colorTable(context)[barrierColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonModal.", enabled: false, initial: 8, max: 32, ); Future modalBuilder(BuildContext context) { return showMoonModal( context: context, useRootNavigator: false, barrierColor: barrierColor, builder: (BuildContext context) { return Directionality( textDirection: Directionality.of(context), child: MoonModal( backgroundColor: backgroundColor, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, child: SizedBox( width: 300, child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.start, children: [ Padding( padding: const EdgeInsets.fromLTRB(24, 20, 24, 16), child: Text( "MoonModal title", style: context.moonTypography!.heading.text18 .copyWith(color: textColor), ), ), Divider( height: 1, color: context.moonColors!.trunks, ), Padding( padding: const EdgeInsets.fromLTRB(24, 16, 24, 16), child: Text( "Re-open the MoonModal to view the updated knob value.", style: context.moonTypography!.body.text14 .copyWith(color: textColor), ), ), Padding( padding: const EdgeInsets.fromLTRB(24, 16, 24, 24), child: MoonFilledButton( label: const Text("Okay"), isFullWidth: true, onTap: () => Navigator.of(context).pop(), ), ), ], ), ), ), ); }, ); } return Center( child: Builder( builder: (BuildContext context) { return MoonFilledButton( label: const Text("Tap me"), onTap: () => modalBuilder(context), ); }, ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/popover.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class PopoverStory extends StatefulWidget { static const path = '/primitives/popover'; const PopoverStory({super.key}); @override State createState() => _PopoverStoryState(); } class _PopoverStoryState extends State { bool show = false; @override Widget build(BuildContext context) { final customLabelTextKnob = context.knobs.text( label: "Label text", initial: "Custom MoonPopover text", ); final popoverPositionKnob = context.knobs.nullable.options( label: "popoverPosition", description: "Position variants for MoonPopover.", enabled: false, initial: MoonPopoverPosition.top, options: const [ Option(label: "top", value: MoonPopoverPosition.top), Option(label: "bottom", value: MoonPopoverPosition.bottom), Option(label: "left", value: MoonPopoverPosition.left), Option(label: "right", value: MoonPopoverPosition.right), Option(label: "topLeft", value: MoonPopoverPosition.topLeft), Option(label: "topRight", value: MoonPopoverPosition.topRight), Option(label: "bottomLeft", value: MoonPopoverPosition.bottomLeft), Option(label: "bottomRight", value: MoonPopoverPosition.bottomRight), Option(label: "vertical", value: MoonPopoverPosition.vertical), Option(label: "horizontal", value: MoonPopoverPosition.horizontal), ], ); final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonPopover background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonPopover border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonPopover.", enabled: false, initial: 8, max: 32, ); final distanceToTargetKnob = context.knobs.nullable.slider( label: "distanceToTarget", description: "Distance to target child widget.", enabled: false, initial: 8, max: 100, ); final showShadowKnob = context.knobs.boolean( label: "Show shadow", description: "Show shadows for MoonPopover.", initial: true, ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ MoonPopover( show: show, borderColor: borderColor ?? Colors.transparent, backgroundColor: backgroundColor, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, distanceToTarget: distanceToTargetKnob, popoverPosition: popoverPositionKnob ?? MoonPopoverPosition.top, popoverShadows: showShadowKnob == true ? null : [], onTapOutside: () => setState(() => show = false), content: ConstrainedBox( constraints: const BoxConstraints(maxWidth: 190), child: Column( mainAxisSize: MainAxisSize.min, children: [ Row( mainAxisSize: MainAxisSize.min, children: [ MoonAvatar( backgroundColor: context.moonColors?.heles, content: const Icon(MoonIcons.other_rocket_24_light), ), const SizedBox(width: 12), Expanded( child: Text(customLabelTextKnob), ), ], ), const SizedBox(height: 16), MoonFilledButton( buttonSize: MoonButtonSize.sm, isFullWidth: true, onTap: () => setState(() => show = false), label: const Text("Close"), ), ], ), ), child: MoonFilledButton( onTap: () => setState(() => show = !show), label: const Text("Tap me"), ), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/radio.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; enum ChoiceCustom { first, second } enum ChoiceLabel { first, second } class RadioStory extends StatefulWidget { static const path = '/primitives/radio'; const RadioStory({super.key}); @override State createState() => _RadioStoryState(); } class _RadioStoryState extends State { ChoiceCustom? valueCustom = ChoiceCustom.first; ChoiceLabel? valueLabel = ChoiceLabel.first; @override Widget build(BuildContext context) { final activeColorKnob = context.knobs.nullable.options( label: "activeColor", description: "MoonColors variants for checked MoonRadio.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeColor = colorTable(context)[activeColorKnob ?? 40]; final inactiveColorKnob = context.knobs.nullable.options( label: "inactiveColor", description: "MoonColors variants for unchecked MoonRadio.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveColor = colorTable(context)[inactiveColorKnob ?? 40]; final isToggleableKnob = context.knobs.boolean( label: "toggleable", description: "Whether selected MoonRadio can be unselected.", ); final isDisabledKnob = context.knobs.boolean( label: "Disabled", description: "MoonRadio onChanged() is null.", ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( children: [ const TextDivider( text: "MoonRadio", paddingTop: 0, ), ...List.generate( 2, (int index) => MoonRadio( value: ChoiceCustom.values[index], groupValue: valueCustom, activeColor: activeColor, inactiveColor: inactiveColor, toggleable: isToggleableKnob, onChanged: isDisabledKnob ? null : (ChoiceCustom? choice) => setState(() => valueCustom = choice), ), ), const TextDivider(text: "MoonRadio with label"), ...List.generate( 2, (int index) => MoonMenuItem( absorbGestures: true, onTap: isDisabledKnob ? null : () => setState( () { if (isToggleableKnob && valueLabel == ChoiceLabel.values[index]) { valueLabel = null; } else { valueLabel = ChoiceLabel.values[index]; } }, ), label: Text("With label #${index + 1}"), trailing: MoonRadio( value: ChoiceLabel.values[index], groupValue: valueLabel, toggleable: isToggleableKnob, tapAreaSizeValue: 0, onChanged: isDisabledKnob ? null : (_) {}, ), ), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/segmented_control.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class SegmentedControlStory extends StatelessWidget { static const path = '/primitives/segmented_control'; const SegmentedControlStory({super.key}); @override Widget build(BuildContext context) { final segmentedControlSizeKnob = context.knobs.nullable.options( label: "segmentedControlSize", description: "Size variants for MoonSegmentedControl.", enabled: false, initial: MoonSegmentedControlSize.md, options: const [ Option(label: "sm", value: MoonSegmentedControlSize.sm), Option(label: "md", value: MoonSegmentedControlSize.md), ], ); final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonSegmentedControl background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final selectedSegmentColorKnob = context.knobs.nullable.options( label: "selectedSegmentColor", description: "MoonColors variants for MoonSegmentedControl selected segment.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final selectedSegmentColor = colorTable(context)[selectedSegmentColorKnob ?? 40]; final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonSegmentedControl default text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final selectedTextColorKnob = context.knobs.nullable.options( label: "selectedTextColor", description: "MoonColors variants for MoonSegmentedControl selected segment text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final selectedTextColor = colorTable(context)[selectedTextColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonSegmentedControl.", enabled: false, initial: 12, max: 32, ); final segmentBorderRadiusKnob = context.knobs.nullable.sliderInt( label: "segmentBorderRadius", description: "Border radius for MoonSegmentedControl segments.", enabled: false, initial: 8, max: 32, ); final gapKnob = context.knobs.nullable.sliderInt( label: "gap", description: "Gap between MoonSegmentedControl segments.", enabled: false, initial: 4, max: 12, ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonSegmentedControl leading slot.", ); final showLabelKnob = context.knobs.boolean( label: "label", description: "Show widget in MoonSegmentedControl label slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonSegmentedControl trailing slot.", ); final isExpandedKnob = context.knobs.boolean( label: "isExpanded", description: "Expand MoonSegmentControl horizontally.", ); final isDisabledKnob = context.knobs.boolean( label: "isDisabled", description: "Disable MoonSegmentedControl.", ); final SegmentStyle segmentStyle = SegmentStyle( textColor: textColor, selectedTextColor: selectedTextColor, selectedSegmentColor: selectedSegmentColor, segmentBorderRadius: segmentBorderRadiusKnob != null ? BorderRadius.circular(segmentBorderRadiusKnob.toDouble()) : null, ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( children: [ const TextDivider( text: "MoonSegmentedControl", paddingTop: 0, ), Column( children: [ MoonSegmentedControl( isDisabled: isDisabledKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), segmentedControlSize: segmentedControlSizeKnob, backgroundColor: backgroundColor, borderRadius: borderRadius, segments: List.generate( 3, (int index) => Segment( leading: showLeadingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, label: showLabelKnob ? Text('Tab${index + 1}') : null, trailing: showTrailingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, segmentStyle: segmentStyle, ), ), ), const TextDivider(text: "MoonSegmentedControl with icons"), MoonSegmentedControl( isDisabled: isDisabledKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), segmentedControlSize: segmentedControlSizeKnob, backgroundColor: backgroundColor, borderRadius: borderRadius, segments: List.generate( 4, (int index) => Segment( trailing: const Icon(MoonIcons.other_frame_24_light), segmentStyle: segmentStyle, ), ), ), ], ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/switch.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class SwitchStory extends StatefulWidget { static const path = '/primitives/switch'; const SwitchStory({super.key}); @override State createState() => _SwitchStoryState(); } class _SwitchStoryState extends State { bool switchValue = false; bool switchTextValue = false; bool switchIconValue = false; @override Widget build(BuildContext context) { final switchSizeKnob = context.knobs.nullable.options( label: "switchSize", description: "Size variants for MoonSwitch.", enabled: false, initial: MoonSwitchSize.xs, options: const [ Option(label: "x2s", value: MoonSwitchSize.x2s), Option(label: "xs", value: MoonSwitchSize.xs), Option(label: "sm", value: MoonSwitchSize.sm), ], ); final thumbColorKnob = context.knobs.nullable.options( label: "thumbColor", description: "MoonColors variants for MoonSwitch thumb.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final thumbColor = colorTable(context)[thumbColorKnob ?? 40]; final activeTrackColorKnob = context.knobs.nullable.options( label: "activeTrackColor", description: "MoonColors variants for MoonSwitch active track.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeTrackColor = colorTable(context)[activeTrackColorKnob ?? 40]; final inactiveTrackColorKnob = context.knobs.nullable.options( label: "inactiveTrackColor", description: "MoonColors variants for MoonSwitch inactive track.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveTrackColor = colorTable(context)[inactiveTrackColorKnob ?? 40]; final isDisabled = context.knobs.boolean( label: "Disabled", description: "MoonSwitch onChanged() is null.", ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( children: [ const TextDivider( text: "MoonSwitch", paddingTop: 0, ), MoonSwitch( switchSize: switchSizeKnob, thumbColor: thumbColor, activeTrackColor: activeTrackColor, inactiveTrackColor: inactiveTrackColor, value: switchValue, onChanged: isDisabled ? null : (bool newValue) => setState(() => switchValue = newValue), ), const TextDivider(text: "Custom MoonSwitch"), MoonSwitch( switchSize: switchSizeKnob, activeThumbWidget: const Icon( MoonIcons.generic_check_alternative_16_light, ), inactiveThumbWidget: const Icon( MoonIcons.controls_close_small_16_light, ), activeTrackWidget: const Text( "ON", textAlign: TextAlign.center, ), inactiveTrackWidget: const Text( "OFF", textAlign: TextAlign.center, ), value: switchTextValue, onChanged: (bool newValue) => setState(() => switchTextValue = newValue), ), const SizedBox(height: 32), MoonSwitch( switchSize: switchSizeKnob, activeTrackWidget: const Icon(MoonIcons.other_moon_16_light), inactiveTrackWidget: const Icon(MoonIcons.other_sun_16_light), value: switchIconValue, onChanged: (bool newValue) => setState(() => switchIconValue = newValue), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/tab_bar.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class TabBarStory extends StatefulWidget { static const path = '/primitives/tab_bar'; const TabBarStory({super.key}); @override State createState() => _TabBarStoryState(); } class _TabBarStoryState extends State with SingleTickerProviderStateMixin { late TabController _tabController; @override void initState() { super.initState(); _tabController = TabController(length: 3, vsync: this, initialIndex: 1); } @override void dispose() { _tabController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final tabsSizeKnob = context.knobs.nullable.options( label: "tabBarSize", description: "Size variants for MoonTabBar.", enabled: false, initial: MoonTabBarSize.md, options: const [ Option(label: "sm", value: MoonTabBarSize.sm), Option(label: "md", value: MoonTabBarSize.md), ], ); final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonTabBar default text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final selectedTextColorKnob = context.knobs.nullable.options( label: "selectedTextColor", description: "MoonColors variants for MoonTabBar selected tab text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final selectedTextColor = colorTable(context)[selectedTextColorKnob ?? 40]; final indicatorColorKnob = context.knobs.nullable.options( label: "indicatorColor", description: "MoonColors variants for MoonTabBar indicator.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final indicatorColor = colorTable(context)[indicatorColorKnob ?? 40]; final selectedTabColorKnob = context.knobs.nullable.options( label: "selectedTabColor", description: "MoonColors variants for pill MoonTabBar selected tab.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final selectedTabColor = colorTable(context)[selectedTabColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for pill MoonTabBar.", enabled: false, initial: 8, max: 32, ); final indicatorHeightKnob = context.knobs.nullable.sliderInt( label: "indicatorHeight", description: "Indicator height for MoonTabBar.", enabled: false, initial: 2, max: 4, ); final gapKnob = context.knobs.nullable.sliderInt( label: "gap", description: "Gap between MoonTabBar tabs.", enabled: false, initial: 4, max: 12, ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonTabBar leading slot.", ); final showLabelKnob = context.knobs.boolean( label: "label", description: "Show widget in MoonTabBar label slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonTabBar trailing slot.", ); final isExpandedKnob = context.knobs.boolean( label: "isExpanded", description: "Expand MoonTabBar horizontally.", ); final tabStyle = MoonTabStyle( textColor: textColor, selectedTextColor: selectedTextColor, indicatorColor: indicatorColor, indicatorHeight: indicatorHeightKnob?.toDouble(), ); final pillTabStyle = MoonPillTabStyle( textColor: textColor, selectedTextColor: selectedTextColor, selectedTabColor: selectedTabColor, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( children: [ const TextDivider( text: "MoonTabBar", paddingTop: 0, ), Column( children: [ MoonTabBar( tabBarSize: tabsSizeKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), tabs: List.generate( 3, (int index) => MoonTab( leading: showLeadingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, label: showLabelKnob ? Text('Tab${index + 1}') : null, trailing: showTrailingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, tabStyle: tabStyle, ), ), ), const TextDivider(text: "MoonTabBar with disabled tab"), MoonTabBar( tabBarSize: tabsSizeKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), tabs: List.generate( 4, (int index) => MoonTab( disabled: index == 1, trailing: const Icon(MoonIcons.other_frame_24_light), tabStyle: tabStyle, ), ), ), const TextDivider(text: "Pill MoonTabBar"), MoonTabBar.pill( tabBarSize: tabsSizeKnob, isExpanded: isExpandedKnob, gap: gapKnob?.toDouble(), pillTabs: List.generate( 3, (int index) => MoonPillTab( leading: showLeadingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, label: showLabelKnob ? Text('Tab${index + 1}') : null, trailing: showTrailingKnob ? const Icon(MoonIcons.other_frame_24_light) : null, tabStyle: pillTabStyle, ), ), ), const TextDivider(text: "Custom MoonTabBar with TabBarView"), MoonTabBar( isExpanded: true, tabController: _tabController, tabs: List.generate( 3, (int index) => MoonTab( label: Text('Tab${index + 1}'), tabStyle: tabStyle, ), ), ), SizedBox( height: 112, child: TabBarView( controller: _tabController, children: [ Container( color: context.moonColors!.whis60, padding: const EdgeInsets.all(16), child: Stack( children: [ const Align( child: Text('Tab1'), ), Align( alignment: Alignment.centerRight, child: MoonButton.icon( onTap: () => _tabController.animateTo(1), icon: const Icon( MoonIcons.controls_chevron_right_24_light, ), ), ), ], ), ), Container( color: context.moonColors!.frieza60, padding: const EdgeInsets.all(16), child: Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ MoonButton.icon( onTap: () => _tabController.animateTo(0), icon: const Icon( MoonIcons.controls_chevron_left_24_light, ), ), const Text('Tab2'), MoonButton.icon( onTap: () => _tabController.animateTo(2), icon: const Icon( MoonIcons.controls_chevron_right_24_light, ), ), ], ), ), Container( color: context.moonColors!.whis60, padding: const EdgeInsets.all(16), child: Stack( children: [ const Align( child: Text('Tab3'), ), Align( alignment: Alignment.centerLeft, child: MoonButton.icon( onTap: () => _tabController.animateTo(1), icon: const Icon( MoonIcons.controls_chevron_left_24_light, ), ), ), ], ), ), ], ), ), ], ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/table.dart ================================================ import 'dart:math'; import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; const int _rowsPerPage = 25; class TableStory extends StatefulWidget { static const path = '/primitives/table'; const TableStory({super.key}); @override State createState() => _TableStoryState(); } class _TableStoryState extends State { late final List<_TableData> _tableDataOriginal; late List<_TableData> _tableDataToShow; final List _columnNames = [ 'ID', 'First name', 'Last name', 'Age', 'Activity', ]; final List _columnSorting = List.generate(6, (int _) => true); bool _checkAllBoxes = false; bool _sortAscending = true; int _sortColumnIndex = 0; int _rowsToShow = _rowsPerPage; bool _showCheckboxes = false; bool _showDividerKnob = false; bool _rowsSelectableKnob = false; bool _zebraStyleKnob = false; bool _infiniteScrollKnob = false; Color? _rowColor; Color? _selectedRowColor; Color? _textColor; int? _borderRadiusKnob; List<_TableData> _generateTableData() { return List<_TableData>.generate( _rowsPerPage * 5, (int index) => _TableData( id: index, selected: false, firstName: 'Test$index', lastName: 'Subject$index', age: Random().nextInt(81), activity: Random().nextInt(100), ), ); } void _scrollListener(ScrollController verticalScrollController) { verticalScrollController.addListener(() { if (verticalScrollController.hasClients && _infiniteScrollKnob) { final double pixels = verticalScrollController.position.pixels; final double maxScrollExtent = verticalScrollController.position.maxScrollExtent; if (pixels >= maxScrollExtent && _rowsToShow < _rowsPerPage * 5) { _tableDataToShow += _tableDataOriginal.sublist( _rowsToShow, _rowsToShow + _rowsPerPage, ); setState(() => _rowsToShow += _rowsPerPage); } } }); } void _onSort(int columnIndex, bool sortAscending) { if (_sortColumnIndex == columnIndex || _sortAscending != sortAscending) { setState(() { if (columnIndex == _sortColumnIndex) { _sortAscending = _columnSorting[columnIndex] = sortAscending; } else { _sortColumnIndex = columnIndex; _sortAscending = _columnSorting[columnIndex]; } switch (_showCheckboxes ? columnIndex : columnIndex + 1) { case 1: _tableDataToShow.sort((a, b) => a.id.compareTo(b.id)); case 2: _tableDataToShow.sort((a, b) => a.firstName.compareTo(b.firstName)); case 3: _tableDataToShow.sort((a, b) => a.lastName.compareTo(b.lastName)); case 4: _tableDataToShow.sort((a, b) => a.age.compareTo(b.age)); case 5: _tableDataToShow.sort((a, b) => a.activity.compareTo(b.activity)); } if (!_sortAscending) { _tableDataToShow = _tableDataToShow.reversed.toList(); } }); } } @override void initState() { super.initState(); _tableDataOriginal = _generateTableData(); _tableDataToShow = _tableDataOriginal.sublist(0, _rowsPerPage); } Widget _headerCheckBox() { return Padding( padding: const EdgeInsetsDirectional.only(start: 16.0), child: MoonCheckbox( tapAreaSizeValue: 0, value: _checkAllBoxes, onChanged: _rowsSelectableKnob ? (bool? onChanged) => onChanged != null ? setState(() { _checkAllBoxes = onChanged; for (final item in _tableDataToShow) { item.selected = _checkAllBoxes; } }) : null : null, ), ); } Widget _buildCell(dynamic label, {bool firstCell = false}) { return DecoratedBox( decoration: _showDividerKnob && !firstCell ? BoxDecoration( border: Border( left: Directionality.of(context) == TextDirection.ltr ? Divider.createBorderSide( context, color: context.moonColors!.beerus, width: 1, ) : BorderSide.none, right: Directionality.of(context) == TextDirection.rtl ? Divider.createBorderSide( context, color: context.moonColors!.beerus, width: 1, ) : BorderSide.none, ), ) : const BoxDecoration(), child: Padding( padding: const EdgeInsetsDirectional.only(start: 16.0), child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ Text( label.toString(), style: TextStyle(color: _textColor), ), ], ), ), ); } MoonTableHeader _generateTableHeader() { return MoonTableHeader( columns: List.generate( _showCheckboxes ? 6 : 5, (int index) { final bool checkboxColumn = index == 0 && _showCheckboxes; final double columnWidth = index == 0 || index == 1 && _showCheckboxes ? 64 : 128; return MoonTableColumn( width: columnWidth, onTap: () { if (checkboxColumn && _rowsSelectableKnob) { setState(() { _checkAllBoxes = !_checkAllBoxes; for (final item in _tableDataToShow) { item.selected = _checkAllBoxes; } }); } }, onSort: checkboxColumn ? null : (int columnIndex, bool sortAscending) => _onSort(columnIndex, sortAscending), cell: checkboxColumn ? _headerCheckBox() : _buildCell( _columnNames[_showCheckboxes ? index - 1 : index], firstCell: index == 0 && !_showCheckboxes, ), ); }, ), ); } MoonTableFooter _generateTableFooter() { return MoonTableFooter( cells: List.generate( _showCheckboxes ? 6 : 5, (int index) { final int ageColumnIndex = _showCheckboxes ? 4 : 3; final int activityColumnIndex = _showCheckboxes ? 5 : 4; final String label = index == 0 ? 'Total:' : (index == ageColumnIndex || index == activityColumnIndex) ? _tableDataToShow .map( (_TableData item) => index == ageColumnIndex ? item.age : item.activity, ) .reduce((int value, int element) => value + element) .toString() : '-'; return _buildCell(label, firstCell: index == 0); }, ), ); } List _generateTableRows() { return List.generate( _rowsToShow, (int index) { final row = _tableDataToShow[index]; return MoonTableRow( selected: row.selected, onSelectChanged: _rowsSelectableKnob ? (bool? selected) => setState(() => row.selected = selected ?? false) : null, decoration: ShapeDecorationWithPremultipliedAlpha( color: _zebraStyleKnob ? row.selected ? _selectedRowColor ?? context.moonColors!.beerus : index.isEven ? _rowColor ?? context.moonColors!.goku : Colors.transparent : row.selected ? _selectedRowColor ?? context.moonColors!.beerus : _rowColor ?? context.moonColors!.goku, shape: MoonSquircleBorder( borderRadius: _borderRadiusKnob != null ? BorderRadius.circular(_borderRadiusKnob!.toDouble()) .squircleBorderRadius(context) : BorderRadius.circular(8).squircleBorderRadius(context), ), ), cells: [ if (_showCheckboxes) Padding( padding: const EdgeInsetsDirectional.only(start: 16.0), child: MoonCheckbox( tapAreaSizeValue: 0, value: row.selected, onChanged: _rowsSelectableKnob ? (bool? onChanged) => setState(() => row.selected = !row.selected) : null, ), ), _buildCell(row.id, firstCell: !_showCheckboxes), _buildCell(row.firstName), _buildCell(row.lastName), _buildCell(row.age), _buildCell(row.activity), ], ); }, ); } @override Widget build(BuildContext context) { final tableRowSizeKnob = context.knobs.nullable.options( label: "tableRowSize", description: "Size variants for MoonTable row.", enabled: false, initial: MoonTableRowSize.md, options: const [ Option(label: "xs", value: MoonTableRowSize.xs), Option(label: "sm", value: MoonTableRowSize.sm), Option(label: "md", value: MoonTableRowSize.md), Option(label: "lg", value: MoonTableRowSize.lg), Option(label: "xl", value: MoonTableRowSize.xl), Option(label: "x2l", value: MoonTableRowSize.x2l), ], ); final rowColorKnob = context.knobs.nullable.options( label: "Row color", description: "MoonColors variants for MoonTable rows.", enabled: false, initial: 0, // piccolo options: colorOptions, ); _rowColor = colorTable(context)[rowColorKnob ?? 40]; final selectedRowColorKnob = context.knobs.nullable.options( label: "Selected row color", description: "MoonColors variants for MoonTable selected rows.", enabled: false, initial: 0, // piccolo options: colorOptions, ); _selectedRowColor = colorTable(context)[selectedRowColorKnob ?? 40]; final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonTable text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); _textColor = colorTable(context)[textColorKnob ?? 40]; _borderRadiusKnob = context.knobs.nullable.sliderInt( label: "Border radius", description: "Border radius for MoonTable row.", enabled: false, initial: 8, max: 32, ); final rowGapKnob = context.knobs.nullable.sliderInt( label: "rowGap", description: "Gap between MoonTable rows.", enabled: false, initial: 4, max: 16, ); final isHeaderPinnedKnob = context.knobs.boolean( label: "isHeaderPinned", description: "Show MoonTable with pinned header.", initial: true, ); final isFooterPinnedKnob = context.knobs.boolean( label: "isFooterPinned", description: "Show MoonTable with pinned footer.", initial: true, ); _rowsSelectableKnob = context.knobs.boolean( label: "Rows selectable", description: "Row onSelectChanged() is not null.", initial: true, ); _zebraStyleKnob = context.knobs.boolean( label: "Zebra style rows", description: "Show MoonTable rows with zebra style.", ); final showCheckboxesKnob = context.knobs.boolean( label: "With checkboxes", description: "Show MoonTable with checkboxes.", ); _showDividerKnob = context.knobs.boolean( label: "With cell divider", description: "Show MoonTable with cell divider.", ); final infiniteScrollKnob = context.knobs.boolean( label: "With infinite scroll", description: "Show MoonTable with infinite scroll.", ); if (_showCheckboxes != showCheckboxesKnob) { _showCheckboxes = showCheckboxesKnob; _sortColumnIndex = showCheckboxesKnob ? _sortColumnIndex + 1 : _sortColumnIndex - 1; } if (_infiniteScrollKnob != infiniteScrollKnob) { _infiniteScrollKnob = infiniteScrollKnob; if (!infiniteScrollKnob) { _tableDataToShow = _tableDataOriginal.sublist(0, _rowsPerPage); _rowsToShow = _rowsPerPage; } } return Padding( padding: EdgeInsets.only( top: MediaQuery.of(context).padding.top + 16.0, bottom: 42.0, ), child: OverflowBox( maxWidth: MediaQuery.of(context).size.width, child: MoonTable( columnsCount: _showCheckboxes ? 6 : 5, isHeaderPinned: isHeaderPinnedKnob, isFooterPinned: isFooterPinnedKnob, sortAscending: _sortAscending, sortColumnIndex: _sortColumnIndex, rowGap: rowGapKnob?.toDouble(), rowSize: tableRowSizeKnob ?? MoonTableRowSize.md, header: _generateTableHeader(), footer: _generateTableFooter(), rows: _generateTableRows(), tablePadding: const EdgeInsets.symmetric(horizontal: 16), cellPadding: EdgeInsets.symmetric( vertical: tableRowSizeKnob == MoonTableRowSize.xs ? 4 : 8, ), onScrollControllersReady: ( ScrollController verticalScrollController, ScrollController horizontalScrollController, ) => _scrollListener(verticalScrollController), ), ), ); } } class _TableData { bool selected; int id; String firstName; String lastName; int age; int activity; _TableData({ required this.selected, required this.id, required this.firstName, required this.lastName, required this.age, required this.activity, }); } ================================================ FILE: example/lib/src/storybook/stories/primitives/tag.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class TagStory extends StatelessWidget { static const path = '/primitives/tag'; const TagStory({super.key}); @override Widget build(BuildContext context) { final customLabelTextKnob = context.knobs.text( label: "Tag label text", initial: "MoonTag", ); final tagSizeKnob = context.knobs.nullable.options( label: "tagSize", description: "Size variants for MoonTag.", enabled: false, initial: MoonTagSize.xs, options: const [ Option(label: "x2s", value: MoonTagSize.x2s), Option(label: "xs", value: MoonTagSize.xs), Option(label: "sm", value: MoonTagSize.sm), ], ); final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonTag text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final iconColorKnob = context.knobs.nullable.options( label: "Icon color", description: "MoonColors variants for MoonTag icon.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final iconColor = colorTable(context)[iconColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTag background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTag.", enabled: false, initial: 4, max: 32, ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonTag leading slot.", ); final showLabelKnob = context.knobs.boolean( label: "label", description: "Show widget in MoonTag label slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonTag trailing slot.", initial: true, ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: MoonTag( borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, onTap: () {}, tagSize: tagSizeKnob, backgroundColor: backgroundColor, leading: showLeadingKnob ? Icon( MoonIcons.controls_close_small_16_light, color: iconColor, ) : null, label: showLabelKnob ? Text( customLabelTextKnob, style: TextStyle(color: textColor), ) : null, trailing: showTrailingKnob ? Icon( MoonIcons.controls_close_small_16_light, color: iconColor, ) : null, ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/text_area.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class TextAreaStory extends StatelessWidget { static const path = '/primitives/text_area'; const TextAreaStory({super.key}); @override Widget build(BuildContext context) { final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonTextArea text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final hintTextColorKnob = context.knobs.nullable.options( label: "hintTextColor", description: "MoonColors variants for MoonTextArea hint text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hintTextColor = colorTable(context)[hintTextColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextArea background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextArea active border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonTextArea inactive border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; final errorColorKnob = context.knobs.nullable.options( label: "errorColor", description: "MoonColors variants for MoonTextArea in error state.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final errorColor = colorTable(context)[errorColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTextArea.", enabled: false, initial: 8, max: 32, ); final enabledKnob = context.knobs.boolean( label: "enabled", description: "Switch between enabled and disabled states.", initial: true, ); final expandsKnob = context.knobs.boolean( label: "expands", description: "Whether MoonTextArea can expand to fit its contents.", ); final showHelperKnob = context.knobs.boolean( label: "helper", description: "Show widget in MoonTextArea helper slot.", ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Form( child: Builder( builder: (BuildContext context) { return Column( mainAxisSize: MainAxisSize.min, children: [ MoonTextArea( enabled: enabledKnob, expands: expandsKnob, height: expandsKnob ? null : 200, textColor: textColor, hintTextColor: hintTextColor, backgroundColor: backgroundColor, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, errorColor: errorColor, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, hintText: "Enter your text here...", validator: (String? value) => value?.length != null && value!.length < 10 ? "The text should be longer than 10 characters." : null, onTapOutside: (PointerDownEvent _) => FocusManager.instance.primaryFocus?.unfocus(), helper: showHelperKnob ? const Text("Supporting text") : null, ), const SizedBox(height: 32), MoonFilledButton( label: const Text("Submit"), onTap: () => Form.of(context).validate(), ), ], ); }, ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/text_input.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class TextInputStory extends StatefulWidget { static const path = '/primitives/text_input'; const TextInputStory({super.key}); @override State createState() => _TextInputStoryState(); } class _TextInputStoryState extends State { final TextEditingController _textController = TextEditingController(); final TextEditingController _dateController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); bool _hidePassword = true; @override Widget build(BuildContext context) { final textInputSizeKnob = context.knobs.nullable.options( label: "textInputSize", description: "Size variants for MoonTextInput.", enabled: false, initial: MoonTextInputSize.md, options: const [ Option(label: "sm", value: MoonTextInputSize.sm), Option(label: "md", value: MoonTextInputSize.md), Option(label: "lg", value: MoonTextInputSize.lg), Option(label: "xl", value: MoonTextInputSize.xl), ], ); final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonTextInput text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final hintTextColorKnob = context.knobs.nullable.options( label: "hintTextColor", description: "MoonColors variants for MoonTextInput hint text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hintTextColor = colorTable(context)[hintTextColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextInput background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final activeBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextInput active border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBorderColor = colorTable(context)[activeBorderColorKnob ?? 40]; final inactiveBorderColorKnob = context.knobs.nullable.options( label: "inactiveBorderColor", description: "MoonColors variants for MoonTextInput inactive border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final inactiveBorderColor = colorTable(context)[inactiveBorderColorKnob ?? 40]; final hoverBorderColorKnob = context.knobs.nullable.options( label: "hoverBorderColor", description: "MoonColors variants for MoonTextInput border on hover.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hoverBorderColor = colorTable(context)[hoverBorderColorKnob ?? 40]; final errorColorKnob = context.knobs.nullable.options( label: "errorColor", description: "MoonColors variants for MoonTextInput in error state.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final errorColor = colorTable(context)[errorColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTextInput.", enabled: false, initial: 8, max: 32, ); final enabledKnob = context.knobs.boolean( label: "enabled", description: "Switch between enabled and disabled states.", initial: true, ); final hasFloatingLabelKnob = context.knobs.boolean( label: "hasFloatingLabel", description: "Whether MoonTextInput has floating label.", ); final showLeadingKnob = context.knobs.boolean( label: "leading", description: "Show widget in MoonTextInput leading slot.", initial: true, ); final showTrailingKnob = context.knobs.boolean( label: "trailing", description: "Show widget in MoonTextInput trailing slot.", initial: true, ); final showHelperKnob = context.knobs.boolean( label: "helper", description: "Show widget in MoonTextInput helper slot.", ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Form( child: Builder( builder: (BuildContext context) { return Column( mainAxisAlignment: MainAxisAlignment.center, children: [ MoonFormTextInput( controller: _textController, enabled: enabledKnob, textInputSize: textInputSizeKnob, hasFloatingLabel: hasFloatingLabelKnob, textColor: textColor, hintTextColor: hintTextColor, backgroundColor: backgroundColor, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, hoverBorderColor: hoverBorderColor, errorColor: errorColor, borderRadius: borderRadius, hintText: "Enter text (over 10 characters)", validator: (String? value) => value != null && value.length < 10 ? "The text should be longer than 10 characters." : null, onTapOutside: (PointerDownEvent _) => FocusManager.instance.primaryFocus?.unfocus(), leading: showLeadingKnob ? const Icon( MoonIcons.generic_search_24_light, size: 24, ) : null, trailing: showTrailingKnob ? MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( child: const Icon( MoonIcons.controls_close_small_24_light, size: 24, ), onTap: () => _textController.clear(), ), ) : null, helper: showHelperKnob ? const Text("Supporting text") : null, ), const SizedBox(height: 16), StatefulBuilder( builder: (context, setState) { return MoonFormTextInput( controller: _passwordController, enabled: enabledKnob, keyboardType: TextInputType.visiblePassword, obscureText: _hidePassword, textInputSize: textInputSizeKnob, hasFloatingLabel: hasFloatingLabelKnob, textColor: textColor, hintTextColor: hintTextColor, backgroundColor: backgroundColor, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, hoverBorderColor: hoverBorderColor, errorColor: errorColor, borderRadius: borderRadius, hintText: "Enter password (123abc)", validator: (String? value) => value != "123abc" ? "Wrong password." : null, onTapOutside: (PointerDownEvent _) => FocusManager.instance.primaryFocus?.unfocus(), leading: showLeadingKnob ? const Icon( MoonIcons.security_password_24_light, size: 24, ) : null, trailing: showTrailingKnob ? MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( child: IntrinsicWidth( child: Align( alignment: Alignment.centerRight, child: Text( _hidePassword ? "Show" : "Hide", style: DefaultTextStyle.of(context) .style .copyWith( decoration: TextDecoration.underline, ), ), ), ), onTap: () => setState( () => _hidePassword = !_hidePassword, ), ), ) : null, helper: showHelperKnob ? const Text("Supporting text") : null, ); }, ), const SizedBox(height: 16), MoonFormTextInput( readOnly: true, controller: _dateController, enabled: enabledKnob, textInputSize: textInputSizeKnob, textColor: textColor, hintTextColor: hintTextColor, backgroundColor: backgroundColor, activeBorderColor: activeBorderColor, inactiveBorderColor: inactiveBorderColor, hoverBorderColor: hoverBorderColor, errorColor: errorColor, borderRadius: borderRadius, hintText: "Pick a date", validator: (String? value) => value != null && value.isEmpty ? "Pick a date." : null, onTap: () async { final DateTime? pickedDate = await showDatePicker( context: context, initialDate: DateTime.now(), firstDate: DateTime.now(), lastDate: DateTime(2050), ); if (pickedDate != null) { _dateController.text = "${pickedDate.toLocal()}".split(" ")[0]; } }, leading: showLeadingKnob ? const Icon( MoonIcons.time_calendar_24_light, size: 24, ) : null, trailing: showTrailingKnob ? MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( child: const Icon( MoonIcons.controls_close_small_24_light, size: 24, ), onTap: () => _dateController.clear(), ), ) : null, helper: showHelperKnob ? const Text("Supporting text") : null, ), const SizedBox(height: 32), MoonFilledButton( label: const Text("Submit"), onTap: () => Form.of(context).validate(), ), ], ); }, ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/text_input_group.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class TextInputGroupStory extends StatefulWidget { static const path = '/primitives/text_input_group'; const TextInputGroupStory({super.key}); @override State createState() => _TextInputGroupStoryState(); } class _TextInputGroupStoryState extends State { final TextEditingController _textController = TextEditingController(); final TextEditingController _passwordController = TextEditingController(); bool _hidePassword = true; @override Widget build(BuildContext context) { final textColorKnob = context.knobs.nullable.options( label: "textColor", description: "MoonColors variants for MoonTextInputGroup text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final hintTextColorKnob = context.knobs.nullable.options( label: "hintTextColor", description: "MoonColors variants for MoonTextInputGroup hint text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final hintTextColor = colorTable(context)[hintTextColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTextInputGroup background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonTextInputGroup border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final activeChildrenBorderColorKnob = context.knobs.nullable.options( label: "activeBorderColor", description: "MoonColors variants for MoonTextInputGroup children active border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final activeBorderColor = colorTable(context)[activeChildrenBorderColorKnob ?? 40]; final errorBorderColorKnob = context.knobs.nullable.options( label: "errorBorderColor", description: "MoonColors variants for MoonTextInputGroup error state border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final errorBorderColor = colorTable(context)[errorBorderColorKnob ?? 40]; final errorColorKnob = context.knobs.nullable.options( label: "errorColor", description: "MoonColors variants for MoonTextInputGroup in error state.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final errorColor = colorTable(context)[errorColorKnob ?? 40]; final orientationKnob = context.knobs.nullable.options( label: "orientation", description: "MoonTextInputGroup orientation.", enabled: false, initial: MoonTextInputGroupOrientation.vertical, options: [ const Option( label: "vertical", value: MoonTextInputGroupOrientation.vertical, ), const Option( label: "horizontal", value: MoonTextInputGroupOrientation.horizontal, ), ], ); final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTextInputGroup.", enabled: false, initial: 8, max: 32, ); final enabledKnob = context.knobs.boolean( label: "enabled", description: "Switch between enabled and disabled states.", initial: true, ); final showHelperKnob = context.knobs.boolean( label: "helper", description: "Show widget in MoonTextInputGroup helper slot.", ); final BorderRadiusGeometry? borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Form( child: Builder( builder: (context) { return Column( mainAxisSize: MainAxisSize.min, children: [ MoonTextInputGroup( enabled: enabledKnob, backgroundColor: backgroundColor, borderColor: borderColor, errorColor: errorColor, borderRadius: borderRadius, orientation: orientationKnob ?? MoonTextInputGroupOrientation.vertical, helper: showHelperKnob ? const Text("Supporting text") : null, children: [ MoonFormTextInput( textInputSize: MoonTextInputSize.xl, controller: _textController, enabled: enabledKnob, hasFloatingLabel: true, textColor: textColor, hintTextColor: hintTextColor, activeBorderColor: activeBorderColor, errorBorderColor: errorBorderColor, errorColor: errorColor, borderRadius: borderRadius, hintText: "Enter text (over 10 characters)", validator: (String? value) => value?.length != null && value!.length < 10 ? "The text should be longer than 10 characters." : null, onTapOutside: (PointerDownEvent _) => FocusManager.instance.primaryFocus?.unfocus(), leading: const Icon( MoonIcons.generic_search_24_light, size: 24, ), trailing: MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( child: const Icon( MoonIcons.controls_close_small_24_light, size: 24, ), onTap: () => _textController.clear(), ), ), ), MoonFormTextInput( textInputSize: MoonTextInputSize.xl, controller: _passwordController, enabled: enabledKnob, keyboardType: TextInputType.visiblePassword, obscureText: _hidePassword, hasFloatingLabel: true, textColor: textColor, hintTextColor: hintTextColor, activeBorderColor: activeBorderColor, errorColor: errorColor, borderRadius: borderRadius, hintText: "Enter password (123abc)", validator: (String? value) => value != "123abc" ? "Wrong password." : null, onTapOutside: (PointerDownEvent _) => FocusManager.instance.primaryFocus?.unfocus(), leading: const Icon( MoonIcons.security_password_24_light, size: 24, ), trailing: MouseRegion( cursor: SystemMouseCursors.click, child: GestureDetector( child: IntrinsicWidth( child: Align( alignment: Alignment.centerRight, child: Text( _hidePassword ? "Show" : "Hide", style: DefaultTextStyle.of(context) .style .copyWith( decoration: TextDecoration.underline, ), ), ), ), onTap: () => setState(() => _hidePassword = !_hidePassword), ), ), ), ], ), const SizedBox(height: 32), MoonFilledButton( label: const Text("Submit"), onTap: () => Form.of(context).validate(), ), ], ); }, ), ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/toast.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class ToastStory extends StatelessWidget { static const path = '/primitives/toast'; const ToastStory({super.key}); @override Widget build(BuildContext context) { final customLabelTextKnob = context.knobs.text( label: "MoonToast label text", initial: "Custom MoonToast text", ); final toastAlignmentKnob = context.knobs.nullable.options( label: "toastAlignment", description: "Alignment (position) for MoonToast.", enabled: false, initial: Alignment.bottomCenter, options: const [ Option(label: "topLeft", value: Alignment.topLeft), Option(label: "topCenter", value: Alignment.topCenter), Option(label: "topRight", value: Alignment.topRight), Option(label: "centerLeft", value: Alignment.centerLeft), Option(label: "center", value: Alignment.center), Option(label: "centerRight", value: Alignment.centerRight), Option(label: "bottomLeft", value: Alignment.bottomLeft), Option(label: "bottomCenter", value: Alignment.bottomCenter), Option(label: "bottomRight", value: Alignment.bottomRight), ], ); final toastVariantKnob = context.knobs.nullable.options( label: "variant", description: "The color variant for MoonToast.", enabled: false, initial: MoonToastVariant.original, options: const [ Option(label: "original", value: MoonToastVariant.original), Option(label: "inverted", value: MoonToastVariant.inverted), ], ); final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonToast text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final iconColorKnob = context.knobs.nullable.options( label: "Icon color", description: "MoonColors variants for MoonToast icon.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final iconColor = colorTable(context)[iconColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonToast background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonToast.", enabled: false, initial: 8, max: 32, ); final displayDurationKnob = context.knobs.nullable.sliderInt( label: "displayDuration", description: "Display duration for MoonToast.", enabled: false, initial: 3, min: 1, max: 10, ); final widthKnob = context.knobs.nullable.slider( label: "width", description: "Width for MoonToast. If null, the toast will be as wide as its " "children.", enabled: false, initial: 230, max: MediaQuery.of(context).size.width, ); final isPersistentKnob = context.knobs.boolean( label: "isPersistent", description: "Whether MoonToast is persistent across screens (will not behave as " "expected only in Storybook).", ); final useSafeAreaKnob = context.knobs.boolean( label: "useSafeArea", description: "Whether MoonToast respects the SafeArea (takes into account notches " "and native system bars).", initial: true, ); final showContentKnob = context.knobs.boolean( label: "content", description: "Show widget in MoonToast content slot.", ); return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64), child: Builder( builder: (BuildContext context) { return MoonFilledButton( label: const Text("Tap me"), onTap: () { MoonToast.show( context, backgroundColor: backgroundColor, isPersistent: isPersistentKnob, useSafeArea: useSafeAreaKnob, width: widthKnob, toastAlignment: toastAlignmentKnob ?? Alignment.bottomCenter, variant: toastVariantKnob ?? MoonToastVariant.original, displayDuration: displayDurationKnob != null ? Duration(seconds: displayDurationKnob) : null, borderRadius: borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null, leading: Icon( MoonIcons.generic_info_24_light, color: iconColor, ), label: Text( customLabelTextKnob, style: TextStyle(color: textColor), ), trailing: Icon( MoonIcons.generic_star_24_light, color: iconColor, ), content: showContentKnob ? Align( alignment: AlignmentDirectional.centerStart, child: Text( "Here goes MoonToast content", style: TextStyle(color: textColor), ), ) : null, ); }, ); }, ), ), ); } } ================================================ FILE: example/lib/src/storybook/stories/primitives/tooltip.dart ================================================ import 'package:example/src/storybook/common/color_options.dart'; import 'package:example/src/storybook/common/widgets/text_divider.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class TooltipStory extends StatefulWidget { static const path = '/primitives/tooltip'; const TooltipStory({super.key}); @override State createState() => _TooltipStoryState(); } class _TooltipStoryState extends State { bool showOnTap = false; bool showOnLongPress = false; @override Widget build(BuildContext context) { final customLabelTextKnob = context.knobs.text( label: "Custom MoonTooltip text", initial: "Custom MoonTooltip text", ); final tooltipPositionKnob = context.knobs.nullable.options( label: "tooltipPosition", description: "Position variants for MoonTooltip.", enabled: false, initial: MoonTooltipPosition.top, options: const [ Option(label: "top", value: MoonTooltipPosition.top), Option(label: "bottom", value: MoonTooltipPosition.bottom), Option(label: "left", value: MoonTooltipPosition.left), Option(label: "right", value: MoonTooltipPosition.right), Option(label: "topLeft", value: MoonTooltipPosition.topLeft), Option(label: "topRight", value: MoonTooltipPosition.topRight), Option(label: "bottomLeft", value: MoonTooltipPosition.bottomLeft), Option(label: "bottomRight", value: MoonTooltipPosition.bottomRight), Option(label: "vertical", value: MoonTooltipPosition.vertical), Option(label: "horizontal", value: MoonTooltipPosition.horizontal), ], ); final textColorKnob = context.knobs.nullable.options( label: "Text color", description: "MoonColors variants for MoonTooltip text.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final textColor = colorTable(context)[textColorKnob ?? 40]; final backgroundColorKnob = context.knobs.nullable.options( label: "backgroundColor", description: "MoonColors variants for MoonTooltip background.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final backgroundColor = colorTable(context)[backgroundColorKnob ?? 40]; final borderColorKnob = context.knobs.nullable.options( label: "borderColor", description: "MoonColors variants for MoonTooltip border.", enabled: false, initial: 0, // piccolo options: colorOptions, ); final borderColor = colorTable(context)[borderColorKnob ?? 40]; final borderRadiusKnob = context.knobs.nullable.sliderInt( label: "borderRadius", description: "Border radius for MoonTooltip.", enabled: false, initial: 8, max: 32, ); final arrowOffsetKnob = context.knobs.nullable.slider( label: "arrowOffsetValue", description: "Offset for MoonTooltip arrow.", enabled: false, initial: 0, min: -100, max: 100, ); final arrowTipDistanceKnob = context.knobs.nullable.slider( label: "arrowTipDistance", description: "Distance to target child widget.", enabled: false, initial: 8, max: 100, ); final arrowBaseWidthKnob = context.knobs.nullable.slider( label: "arrowBaseWidth", description: "Base width for MoonTooltip arrow.", enabled: false, initial: 16, max: 100, ); final arrowLengthKnob = context.knobs.nullable.slider( label: "arrowLength", description: "Length for MoonTooltip arrow.", enabled: false, initial: 8, max: 100, ); final showShadowKnob = context.knobs.boolean( label: "tooltipShadows", description: "Show shadows for MoonTooltip.", initial: true, ); final showArrowKnob = context.knobs.boolean( label: "hasArrow", description: "Show MoonTooltip with an arrow (tail).", initial: true, ); final borderRadius = borderRadiusKnob != null ? BorderRadius.circular(borderRadiusKnob.toDouble()) : null; return Center( child: SingleChildScrollView( padding: const EdgeInsets.symmetric(vertical: 64.0, horizontal: 16.0), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ const TextDivider( text: "MoonTooltip", paddingTop: 0, ), StatefulBuilder( builder: (context, setState) { return MoonTooltip( show: showOnTap, backgroundColor: backgroundColor, borderWidth: 1, borderColor: borderColor ?? Colors.transparent, borderRadius: borderRadius, tooltipPosition: tooltipPositionKnob ?? MoonTooltipPosition.top, hasArrow: showArrowKnob, arrowBaseWidth: arrowBaseWidthKnob, arrowLength: arrowLengthKnob, arrowOffsetValue: arrowOffsetKnob ?? 0, arrowTipDistance: arrowTipDistanceKnob, tooltipShadows: showShadowKnob == true ? null : [], content: Text( customLabelTextKnob, style: TextStyle(color: textColor), ), child: MoonFilledButton( onTap: () => setState(() => showOnTap = true), label: const Text("Tap me"), ), ); }, ), const TextDivider(text: "MoonTooltip is displayed on long-press"), MoonTooltip( show: showOnLongPress, backgroundColor: backgroundColor, borderWidth: 1, borderColor: borderColor ?? Colors.transparent, borderRadius: borderRadius, tooltipPosition: tooltipPositionKnob ?? MoonTooltipPosition.top, hasArrow: showArrowKnob, arrowBaseWidth: arrowBaseWidthKnob, arrowLength: arrowLengthKnob, arrowOffsetValue: arrowOffsetKnob ?? 0, arrowTipDistance: arrowTipDistanceKnob, tooltipShadows: showShadowKnob == true ? null : [], content: Text( customLabelTextKnob, style: TextStyle(color: textColor), ), child: MoonChip( borderRadius: BorderRadius.circular(20), backgroundColor: context.moonColors!.hit, leading: const Icon(MoonIcons.other_frame_24_light), textColor: context.moonColors!.goten, label: const Text("MoonChip"), onLongPress: () => setState(() => showOnLongPress = true), ), ), ], ), ), ); } } ================================================ FILE: example/lib/src/storybook/storybook.dart ================================================ import 'package:example/src/storybook/common/constants.dart'; import 'package:example/src/storybook/common/widgets/logo.dart'; import 'package:example/src/storybook/common/widgets/version.dart'; import 'package:example/src/storybook/routing/route_aware_stories.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:storybook_flutter/storybook_flutter.dart'; class StorybookPage extends StatelessWidget { const StorybookPage({super.key}); static final _plugins = initializePlugins( enableCodeView: true, enableCompactLayoutDeviceFrame: false, initialDeviceFrameData: ( isFrameVisible: true, device: Devices.ios.iPhone12ProMax, orientation: Orientation.portrait, ), ); @override Widget build(BuildContext context) { return Storybook( initialStory: "Home", plugins: _plugins, enableLayout: false, autoLayoutThreshold: storybookAutoLayoutThreshold, canvasColor: Colors.white, logoWidget: const MoonLogoWidget(), routeWrapperBuilder: RouteWrapperBuilder( title: "Moon Design for Flutter", theme: ThemeData.light().copyWith( scaffoldBackgroundColor: const Color(0xFFF6F7F9), // Gohan light. extensions: >[ MoonTheme( tokens: MoonTokens.light.copyWith( colors: mdsLightColors, typography: MoonTypography.typography.copyWith( heading: MoonTypography.typography.heading.apply( fontFamily: "DMSans", fontWeightDelta: -1, fontVariations: [const FontVariation('wght', 500)], ), body: MoonTypography.typography.body.apply( fontFamily: "DMSans", ), ), ), ), ], ), darkTheme: ThemeData.dark().copyWith( scaffoldBackgroundColor: const Color(0xFF1F1F1F), // Gohan dark. extensions: >[ MoonTheme( tokens: MoonTokens.dark.copyWith( colors: mdsDarkColors, typography: MoonTypography.typography.copyWith( heading: MoonTypography.typography.heading.apply( fontFamily: "DMSans", fontWeightDelta: -1, fontVariations: [const FontVariation('wght', 500)], ), body: MoonTypography.typography.body.apply( fontFamily: "DMSans", ), ), ), ), ], ), wrapperBuilder: (BuildContext context, Widget? child) => Scaffold( extendBody: true, extendBodyBehindAppBar: true, resizeToAvoidBottomInset: true, body: SafeArea( top: false, bottom: false, child: child ?? const SizedBox.shrink(), ), ), ), brandingWidget: const MoonVersionWidget(), stories: routeAwareStories, ); } } ================================================ FILE: example/linux/.gitignore ================================================ flutter/ephemeral ================================================ FILE: example/linux/CMakeLists.txt ================================================ # Project-level configuration. cmake_minimum_required(VERSION 3.10) project(runner LANGUAGES CXX) # The name of the executable created for the application. Change this to change # the on-disk name of your application. set(BINARY_NAME "example") # The unique GTK application identifier for this application. See: # https://wiki.gnome.org/HowDoI/ChooseApplicationID set(APPLICATION_ID "com.example.example") # Explicitly opt in to modern CMake behaviors to avoid warnings with recent # versions of CMake. cmake_policy(SET CMP0063 NEW) # Load bundled libraries from the lib/ directory relative to the binary. set(CMAKE_INSTALL_RPATH "$ORIGIN/lib") # Root filesystem for cross-building. if(FLUTTER_TARGET_PLATFORM_SYSROOT) set(CMAKE_SYSROOT ${FLUTTER_TARGET_PLATFORM_SYSROOT}) set(CMAKE_FIND_ROOT_PATH ${CMAKE_SYSROOT}) set(CMAKE_FIND_ROOT_PATH_MODE_PROGRAM NEVER) set(CMAKE_FIND_ROOT_PATH_MODE_PACKAGE ONLY) set(CMAKE_FIND_ROOT_PATH_MODE_LIBRARY ONLY) set(CMAKE_FIND_ROOT_PATH_MODE_INCLUDE ONLY) endif() # Define build configuration options. if(NOT CMAKE_BUILD_TYPE AND NOT CMAKE_CONFIGURATION_TYPES) set(CMAKE_BUILD_TYPE "Debug" CACHE STRING "Flutter build mode" FORCE) set_property(CACHE CMAKE_BUILD_TYPE PROPERTY STRINGS "Debug" "Profile" "Release") endif() # Compilation settings that should be applied to most targets. # # Be cautious about adding new options here, as plugins use this function by # default. In most cases, you should add new options to specific targets instead # of modifying this function. function(APPLY_STANDARD_SETTINGS TARGET) target_compile_features(${TARGET} PUBLIC cxx_std_14) target_compile_options(${TARGET} PRIVATE -Wall -Werror) target_compile_options(${TARGET} PRIVATE "$<$>:-O3>") target_compile_definitions(${TARGET} PRIVATE "$<$>:NDEBUG>") endfunction() # Flutter library and tool build rules. set(FLUTTER_MANAGED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/flutter") add_subdirectory(${FLUTTER_MANAGED_DIR}) # System-level dependencies. find_package(PkgConfig REQUIRED) pkg_check_modules(GTK REQUIRED IMPORTED_TARGET gtk+-3.0) add_definitions(-DAPPLICATION_ID="${APPLICATION_ID}") # Define the application target. To change its name, change BINARY_NAME above, # not the value here, or `flutter run` will no longer work. # # Any new source files that you add to the application should be added here. add_executable(${BINARY_NAME} "main.cc" "my_application.cc" "${FLUTTER_MANAGED_DIR}/generated_plugin_registrant.cc" ) # Apply the standard set of build settings. This can be removed for applications # that need different build settings. apply_standard_settings(${BINARY_NAME}) # Add dependency libraries. Add any application-specific dependencies here. target_link_libraries(${BINARY_NAME} PRIVATE flutter) target_link_libraries(${BINARY_NAME} PRIVATE PkgConfig::GTK) # Run the Flutter tool portions of the build. This must not be removed. add_dependencies(${BINARY_NAME} flutter_assemble) # Only the install-generated bundle's copy of the executable will launch # correctly, since the resources must in the right relative locations. To avoid # people trying to run the unbundled copy, put it in a subdirectory instead of # the default top-level location. set_target_properties(${BINARY_NAME} PROPERTIES RUNTIME_OUTPUT_DIRECTORY "${CMAKE_BINARY_DIR}/intermediates_do_not_run" ) # Generated plugin build rules, which manage building the plugins and adding # them to the application. include(flutter/generated_plugins.cmake) # === Installation === # By default, "installing" just makes a relocatable bundle in the build # directory. set(BUILD_BUNDLE_DIR "${PROJECT_BINARY_DIR}/bundle") if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT) set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE) endif() # Start with a clean build bundle directory every time. install(CODE " file(REMOVE_RECURSE \"${BUILD_BUNDLE_DIR}/\") " COMPONENT Runtime) set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data") set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}/lib") install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}" COMPONENT Runtime) install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime) install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}" COMPONENT Runtime) foreach(bundled_library ${PLUGIN_BUNDLED_LIBRARIES}) install(FILES "${bundled_library}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}" COMPONENT Runtime) endforeach(bundled_library) # Fully re-copy the assets directory on each build to avoid having stale files # from a previous install. set(FLUTTER_ASSET_DIR_NAME "flutter_assets") install(CODE " file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\") " COMPONENT Runtime) install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime) # Install the AOT library on non-Debug builds only. if(NOT CMAKE_BUILD_TYPE MATCHES "Debug") install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}" COMPONENT Runtime) endif() ================================================ FILE: example/linux/flutter/CMakeLists.txt ================================================ # This file controls Flutter-level build steps. It should not be edited. cmake_minimum_required(VERSION 3.10) set(EPHEMERAL_DIR "${CMAKE_CURRENT_SOURCE_DIR}/ephemeral") # Configuration provided via flutter tool. include(${EPHEMERAL_DIR}/generated_config.cmake) # TODO: Move the rest of this into files in ephemeral. See # https://github.com/flutter/flutter/issues/57146. # Serves the same purpose as list(TRANSFORM ... PREPEND ...), # which isn't available in 3.10. function(list_prepend LIST_NAME PREFIX) set(NEW_LIST "") foreach(element ${${LIST_NAME}}) list(APPEND NEW_LIST "${PREFIX}${element}") endforeach(element) set(${LIST_NAME} "${NEW_LIST}" PARENT_SCOPE) endfunction() # === Flutter Library === # System-level dependencies. find_package(PkgConfig REQUIRED) pkg_check_modules(GTK REQUIRED IMPORTED_TARGET gtk+-3.0) pkg_check_modules(GLIB REQUIRED IMPORTED_TARGET glib-2.0) pkg_check_modules(GIO REQUIRED IMPORTED_TARGET gio-2.0) set(FLUTTER_LIBRARY "${EPHEMERAL_DIR}/libflutter_linux_gtk.so") # Published to parent scope for install step. set(FLUTTER_LIBRARY ${FLUTTER_LIBRARY} PARENT_SCOPE) set(FLUTTER_ICU_DATA_FILE "${EPHEMERAL_DIR}/icudtl.dat" PARENT_SCOPE) set(PROJECT_BUILD_DIR "${PROJECT_DIR}/build/" PARENT_SCOPE) set(AOT_LIBRARY "${PROJECT_DIR}/build/lib/libapp.so" PARENT_SCOPE) list(APPEND FLUTTER_LIBRARY_HEADERS "fl_basic_message_channel.h" "fl_binary_codec.h" "fl_binary_messenger.h" "fl_dart_project.h" "fl_engine.h" "fl_json_message_codec.h" "fl_json_method_codec.h" "fl_message_codec.h" "fl_method_call.h" "fl_method_channel.h" "fl_method_codec.h" "fl_method_response.h" "fl_plugin_registrar.h" "fl_plugin_registry.h" "fl_standard_message_codec.h" "fl_standard_method_codec.h" "fl_string_codec.h" "fl_value.h" "fl_view.h" "flutter_linux.h" ) list_prepend(FLUTTER_LIBRARY_HEADERS "${EPHEMERAL_DIR}/flutter_linux/") add_library(flutter INTERFACE) target_include_directories(flutter INTERFACE "${EPHEMERAL_DIR}" ) target_link_libraries(flutter INTERFACE "${FLUTTER_LIBRARY}") target_link_libraries(flutter INTERFACE PkgConfig::GTK PkgConfig::GLIB PkgConfig::GIO ) add_dependencies(flutter flutter_assemble) # === Flutter tool backend === # _phony_ is a non-existent file to force this command to run every time, # since currently there's no way to get a full input/output list from the # flutter tool. add_custom_command( OUTPUT ${FLUTTER_LIBRARY} ${FLUTTER_LIBRARY_HEADERS} ${CMAKE_CURRENT_BINARY_DIR}/_phony_ COMMAND ${CMAKE_COMMAND} -E env ${FLUTTER_TOOL_ENVIRONMENT} "${FLUTTER_ROOT}/packages/flutter_tools/bin/tool_backend.sh" ${FLUTTER_TARGET_PLATFORM} ${CMAKE_BUILD_TYPE} VERBATIM ) add_custom_target(flutter_assemble DEPENDS "${FLUTTER_LIBRARY}" ${FLUTTER_LIBRARY_HEADERS} ) ================================================ FILE: example/linux/flutter/generated_plugin_registrant.cc ================================================ // // Generated file. Do not edit. // // clang-format off #include "generated_plugin_registrant.h" void fl_register_plugins(FlPluginRegistry* registry) { } ================================================ FILE: example/linux/flutter/generated_plugin_registrant.h ================================================ // // Generated file. Do not edit. // // clang-format off #ifndef GENERATED_PLUGIN_REGISTRANT_ #define GENERATED_PLUGIN_REGISTRANT_ #include // Registers Flutter plugins. void fl_register_plugins(FlPluginRegistry* registry); #endif // GENERATED_PLUGIN_REGISTRANT_ ================================================ FILE: example/linux/flutter/generated_plugins.cmake ================================================ # # Generated file, do not edit. # list(APPEND FLUTTER_PLUGIN_LIST ) list(APPEND FLUTTER_FFI_PLUGIN_LIST ) set(PLUGIN_BUNDLED_LIBRARIES) foreach(plugin ${FLUTTER_PLUGIN_LIST}) add_subdirectory(flutter/ephemeral/.plugin_symlinks/${plugin}/linux plugins/${plugin}) target_link_libraries(${BINARY_NAME} PRIVATE ${plugin}_plugin) list(APPEND PLUGIN_BUNDLED_LIBRARIES $) list(APPEND PLUGIN_BUNDLED_LIBRARIES ${${plugin}_bundled_libraries}) endforeach(plugin) foreach(ffi_plugin ${FLUTTER_FFI_PLUGIN_LIST}) add_subdirectory(flutter/ephemeral/.plugin_symlinks/${ffi_plugin}/linux plugins/${ffi_plugin}) list(APPEND PLUGIN_BUNDLED_LIBRARIES ${${ffi_plugin}_bundled_libraries}) endforeach(ffi_plugin) ================================================ FILE: example/linux/main.cc ================================================ #include "my_application.h" int main(int argc, char** argv) { g_autoptr(MyApplication) app = my_application_new(); return g_application_run(G_APPLICATION(app), argc, argv); } ================================================ FILE: example/linux/my_application.cc ================================================ #include "my_application.h" #include #ifdef GDK_WINDOWING_X11 #include #endif #include "flutter/generated_plugin_registrant.h" struct _MyApplication { GtkApplication parent_instance; char** dart_entrypoint_arguments; }; G_DEFINE_TYPE(MyApplication, my_application, GTK_TYPE_APPLICATION) // Implements GApplication::activate. static void my_application_activate(GApplication* application) { MyApplication* self = MY_APPLICATION(application); GtkWindow* window = GTK_WINDOW(gtk_application_window_new(GTK_APPLICATION(application))); // Use a header bar when running in GNOME as this is the common style used // by applications and is the setup most users will be using (e.g. Ubuntu // desktop). // If running on X and not using GNOME then just use a traditional title bar // in case the window manager does more exotic layout, e.g. tiling. // If running on Wayland assume the header bar will work (may need changing // if future cases occur). gboolean use_header_bar = TRUE; #ifdef GDK_WINDOWING_X11 GdkScreen* screen = gtk_window_get_screen(window); if (GDK_IS_X11_SCREEN(screen)) { const gchar* wm_name = gdk_x11_screen_get_window_manager_name(screen); if (g_strcmp0(wm_name, "GNOME Shell") != 0) { use_header_bar = FALSE; } } #endif if (use_header_bar) { GtkHeaderBar* header_bar = GTK_HEADER_BAR(gtk_header_bar_new()); gtk_widget_show(GTK_WIDGET(header_bar)); gtk_header_bar_set_title(header_bar, "example"); gtk_header_bar_set_show_close_button(header_bar, TRUE); gtk_window_set_titlebar(window, GTK_WIDGET(header_bar)); } else { gtk_window_set_title(window, "example"); } gtk_window_set_default_size(window, 1280, 720); gtk_widget_show(GTK_WIDGET(window)); g_autoptr(FlDartProject) project = fl_dart_project_new(); fl_dart_project_set_dart_entrypoint_arguments(project, self->dart_entrypoint_arguments); FlView* view = fl_view_new(project); gtk_widget_show(GTK_WIDGET(view)); gtk_container_add(GTK_CONTAINER(window), GTK_WIDGET(view)); fl_register_plugins(FL_PLUGIN_REGISTRY(view)); gtk_widget_grab_focus(GTK_WIDGET(view)); } // Implements GApplication::local_command_line. static gboolean my_application_local_command_line(GApplication* application, gchar*** arguments, int* exit_status) { MyApplication* self = MY_APPLICATION(application); // Strip out the first argument as it is the binary name. self->dart_entrypoint_arguments = g_strdupv(*arguments + 1); g_autoptr(GError) error = nullptr; if (!g_application_register(application, nullptr, &error)) { g_warning("Failed to register: %s", error->message); *exit_status = 1; return TRUE; } g_application_activate(application); *exit_status = 0; return TRUE; } // Implements GObject::dispose. static void my_application_dispose(GObject* object) { MyApplication* self = MY_APPLICATION(object); g_clear_pointer(&self->dart_entrypoint_arguments, g_strfreev); G_OBJECT_CLASS(my_application_parent_class)->dispose(object); } static void my_application_class_init(MyApplicationClass* klass) { G_APPLICATION_CLASS(klass)->activate = my_application_activate; G_APPLICATION_CLASS(klass)->local_command_line = my_application_local_command_line; G_OBJECT_CLASS(klass)->dispose = my_application_dispose; } static void my_application_init(MyApplication* self) {} MyApplication* my_application_new() { return MY_APPLICATION(g_object_new(my_application_get_type(), "application-id", APPLICATION_ID, "flags", G_APPLICATION_NON_UNIQUE, nullptr)); } ================================================ FILE: example/linux/my_application.h ================================================ #ifndef FLUTTER_MY_APPLICATION_H_ #define FLUTTER_MY_APPLICATION_H_ #include G_DECLARE_FINAL_TYPE(MyApplication, my_application, MY, APPLICATION, GtkApplication) /** * my_application_new: * * Creates a new Flutter-based application. * * Returns: a new #MyApplication. */ MyApplication* my_application_new(); #endif // FLUTTER_MY_APPLICATION_H_ ================================================ FILE: example/macos/.gitignore ================================================ # Flutter-related **/Flutter/ephemeral/ **/Pods/ # Xcode-related **/dgph **/xcuserdata/ ================================================ FILE: example/macos/Flutter/Flutter-Debug.xcconfig ================================================ #include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig" #include "ephemeral/Flutter-Generated.xcconfig" ================================================ FILE: example/macos/Flutter/Flutter-Release.xcconfig ================================================ #include? "Pods/Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig" #include "ephemeral/Flutter-Generated.xcconfig" ================================================ FILE: example/macos/Flutter/GeneratedPluginRegistrant.swift ================================================ // // Generated file. Do not edit. // import FlutterMacOS import Foundation import package_info_plus import path_provider_foundation import shared_preferences_foundation func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) { FLTPackageInfoPlusPlugin.register(with: registry.registrar(forPlugin: "FLTPackageInfoPlusPlugin")) PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin")) SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin")) } ================================================ FILE: example/macos/Podfile ================================================ platform :osx, '10.14' # CocoaPods analytics sends network stats synchronously affecting flutter build latency. ENV['COCOAPODS_DISABLE_STATS'] = 'true' project 'Runner', { 'Debug' => :debug, 'Profile' => :release, 'Release' => :release, } def flutter_root generated_xcode_build_settings_path = File.expand_path(File.join('..', 'Flutter', 'ephemeral', 'Flutter-Generated.xcconfig'), __FILE__) unless File.exist?(generated_xcode_build_settings_path) raise "#{generated_xcode_build_settings_path} must exist. If you're running pod install manually, make sure \"flutter pub get\" is executed first" end File.foreach(generated_xcode_build_settings_path) do |line| matches = line.match(/FLUTTER_ROOT\=(.*)/) return matches[1].strip if matches end raise "FLUTTER_ROOT not found in #{generated_xcode_build_settings_path}. Try deleting Flutter-Generated.xcconfig, then run \"flutter pub get\"" end require File.expand_path(File.join('packages', 'flutter_tools', 'bin', 'podhelper'), flutter_root) flutter_macos_podfile_setup target 'Runner' do use_frameworks! use_modular_headers! flutter_install_all_macos_pods File.dirname(File.realpath(__FILE__)) end post_install do |installer| installer.pods_project.targets.each do |target| flutter_additional_macos_build_settings(target) end end ================================================ FILE: example/macos/Runner/AppDelegate.swift ================================================ import Cocoa import FlutterMacOS @NSApplicationMain class AppDelegate: FlutterAppDelegate { override func applicationShouldTerminateAfterLastWindowClosed(_ sender: NSApplication) -> Bool { return true } } ================================================ FILE: example/macos/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json ================================================ { "images" : [ { "size" : "16x16", "idiom" : "mac", "filename" : "app_icon_16.png", "scale" : "1x" }, { "size" : "16x16", "idiom" : "mac", "filename" : "app_icon_32.png", "scale" : "2x" }, { "size" : "32x32", "idiom" : "mac", "filename" : "app_icon_32.png", "scale" : "1x" }, { "size" : "32x32", "idiom" : "mac", "filename" : "app_icon_64.png", "scale" : "2x" }, { "size" : "128x128", "idiom" : "mac", "filename" : "app_icon_128.png", "scale" : "1x" }, { "size" : "128x128", "idiom" : "mac", "filename" : "app_icon_256.png", "scale" : "2x" }, { "size" : "256x256", "idiom" : "mac", "filename" : "app_icon_256.png", "scale" : "1x" }, { "size" : "256x256", "idiom" : "mac", "filename" : "app_icon_512.png", "scale" : "2x" }, { "size" : "512x512", "idiom" : "mac", "filename" : "app_icon_512.png", "scale" : "1x" }, { "size" : "512x512", "idiom" : "mac", "filename" : "app_icon_1024.png", "scale" : "2x" } ], "info" : { "version" : 1, "author" : "xcode" } } ================================================ FILE: example/macos/Runner/Base.lproj/MainMenu.xib ================================================ ================================================ FILE: example/macos/Runner/Configs/AppInfo.xcconfig ================================================ // Application-level settings for the Runner target. // // This may be replaced with something auto-generated from metadata (e.g., pubspec.yaml) in the // future. If not, the values below would default to using the project name when this becomes a // 'flutter create' template. // The application's name. By default this is also the title of the Flutter window. PRODUCT_NAME = example // The application's bundle identifier PRODUCT_BUNDLE_IDENTIFIER = com.example.example // The copyright displayed in application information PRODUCT_COPYRIGHT = Copyright © 2023 com.example. All rights reserved. ================================================ FILE: example/macos/Runner/Configs/Debug.xcconfig ================================================ #include "../../Flutter/Flutter-Debug.xcconfig" #include "Warnings.xcconfig" ================================================ FILE: example/macos/Runner/Configs/Release.xcconfig ================================================ #include "../../Flutter/Flutter-Release.xcconfig" #include "Warnings.xcconfig" ================================================ FILE: example/macos/Runner/Configs/Warnings.xcconfig ================================================ WARNING_CFLAGS = -Wall -Wconditional-uninitialized -Wnullable-to-nonnull-conversion -Wmissing-method-return-type -Woverlength-strings GCC_WARN_UNDECLARED_SELECTOR = YES CLANG_UNDEFINED_BEHAVIOR_SANITIZER_NULLABILITY = YES CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE CLANG_WARN__DUPLICATE_METHOD_MATCH = YES CLANG_WARN_PRAGMA_PACK = YES CLANG_WARN_STRICT_PROTOTYPES = YES CLANG_WARN_COMMA = YES GCC_WARN_STRICT_SELECTOR_MATCH = YES CLANG_WARN_OBJC_REPEATED_USE_OF_WEAK = YES CLANG_WARN_OBJC_IMPLICIT_RETAIN_SELF = YES GCC_WARN_SHADOW = YES CLANG_WARN_UNREACHABLE_CODE = YES ================================================ FILE: example/macos/Runner/DebugProfile.entitlements ================================================ com.apple.security.app-sandbox com.apple.security.cs.allow-jit com.apple.security.network.server ================================================ FILE: example/macos/Runner/Info.plist ================================================ CFBundleDevelopmentRegion $(DEVELOPMENT_LANGUAGE) CFBundleExecutable $(EXECUTABLE_NAME) CFBundleIconFile CFBundleIdentifier $(PRODUCT_BUNDLE_IDENTIFIER) CFBundleInfoDictionaryVersion 6.0 CFBundleName $(PRODUCT_NAME) CFBundlePackageType APPL CFBundleShortVersionString $(FLUTTER_BUILD_NAME) CFBundleVersion $(FLUTTER_BUILD_NUMBER) LSMinimumSystemVersion $(MACOSX_DEPLOYMENT_TARGET) NSHumanReadableCopyright $(PRODUCT_COPYRIGHT) NSMainNibFile MainMenu NSPrincipalClass NSApplication ================================================ FILE: example/macos/Runner/MainFlutterWindow.swift ================================================ import Cocoa import FlutterMacOS class MainFlutterWindow: NSWindow { override func awakeFromNib() { let flutterViewController = FlutterViewController.init() let windowFrame = self.frame self.contentViewController = flutterViewController self.setFrame(windowFrame, display: true) RegisterGeneratedPlugins(registry: flutterViewController) super.awakeFromNib() } } ================================================ FILE: example/macos/Runner/Release.entitlements ================================================ com.apple.security.app-sandbox ================================================ FILE: example/macos/Runner.xcodeproj/project.pbxproj ================================================ // !$*UTF8*$! { archiveVersion = 1; classes = { }; objectVersion = 54; objects = { /* Begin PBXAggregateTarget section */ 33CC111A2044C6BA0003C045 /* Flutter Assemble */ = { isa = PBXAggregateTarget; buildConfigurationList = 33CC111B2044C6BA0003C045 /* Build configuration list for PBXAggregateTarget "Flutter Assemble" */; buildPhases = ( 33CC111E2044C6BF0003C045 /* ShellScript */, ); dependencies = ( ); name = "Flutter Assemble"; productName = FLX; }; /* End PBXAggregateTarget section */ /* Begin PBXBuildFile section */ 1EF1E79BCD11BF26546B861E /* Pods_Runner.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = DA88C8C2270ADA5901582BC8 /* Pods_Runner.framework */; }; 335BBD1B22A9A15E00E9071D /* GeneratedPluginRegistrant.swift in Sources */ = {isa = PBXBuildFile; fileRef = 335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */; }; 33CC10F12044A3C60003C045 /* AppDelegate.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC10F02044A3C60003C045 /* AppDelegate.swift */; }; 33CC10F32044A3C60003C045 /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F22044A3C60003C045 /* Assets.xcassets */; }; 33CC10F62044A3C60003C045 /* MainMenu.xib in Resources */ = {isa = PBXBuildFile; fileRef = 33CC10F42044A3C60003C045 /* MainMenu.xib */; }; 33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */ = {isa = PBXBuildFile; fileRef = 33CC11122044BFA00003C045 /* MainFlutterWindow.swift */; }; /* End PBXBuildFile section */ /* Begin PBXContainerItemProxy section */ 33CC111F2044C79F0003C045 /* PBXContainerItemProxy */ = { isa = PBXContainerItemProxy; containerPortal = 33CC10E52044A3C60003C045 /* Project object */; proxyType = 1; remoteGlobalIDString = 33CC111A2044C6BA0003C045; remoteInfo = FLX; }; /* End PBXContainerItemProxy section */ /* Begin PBXCopyFilesBuildPhase section */ 33CC110E2044A8840003C045 /* Bundle Framework */ = { isa = PBXCopyFilesBuildPhase; buildActionMask = 2147483647; dstPath = ""; dstSubfolderSpec = 10; files = ( ); name = "Bundle Framework"; runOnlyForDeploymentPostprocessing = 0; }; /* End PBXCopyFilesBuildPhase section */ /* Begin PBXFileReference section */ 0E022814F9E8D6D636B0F8C8 /* Pods-Runner.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.release.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.release.xcconfig"; sourceTree = ""; }; 333000ED22D3DE5D00554162 /* Warnings.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Warnings.xcconfig; sourceTree = ""; }; 335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = GeneratedPluginRegistrant.swift; sourceTree = ""; }; 33CC10ED2044A3C60003C045 /* example.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = example.app; sourceTree = BUILT_PRODUCTS_DIR; }; 33CC10F02044A3C60003C045 /* AppDelegate.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AppDelegate.swift; sourceTree = ""; }; 33CC10F22044A3C60003C045 /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; name = Assets.xcassets; path = Runner/Assets.xcassets; sourceTree = ""; }; 33CC10F52044A3C60003C045 /* Base */ = {isa = PBXFileReference; lastKnownFileType = file.xib; name = Base; path = Base.lproj/MainMenu.xib; sourceTree = ""; }; 33CC10F72044A3C60003C045 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; name = Info.plist; path = Runner/Info.plist; sourceTree = ""; }; 33CC11122044BFA00003C045 /* MainFlutterWindow.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = MainFlutterWindow.swift; sourceTree = ""; }; 33CEB47222A05771004F2AC0 /* Flutter-Debug.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = "Flutter-Debug.xcconfig"; sourceTree = ""; }; 33CEB47422A05771004F2AC0 /* Flutter-Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = "Flutter-Release.xcconfig"; sourceTree = ""; }; 33CEB47722A0578A004F2AC0 /* Flutter-Generated.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; name = "Flutter-Generated.xcconfig"; path = "ephemeral/Flutter-Generated.xcconfig"; sourceTree = ""; }; 33E51913231747F40026EE4D /* DebugProfile.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = DebugProfile.entitlements; sourceTree = ""; }; 33E51914231749380026EE4D /* Release.entitlements */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.entitlements; path = Release.entitlements; sourceTree = ""; }; 33E5194F232828860026EE4D /* AppInfo.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = AppInfo.xcconfig; sourceTree = ""; }; 7A5CA261013764F6D8F802B2 /* Pods-Runner.profile.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.profile.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.profile.xcconfig"; sourceTree = ""; }; 7AFA3C8E1D35360C0083082E /* Release.xcconfig */ = {isa = PBXFileReference; lastKnownFileType = text.xcconfig; path = Release.xcconfig; sourceTree = ""; }; 9740EEB21CF90195004384FC /* Debug.xcconfig */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.xcconfig; path = Debug.xcconfig; sourceTree = ""; }; CBDB310A91F07FBF8FD07981 /* Pods-Runner.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-Runner.debug.xcconfig"; path = "Target Support Files/Pods-Runner/Pods-Runner.debug.xcconfig"; sourceTree = ""; }; DA88C8C2270ADA5901582BC8 /* Pods_Runner.framework */ = {isa = PBXFileReference; explicitFileType = wrapper.framework; includeInIndex = 0; path = Pods_Runner.framework; sourceTree = BUILT_PRODUCTS_DIR; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ 33CC10EA2044A3C60003C045 /* Frameworks */ = { isa = PBXFrameworksBuildPhase; buildActionMask = 2147483647; files = ( 1EF1E79BCD11BF26546B861E /* Pods_Runner.framework in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXFrameworksBuildPhase section */ /* Begin PBXGroup section */ 33BA886A226E78AF003329D5 /* Configs */ = { isa = PBXGroup; children = ( 33E5194F232828860026EE4D /* AppInfo.xcconfig */, 9740EEB21CF90195004384FC /* Debug.xcconfig */, 7AFA3C8E1D35360C0083082E /* Release.xcconfig */, 333000ED22D3DE5D00554162 /* Warnings.xcconfig */, ); path = Configs; sourceTree = ""; }; 33CC10E42044A3C60003C045 = { isa = PBXGroup; children = ( 33FAB671232836740065AC1E /* Runner */, 33CEB47122A05771004F2AC0 /* Flutter */, 33CC10EE2044A3C60003C045 /* Products */, D73912EC22F37F3D000D13A0 /* Frameworks */, C1D765107FF44E3BD2777E9C /* Pods */, ); sourceTree = ""; }; 33CC10EE2044A3C60003C045 /* Products */ = { isa = PBXGroup; children = ( 33CC10ED2044A3C60003C045 /* example.app */, ); name = Products; sourceTree = ""; }; 33CC11242044D66E0003C045 /* Resources */ = { isa = PBXGroup; children = ( 33CC10F22044A3C60003C045 /* Assets.xcassets */, 33CC10F42044A3C60003C045 /* MainMenu.xib */, 33CC10F72044A3C60003C045 /* Info.plist */, ); name = Resources; path = ..; sourceTree = ""; }; 33CEB47122A05771004F2AC0 /* Flutter */ = { isa = PBXGroup; children = ( 335BBD1A22A9A15E00E9071D /* GeneratedPluginRegistrant.swift */, 33CEB47222A05771004F2AC0 /* Flutter-Debug.xcconfig */, 33CEB47422A05771004F2AC0 /* Flutter-Release.xcconfig */, 33CEB47722A0578A004F2AC0 /* Flutter-Generated.xcconfig */, ); path = Flutter; sourceTree = ""; }; 33FAB671232836740065AC1E /* Runner */ = { isa = PBXGroup; children = ( 33CC10F02044A3C60003C045 /* AppDelegate.swift */, 33CC11122044BFA00003C045 /* MainFlutterWindow.swift */, 33E51913231747F40026EE4D /* DebugProfile.entitlements */, 33E51914231749380026EE4D /* Release.entitlements */, 33CC11242044D66E0003C045 /* Resources */, 33BA886A226E78AF003329D5 /* Configs */, ); path = Runner; sourceTree = ""; }; C1D765107FF44E3BD2777E9C /* Pods */ = { isa = PBXGroup; children = ( CBDB310A91F07FBF8FD07981 /* Pods-Runner.debug.xcconfig */, 0E022814F9E8D6D636B0F8C8 /* Pods-Runner.release.xcconfig */, 7A5CA261013764F6D8F802B2 /* Pods-Runner.profile.xcconfig */, ); name = Pods; path = Pods; sourceTree = ""; }; D73912EC22F37F3D000D13A0 /* Frameworks */ = { isa = PBXGroup; children = ( DA88C8C2270ADA5901582BC8 /* Pods_Runner.framework */, ); name = Frameworks; sourceTree = ""; }; /* End PBXGroup section */ /* Begin PBXNativeTarget section */ 33CC10EC2044A3C60003C045 /* Runner */ = { isa = PBXNativeTarget; buildConfigurationList = 33CC10FB2044A3C60003C045 /* Build configuration list for PBXNativeTarget "Runner" */; buildPhases = ( B5F514E057DC68FCAECA12D5 /* [CP] Check Pods Manifest.lock */, 33CC10E92044A3C60003C045 /* Sources */, 33CC10EA2044A3C60003C045 /* Frameworks */, 33CC10EB2044A3C60003C045 /* Resources */, 33CC110E2044A8840003C045 /* Bundle Framework */, 3399D490228B24CF009A79C7 /* ShellScript */, BA7507CA2EAD7F7EB46B6C54 /* [CP] Embed Pods Frameworks */, ); buildRules = ( ); dependencies = ( 33CC11202044C79F0003C045 /* PBXTargetDependency */, ); name = Runner; productName = Runner; productReference = 33CC10ED2044A3C60003C045 /* example.app */; productType = "com.apple.product-type.application"; }; /* End PBXNativeTarget section */ /* Begin PBXProject section */ 33CC10E52044A3C60003C045 /* Project object */ = { isa = PBXProject; attributes = { LastSwiftUpdateCheck = 0920; LastUpgradeCheck = 1430; ORGANIZATIONNAME = ""; TargetAttributes = { 33CC10EC2044A3C60003C045 = { CreatedOnToolsVersion = 9.2; LastSwiftMigration = 1100; ProvisioningStyle = Automatic; SystemCapabilities = { com.apple.Sandbox = { enabled = 1; }; }; }; 33CC111A2044C6BA0003C045 = { CreatedOnToolsVersion = 9.2; ProvisioningStyle = Manual; }; }; }; buildConfigurationList = 33CC10E82044A3C60003C045 /* Build configuration list for PBXProject "Runner" */; compatibilityVersion = "Xcode 9.3"; developmentRegion = en; hasScannedForEncodings = 0; knownRegions = ( en, Base, ); mainGroup = 33CC10E42044A3C60003C045; productRefGroup = 33CC10EE2044A3C60003C045 /* Products */; projectDirPath = ""; projectRoot = ""; targets = ( 33CC10EC2044A3C60003C045 /* Runner */, 33CC111A2044C6BA0003C045 /* Flutter Assemble */, ); }; /* End PBXProject section */ /* Begin PBXResourcesBuildPhase section */ 33CC10EB2044A3C60003C045 /* Resources */ = { isa = PBXResourcesBuildPhase; buildActionMask = 2147483647; files = ( 33CC10F32044A3C60003C045 /* Assets.xcassets in Resources */, 33CC10F62044A3C60003C045 /* MainMenu.xib in Resources */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXResourcesBuildPhase section */ /* Begin PBXShellScriptBuildPhase section */ 3399D490228B24CF009A79C7 /* ShellScript */ = { isa = PBXShellScriptBuildPhase; alwaysOutOfDate = 1; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( ); inputPaths = ( ); outputFileListPaths = ( ); outputPaths = ( ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "echo \"$PRODUCT_NAME.app\" > \"$PROJECT_DIR\"/Flutter/ephemeral/.app_filename && \"$FLUTTER_ROOT\"/packages/flutter_tools/bin/macos_assemble.sh embed\n"; }; 33CC111E2044C6BF0003C045 /* ShellScript */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( Flutter/ephemeral/FlutterInputs.xcfilelist, ); inputPaths = ( Flutter/ephemeral/tripwire, ); outputFileListPaths = ( Flutter/ephemeral/FlutterOutputs.xcfilelist, ); outputPaths = ( ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"$FLUTTER_ROOT\"/packages/flutter_tools/bin/macos_assemble.sh && touch Flutter/ephemeral/tripwire"; }; B5F514E057DC68FCAECA12D5 /* [CP] Check Pods Manifest.lock */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( ); inputPaths = ( "${PODS_PODFILE_DIR_PATH}/Podfile.lock", "${PODS_ROOT}/Manifest.lock", ); name = "[CP] Check Pods Manifest.lock"; outputFileListPaths = ( ); outputPaths = ( "$(DERIVED_FILE_DIR)/Pods-Runner-checkManifestLockResult.txt", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "diff \"${PODS_PODFILE_DIR_PATH}/Podfile.lock\" \"${PODS_ROOT}/Manifest.lock\" > /dev/null\nif [ $? != 0 ] ; then\n # print error to STDERR\n echo \"error: The sandbox is not in sync with the Podfile.lock. Run 'pod install' or update your CocoaPods installation.\" >&2\n exit 1\nfi\n# This output is used by Xcode 'outputs' to avoid re-running this script phase.\necho \"SUCCESS\" > \"${SCRIPT_OUTPUT_FILE_0}\"\n"; showEnvVarsInLog = 0; }; BA7507CA2EAD7F7EB46B6C54 /* [CP] Embed Pods Frameworks */ = { isa = PBXShellScriptBuildPhase; buildActionMask = 2147483647; files = ( ); inputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-input-files.xcfilelist", ); name = "[CP] Embed Pods Frameworks"; outputFileListPaths = ( "${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks-${CONFIGURATION}-output-files.xcfilelist", ); runOnlyForDeploymentPostprocessing = 0; shellPath = /bin/sh; shellScript = "\"${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh\"\n"; showEnvVarsInLog = 0; }; /* End PBXShellScriptBuildPhase section */ /* Begin PBXSourcesBuildPhase section */ 33CC10E92044A3C60003C045 /* Sources */ = { isa = PBXSourcesBuildPhase; buildActionMask = 2147483647; files = ( 33CC11132044BFA00003C045 /* MainFlutterWindow.swift in Sources */, 33CC10F12044A3C60003C045 /* AppDelegate.swift in Sources */, 335BBD1B22A9A15E00E9071D /* GeneratedPluginRegistrant.swift in Sources */, ); runOnlyForDeploymentPostprocessing = 0; }; /* End PBXSourcesBuildPhase section */ /* Begin PBXTargetDependency section */ 33CC11202044C79F0003C045 /* PBXTargetDependency */ = { isa = PBXTargetDependency; target = 33CC111A2044C6BA0003C045 /* Flutter Assemble */; targetProxy = 33CC111F2044C79F0003C045 /* PBXContainerItemProxy */; }; /* End PBXTargetDependency section */ /* Begin PBXVariantGroup section */ 33CC10F42044A3C60003C045 /* MainMenu.xib */ = { isa = PBXVariantGroup; children = ( 33CC10F52044A3C60003C045 /* Base */, ); name = MainMenu.xib; path = Runner; sourceTree = ""; }; /* End PBXVariantGroup section */ /* Begin XCBuildConfiguration section */ 338D0CE9231458BD00FA5F75 /* Profile */ = { isa = XCBuildConfiguration; baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_NONNULL = YES; CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; CLANG_CXX_LANGUAGE_STANDARD = "gnu++14"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_DOCUMENTATION_COMMENTS = YES; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CODE_SIGN_IDENTITY = "-"; COPY_PHASE_STRIP = NO; DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; ENABLE_NS_ASSERTIONS = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; GCC_C_LANGUAGE_STANDARD = gnu11; GCC_NO_COMMON_BLOCKS = YES; GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; MACOSX_DEPLOYMENT_TARGET = 10.14; MTL_ENABLE_DEBUG_INFO = NO; SDKROOT = macosx; SWIFT_COMPILATION_MODE = wholemodule; SWIFT_OPTIMIZATION_LEVEL = "-O"; }; name = Profile; }; 338D0CEA231458BD00FA5F75 /* Profile */ = { isa = XCBuildConfiguration; baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements; CODE_SIGN_STYLE = Automatic; COMBINE_HIDPI_IMAGES = YES; INFOPLIST_FILE = Runner/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/../Frameworks", ); PROVISIONING_PROFILE_SPECIFIER = ""; SWIFT_VERSION = 5.0; }; name = Profile; }; 338D0CEB231458BD00FA5F75 /* Profile */ = { isa = XCBuildConfiguration; buildSettings = { CODE_SIGN_STYLE = Manual; PRODUCT_NAME = "$(TARGET_NAME)"; }; name = Profile; }; 33CC10F92044A3C60003C045 /* Debug */ = { isa = XCBuildConfiguration; baseConfigurationReference = 9740EEB21CF90195004384FC /* Debug.xcconfig */; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_NONNULL = YES; CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; CLANG_CXX_LANGUAGE_STANDARD = "gnu++14"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_DOCUMENTATION_COMMENTS = YES; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CODE_SIGN_IDENTITY = "-"; COPY_PHASE_STRIP = NO; DEBUG_INFORMATION_FORMAT = dwarf; ENABLE_STRICT_OBJC_MSGSEND = YES; ENABLE_TESTABILITY = YES; GCC_C_LANGUAGE_STANDARD = gnu11; GCC_DYNAMIC_NO_PIC = NO; GCC_NO_COMMON_BLOCKS = YES; GCC_OPTIMIZATION_LEVEL = 0; GCC_PREPROCESSOR_DEFINITIONS = ( "DEBUG=1", "$(inherited)", ); GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; MACOSX_DEPLOYMENT_TARGET = 10.14; MTL_ENABLE_DEBUG_INFO = YES; ONLY_ACTIVE_ARCH = YES; SDKROOT = macosx; SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; }; name = Debug; }; 33CC10FA2044A3C60003C045 /* Release */ = { isa = XCBuildConfiguration; baseConfigurationReference = 7AFA3C8E1D35360C0083082E /* Release.xcconfig */; buildSettings = { ALWAYS_SEARCH_USER_PATHS = NO; CLANG_ANALYZER_NONNULL = YES; CLANG_ANALYZER_NUMBER_OBJECT_CONVERSION = YES_AGGRESSIVE; CLANG_CXX_LANGUAGE_STANDARD = "gnu++14"; CLANG_CXX_LIBRARY = "libc++"; CLANG_ENABLE_MODULES = YES; CLANG_ENABLE_OBJC_ARC = YES; CLANG_WARN_BLOCK_CAPTURE_AUTORELEASING = YES; CLANG_WARN_BOOL_CONVERSION = YES; CLANG_WARN_CONSTANT_CONVERSION = YES; CLANG_WARN_DEPRECATED_OBJC_IMPLEMENTATIONS = YES; CLANG_WARN_DIRECT_OBJC_ISA_USAGE = YES_ERROR; CLANG_WARN_DOCUMENTATION_COMMENTS = YES; CLANG_WARN_EMPTY_BODY = YES; CLANG_WARN_ENUM_CONVERSION = YES; CLANG_WARN_INFINITE_RECURSION = YES; CLANG_WARN_INT_CONVERSION = YES; CLANG_WARN_NON_LITERAL_NULL_CONVERSION = YES; CLANG_WARN_OBJC_LITERAL_CONVERSION = YES; CLANG_WARN_OBJC_ROOT_CLASS = YES_ERROR; CLANG_WARN_RANGE_LOOP_ANALYSIS = YES; CLANG_WARN_SUSPICIOUS_MOVE = YES; CODE_SIGN_IDENTITY = "-"; COPY_PHASE_STRIP = NO; DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym"; ENABLE_NS_ASSERTIONS = NO; ENABLE_STRICT_OBJC_MSGSEND = YES; GCC_C_LANGUAGE_STANDARD = gnu11; GCC_NO_COMMON_BLOCKS = YES; GCC_WARN_64_TO_32_BIT_CONVERSION = YES; GCC_WARN_ABOUT_RETURN_TYPE = YES_ERROR; GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE; GCC_WARN_UNUSED_FUNCTION = YES; GCC_WARN_UNUSED_VARIABLE = YES; MACOSX_DEPLOYMENT_TARGET = 10.14; MTL_ENABLE_DEBUG_INFO = NO; SDKROOT = macosx; SWIFT_COMPILATION_MODE = wholemodule; SWIFT_OPTIMIZATION_LEVEL = "-O"; }; name = Release; }; 33CC10FC2044A3C60003C045 /* Debug */ = { isa = XCBuildConfiguration; baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CODE_SIGN_ENTITLEMENTS = Runner/DebugProfile.entitlements; CODE_SIGN_STYLE = Automatic; COMBINE_HIDPI_IMAGES = YES; INFOPLIST_FILE = Runner/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/../Frameworks", ); PROVISIONING_PROFILE_SPECIFIER = ""; SWIFT_OPTIMIZATION_LEVEL = "-Onone"; SWIFT_VERSION = 5.0; }; name = Debug; }; 33CC10FD2044A3C60003C045 /* Release */ = { isa = XCBuildConfiguration; baseConfigurationReference = 33E5194F232828860026EE4D /* AppInfo.xcconfig */; buildSettings = { ASSETCATALOG_COMPILER_APPICON_NAME = AppIcon; CLANG_ENABLE_MODULES = YES; CODE_SIGN_ENTITLEMENTS = Runner/Release.entitlements; CODE_SIGN_STYLE = Automatic; COMBINE_HIDPI_IMAGES = YES; INFOPLIST_FILE = Runner/Info.plist; LD_RUNPATH_SEARCH_PATHS = ( "$(inherited)", "@executable_path/../Frameworks", ); PROVISIONING_PROFILE_SPECIFIER = ""; SWIFT_VERSION = 5.0; }; name = Release; }; 33CC111C2044C6BA0003C045 /* Debug */ = { isa = XCBuildConfiguration; buildSettings = { CODE_SIGN_STYLE = Manual; PRODUCT_NAME = "$(TARGET_NAME)"; }; name = Debug; }; 33CC111D2044C6BA0003C045 /* Release */ = { isa = XCBuildConfiguration; buildSettings = { CODE_SIGN_STYLE = Automatic; PRODUCT_NAME = "$(TARGET_NAME)"; }; name = Release; }; /* End XCBuildConfiguration section */ /* Begin XCConfigurationList section */ 33CC10E82044A3C60003C045 /* Build configuration list for PBXProject "Runner" */ = { isa = XCConfigurationList; buildConfigurations = ( 33CC10F92044A3C60003C045 /* Debug */, 33CC10FA2044A3C60003C045 /* Release */, 338D0CE9231458BD00FA5F75 /* Profile */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; 33CC10FB2044A3C60003C045 /* Build configuration list for PBXNativeTarget "Runner" */ = { isa = XCConfigurationList; buildConfigurations = ( 33CC10FC2044A3C60003C045 /* Debug */, 33CC10FD2044A3C60003C045 /* Release */, 338D0CEA231458BD00FA5F75 /* Profile */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; 33CC111B2044C6BA0003C045 /* Build configuration list for PBXAggregateTarget "Flutter Assemble" */ = { isa = XCConfigurationList; buildConfigurations = ( 33CC111C2044C6BA0003C045 /* Debug */, 33CC111D2044C6BA0003C045 /* Release */, 338D0CEB231458BD00FA5F75 /* Profile */, ); defaultConfigurationIsVisible = 0; defaultConfigurationName = Release; }; /* End XCConfigurationList section */ }; rootObject = 33CC10E52044A3C60003C045 /* Project object */; } ================================================ FILE: example/macos/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist ================================================ IDEDidComputeMac32BitWarning ================================================ FILE: example/macos/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme ================================================ ================================================ FILE: example/macos/Runner.xcworkspace/contents.xcworkspacedata ================================================ ================================================ FILE: example/macos/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist ================================================ IDEDidComputeMac32BitWarning ================================================ FILE: example/pubspec.yaml ================================================ name: example description: Showcase Moon Design. publish_to: none version: 1.1.0 environment: sdk: '>=3.3.1 <4.0.0' dependencies: cupertino_icons: ^1.0.2 flutter: sdk: flutter flutter_svg: ^2.0.1 flutter_web_plugins: sdk: flutter go_router: ^12.1.1 moon_design: path: ../ package_info_plus: ^8.0.2 storybook_flutter: git: url: https://github.com/coingaming/storybook_flutter.git ref: 506c73296c85a0bb970645036baa1c9213df1c6c path: packages/storybook_flutter transparent_image: ^2.0.1 url_launcher: ^6.0.9 dev_dependencies: flutter_lints: ^2.0.0 flutter_test: sdk: flutter lint: ^2.1.2 dependency_overrides: device_frame: git: url: https://github.com/bradrushworth/flutter_device_preview.git path: device_frame device_preview: git: url: https://github.com/bradrushworth/flutter_device_preview.git path: device_preview flutter: uses-material-design: true fonts: - family: DMSans fonts: - asset: assets/DMSans.ttf - family: RobotoMono fonts: - asset: assets/RobotoMono-Regular.ttf assets: - assets/code_snippets/ - assets/components/ - assets/images/ - assets/svg/ ================================================ FILE: example/test/widget_test.dart ================================================ void main() {} ================================================ FILE: example/web/index.html ================================================ Moon Design for Flutter ================================================ FILE: example/web/manifest.json ================================================ { "name": "example", "short_name": "example", "start_url": ".", "display": "standalone", "background_color": "#0175C2", "theme_color": "#0175C2", "description": "A new Flutter project.", "orientation": "portrait-primary", "prefer_related_applications": false, "icons": [ { "src": "icons/Icon-192.png", "sizes": "192x192", "type": "image/png" }, { "src": "icons/Icon-512.png", "sizes": "512x512", "type": "image/png" }, { "src": "icons/Icon-maskable-192.png", "sizes": "192x192", "type": "image/png", "purpose": "maskable" }, { "src": "icons/Icon-maskable-512.png", "sizes": "512x512", "type": "image/png", "purpose": "maskable" } ] } ================================================ FILE: example/windows/.gitignore ================================================ flutter/ephemeral/ # Visual Studio user-specific files. *.suo *.user *.userosscache *.sln.docstates # Visual Studio build-related files. x64/ x86/ # Visual Studio cache files # files ending in .cache can be ignored *.[Cc]ache # but keep track of directories ending in .cache !*.[Cc]ache/ ================================================ FILE: example/windows/CMakeLists.txt ================================================ # Project-level configuration. cmake_minimum_required(VERSION 3.14) project(example LANGUAGES CXX) # The name of the executable created for the application. Change this to change # the on-disk name of your application. set(BINARY_NAME "example") # Explicitly opt in to modern CMake behaviors to avoid warnings with recent # versions of CMake. cmake_policy(SET CMP0063 NEW) # Define build configuration option. get_property(IS_MULTICONFIG GLOBAL PROPERTY GENERATOR_IS_MULTI_CONFIG) if(IS_MULTICONFIG) set(CMAKE_CONFIGURATION_TYPES "Debug;Profile;Release" CACHE STRING "" FORCE) else() if(NOT CMAKE_BUILD_TYPE AND NOT CMAKE_CONFIGURATION_TYPES) set(CMAKE_BUILD_TYPE "Debug" CACHE STRING "Flutter build mode" FORCE) set_property(CACHE CMAKE_BUILD_TYPE PROPERTY STRINGS "Debug" "Profile" "Release") endif() endif() # Define settings for the Profile build mode. set(CMAKE_EXE_LINKER_FLAGS_PROFILE "${CMAKE_EXE_LINKER_FLAGS_RELEASE}") set(CMAKE_SHARED_LINKER_FLAGS_PROFILE "${CMAKE_SHARED_LINKER_FLAGS_RELEASE}") set(CMAKE_C_FLAGS_PROFILE "${CMAKE_C_FLAGS_RELEASE}") set(CMAKE_CXX_FLAGS_PROFILE "${CMAKE_CXX_FLAGS_RELEASE}") # Use Unicode for all projects. add_definitions(-DUNICODE -D_UNICODE) # Compilation settings that should be applied to most targets. # # Be cautious about adding new options here, as plugins use this function by # default. In most cases, you should add new options to specific targets instead # of modifying this function. function(APPLY_STANDARD_SETTINGS TARGET) target_compile_features(${TARGET} PUBLIC cxx_std_17) target_compile_options(${TARGET} PRIVATE /W4 /WX /wd"4100") target_compile_options(${TARGET} PRIVATE /EHsc) target_compile_definitions(${TARGET} PRIVATE "_HAS_EXCEPTIONS=0") target_compile_definitions(${TARGET} PRIVATE "$<$:_DEBUG>") endfunction() # Flutter library and tool build rules. set(FLUTTER_MANAGED_DIR "${CMAKE_CURRENT_SOURCE_DIR}/flutter") add_subdirectory(${FLUTTER_MANAGED_DIR}) # Application build; see runner/CMakeLists.txt. add_subdirectory("runner") # Generated plugin build rules, which manage building the plugins and adding # them to the application. include(flutter/generated_plugins.cmake) # === Installation === # Support files are copied into place next to the executable, so that it can # run in place. This is done instead of making a separate bundle (as on Linux) # so that building and running from within Visual Studio will work. set(BUILD_BUNDLE_DIR "$") # Make the "install" step default, as it's required to run. set(CMAKE_VS_INCLUDE_INSTALL_TO_DEFAULT_BUILD 1) if(CMAKE_INSTALL_PREFIX_INITIALIZED_TO_DEFAULT) set(CMAKE_INSTALL_PREFIX "${BUILD_BUNDLE_DIR}" CACHE PATH "..." FORCE) endif() set(INSTALL_BUNDLE_DATA_DIR "${CMAKE_INSTALL_PREFIX}/data") set(INSTALL_BUNDLE_LIB_DIR "${CMAKE_INSTALL_PREFIX}") install(TARGETS ${BINARY_NAME} RUNTIME DESTINATION "${CMAKE_INSTALL_PREFIX}" COMPONENT Runtime) install(FILES "${FLUTTER_ICU_DATA_FILE}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime) install(FILES "${FLUTTER_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}" COMPONENT Runtime) if(PLUGIN_BUNDLED_LIBRARIES) install(FILES "${PLUGIN_BUNDLED_LIBRARIES}" DESTINATION "${INSTALL_BUNDLE_LIB_DIR}" COMPONENT Runtime) endif() # Fully re-copy the assets directory on each build to avoid having stale files # from a previous install. set(FLUTTER_ASSET_DIR_NAME "flutter_assets") install(CODE " file(REMOVE_RECURSE \"${INSTALL_BUNDLE_DATA_DIR}/${FLUTTER_ASSET_DIR_NAME}\") " COMPONENT Runtime) install(DIRECTORY "${PROJECT_BUILD_DIR}/${FLUTTER_ASSET_DIR_NAME}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" COMPONENT Runtime) # Install the AOT library on non-Debug builds only. install(FILES "${AOT_LIBRARY}" DESTINATION "${INSTALL_BUNDLE_DATA_DIR}" CONFIGURATIONS Profile;Release COMPONENT Runtime) ================================================ FILE: example/windows/flutter/CMakeLists.txt ================================================ # This file controls Flutter-level build steps. It should not be edited. cmake_minimum_required(VERSION 3.14) set(EPHEMERAL_DIR "${CMAKE_CURRENT_SOURCE_DIR}/ephemeral") # Configuration provided via flutter tool. include(${EPHEMERAL_DIR}/generated_config.cmake) # TODO: Move the rest of this into files in ephemeral. See # https://github.com/flutter/flutter/issues/57146. set(WRAPPER_ROOT "${EPHEMERAL_DIR}/cpp_client_wrapper") # === Flutter Library === set(FLUTTER_LIBRARY "${EPHEMERAL_DIR}/flutter_windows.dll") # Published to parent scope for install step. set(FLUTTER_LIBRARY ${FLUTTER_LIBRARY} PARENT_SCOPE) set(FLUTTER_ICU_DATA_FILE "${EPHEMERAL_DIR}/icudtl.dat" PARENT_SCOPE) set(PROJECT_BUILD_DIR "${PROJECT_DIR}/build/" PARENT_SCOPE) set(AOT_LIBRARY "${PROJECT_DIR}/build/windows/app.so" PARENT_SCOPE) list(APPEND FLUTTER_LIBRARY_HEADERS "flutter_export.h" "flutter_windows.h" "flutter_messenger.h" "flutter_plugin_registrar.h" "flutter_texture_registrar.h" ) list(TRANSFORM FLUTTER_LIBRARY_HEADERS PREPEND "${EPHEMERAL_DIR}/") add_library(flutter INTERFACE) target_include_directories(flutter INTERFACE "${EPHEMERAL_DIR}" ) target_link_libraries(flutter INTERFACE "${FLUTTER_LIBRARY}.lib") add_dependencies(flutter flutter_assemble) # === Wrapper === list(APPEND CPP_WRAPPER_SOURCES_CORE "core_implementations.cc" "standard_codec.cc" ) list(TRANSFORM CPP_WRAPPER_SOURCES_CORE PREPEND "${WRAPPER_ROOT}/") list(APPEND CPP_WRAPPER_SOURCES_PLUGIN "plugin_registrar.cc" ) list(TRANSFORM CPP_WRAPPER_SOURCES_PLUGIN PREPEND "${WRAPPER_ROOT}/") list(APPEND CPP_WRAPPER_SOURCES_APP "flutter_engine.cc" "flutter_view_controller.cc" ) list(TRANSFORM CPP_WRAPPER_SOURCES_APP PREPEND "${WRAPPER_ROOT}/") # Wrapper sources needed for a plugin. add_library(flutter_wrapper_plugin STATIC ${CPP_WRAPPER_SOURCES_CORE} ${CPP_WRAPPER_SOURCES_PLUGIN} ) apply_standard_settings(flutter_wrapper_plugin) set_target_properties(flutter_wrapper_plugin PROPERTIES POSITION_INDEPENDENT_CODE ON) set_target_properties(flutter_wrapper_plugin PROPERTIES CXX_VISIBILITY_PRESET hidden) target_link_libraries(flutter_wrapper_plugin PUBLIC flutter) target_include_directories(flutter_wrapper_plugin PUBLIC "${WRAPPER_ROOT}/include" ) add_dependencies(flutter_wrapper_plugin flutter_assemble) # Wrapper sources needed for the runner. add_library(flutter_wrapper_app STATIC ${CPP_WRAPPER_SOURCES_CORE} ${CPP_WRAPPER_SOURCES_APP} ) apply_standard_settings(flutter_wrapper_app) target_link_libraries(flutter_wrapper_app PUBLIC flutter) target_include_directories(flutter_wrapper_app PUBLIC "${WRAPPER_ROOT}/include" ) add_dependencies(flutter_wrapper_app flutter_assemble) # === Flutter tool backend === # _phony_ is a non-existent file to force this command to run every time, # since currently there's no way to get a full input/output list from the # flutter tool. set(PHONY_OUTPUT "${CMAKE_CURRENT_BINARY_DIR}/_phony_") set_source_files_properties("${PHONY_OUTPUT}" PROPERTIES SYMBOLIC TRUE) add_custom_command( OUTPUT ${FLUTTER_LIBRARY} ${FLUTTER_LIBRARY_HEADERS} ${CPP_WRAPPER_SOURCES_CORE} ${CPP_WRAPPER_SOURCES_PLUGIN} ${CPP_WRAPPER_SOURCES_APP} ${PHONY_OUTPUT} COMMAND ${CMAKE_COMMAND} -E env ${FLUTTER_TOOL_ENVIRONMENT} "${FLUTTER_ROOT}/packages/flutter_tools/bin/tool_backend.bat" windows-x64 $ VERBATIM ) add_custom_target(flutter_assemble DEPENDS "${FLUTTER_LIBRARY}" ${FLUTTER_LIBRARY_HEADERS} ${CPP_WRAPPER_SOURCES_CORE} ${CPP_WRAPPER_SOURCES_PLUGIN} ${CPP_WRAPPER_SOURCES_APP} ) ================================================ FILE: example/windows/flutter/generated_plugin_registrant.cc ================================================ // // Generated file. Do not edit. // // clang-format off #include "generated_plugin_registrant.h" void RegisterPlugins(flutter::PluginRegistry* registry) { } ================================================ FILE: example/windows/flutter/generated_plugin_registrant.h ================================================ // // Generated file. Do not edit. // // clang-format off #ifndef GENERATED_PLUGIN_REGISTRANT_ #define GENERATED_PLUGIN_REGISTRANT_ #include // Registers Flutter plugins. void RegisterPlugins(flutter::PluginRegistry* registry); #endif // GENERATED_PLUGIN_REGISTRANT_ ================================================ FILE: example/windows/flutter/generated_plugins.cmake ================================================ # # Generated file, do not edit. # list(APPEND FLUTTER_PLUGIN_LIST ) list(APPEND FLUTTER_FFI_PLUGIN_LIST ) set(PLUGIN_BUNDLED_LIBRARIES) foreach(plugin ${FLUTTER_PLUGIN_LIST}) add_subdirectory(flutter/ephemeral/.plugin_symlinks/${plugin}/windows plugins/${plugin}) target_link_libraries(${BINARY_NAME} PRIVATE ${plugin}_plugin) list(APPEND PLUGIN_BUNDLED_LIBRARIES $) list(APPEND PLUGIN_BUNDLED_LIBRARIES ${${plugin}_bundled_libraries}) endforeach(plugin) foreach(ffi_plugin ${FLUTTER_FFI_PLUGIN_LIST}) add_subdirectory(flutter/ephemeral/.plugin_symlinks/${ffi_plugin}/windows plugins/${ffi_plugin}) list(APPEND PLUGIN_BUNDLED_LIBRARIES ${${ffi_plugin}_bundled_libraries}) endforeach(ffi_plugin) ================================================ FILE: example/windows/runner/CMakeLists.txt ================================================ cmake_minimum_required(VERSION 3.14) project(runner LANGUAGES CXX) # Define the application target. To change its name, change BINARY_NAME in the # top-level CMakeLists.txt, not the value here, or `flutter run` will no longer # work. # # Any new source files that you add to the application should be added here. add_executable(${BINARY_NAME} WIN32 "flutter_window.cpp" "main.cpp" "utils.cpp" "win32_window.cpp" "${FLUTTER_MANAGED_DIR}/generated_plugin_registrant.cc" "Runner.rc" "runner.exe.manifest" ) # Apply the standard set of build settings. This can be removed for applications # that need different build settings. apply_standard_settings(${BINARY_NAME}) # Add preprocessor definitions for the build version. target_compile_definitions(${BINARY_NAME} PRIVATE "FLUTTER_VERSION=\"${FLUTTER_VERSION}\"") target_compile_definitions(${BINARY_NAME} PRIVATE "FLUTTER_VERSION_MAJOR=${FLUTTER_VERSION_MAJOR}") target_compile_definitions(${BINARY_NAME} PRIVATE "FLUTTER_VERSION_MINOR=${FLUTTER_VERSION_MINOR}") target_compile_definitions(${BINARY_NAME} PRIVATE "FLUTTER_VERSION_PATCH=${FLUTTER_VERSION_PATCH}") target_compile_definitions(${BINARY_NAME} PRIVATE "FLUTTER_VERSION_BUILD=${FLUTTER_VERSION_BUILD}") # Disable Windows macros that collide with C++ standard library functions. target_compile_definitions(${BINARY_NAME} PRIVATE "NOMINMAX") # Add dependency libraries and include directories. Add any application-specific # dependencies here. target_link_libraries(${BINARY_NAME} PRIVATE flutter flutter_wrapper_app) target_include_directories(${BINARY_NAME} PRIVATE "${CMAKE_SOURCE_DIR}") # Run the Flutter tool portions of the build. This must not be removed. add_dependencies(${BINARY_NAME} flutter_assemble) ================================================ FILE: example/windows/runner/Runner.rc ================================================ // Microsoft Visual C++ generated resource script. // #pragma code_page(65001) #include "resource.h" #define APSTUDIO_READONLY_SYMBOLS ///////////////////////////////////////////////////////////////////////////// // // Generated from the TEXTINCLUDE 2 resource. // #include "winres.h" ///////////////////////////////////////////////////////////////////////////// #undef APSTUDIO_READONLY_SYMBOLS ///////////////////////////////////////////////////////////////////////////// // English (United States) resources #if !defined(AFX_RESOURCE_DLL) || defined(AFX_TARG_ENU) LANGUAGE LANG_ENGLISH, SUBLANG_ENGLISH_US #ifdef APSTUDIO_INVOKED ///////////////////////////////////////////////////////////////////////////// // // TEXTINCLUDE // 1 TEXTINCLUDE BEGIN "resource.h\0" END 2 TEXTINCLUDE BEGIN "#include ""winres.h""\r\n" "\0" END 3 TEXTINCLUDE BEGIN "\r\n" "\0" END #endif // APSTUDIO_INVOKED ///////////////////////////////////////////////////////////////////////////// // // Icon // // Icon with lowest ID value placed first to ensure application icon // remains consistent on all systems. IDI_APP_ICON ICON "resources\\app_icon.ico" ///////////////////////////////////////////////////////////////////////////// // // Version // #if defined(FLUTTER_VERSION_MAJOR) && defined(FLUTTER_VERSION_MINOR) && defined(FLUTTER_VERSION_PATCH) && defined(FLUTTER_VERSION_BUILD) #define VERSION_AS_NUMBER FLUTTER_VERSION_MAJOR,FLUTTER_VERSION_MINOR,FLUTTER_VERSION_PATCH,FLUTTER_VERSION_BUILD #else #define VERSION_AS_NUMBER 1,0,0,0 #endif #if defined(FLUTTER_VERSION) #define VERSION_AS_STRING FLUTTER_VERSION #else #define VERSION_AS_STRING "1.0.0" #endif VS_VERSION_INFO VERSIONINFO FILEVERSION VERSION_AS_NUMBER PRODUCTVERSION VERSION_AS_NUMBER FILEFLAGSMASK VS_FFI_FILEFLAGSMASK #ifdef _DEBUG FILEFLAGS VS_FF_DEBUG #else FILEFLAGS 0x0L #endif FILEOS VOS__WINDOWS32 FILETYPE VFT_APP FILESUBTYPE 0x0L BEGIN BLOCK "StringFileInfo" BEGIN BLOCK "040904e4" BEGIN VALUE "CompanyName", "com.example" "\0" VALUE "FileDescription", "example" "\0" VALUE "FileVersion", VERSION_AS_STRING "\0" VALUE "InternalName", "example" "\0" VALUE "LegalCopyright", "Copyright (C) 2023 com.example. All rights reserved." "\0" VALUE "OriginalFilename", "example.exe" "\0" VALUE "ProductName", "example" "\0" VALUE "ProductVersion", VERSION_AS_STRING "\0" END END BLOCK "VarFileInfo" BEGIN VALUE "Translation", 0x409, 1252 END END #endif // English (United States) resources ///////////////////////////////////////////////////////////////////////////// #ifndef APSTUDIO_INVOKED ///////////////////////////////////////////////////////////////////////////// // // Generated from the TEXTINCLUDE 3 resource. // ///////////////////////////////////////////////////////////////////////////// #endif // not APSTUDIO_INVOKED ================================================ FILE: example/windows/runner/flutter_window.cpp ================================================ #include "flutter_window.h" #include #include "flutter/generated_plugin_registrant.h" FlutterWindow::FlutterWindow(const flutter::DartProject& project) : project_(project) {} FlutterWindow::~FlutterWindow() {} bool FlutterWindow::OnCreate() { if (!Win32Window::OnCreate()) { return false; } RECT frame = GetClientArea(); // The size here must match the window dimensions to avoid unnecessary surface // creation / destruction in the startup path. flutter_controller_ = std::make_unique( frame.right - frame.left, frame.bottom - frame.top, project_); // Ensure that basic setup of the controller was successful. if (!flutter_controller_->engine() || !flutter_controller_->view()) { return false; } RegisterPlugins(flutter_controller_->engine()); SetChildContent(flutter_controller_->view()->GetNativeWindow()); return true; } void FlutterWindow::OnDestroy() { if (flutter_controller_) { flutter_controller_ = nullptr; } Win32Window::OnDestroy(); } LRESULT FlutterWindow::MessageHandler(HWND hwnd, UINT const message, WPARAM const wparam, LPARAM const lparam) noexcept { // Give Flutter, including plugins, an opportunity to handle window messages. if (flutter_controller_) { std::optional result = flutter_controller_->HandleTopLevelWindowProc(hwnd, message, wparam, lparam); if (result) { return *result; } } switch (message) { case WM_FONTCHANGE: flutter_controller_->engine()->ReloadSystemFonts(); break; } return Win32Window::MessageHandler(hwnd, message, wparam, lparam); } ================================================ FILE: example/windows/runner/flutter_window.h ================================================ #ifndef RUNNER_FLUTTER_WINDOW_H_ #define RUNNER_FLUTTER_WINDOW_H_ #include #include #include #include "win32_window.h" // A window that does nothing but host a Flutter view. class FlutterWindow : public Win32Window { public: // Creates a new FlutterWindow hosting a Flutter view running |project|. explicit FlutterWindow(const flutter::DartProject& project); virtual ~FlutterWindow(); protected: // Win32Window: bool OnCreate() override; void OnDestroy() override; LRESULT MessageHandler(HWND window, UINT const message, WPARAM const wparam, LPARAM const lparam) noexcept override; private: // The project to run. flutter::DartProject project_; // The Flutter instance hosted by this window. std::unique_ptr flutter_controller_; }; #endif // RUNNER_FLUTTER_WINDOW_H_ ================================================ FILE: example/windows/runner/main.cpp ================================================ #include #include #include #include "flutter_window.h" #include "utils.h" int APIENTRY wWinMain(_In_ HINSTANCE instance, _In_opt_ HINSTANCE prev, _In_ wchar_t *command_line, _In_ int show_command) { // Attach to console when present (e.g., 'flutter run') or create a // new console when running with a debugger. if (!::AttachConsole(ATTACH_PARENT_PROCESS) && ::IsDebuggerPresent()) { CreateAndAttachConsole(); } // Initialize COM, so that it is available for use in the library and/or // plugins. ::CoInitializeEx(nullptr, COINIT_APARTMENTTHREADED); flutter::DartProject project(L"data"); std::vector command_line_arguments = GetCommandLineArguments(); project.set_dart_entrypoint_arguments(std::move(command_line_arguments)); FlutterWindow window(project); Win32Window::Point origin(10, 10); Win32Window::Size size(1280, 720); if (!window.CreateAndShow(L"example", origin, size)) { return EXIT_FAILURE; } window.SetQuitOnClose(true); ::MSG msg; while (::GetMessage(&msg, nullptr, 0, 0)) { ::TranslateMessage(&msg); ::DispatchMessage(&msg); } ::CoUninitialize(); return EXIT_SUCCESS; } ================================================ FILE: example/windows/runner/resource.h ================================================ //{{NO_DEPENDENCIES}} // Microsoft Visual C++ generated include file. // Used by Runner.rc // #define IDI_APP_ICON 101 // Next default values for new objects // #ifdef APSTUDIO_INVOKED #ifndef APSTUDIO_READONLY_SYMBOLS #define _APS_NEXT_RESOURCE_VALUE 102 #define _APS_NEXT_COMMAND_VALUE 40001 #define _APS_NEXT_CONTROL_VALUE 1001 #define _APS_NEXT_SYMED_VALUE 101 #endif #endif ================================================ FILE: example/windows/runner/runner.exe.manifest ================================================ PerMonitorV2 ================================================ FILE: example/windows/runner/utils.cpp ================================================ #include "utils.h" #include #include #include #include #include void CreateAndAttachConsole() { if (::AllocConsole()) { FILE *unused; if (freopen_s(&unused, "CONOUT$", "w", stdout)) { _dup2(_fileno(stdout), 1); } if (freopen_s(&unused, "CONOUT$", "w", stderr)) { _dup2(_fileno(stdout), 2); } std::ios::sync_with_stdio(); FlutterDesktopResyncOutputStreams(); } } std::vector GetCommandLineArguments() { // Convert the UTF-16 command line arguments to UTF-8 for the Engine to use. int argc; wchar_t** argv = ::CommandLineToArgvW(::GetCommandLineW(), &argc); if (argv == nullptr) { return std::vector(); } std::vector command_line_arguments; // Skip the first argument as it's the binary name. for (int i = 1; i < argc; i++) { command_line_arguments.push_back(Utf8FromUtf16(argv[i])); } ::LocalFree(argv); return command_line_arguments; } std::string Utf8FromUtf16(const wchar_t* utf16_string) { if (utf16_string == nullptr) { return std::string(); } int target_length = ::WideCharToMultiByte( CP_UTF8, WC_ERR_INVALID_CHARS, utf16_string, -1, nullptr, 0, nullptr, nullptr); std::string utf8_string; if (target_length == 0 || target_length > utf8_string.max_size()) { return utf8_string; } utf8_string.resize(target_length); int converted_length = ::WideCharToMultiByte( CP_UTF8, WC_ERR_INVALID_CHARS, utf16_string, -1, utf8_string.data(), target_length, nullptr, nullptr); if (converted_length == 0) { return std::string(); } return utf8_string; } ================================================ FILE: example/windows/runner/utils.h ================================================ #ifndef RUNNER_UTILS_H_ #define RUNNER_UTILS_H_ #include #include // Creates a console for the process, and redirects stdout and stderr to // it for both the runner and the Flutter library. void CreateAndAttachConsole(); // Takes a null-terminated wchar_t* encoded in UTF-16 and returns a std::string // encoded in UTF-8. Returns an empty std::string on failure. std::string Utf8FromUtf16(const wchar_t* utf16_string); // Gets the command line arguments passed in as a std::vector, // encoded in UTF-8. Returns an empty std::vector on failure. std::vector GetCommandLineArguments(); #endif // RUNNER_UTILS_H_ ================================================ FILE: example/windows/runner/win32_window.cpp ================================================ #include "win32_window.h" #include #include "resource.h" namespace { constexpr const wchar_t kWindowClassName[] = L"FLUTTER_RUNNER_WIN32_WINDOW"; // The number of Win32Window objects that currently exist. static int g_active_window_count = 0; using EnableNonClientDpiScaling = BOOL __stdcall(HWND hwnd); // Scale helper to convert logical scaler values to physical using passed in // scale factor int Scale(int source, double scale_factor) { return static_cast(source * scale_factor); } // Dynamically loads the |EnableNonClientDpiScaling| from the User32 module. // This API is only needed for PerMonitor V1 awareness mode. void EnableFullDpiSupportIfAvailable(HWND hwnd) { HMODULE user32_module = LoadLibraryA("User32.dll"); if (!user32_module) { return; } auto enable_non_client_dpi_scaling = reinterpret_cast( GetProcAddress(user32_module, "EnableNonClientDpiScaling")); if (enable_non_client_dpi_scaling != nullptr) { enable_non_client_dpi_scaling(hwnd); FreeLibrary(user32_module); } } } // namespace // Manages the Win32Window's window class registration. class WindowClassRegistrar { public: ~WindowClassRegistrar() = default; // Returns the singleton registar instance. static WindowClassRegistrar* GetInstance() { if (!instance_) { instance_ = new WindowClassRegistrar(); } return instance_; } // Returns the name of the window class, registering the class if it hasn't // previously been registered. const wchar_t* GetWindowClass(); // Unregisters the window class. Should only be called if there are no // instances of the window. void UnregisterWindowClass(); private: WindowClassRegistrar() = default; static WindowClassRegistrar* instance_; bool class_registered_ = false; }; WindowClassRegistrar* WindowClassRegistrar::instance_ = nullptr; const wchar_t* WindowClassRegistrar::GetWindowClass() { if (!class_registered_) { WNDCLASS window_class{}; window_class.hCursor = LoadCursor(nullptr, IDC_ARROW); window_class.lpszClassName = kWindowClassName; window_class.style = CS_HREDRAW | CS_VREDRAW; window_class.cbClsExtra = 0; window_class.cbWndExtra = 0; window_class.hInstance = GetModuleHandle(nullptr); window_class.hIcon = LoadIcon(window_class.hInstance, MAKEINTRESOURCE(IDI_APP_ICON)); window_class.hbrBackground = 0; window_class.lpszMenuName = nullptr; window_class.lpfnWndProc = Win32Window::WndProc; RegisterClass(&window_class); class_registered_ = true; } return kWindowClassName; } void WindowClassRegistrar::UnregisterWindowClass() { UnregisterClass(kWindowClassName, nullptr); class_registered_ = false; } Win32Window::Win32Window() { ++g_active_window_count; } Win32Window::~Win32Window() { --g_active_window_count; Destroy(); } bool Win32Window::CreateAndShow(const std::wstring& title, const Point& origin, const Size& size) { Destroy(); const wchar_t* window_class = WindowClassRegistrar::GetInstance()->GetWindowClass(); const POINT target_point = {static_cast(origin.x), static_cast(origin.y)}; HMONITOR monitor = MonitorFromPoint(target_point, MONITOR_DEFAULTTONEAREST); UINT dpi = FlutterDesktopGetDpiForMonitor(monitor); double scale_factor = dpi / 96.0; HWND window = CreateWindow( window_class, title.c_str(), WS_OVERLAPPEDWINDOW | WS_VISIBLE, Scale(origin.x, scale_factor), Scale(origin.y, scale_factor), Scale(size.width, scale_factor), Scale(size.height, scale_factor), nullptr, nullptr, GetModuleHandle(nullptr), this); if (!window) { return false; } return OnCreate(); } // static LRESULT CALLBACK Win32Window::WndProc(HWND const window, UINT const message, WPARAM const wparam, LPARAM const lparam) noexcept { if (message == WM_NCCREATE) { auto window_struct = reinterpret_cast(lparam); SetWindowLongPtr(window, GWLP_USERDATA, reinterpret_cast(window_struct->lpCreateParams)); auto that = static_cast(window_struct->lpCreateParams); EnableFullDpiSupportIfAvailable(window); that->window_handle_ = window; } else if (Win32Window* that = GetThisFromHandle(window)) { return that->MessageHandler(window, message, wparam, lparam); } return DefWindowProc(window, message, wparam, lparam); } LRESULT Win32Window::MessageHandler(HWND hwnd, UINT const message, WPARAM const wparam, LPARAM const lparam) noexcept { switch (message) { case WM_DESTROY: window_handle_ = nullptr; Destroy(); if (quit_on_close_) { PostQuitMessage(0); } return 0; case WM_DPICHANGED: { auto newRectSize = reinterpret_cast(lparam); LONG newWidth = newRectSize->right - newRectSize->left; LONG newHeight = newRectSize->bottom - newRectSize->top; SetWindowPos(hwnd, nullptr, newRectSize->left, newRectSize->top, newWidth, newHeight, SWP_NOZORDER | SWP_NOACTIVATE); return 0; } case WM_SIZE: { RECT rect = GetClientArea(); if (child_content_ != nullptr) { // Size and position the child window. MoveWindow(child_content_, rect.left, rect.top, rect.right - rect.left, rect.bottom - rect.top, TRUE); } return 0; } case WM_ACTIVATE: if (child_content_ != nullptr) { SetFocus(child_content_); } return 0; } return DefWindowProc(window_handle_, message, wparam, lparam); } void Win32Window::Destroy() { OnDestroy(); if (window_handle_) { DestroyWindow(window_handle_); window_handle_ = nullptr; } if (g_active_window_count == 0) { WindowClassRegistrar::GetInstance()->UnregisterWindowClass(); } } Win32Window* Win32Window::GetThisFromHandle(HWND const window) noexcept { return reinterpret_cast( GetWindowLongPtr(window, GWLP_USERDATA)); } void Win32Window::SetChildContent(HWND content) { child_content_ = content; SetParent(content, window_handle_); RECT frame = GetClientArea(); MoveWindow(content, frame.left, frame.top, frame.right - frame.left, frame.bottom - frame.top, true); SetFocus(child_content_); } RECT Win32Window::GetClientArea() { RECT frame; GetClientRect(window_handle_, &frame); return frame; } HWND Win32Window::GetHandle() { return window_handle_; } void Win32Window::SetQuitOnClose(bool quit_on_close) { quit_on_close_ = quit_on_close; } bool Win32Window::OnCreate() { // No-op; provided for subclasses. return true; } void Win32Window::OnDestroy() { // No-op; provided for subclasses. } ================================================ FILE: example/windows/runner/win32_window.h ================================================ #ifndef RUNNER_WIN32_WINDOW_H_ #define RUNNER_WIN32_WINDOW_H_ #include #include #include #include // A class abstraction for a high DPI-aware Win32 Window. Intended to be // inherited from by classes that wish to specialize with custom // rendering and input handling class Win32Window { public: struct Point { unsigned int x; unsigned int y; Point(unsigned int x, unsigned int y) : x(x), y(y) {} }; struct Size { unsigned int width; unsigned int height; Size(unsigned int width, unsigned int height) : width(width), height(height) {} }; Win32Window(); virtual ~Win32Window(); // Creates and shows a win32 window with |title| and position and size using // |origin| and |size|. New windows are created on the default monitor. Window // sizes are specified to the OS in physical pixels, hence to ensure a // consistent size to will treat the width height passed in to this function // as logical pixels and scale to appropriate for the default monitor. Returns // true if the window was created successfully. bool CreateAndShow(const std::wstring& title, const Point& origin, const Size& size); // Release OS resources associated with window. void Destroy(); // Inserts |content| into the window tree. void SetChildContent(HWND content); // Returns the backing Window handle to enable clients to set icon and other // window properties. Returns nullptr if the window has been destroyed. HWND GetHandle(); // If true, closing this window will quit the application. void SetQuitOnClose(bool quit_on_close); // Return a RECT representing the bounds of the current client area. RECT GetClientArea(); protected: // Processes and route salient window messages for mouse handling, // size change and DPI. Delegates handling of these to member overloads that // inheriting classes can handle. virtual LRESULT MessageHandler(HWND window, UINT const message, WPARAM const wparam, LPARAM const lparam) noexcept; // Called when CreateAndShow is called, allowing subclass window-related // setup. Subclasses should return false if setup fails. virtual bool OnCreate(); // Called when Destroy is called. virtual void OnDestroy(); private: friend class WindowClassRegistrar; // OS callback called by message pump. Handles the WM_NCCREATE message which // is passed when the non-client area is being created and enables automatic // non-client DPI scaling so that the non-client area automatically // responsponds to changes in DPI. All other messages are handled by // MessageHandler. static LRESULT CALLBACK WndProc(HWND const window, UINT const message, WPARAM const wparam, LPARAM const lparam) noexcept; // Retrieves a class instance pointer for |window| static Win32Window* GetThisFromHandle(HWND const window) noexcept; bool quit_on_close_ = false; // window handle for top level window. HWND window_handle_ = nullptr; // window handle for hosted content. HWND child_content_ = nullptr; }; #endif // RUNNER_WIN32_WINDOW_H_ ================================================ FILE: lib/moon_design.dart ================================================ /// Moon Design for Flutter library moon_design; export 'package:moon_design/src/theme/accordion/accordion_theme.dart'; export 'package:moon_design/src/theme/alert/alert_theme.dart'; export 'package:moon_design/src/theme/auth_code/auth_code_theme.dart'; export 'package:moon_design/src/theme/avatar/avatar_theme.dart'; export 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_theme.dart'; export 'package:moon_design/src/theme/button/button_theme.dart'; export 'package:moon_design/src/theme/carousel/carousel_theme.dart'; export 'package:moon_design/src/theme/checkbox/checkbox_theme.dart'; export 'package:moon_design/src/theme/chip/chip_theme.dart'; export 'package:moon_design/src/theme/dot_indicator/dot_indicator_theme.dart'; export 'package:moon_design/src/theme/drawer/drawer_theme.dart'; export 'package:moon_design/src/theme/effects/effects_theme.dart'; export 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart'; export 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart'; export 'package:moon_design/src/theme/menu_item/menu_item_theme.dart'; export 'package:moon_design/src/theme/modal/modal_theme.dart'; export 'package:moon_design/src/theme/popover/popover_theme.dart'; export 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart'; export 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart'; export 'package:moon_design/src/theme/progress_pin/progress_pin_theme.dart'; export 'package:moon_design/src/theme/radio/radio_theme.dart'; export 'package:moon_design/src/theme/segmented_control/segmented_control_theme.dart'; export 'package:moon_design/src/theme/switch/switch_theme.dart'; export 'package:moon_design/src/theme/text_area/text_area_theme.dart'; export 'package:moon_design/src/theme/text_input/text_input_theme.dart'; export 'package:moon_design/src/theme/text_input_group/text_input_group_theme.dart'; export 'package:moon_design/src/theme/theme.dart'; export 'package:moon_design/src/theme/toast/toast_theme.dart'; export 'package:moon_design/src/theme/tokens/borders.dart'; export 'package:moon_design/src/theme/tokens/opacities.dart'; export 'package:moon_design/src/theme/tokens/shadows.dart'; export 'package:moon_design/src/theme/tokens/sizes.dart'; export 'package:moon_design/src/theme/tokens/tokens.dart'; export 'package:moon_design/src/theme/tokens/typography/typography.dart'; export 'package:moon_design/src/theme/tooltip/tooltip_theme.dart'; export 'package:moon_design/src/utils/color_premul_lerp.dart'; export 'package:moon_design/src/utils/color_tween_premul.dart'; export 'package:moon_design/src/utils/extensions.dart'; export 'package:moon_design/src/utils/shape_decoration_premul.dart'; export 'package:moon_design/src/utils/squircle/clip_squircle_rect.dart'; export 'package:moon_design/src/utils/squircle/squircle_border.dart'; export 'package:moon_design/src/utils/squircle/squircle_border_radius.dart'; export 'package:moon_design/src/utils/squircle/squircle_radius.dart'; export 'package:moon_design/src/widgets/accordion/accordion.dart'; export 'package:moon_design/src/widgets/alert/alert.dart'; export 'package:moon_design/src/widgets/auth_code/auth_code.dart'; export 'package:moon_design/src/widgets/avatar/avatar.dart'; export 'package:moon_design/src/widgets/bottom_sheet/bottom_sheet.dart'; export 'package:moon_design/src/widgets/bottom_sheet/modal_bottom_sheet.dart'; export 'package:moon_design/src/widgets/breadcrumb/breadcrumb.dart'; export 'package:moon_design/src/widgets/breadcrumb/breadcrumb_item.dart'; export 'package:moon_design/src/widgets/buttons/button.dart'; export 'package:moon_design/src/widgets/buttons/filled_button.dart'; export 'package:moon_design/src/widgets/buttons/outlined_button.dart'; export 'package:moon_design/src/widgets/buttons/text_button.dart'; export 'package:moon_design/src/widgets/carousel/carousel.dart'; export 'package:moon_design/src/widgets/checkbox/checkbox.dart'; export 'package:moon_design/src/widgets/chip/chip.dart'; export 'package:moon_design/src/widgets/common/animated_icon_theme.dart'; export 'package:moon_design/src/widgets/common/base_control.dart'; export 'package:moon_design/src/widgets/common/base_segmented_tab_bar.dart'; export 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; export 'package:moon_design/src/widgets/common/effects/pulse_effect.dart'; export 'package:moon_design/src/widgets/common/error_message_widgets.dart'; export 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart'; export 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart'; export 'package:moon_design/src/widgets/dot_indicator/dot_indicator.dart'; export 'package:moon_design/src/widgets/drawer/drawer.dart'; export 'package:moon_design/src/widgets/dropdown/dropdown.dart'; export 'package:moon_design/src/widgets/loaders/circular_loader.dart'; export 'package:moon_design/src/widgets/loaders/linear_loader.dart'; export 'package:moon_design/src/widgets/menu_item/menu_item.dart'; export 'package:moon_design/src/widgets/modal/modal.dart'; export 'package:moon_design/src/widgets/popover/popover.dart'; export 'package:moon_design/src/widgets/progress/circular_progress.dart'; export 'package:moon_design/src/widgets/progress/linear_progress.dart'; export 'package:moon_design/src/widgets/progress_pin/pin_style.dart'; export 'package:moon_design/src/widgets/progress_pin/progress_pin.dart'; export 'package:moon_design/src/widgets/radio/radio.dart'; export 'package:moon_design/src/widgets/segmented_control/segment.dart'; export 'package:moon_design/src/widgets/segmented_control/segment_style.dart'; export 'package:moon_design/src/widgets/segmented_control/segmented_control.dart'; export 'package:moon_design/src/widgets/switch/switch.dart'; export 'package:moon_design/src/widgets/tab_bar/pill_tab.dart'; export 'package:moon_design/src/widgets/tab_bar/pill_tab_style.dart'; export 'package:moon_design/src/widgets/tab_bar/tab.dart'; export 'package:moon_design/src/widgets/tab_bar/tab_bar.dart'; export 'package:moon_design/src/widgets/tab_bar/tab_style.dart'; export 'package:moon_design/src/widgets/table/table.dart'; export 'package:moon_design/src/widgets/tag/tag.dart'; export 'package:moon_design/src/widgets/text_area/text_area.dart'; export 'package:moon_design/src/widgets/text_input/form_text_input.dart'; export 'package:moon_design/src/widgets/text_input/text_input.dart'; export 'package:moon_design/src/widgets/text_input_group/text_input_group.dart'; export 'package:moon_design/src/widgets/toast/toast.dart'; export 'package:moon_design/src/widgets/tooltip/tooltip.dart'; export 'package:moon_icons/moon_icons.dart'; export 'package:moon_tokens/moon_tokens.dart'; ================================================ FILE: lib/src/theme/accordion/accordion_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonAccordionColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the collapsed MoonAccordion header. final Color textColor; /// The text color of the expanded MoonAccordion header. final Color expandedTextColor; /// The text and icon color of the expanded MoonAccordion content. final Color contentColor; /// The icon color of the collapsed MoonAccordion header. final Color iconColor; /// The icon color of the expanded MoonAccordion header. final Color expandedIconColor; /// The default trailing icon color of the collapsed MoonAccordion header. final Color trailingIconColor; /// The default trailing icon color of the expanded MoonAccordion header. final Color expandedTrailingIconColor; /// The background color of the collapsed MoonAccordion. final Color backgroundColor; /// The background color of the expanded MoonAccordion. final Color expandedBackgroundColor; /// The border color of the MoonAccordion. final Color borderColor; /// The color of the line dividing the MoonAccordion header from the body. final Color dividerColor; const MoonAccordionColors({ required this.textColor, required this.expandedTextColor, required this.contentColor, required this.iconColor, required this.expandedIconColor, required this.trailingIconColor, required this.expandedTrailingIconColor, required this.backgroundColor, required this.expandedBackgroundColor, required this.borderColor, required this.dividerColor, }); @override MoonAccordionColors copyWith({ Color? textColor, Color? expandedTextColor, Color? contentColor, Color? iconColor, Color? expandedIconColor, Color? trailingIconColor, Color? expandedTrailingIconColor, Color? backgroundColor, Color? expandedBackgroundColor, Color? borderColor, Color? dividerColor, }) { return MoonAccordionColors( textColor: textColor ?? this.textColor, expandedTextColor: expandedTextColor ?? this.expandedTextColor, contentColor: contentColor ?? this.contentColor, iconColor: iconColor ?? this.iconColor, expandedIconColor: expandedIconColor ?? this.expandedIconColor, trailingIconColor: trailingIconColor ?? this.trailingIconColor, expandedTrailingIconColor: expandedTrailingIconColor ?? this.expandedTrailingIconColor, backgroundColor: backgroundColor ?? this.backgroundColor, expandedBackgroundColor: expandedBackgroundColor ?? this.expandedBackgroundColor, borderColor: borderColor ?? this.borderColor, dividerColor: dividerColor ?? this.dividerColor, ); } @override MoonAccordionColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonAccordionColors) return this; return MoonAccordionColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, expandedTextColor: colorPremulLerp(expandedTextColor, other.expandedTextColor, t)!, contentColor: colorPremulLerp(contentColor, other.contentColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, expandedIconColor: colorPremulLerp(expandedIconColor, other.expandedIconColor, t)!, trailingIconColor: colorPremulLerp(trailingIconColor, other.trailingIconColor, t)!, expandedTrailingIconColor: colorPremulLerp( expandedTrailingIconColor, other.expandedTrailingIconColor, t, )!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, expandedBackgroundColor: colorPremulLerp( expandedBackgroundColor, other.expandedBackgroundColor, t, )!, borderColor: colorPremulLerp(borderColor, other.borderColor, t)!, dividerColor: colorPremulLerp(dividerColor, other.dividerColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAccordionColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("expandedTextColor", expandedTextColor)) ..add(ColorProperty("contentColor", contentColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("expandedIconColor", expandedIconColor)) ..add(ColorProperty("trailingIconColor", trailingIconColor)) ..add( ColorProperty("expandedTrailingIconColor", expandedTrailingIconColor), ) ..add( ColorProperty("backgroundColor", backgroundColor), ) ..add( ColorProperty("expandedBackgroundColor", expandedBackgroundColor), ) ..add( ColorProperty("borderColor", borderColor), ) ..add( ColorProperty("dividerColor", dividerColor), ); } } ================================================ FILE: lib/src/theme/accordion/accordion_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonAccordionProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The duration of the MoonAccordion transition animation /// (expand and collapse). final Duration transitionDuration; /// The curve of the MoonAccordion transition animation (expand and collapse). final Curve transitionCurve; const MoonAccordionProperties({ required this.transitionDuration, required this.transitionCurve, }); @override MoonAccordionProperties copyWith({ Duration? transitionDuration, Curve? transitionCurve, }) { return MoonAccordionProperties( transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, ); } @override MoonAccordionProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonAccordionProperties) return this; return MoonAccordionProperties( transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonAccordionProperties"), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ); } } ================================================ FILE: lib/src/theme/accordion/accordion_shadows.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonAccordionShadows extends ThemeExtension with DiagnosticableTreeMixin { /// The list of shadows applied to the MoonAccordion. final List shadows; const MoonAccordionShadows({required this.shadows}); @override MoonAccordionShadows copyWith({List? shadows}) { return MoonAccordionShadows( shadows: shadows ?? this.shadows, ); } @override MoonAccordionShadows lerp( ThemeExtension? other, double t, ) { if (other is! MoonAccordionShadows) return this; return MoonAccordionShadows( shadows: BoxShadow.lerpList(shadows, other.shadows, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAccordionShadows")) ..add(DiagnosticsProperty>("shadows", shadows)); } } ================================================ FILE: lib/src/theme/accordion/accordion_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonAccordionSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonAccordion. final BorderRadiusGeometry borderRadius; /// The height of the MoonAccordion header. final double headerHeight; /// The size value of the MoonAccordion icon. final double iconSizeValue; /// The padding of the MoonAccordion header. final EdgeInsetsGeometry headerPadding; /// The text style of the MoonAccordion header. final TextStyle headerTextStyle; /// The text style of the MoonAccordion content. final TextStyle contentTextStyle; const MoonAccordionSizeProperties({ required this.borderRadius, required this.headerHeight, required this.iconSizeValue, required this.headerPadding, required this.headerTextStyle, required this.contentTextStyle, }); @override MoonAccordionSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? headerHeight, double? iconSizeValue, EdgeInsetsGeometry? headerPadding, TextStyle? headerTextStyle, TextStyle? contentTextStyle, }) { return MoonAccordionSizeProperties( borderRadius: borderRadius ?? this.borderRadius, headerHeight: headerHeight ?? this.headerHeight, iconSizeValue: iconSizeValue ?? this.iconSizeValue, headerPadding: headerPadding ?? this.headerPadding, headerTextStyle: headerTextStyle ?? this.headerTextStyle, contentTextStyle: contentTextStyle ?? this.contentTextStyle, ); } @override MoonAccordionSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonAccordionSizeProperties) return this; return MoonAccordionSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, headerHeight: lerpDouble(headerHeight, other.headerHeight, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, headerPadding: EdgeInsetsGeometry.lerp(headerPadding, other.headerPadding, t)!, headerTextStyle: TextStyle.lerp(headerTextStyle, other.headerTextStyle, t)!, contentTextStyle: TextStyle.lerp(contentTextStyle, other.contentTextStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonAccordionSizeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("headerHeight", headerHeight), ) ..add( DoubleProperty("iconSizeValue", iconSizeValue), ) ..add( DiagnosticsProperty("headerPadding", headerPadding), ) ..add( DiagnosticsProperty("headerTextStyle", headerTextStyle), ) ..add( DiagnosticsProperty("contentTextStyle", contentTextStyle), ); } } ================================================ FILE: lib/src/theme/accordion/accordion_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/accordion/accordion_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAccordionSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the small MoonAccordion. final MoonAccordionSizeProperties sm; /// The properties of the medium MoonAccordion. final MoonAccordionSizeProperties md; /// The properties of the large MoonAccordion. final MoonAccordionSizeProperties lg; /// The properties of the extra large MoonAccordion. final MoonAccordionSizeProperties xl; MoonAccordionSizes({ required this.tokens, MoonAccordionSizeProperties? sm, MoonAccordionSizeProperties? md, MoonAccordionSizeProperties? lg, MoonAccordionSizeProperties? xl, }) : sm = sm ?? MoonAccordionSizeProperties( borderRadius: tokens.borders.interactiveSm, headerHeight: tokens.sizes.sm, iconSizeValue: tokens.sizes.x2s, headerPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), headerTextStyle: tokens.typography.heading.text12, contentTextStyle: tokens.typography.body.text12, ), md = md ?? MoonAccordionSizeProperties( borderRadius: tokens.borders.interactiveSm, headerHeight: tokens.sizes.md, iconSizeValue: tokens.sizes.xs, headerPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), headerTextStyle: tokens.typography.heading.textDefault, contentTextStyle: tokens.typography.body.textDefault, ), lg = lg ?? MoonAccordionSizeProperties( borderRadius: tokens.borders.interactiveSm, headerHeight: tokens.sizes.lg, iconSizeValue: tokens.sizes.xs, headerPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), headerTextStyle: tokens.typography.heading.textDefault, contentTextStyle: tokens.typography.body.textDefault, ), xl = xl ?? MoonAccordionSizeProperties( borderRadius: tokens.borders.interactiveSm, headerHeight: tokens.sizes.xl, iconSizeValue: tokens.sizes.xs, headerPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), headerTextStyle: tokens.typography.heading.text16, contentTextStyle: tokens.typography.body.textDefault, ); @override MoonAccordionSizes copyWith({ MoonTokens? tokens, MoonAccordionSizeProperties? sm, MoonAccordionSizeProperties? md, MoonAccordionSizeProperties? lg, MoonAccordionSizeProperties? xl, }) { return MoonAccordionSizes( tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, xl: xl ?? this.xl, ); } @override MoonAccordionSizes lerp(ThemeExtension? other, double t) { if (other is! MoonAccordionSizes) return this; return MoonAccordionSizes( tokens: tokens.lerp(other.tokens, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), xl: xl.lerp(other.xl, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAccordionSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)) ..add(DiagnosticsProperty("xl", xl)); } } ================================================ FILE: lib/src/theme/accordion/accordion_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/accordion/accordion_colors.dart'; import 'package:moon_design/src/theme/accordion/accordion_properties.dart'; import 'package:moon_design/src/theme/accordion/accordion_shadows.dart'; import 'package:moon_design/src/theme/accordion/accordion_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAccordionTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonAccordion. final MoonAccordionColors colors; /// The properties of the MoonAccordion. final MoonAccordionProperties properties; /// The shadows of the MoonAccordion. final MoonAccordionShadows shadows; /// The sizes of the MoonAccordion. final MoonAccordionSizes sizes; MoonAccordionTheme({ required this.tokens, MoonAccordionColors? colors, MoonAccordionProperties? properties, MoonAccordionShadows? shadows, MoonAccordionSizes? sizes, }) : colors = colors ?? MoonAccordionColors( textColor: tokens.colors.textPrimary, expandedTextColor: tokens.colors.textPrimary, contentColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, expandedIconColor: tokens.colors.iconPrimary, trailingIconColor: tokens.colors.iconPrimary, expandedTrailingIconColor: tokens.colors.iconSecondary, backgroundColor: tokens.colors.goku, expandedBackgroundColor: tokens.colors.goku, borderColor: tokens.colors.beerus, dividerColor: tokens.colors.beerus, ), properties = properties ?? MoonAccordionProperties( transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, ), shadows = shadows ?? MoonAccordionShadows(shadows: tokens.shadows.sm), sizes = sizes ?? MoonAccordionSizes(tokens: tokens); @override MoonAccordionTheme copyWith({ MoonTokens? tokens, MoonAccordionColors? colors, MoonAccordionProperties? properties, MoonAccordionShadows? shadows, MoonAccordionSizes? sizes, }) { return MoonAccordionTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, sizes: sizes ?? this.sizes, ); } @override MoonAccordionTheme lerp(ThemeExtension? other, double t) { if (other is! MoonAccordionTheme) return this; return MoonAccordionTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonAccordionTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty("properties", properties), ) ..add( DiagnosticsProperty("shadows", shadows), ) ..add( DiagnosticsProperty("sizes", sizes), ); } } ================================================ FILE: lib/src/theme/alert/alert_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonAlertColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the MoonAlert. final Color backgroundColor; /// The border color of the MoonAlert. final Color borderColor; /// The icon color of the MoonAlert. final Color iconColor; /// The text color of the MoonAlert. final Color textColor; const MoonAlertColors({ required this.backgroundColor, required this.borderColor, required this.iconColor, required this.textColor, }); @override MoonAlertColors copyWith({ Color? backgroundColor, Color? borderColor, Color? iconColor, Color? textColor, }) { return MoonAlertColors( backgroundColor: backgroundColor ?? this.backgroundColor, borderColor: borderColor ?? this.borderColor, iconColor: iconColor ?? this.iconColor, textColor: textColor ?? this.textColor, ); } @override MoonAlertColors lerp(ThemeExtension? other, double t) { if (other is! MoonAlertColors) return this; return MoonAlertColors( backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, borderColor: colorPremulLerp(borderColor, other.borderColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAlertColors")) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("borderColor", borderColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("textColor", textColor)); } } ================================================ FILE: lib/src/theme/alert/alert_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonAlertProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonAlert. final BorderRadiusGeometry borderRadius; /// The horizontal gap between the leading, label and trailing widgets of the /// MoonAlert. final double horizontalGap; /// The minimum height of the MoonAlert. final double minimumHeight; /// The vertical gap between the MoonAlert header and content. final double verticalGap; /// The duration of the MoonAlert transition animation (fade in or out). final Duration transitionDuration; /// The curve of the MoonAlert transition animation (fade in or out). final Curve transitionCurve; /// The padding of the MoonAlert. final EdgeInsetsGeometry padding; /// The text style of the MoonAlert content. final TextStyle contentTextStyle; /// The text style of the MoonAlert label. final TextStyle labelTextStyle; const MoonAlertProperties({ required this.borderRadius, required this.horizontalGap, required this.minimumHeight, required this.verticalGap, required this.transitionDuration, required this.transitionCurve, required this.padding, required this.contentTextStyle, required this.labelTextStyle, }); @override MoonAlertProperties copyWith({ BorderRadiusGeometry? borderRadius, double? horizontalGap, double? minimumHeight, double? verticalGap, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? padding, TextStyle? contentTextStyle, TextStyle? labelTextStyle, }) { return MoonAlertProperties( borderRadius: borderRadius ?? this.borderRadius, horizontalGap: horizontalGap ?? this.horizontalGap, minimumHeight: minimumHeight ?? this.minimumHeight, verticalGap: verticalGap ?? this.verticalGap, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, padding: padding ?? this.padding, contentTextStyle: contentTextStyle ?? this.contentTextStyle, labelTextStyle: labelTextStyle ?? this.labelTextStyle, ); } @override MoonAlertProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonAlertProperties) return this; return MoonAlertProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, horizontalGap: lerpDouble(horizontalGap, other.horizontalGap, t)!, minimumHeight: lerpDouble(minimumHeight, other.minimumHeight, t)!, verticalGap: lerpDouble(verticalGap, other.verticalGap, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, contentTextStyle: TextStyle.lerp(contentTextStyle, other.contentTextStyle, t)!, labelTextStyle: TextStyle.lerp(labelTextStyle, other.labelTextStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonAlertProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("horizontalGap", horizontalGap), ) ..add( DoubleProperty("minimumHeight", minimumHeight), ) ..add( DoubleProperty("verticalGap", verticalGap), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty("padding", padding), ) ..add( DiagnosticsProperty("contentTextStyle", contentTextStyle), ) ..add( DiagnosticsProperty("labelTextStyle", labelTextStyle), ); } } ================================================ FILE: lib/src/theme/alert/alert_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/alert/alert_colors.dart'; import 'package:moon_design/src/theme/alert/alert_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAlertTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonAlert. final MoonAlertColors colors; /// The properties of the MoonAlert. final MoonAlertProperties properties; MoonAlertTheme({ required this.tokens, MoonAlertColors? colors, MoonAlertProperties? properties, }) : colors = colors ?? MoonAlertColors( backgroundColor: tokens.colors.goku, borderColor: tokens.colors.textSecondary, iconColor: tokens.colors.iconPrimary, textColor: tokens.colors.textPrimary, ), properties = properties ?? MoonAlertProperties( borderRadius: tokens.borders.interactiveSm, horizontalGap: tokens.sizes.x3s, minimumHeight: tokens.sizes.xl, verticalGap: tokens.sizes.x4s, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, padding: EdgeInsets.all(tokens.sizes.x2s), contentTextStyle: tokens.typography.body.textDefault, labelTextStyle: tokens.typography.heading.textDefault, ); @override MoonAlertTheme copyWith({ MoonTokens? tokens, MoonAlertColors? colors, MoonAlertProperties? properties, }) { return MoonAlertTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonAlertTheme lerp(ThemeExtension? other, double t) { if (other is! MoonAlertTheme) return this; return MoonAlertTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonAlertTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } } ================================================ FILE: lib/src/theme/auth_code/auth_code_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonAuthCodeColors extends ThemeExtension with DiagnosticableTreeMixin { /// The border color of the selected MoonAuthCode input field. final Color selectedBorderColor; /// The border color of the MoonAuthCode input field with input. final Color activeBorderColor; /// The border color of the MoonAuthCode input field without input. final Color inactiveBorderColor; /// The border color of the MoonAuthCode input field in error state. final Color errorBorderColor; /// The fill color of the selected MoonAuthCode input field. final Color selectedFillColor; /// The fill color of the MoonAuthCode input field with input. final Color activeFillColor; /// The fill color of the MoonAuthCode input field without input. final Color inactiveFillColor; /// The text color of the MoonAuthCode. final Color textColor; const MoonAuthCodeColors({ required this.selectedBorderColor, required this.activeBorderColor, required this.inactiveBorderColor, required this.errorBorderColor, required this.selectedFillColor, required this.activeFillColor, required this.inactiveFillColor, required this.textColor, }); @override MoonAuthCodeColors copyWith({ Color? selectedBorderColor, Color? activeBorderColor, Color? inactiveBorderColor, Color? errorBorderColor, Color? selectedFillColor, Color? activeFillColor, Color? inactiveFillColor, Color? textColor, }) { return MoonAuthCodeColors( selectedBorderColor: selectedBorderColor ?? this.selectedBorderColor, activeBorderColor: activeBorderColor ?? this.activeBorderColor, inactiveBorderColor: inactiveBorderColor ?? this.inactiveBorderColor, errorBorderColor: errorBorderColor ?? this.errorBorderColor, selectedFillColor: selectedFillColor ?? this.selectedFillColor, activeFillColor: activeFillColor ?? this.activeFillColor, inactiveFillColor: inactiveFillColor ?? this.inactiveFillColor, textColor: textColor ?? this.textColor, ); } @override MoonAuthCodeColors lerp(ThemeExtension? other, double t) { if (other is! MoonAuthCodeColors) return this; return MoonAuthCodeColors( selectedBorderColor: colorPremulLerp(selectedBorderColor, other.selectedBorderColor, t)!, activeBorderColor: colorPremulLerp(activeBorderColor, other.activeBorderColor, t)!, inactiveBorderColor: colorPremulLerp(inactiveBorderColor, other.inactiveBorderColor, t)!, errorBorderColor: colorPremulLerp(errorBorderColor, other.errorBorderColor, t)!, selectedFillColor: colorPremulLerp(selectedFillColor, other.selectedFillColor, t)!, activeFillColor: colorPremulLerp(activeFillColor, other.activeFillColor, t)!, inactiveFillColor: colorPremulLerp(inactiveFillColor, other.inactiveFillColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAuthCodeColors")) ..add(ColorProperty("selectedBorderColor", selectedBorderColor)) ..add(ColorProperty("activeBorderColor", activeBorderColor)) ..add(ColorProperty("inactiveBorderColor", inactiveBorderColor)) ..add(ColorProperty("errorBorderColor", errorBorderColor)) ..add(ColorProperty("selectedFillColor", selectedFillColor)) ..add(ColorProperty("activeFillColor", activeFillColor)) ..add(ColorProperty("inactiveFillColor", inactiveFillColor)) ..add(ColorProperty("textColor", textColor)); } } ================================================ FILE: lib/src/theme/auth_code/auth_code_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonAuthCodeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonAuthCode input field. final BorderRadiusGeometry borderRadius; /// The horizontal gap between the MoonAuthCode input fields. final double gap; /// The height of the MoonAuthCode input field. final double height; /// The width of the MoonAuthCode input field. final double width; /// The duration of the MoonAuthCode input field transition animation. final Duration animationDuration; /// The duration of the MoonAuthCode error state animation. final Duration errorAnimationDuration; /// The duration to display the typed character before it is obscured. final Duration peekDuration; /// The curve of the MoonAuthCode input field transition animation. final Curve animationCurve; /// The curve of the MoonAuthCode error state animation. final Curve errorAnimationCurve; /// The text style of the MoonAuthCode. final TextStyle textStyle; /// The text style of the MoonAuthCode in error state. final TextStyle errorTextStyle; const MoonAuthCodeProperties({ required this.borderRadius, required this.gap, required this.height, required this.width, required this.animationDuration, required this.errorAnimationDuration, required this.peekDuration, required this.animationCurve, required this.errorAnimationCurve, required this.textStyle, required this.errorTextStyle, }); @override MoonAuthCodeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? gap, double? height, double? width, Duration? animationDuration, Duration? errorAnimationDuration, Duration? peekDuration, Curve? animationCurve, Curve? errorAnimationCurve, TextStyle? textStyle, TextStyle? errorTextStyle, }) { return MoonAuthCodeProperties( borderRadius: borderRadius ?? this.borderRadius, gap: gap ?? this.gap, height: height ?? this.height, width: width ?? this.width, animationDuration: animationDuration ?? this.animationDuration, errorAnimationDuration: errorAnimationDuration ?? this.errorAnimationDuration, peekDuration: peekDuration ?? this.peekDuration, animationCurve: animationCurve ?? this.animationCurve, errorAnimationCurve: errorAnimationCurve ?? this.errorAnimationCurve, textStyle: textStyle ?? this.textStyle, errorTextStyle: errorTextStyle ?? this.errorTextStyle, ); } @override MoonAuthCodeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonAuthCodeProperties) return this; return MoonAuthCodeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, gap: lerpDouble(gap, other.gap, t)!, height: lerpDouble(height, other.height, t)!, width: lerpDouble(width, other.width, t)!, animationDuration: lerpDuration(animationDuration, other.animationDuration, t), errorAnimationDuration: lerpDuration(errorAnimationDuration, other.errorAnimationDuration, t), peekDuration: lerpDuration(peekDuration, other.peekDuration, t), animationCurve: other.animationCurve, errorAnimationCurve: other.errorAnimationCurve, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, errorTextStyle: TextStyle.lerp(errorTextStyle, other.errorTextStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonAuthCodeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("gap", gap), ) ..add( DoubleProperty("height", height), ) ..add( DoubleProperty("width", width), ) ..add( DiagnosticsProperty("animationDuration", animationDuration), ) ..add( DiagnosticsProperty( "errorAnimationDuration", errorAnimationDuration, ), ) ..add( DiagnosticsProperty("peekDuration", peekDuration), ) ..add( DiagnosticsProperty("animationCurve", animationCurve), ) ..add( DiagnosticsProperty("errorAnimationCurve", errorAnimationCurve), ) ..add( DiagnosticsProperty("textStyle", textStyle), ) ..add( DiagnosticsProperty("errorTextStyle", errorTextStyle), ); } } ================================================ FILE: lib/src/theme/auth_code/auth_code_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/auth_code/auth_code_colors.dart'; import 'package:moon_design/src/theme/auth_code/auth_code_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAuthCodeTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonAuthCode. final MoonAuthCodeColors colors; /// The properties of the MoonAuthCode. final MoonAuthCodeProperties properties; MoonAuthCodeTheme({ required this.tokens, MoonAuthCodeColors? colors, MoonAuthCodeProperties? properties, }) : colors = colors ?? MoonAuthCodeColors( selectedBorderColor: tokens.colors.piccolo, activeBorderColor: tokens.colors.beerus, inactiveBorderColor: tokens.colors.beerus, errorBorderColor: tokens.colors.chichi, selectedFillColor: tokens.colors.goku, activeFillColor: tokens.colors.goku, inactiveFillColor: tokens.colors.goku, textColor: tokens.colors.textPrimary, ), properties = properties ?? MoonAuthCodeProperties( borderRadius: tokens.borders.interactiveSm, gap: tokens.sizes.x4s, height: tokens.sizes.xl, width: tokens.sizes.lg, animationDuration: tokens.transitions.defaultTransitionDuration, errorAnimationDuration: tokens.transitions.defaultTransitionDuration, peekDuration: tokens.transitions.defaultTransitionDuration, animationCurve: tokens.transitions.defaultTransitionCurve, errorAnimationCurve: tokens.transitions.defaultTransitionCurve, textStyle: tokens.typography.body.text24, errorTextStyle: tokens.typography.body.text12, ); @override MoonAuthCodeTheme copyWith({ MoonTokens? tokens, MoonAuthCodeColors? colors, MoonAuthCodeProperties? properties, }) { return MoonAuthCodeTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonAuthCodeTheme lerp(ThemeExtension? other, double t) { if (other is! MoonAuthCodeTheme) return this; return MoonAuthCodeTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonAuthCodeTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty("properties", properties), ); } } ================================================ FILE: lib/src/theme/avatar/avatar_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonAvatarColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the MoonAvatar. final Color backgroundColor; /// The color of the MoonAvatar badge. final Color badgeColor; /// The icon color of the MoonAvatar. final Color iconColor; /// The text color of the MoonAvatar. final Color textColor; const MoonAvatarColors({ required this.backgroundColor, required this.badgeColor, required this.iconColor, required this.textColor, }); @override MoonAvatarColors copyWith({ Color? backgroundColor, Color? badgeColor, Color? iconColor, Color? textColor, }) { return MoonAvatarColors( backgroundColor: backgroundColor ?? this.backgroundColor, badgeColor: badgeColor ?? this.badgeColor, iconColor: iconColor ?? this.iconColor, textColor: textColor ?? this.textColor, ); } @override MoonAvatarColors lerp(ThemeExtension? other, double t) { if (other is! MoonAvatarColors) return this; return MoonAvatarColors( backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, badgeColor: colorPremulLerp(badgeColor, other.badgeColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarColors")) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("badgeColor", badgeColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("textColor", textColor)); } } ================================================ FILE: lib/src/theme/avatar/avatar_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonAvatarSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonAvatar. final BorderRadiusGeometry borderRadius; /// The size value of the MoonAvatar. final double avatarSizeValue; /// The margin value of the MoonAvatar badge. final double badgeMarginValue; /// The size value of the MoonAvatar badge. final double badgeSizeValue; /// The text style of the MoonAvatar. final TextStyle textStyle; const MoonAvatarSizeProperties({ required this.avatarSizeValue, required this.badgeSizeValue, required this.badgeMarginValue, required this.borderRadius, required this.textStyle, }); @override MoonAvatarSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? avatarSizeValue, double? badgeMarginValue, double? badgeSizeValue, TextStyle? textStyle, }) { return MoonAvatarSizeProperties( borderRadius: borderRadius ?? this.borderRadius, avatarSizeValue: avatarSizeValue ?? this.avatarSizeValue, badgeMarginValue: badgeMarginValue ?? this.badgeMarginValue, badgeSizeValue: badgeSizeValue ?? this.badgeSizeValue, textStyle: textStyle ?? this.textStyle, ); } @override MoonAvatarSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonAvatarSizeProperties) return this; return MoonAvatarSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, avatarSizeValue: lerpDouble(avatarSizeValue, other.avatarSizeValue, t)!, badgeMarginValue: lerpDouble(badgeMarginValue, other.badgeMarginValue, t)!, badgeSizeValue: lerpDouble(badgeSizeValue, other.badgeSizeValue, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonAvatarSizeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add(DoubleProperty("avatarSizeValue", avatarSizeValue)) ..add(DoubleProperty("badgeMarginValue", badgeMarginValue)) ..add(DoubleProperty("badgeSizeValue", badgeSizeValue)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } ================================================ FILE: lib/src/theme/avatar/avatar_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/avatar/avatar_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAvatarSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the extra small MoonAvatar. final MoonAvatarSizeProperties xs; /// The properties of the small MoonAvatar. final MoonAvatarSizeProperties sm; /// The properties of the medium MoonAvatar. final MoonAvatarSizeProperties md; /// The properties of the large MoonAvatar. final MoonAvatarSizeProperties lg; /// The properties of the extra large MoonAvatar. final MoonAvatarSizeProperties xl; /// The properties of the (2x) extra large MoonAvatar. final MoonAvatarSizeProperties x2l; MoonAvatarSizes({ required this.tokens, MoonAvatarSizeProperties? xs, MoonAvatarSizeProperties? sm, MoonAvatarSizeProperties? md, MoonAvatarSizeProperties? lg, MoonAvatarSizeProperties? xl, MoonAvatarSizeProperties? x2l, }) : xs = xs ?? MoonAvatarSizeProperties( borderRadius: tokens.borders.interactiveXs, avatarSizeValue: tokens.sizes.xs, badgeMarginValue: tokens.sizes.xs * tokens.sizes.x5s / tokens.sizes.x2l, badgeSizeValue: tokens.sizes.xs * tokens.sizes.x3s / tokens.sizes.x2l, textStyle: tokens.typography.heading.text10, ), sm = sm ?? MoonAvatarSizeProperties( borderRadius: tokens.borders.interactiveSm, avatarSizeValue: tokens.sizes.sm, badgeMarginValue: tokens.sizes.sm * tokens.sizes.x5s / tokens.sizes.x2l, badgeSizeValue: tokens.sizes.sm * tokens.sizes.x3s / tokens.sizes.x2l, textStyle: tokens.typography.heading.text12, ), md = md ?? MoonAvatarSizeProperties( borderRadius: tokens.borders.interactiveSm, avatarSizeValue: tokens.sizes.md, badgeMarginValue: tokens.sizes.md * tokens.sizes.x5s / tokens.sizes.x2l, badgeSizeValue: tokens.sizes.md * tokens.sizes.x3s / tokens.sizes.x2l, textStyle: tokens.typography.heading.textDefault, ), lg = lg ?? MoonAvatarSizeProperties( borderRadius: tokens.borders.interactiveSm, avatarSizeValue: tokens.sizes.lg, badgeMarginValue: tokens.sizes.lg * tokens.sizes.x5s / tokens.sizes.x2l, badgeSizeValue: tokens.sizes.lg * tokens.sizes.x3s / tokens.sizes.x2l, textStyle: tokens.typography.heading.text16, ), xl = xl ?? MoonAvatarSizeProperties( borderRadius: tokens.borders.interactiveMd, avatarSizeValue: tokens.sizes.xl, badgeMarginValue: tokens.sizes.xl * tokens.sizes.x5s / tokens.sizes.x2l, badgeSizeValue: tokens.sizes.xl * tokens.sizes.x3s / tokens.sizes.x2l, textStyle: tokens.typography.heading.text16, ), x2l = x2l ?? MoonAvatarSizeProperties( borderRadius: tokens.borders.interactiveMd, avatarSizeValue: tokens.sizes.x2l, badgeMarginValue: tokens.sizes.x2l * tokens.sizes.x5s / tokens.sizes.x2l, badgeSizeValue: tokens.sizes.x2l * tokens.sizes.x3s / tokens.sizes.x2l, textStyle: tokens.typography.heading.text20, ); @override MoonAvatarSizes copyWith({ MoonTokens? tokens, MoonAvatarSizeProperties? xs, MoonAvatarSizeProperties? sm, MoonAvatarSizeProperties? md, MoonAvatarSizeProperties? lg, MoonAvatarSizeProperties? xl, MoonAvatarSizeProperties? x2l, }) { return MoonAvatarSizes( tokens: tokens ?? this.tokens, xs: xs ?? this.xs, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, xl: xl ?? this.xl, x2l: x2l ?? this.x2l, ); } @override MoonAvatarSizes lerp(ThemeExtension? other, double t) { if (other is! MoonAvatarSizes) return this; return MoonAvatarSizes( tokens: tokens, xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), xl: xl.lerp(other.xl, t), x2l: x2l.lerp(other.x2l, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)) ..add(DiagnosticsProperty("xl", xl)) ..add(DiagnosticsProperty("x2l", x2l)); } } ================================================ FILE: lib/src/theme/avatar/avatar_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/avatar/avatar_colors.dart'; import 'package:moon_design/src/theme/avatar/avatar_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonAvatarTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonAvatar. final MoonAvatarColors colors; /// The sizes of the MoonAvatar. final MoonAvatarSizes sizes; MoonAvatarTheme({ required this.tokens, MoonAvatarColors? colors, MoonAvatarSizes? sizes, }) : colors = colors ?? MoonAvatarColors( backgroundColor: tokens.colors.goku, badgeColor: tokens.colors.roshi, iconColor: tokens.colors.iconPrimary, textColor: tokens.colors.textPrimary, ), sizes = sizes ?? MoonAvatarSizes(tokens: tokens); @override MoonAvatarTheme copyWith({ MoonTokens? tokens, MoonAvatarColors? colors, MoonAvatarSizes? sizes, }) { return MoonAvatarTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); } @override MoonAvatarTheme lerp(ThemeExtension? other, double t) { if (other is! MoonAvatarTheme) return this; return MoonAvatarTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonAvatarTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/bottom_sheet/bottom_sheet_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonBottomSheetColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonBottomSheet. final Color textColor; /// The icon color of the MoonBottomSheet. final Color iconColor; /// The background color of the MoonBottomSheet. final Color backgroundColor; /// The color of the MoonBottomSheet barrier. final Color barrierColor; const MoonBottomSheetColors({ required this.textColor, required this.iconColor, required this.backgroundColor, required this.barrierColor, }); @override MoonBottomSheetColors copyWith({ Color? textColor, Color? iconColor, Color? backgroundColor, Color? barrierColor, }) { return MoonBottomSheetColors( textColor: textColor ?? this.textColor, iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, barrierColor: barrierColor ?? this.barrierColor, ); } @override MoonBottomSheetColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonBottomSheetColors) return this; return MoonBottomSheetColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, barrierColor: colorPremulLerp(barrierColor, other.barrierColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonBottomSheetColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("barrierColor", barrierColor)); } } ================================================ FILE: lib/src/theme/bottom_sheet/bottom_sheet_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonBottomSheetProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonBottomSheet. final BorderRadiusGeometry borderRadius; /// The duration of the MoonBottomSheet transition animation (slide in or out). final Duration transitionDuration; /// The curve of the MoonBottomSheet transition animation (slide in or out). final Curve transitionCurve; /// The text style of the MoonBottomSheet. final TextStyle textStyle; const MoonBottomSheetProperties({ required this.borderRadius, required this.transitionDuration, required this.transitionCurve, required this.textStyle, }); @override MoonBottomSheetProperties copyWith({ BorderRadiusGeometry? borderRadius, Duration? transitionDuration, Curve? transitionCurve, TextStyle? textStyle, }) { return MoonBottomSheetProperties( borderRadius: borderRadius ?? this.borderRadius, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, textStyle: textStyle ?? this.textStyle, ); } @override MoonBottomSheetProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonBottomSheetProperties) return this; return MoonBottomSheetProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonBottomSheetProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty("textStyle", textStyle), ); } } ================================================ FILE: lib/src/theme/bottom_sheet/bottom_sheet_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_colors.dart'; import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonBottomSheetTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonBottomSheet. final MoonBottomSheetColors colors; /// The properties of the MoonBottomSheet. final MoonBottomSheetProperties properties; MoonBottomSheetTheme({ required this.tokens, MoonBottomSheetColors? colors, MoonBottomSheetProperties? properties, }) : colors = colors ?? MoonBottomSheetColors( textColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, backgroundColor: tokens.colors.goku, barrierColor: tokens.colors.zeno, ), properties = properties ?? MoonBottomSheetProperties( borderRadius: tokens.borders.surfaceLg, transitionDuration: const Duration(milliseconds: 350), transitionCurve: const Cubic(0.0, 0.0, 0.2, 1.0), textStyle: tokens.typography.body.textDefault, ); @override MoonBottomSheetTheme copyWith({ MoonTokens? tokens, MoonBottomSheetColors? colors, MoonBottomSheetProperties? properties, }) { return MoonBottomSheetTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonBottomSheetTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonBottomSheetTheme) return this; return MoonBottomSheetTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonBottomSheetTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty( "properties", properties, ), ); } } ================================================ FILE: lib/src/theme/breadcrumb/breadcrumb_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonBreadcrumbColors extends ThemeExtension with DiagnosticableTreeMixin { /// The icon and text color of the MoonBreadcrumb item. final Color itemColor; /// The icon and text color of the current MoonBreadcrumb item. final Color? currentItemColor; /// The icon and text color of the MoonBreadcrumb item on hover. final Color? hoverEffectColor; const MoonBreadcrumbColors({ required this.itemColor, required this.currentItemColor, required this.hoverEffectColor, }); @override MoonBreadcrumbColors copyWith({ Color? itemColor, Color? currentItemColor, Color? hoverEffectColor, }) { return MoonBreadcrumbColors( itemColor: itemColor ?? this.itemColor, currentItemColor: currentItemColor ?? this.currentItemColor, hoverEffectColor: hoverEffectColor ?? this.hoverEffectColor, ); } @override MoonBreadcrumbColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonBreadcrumbColors) return this; return MoonBreadcrumbColors( itemColor: colorPremulLerp(itemColor, other.itemColor, t)!, currentItemColor: colorPremulLerp(currentItemColor, other.currentItemColor, t), hoverEffectColor: colorPremulLerp(hoverEffectColor, other.hoverEffectColor, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonBreadcrumbColors")) ..add(ColorProperty("itemColor", itemColor)) ..add(ColorProperty("currentItemColor", currentItemColor)) ..add(ColorProperty("hoverEffectColor", hoverEffectColor)); } } ================================================ FILE: lib/src/theme/breadcrumb/breadcrumb_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonBreadcrumbProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The gap between the divider widget and the MoonBreadcrumb item. final double gap; /// The gap between the leading, label and trailing widgets of the /// MoonBreadcrumb item. final double itemGap; /// The duration of the MoonBreadcrumb item transition animation. final Duration transitionDuration; /// The curve of the MoonBreadcrumb item transition animation. final Curve transitionCurve; /// The text style of the MoonBreadcrumb item. final TextStyle itemTextStyle; /// The text style of the current MoonBreadcrumb item. final TextStyle currentItemTextStyle; /// The text style of the MoonBreadcrumb single custom widget to replace all /// the breadcrumb collapsed items with. final TextStyle showMoreItemTextStyle; const MoonBreadcrumbProperties({ required this.gap, required this.itemGap, required this.transitionDuration, required this.transitionCurve, required this.itemTextStyle, required this.currentItemTextStyle, required this.showMoreItemTextStyle, }); @override MoonBreadcrumbProperties copyWith({ double? gap, double? itemGap, Duration? transitionDuration, Curve? transitionCurve, TextStyle? itemTextStyle, TextStyle? currentItemTextStyle, TextStyle? showMoreItemTextStyle, }) { return MoonBreadcrumbProperties( gap: gap ?? this.gap, itemGap: itemGap ?? this.itemGap, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, itemTextStyle: itemTextStyle ?? this.itemTextStyle, currentItemTextStyle: currentItemTextStyle ?? this.currentItemTextStyle, showMoreItemTextStyle: showMoreItemTextStyle ?? this.showMoreItemTextStyle, ); } @override MoonBreadcrumbProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonBreadcrumbProperties) return this; return MoonBreadcrumbProperties( gap: lerpDouble(gap, other.gap, t)!, itemGap: lerpDouble(itemGap, other.itemGap, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, itemTextStyle: TextStyle.lerp(itemTextStyle, other.itemTextStyle, t)!, currentItemTextStyle: TextStyle.lerp(currentItemTextStyle, other.currentItemTextStyle, t)!, showMoreItemTextStyle: TextStyle.lerp( showMoreItemTextStyle, other.showMoreItemTextStyle, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonBreadcrumbProperties"), ) ..add( DoubleProperty("gap", gap), ) ..add( DoubleProperty("itemGap", itemGap), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty("itemTextStyle", itemTextStyle), ) ..add( DiagnosticsProperty( "currentItemTextStyle", currentItemTextStyle, ), ) ..add( DiagnosticsProperty( "showMoreItemTextStyle", showMoreItemTextStyle, ), ); } } ================================================ FILE: lib/src/theme/breadcrumb/breadcrumb_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:moon_design/src/theme/breadcrumb/breadcrumb_colors.dart'; import 'package:moon_design/src/theme/breadcrumb/breadcrumb_properties.dart'; @immutable class MoonBreadcrumbTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonBreadcrumb. final MoonBreadcrumbColors colors; /// The properties of the MoonBreadcrumb. final MoonBreadcrumbProperties properties; MoonBreadcrumbTheme({ required this.tokens, MoonBreadcrumbColors? colors, MoonBreadcrumbProperties? properties, }) : colors = colors ?? MoonBreadcrumbColors( itemColor: tokens.colors.textSecondary, currentItemColor: tokens.colors.textPrimary, hoverEffectColor: tokens.colors.textPrimary, ), properties = properties ?? MoonBreadcrumbProperties( gap: tokens.sizes.x4s, itemGap: tokens.sizes.x6s, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, itemTextStyle: tokens.typography.body.textDefault, currentItemTextStyle: tokens.typography.body.textDefault, showMoreItemTextStyle: tokens.typography.body.textDefault, ); @override MoonBreadcrumbTheme copyWith({ MoonTokens? tokens, MoonBreadcrumbColors? colors, MoonBreadcrumbProperties? properties, }) { return MoonBreadcrumbTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonBreadcrumbTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonBreadcrumbTheme) return this; return MoonBreadcrumbTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonBreadcrumbTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)); } } ================================================ FILE: lib/src/theme/button/button_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonButtonColors extends ThemeExtension with DiagnosticableTreeMixin { /// The border color of the MoonButton. final Color borderColor; /// The text color of the MoonButton. final Color textColor; /// The background color of the MoonButton filled variant. final Color filledVariantBackgroundColor; /// The text color of the MoonButton filled variant. final Color filledVariantTextColor; /// The focus effect color of the MoonButton text variant. final Color textVariantFocusColor; /// The hover effect color of the MoonButton text variant. final Color textVariantHoverColor; /// The text color of the MoonButton text variant. final Color textVariantTextColor; const MoonButtonColors({ required this.borderColor, required this.textColor, required this.filledVariantBackgroundColor, required this.filledVariantTextColor, required this.textVariantFocusColor, required this.textVariantHoverColor, required this.textVariantTextColor, }); @override MoonButtonColors copyWith({ Color? borderColor, Color? textColor, Color? filledVariantBackgroundColor, Color? filledVariantTextColor, Color? textVariantFocusColor, Color? textVariantHoverColor, Color? textVariantTextColor, }) { return MoonButtonColors( borderColor: borderColor ?? this.borderColor, textColor: textColor ?? this.textColor, filledVariantBackgroundColor: filledVariantBackgroundColor ?? this.filledVariantBackgroundColor, filledVariantTextColor: filledVariantTextColor ?? this.filledVariantTextColor, textVariantFocusColor: textVariantFocusColor ?? this.textVariantFocusColor, textVariantHoverColor: textVariantHoverColor ?? this.textVariantHoverColor, textVariantTextColor: textVariantTextColor ?? this.textVariantTextColor, ); } @override MoonButtonColors lerp(ThemeExtension? other, double t) { if (other is! MoonButtonColors) return this; return MoonButtonColors( borderColor: colorPremulLerp(borderColor, other.borderColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, filledVariantBackgroundColor: colorPremulLerp( filledVariantBackgroundColor, other.filledVariantBackgroundColor, t, )!, filledVariantTextColor: colorPremulLerp( filledVariantTextColor, other.filledVariantTextColor, t, )!, textVariantFocusColor: colorPremulLerp( textVariantFocusColor, other.textVariantFocusColor, t, )!, textVariantHoverColor: colorPremulLerp( textVariantHoverColor, other.textVariantHoverColor, t, )!, textVariantTextColor: colorPremulLerp(textVariantTextColor, other.textVariantTextColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonButtonColors", ), ) ..add( ColorProperty( "borderColor", borderColor, ), ) ..add( ColorProperty( "textColor", textColor, ), ) ..add( ColorProperty( "filledVariantBackgroundColor", filledVariantBackgroundColor, ), ) ..add(ColorProperty("filledVariantTextColor", filledVariantTextColor)) ..add(ColorProperty("textVariantFocusColor", textVariantFocusColor)) ..add(ColorProperty("textVariantHoverColor", textVariantHoverColor)) ..add(ColorProperty("textVariantTextColor", textVariantTextColor)); } } ================================================ FILE: lib/src/theme/button/button_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonButtonSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonButton. final BorderRadiusGeometry borderRadius; /// The gap between the leading, label and trailing widgets of the MoonButton. final double gap; /// The height of the MoonButton. final double height; /// The size value of the MoonButton icon. final double iconSizeValue; /// The padding of the MoonButton. final EdgeInsetsGeometry padding; /// The text style of the MoonButton. final TextStyle textStyle; const MoonButtonSizeProperties({ required this.borderRadius, required this.gap, required this.height, required this.iconSizeValue, required this.padding, required this.textStyle, }); @override MoonButtonSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? gap, double? height, double? iconSizeValue, EdgeInsetsGeometry? padding, TextStyle? textStyle, }) { return MoonButtonSizeProperties( borderRadius: borderRadius ?? this.borderRadius, gap: gap ?? this.gap, height: height ?? this.height, iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, textStyle: textStyle ?? this.textStyle, ); } @override MoonButtonSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonButtonSizeProperties) return this; return MoonButtonSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, gap: lerpDouble(gap, other.gap, t)!, height: lerpDouble(height, other.height, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonButtonSizeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add(DoubleProperty("gap", gap)) ..add(DoubleProperty("height", height)) ..add(DoubleProperty("iconSizeValue", iconSizeValue)) ..add(DiagnosticsProperty("padding", padding)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } ================================================ FILE: lib/src/theme/button/button_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/button/button_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonButtonSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the extra small MoonButton. final MoonButtonSizeProperties xs; /// The properties of the small MoonButton. final MoonButtonSizeProperties sm; /// The properties of the medium MoonButton. final MoonButtonSizeProperties md; /// The properties of the large MoonButton. final MoonButtonSizeProperties lg; /// The properties of the extra large MoonButton. final MoonButtonSizeProperties xl; MoonButtonSizes({ required this.tokens, MoonButtonSizeProperties? xs, MoonButtonSizeProperties? sm, MoonButtonSizeProperties? md, MoonButtonSizeProperties? lg, MoonButtonSizeProperties? xl, }) : xs = xs ?? MoonButtonSizeProperties( borderRadius: tokens.borders.interactiveXs, gap: tokens.sizes.x5s, height: tokens.sizes.xs, iconSizeValue: tokens.sizes.x2s, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), textStyle: tokens.typography.heading.text12, ), sm = sm ?? MoonButtonSizeProperties( borderRadius: tokens.borders.interactiveSm, gap: tokens.sizes.x5s, height: tokens.sizes.sm, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), textStyle: tokens.typography.heading.textDefault, ), md = md ?? MoonButtonSizeProperties( borderRadius: tokens.borders.interactiveSm, gap: tokens.sizes.x4s, height: tokens.sizes.md, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), textStyle: tokens.typography.heading.textDefault, ), lg = lg ?? MoonButtonSizeProperties( borderRadius: tokens.borders.interactiveSm, gap: tokens.sizes.x3s, height: tokens.sizes.lg, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), textStyle: tokens.typography.heading.text16, ), xl = xl ?? MoonButtonSizeProperties( borderRadius: tokens.borders.interactiveMd, gap: tokens.sizes.x2s, height: tokens.sizes.xl, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.xs), textStyle: tokens.typography.heading.text16, ); @override MoonButtonSizes copyWith({ MoonTokens? tokens, MoonButtonSizeProperties? xs, MoonButtonSizeProperties? sm, MoonButtonSizeProperties? md, MoonButtonSizeProperties? lg, MoonButtonSizeProperties? xl, }) { return MoonButtonSizes( tokens: tokens ?? this.tokens, xs: xs ?? this.xs, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, xl: xl ?? this.xl, ); } @override MoonButtonSizes lerp(ThemeExtension? other, double t) { if (other is! MoonButtonSizes) return this; return MoonButtonSizes( tokens: tokens.lerp(other.tokens, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), xl: xl.lerp(other.xl, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonButtonSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)) ..add(DiagnosticsProperty("xl", xl)); } } ================================================ FILE: lib/src/theme/button/button_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/button/button_colors.dart'; import 'package:moon_design/src/theme/button/button_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonButtonTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonButton. final MoonButtonColors colors; /// The sizes of the MoonButton. final MoonButtonSizes sizes; MoonButtonTheme({ required this.tokens, MoonButtonColors? colors, MoonButtonSizes? sizes, }) : colors = colors ?? MoonButtonColors( borderColor: tokens.colors.trunks, textColor: tokens.colors.textPrimary, filledVariantBackgroundColor: tokens.colors.piccolo, filledVariantTextColor: tokens.colors.goten, textVariantTextColor: tokens.colors.textSecondary, textVariantFocusColor: tokens.colors.piccolo, textVariantHoverColor: tokens.colors.jiren, ), sizes = sizes ?? MoonButtonSizes(tokens: tokens); @override MoonButtonTheme copyWith({ MoonTokens? tokens, MoonButtonColors? colors, MoonButtonSizes? sizes, }) { return MoonButtonTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); } @override MoonButtonTheme lerp(ThemeExtension? other, double t) { if (other is! MoonButtonTheme) return this; return MoonButtonTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonButtonTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/carousel/carousel_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonCarouselColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonCarousel items. final Color textColor; /// The icon color of the MoonCarousel items. final Color iconColor; const MoonCarouselColors({ required this.textColor, required this.iconColor, }); @override MoonCarouselColors copyWith({ Color? textColor, Color? iconColor, }) { return MoonCarouselColors( textColor: textColor ?? this.textColor, iconColor: iconColor ?? this.iconColor, ); } @override MoonCarouselColors lerp(ThemeExtension? other, double t) { if (other is! MoonCarouselColors) return this; return MoonCarouselColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCarouselColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("iconColor", iconColor)); } } ================================================ FILE: lib/src/theme/carousel/carousel_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonCarouselProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The gap between the MoonCarousel items. final double gap; /// The text style of the MoonCarousel items. final TextStyle textStyle; /// The delay between the items in the MoonCarousel's automatic scrolling /// sequence. final Duration autoPlayDelay; /// The duration of the MoonCarousel autoplay transition animation. final Duration transitionDuration; /// The curve of the MoonCarousel autoplay transition animation. final Curve transitionCurve; const MoonCarouselProperties({ required this.gap, required this.textStyle, required this.autoPlayDelay, required this.transitionDuration, required this.transitionCurve, }); @override MoonCarouselProperties copyWith({ double? gap, TextStyle? textStyle, Duration? autoPlayDelay, Duration? transitionDuration, Curve? transitionCurve, }) { return MoonCarouselProperties( gap: gap ?? this.gap, textStyle: textStyle ?? this.textStyle, autoPlayDelay: autoPlayDelay ?? this.autoPlayDelay, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, ); } @override MoonCarouselProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonCarouselProperties) return this; return MoonCarouselProperties( gap: lerpDouble(gap, other.gap, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, autoPlayDelay: lerpDuration(autoPlayDelay, other.autoPlayDelay, t), transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCarouselProperties")) ..add(DoubleProperty("gap", gap)) ..add(DiagnosticsProperty("textStyle", textStyle)) ..add(DiagnosticsProperty("autoPlayDelay", autoPlayDelay)) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ); } } ================================================ FILE: lib/src/theme/carousel/carousel_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/carousel/carousel_colors.dart'; import 'package:moon_design/src/theme/carousel/carousel_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCarouselTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonCarousel. final MoonCarouselColors colors; /// The properties of the MoonCarousel. final MoonCarouselProperties properties; MoonCarouselTheme({ required this.tokens, MoonCarouselColors? colors, MoonCarouselProperties? properties, }) : colors = colors ?? MoonCarouselColors( textColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, ), properties = properties ?? MoonCarouselProperties( gap: tokens.sizes.x2s, textStyle: tokens.typography.body.textDefault, autoPlayDelay: const Duration(seconds: 3), transitionDuration: const Duration(milliseconds: 800), transitionCurve: Curves.fastOutSlowIn, ); @override MoonCarouselTheme copyWith({ MoonTokens? tokens, MoonCarouselColors? colors, MoonCarouselProperties? properties, }) { return MoonCarouselTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonCarouselTheme lerp(ThemeExtension? other, double t) { if (other is! MoonCarouselTheme) return this; return MoonCarouselTheme( tokens: tokens, properties: properties.lerp(other.properties, t), colors: colors.lerp(other.colors, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonCarouselTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty("properties", properties), ); } } ================================================ FILE: lib/src/theme/checkbox/checkbox_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonCheckboxColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the checked MoonCheckbox. final Color activeColor; /// The border color of the unchecked MoonCheckbox. final Color borderColor; /// The color of the check icon when the MoonCheckbox is checked. final Color checkColor; /// The background color of the unchecked MoonCheckbox. final Color inactiveColor; const MoonCheckboxColors({ required this.activeColor, required this.borderColor, required this.checkColor, required this.inactiveColor, }); @override MoonCheckboxColors copyWith({ Color? activeColor, Color? borderColor, Color? checkColor, Color? inactiveColor, }) { return MoonCheckboxColors( activeColor: activeColor ?? this.activeColor, borderColor: borderColor ?? this.borderColor, checkColor: checkColor ?? this.checkColor, inactiveColor: inactiveColor ?? this.inactiveColor, ); } @override MoonCheckboxColors lerp(ThemeExtension? other, double t) { if (other is! MoonCheckboxColors) return this; return MoonCheckboxColors( activeColor: colorPremulLerp(activeColor, other.activeColor, t)!, borderColor: colorPremulLerp(borderColor, other.borderColor, t)!, checkColor: colorPremulLerp(checkColor, other.checkColor, t)!, inactiveColor: colorPremulLerp(inactiveColor, other.inactiveColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCheckboxColors")) ..add(ColorProperty("activeColor", activeColor)) ..add(ColorProperty("borderColor", borderColor)) ..add(ColorProperty("checkColor", checkColor)) ..add(ColorProperty("inactiveColor", inactiveColor)); } } ================================================ FILE: lib/src/theme/checkbox/checkbox_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonCheckboxProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonCheckbox. final BorderRadiusGeometry borderRadius; const MoonCheckboxProperties({required this.borderRadius}); @override MoonCheckboxProperties copyWith({BorderRadiusGeometry? borderRadius}) { return MoonCheckboxProperties( borderRadius: borderRadius ?? this.borderRadius, ); } @override MoonCheckboxProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonCheckboxProperties) return this; return MoonCheckboxProperties( borderRadius: BorderRadiusGeometry.lerp( borderRadius, other.borderRadius, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonCheckboxProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ); } } ================================================ FILE: lib/src/theme/checkbox/checkbox_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/checkbox/checkbox_colors.dart'; import 'package:moon_design/src/theme/checkbox/checkbox_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCheckboxTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonCheckbox. final MoonCheckboxColors colors; /// The properties of the MoonCheckbox. final MoonCheckboxProperties properties; MoonCheckboxTheme({ required this.tokens, MoonCheckboxColors? colors, MoonCheckboxProperties? properties, }) : colors = colors ?? MoonCheckboxColors( activeColor: tokens.colors.piccolo, borderColor: tokens.colors.trunks, checkColor: tokens.colors.goten, inactiveColor: Colors.transparent, ), properties = properties ?? MoonCheckboxProperties(borderRadius: tokens.borders.interactiveXs); @override MoonCheckboxTheme copyWith({ MoonTokens? tokens, MoonCheckboxColors? colors, MoonCheckboxProperties? properties, }) { return MoonCheckboxTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonCheckboxTheme lerp(ThemeExtension? other, double t) { if (other is! MoonCheckboxTheme) return this; return MoonCheckboxTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonCheckboxTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty("properties", properties), ); } } ================================================ FILE: lib/src/theme/chip/chip_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonChipColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text and border color of the MoonChip in active state. final Color activeColor; /// The background color of the MoonChip. final Color backgroundColor; /// The background color of the MoonChip in active state. final Color activeBackgroundColor; /// The text color of the MoonChip. final Color textColor; const MoonChipColors({ required this.activeColor, required this.backgroundColor, required this.activeBackgroundColor, required this.textColor, }); @override MoonChipColors copyWith({ Color? activeColor, Color? backgroundColor, Color? activeBackgroundColor, Color? textColor, }) { return MoonChipColors( activeColor: activeColor ?? this.activeColor, backgroundColor: backgroundColor ?? this.backgroundColor, activeBackgroundColor: activeBackgroundColor ?? this.activeBackgroundColor, textColor: textColor ?? this.textColor, ); } @override MoonChipColors lerp(ThemeExtension? other, double t) { if (other is! MoonChipColors) return this; return MoonChipColors( activeColor: colorPremulLerp(activeColor, other.activeColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, activeBackgroundColor: colorPremulLerp( activeBackgroundColor, other.activeBackgroundColor, t, )!, textColor: colorPremulLerp(textColor, other.textColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonChipColors")) ..add(ColorProperty("activeColor", activeColor)) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("activeBackgroundColor", activeBackgroundColor)) ..add(ColorProperty("textColor", textColor)); } } ================================================ FILE: lib/src/theme/chip/chip_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonChipSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonChip. final BorderRadiusGeometry borderRadius; /// The gap between the leading, label and trailing widgets of the MoonChip. final double gap; /// The height of the MoonChip. final double height; /// The size value of the MoonChip icon. final double iconSizeValue; /// The padding of the MoonChip. final EdgeInsetsGeometry padding; /// The text style of the MoonChip. final TextStyle textStyle; const MoonChipSizeProperties({ required this.borderRadius, required this.gap, required this.height, required this.iconSizeValue, required this.padding, required this.textStyle, }); @override MoonChipSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? gap, double? height, double? iconSizeValue, EdgeInsetsGeometry? padding, TextStyle? textStyle, }) { return MoonChipSizeProperties( borderRadius: borderRadius ?? this.borderRadius, gap: gap ?? this.gap, height: height ?? this.height, iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, textStyle: textStyle ?? this.textStyle, ); } @override MoonChipSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonChipSizeProperties) return this; return MoonChipSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, gap: lerpDouble(gap, other.gap, t)!, height: lerpDouble(height, other.height, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonChipSizeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add(DoubleProperty("gap", gap)) ..add(DoubleProperty("height", height)) ..add(DoubleProperty("iconSizeValue", iconSizeValue)) ..add(DiagnosticsProperty("padding", padding)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } ================================================ FILE: lib/src/theme/chip/chip_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/chip/chip_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonChipSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the small MoonChip. final MoonChipSizeProperties sm; /// The properties of the medium MoonChip. final MoonChipSizeProperties md; MoonChipSizes({ required this.tokens, MoonChipSizeProperties? sm, MoonChipSizeProperties? md, }) : sm = sm ?? MoonChipSizeProperties( borderRadius: tokens.borders.interactiveXs, gap: tokens.sizes.x4s, height: tokens.sizes.sm, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), textStyle: tokens.typography.body.textDefault, ), md = md ?? MoonChipSizeProperties( borderRadius: tokens.borders.interactiveSm, gap: tokens.sizes.x4s, height: tokens.sizes.md, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), textStyle: tokens.typography.body.textDefault, ); @override MoonChipSizes copyWith({ MoonTokens? tokens, MoonChipSizeProperties? sm, MoonChipSizeProperties? md, }) { return MoonChipSizes( tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, ); } @override MoonChipSizes lerp(ThemeExtension? other, double t) { if (other is! MoonChipSizes) return this; return MoonChipSizes( tokens: tokens.lerp(other.tokens, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonChipSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)); } } ================================================ FILE: lib/src/theme/chip/chip_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/chip/chip_colors.dart'; import 'package:moon_design/src/theme/chip/chip_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonChipTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonChip. final MoonChipColors colors; /// The sizes of the MoonChip. final MoonChipSizes sizes; MoonChipTheme({ required this.tokens, MoonChipColors? colors, MoonChipSizes? sizes, }) : colors = colors ?? MoonChipColors( activeColor: tokens.colors.piccolo, backgroundColor: tokens.colors.goku, activeBackgroundColor: tokens.colors.jiren, textColor: tokens.colors.textPrimary, ), sizes = sizes ?? MoonChipSizes(tokens: tokens); @override MoonChipTheme copyWith({ MoonTokens? tokens, MoonChipColors? colors, MoonChipSizes? sizes, }) { return MoonChipTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); } @override MoonChipTheme lerp(ThemeExtension? other, double t) { if (other is! MoonChipTheme) return this; return MoonChipTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonChipTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/dot_indicator/dot_indicator_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonDotIndicatorColors extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the selected MoonDotIndicator dot. final Color selectedColor; /// The color of the unselected MoonDotIndicator dot. final Color unselectedColor; const MoonDotIndicatorColors({ required this.selectedColor, required this.unselectedColor, }); @override MoonDotIndicatorColors copyWith({ Color? selectedColor, Color? unselectedColor, }) { return MoonDotIndicatorColors( selectedColor: selectedColor ?? this.selectedColor, unselectedColor: unselectedColor ?? this.unselectedColor, ); } @override MoonDotIndicatorColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonDotIndicatorColors) return this; return MoonDotIndicatorColors( selectedColor: colorPremulLerp(selectedColor, other.selectedColor, t)!, unselectedColor: colorPremulLerp( unselectedColor, other.unselectedColor, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonDotIndicatorColors")) ..add(ColorProperty("selectedColor", selectedColor)) ..add(ColorProperty("unselectedColor", unselectedColor)); } } ================================================ FILE: lib/src/theme/dot_indicator/dot_indicator_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonDotIndicatorProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The gap between the MoonDotIndicator dots. final double gap; /// The size of each MoonDotIndicator dot. final double size; /// The duration of the MoonDotIndicator transition animation. final Duration transitionDuration; /// The curve of the MoonDotIndicator transition animation. final Curve transitionCurve; const MoonDotIndicatorProperties({ required this.size, required this.transitionDuration, required this.transitionCurve, required this.gap, }); @override MoonDotIndicatorProperties copyWith({ double? gap, double? size, Duration? transitionDuration, Curve? transitionCurve, }) { return MoonDotIndicatorProperties( gap: gap ?? this.gap, size: size ?? this.size, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, ); } @override MoonDotIndicatorProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonDotIndicatorProperties) return this; return MoonDotIndicatorProperties( gap: lerpDouble(gap, other.gap, t)!, size: lerpDouble(size, other.size, t)!, transitionDuration: lerpDuration( transitionDuration, other.transitionDuration, t, ), transitionCurve: other.transitionCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonDotIndicatorProperties"), ) ..add( DoubleProperty("gap", gap), ) ..add( DoubleProperty("size", size), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ); } } ================================================ FILE: lib/src/theme/dot_indicator/dot_indicator_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/dot_indicator/dot_indicator_colors.dart'; import 'package:moon_design/src/theme/dot_indicator/dot_indicator_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonDotIndicatorTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonDotIndicator. final MoonDotIndicatorColors colors; /// The properties of the MoonDotIndicator. final MoonDotIndicatorProperties properties; MoonDotIndicatorTheme({ required this.tokens, MoonDotIndicatorColors? colors, MoonDotIndicatorProperties? properties, }) : colors = colors ?? MoonDotIndicatorColors( selectedColor: tokens.colors.piccolo, unselectedColor: tokens.colors.beerus, ), properties = properties ?? MoonDotIndicatorProperties( gap: tokens.sizes.x4s, size: tokens.sizes.x4s, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, ); @override MoonDotIndicatorTheme copyWith({ MoonTokens? tokens, MoonDotIndicatorColors? colors, MoonDotIndicatorProperties? properties, }) { return MoonDotIndicatorTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonDotIndicatorTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonDotIndicatorTheme) return this; return MoonDotIndicatorTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonDotIndicatorTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty( "properties", properties, ), ); } } ================================================ FILE: lib/src/theme/drawer/drawer_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonDrawerColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonDrawer. final Color textColor; /// The icon color of the MoonDrawer. final Color iconColor; /// The background color of the MoonDrawer. final Color backgroundColor; const MoonDrawerColors({ required this.textColor, required this.iconColor, required this.backgroundColor, }); @override MoonDrawerColors copyWith({ Color? textColor, Color? iconColor, Color? backgroundColor, }) { return MoonDrawerColors( textColor: textColor ?? this.textColor, iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonDrawerColors lerp(ThemeExtension? other, double t) { if (other is! MoonDrawerColors) return this; return MoonDrawerColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonDrawerColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/drawer/drawer_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonDrawerProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonDrawer. final BorderRadiusGeometry borderRadius; /// The width of the MoonDrawer. final double width; /// The text style of the MoonDrawer. final TextStyle textStyle; const MoonDrawerProperties({ required this.borderRadius, required this.width, required this.textStyle, }); @override MoonDrawerProperties copyWith({ BorderRadiusGeometry? borderRadius, double? width, TextStyle? textStyle, }) { return MoonDrawerProperties( borderRadius: borderRadius ?? this.borderRadius, width: width ?? this.width, textStyle: textStyle ?? this.textStyle, ); } @override MoonDrawerProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonDrawerProperties) return this; return MoonDrawerProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, width: lerpDouble(width, other.width, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonDrawerProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("width", width), ) ..add( DiagnosticsProperty("textStyle", textStyle), ); } } ================================================ FILE: lib/src/theme/drawer/drawer_shadows.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonDrawerShadows extends ThemeExtension with DiagnosticableTreeMixin { /// The list of shadows applied to the MoonDrawer. final List drawerShadows; const MoonDrawerShadows({required this.drawerShadows}); @override MoonDrawerShadows copyWith({List? drawerShadows}) { return MoonDrawerShadows( drawerShadows: drawerShadows ?? this.drawerShadows, ); } @override MoonDrawerShadows lerp(ThemeExtension? other, double t) { if (other is! MoonDrawerShadows) return this; return MoonDrawerShadows( drawerShadows: BoxShadow.lerpList( drawerShadows, other.drawerShadows, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonDrawerShadows"), ) ..add( DiagnosticsProperty>("drawerShadows", drawerShadows), ); } } ================================================ FILE: lib/src/theme/drawer/drawer_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/drawer/drawer_colors.dart'; import 'package:moon_design/src/theme/drawer/drawer_properties.dart'; import 'package:moon_design/src/theme/drawer/drawer_shadows.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonDrawerTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonDrawer. final MoonDrawerColors colors; /// The properties of the MoonDrawer. final MoonDrawerProperties properties; /// The shadows of the MoonDrawer. final MoonDrawerShadows shadows; MoonDrawerTheme({ required this.tokens, MoonDrawerColors? colors, MoonDrawerProperties? properties, MoonDrawerShadows? shadows, }) : colors = colors ?? MoonDrawerColors( textColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, backgroundColor: tokens.colors.goku, ), properties = properties ?? MoonDrawerProperties( borderRadius: BorderRadius.zero, width: 448, textStyle: tokens.typography.body.textDefault, ), shadows = shadows ?? MoonDrawerShadows(drawerShadows: tokens.shadows.lg); @override MoonDrawerTheme copyWith({ MoonTokens? tokens, MoonDrawerColors? colors, MoonDrawerProperties? properties, MoonDrawerShadows? shadows, }) { return MoonDrawerTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, ); } @override MoonDrawerTheme lerp(ThemeExtension? other, double t) { if (other is! MoonDrawerTheme) return this; return MoonDrawerTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonDrawerTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("shadows", shadows)); } } ================================================ FILE: lib/src/theme/dropdown/dropdown_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonDropdownColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonDropdown. final Color textColor; /// The icon color of the MoonDropdown. final Color iconColor; /// The background color of the MoonDropdown. final Color backgroundColor; const MoonDropdownColors({ required this.textColor, required this.iconColor, required this.backgroundColor, }); @override MoonDropdownColors copyWith({ Color? textColor, Color? iconColor, Color? backgroundColor, }) { return MoonDropdownColors( textColor: textColor ?? this.textColor, iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonDropdownColors lerp(ThemeExtension? other, double t) { if (other is! MoonDropdownColors) return this; return MoonDropdownColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonDropdownColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/dropdown/dropdown_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonDropdownProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonDropdown. final BorderRadiusGeometry borderRadius; /// The distance between the MoonDropdown and the target child widget. final double distanceToTarget; /// The duration of the MoonDropdown transition animation (fade in or out). final Duration transitionDuration; /// The curve of the MoonDropdown transition animation (fade in or out). final Curve transitionCurve; /// The padding of the MoonDropdown content. final EdgeInsetsGeometry contentPadding; /// The margin of the MoonDropdown. final EdgeInsetsGeometry dropdownMargin; /// The text style of the MoonDropdown. final TextStyle textStyle; const MoonDropdownProperties({ required this.borderRadius, required this.distanceToTarget, required this.transitionDuration, required this.transitionCurve, required this.contentPadding, required this.dropdownMargin, required this.textStyle, }); @override MoonDropdownProperties copyWith({ BorderRadiusGeometry? borderRadius, double? distanceToTarget, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? contentPadding, EdgeInsetsGeometry? dropdownMargin, TextStyle? textStyle, }) { return MoonDropdownProperties( borderRadius: borderRadius ?? this.borderRadius, distanceToTarget: distanceToTarget ?? this.distanceToTarget, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, contentPadding: contentPadding ?? this.contentPadding, dropdownMargin: dropdownMargin ?? this.dropdownMargin, textStyle: textStyle ?? this.textStyle, ); } @override MoonDropdownProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonDropdownProperties) return this; return MoonDropdownProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, distanceToTarget: lerpDouble(distanceToTarget, other.distanceToTarget, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, dropdownMargin: EdgeInsetsGeometry.lerp(dropdownMargin, other.dropdownMargin, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonDropdownProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("distanceToTarget", distanceToTarget), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty( "contentPadding", contentPadding, ), ) ..add( DiagnosticsProperty( "dropdownMargin", dropdownMargin, ), ) ..add( DiagnosticsProperty( "textStyle", textStyle, ), ); } } ================================================ FILE: lib/src/theme/dropdown/dropdown_shadows.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonDropdownShadows extends ThemeExtension with DiagnosticableTreeMixin { /// The list of shadows applied to the MoonDropdown. final List dropdownShadows; const MoonDropdownShadows({required this.dropdownShadows}); @override MoonDropdownShadows copyWith({List? dropdownShadows}) { return MoonDropdownShadows( dropdownShadows: dropdownShadows ?? this.dropdownShadows, ); } @override MoonDropdownShadows lerp( ThemeExtension? other, double t, ) { if (other is! MoonDropdownShadows) return this; return MoonDropdownShadows( dropdownShadows: BoxShadow.lerpList( dropdownShadows, other.dropdownShadows, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonDropdownShadows", ), ) ..add( DiagnosticsProperty>( "dropdownShadows", dropdownShadows, ), ); } } ================================================ FILE: lib/src/theme/dropdown/dropdown_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/dropdown/dropdown_colors.dart'; import 'package:moon_design/src/theme/dropdown/dropdown_properties.dart'; import 'package:moon_design/src/theme/dropdown/dropdown_shadows.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonDropdownTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonDropdown. final MoonDropdownColors colors; /// The properties of the MoonDropdown. final MoonDropdownProperties properties; /// The shadows of the MoonDropdown. final MoonDropdownShadows shadows; MoonDropdownTheme({ required this.tokens, MoonDropdownColors? colors, MoonDropdownProperties? properties, MoonDropdownShadows? shadows, }) : colors = colors ?? MoonDropdownColors( textColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, backgroundColor: tokens.colors.goku, ), properties = properties ?? MoonDropdownProperties( borderRadius: tokens.borders.interactiveMd, distanceToTarget: tokens.sizes.x4s, transitionDuration: Duration.zero, transitionCurve: tokens.transitions.defaultTransitionCurve, contentPadding: EdgeInsets.all(tokens.sizes.x5s), dropdownMargin: EdgeInsets.all(tokens.sizes.x4s), textStyle: tokens.typography.body.textDefault, ), shadows = shadows ?? MoonDropdownShadows(dropdownShadows: tokens.shadows.sm); @override MoonDropdownTheme copyWith({ MoonTokens? tokens, MoonDropdownColors? colors, MoonDropdownProperties? properties, MoonDropdownShadows? shadows, }) { return MoonDropdownTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, ); } @override MoonDropdownTheme lerp(ThemeExtension? other, double t) { if (other is! MoonDropdownTheme) return this; return MoonDropdownTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add( DiagnosticsProperty("type", "MoonDropdownTheme"), ) ..add( DiagnosticsProperty("tokens", tokens), ) ..add( DiagnosticsProperty("colors", colors), ) ..add( DiagnosticsProperty("properties", properties), ) ..add( DiagnosticsProperty("shadows", shadows), ); } } ================================================ FILE: lib/src/theme/effects/control_effect.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonControlEffect extends ThemeExtension with DiagnosticableTreeMixin { /// The effect color of the control. final Color? effectColor; /// The effect duration of the control. final Duration effectDuration; /// The effect curve of the control. final Curve effectCurve; /// The effect extent of the control. final double? effectExtent; /// The effect scalar of the control. final double? effectScalar; const MoonControlEffect({ this.effectColor, required this.effectDuration, required this.effectCurve, this.effectExtent, this.effectScalar, }); @override MoonControlEffect copyWith({ Color? effectColor, Duration? effectDuration, Curve? effectCurve, double? effectExtent, double? effectScalar, }) { return MoonControlEffect( effectColor: effectColor ?? this.effectColor, effectDuration: effectDuration ?? this.effectDuration, effectCurve: effectCurve ?? this.effectCurve, effectExtent: effectExtent ?? this.effectExtent, effectScalar: effectScalar ?? this.effectScalar, ); } @override MoonControlEffect lerp(ThemeExtension? other, double t) { if (other is! MoonControlEffect) return this; return MoonControlEffect( effectColor: colorPremulLerp(effectColor, other.effectColor, t), effectDuration: lerpDuration(effectDuration, other.effectDuration, t), effectCurve: other.effectCurve, effectExtent: lerpDouble(effectExtent, other.effectExtent, t), effectScalar: lerpDouble(effectScalar, other.effectScalar, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonControlsEffects")) ..add(ColorProperty("effectColor", effectColor)) ..add(DiagnosticsProperty("effectDuration", effectDuration)) ..add(DiagnosticsProperty("effectCurve", effectCurve)) ..add(DoubleProperty("effectExtent", effectExtent)) ..add(DoubleProperty("effectScalar", effectScalar)); } } ================================================ FILE: lib/src/theme/effects/effects_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/effects/control_effect.dart'; import 'package:moon_design/src/theme/effects/focus_effect.dart'; import 'package:moon_design/src/theme/effects/hover_effect.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonEffectsTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The focus effect properties of the control widgets. final MoonFocusEffect controlFocusEffect; /// The hover effect properties of the control widgets. final MoonHoverEffect controlHoverEffect; /// The pulse effect properties of the control widgets. final MoonControlEffect controlPulseEffect; /// The scale effect properties of the control widgets. final MoonControlEffect controlScaleEffect; MoonEffectsTheme({ required this.tokens, MoonFocusEffect? controlFocusEffect, MoonHoverEffect? controlHoverEffect, MoonControlEffect? controlPulseEffect, MoonControlEffect? controlScaleEffect, }) : controlFocusEffect = controlFocusEffect ?? MoonFocusEffect( effectColor: tokens.colors.bulma.withOpacity(0.25), effectExtent: 4, effectDuration: tokens.transitions.defaultTransitionDuration, effectCurve: tokens.transitions.defaultTransitionCurve, ), controlHoverEffect = controlHoverEffect ?? MoonHoverEffect( primaryHoverColor: tokens.colors.heles, secondaryHoverColor: tokens.colors.jiren, hoverDuration: tokens.transitions.defaultTransitionDuration, hoverCurve: tokens.transitions.defaultTransitionCurve, ), controlPulseEffect = controlPulseEffect ?? MoonControlEffect( effectColor: tokens.colors.piccolo, effectDuration: const Duration(milliseconds: 1400), effectCurve: tokens.transitions.defaultTransitionCurve, effectExtent: 24, ), controlScaleEffect = controlScaleEffect ?? MoonControlEffect( effectDuration: tokens.transitions.defaultTransitionDuration, effectCurve: tokens.transitions.defaultTransitionCurve, effectScalar: 0.95, ); @override MoonEffectsTheme copyWith({ MoonTokens? tokens, MoonFocusEffect? controlFocusEffect, MoonHoverEffect? controlHoverEffect, MoonControlEffect? controlPulseEffect, MoonControlEffect? controlScaleEffect, }) { return MoonEffectsTheme( tokens: tokens ?? this.tokens, controlFocusEffect: controlFocusEffect ?? this.controlFocusEffect, controlHoverEffect: controlHoverEffect ?? this.controlHoverEffect, controlPulseEffect: controlPulseEffect ?? this.controlPulseEffect, controlScaleEffect: controlScaleEffect ?? this.controlScaleEffect, ); } @override MoonEffectsTheme lerp(ThemeExtension? other, double t) { if (other is! MoonEffectsTheme) return this; return MoonEffectsTheme( tokens: tokens.lerp(other.tokens, t), controlFocusEffect: controlFocusEffect.lerp(other.controlFocusEffect, t), controlHoverEffect: controlHoverEffect.lerp(other.controlHoverEffect, t), controlScaleEffect: controlScaleEffect.lerp(other.controlScaleEffect, t), controlPulseEffect: controlPulseEffect.lerp(other.controlPulseEffect, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonEffectsTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add( DiagnosticsProperty( "controlScaleEffect", controlScaleEffect, ), ) ..add( DiagnosticsProperty( "controlPulseEffect", controlPulseEffect, ), ) ..add( DiagnosticsProperty( "controlFocusEffect", controlFocusEffect, ), ) ..add( DiagnosticsProperty( "controlHoverEffect", controlHoverEffect, ), ); } } ================================================ FILE: lib/src/theme/effects/focus_effect.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonFocusEffect extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the focus effect. final Color effectColor; /// The extent of the focus effect. final double effectExtent; /// The duration of the focus effect. final Duration effectDuration; /// The curve of the focus effect. final Curve effectCurve; const MoonFocusEffect({ required this.effectColor, required this.effectExtent, required this.effectDuration, required this.effectCurve, }); @override MoonFocusEffect copyWith({ Color? effectColor, double? effectExtent, Duration? effectDuration, Curve? effectCurve, }) { return MoonFocusEffect( effectColor: effectColor ?? this.effectColor, effectExtent: effectExtent ?? this.effectExtent, effectDuration: effectDuration ?? this.effectDuration, effectCurve: effectCurve ?? this.effectCurve, ); } @override MoonFocusEffect lerp(ThemeExtension? other, double t) { if (other is! MoonFocusEffect) return this; return MoonFocusEffect( effectColor: colorPremulLerp(effectColor, other.effectColor, t)!, effectExtent: lerpDouble(effectExtent, other.effectExtent, t)!, effectDuration: lerpDuration(effectDuration, other.effectDuration, t), effectCurve: other.effectCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonFocusEffects")) ..add(ColorProperty("effectColor", effectColor)) ..add(DoubleProperty("effectExtent", effectExtent)) ..add(DiagnosticsProperty("effectDuration", effectDuration)) ..add(DiagnosticsProperty("effectCurve", effectCurve)); } } ================================================ FILE: lib/src/theme/effects/hover_effect.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonHoverEffect extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the primary hover effect. final Color primaryHoverColor; /// The color of the secondary hover effect. final Color secondaryHoverColor; /// The duration of the hover effect. final Duration hoverDuration; /// The curve of the hover effect. final Curve hoverCurve; const MoonHoverEffect({ required this.primaryHoverColor, required this.secondaryHoverColor, required this.hoverDuration, required this.hoverCurve, }); @override MoonHoverEffect copyWith({ Color? primaryHoverColor, Color? secondaryHoverColor, Duration? hoverDuration, Curve? hoverCurve, }) { return MoonHoverEffect( primaryHoverColor: primaryHoverColor ?? this.primaryHoverColor, secondaryHoverColor: secondaryHoverColor ?? this.secondaryHoverColor, hoverDuration: hoverDuration ?? this.hoverDuration, hoverCurve: hoverCurve ?? this.hoverCurve, ); } @override MoonHoverEffect lerp(ThemeExtension? other, double t) { if (other is! MoonHoverEffect) return this; return MoonHoverEffect( primaryHoverColor: colorPremulLerp(primaryHoverColor, other.primaryHoverColor, t)!, secondaryHoverColor: colorPremulLerp(secondaryHoverColor, other.secondaryHoverColor, t)!, hoverDuration: lerpDuration(hoverDuration, other.hoverDuration, t), hoverCurve: other.hoverCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonHoverEffects")) ..add(ColorProperty("primaryHoverColor", primaryHoverColor)) ..add(ColorProperty("secondaryHoverColor", secondaryHoverColor)) ..add(DiagnosticsProperty("hoverDuration", hoverDuration)) ..add(DiagnosticsProperty("hoverCurve", hoverCurve)); } } ================================================ FILE: lib/src/theme/loaders/circular_loader/circular_loader_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonCircularLoaderColors extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the MoonCircularLoader. final Color color; /// The background color of the MoonCircularLoader. final Color backgroundColor; const MoonCircularLoaderColors({ required this.color, required this.backgroundColor, }); @override MoonCircularLoaderColors copyWith({ Color? color, Color? backgroundColor, }) { return MoonCircularLoaderColors( color: color ?? this.color, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonCircularLoaderColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonCircularLoaderColors) return this; return MoonCircularLoaderColors( color: colorPremulLerp(color, other.color, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularLoaderColors")) ..add(ColorProperty("color", color)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/loaders/circular_loader/circular_loader_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonCircularLoaderSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The size value of the MoonCircularLoader. final double loaderSizeValue; /// The stroke width of the MoonCircularLoader. final double loaderStrokeWidth; const MoonCircularLoaderSizeProperties({ required this.loaderSizeValue, required this.loaderStrokeWidth, }); @override MoonCircularLoaderSizeProperties copyWith({ double? loaderSizeValue, double? loaderStrokeWidth, }) { return MoonCircularLoaderSizeProperties( loaderSizeValue: loaderSizeValue ?? this.loaderSizeValue, loaderStrokeWidth: loaderStrokeWidth ?? this.loaderStrokeWidth, ); } @override MoonCircularLoaderSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonCircularLoaderSizeProperties) return this; return MoonCircularLoaderSizeProperties( loaderSizeValue: lerpDouble(loaderSizeValue, other.loaderSizeValue, t)!, loaderStrokeWidth: lerpDouble(loaderStrokeWidth, other.loaderStrokeWidth, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularLoaderSizeProperties")) ..add(DoubleProperty("loaderSizeValue", loaderSizeValue)) ..add(DoubleProperty("loaderStrokeWidth", loaderStrokeWidth)); } } ================================================ FILE: lib/src/theme/loaders/circular_loader/circular_loader_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCircularLoaderSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the (2x) extra small MoonCircularLoader. final MoonCircularLoaderSizeProperties x2s; /// The properties of the extra small MoonCircularLoader. final MoonCircularLoaderSizeProperties xs; /// The properties of the small MoonCircularLoader. final MoonCircularLoaderSizeProperties sm; /// The properties of the medium MoonCircularLoader. final MoonCircularLoaderSizeProperties md; /// The properties of the large MoonCircularLoader. final MoonCircularLoaderSizeProperties lg; MoonCircularLoaderSizes({ required this.tokens, MoonCircularLoaderSizeProperties? x2s, MoonCircularLoaderSizeProperties? xs, MoonCircularLoaderSizeProperties? sm, MoonCircularLoaderSizeProperties? md, MoonCircularLoaderSizeProperties? lg, }) : x2s = x2s ?? MoonCircularLoaderSizeProperties( loaderSizeValue: tokens.sizes.x2s, loaderStrokeWidth: tokens.sizes.x6s, ), xs = xs ?? MoonCircularLoaderSizeProperties( loaderSizeValue: tokens.sizes.xs, loaderStrokeWidth: tokens.sizes.x6s, ), sm = sm ?? MoonCircularLoaderSizeProperties( loaderSizeValue: tokens.sizes.sm, loaderStrokeWidth: tokens.sizes.x6s, ), md = md ?? MoonCircularLoaderSizeProperties( loaderSizeValue: tokens.sizes.md, loaderStrokeWidth: tokens.sizes.x5s, ), lg = lg ?? MoonCircularLoaderSizeProperties( loaderSizeValue: tokens.sizes.lg, loaderStrokeWidth: tokens.sizes.x5s, ); @override MoonCircularLoaderSizes copyWith({ MoonTokens? tokens, MoonCircularLoaderSizeProperties? x2s, MoonCircularLoaderSizeProperties? xs, MoonCircularLoaderSizeProperties? sm, MoonCircularLoaderSizeProperties? md, MoonCircularLoaderSizeProperties? lg, }) { return MoonCircularLoaderSizes( tokens: tokens ?? this.tokens, x2s: x2s ?? this.x2s, xs: xs ?? this.xs, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, ); } @override MoonCircularLoaderSizes lerp( ThemeExtension? other, double t, ) { if (other is! MoonCircularLoaderSizes) return this; return MoonCircularLoaderSizes( tokens: tokens.lerp(other.tokens, t), x2s: x2s.lerp(other.x2s, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularLoaderSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x2s", x2s)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)); } } ================================================ FILE: lib/src/theme/loaders/circular_loader/circular_loader_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_colors.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCircularLoaderTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonCircularLoader. final MoonCircularLoaderColors colors; /// The sizes of the MoonCircularLoader. final MoonCircularLoaderSizes sizes; MoonCircularLoaderTheme({ required this.tokens, MoonCircularLoaderColors? colors, MoonCircularLoaderSizes? sizes, }) : colors = colors ?? MoonCircularLoaderColors( color: tokens.colors.piccolo, backgroundColor: Colors.transparent, ), sizes = sizes ?? MoonCircularLoaderSizes(tokens: tokens); @override MoonCircularLoaderTheme copyWith({ MoonTokens? tokens, MoonCircularLoaderColors? colors, MoonCircularLoaderSizes? sizes, }) { return MoonCircularLoaderTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); } @override MoonCircularLoaderTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonCircularLoaderTheme) return this; return MoonCircularLoaderTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularLoaderTheme")) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/loaders/linear_loader/linear_loader_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonLinearLoaderColors extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the MoonLinearLoader. final Color color; /// The background color of the MoonLinearLoader. final Color backgroundColor; const MoonLinearLoaderColors({ required this.color, required this.backgroundColor, }); @override MoonLinearLoaderColors copyWith({ Color? color, Color? backgroundColor, }) { return MoonLinearLoaderColors( color: color ?? this.color, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonLinearLoaderColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonLinearLoaderColors) return this; return MoonLinearLoaderColors( color: colorPremulLerp(color, other.color, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearLoaderColors")) ..add(ColorProperty("color", color)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/loaders/linear_loader/linear_loader_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonLinearLoaderSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonLinearLoader. final BorderRadiusGeometry borderRadius; /// The height of the MoonLinearLoader. final double loaderHeight; const MoonLinearLoaderSizeProperties({ required this.borderRadius, required this.loaderHeight, }); @override MoonLinearLoaderSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? loaderHeight, }) { return MoonLinearLoaderSizeProperties( borderRadius: borderRadius ?? this.borderRadius, loaderHeight: loaderHeight ?? this.loaderHeight, ); } @override MoonLinearLoaderSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonLinearLoaderSizeProperties) return this; return MoonLinearLoaderSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, loaderHeight: lerpDouble(loaderHeight, other.loaderHeight, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonLinearLoaderSizeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("loaderHeight", loaderHeight), ); } } ================================================ FILE: lib/src/theme/loaders/linear_loader/linear_loader_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonLinearLoaderSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the (6x) extra small MoonLinearLoader. final MoonLinearLoaderSizeProperties x6s; /// The properties of the (5x) extra small MoonLinearLoader. final MoonLinearLoaderSizeProperties x5s; /// The properties of the (4x) extra small MoonLinearLoader. final MoonLinearLoaderSizeProperties x4s; /// The properties of the (3x) extra small MoonLinearLoader. final MoonLinearLoaderSizeProperties x3s; /// The properties of the (2x) extra small MoonLinearLoader. final MoonLinearLoaderSizeProperties x2s; MoonLinearLoaderSizes({ required this.tokens, MoonLinearLoaderSizeProperties? x6s, MoonLinearLoaderSizeProperties? x5s, MoonLinearLoaderSizeProperties? x4s, MoonLinearLoaderSizeProperties? x3s, MoonLinearLoaderSizeProperties? x2s, }) : x6s = x6s ?? MoonLinearLoaderSizeProperties( borderRadius: tokens.borders.surfaceXs, loaderHeight: tokens.sizes.x6s, ), x5s = x5s ?? MoonLinearLoaderSizeProperties( borderRadius: tokens.borders.surfaceXs, loaderHeight: tokens.sizes.x5s, ), x4s = x4s ?? MoonLinearLoaderSizeProperties( borderRadius: tokens.borders.surfaceSm, loaderHeight: tokens.sizes.x4s, ), x3s = x3s ?? MoonLinearLoaderSizeProperties( borderRadius: tokens.borders.surfaceMd, loaderHeight: tokens.sizes.x3s, ), x2s = x2s ?? MoonLinearLoaderSizeProperties( borderRadius: tokens.borders.surfaceLg, loaderHeight: tokens.sizes.x2s, ); @override MoonLinearLoaderSizes copyWith({ MoonTokens? tokens, MoonLinearLoaderSizeProperties? x6s, MoonLinearLoaderSizeProperties? x5s, MoonLinearLoaderSizeProperties? x4s, MoonLinearLoaderSizeProperties? x3s, MoonLinearLoaderSizeProperties? x2s, }) { return MoonLinearLoaderSizes( tokens: tokens ?? this.tokens, x6s: x6s ?? this.x6s, x5s: x5s ?? this.x5s, x4s: x4s ?? this.x4s, x3s: x3s ?? this.x3s, x2s: x2s ?? this.x2s, ); } @override MoonLinearLoaderSizes lerp( ThemeExtension? other, double t, ) { if (other is! MoonLinearLoaderSizes) return this; return MoonLinearLoaderSizes( tokens: tokens.lerp(other.tokens, t), x6s: x6s.lerp(other.x6s, t), x5s: x5s.lerp(other.x5s, t), x4s: x4s.lerp(other.x4s, t), x3s: x3s.lerp(other.x3s, t), x2s: x2s.lerp(other.x2s, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearLoaderSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x6s", x6s)) ..add(DiagnosticsProperty("x5s", x5s)) ..add(DiagnosticsProperty("x4s", x4s)) ..add(DiagnosticsProperty("x3s", x3s)) ..add(DiagnosticsProperty("x2s", x2s)); } } ================================================ FILE: lib/src/theme/loaders/linear_loader/linear_loader_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_colors.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonLinearLoaderTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonLinearLoader. final MoonLinearLoaderColors colors; /// The sizes of the MoonLinearLoader. final MoonLinearLoaderSizes sizes; MoonLinearLoaderTheme({ required this.tokens, MoonLinearLoaderColors? colors, MoonLinearLoaderSizes? sizes, }) : colors = colors ?? MoonLinearLoaderColors( color: tokens.colors.piccolo, backgroundColor: Colors.transparent, ), sizes = sizes ?? MoonLinearLoaderSizes(tokens: tokens); @override MoonLinearLoaderTheme copyWith({ MoonTokens? tokens, MoonLinearLoaderColors? colors, MoonLinearLoaderSizes? sizes, }) { return MoonLinearLoaderTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); } @override MoonLinearLoaderTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonLinearLoaderTheme) return this; return MoonLinearLoaderTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearLoaderTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/menu_item/menu_item_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonMenuItemColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the MoonMenuItem. final Color backgroundColor; /// The color of the MoonMenuItem divider. final Color dividerColor; /// The icon color of the MoonMenuItem. final Color iconColor; /// The text color of the MoonMenuItem label. final Color labelTextColor; /// The text color of the MoonMenuItem content. final Color contentTextColor; const MoonMenuItemColors({ required this.backgroundColor, required this.dividerColor, required this.iconColor, required this.labelTextColor, required this.contentTextColor, }); @override MoonMenuItemColors copyWith({ Color? backgroundColor, Color? dividerColor, Color? iconColor, Color? labelTextColor, Color? contentTextColor, }) { return MoonMenuItemColors( backgroundColor: backgroundColor ?? this.backgroundColor, dividerColor: dividerColor ?? this.dividerColor, iconColor: iconColor ?? this.iconColor, labelTextColor: labelTextColor ?? this.labelTextColor, contentTextColor: contentTextColor ?? this.contentTextColor, ); } @override MoonMenuItemColors lerp(ThemeExtension? other, double t) { if (other is! MoonMenuItemColors) return this; return MoonMenuItemColors( backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, dividerColor: colorPremulLerp(dividerColor, other.dividerColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, labelTextColor: colorPremulLerp(labelTextColor, other.labelTextColor, t)!, contentTextColor: colorPremulLerp(contentTextColor, other.contentTextColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonMenuItemColors")) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("dividerColor", dividerColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("labelTextColor", labelTextColor)) ..add(ColorProperty("contentTextColor", contentTextColor)); } } ================================================ FILE: lib/src/theme/menu_item/menu_item_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonMenuItemProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonMenuItem. final BorderRadiusGeometry borderRadius; /// The vertical gap between the label and content widgets of the MoonMenuItem. final double verticalGap; /// The minimum height of the MoonMenuItem. final double minimumHeight; /// The padding of the MoonMenuItem. final EdgeInsetsGeometry padding; /// The text style of the MoonMenuItem label. final TextStyle labelTextStyle; /// The text style of the MoonMenuItem content. final TextStyle contentTextStyle; const MoonMenuItemProperties({ required this.borderRadius, required this.verticalGap, required this.minimumHeight, required this.padding, required this.labelTextStyle, required this.contentTextStyle, }); @override MoonMenuItemProperties copyWith({ BorderRadiusGeometry? borderRadius, double? verticalGap, double? minimumHeight, EdgeInsetsGeometry? padding, TextStyle? labelTextStyle, TextStyle? contentTextStyle, }) { return MoonMenuItemProperties( borderRadius: borderRadius ?? this.borderRadius, verticalGap: verticalGap ?? this.verticalGap, minimumHeight: minimumHeight ?? this.minimumHeight, padding: padding ?? this.padding, labelTextStyle: labelTextStyle ?? this.labelTextStyle, contentTextStyle: contentTextStyle ?? this.contentTextStyle, ); } @override MoonMenuItemProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonMenuItemProperties) return this; return MoonMenuItemProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, verticalGap: lerpDouble(verticalGap, other.verticalGap, t)!, minimumHeight: lerpDouble(minimumHeight, other.minimumHeight, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, labelTextStyle: TextStyle.lerp(labelTextStyle, other.labelTextStyle, t)!, contentTextStyle: TextStyle.lerp(contentTextStyle, other.contentTextStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonMenuItemProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("verticalGap", verticalGap), ) ..add( DoubleProperty("minimumHeight", minimumHeight), ) ..add( DiagnosticsProperty("padding", padding), ) ..add( DiagnosticsProperty("labelTextStyle", labelTextStyle), ) ..add( DiagnosticsProperty("contentTextStyle", contentTextStyle), ); } } ================================================ FILE: lib/src/theme/menu_item/menu_item_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/menu_item/menu_item_colors.dart'; import 'package:moon_design/src/theme/menu_item/menu_item_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonMenuItemTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonMenuItem. final MoonMenuItemColors colors; /// The properties of the MoonMenuItem. final MoonMenuItemProperties properties; MoonMenuItemTheme({ required this.tokens, MoonMenuItemColors? colors, MoonMenuItemProperties? properties, }) : colors = colors ?? MoonMenuItemColors( backgroundColor: Colors.transparent, dividerColor: tokens.colors.beerus, iconColor: tokens.colors.iconPrimary, labelTextColor: tokens.colors.textPrimary, contentTextColor: tokens.colors.textSecondary, ), properties = properties ?? MoonMenuItemProperties( borderRadius: tokens.borders.interactiveSm, verticalGap: tokens.sizes.x5s, minimumHeight: tokens.sizes.md, padding: EdgeInsets.all(tokens.sizes.x3s), labelTextStyle: tokens.typography.body.textDefault, contentTextStyle: tokens.typography.body.text12, ); @override MoonMenuItemTheme copyWith({ MoonTokens? tokens, MoonMenuItemColors? colors, MoonMenuItemProperties? properties, }) { return MoonMenuItemTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonMenuItemTheme lerp(ThemeExtension? other, double t) { if (other is! MoonMenuItemTheme) return this; return MoonMenuItemTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonMenuItemTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty("properties", properties), ); } } ================================================ FILE: lib/src/theme/modal/modal_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonModalColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonModal. final Color textColor; /// The icon color of the MoonModal. final Color iconColor; /// The background color of the MoonModal. final Color backgroundColor; /// The color of the MoonModal barrier. final Color barrierColor; const MoonModalColors({ required this.textColor, required this.iconColor, required this.backgroundColor, required this.barrierColor, }); @override MoonModalColors copyWith({ Color? textColor, Color? iconColor, Color? backgroundColor, Color? barrierColor, }) { return MoonModalColors( textColor: textColor ?? this.textColor, iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, barrierColor: barrierColor ?? this.barrierColor, ); } @override MoonModalColors lerp(ThemeExtension? other, double t) { if (other is! MoonModalColors) return this; return MoonModalColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, barrierColor: colorPremulLerp(barrierColor, other.barrierColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonModalColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("barrierColor", barrierColor)); } } ================================================ FILE: lib/src/theme/modal/modal_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonModalProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonModal. final BorderRadiusGeometry borderRadius; /// The duration of the MoonModal transition animation (fade in or out). final Duration transitionDuration; /// The curve of the MoonModal transition animation (fade in or out). final Curve transitionCurve; /// The text style of the MoonModal. final TextStyle textStyle; const MoonModalProperties({ required this.borderRadius, required this.transitionDuration, required this.transitionCurve, required this.textStyle, }); @override MoonModalProperties copyWith({ BorderRadiusGeometry? borderRadius, Duration? transitionDuration, Curve? transitionCurve, TextStyle? textStyle, }) { return MoonModalProperties( borderRadius: borderRadius ?? this.borderRadius, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, textStyle: textStyle ?? this.textStyle, ); } @override MoonModalProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonModalProperties) return this; return MoonModalProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonModalProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty("textStyle", textStyle), ); } } ================================================ FILE: lib/src/theme/modal/modal_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/modal/modal_colors.dart'; import 'package:moon_design/src/theme/modal/modal_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonModalTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonModal. final MoonModalColors colors; /// The properties of the MoonModal. final MoonModalProperties properties; MoonModalTheme({ required this.tokens, MoonModalColors? colors, MoonModalProperties? properties, }) : colors = colors ?? MoonModalColors( textColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, backgroundColor: tokens.colors.goku, barrierColor: tokens.colors.zeno, ), properties = properties ?? MoonModalProperties( borderRadius: tokens.borders.surfaceSm, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, textStyle: tokens.typography.body.textDefault, ); @override MoonModalTheme copyWith({ MoonTokens? tokens, MoonModalColors? colors, MoonModalProperties? properties, }) { return MoonModalTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonModalTheme lerp(ThemeExtension? other, double t) { if (other is! MoonModalTheme) return this; return MoonModalTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonModalTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)); } } ================================================ FILE: lib/src/theme/popover/popover_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonPopoverColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonPopover. final Color textColor; /// The icon color of the MoonPopover. final Color iconColor; /// The background color of the MoonPopover. final Color backgroundColor; const MoonPopoverColors({ required this.textColor, required this.iconColor, required this.backgroundColor, }); @override MoonPopoverColors copyWith({ Color? textColor, Color? iconColor, Color? backgroundColor, }) { return MoonPopoverColors( textColor: textColor ?? this.textColor, iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonPopoverColors lerp(ThemeExtension? other, double t) { if (other is! MoonPopoverColors) return this; return MoonPopoverColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonPopoverColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/popover/popover_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonPopoverProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonPopover. final BorderRadiusGeometry borderRadius; /// The distance between the MoonPopover and the target child widget. final double distanceToTarget; /// The duration of the MoonPopover transition animation (fade in or out). final Duration transitionDuration; /// The curve of the MoonPopover transition animation (fade in or out). final Curve transitionCurve; /// The padding of the MoonPopover content. final EdgeInsetsGeometry contentPadding; /// The text style of the MoonPopover. final TextStyle textStyle; const MoonPopoverProperties({ required this.borderRadius, required this.distanceToTarget, required this.transitionDuration, required this.transitionCurve, required this.contentPadding, required this.textStyle, }); @override MoonPopoverProperties copyWith({ BorderRadiusGeometry? borderRadius, double? distanceToTarget, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? contentPadding, TextStyle? textStyle, }) { return MoonPopoverProperties( borderRadius: borderRadius ?? this.borderRadius, distanceToTarget: distanceToTarget ?? this.distanceToTarget, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, contentPadding: contentPadding ?? this.contentPadding, textStyle: textStyle ?? this.textStyle, ); } @override MoonPopoverProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonPopoverProperties) return this; return MoonPopoverProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, distanceToTarget: lerpDouble(distanceToTarget, other.distanceToTarget, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonPopoverProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("distanceToTarget", distanceToTarget), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty( "contentPadding", contentPadding, ), ) ..add( DiagnosticsProperty( "textStyle", textStyle, ), ); } } ================================================ FILE: lib/src/theme/popover/popover_shadows.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonPopoverShadows extends ThemeExtension with DiagnosticableTreeMixin { /// The list of shadows applied to the MoonPopover. final List popoverShadows; const MoonPopoverShadows({required this.popoverShadows}); @override MoonPopoverShadows copyWith({List? popoverShadows}) { return MoonPopoverShadows( popoverShadows: popoverShadows ?? this.popoverShadows, ); } @override MoonPopoverShadows lerp(ThemeExtension? other, double t) { if (other is! MoonPopoverShadows) return this; return MoonPopoverShadows( popoverShadows: BoxShadow.lerpList( popoverShadows, other.popoverShadows, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonPopoverShadows"), ) ..add( DiagnosticsProperty>("popoverShadows", popoverShadows), ); } } ================================================ FILE: lib/src/theme/popover/popover_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/popover/popover_colors.dart'; import 'package:moon_design/src/theme/popover/popover_properties.dart'; import 'package:moon_design/src/theme/popover/popover_shadows.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonPopoverTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonPopover. final MoonPopoverColors colors; /// The properties of the MoonPopover. final MoonPopoverProperties properties; /// The shadows of the MoonPopover. final MoonPopoverShadows shadows; MoonPopoverTheme({ required this.tokens, MoonPopoverColors? colors, MoonPopoverProperties? properties, MoonPopoverShadows? shadows, }) : colors = colors ?? MoonPopoverColors( textColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, backgroundColor: tokens.colors.goku, ), properties = properties ?? MoonPopoverProperties( borderRadius: tokens.borders.interactiveMd, distanceToTarget: tokens.sizes.x4s, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, contentPadding: EdgeInsets.all(tokens.sizes.x3s), textStyle: tokens.typography.body.textDefault, ), shadows = shadows ?? MoonPopoverShadows(popoverShadows: tokens.shadows.sm); @override MoonPopoverTheme copyWith({ MoonTokens? tokens, MoonPopoverColors? colors, MoonPopoverProperties? properties, MoonPopoverShadows? shadows, }) { return MoonPopoverTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, ); } @override MoonPopoverTheme lerp(ThemeExtension? other, double t) { if (other is! MoonPopoverTheme) return this; return MoonPopoverTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add( DiagnosticsProperty("type", "MoonPopoverTheme"), ) ..add( DiagnosticsProperty("tokens", tokens), ) ..add( DiagnosticsProperty("colors", colors), ) ..add( DiagnosticsProperty("properties", properties), ) ..add( DiagnosticsProperty("shadows", shadows), ); } } ================================================ FILE: lib/src/theme/progress/circular_progress/circular_progress_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonCircularProgressColors extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the MoonCircularProgress. final Color color; /// The background color of the MoonCircularProgress. final Color backgroundColor; const MoonCircularProgressColors({ required this.color, required this.backgroundColor, }); @override MoonCircularProgressColors copyWith({ Color? color, Color? backgroundColor, }) { return MoonCircularProgressColors( color: color ?? this.color, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonCircularProgressColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonCircularProgressColors) return this; return MoonCircularProgressColors( color: colorPremulLerp(color, other.color, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularProgressColors")) ..add(ColorProperty("color", color)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/progress/circular_progress/circular_progress_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonCircularProgressSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The size value of the MoonCircularProgress. final double progressSizeValue; /// The stroke width of the MoonCircularProgress. final double progressStrokeWidth; const MoonCircularProgressSizeProperties({ required this.progressSizeValue, required this.progressStrokeWidth, }); @override MoonCircularProgressSizeProperties copyWith({ double? progressSizeValue, double? progressStrokeWidth, }) { return MoonCircularProgressSizeProperties( progressSizeValue: progressSizeValue ?? this.progressSizeValue, progressStrokeWidth: progressStrokeWidth ?? this.progressStrokeWidth, ); } @override MoonCircularProgressSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonCircularProgressSizeProperties) return this; return MoonCircularProgressSizeProperties( progressSizeValue: lerpDouble(progressSizeValue, other.progressSizeValue, t)!, progressStrokeWidth: lerpDouble(progressStrokeWidth, other.progressStrokeWidth, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularProgressSizeProperties")) ..add(DoubleProperty("progressSizeValue", progressSizeValue)) ..add(DoubleProperty("progressStrokeWidth", progressStrokeWidth)); } } ================================================ FILE: lib/src/theme/progress/circular_progress/circular_progress_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCircularProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the (2x) extra small MoonCircularProgress. final MoonCircularProgressSizeProperties x2s; /// The properties of the extra small MoonCircularProgress. final MoonCircularProgressSizeProperties xs; /// The properties of the small MoonCircularProgress. final MoonCircularProgressSizeProperties sm; /// The properties of the medium MoonCircularProgress. final MoonCircularProgressSizeProperties md; /// The properties of the large MoonCircularProgress. final MoonCircularProgressSizeProperties lg; MoonCircularProgressSizes({ required this.tokens, MoonCircularProgressSizeProperties? x2s, MoonCircularProgressSizeProperties? xs, MoonCircularProgressSizeProperties? sm, MoonCircularProgressSizeProperties? md, MoonCircularProgressSizeProperties? lg, }) : x2s = x2s ?? MoonCircularProgressSizeProperties( progressSizeValue: tokens.sizes.x2s, progressStrokeWidth: tokens.sizes.x6s, ), xs = xs ?? MoonCircularProgressSizeProperties( progressSizeValue: tokens.sizes.xs, progressStrokeWidth: tokens.sizes.x6s, ), sm = sm ?? MoonCircularProgressSizeProperties( progressSizeValue: tokens.sizes.sm, progressStrokeWidth: tokens.sizes.x6s, ), md = md ?? MoonCircularProgressSizeProperties( progressSizeValue: tokens.sizes.md, progressStrokeWidth: tokens.sizes.x5s, ), lg = lg ?? MoonCircularProgressSizeProperties( progressSizeValue: tokens.sizes.lg, progressStrokeWidth: tokens.sizes.x5s, ); @override MoonCircularProgressSizes copyWith({ MoonTokens? tokens, MoonCircularProgressSizeProperties? x2s, MoonCircularProgressSizeProperties? xs, MoonCircularProgressSizeProperties? sm, MoonCircularProgressSizeProperties? md, MoonCircularProgressSizeProperties? lg, }) { return MoonCircularProgressSizes( tokens: tokens ?? this.tokens, x2s: x2s ?? this.x2s, xs: xs ?? this.xs, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, ); } @override MoonCircularProgressSizes lerp( ThemeExtension? other, double t, ) { if (other is! MoonCircularProgressSizes) return this; return MoonCircularProgressSizes( tokens: tokens.lerp(other.tokens, t), x2s: x2s.lerp(other.x2s, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularProgressSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x2s", x2s)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)); } } ================================================ FILE: lib/src/theme/progress/circular_progress/circular_progress_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_colors.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonCircularProgressTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonCircularProgress. final MoonCircularProgressColors colors; /// The sizes of the MoonCircularProgress. final MoonCircularProgressSizes sizes; MoonCircularProgressTheme({ required this.tokens, MoonCircularProgressColors? colors, MoonCircularProgressSizes? sizes, }) : colors = colors ?? MoonCircularProgressColors( color: tokens.colors.piccolo, backgroundColor: tokens.colors.beerus, ), sizes = sizes ?? MoonCircularProgressSizes(tokens: tokens); @override MoonCircularProgressTheme copyWith({ MoonTokens? tokens, MoonCircularProgressColors? colors, MoonCircularProgressSizes? sizes, }) { return MoonCircularProgressTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); } @override MoonCircularProgressTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonCircularProgressTheme) return this; return MoonCircularProgressTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonCircularProgressTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/progress/linear_progress/linear_progress_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonLinearProgressColors extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the MoonLinearProgress. final Color color; /// The text color of the MoonLinearProgress. final Color textColor; /// The background color of the MoonLinearProgress. final Color backgroundColor; const MoonLinearProgressColors({ required this.color, required this.textColor, required this.backgroundColor, }); @override MoonLinearProgressColors copyWith({ Color? color, Color? textColor, Color? backgroundColor, }) { return MoonLinearProgressColors( color: color ?? this.color, textColor: textColor ?? this.textColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonLinearProgressColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonLinearProgressColors) return this; return MoonLinearProgressColors( color: colorPremulLerp(color, other.color, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearProgressColors")) ..add(ColorProperty("color", color)) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/progress/linear_progress/linear_progress_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonLinearProgressSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonLinearProgress. final BorderRadiusGeometry borderRadius; /// The height of the MoonLinearProgress. final double progressHeight; /// The size value of the MoonLinearProgress thumb. final double thumbSizeValue; /// The vertical gap between the MoonLinearProgress and the minLabel and /// maxLabel widgets. final double verticalGap; /// The text style of the MoonLinearProgress minLabel and maxLabel widgets. final TextStyle textStyle; const MoonLinearProgressSizeProperties({ required this.borderRadius, required this.progressHeight, required this.thumbSizeValue, required this.verticalGap, required this.textStyle, }); @override MoonLinearProgressSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? progressHeight, double? thumbSizeValue, double? verticalGap, TextStyle? textStyle, }) { return MoonLinearProgressSizeProperties( borderRadius: borderRadius ?? this.borderRadius, progressHeight: progressHeight ?? this.progressHeight, thumbSizeValue: thumbSizeValue ?? this.thumbSizeValue, verticalGap: verticalGap ?? this.verticalGap, textStyle: textStyle ?? this.textStyle, ); } @override MoonLinearProgressSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonLinearProgressSizeProperties) return this; return MoonLinearProgressSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, progressHeight: lerpDouble(progressHeight, other.progressHeight, t)!, thumbSizeValue: lerpDouble(thumbSizeValue, other.thumbSizeValue, t)!, verticalGap: lerpDouble(verticalGap, other.verticalGap, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonLinearProgressSizeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("progressHeight", progressHeight), ) ..add( DoubleProperty("thumbSizeValue", thumbSizeValue), ) ..add( DoubleProperty("verticalGap", verticalGap), ) ..add( DiagnosticsProperty("textStyle", textStyle), ); } } ================================================ FILE: lib/src/theme/progress/linear_progress/linear_progress_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonLinearProgressSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the (6x) extra small MoonLinearProgress. final MoonLinearProgressSizeProperties x6s; /// The properties of the (5x) extra small MoonLinearProgress. final MoonLinearProgressSizeProperties x5s; /// The properties of the (4x) extra small MoonLinearProgress. final MoonLinearProgressSizeProperties x4s; /// The properties of the (3x) extra small MoonLinearProgress. final MoonLinearProgressSizeProperties x3s; /// The properties of the (2x) extra small MoonLinearProgress. final MoonLinearProgressSizeProperties x2s; MoonLinearProgressSizes({ required this.tokens, MoonLinearProgressSizeProperties? x6s, MoonLinearProgressSizeProperties? x5s, MoonLinearProgressSizeProperties? x4s, MoonLinearProgressSizeProperties? x3s, MoonLinearProgressSizeProperties? x2s, }) : x6s = x6s ?? MoonLinearProgressSizeProperties( borderRadius: tokens.borders.surfaceXs, progressHeight: tokens.sizes.x6s, thumbSizeValue: tokens.sizes.x3s, verticalGap: tokens.sizes.x4s, textStyle: tokens.typography.body.text10, ), x5s = x5s ?? MoonLinearProgressSizeProperties( borderRadius: tokens.borders.surfaceXs, progressHeight: tokens.sizes.x5s, thumbSizeValue: tokens.sizes.x3s, verticalGap: tokens.sizes.x4s, textStyle: tokens.typography.body.text10, ), x4s = x4s ?? MoonLinearProgressSizeProperties( borderRadius: tokens.borders.surfaceSm, progressHeight: tokens.sizes.x4s, thumbSizeValue: tokens.sizes.x3s, verticalGap: 6, textStyle: tokens.typography.body.text10, ), x3s = x3s ?? MoonLinearProgressSizeProperties( borderRadius: tokens.borders.surfaceMd, progressHeight: tokens.sizes.x3s, thumbSizeValue: tokens.sizes.x2s, verticalGap: 6, textStyle: tokens.typography.body.text10, ), x2s = x2s ?? MoonLinearProgressSizeProperties( borderRadius: tokens.borders.surfaceLg, progressHeight: tokens.sizes.x2s, thumbSizeValue: tokens.sizes.x2s, verticalGap: tokens.sizes.x5s, textStyle: tokens.typography.body.text10, ); @override MoonLinearProgressSizes copyWith({ MoonTokens? tokens, MoonLinearProgressSizeProperties? x6s, MoonLinearProgressSizeProperties? x5s, MoonLinearProgressSizeProperties? x4s, MoonLinearProgressSizeProperties? x3s, MoonLinearProgressSizeProperties? x2s, }) { return MoonLinearProgressSizes( tokens: tokens ?? this.tokens, x6s: x6s ?? this.x6s, x5s: x5s ?? this.x5s, x4s: x4s ?? this.x4s, x3s: x3s ?? this.x3s, x2s: x2s ?? this.x2s, ); } @override MoonLinearProgressSizes lerp( ThemeExtension? other, double t, ) { if (other is! MoonLinearProgressSizes) return this; return MoonLinearProgressSizes( tokens: tokens.lerp(other.tokens, t), x6s: x6s.lerp(other.x6s, t), x5s: x5s.lerp(other.x5s, t), x4s: x4s.lerp(other.x4s, t), x3s: x3s.lerp(other.x3s, t), x2s: x2s.lerp(other.x2s, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearProgressSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x6s", x6s)) ..add(DiagnosticsProperty("x5s", x5s)) ..add(DiagnosticsProperty("x4s", x4s)) ..add(DiagnosticsProperty("x3s", x3s)) ..add(DiagnosticsProperty("x2s", x2s)); } } ================================================ FILE: lib/src/theme/progress/linear_progress/linear_progress_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_colors.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonLinearProgressTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonLinearProgress. final MoonLinearProgressColors colors; /// The sizes of the MoonLinearProgress. final MoonLinearProgressSizes sizes; MoonLinearProgressTheme({ required this.tokens, MoonLinearProgressColors? colors, MoonLinearProgressSizes? sizes, }) : colors = colors ?? MoonLinearProgressColors( color: tokens.colors.piccolo, backgroundColor: tokens.colors.beerus, textColor: tokens.colors.textPrimary, ), sizes = sizes ?? MoonLinearProgressSizes(tokens: tokens); @override MoonLinearProgressTheme copyWith({ MoonTokens? tokens, MoonLinearProgressColors? colors, MoonLinearProgressSizes? sizes, }) { return MoonLinearProgressTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); } @override MoonLinearProgressTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonLinearProgressTheme) return this; return MoonLinearProgressTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonLinearProgressTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/progress_pin/progress_pin_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonProgressPinColors extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the MoonProgressPin. final Color pinColor; /// The border color of the MoonProgressPin. final Color pinBorderColor; /// The color of the MoonProgressPin thumb. final Color thumbColor; /// The shadow color of the MoonProgressPin. final Color shadowColor; /// The text color of the MoonProgressPin. final Color textColor; const MoonProgressPinColors({ required this.pinColor, required this.pinBorderColor, required this.thumbColor, required this.shadowColor, required this.textColor, }); @override MoonProgressPinColors copyWith({ Color? pinColor, Color? pinBorderColor, Color? thumbColor, Color? shadowColor, Color? textColor, }) { return MoonProgressPinColors( pinColor: pinColor ?? this.pinColor, pinBorderColor: pinBorderColor ?? this.pinBorderColor, thumbColor: thumbColor ?? this.thumbColor, shadowColor: shadowColor ?? this.shadowColor, textColor: textColor ?? this.textColor, ); } @override MoonProgressPinColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonProgressPinColors) return this; return MoonProgressPinColors( pinColor: colorPremulLerp(pinColor, other.pinColor, t)!, pinBorderColor: colorPremulLerp(pinBorderColor, other.pinBorderColor, t)!, thumbColor: colorPremulLerp(thumbColor, other.thumbColor, t)!, shadowColor: colorPremulLerp(shadowColor, other.shadowColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonProgressPinColors")) ..add(ColorProperty("pinColor", pinColor)) ..add(ColorProperty("pinBorderColor", pinBorderColor)) ..add(ColorProperty("thumbColor", thumbColor)) ..add(ColorProperty("shadowColor", shadowColor)) ..add(ColorProperty("textColor", textColor)); } } ================================================ FILE: lib/src/theme/progress_pin/progress_pin_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonProgressPinProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The shadow elevation of the MoonProgressPin. final double shadowElevation; /// The height of the MoonProgressPin arrow. final double arrowHeight; /// The width of the MoonProgressPin arrow. final double arrowWidth; /// The vertical distance between the MoonProgressPin and the /// MoonLinearProgress widget. final double pinDistance; /// The width of the MoonProgressPin. final double pinWidth; /// The border width of the MoonProgressPin. final double pinBorderWidth; /// The text style of the MoonProgressPin. final TextStyle textStyle; const MoonProgressPinProperties({ required this.shadowElevation, required this.arrowHeight, required this.arrowWidth, required this.pinDistance, required this.pinWidth, required this.pinBorderWidth, required this.textStyle, }); @override MoonProgressPinProperties copyWith({ double? shadowElevation, double? arrowHeight, double? arrowWidth, double? pinDistance, double? pinWidth, double? pinBorderWidth, TextStyle? textStyle, }) { return MoonProgressPinProperties( shadowElevation: shadowElevation ?? this.shadowElevation, arrowHeight: arrowHeight ?? this.arrowHeight, arrowWidth: arrowWidth ?? this.arrowWidth, pinDistance: pinDistance ?? this.pinDistance, pinWidth: pinWidth ?? this.pinWidth, pinBorderWidth: pinBorderWidth ?? this.pinBorderWidth, textStyle: textStyle ?? this.textStyle, ); } @override MoonProgressPinProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonProgressPinProperties) return this; return MoonProgressPinProperties( shadowElevation: lerpDouble(shadowElevation, other.shadowElevation, t)!, arrowHeight: lerpDouble(arrowHeight, other.arrowHeight, t)!, arrowWidth: lerpDouble(arrowWidth, other.arrowWidth, t)!, pinDistance: lerpDouble(pinDistance, other.pinDistance, t)!, pinWidth: lerpDouble(pinWidth, other.pinWidth, t)!, pinBorderWidth: lerpDouble(pinBorderWidth, other.pinBorderWidth, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonProgressPinProperties")) ..add(DoubleProperty("shadowElevation", shadowElevation)) ..add(DoubleProperty("arrowHeight", arrowHeight)) ..add(DoubleProperty("arrowWidth", arrowWidth)) ..add(DoubleProperty("pinDistance", pinDistance)) ..add(DoubleProperty("pinWidth", pinWidth)) ..add(DoubleProperty("pinBorderWidth", pinBorderWidth)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } ================================================ FILE: lib/src/theme/progress_pin/progress_pin_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress_pin/progress_pin_colors.dart'; import 'package:moon_design/src/theme/progress_pin/progress_pin_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonProgressPinTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonProgressPin. final MoonProgressPinColors colors; /// The properties of the MoonProgressPin. final MoonProgressPinProperties properties; MoonProgressPinTheme({ required this.tokens, MoonProgressPinColors? colors, MoonProgressPinProperties? properties, }) : colors = colors ?? MoonProgressPinColors( pinColor: tokens.colors.popo, pinBorderColor: tokens.colors.goten, thumbColor: tokens.colors.goten, shadowColor: tokens.colors.popo, textColor: tokens.colors.goten, ), properties = properties ?? MoonProgressPinProperties( arrowHeight: 6, arrowWidth: tokens.sizes.x4s, pinDistance: tokens.sizes.x5s, pinWidth: 36, pinBorderWidth: tokens.sizes.x6s, shadowElevation: 6, textStyle: tokens.typography.body.text10, ); @override MoonProgressPinTheme copyWith({ MoonTokens? tokens, MoonProgressPinColors? colors, MoonProgressPinProperties? properties, }) { return MoonProgressPinTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonProgressPinTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonProgressPinTheme) return this; return MoonProgressPinTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonProgressPinTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty( "properties", properties, ), ); } } ================================================ FILE: lib/src/theme/radio/radio_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonRadioColors extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the selected MoonRadio button. final Color activeColor; /// The background color of the unselected MoonRadio button. final Color inactiveColor; const MoonRadioColors({ required this.activeColor, required this.inactiveColor, }); @override MoonRadioColors copyWith({Color? activeColor, Color? inactiveColor}) { return MoonRadioColors( activeColor: activeColor ?? this.activeColor, inactiveColor: inactiveColor ?? this.inactiveColor, ); } @override MoonRadioColors lerp(ThemeExtension? other, double t) { if (other is! MoonRadioColors) return this; return MoonRadioColors( activeColor: colorPremulLerp(activeColor, other.activeColor, t)!, inactiveColor: colorPremulLerp(inactiveColor, other.inactiveColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonRadioColors")) ..add(ColorProperty("activeColor", activeColor)) ..add(ColorProperty("inactiveColor", inactiveColor)); } } ================================================ FILE: lib/src/theme/radio/radio_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/radio/radio_colors.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonRadioTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonRadio. final MoonRadioColors colors; MoonRadioTheme({ required this.tokens, MoonRadioColors? colors, }) : colors = colors ?? MoonRadioColors( activeColor: tokens.colors.piccolo, inactiveColor: tokens.colors.trunks, ); @override MoonRadioTheme copyWith({MoonTokens? tokens, MoonRadioColors? colors}) { return MoonRadioTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, ); } @override MoonRadioTheme lerp(ThemeExtension? other, double t) { if (other is! MoonRadioTheme) return this; return MoonRadioTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonRadioTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)); } } ================================================ FILE: lib/src/theme/segmented_control/segmented_control_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonSegmentedControlColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the MoonSegmentedControl. final Color backgroundColor; /// The color of the selected MoonSegmentedControl segment. final Color selectedSegmentColor; /// The text color of the MoonSegmentedControl segment. final Color textColor; /// The text color of the selected MoonSegmentedControl segment. final Color selectedTextColor; const MoonSegmentedControlColors({ required this.backgroundColor, required this.selectedSegmentColor, required this.textColor, required this.selectedTextColor, }); @override MoonSegmentedControlColors copyWith({ Color? backgroundColor, Color? selectedSegmentColor, Color? textColor, Color? selectedTextColor, }) { return MoonSegmentedControlColors( backgroundColor: backgroundColor ?? this.backgroundColor, selectedSegmentColor: selectedSegmentColor ?? this.selectedSegmentColor, textColor: textColor ?? this.textColor, selectedTextColor: selectedTextColor ?? this.selectedTextColor, ); } @override MoonSegmentedControlColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonSegmentedControlColors) return this; return MoonSegmentedControlColors( backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, selectedSegmentColor: colorPremulLerp(selectedSegmentColor, other.selectedSegmentColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, selectedTextColor: colorPremulLerp(selectedTextColor, other.selectedTextColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSegmentedControlColors")) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("selectedSegmentColor", selectedSegmentColor)) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("selectedTextColor", selectedTextColor)); } } ================================================ FILE: lib/src/theme/segmented_control/segmented_control_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonSegmentedControlProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonSegmentedControl. final BorderRadiusGeometry borderRadius; /// The gap between the MoonSegmentedControl segments. final double gap; /// The duration of the MoonSegmentedControl transition animation. final Duration transitionDuration; /// The curve of the MoonSegmentedControl transition animation. final Curve transitionCurve; /// The padding of the MoonSegmentedControl. final EdgeInsetsGeometry padding; const MoonSegmentedControlProperties({ required this.borderRadius, required this.gap, required this.transitionDuration, required this.transitionCurve, required this.padding, }); @override MoonSegmentedControlProperties copyWith({ BorderRadiusGeometry? borderRadius, double? gap, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? padding, }) { return MoonSegmentedControlProperties( borderRadius: borderRadius ?? this.borderRadius, gap: gap ?? this.gap, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, padding: padding ?? this.padding, ); } @override MoonSegmentedControlProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonSegmentedControlProperties) return this; return MoonSegmentedControlProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, gap: lerpDouble(gap, other.gap, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonSegmentedControlProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("gap", gap), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty("padding", padding), ); } } ================================================ FILE: lib/src/theme/segmented_control/segmented_control_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonSegmentedControlSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonSegmentedControl segment. final BorderRadiusGeometry segmentBorderRadius; /// The horizontal gap between the leading, label and trailing widgets of the /// MoonSegmentedControl segment. final double segmentGap; /// The height of the MoonSegmentedControl. final double height; /// The size value of the MoonSegmentedControl icon. final double iconSizeValue; /// The padding of the MoonSegmentedControl segment. final EdgeInsetsGeometry segmentPadding; /// The text style of the MoonSegmentedControl. final TextStyle textStyle; const MoonSegmentedControlSizeProperties({ required this.segmentBorderRadius, required this.segmentGap, required this.height, required this.iconSizeValue, required this.segmentPadding, required this.textStyle, }); @override MoonSegmentedControlSizeProperties copyWith({ BorderRadiusGeometry? segmentBorderRadius, double? segmentGap, double? height, double? iconSizeValue, EdgeInsetsGeometry? segmentPadding, TextStyle? textStyle, }) { return MoonSegmentedControlSizeProperties( segmentBorderRadius: segmentBorderRadius ?? this.segmentBorderRadius, segmentGap: segmentGap ?? this.segmentGap, height: height ?? this.height, iconSizeValue: iconSizeValue ?? this.iconSizeValue, segmentPadding: segmentPadding ?? this.segmentPadding, textStyle: textStyle ?? this.textStyle, ); } @override MoonSegmentedControlSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonSegmentedControlSizeProperties) return this; return MoonSegmentedControlSizeProperties( segmentBorderRadius: BorderRadiusGeometry.lerp( segmentBorderRadius, other.segmentBorderRadius, t, )!, segmentGap: lerpDouble(segmentGap, other.segmentGap, t)!, height: lerpDouble(height, other.height, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, segmentPadding: EdgeInsetsGeometry.lerp(segmentPadding, other.segmentPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonSegmentedControlSizeProperties", ), ) ..add( DiagnosticsProperty( "segmentBorderRadius", segmentBorderRadius, ), ) ..add( DoubleProperty( "segmentGap", segmentGap, ), ) ..add( DoubleProperty( "height", height, ), ) ..add( DoubleProperty( "iconSizeValue", iconSizeValue, ), ) ..add( DiagnosticsProperty( "segmentPadding", segmentPadding, ), ) ..add( DiagnosticsProperty( "textStyle", textStyle, ), ); } } ================================================ FILE: lib/src/theme/segmented_control/segmented_control_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonSegmentedControlSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the small MoonSegmentedControl. final MoonSegmentedControlSizeProperties sm; /// The properties of the medium MoonSegmentedControl. final MoonSegmentedControlSizeProperties md; MoonSegmentedControlSizes({ required this.tokens, MoonSegmentedControlSizeProperties? sm, MoonSegmentedControlSizeProperties? md, }) : sm = sm ?? MoonSegmentedControlSizeProperties( segmentBorderRadius: tokens.borders.interactiveSm, segmentGap: tokens.sizes.x5s, height: tokens.sizes.md, iconSizeValue: tokens.sizes.xs, segmentPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), textStyle: tokens.typography.heading.textDefault, ), md = md ?? MoonSegmentedControlSizeProperties( segmentBorderRadius: tokens.borders.interactiveSm, segmentGap: tokens.sizes.x4s, height: tokens.sizes.lg, iconSizeValue: tokens.sizes.xs, segmentPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), textStyle: tokens.typography.heading.textDefault, ); @override MoonSegmentedControlSizes copyWith({ MoonTokens? tokens, MoonSegmentedControlSizeProperties? sm, MoonSegmentedControlSizeProperties? md, }) { return MoonSegmentedControlSizes( tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, ); } @override MoonSegmentedControlSizes lerp( ThemeExtension? other, double t, ) { if (other is! MoonSegmentedControlSizes) return this; return MoonSegmentedControlSizes( tokens: tokens.lerp(other.tokens, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSegmentedControlSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)); } } ================================================ FILE: lib/src/theme/segmented_control/segmented_control_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_colors.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_properties.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonSegmentedControlTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonSegmentedControl. final MoonSegmentedControlColors colors; /// The properties of the MoonSegmentedControl. final MoonSegmentedControlProperties properties; /// The sizes of the MoonSegmentedControl. final MoonSegmentedControlSizes sizes; MoonSegmentedControlTheme({ required this.tokens, MoonSegmentedControlColors? colors, MoonSegmentedControlProperties? properties, MoonSegmentedControlSizes? sizes, }) : colors = colors ?? MoonSegmentedControlColors( backgroundColor: tokens.colors.gohan, selectedSegmentColor: tokens.colors.goku, textColor: tokens.colors.textPrimary, selectedTextColor: tokens.colors.textPrimary, ), properties = properties ?? MoonSegmentedControlProperties( borderRadius: tokens.borders.interactiveMd, gap: tokens.sizes.x5s, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, padding: EdgeInsets.all(tokens.sizes.x5s), ), sizes = sizes ?? MoonSegmentedControlSizes(tokens: tokens); @override MoonSegmentedControlTheme copyWith({ MoonTokens? tokens, MoonSegmentedControlColors? colors, MoonSegmentedControlProperties? properties, MoonSegmentedControlSizes? sizes, }) { return MoonSegmentedControlTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, sizes: sizes ?? this.sizes, ); } @override MoonSegmentedControlTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonSegmentedControlTheme) return this; return MoonSegmentedControlTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonSegmentedControlTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty( "properties", properties, ), ) ..add( DiagnosticsProperty( "sizes", sizes, ), ); } } ================================================ FILE: lib/src/theme/switch/switch_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonSwitchColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the active (on) MoonSwitch track. final Color activeTrackColor; /// The background color of the inactive (off) MoonSwitch track. final Color inactiveTrackColor; /// The text color of the active (on) MoonSwitch. final Color activeTextColor; /// The text color of the inactive (off) MoonSwitch. final Color inactiveTextColor; /// The icon color of the active (on) MoonSwitch. final Color activeIconColor; /// The icon color of the inactive (off) MoonSwitch. final Color inactiveIconColor; /// The icon color of the MoonSwitch thumb. final Color thumbIconColor; /// The color of the MoonSwitch thumb. final Color thumbColor; const MoonSwitchColors({ required this.activeTrackColor, required this.inactiveTrackColor, required this.activeTextColor, required this.inactiveTextColor, required this.activeIconColor, required this.inactiveIconColor, required this.thumbIconColor, required this.thumbColor, }); @override MoonSwitchColors copyWith({ Color? activeTrackColor, Color? inactiveTrackColor, Color? activeTextColor, Color? inactiveTextColor, Color? activeIconColor, Color? inactiveIconColor, Color? thumbIconColor, Color? thumbColor, }) { return MoonSwitchColors( activeTrackColor: activeTrackColor ?? this.activeTrackColor, inactiveTrackColor: inactiveTrackColor ?? this.inactiveTrackColor, activeTextColor: activeTextColor ?? this.activeTextColor, inactiveTextColor: inactiveTextColor ?? this.inactiveTextColor, activeIconColor: activeIconColor ?? this.activeIconColor, inactiveIconColor: inactiveIconColor ?? this.inactiveIconColor, thumbIconColor: thumbIconColor ?? this.thumbIconColor, thumbColor: thumbColor ?? this.thumbColor, ); } @override MoonSwitchColors lerp(ThemeExtension? other, double t) { if (other is! MoonSwitchColors) return this; return MoonSwitchColors( activeTrackColor: colorPremulLerp(activeTrackColor, other.activeTrackColor, t)!, inactiveTrackColor: colorPremulLerp(inactiveTrackColor, other.inactiveTrackColor, t)!, activeTextColor: colorPremulLerp(activeTextColor, other.activeTextColor, t)!, inactiveTextColor: colorPremulLerp(inactiveTextColor, other.inactiveTextColor, t)!, activeIconColor: colorPremulLerp(activeIconColor, other.activeIconColor, t)!, inactiveIconColor: colorPremulLerp(inactiveIconColor, other.inactiveIconColor, t)!, thumbIconColor: colorPremulLerp(thumbIconColor, other.thumbIconColor, t)!, thumbColor: colorPremulLerp(thumbColor, other.thumbColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSwitchColors")) ..add(ColorProperty("activeTrackColor", activeTrackColor)) ..add(ColorProperty("inactiveTrackColor", inactiveTrackColor)) ..add(ColorProperty("activeTextColor", activeTextColor)) ..add(ColorProperty("inactiveTextColor", inactiveTextColor)) ..add(ColorProperty("activeIconColor", activeIconColor)) ..add(ColorProperty("inactiveIconColor", inactiveIconColor)) ..add(ColorProperty("thumbIconColor", thumbIconColor)) ..add(ColorProperty("thumbColor", thumbColor)); } } ================================================ FILE: lib/src/theme/switch/switch_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonSwitchProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The duration of the MoonSwitch toggle animation. final Duration transitionDuration; /// The curve of the MoonSwitch toggle animation. final Curve transitionCurve; const MoonSwitchProperties({ required this.transitionDuration, required this.transitionCurve, }); @override MoonSwitchProperties copyWith({ Duration? transitionDuration, Curve? transitionCurve, }) { return MoonSwitchProperties( transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, ); } @override MoonSwitchProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonSwitchProperties) return this; return MoonSwitchProperties( transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonSwitchProperties"), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ); } } ================================================ FILE: lib/src/theme/switch/switch_shadows.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonSwitchShadows extends ThemeExtension with DiagnosticableTreeMixin { /// The list of shadows applied to the MoonSwitch thumb. final List thumbShadows; const MoonSwitchShadows({required this.thumbShadows}); @override MoonSwitchShadows copyWith({List? thumbShadows}) { return MoonSwitchShadows( thumbShadows: thumbShadows ?? this.thumbShadows, ); } @override MoonSwitchShadows lerp(ThemeExtension? other, double t) { if (other is! MoonSwitchShadows) return this; return MoonSwitchShadows( thumbShadows: BoxShadow.lerpList(thumbShadows, other.thumbShadows, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSwitchShadows")) ..add(DiagnosticsProperty>("thumbShadows", thumbShadows)); } } ================================================ FILE: lib/src/theme/switch/switch_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonSwitchSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The height of the MoonSwitch. final double height; /// The width of the MoonSwitch. final double width; /// The size value of the MoonSwitch thumb. final double thumbSizeValue; /// The size value of the MoonSwitch icon. final double iconSizeValue; /// The padding of the MoonSwitch. final EdgeInsetsGeometry padding; /// The text style of the MoonSwitch. final TextStyle textStyle; const MoonSwitchSizeProperties({ required this.height, required this.width, required this.thumbSizeValue, required this.iconSizeValue, required this.padding, required this.textStyle, }); @override MoonSwitchSizeProperties copyWith({ double? height, double? width, double? thumbSizeValue, double? iconSizeValue, EdgeInsetsGeometry? padding, TextStyle? textStyle, }) { return MoonSwitchSizeProperties( height: height ?? this.height, width: width ?? this.width, thumbSizeValue: thumbSizeValue ?? this.thumbSizeValue, iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, textStyle: textStyle ?? this.textStyle, ); } @override MoonSwitchSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonSwitchSizeProperties) return this; return MoonSwitchSizeProperties( height: lerpDouble(height, other.height, t)!, width: lerpDouble(width, other.width, t)!, thumbSizeValue: lerpDouble(thumbSizeValue, other.thumbSizeValue, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSwitchSizeProperties")) ..add(DoubleProperty("height", height)) ..add(DoubleProperty("width", width)) ..add(DoubleProperty("thumbSizeValue", thumbSizeValue)) ..add(DoubleProperty("iconSizeValue", iconSizeValue)) ..add(DiagnosticsProperty("padding", padding)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } ================================================ FILE: lib/src/theme/switch/switch_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/switch/switch_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonSwitchSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the (2x) extra small MoonSwitch. final MoonSwitchSizeProperties x2s; /// The properties of the extra small MoonSwitch. final MoonSwitchSizeProperties xs; /// The properties of the small MoonSwitch. final MoonSwitchSizeProperties sm; MoonSwitchSizes({ required this.tokens, MoonSwitchSizeProperties? x2s, MoonSwitchSizeProperties? xs, MoonSwitchSizeProperties? sm, }) : x2s = x2s ?? MoonSwitchSizeProperties( height: tokens.sizes.x2s, width: 2 * tokens.sizes.x3s + 2 * tokens.sizes.x5s, thumbSizeValue: tokens.sizes.x3s, iconSizeValue: tokens.sizes.x3s, padding: EdgeInsets.all(tokens.sizes.x6s), textStyle: tokens.typography.body.text6.copyWith(letterSpacing: 0), ), xs = xs ?? MoonSwitchSizeProperties( height: tokens.sizes.xs, width: 2 * tokens.sizes.x2s + 3 * tokens.sizes.x5s, thumbSizeValue: tokens.sizes.x2s, iconSizeValue: tokens.sizes.x2s, padding: EdgeInsets.all(tokens.sizes.x5s), textStyle: tokens.typography.body.text8.copyWith(letterSpacing: 0.1), ), sm = sm ?? MoonSwitchSizeProperties( height: tokens.sizes.sm, width: 2 * tokens.sizes.xs + 3 * tokens.sizes.x5s, thumbSizeValue: tokens.sizes.xs, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.all(tokens.sizes.x5s), textStyle: tokens.typography.body.text10.copyWith(letterSpacing: 0.1), ); @override MoonSwitchSizes copyWith({ MoonTokens? tokens, MoonSwitchSizeProperties? x2s, MoonSwitchSizeProperties? xs, MoonSwitchSizeProperties? sm, }) { return MoonSwitchSizes( tokens: tokens ?? this.tokens, x2s: x2s ?? this.x2s, xs: xs ?? this.xs, sm: sm ?? this.sm, ); } @override MoonSwitchSizes lerp(ThemeExtension? other, double t) { if (other is! MoonSwitchSizes) return this; return MoonSwitchSizes( tokens: tokens.lerp(other.tokens, t), x2s: x2s.lerp(other.x2s, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSwitchSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x2s", x2s)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)); } } ================================================ FILE: lib/src/theme/switch/switch_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/switch/switch_colors.dart'; import 'package:moon_design/src/theme/switch/switch_properties.dart'; import 'package:moon_design/src/theme/switch/switch_shadows.dart'; import 'package:moon_design/src/theme/switch/switch_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonSwitchTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonSwitch. final MoonSwitchColors colors; /// The properties of the MoonSwitch. final MoonSwitchProperties properties; /// The shadows of the MoonSwitch. final MoonSwitchShadows shadows; /// The sizes of the MoonSwitch. final MoonSwitchSizes sizes; MoonSwitchTheme({ required this.tokens, MoonSwitchColors? colors, MoonSwitchProperties? properties, MoonSwitchShadows? shadows, MoonSwitchSizes? sizes, }) : colors = colors ?? MoonSwitchColors( activeTrackColor: tokens.colors.piccolo, inactiveTrackColor: tokens.colors.beerus, activeTextColor: tokens.colors.goten, inactiveTextColor: tokens.colors.bulma, activeIconColor: tokens.colors.goten, inactiveIconColor: tokens.colors.bulma, thumbIconColor: tokens.colors.popo, thumbColor: tokens.colors.goten, ), properties = properties ?? MoonSwitchProperties( transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, ), shadows = shadows ?? MoonSwitchShadows( thumbShadows: tokens.shadows.sm, ), sizes = sizes ?? MoonSwitchSizes(tokens: tokens); @override MoonSwitchTheme copyWith({ MoonTokens? tokens, MoonSwitchColors? colors, MoonSwitchProperties? properties, MoonSwitchShadows? shadows, MoonSwitchSizes? sizes, }) { return MoonSwitchTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, sizes: sizes ?? this.sizes, ); } @override MoonSwitchTheme lerp(ThemeExtension? other, double t) { if (other is! MoonSwitchTheme) return this; return MoonSwitchTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonSwitchTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("shadows", shadows)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/tab_bar/tab_bar_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTabBarColors extends ThemeExtension with DiagnosticableTreeMixin { /// The color of the MoonTabBar tab indicator. final Color indicatorColor; /// The text color of the MoonTabBar. final Color textColor; /// The text color of the selected MoonTabBar tab. final Color selectedTextColor; /// The text color of the selected MoonTabBar pill tab. final Color selectedPillTextColor; /// The background color of the selected MoonTabBar pill tab. final Color selectedPillTabColor; const MoonTabBarColors({ required this.indicatorColor, required this.textColor, required this.selectedTextColor, required this.selectedPillTextColor, required this.selectedPillTabColor, }); @override MoonTabBarColors copyWith({ Color? indicatorColor, Color? textColor, Color? selectedTextColor, Color? selectedPillTextColor, Color? selectedPillTabColor, }) { return MoonTabBarColors( indicatorColor: indicatorColor ?? this.indicatorColor, textColor: textColor ?? this.textColor, selectedTextColor: selectedTextColor ?? this.selectedTextColor, selectedPillTextColor: selectedPillTextColor ?? this.selectedPillTextColor, selectedPillTabColor: selectedPillTabColor ?? this.selectedPillTabColor, ); } @override MoonTabBarColors lerp(ThemeExtension? other, double t) { if (other is! MoonTabBarColors) return this; return MoonTabBarColors( indicatorColor: colorPremulLerp(indicatorColor, other.indicatorColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, selectedTextColor: colorPremulLerp(selectedTextColor, other.selectedTextColor, t)!, selectedPillTextColor: colorPremulLerp( selectedPillTextColor, other.selectedPillTextColor, t, )!, selectedPillTabColor: colorPremulLerp(selectedPillTabColor, other.selectedPillTabColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTabBarColors")) ..add(ColorProperty("indicatorColor", indicatorColor)) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("selectedTextColor", selectedTextColor)) ..add(ColorProperty("selectedPillTextColor", selectedPillTextColor)) ..add(ColorProperty("selectedPillTabColor", selectedPillTabColor)); } } ================================================ FILE: lib/src/theme/tab_bar/tab_bar_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTabBarProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The gap between the MoonTabBar tabs. final double gap; /// The duration of the MoonTabBar transition animation. final Duration transitionDuration; /// The curve of the MoonTabBar transition animation. final Curve transitionCurve; const MoonTabBarProperties({ required this.gap, required this.transitionDuration, required this.transitionCurve, }); @override MoonTabBarProperties copyWith({ double? gap, Duration? transitionDuration, Curve? transitionCurve, }) { return MoonTabBarProperties( gap: gap ?? this.gap, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, ); } @override MoonTabBarProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTabBarProperties) return this; return MoonTabBarProperties( gap: lerpDouble(gap, other.gap, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonTabBarProperties"), ) ..add( DoubleProperty("gap", gap), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ); } } ================================================ FILE: lib/src/theme/tab_bar/tab_bar_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTabBarSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonTabBar pill tab. final BorderRadiusGeometry borderRadius; /// The height of the MoonTabBar. final double height; /// The size value of the MoonTabBar icon. final double iconSizeValue; /// The height of the MoonTabBar tab indicator. final double indicatorHeight; /// The horizontal gap between the leading, label and trailing widgets of the /// MoonTabBar tab. final double tabGap; /// The padding of the MoonTabBar tab. final EdgeInsetsGeometry tabPadding; /// The text style of the MoonTabBar. final TextStyle textStyle; const MoonTabBarSizeProperties({ required this.borderRadius, required this.height, required this.iconSizeValue, required this.indicatorHeight, required this.tabGap, required this.tabPadding, required this.textStyle, }); @override MoonTabBarSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? height, double? iconSizeValue, double? indicatorHeight, double? tabGap, EdgeInsetsGeometry? tabPadding, TextStyle? textStyle, }) { return MoonTabBarSizeProperties( borderRadius: borderRadius ?? this.borderRadius, height: height ?? this.height, iconSizeValue: iconSizeValue ?? this.iconSizeValue, indicatorHeight: indicatorHeight ?? this.indicatorHeight, tabGap: tabGap ?? this.tabGap, tabPadding: tabPadding ?? this.tabPadding, textStyle: textStyle ?? this.textStyle, ); } @override MoonTabBarSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTabBarSizeProperties) return this; return MoonTabBarSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, height: lerpDouble(height, other.height, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, indicatorHeight: lerpDouble(indicatorHeight, other.indicatorHeight, t)!, tabGap: lerpDouble(tabGap, other.tabGap, t)!, tabPadding: EdgeInsetsGeometry.lerp(tabPadding, other.tabPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonTabBarSizeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("height", height), ) ..add( DoubleProperty("iconSizeValue", iconSizeValue), ) ..add( DoubleProperty("indicatorHeight", indicatorHeight), ) ..add( DoubleProperty("tabGap", tabGap), ) ..add( DiagnosticsProperty("tabPadding", tabPadding), ) ..add( DiagnosticsProperty("textStyle", textStyle), ); } } ================================================ FILE: lib/src/theme/tab_bar/tab_bar_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTabBarSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the small MoonTabBar. final MoonTabBarSizeProperties sm; /// The properties of the medium MoonTabBar. final MoonTabBarSizeProperties md; MoonTabBarSizes({ required this.tokens, MoonTabBarSizeProperties? sm, MoonTabBarSizeProperties? md, }) : sm = sm ?? MoonTabBarSizeProperties( borderRadius: tokens.borders.interactiveXs, tabGap: tokens.sizes.x5s, height: tokens.sizes.sm, iconSizeValue: tokens.sizes.xs, indicatorHeight: tokens.sizes.x6s, tabPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), textStyle: tokens.typography.heading.textDefault, ), md = md ?? MoonTabBarSizeProperties( borderRadius: tokens.borders.interactiveSm, tabGap: tokens.sizes.x4s, height: tokens.sizes.md, iconSizeValue: tokens.sizes.xs, indicatorHeight: tokens.sizes.x6s, tabPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), textStyle: tokens.typography.heading.textDefault, ); @override MoonTabBarSizes copyWith({ MoonTokens? tokens, MoonTabBarSizeProperties? sm, MoonTabBarSizeProperties? md, }) { return MoonTabBarSizes( tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, ); } @override MoonTabBarSizes lerp(ThemeExtension? other, double t) { if (other is! MoonTabBarSizes) return this; return MoonTabBarSizes( tokens: tokens.lerp(other.tokens, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTabBarSizes")) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)); } } ================================================ FILE: lib/src/theme/tab_bar/tab_bar_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_colors.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_properties.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTabBarTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonTabBar. final MoonTabBarColors colors; /// The properties of the MoonTabBar. final MoonTabBarProperties properties; /// The sizes of the MoonTabBar. final MoonTabBarSizes sizes; MoonTabBarTheme({ required this.tokens, MoonTabBarColors? colors, MoonTabBarProperties? properties, MoonTabBarSizes? sizes, }) : colors = colors ?? MoonTabBarColors( indicatorColor: tokens.colors.piccolo, textColor: tokens.colors.textPrimary, selectedTextColor: tokens.colors.piccolo, selectedPillTextColor: tokens.colors.textPrimary, selectedPillTabColor: tokens.colors.goku, ), properties = properties ?? MoonTabBarProperties( gap: tokens.sizes.x5s, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, ), sizes = sizes ?? MoonTabBarSizes(tokens: tokens); @override MoonTabBarTheme copyWith({ MoonTokens? tokens, MoonTabBarColors? colors, MoonTabBarProperties? properties, MoonTabBarSizes? sizes, }) { return MoonTabBarTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, sizes: sizes ?? this.sizes, ); } @override MoonTabBarTheme lerp(ThemeExtension? other, double t) { if (other is! MoonTabBarTheme) return this; return MoonTabBarTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTabBarTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/table/table_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTableColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonTable column. final Color columnTextColor; /// The text color of the MoonTable row. final Color rowTextColor; /// The text color of the MoonTable row label. final Color rowLabelTextColor; /// The text color of the MoonTable row pinned and animated label. final Color rowPinnedAnimatedLabelTextColor; /// The icon color of the MoonTable. final Color iconColor; /// The background color of the MoonTable row. final Color rowBackgroundColor; const MoonTableColors({ required this.columnTextColor, required this.rowTextColor, required this.rowLabelTextColor, required this.rowPinnedAnimatedLabelTextColor, required this.iconColor, required this.rowBackgroundColor, }); @override MoonTableColors copyWith({ Color? columnTextColor, Color? rowTextColor, Color? rowLabelTextColor, Color? rowPinnedAnimatedLabelTextColor, Color? iconColor, Color? rowBackgroundColor, }) { return MoonTableColors( columnTextColor: columnTextColor ?? this.columnTextColor, rowTextColor: rowTextColor ?? this.rowTextColor, rowLabelTextColor: rowLabelTextColor ?? this.rowLabelTextColor, rowPinnedAnimatedLabelTextColor: rowPinnedAnimatedLabelTextColor ?? this.rowPinnedAnimatedLabelTextColor, iconColor: iconColor ?? this.iconColor, rowBackgroundColor: rowBackgroundColor ?? this.rowBackgroundColor, ); } @override MoonTableColors lerp(ThemeExtension? other, double t) { if (other is! MoonTableColors) return this; return MoonTableColors( columnTextColor: colorPremulLerp(columnTextColor, other.columnTextColor, t)!, rowTextColor: colorPremulLerp(rowTextColor, other.rowTextColor, t)!, rowLabelTextColor: colorPremulLerp(rowLabelTextColor, other.rowLabelTextColor, t)!, rowPinnedAnimatedLabelTextColor: colorPremulLerp( rowPinnedAnimatedLabelTextColor, other.rowPinnedAnimatedLabelTextColor, t, )!, iconColor: colorPremulLerp( iconColor, other.iconColor, t, )!, rowBackgroundColor: colorPremulLerp( rowBackgroundColor, other.rowBackgroundColor, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTableColors")) ..add(ColorProperty("columnTextColor", columnTextColor)) ..add(ColorProperty("rowTextColor", rowTextColor)) ..add(ColorProperty("rowLabelTextColor", rowLabelTextColor)) ..add( ColorProperty( "rowPinnedAnimatedLabelTextColor", rowPinnedAnimatedLabelTextColor, ), ) ..add( ColorProperty( "iconColor", iconColor, ), ) ..add( ColorProperty( "rowBackgroundColor", rowBackgroundColor, ), ); } } ================================================ FILE: lib/src/theme/table/table_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTableProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The duration of the MoonTable row label transition animation during horizontal scrolling. final Duration transitionDuration; /// The curve of the MoonTable row label transition animation during horizontal scrolling. final Curve transitionCurve; const MoonTableProperties({ required this.transitionDuration, required this.transitionCurve, }); @override MoonTableProperties copyWith({ Duration? transitionDuration, Curve? transitionCurve, }) { return MoonTableProperties( transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, ); } @override MoonTableProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTableProperties) return this; return MoonTableProperties( transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonTableProperties"), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ); } } ================================================ FILE: lib/src/theme/table/table_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTableSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonTable row. final BorderRadiusGeometry rowBorderRadius; /// The vertical gap between the MoonTable rows. final double rowGap; /// The height of the MoonTable row. final double rowHeight; /// The horizontal gap between the MoonTable column label and sort icon. final double sortIconGap; /// The size value of the MoonTable column sort icon. final double sortIconSizeValue; /// The padding of the MoonTable cell. final EdgeInsetsGeometry cellPadding; /// The padding of the MoonTable row label. final EdgeInsetsGeometry rowLabelPadding; /// The text style of the MoonTable column. final TextStyle columnTextStyle; /// The text style of the MoonTable row. final TextStyle rowTextStyle; /// The text style of the MoonTable row label. final TextStyle rowLabelTextStyle; /// The text style of the MoonTable row pinned and animated label. final TextStyle rowPinnedAnimatedLabelTextStyle; const MoonTableSizeProperties({ required this.rowBorderRadius, required this.rowGap, required this.rowHeight, required this.sortIconGap, required this.sortIconSizeValue, required this.cellPadding, required this.rowLabelPadding, required this.columnTextStyle, required this.rowTextStyle, required this.rowLabelTextStyle, required this.rowPinnedAnimatedLabelTextStyle, }); @override MoonTableSizeProperties copyWith({ BorderRadiusGeometry? rowBorderRadius, double? rowGap, double? rowHeight, double? sortIconGap, double? sortIconSizeValue, EdgeInsetsGeometry? cellPadding, EdgeInsetsGeometry? rowLabelPadding, TextStyle? columnTextStyle, TextStyle? rowTextStyle, TextStyle? rowLabelTextStyle, TextStyle? rowPinnedAnimatedLabelTextStyle, }) { return MoonTableSizeProperties( rowBorderRadius: rowBorderRadius ?? this.rowBorderRadius, rowGap: rowGap ?? this.rowGap, rowHeight: rowHeight ?? this.rowHeight, sortIconGap: sortIconGap ?? this.sortIconGap, sortIconSizeValue: sortIconSizeValue ?? this.sortIconSizeValue, cellPadding: cellPadding ?? this.cellPadding, rowLabelPadding: rowLabelPadding ?? this.rowLabelPadding, columnTextStyle: columnTextStyle ?? this.columnTextStyle, rowTextStyle: rowTextStyle ?? this.rowTextStyle, rowLabelTextStyle: rowLabelTextStyle ?? this.rowLabelTextStyle, rowPinnedAnimatedLabelTextStyle: rowPinnedAnimatedLabelTextStyle ?? this.rowPinnedAnimatedLabelTextStyle, ); } @override MoonTableSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTableSizeProperties) return this; return MoonTableSizeProperties( rowBorderRadius: BorderRadiusGeometry.lerp(rowBorderRadius, other.rowBorderRadius, t)!, rowGap: lerpDouble(rowGap, other.rowGap, t)!, rowHeight: lerpDouble(rowHeight, other.rowHeight, t)!, sortIconGap: lerpDouble(sortIconGap, other.sortIconGap, t)!, sortIconSizeValue: lerpDouble(sortIconSizeValue, other.sortIconSizeValue, t)!, cellPadding: EdgeInsetsGeometry.lerp(cellPadding, other.cellPadding, t)!, rowLabelPadding: EdgeInsetsGeometry.lerp(rowLabelPadding, other.rowLabelPadding, t)!, columnTextStyle: TextStyle.lerp(columnTextStyle, other.columnTextStyle, t)!, rowTextStyle: TextStyle.lerp(rowTextStyle, other.rowTextStyle, t)!, rowLabelTextStyle: TextStyle.lerp(rowLabelTextStyle, other.rowLabelTextStyle, t)!, rowPinnedAnimatedLabelTextStyle: TextStyle.lerp( rowPinnedAnimatedLabelTextStyle, other.rowPinnedAnimatedLabelTextStyle, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonTableSizeProperties", ), ) ..add( DiagnosticsProperty( "rowBorderRadius", rowBorderRadius, ), ) ..add(DoubleProperty("rowGap", rowGap)) ..add(DoubleProperty("rowHeight", rowHeight)) ..add(DoubleProperty("sortIconGap", sortIconGap)) ..add(DoubleProperty("sortIconSizeValue", sortIconSizeValue)) ..add(DiagnosticsProperty("cellPadding", cellPadding)) ..add( DiagnosticsProperty( "rowLabelPadding", rowLabelPadding, ), ) ..add( DiagnosticsProperty( "columnTextStyle", columnTextStyle, ), ) ..add( DiagnosticsProperty( "rowTextStyle", rowTextStyle, ), ) ..add( DiagnosticsProperty( "rowLabelTextStyle", rowLabelTextStyle, ), ) ..add( DiagnosticsProperty( "rowPinnedAnimatedLabelTextStyle", rowPinnedAnimatedLabelTextStyle, ), ); } } ================================================ FILE: lib/src/theme/table/table_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/table/table_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTableSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the extra small MoonTable. final MoonTableSizeProperties xs; /// The properties of the small MoonTable. final MoonTableSizeProperties sm; /// The properties of the medium MoonTable. final MoonTableSizeProperties md; /// The properties of the large MoonTable. final MoonTableSizeProperties lg; /// The properties of the extra large MoonTable. final MoonTableSizeProperties xl; /// The properties of the (2x) extra large MoonTable. final MoonTableSizeProperties x2l; MoonTableSizes({ required this.tokens, MoonTableSizeProperties? xs, MoonTableSizeProperties? sm, MoonTableSizeProperties? md, MoonTableSizeProperties? lg, MoonTableSizeProperties? xl, MoonTableSizeProperties? x2l, }) : xs = xs ?? MoonTableSizeProperties( rowBorderRadius: tokens.borders.interactiveXs, rowGap: tokens.sizes.x5s, rowHeight: tokens.sizes.xs, sortIconSizeValue: tokens.sizes.x2s, sortIconGap: tokens.sizes.x5s, cellPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), rowLabelPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), columnTextStyle: tokens.typography.heading.text12, rowTextStyle: tokens.typography.body.text12, rowLabelTextStyle: tokens.typography.body.text12, rowPinnedAnimatedLabelTextStyle: tokens.typography.body.text12, ), sm = sm ?? MoonTableSizeProperties( rowBorderRadius: tokens.borders.interactiveXs, rowGap: tokens.sizes.x5s, rowHeight: tokens.sizes.sm, sortIconSizeValue: tokens.sizes.x2s, sortIconGap: tokens.sizes.x5s, cellPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), rowLabelPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), columnTextStyle: tokens.typography.heading.textDefault, rowTextStyle: tokens.typography.body.textDefault, rowLabelTextStyle: tokens.typography.body.textDefault, rowPinnedAnimatedLabelTextStyle: tokens.typography.body.textDefault, ), md = md ?? MoonTableSizeProperties( rowBorderRadius: tokens.borders.interactiveSm, rowGap: tokens.sizes.x5s, rowHeight: tokens.sizes.md, sortIconSizeValue: tokens.sizes.x2s, sortIconGap: tokens.sizes.x5s, cellPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), rowLabelPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), columnTextStyle: tokens.typography.heading.textDefault, rowTextStyle: tokens.typography.body.textDefault, rowLabelTextStyle: tokens.typography.body.textDefault, rowPinnedAnimatedLabelTextStyle: tokens.typography.body.textDefault, ), lg = lg ?? MoonTableSizeProperties( rowBorderRadius: tokens.borders.interactiveSm, rowGap: tokens.sizes.x5s, rowHeight: tokens.sizes.lg, sortIconSizeValue: tokens.sizes.x2s, sortIconGap: tokens.sizes.x5s, cellPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), rowLabelPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), columnTextStyle: tokens.typography.heading.textDefault, rowTextStyle: tokens.typography.body.textDefault, rowLabelTextStyle: tokens.typography.body.textDefault, rowPinnedAnimatedLabelTextStyle: tokens.typography.body.textDefault, ), xl = xl ?? MoonTableSizeProperties( rowBorderRadius: tokens.borders.interactiveMd, rowGap: tokens.sizes.x5s, rowHeight: tokens.sizes.xl, sortIconSizeValue: tokens.sizes.x2s, sortIconGap: tokens.sizes.x5s, cellPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), rowLabelPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), columnTextStyle: tokens.typography.heading.textDefault, rowTextStyle: tokens.typography.body.textDefault, rowLabelTextStyle: tokens.typography.body.textDefault, rowPinnedAnimatedLabelTextStyle: tokens.typography.body.textDefault, ), x2l = x2l ?? MoonTableSizeProperties( rowBorderRadius: tokens.borders.interactiveMd, rowGap: tokens.sizes.x5s, rowHeight: tokens.sizes.x2l, sortIconSizeValue: tokens.sizes.x2s, sortIconGap: tokens.sizes.x5s, cellPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), rowLabelPadding: EdgeInsets.symmetric(horizontal: tokens.sizes.x3s), columnTextStyle: tokens.typography.heading.textDefault, rowTextStyle: tokens.typography.body.textDefault, rowLabelTextStyle: tokens.typography.body.textDefault, rowPinnedAnimatedLabelTextStyle: tokens.typography.body.textDefault, ); @override MoonTableSizes copyWith({ MoonTokens? tokens, MoonTableSizeProperties? xs, MoonTableSizeProperties? sm, MoonTableSizeProperties? md, MoonTableSizeProperties? lg, MoonTableSizeProperties? xl, MoonTableSizeProperties? x2l, }) { return MoonTableSizes( tokens: tokens ?? this.tokens, xs: xs ?? this.xs, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, xl: xl ?? this.xl, x2l: x2l ?? this.x2l, ); } @override MoonTableSizes lerp(ThemeExtension? other, double t) { if (other is! MoonTableSizes) return this; return MoonTableSizes( tokens: tokens.lerp(other.tokens, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), xl: xl.lerp(other.xl, t), x2l: x2l.lerp(other.x2l, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTableSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)) ..add(DiagnosticsProperty("xl", xl)) ..add(DiagnosticsProperty("x2l", x2l)); } } ================================================ FILE: lib/src/theme/table/table_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/table/table_colors.dart'; import 'package:moon_design/src/theme/table/table_properties.dart'; import 'package:moon_design/src/theme/table/table_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTableTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonTable. final MoonTableColors colors; /// The properties of the MoonTable. final MoonTableProperties properties; /// The sizes of the MoonTable. final MoonTableSizes sizes; MoonTableTheme({ required this.tokens, MoonTableColors? colors, MoonTableProperties? properties, MoonTableSizes? sizes, }) : colors = colors ?? MoonTableColors( columnTextColor: tokens.colors.textPrimary, rowTextColor: tokens.colors.textPrimary, rowLabelTextColor: tokens.colors.textPrimary, rowPinnedAnimatedLabelTextColor: tokens.colors.trunks, iconColor: tokens.colors.iconPrimary, rowBackgroundColor: tokens.colors.goku, ), properties = properties ?? MoonTableProperties( transitionDuration: const Duration(milliseconds: 400), transitionCurve: tokens.transitions.defaultTransitionCurve, ), sizes = sizes ?? MoonTableSizes(tokens: tokens); @override MoonTableTheme copyWith({ MoonTokens? tokens, MoonTableColors? colors, MoonTableProperties? properties, MoonTableSizes? sizes, }) { return MoonTableTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, sizes: sizes ?? this.sizes, ); } @override MoonTableTheme lerp(ThemeExtension? other, double t) { if (other is! MoonTableTheme) return this; return MoonTableTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTableTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/tag/tag_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTagColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonTag. final Color textColor; /// The icon color of the MoonTag. final Color iconColor; /// The background color of the MoonTag. final Color backgroundColor; const MoonTagColors({ required this.textColor, required this.iconColor, required this.backgroundColor, }); @override MoonTagColors copyWith({ Color? textColor, Color? iconColor, Color? backgroundColor, }) { return MoonTagColors( textColor: textColor ?? this.textColor, iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonTagColors lerp(ThemeExtension? other, double t) { if (other is! MoonTagColors) return this; return MoonTagColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/tag/tag_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTagSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonTag. final BorderRadiusGeometry borderRadius; /// The horizontal gap between the leading, label and trailing widgets of the /// MoonTag. final double gap; /// The height of the MoonTag. final double height; /// The size value of the MoonTag icon. final double iconSizeValue; /// The padding of the MoonTag. final EdgeInsetsGeometry padding; /// The text style of the MoonTag. final TextStyle textStyle; const MoonTagSizeProperties({ required this.borderRadius, required this.gap, required this.height, required this.iconSizeValue, required this.padding, required this.textStyle, }); @override MoonTagSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? gap, double? height, double? iconSizeValue, EdgeInsetsGeometry? padding, TextStyle? textStyle, }) { return MoonTagSizeProperties( borderRadius: borderRadius ?? this.borderRadius, gap: gap ?? this.gap, height: height ?? this.height, iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, textStyle: textStyle ?? this.textStyle, ); } @override MoonTagSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTagSizeProperties) return this; return MoonTagSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, gap: lerpDouble(gap, other.gap, t)!, height: lerpDouble(height, other.height, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonTagSizeProperties", ), ) ..add( DiagnosticsProperty( "borderRadius", borderRadius, ), ) ..add(DoubleProperty("gap", gap)) ..add(DoubleProperty("height", height)) ..add(DoubleProperty("iconSizeValue", iconSizeValue)) ..add(DiagnosticsProperty("padding", padding)) ..add(DiagnosticsProperty("textStyle", textStyle)); } } ================================================ FILE: lib/src/theme/tag/tag_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tag/tag_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTagSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the (2x) extra small MoonTag. final MoonTagSizeProperties x2s; /// The properties of the extra small MoonTag. final MoonTagSizeProperties xs; /// The properties of the small MoonTag. final MoonTagSizeProperties sm; MoonTagSizes({ required this.tokens, MoonTagSizeProperties? x2s, MoonTagSizeProperties? xs, MoonTagSizeProperties? sm, }) : x2s = x2s ?? MoonTagSizeProperties( borderRadius: tokens.borders.interactiveXs, gap: tokens.sizes.x6s, height: tokens.sizes.x2s, iconSizeValue: tokens.sizes.x3s, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), textStyle: tokens.typography.body.text9, ), xs = xs ?? MoonTagSizeProperties( borderRadius: tokens.borders.interactiveXs, gap: tokens.sizes.x6s, height: tokens.sizes.xs, iconSizeValue: tokens.sizes.x2s, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x4s), textStyle: tokens.typography.body.text12, ), sm = sm ?? MoonTagSizeProperties( borderRadius: tokens.borders.interactiveSm, gap: tokens.sizes.x4s, height: tokens.sizes.sm, iconSizeValue: tokens.sizes.x2s, padding: EdgeInsets.symmetric(horizontal: tokens.sizes.x2s), textStyle: tokens.typography.body.text12, ); @override MoonTagSizes copyWith({ MoonTokens? tokens, MoonTagSizeProperties? x2s, MoonTagSizeProperties? xs, MoonTagSizeProperties? sm, }) { return MoonTagSizes( tokens: tokens ?? this.tokens, x2s: x2s ?? this.x2s, xs: xs ?? this.xs, sm: sm ?? this.sm, ); } @override MoonTagSizes lerp(ThemeExtension? other, double t) { if (other is! MoonTagSizes) return this; return MoonTagSizes( tokens: tokens.lerp(other.tokens, t), x2s: x2s.lerp(other.x2s, t), xs: xs.lerp(other.xs, t), sm: sm.lerp(other.sm, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("x2s", x2s)) ..add(DiagnosticsProperty("xs", xs)) ..add(DiagnosticsProperty("sm", sm)); } } ================================================ FILE: lib/src/theme/tag/tag_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tag/tag_colors.dart'; import 'package:moon_design/src/theme/tag/tag_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTagTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonTag. final MoonTagColors colors; /// The sizes of the MoonTag. final MoonTagSizes sizes; MoonTagTheme({ required this.tokens, MoonTagColors? colors, MoonTagSizes? sizes, }) : colors = colors ?? MoonTagColors( textColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, backgroundColor: tokens.colors.goku, ), sizes = sizes ?? MoonTagSizes(tokens: tokens); @override MoonTagTheme copyWith({ MoonTokens? tokens, MoonTagColors? colors, MoonTagSizes? sizes, }) { return MoonTagTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, sizes: sizes ?? this.sizes, ); } @override MoonTagTheme lerp(ThemeExtension? other, double t) { if (other is! MoonTagTheme) return this; return MoonTagTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTagTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("sizes", sizes)); } } ================================================ FILE: lib/src/theme/text_area/text_area_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTextAreaColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the MoonTextArea. final Color backgroundColor; /// The border color of the active or focused MoonTextArea. final Color activeBorderColor; /// The border color of the inactive MoonTextArea. final Color inactiveBorderColor; /// The color of the MoonTextArea in error state. final Color errorColor; /// The border color of the MoonTextArea on hover. final Color hoverBorderColor; /// The text color of the MoonTextArea. final Color textColor; /// The text color of the MoonTextArea helper and errorBuilder widgets. final Color helperTextColor; const MoonTextAreaColors({ required this.backgroundColor, required this.activeBorderColor, required this.inactiveBorderColor, required this.errorColor, required this.hoverBorderColor, required this.textColor, required this.helperTextColor, }); @override MoonTextAreaColors copyWith({ Color? backgroundColor, Color? activeBorderColor, Color? inactiveBorderColor, Color? errorColor, Color? hoverBorderColor, Color? textColor, Color? helperTextColor, }) { return MoonTextAreaColors( backgroundColor: backgroundColor ?? this.backgroundColor, activeBorderColor: activeBorderColor ?? this.activeBorderColor, inactiveBorderColor: inactiveBorderColor ?? this.inactiveBorderColor, errorColor: errorColor ?? this.errorColor, hoverBorderColor: hoverBorderColor ?? this.hoverBorderColor, textColor: textColor ?? this.textColor, helperTextColor: helperTextColor ?? this.helperTextColor, ); } @override MoonTextAreaColors lerp(ThemeExtension? other, double t) { if (other is! MoonTextAreaColors) return this; return MoonTextAreaColors( backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, activeBorderColor: colorPremulLerp(activeBorderColor, other.activeBorderColor, t)!, inactiveBorderColor: colorPremulLerp(inactiveBorderColor, other.inactiveBorderColor, t)!, errorColor: colorPremulLerp(errorColor, other.errorColor, t)!, hoverBorderColor: colorPremulLerp(hoverBorderColor, other.hoverBorderColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, helperTextColor: colorPremulLerp(helperTextColor, other.helperTextColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTextAreaColors")) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("activeBorderColor", activeBorderColor)) ..add(ColorProperty("inactiveBorderColor", inactiveBorderColor)) ..add(ColorProperty("errorColor", errorColor)) ..add(ColorProperty("hoverBorderColor", hoverBorderColor)) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("helperTextColor", helperTextColor)); } } ================================================ FILE: lib/src/theme/text_area/text_area_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTextAreaProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonTextArea. final BorderRadiusGeometry borderRadius; /// The duration of the MoonTextArea transition animation (enable and disable). final Duration transitionDuration; /// The curve of the MoonTextArea transition animation (enable and disable). final Curve transitionCurve; /// The padding of the MoonTextArea helper and errorBuilder widgets. final EdgeInsetsGeometry helperPadding; /// The padding of the MoonTextArea text. final EdgeInsetsGeometry textPadding; /// The text style of the MoonTextArea. final TextStyle textStyle; /// The text style of the MoonTextArea helper and errorBuilder widgets. final TextStyle helperTextStyle; const MoonTextAreaProperties({ required this.borderRadius, required this.transitionDuration, required this.transitionCurve, required this.helperPadding, required this.textPadding, required this.textStyle, required this.helperTextStyle, }); @override MoonTextAreaProperties copyWith({ BorderRadiusGeometry? borderRadius, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? helperPadding, EdgeInsetsGeometry? textPadding, TextStyle? textStyle, TextStyle? helperTextStyle, }) { return MoonTextAreaProperties( borderRadius: borderRadius ?? this.borderRadius, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, helperPadding: helperPadding ?? this.helperPadding, textPadding: textPadding ?? this.textPadding, textStyle: textStyle ?? this.textStyle, helperTextStyle: helperTextStyle ?? this.helperTextStyle, ); } @override MoonTextAreaProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTextAreaProperties) return this; return MoonTextAreaProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, helperPadding: EdgeInsetsGeometry.lerp(helperPadding, other.helperPadding, t)!, textPadding: EdgeInsetsGeometry.lerp(textPadding, other.textPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, helperTextStyle: TextStyle.lerp(helperTextStyle, other.helperTextStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonTextAreaProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty("helperPadding", helperPadding), ) ..add( DiagnosticsProperty("textPadding", textPadding), ) ..add( DiagnosticsProperty("textStyle", textStyle), ) ..add( DiagnosticsProperty("helperTextStyle", helperTextStyle), ); } } ================================================ FILE: lib/src/theme/text_area/text_area_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/text_area/text_area_colors.dart'; import 'package:moon_design/src/theme/text_area/text_area_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTextAreaTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonTextArea. final MoonTextAreaColors colors; /// The properties of the MoonTextArea. final MoonTextAreaProperties properties; MoonTextAreaTheme({ required this.tokens, MoonTextAreaColors? colors, MoonTextAreaProperties? properties, }) : colors = colors ?? MoonTextAreaColors( backgroundColor: tokens.colors.goku, activeBorderColor: tokens.colors.piccolo, inactiveBorderColor: tokens.colors.beerus, errorColor: tokens.colors.chichi, hoverBorderColor: tokens.colors.beerus, textColor: tokens.colors.textPrimary, helperTextColor: tokens.colors.trunks, ), properties = properties ?? MoonTextAreaProperties( borderRadius: tokens.borders.interactiveSm, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, helperPadding: EdgeInsets.only(top: tokens.sizes.x4s), textPadding: EdgeInsets.all(tokens.sizes.x2s), textStyle: tokens.typography.body.text16, helperTextStyle: tokens.typography.body.text12, ); @override MoonTextAreaTheme copyWith({ MoonTokens? tokens, MoonTextAreaColors? colors, MoonTextAreaProperties? properties, }) { return MoonTextAreaTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonTextAreaTheme lerp(ThemeExtension? other, double t) { if (other is! MoonTextAreaTheme) return this; return MoonTextAreaTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTextAreaTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty("properties", properties), ); } } ================================================ FILE: lib/src/theme/text_input/text_input_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTextInputColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the MoonTextInput. final Color backgroundColor; /// The border color of the active or focused MoonTextInput. final Color activeBorderColor; /// The border color of the inactive MoonTextInput. final Color inactiveBorderColor; /// The color of the MoonTextInput in error state. final Color errorColor; /// The border color of the MoonTextInput on hover. final Color hoverBorderColor; /// The text color of the MoonTextInput. final Color textColor; /// The text color of the MoonTextInput helper and errorBuilder widgets. final Color helperTextColor; const MoonTextInputColors({ required this.backgroundColor, required this.activeBorderColor, required this.inactiveBorderColor, required this.errorColor, required this.hoverBorderColor, required this.textColor, required this.helperTextColor, }); @override MoonTextInputColors copyWith({ Color? backgroundColor, Color? activeBorderColor, Color? inactiveBorderColor, Color? errorColor, Color? hoverBorderColor, Color? textColor, Color? helperTextColor, }) { return MoonTextInputColors( backgroundColor: backgroundColor ?? this.backgroundColor, activeBorderColor: activeBorderColor ?? this.activeBorderColor, inactiveBorderColor: inactiveBorderColor ?? this.inactiveBorderColor, errorColor: errorColor ?? this.errorColor, hoverBorderColor: hoverBorderColor ?? this.hoverBorderColor, textColor: textColor ?? this.textColor, helperTextColor: helperTextColor ?? this.helperTextColor, ); } @override MoonTextInputColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonTextInputColors) return this; return MoonTextInputColors( backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, activeBorderColor: colorPremulLerp(activeBorderColor, other.activeBorderColor, t)!, inactiveBorderColor: colorPremulLerp(inactiveBorderColor, other.inactiveBorderColor, t)!, errorColor: colorPremulLerp(errorColor, other.errorColor, t)!, hoverBorderColor: colorPremulLerp(hoverBorderColor, other.hoverBorderColor, t)!, textColor: colorPremulLerp(textColor, other.textColor, t)!, helperTextColor: colorPremulLerp(helperTextColor, other.helperTextColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTextInputColors")) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("activeBorderColor", activeBorderColor)) ..add(ColorProperty("inactiveBorderColor", inactiveBorderColor)) ..add(ColorProperty("errorColor", errorColor)) ..add(ColorProperty("hoverBorderColor", hoverBorderColor)) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("helperTextColor", helperTextColor)); } } ================================================ FILE: lib/src/theme/text_input/text_input_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTextInputProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The duration of the MoonTextInput transition animation /// (enable and disable). final Duration transitionDuration; /// The curve of the MoonTextInput transition animation (enable and disable). final Curve transitionCurve; /// The padding of the MoonTextInput helper and errorBuilder widgets. final EdgeInsetsGeometry helperPadding; /// The text style of the MoonTextInput helper and errorBuilder widgets. final TextStyle helperTextStyle; const MoonTextInputProperties({ required this.transitionDuration, required this.transitionCurve, required this.helperPadding, required this.helperTextStyle, }); @override MoonTextInputProperties copyWith({ Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? helperPadding, TextStyle? helperTextStyle, }) { return MoonTextInputProperties( transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, helperPadding: helperPadding ?? this.helperPadding, helperTextStyle: helperTextStyle ?? this.helperTextStyle, ); } @override MoonTextInputProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTextInputProperties) return this; return MoonTextInputProperties( transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, helperPadding: EdgeInsetsGeometry.lerp(helperPadding, other.helperPadding, t)!, helperTextStyle: TextStyle.lerp(helperTextStyle, other.helperTextStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonTextInputProperties"), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty("helperPadding", helperPadding), ) ..add( DiagnosticsProperty("helperTextStyle", helperTextStyle), ); } } ================================================ FILE: lib/src/theme/text_input/text_input_size_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTextInputSizeProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonTextInput. final BorderRadiusGeometry borderRadius; /// The height of the MoonTextInput. final double height; /// The gap between the leading, label and trailing widgets of the /// MoonTextInput. final double gap; /// The size value of the MoonTextInput icon. final double iconSizeValue; /// The padding of the MoonTextInput. final EdgeInsetsGeometry padding; /// The text style of the MoonTextInput. final TextStyle textStyle; const MoonTextInputSizeProperties({ required this.borderRadius, required this.height, required this.gap, required this.iconSizeValue, required this.padding, required this.textStyle, }); @override MoonTextInputSizeProperties copyWith({ BorderRadiusGeometry? borderRadius, double? height, double? gap, double? iconSizeValue, EdgeInsetsGeometry? padding, TextStyle? textStyle, }) { return MoonTextInputSizeProperties( borderRadius: borderRadius ?? this.borderRadius, height: height ?? this.height, gap: gap ?? this.gap, iconSizeValue: iconSizeValue ?? this.iconSizeValue, padding: padding ?? this.padding, textStyle: textStyle ?? this.textStyle, ); } @override MoonTextInputSizeProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTextInputSizeProperties) return this; return MoonTextInputSizeProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, height: lerpDouble(height, other.height, t)!, gap: lerpDouble(gap, other.gap, t)!, iconSizeValue: lerpDouble(iconSizeValue, other.iconSizeValue, t)!, padding: EdgeInsetsGeometry.lerp(padding, other.padding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonTextInputSizeProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("height", height), ) ..add( DoubleProperty("gap", gap), ) ..add( DoubleProperty("iconSizeValue", iconSizeValue), ) ..add( DiagnosticsProperty("padding", padding), ) ..add( DiagnosticsProperty("textStyle", textStyle), ); } } ================================================ FILE: lib/src/theme/text_input/text_input_sizes.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/text_input/text_input_size_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTextInputSizes extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The properties of the small MoonTextInput. final MoonTextInputSizeProperties sm; /// The properties of the medium MoonTextInput. final MoonTextInputSizeProperties md; /// The properties of the large MoonTextInput. final MoonTextInputSizeProperties lg; /// The properties of the extra large MoonTextInput. final MoonTextInputSizeProperties xl; MoonTextInputSizes({ required this.tokens, MoonTextInputSizeProperties? sm, MoonTextInputSizeProperties? md, MoonTextInputSizeProperties? lg, MoonTextInputSizeProperties? xl, }) : sm = sm ?? MoonTextInputSizeProperties( borderRadius: tokens.borders.interactiveXs, height: tokens.sizes.sm, gap: tokens.sizes.x4s, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric( horizontal: tokens.sizes.x4s, vertical: tokens.sizes.x6s, ), textStyle: tokens.typography.body.textDefault, ), md = md ?? MoonTextInputSizeProperties( borderRadius: tokens.borders.interactiveSm, height: tokens.sizes.md, gap: tokens.sizes.x4s, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric( horizontal: tokens.sizes.x3s, vertical: tokens.sizes.x5s, ), textStyle: tokens.typography.body.textDefault, ), lg = lg ?? MoonTextInputSizeProperties( borderRadius: tokens.borders.interactiveSm, height: tokens.sizes.lg, gap: tokens.sizes.x4s, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric( horizontal: tokens.sizes.x3s, vertical: 6, ), textStyle: tokens.typography.body.text16, ), xl = xl ?? MoonTextInputSizeProperties( borderRadius: tokens.borders.interactiveSm, height: tokens.sizes.xl, gap: tokens.sizes.x2s, iconSizeValue: tokens.sizes.xs, padding: EdgeInsets.symmetric( horizontal: tokens.sizes.x2s, vertical: 9, ), textStyle: tokens.typography.body.text16, ); @override MoonTextInputSizes copyWith({ MoonTokens? tokens, MoonTextInputSizeProperties? sm, MoonTextInputSizeProperties? md, MoonTextInputSizeProperties? lg, MoonTextInputSizeProperties? xl, }) { return MoonTextInputSizes( tokens: tokens ?? this.tokens, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, xl: xl ?? this.xl, ); } @override MoonTextInputSizes lerp(ThemeExtension? other, double t) { if (other is! MoonTextInputSizes) return this; return MoonTextInputSizes( tokens: tokens.lerp(other.tokens, t), sm: sm.lerp(other.sm, t), md: md.lerp(other.md, t), lg: lg.lerp(other.lg, t), xl: xl.lerp(other.xl, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTextInputSizes")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("sm", sm)) ..add(DiagnosticsProperty("md", md)) ..add(DiagnosticsProperty("lg", lg)) ..add(DiagnosticsProperty("xl", xl)); } } ================================================ FILE: lib/src/theme/text_input/text_input_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/text_input/text_input_colors.dart'; import 'package:moon_design/src/theme/text_input/text_input_properties.dart'; import 'package:moon_design/src/theme/text_input/text_input_sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTextInputTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonTextInput. final MoonTextInputColors colors; /// The properties of the MoonTextInput. final MoonTextInputProperties properties; /// The sizes of the MoonTextInput. final MoonTextInputSizes sizes; MoonTextInputTheme({ required this.tokens, MoonTextInputColors? colors, MoonTextInputProperties? properties, MoonTextInputSizes? sizes, }) : colors = colors ?? MoonTextInputColors( backgroundColor: tokens.colors.goku, activeBorderColor: tokens.colors.piccolo, inactiveBorderColor: tokens.colors.beerus, errorColor: tokens.colors.chichi, hoverBorderColor: tokens.colors.beerus, textColor: tokens.colors.textPrimary, helperTextColor: tokens.colors.textSecondary, ), properties = properties ?? MoonTextInputProperties( // The duration value extracted from: // https://github.com/material-components/material-components-android/blob/master/lib/java/com/google/android/material/textfield/TextInputLayout.java transitionDuration: const Duration(milliseconds: 167), transitionCurve: Curves.fastOutSlowIn, helperPadding: EdgeInsets.only(top: tokens.sizes.x4s), helperTextStyle: tokens.typography.body.text12, ), sizes = sizes ?? MoonTextInputSizes(tokens: tokens); @override MoonTextInputTheme copyWith({ MoonTokens? tokens, MoonTextInputColors? colors, MoonTextInputProperties? properties, MoonTextInputSizes? sizes, }) { return MoonTextInputTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, sizes: sizes ?? this.sizes, ); } @override MoonTextInputTheme lerp(ThemeExtension? other, double t) { if (other is! MoonTextInputTheme) return this; return MoonTextInputTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), sizes: sizes.lerp(other.sizes, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add( DiagnosticsProperty("type", "MoonTextInputTheme"), ) ..add( DiagnosticsProperty("tokens", tokens), ) ..add( DiagnosticsProperty("colors", colors), ) ..add( DiagnosticsProperty("properties", properties), ) ..add( DiagnosticsProperty("sizes", sizes), ); } } ================================================ FILE: lib/src/theme/text_input_group/text_input_group_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTextInputGroupColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the MoonTextInputGroup. final Color backgroundColor; /// The color of the MoonTextInputGroup in error state. final Color errorColor; /// The text color of the MoonTextInputGroup helper and errorBuilder widgets. final Color helperTextColor; /// The border color of the MoonTextInputGroup. final Color borderColor; /// The border color of the MoonTextInputGroup on hover. final Color hoverBorderColor; const MoonTextInputGroupColors({ required this.backgroundColor, required this.errorColor, required this.helperTextColor, required this.borderColor, required this.hoverBorderColor, }); @override MoonTextInputGroupColors copyWith({ Color? backgroundColor, Color? errorColor, Color? helperTextColor, Color? borderColor, Color? hoverBorderColor, }) { return MoonTextInputGroupColors( backgroundColor: backgroundColor ?? this.backgroundColor, errorColor: errorColor ?? this.errorColor, helperTextColor: helperTextColor ?? this.helperTextColor, borderColor: borderColor ?? this.borderColor, hoverBorderColor: hoverBorderColor ?? this.hoverBorderColor, ); } @override MoonTextInputGroupColors lerp( ThemeExtension? other, double t, ) { if (other is! MoonTextInputGroupColors) return this; return MoonTextInputGroupColors( backgroundColor: colorPremulLerp(backgroundColor, other.backgroundColor, t)!, errorColor: colorPremulLerp(errorColor, other.errorColor, t)!, helperTextColor: colorPremulLerp(helperTextColor, other.helperTextColor, t)!, borderColor: colorPremulLerp(borderColor, other.borderColor, t)!, hoverBorderColor: colorPremulLerp(hoverBorderColor, other.hoverBorderColor, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTextInputGroupColors")) ..add(ColorProperty("backgroundColor", backgroundColor)) ..add(ColorProperty("errorColor", errorColor)) ..add(ColorProperty("helperTextColor", helperTextColor)) ..add(ColorProperty("borderColor", borderColor)) ..add(ColorProperty("hoverBorderColor", hoverBorderColor)); } } ================================================ FILE: lib/src/theme/text_input_group/text_input_group_properties.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTextInputGroupProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonTextInputGroup. final BorderRadiusGeometry borderRadius; /// The duration of the MoonTextInputGroup transition animation /// (enable and disable). final Duration transitionDuration; /// The curve of the MoonTextInputGroup transition animation /// (enable and disable). final Curve transitionCurve; /// The padding of the MoonTextInputGroup helper and errorBuilder widgets. final EdgeInsetsGeometry helperPadding; /// The padding of the MoonTextInputGroup text. final EdgeInsetsGeometry textPadding; /// The text style of the MoonTextInputGroup. final TextStyle textStyle; /// The text style of the MoonTextInputGroup helper and errorBuilder widgets. final TextStyle helperTextStyle; const MoonTextInputGroupProperties({ required this.borderRadius, required this.transitionDuration, required this.transitionCurve, required this.helperPadding, required this.textPadding, required this.textStyle, required this.helperTextStyle, }); @override MoonTextInputGroupProperties copyWith({ BorderRadiusGeometry? borderRadius, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? helperPadding, EdgeInsetsGeometry? textPadding, TextStyle? textStyle, TextStyle? helperTextStyle, }) { return MoonTextInputGroupProperties( borderRadius: borderRadius ?? this.borderRadius, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, helperPadding: helperPadding ?? this.helperPadding, textPadding: textPadding ?? this.textPadding, textStyle: textStyle ?? this.textStyle, helperTextStyle: helperTextStyle ?? this.helperTextStyle, ); } @override MoonTextInputGroupProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTextInputGroupProperties) return this; return MoonTextInputGroupProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, helperPadding: EdgeInsetsGeometry.lerp(helperPadding, other.helperPadding, t)!, textPadding: EdgeInsetsGeometry.lerp(textPadding, other.textPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, helperTextStyle: TextStyle.lerp(helperTextStyle, other.helperTextStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonTextInputGroupProperties", ), ) ..add( DiagnosticsProperty( "borderRadius", borderRadius, ), ) ..add( DiagnosticsProperty( "transitionDuration", transitionDuration, ), ) ..add( DiagnosticsProperty( "transitionCurve", transitionCurve, ), ) ..add( DiagnosticsProperty( "helperPadding", helperPadding, ), ) ..add(DiagnosticsProperty("textPadding", textPadding)) ..add(DiagnosticsProperty("textStyle", textStyle)) ..add(DiagnosticsProperty("helperTextStyle", helperTextStyle)); } } ================================================ FILE: lib/src/theme/text_input_group/text_input_group_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/text_input_group/text_input_group_colors.dart'; import 'package:moon_design/src/theme/text_input_group/text_input_group_properties.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonTextInputGroupTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonTextInputGroup. final MoonTextInputGroupColors colors; /// The properties of the MoonTextInputGroup. final MoonTextInputGroupProperties properties; MoonTextInputGroupTheme({ required this.tokens, MoonTextInputGroupColors? colors, MoonTextInputGroupProperties? properties, }) : colors = colors ?? MoonTextInputGroupColors( backgroundColor: tokens.colors.goku, errorColor: tokens.colors.chichi, helperTextColor: tokens.colors.trunks, borderColor: tokens.colors.beerus, hoverBorderColor: tokens.colors.beerus, ), properties = properties ?? MoonTextInputGroupProperties( borderRadius: tokens.borders.interactiveSm, transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, helperPadding: EdgeInsets.only(top: tokens.sizes.x4s), textPadding: EdgeInsets.all(tokens.sizes.x2s), textStyle: tokens.typography.body.text16, helperTextStyle: tokens.typography.body.text12, ); @override MoonTextInputGroupTheme copyWith({ MoonTokens? tokens, MoonTextInputGroupColors? colors, MoonTextInputGroupProperties? properties, }) { return MoonTextInputGroupTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, ); } @override MoonTextInputGroupTheme lerp( ThemeExtension? other, double t, ) { if (other is! MoonTextInputGroupTheme) return this; return MoonTextInputGroupTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonTextInputGroupTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add( DiagnosticsProperty( "properties", properties, ), ); } } ================================================ FILE: lib/src/theme/theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/accordion/accordion_theme.dart'; import 'package:moon_design/src/theme/alert/alert_theme.dart'; import 'package:moon_design/src/theme/auth_code/auth_code_theme.dart'; import 'package:moon_design/src/theme/avatar/avatar_theme.dart'; import 'package:moon_design/src/theme/bottom_sheet/bottom_sheet_theme.dart'; import 'package:moon_design/src/theme/breadcrumb/breadcrumb_theme.dart'; import 'package:moon_design/src/theme/button/button_theme.dart'; import 'package:moon_design/src/theme/carousel/carousel_theme.dart'; import 'package:moon_design/src/theme/checkbox/checkbox_theme.dart'; import 'package:moon_design/src/theme/chip/chip_theme.dart'; import 'package:moon_design/src/theme/dot_indicator/dot_indicator_theme.dart'; import 'package:moon_design/src/theme/drawer/drawer_theme.dart'; import 'package:moon_design/src/theme/dropdown/dropdown_theme.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_theme.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_theme.dart'; import 'package:moon_design/src/theme/menu_item/menu_item_theme.dart'; import 'package:moon_design/src/theme/modal/modal_theme.dart'; import 'package:moon_design/src/theme/popover/popover_theme.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_theme.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_theme.dart'; import 'package:moon_design/src/theme/progress_pin/progress_pin_theme.dart'; import 'package:moon_design/src/theme/radio/radio_theme.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_theme.dart'; import 'package:moon_design/src/theme/switch/switch_theme.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_theme.dart'; import 'package:moon_design/src/theme/table/table_theme.dart'; import 'package:moon_design/src/theme/tag/tag_theme.dart'; import 'package:moon_design/src/theme/text_area/text_area_theme.dart'; import 'package:moon_design/src/theme/text_input/text_input_theme.dart'; import 'package:moon_design/src/theme/text_input_group/text_input_group_theme.dart'; import 'package:moon_design/src/theme/toast/toast_theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/theme/tooltip/tooltip_theme.dart'; import 'package:moon_tokens/moon_tokens.dart'; @immutable class MoonTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The theming of the Moon Design System MoonAccordion widget. final MoonAccordionTheme accordionTheme; /// The theming of the Moon Design System MoonAlert widget. final MoonAlertTheme alertTheme; /// The theming of the Moon Design System MoonAuthCode widget. final MoonAuthCodeTheme authCodeTheme; /// The theming of the Moon Design System MoonAvatar widget. final MoonAvatarTheme avatarTheme; /// The theming of the Moon Design System MoonBottomSheet widget. final MoonBottomSheetTheme bottomSheetTheme; /// The theming of the Moon Design System MoonBreadcrumb widget. final MoonBreadcrumbTheme breadcrumbTheme; /// The theming of the Moon Design System MoonButton widget. final MoonButtonTheme buttonTheme; /// The theming of the Moon Design System MoonCarousel widget. final MoonCarouselTheme carouselTheme; /// The theming of the Moon Design System MoonCheckbox widget. final MoonCheckboxTheme checkboxTheme; /// The theming of the Moon Design System MoonChip widget. final MoonChipTheme chipTheme; /// The theming of the Moon Design System MoonCircularLoader widget. final MoonCircularLoaderTheme circularLoaderTheme; /// The theming of the Moon Design System MoonCircularProgress widget. final MoonCircularProgressTheme circularProgressTheme; /// The theming of the Moon Design System MoonDotIndicator widget. final MoonDotIndicatorTheme dotIndicatorTheme; /// The theming of the Moon Design System MoonDrawer widget. final MoonDrawerTheme drawerTheme; /// The theming of the Moon Design System MoonDropdown widget. final MoonDropdownTheme dropdownTheme; /// The theming of the Moon Design System effects. final MoonEffectsTheme effects; /// The theming of the Moon Design System MoonLinearLoader widget. final MoonLinearLoaderTheme linearLoaderTheme; /// The theming of the Moon Design System MoonLinearProgress widget. final MoonLinearProgressTheme linearProgressTheme; /// The theming of the Moon Design System MoonMenuItem widget. final MoonMenuItemTheme menuItemTheme; /// The theming of the Moon Design System MoonModal widget. final MoonModalTheme modalTheme; /// The theming of the Moon Design System MoonPopover widget. final MoonPopoverTheme popoverTheme; /// The theming of the Moon Design System MoonProgressPin widget. final MoonProgressPinTheme progressPinTheme; /// The theming of the Moon Design System MoonRadio widget. final MoonRadioTheme radioTheme; /// The theming of the Moon Design System MoonSegmentedControl widget. final MoonSegmentedControlTheme segmentedControlTheme; /// The theming of the Moon Design System MoonSwitch widget. final MoonSwitchTheme switchTheme; /// The theming of the Moon Design System MoonTabBar widget. final MoonTabBarTheme tabBarTheme; /// The theming of the Moon Design System MoonTable widget. final MoonTableTheme tableTheme; /// The theming of the Moon Design System MoonTag widget. final MoonTagTheme tagTheme; /// The theming of the Moon Design System MoonTextArea widget. final MoonTextAreaTheme textAreaTheme; /// The theming of the Moon Design System MoonTextInput widget. final MoonTextInputTheme textInputTheme; /// The theming of the Moon Design System MoonTextInputGroup widget. final MoonTextInputGroupTheme textInputGroupTheme; /// The theming of the Moon Design System MoonToast widget. final MoonToastTheme toastTheme; /// The theming of the Moon Design System MoonTooltip widget. final MoonTooltipTheme tooltipTheme; MoonTheme({ required this.tokens, MoonAccordionTheme? accordionTheme, MoonAlertTheme? alertTheme, MoonAuthCodeTheme? authCodeTheme, MoonAvatarTheme? avatarTheme, MoonBottomSheetTheme? bottomSheetTheme, MoonBreadcrumbTheme? breadcrumbTheme, MoonButtonTheme? buttonTheme, MoonCarouselTheme? carouselTheme, MoonCheckboxTheme? checkboxTheme, MoonChipTheme? chipTheme, MoonCircularLoaderTheme? circularLoaderTheme, MoonCircularProgressTheme? circularProgressTheme, MoonDotIndicatorTheme? dotIndicatorTheme, MoonDrawerTheme? drawerTheme, MoonDropdownTheme? dropdownTheme, MoonEffectsTheme? effects, MoonLinearLoaderTheme? linearLoaderTheme, MoonLinearProgressTheme? linearProgressTheme, MoonMenuItemTheme? menuItemTheme, MoonModalTheme? modalTheme, MoonPopoverTheme? popoverTheme, MoonProgressPinTheme? progressPinTheme, MoonRadioTheme? radioTheme, MoonSegmentedControlTheme? segmentedControlTheme, MoonSwitchTheme? switchTheme, MoonTabBarTheme? tabBarTheme, MoonTableTheme? tableTheme, MoonTagTheme? tagTheme, MoonTextAreaTheme? textAreaTheme, MoonTextInputTheme? textInputTheme, MoonTextInputGroupTheme? textInputGroupTheme, MoonToastTheme? toastTheme, MoonTooltipTheme? tooltipTheme, }) : accordionTheme = accordionTheme ?? MoonAccordionTheme(tokens: tokens), alertTheme = alertTheme ?? MoonAlertTheme(tokens: tokens), authCodeTheme = authCodeTheme ?? MoonAuthCodeTheme(tokens: tokens), avatarTheme = avatarTheme ?? MoonAvatarTheme(tokens: tokens), bottomSheetTheme = bottomSheetTheme ?? MoonBottomSheetTheme(tokens: tokens), breadcrumbTheme = breadcrumbTheme ?? MoonBreadcrumbTheme(tokens: tokens), buttonTheme = buttonTheme ?? MoonButtonTheme(tokens: tokens), carouselTheme = carouselTheme ?? MoonCarouselTheme(tokens: tokens), checkboxTheme = checkboxTheme ?? MoonCheckboxTheme(tokens: tokens), chipTheme = chipTheme ?? MoonChipTheme(tokens: tokens), circularLoaderTheme = circularLoaderTheme ?? MoonCircularLoaderTheme(tokens: tokens), circularProgressTheme = circularProgressTheme ?? MoonCircularProgressTheme(tokens: tokens), dotIndicatorTheme = dotIndicatorTheme ?? MoonDotIndicatorTheme(tokens: tokens), drawerTheme = drawerTheme ?? MoonDrawerTheme(tokens: tokens), dropdownTheme = dropdownTheme ?? MoonDropdownTheme(tokens: tokens), effects = effects ?? MoonEffectsTheme(tokens: tokens), linearLoaderTheme = linearLoaderTheme ?? MoonLinearLoaderTheme(tokens: tokens), linearProgressTheme = linearProgressTheme ?? MoonLinearProgressTheme(tokens: tokens), menuItemTheme = menuItemTheme ?? MoonMenuItemTheme(tokens: tokens), modalTheme = modalTheme ?? MoonModalTheme(tokens: tokens), popoverTheme = popoverTheme ?? MoonPopoverTheme(tokens: tokens), progressPinTheme = progressPinTheme ?? MoonProgressPinTheme(tokens: tokens), radioTheme = radioTheme ?? MoonRadioTheme(tokens: tokens), segmentedControlTheme = segmentedControlTheme ?? MoonSegmentedControlTheme(tokens: tokens), switchTheme = switchTheme ?? MoonSwitchTheme(tokens: tokens), tabBarTheme = tabBarTheme ?? MoonTabBarTheme(tokens: tokens), tableTheme = tableTheme ?? MoonTableTheme(tokens: tokens), tagTheme = tagTheme ?? MoonTagTheme(tokens: tokens), textAreaTheme = textAreaTheme ?? MoonTextAreaTheme(tokens: tokens), textInputTheme = textInputTheme ?? MoonTextInputTheme(tokens: tokens), textInputGroupTheme = textInputGroupTheme ?? MoonTextInputGroupTheme(tokens: tokens), toastTheme = toastTheme ?? MoonToastTheme(tokens: tokens), tooltipTheme = tooltipTheme ?? MoonTooltipTheme(tokens: tokens); @override MoonTheme copyWith({ MoonTokens? tokens, MoonAccordionTheme? accordionTheme, MoonAlertTheme? alertTheme, MoonAuthCodeTheme? authCodeTheme, MoonAvatarTheme? avatarTheme, MoonBottomSheetTheme? bottomSheetTheme, MoonBreadcrumbTheme? breadcrumbTheme, MoonButtonTheme? buttonTheme, MoonCarouselTheme? carouselTheme, MoonCheckboxTheme? checkboxTheme, MoonChipTheme? chipTheme, MoonCircularLoaderTheme? circularLoaderTheme, MoonCircularProgressTheme? circularProgressTheme, MoonDotIndicatorTheme? dotIndicatorTheme, MoonDrawerTheme? drawerTheme, MoonDropdownTheme? dropdownTheme, MoonEffectsTheme? effects, MoonLinearLoaderTheme? linearLoaderTheme, MoonLinearProgressTheme? linearProgressTheme, MoonMenuItemTheme? menuItemTheme, MoonModalTheme? modalTheme, MoonPopoverTheme? popoverTheme, MoonProgressPinTheme? progressPinTheme, MoonRadioTheme? radioTheme, MoonSegmentedControlTheme? segmentedControlTheme, MoonSwitchTheme? switchTheme, MoonTabBarTheme? tabBarTheme, MoonTableTheme? tableTheme, MoonTagTheme? tagTheme, MoonTextAreaTheme? textAreaTheme, MoonTextInputTheme? textInputTheme, MoonTextInputGroupTheme? textInputGroupTheme, MoonToastTheme? toastTheme, MoonTooltipTheme? tooltipTheme, }) { return MoonTheme( tokens: tokens ?? this.tokens, accordionTheme: accordionTheme ?? this.accordionTheme, alertTheme: alertTheme ?? this.alertTheme, authCodeTheme: authCodeTheme ?? this.authCodeTheme, avatarTheme: avatarTheme ?? this.avatarTheme, bottomSheetTheme: bottomSheetTheme ?? this.bottomSheetTheme, breadcrumbTheme: breadcrumbTheme ?? this.breadcrumbTheme, buttonTheme: buttonTheme ?? this.buttonTheme, carouselTheme: carouselTheme ?? this.carouselTheme, checkboxTheme: checkboxTheme ?? this.checkboxTheme, chipTheme: chipTheme ?? this.chipTheme, circularLoaderTheme: circularLoaderTheme ?? this.circularLoaderTheme, circularProgressTheme: circularProgressTheme ?? this.circularProgressTheme, dotIndicatorTheme: dotIndicatorTheme ?? this.dotIndicatorTheme, drawerTheme: drawerTheme ?? this.drawerTheme, dropdownTheme: dropdownTheme ?? this.dropdownTheme, effects: effects ?? this.effects, linearLoaderTheme: linearLoaderTheme ?? this.linearLoaderTheme, linearProgressTheme: linearProgressTheme ?? this.linearProgressTheme, menuItemTheme: menuItemTheme ?? this.menuItemTheme, modalTheme: modalTheme ?? this.modalTheme, popoverTheme: popoverTheme ?? this.popoverTheme, progressPinTheme: progressPinTheme ?? this.progressPinTheme, radioTheme: radioTheme ?? this.radioTheme, segmentedControlTheme: segmentedControlTheme ?? this.segmentedControlTheme, switchTheme: switchTheme ?? this.switchTheme, tabBarTheme: tabBarTheme ?? this.tabBarTheme, tableTheme: tableTheme ?? this.tableTheme, tagTheme: tagTheme ?? this.tagTheme, textAreaTheme: textAreaTheme ?? this.textAreaTheme, textInputTheme: textInputTheme ?? this.textInputTheme, textInputGroupTheme: textInputGroupTheme ?? this.textInputGroupTheme, toastTheme: toastTheme ?? this.toastTheme, tooltipTheme: tooltipTheme ?? this.tooltipTheme, ); } @override MoonTheme lerp(ThemeExtension? other, double t) { if (other is! MoonTheme) return this; return MoonTheme( tokens: tokens.lerp(other.tokens, t), accordionTheme: accordionTheme.lerp(other.accordionTheme, t), alertTheme: alertTheme.lerp(other.alertTheme, t), authCodeTheme: authCodeTheme.lerp(other.authCodeTheme, t), avatarTheme: avatarTheme.lerp(other.avatarTheme, t), bottomSheetTheme: bottomSheetTheme.lerp(other.bottomSheetTheme, t), breadcrumbTheme: breadcrumbTheme.lerp(other.breadcrumbTheme, t), buttonTheme: buttonTheme.lerp(other.buttonTheme, t), carouselTheme: carouselTheme.lerp(other.carouselTheme, t), checkboxTheme: checkboxTheme.lerp(other.checkboxTheme, t), chipTheme: chipTheme.lerp(other.chipTheme, t), circularLoaderTheme: circularLoaderTheme.lerp(other.circularLoaderTheme, t), circularProgressTheme: circularProgressTheme.lerp(other.circularProgressTheme, t), dotIndicatorTheme: dotIndicatorTheme.lerp(other.dotIndicatorTheme, t), drawerTheme: drawerTheme.lerp(other.drawerTheme, t), dropdownTheme: dropdownTheme.lerp(other.dropdownTheme, t), effects: effects.lerp(other.effects, t), linearLoaderTheme: linearLoaderTheme.lerp(other.linearLoaderTheme, t), linearProgressTheme: linearProgressTheme.lerp(other.linearProgressTheme, t), menuItemTheme: menuItemTheme.lerp(other.menuItemTheme, t), modalTheme: modalTheme.lerp(other.modalTheme, t), popoverTheme: popoverTheme.lerp(other.popoverTheme, t), progressPinTheme: progressPinTheme.lerp(other.progressPinTheme, t), radioTheme: radioTheme.lerp(other.radioTheme, t), segmentedControlTheme: segmentedControlTheme.lerp(other.segmentedControlTheme, t), switchTheme: switchTheme.lerp(other.switchTheme, t), tabBarTheme: tabBarTheme.lerp(other.tabBarTheme, t), tableTheme: tableTheme.lerp(other.tableTheme, t), tagTheme: tagTheme.lerp(other.tagTheme, t), textAreaTheme: textAreaTheme.lerp(other.textAreaTheme, t), textInputTheme: textInputTheme.lerp(other.textInputTheme, t), textInputGroupTheme: textInputGroupTheme.lerp(other.textInputGroupTheme, t), toastTheme: toastTheme.lerp(other.toastTheme, t), tooltipTheme: tooltipTheme.lerp(other.tooltipTheme, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonTheme", ), ) ..add( DiagnosticsProperty( "MoonTokens", tokens, ), ) ..add( DiagnosticsProperty( "MoonAccordionTheme", accordionTheme, ), ) ..add( DiagnosticsProperty( "MoonAlertTheme", alertTheme, ), ) ..add( DiagnosticsProperty( "MoonAuthCodeTheme", authCodeTheme, ), ) ..add( DiagnosticsProperty( "MoonAvatarTheme", avatarTheme, ), ) ..add( DiagnosticsProperty( "MoonBottomSheetTheme", bottomSheetTheme, ), ) ..add( DiagnosticsProperty( "MoonBreadcrumbTheme", breadcrumbTheme, ), ) ..add( DiagnosticsProperty( "MoonButtonTheme", buttonTheme, ), ) ..add( DiagnosticsProperty( "MoonCarouselTheme", carouselTheme, ), ) ..add( DiagnosticsProperty( "MoonCheckboxTheme", checkboxTheme, ), ) ..add( DiagnosticsProperty( "MoonChipTheme", chipTheme, ), ) ..add( DiagnosticsProperty( "MoonCircularLoaderTheme", circularLoaderTheme, ), ) ..add( DiagnosticsProperty( "MoonCircularProgressTheme", circularProgressTheme, ), ) ..add( DiagnosticsProperty( "MoonDotIndicatorTheme", dotIndicatorTheme, ), ) ..add( DiagnosticsProperty( "MoonDrawerTheme", drawerTheme, ), ) ..add( DiagnosticsProperty( "MoonDropdownTheme", dropdownTheme, ), ) ..add( DiagnosticsProperty( "MoonEffectsTheme", effects, ), ) ..add( DiagnosticsProperty( "MoonLinearLoaderTheme", linearLoaderTheme, ), ) ..add( DiagnosticsProperty( "MoonLinearProgressTheme", linearProgressTheme, ), ) ..add( DiagnosticsProperty( "MoonMenuItemTheme", menuItemTheme, ), ) ..add( DiagnosticsProperty( "MoonModalTheme", modalTheme, ), ) ..add( DiagnosticsProperty( "MoonPopoverTheme", popoverTheme, ), ) ..add( DiagnosticsProperty( "MoonProgressPinTheme", progressPinTheme, ), ) ..add( DiagnosticsProperty( "MoonRadioTheme", radioTheme, ), ) ..add( DiagnosticsProperty( "MoonSegmentedControlTheme", segmentedControlTheme, ), ) ..add( DiagnosticsProperty( "MoonSwitchTheme", switchTheme, ), ) ..add( DiagnosticsProperty( "MoonTabBarTheme", tabBarTheme, ), ) ..add( DiagnosticsProperty( "MoonTableTheme", tableTheme, ), ) ..add( DiagnosticsProperty( "MoonTagTheme", tagTheme, ), ) ..add( DiagnosticsProperty( "MoonTextAreaTheme", textAreaTheme, ), ) ..add( DiagnosticsProperty( "MoonTextInputTheme", textInputTheme, ), ) ..add( DiagnosticsProperty( "MoonTextInputGroupTheme", textInputGroupTheme, ), ) ..add( DiagnosticsProperty( "MoonToastTheme", toastTheme, ), ) ..add( DiagnosticsProperty( "MoonTooltipTheme", tooltipTheme, ), ); } } extension MoonThemeX on BuildContext { MoonTheme? get moonTheme => Theme.of(this).extension(); MoonBorders? get moonBorders => moonTheme?.tokens.borders; MoonColors? get moonColors => moonTheme?.tokens.colors; MoonEffectsTheme? get moonEffects => moonTheme?.effects; MoonOpacities? get moonOpacities => moonTheme?.tokens.opacities; MoonShadows? get moonShadows => moonTheme?.tokens.shadows; MoonSizes? get moonSizes => moonTheme?.tokens.sizes; MoonTransitions? get moonTransitions => moonTheme?.tokens.transitions; MoonTypography? get moonTypography => moonTheme?.tokens.typography; } ================================================ FILE: lib/src/theme/toast/toast_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonToastColors extends ThemeExtension with DiagnosticableTreeMixin { /// The background color of the MoonToast light variant. final Color lightVariantBackgroundColor; /// The background color of the MoonToast dark variant. final Color darkVariantBackgroundColor; /// The text color of the MoonToast light variant. final Color lightVariantTextColor; /// The text color of the MoonToast dark variant. final Color darkVariantTextColor; /// The icon color of the MoonToast light variant. final Color lightVariantIconColor; /// The icon color of the MoonToast dark variant. final Color darkVariantIconColor; const MoonToastColors({ required this.lightVariantBackgroundColor, required this.darkVariantBackgroundColor, required this.lightVariantTextColor, required this.darkVariantTextColor, required this.lightVariantIconColor, required this.darkVariantIconColor, }); @override MoonToastColors copyWith({ Color? lightVariantBackgroundColor, Color? darkVariantBackgroundColor, Color? lightVariantTextColor, Color? darkVariantTextColor, Color? lightVariantIconColor, Color? darkVariantIconColor, }) { return MoonToastColors( lightVariantBackgroundColor: lightVariantBackgroundColor ?? this.lightVariantBackgroundColor, darkVariantBackgroundColor: darkVariantBackgroundColor ?? this.darkVariantBackgroundColor, lightVariantTextColor: lightVariantTextColor ?? this.lightVariantTextColor, darkVariantTextColor: darkVariantTextColor ?? this.darkVariantTextColor, lightVariantIconColor: lightVariantIconColor ?? this.lightVariantIconColor, darkVariantIconColor: darkVariantIconColor ?? this.darkVariantIconColor, ); } @override MoonToastColors lerp(ThemeExtension? other, double t) { if (other is! MoonToastColors) return this; return MoonToastColors( lightVariantBackgroundColor: colorPremulLerp( lightVariantBackgroundColor, other.lightVariantBackgroundColor, t, )!, darkVariantBackgroundColor: colorPremulLerp( darkVariantBackgroundColor, other.darkVariantBackgroundColor, t, )!, lightVariantTextColor: colorPremulLerp( lightVariantTextColor, other.lightVariantTextColor, t, )!, darkVariantTextColor: colorPremulLerp( darkVariantTextColor, other.darkVariantTextColor, t, )!, lightVariantIconColor: colorPremulLerp( lightVariantIconColor, other.lightVariantIconColor, t, )!, darkVariantIconColor: colorPremulLerp( darkVariantIconColor, other.darkVariantIconColor, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonToastColors", ), ) ..add( ColorProperty( "lightVariantBackgroundColor", lightVariantBackgroundColor, ), ) ..add( ColorProperty( "darkVariantBackgroundColor", darkVariantBackgroundColor, ), ) ..add(ColorProperty("lightVariantTextColor", lightVariantTextColor)) ..add(ColorProperty("darkVariantTextColor", darkVariantTextColor)) ..add(ColorProperty("lightVariantIconColor", lightVariantIconColor)) ..add(ColorProperty("darkVariantIconColor", darkVariantIconColor)); } } ================================================ FILE: lib/src/theme/toast/toast_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonToastProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonToast. final BorderRadiusGeometry borderRadius; /// The horizontal gap between the leading, label and trailing widgets of the /// MoonToast. final double horizontalGap; /// The vertical gap between the MoonToast header and content. final double verticalGap; /// The duration to display the MoonToast. final Duration displayDuration; /// The duration of the MoonToast transition animation (slide in or out). final Duration transitionDuration; /// The curve of the MoonToast transition animation (slide in or out). final Curve transitionCurve; /// The padding of the MoonToast content. final EdgeInsetsGeometry contentPadding; /// The text style of the MoonToast. final TextStyle textStyle; const MoonToastProperties({ required this.borderRadius, required this.horizontalGap, required this.verticalGap, required this.displayDuration, required this.transitionDuration, required this.transitionCurve, required this.contentPadding, required this.textStyle, }); @override MoonToastProperties copyWith({ BorderRadiusGeometry? borderRadius, double? horizontalGap, double? verticalGap, Duration? displayDuration, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? contentPadding, TextStyle? textStyle, }) { return MoonToastProperties( borderRadius: borderRadius ?? this.borderRadius, horizontalGap: horizontalGap ?? this.horizontalGap, verticalGap: verticalGap ?? this.verticalGap, displayDuration: displayDuration ?? this.displayDuration, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, contentPadding: contentPadding ?? this.contentPadding, textStyle: textStyle ?? this.textStyle, ); } @override MoonToastProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonToastProperties) return this; return MoonToastProperties( borderRadius: BorderRadiusGeometry.lerp( borderRadius, other.borderRadius, t, )!, horizontalGap: lerpDouble(horizontalGap, other.horizontalGap, t)!, verticalGap: lerpDouble(verticalGap, other.verticalGap, t)!, displayDuration: lerpDuration(displayDuration, other.displayDuration, t), transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonToastProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("horizontalGap", horizontalGap), ) ..add( DiagnosticsProperty("displayDuration", displayDuration), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty( "contentPadding", contentPadding, ), ) ..add( DiagnosticsProperty( "textStyle", textStyle, ), ); } } ================================================ FILE: lib/src/theme/toast/toast_shadows.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonToastShadows extends ThemeExtension with DiagnosticableTreeMixin { /// The list of shadows applied to the MoonToast. final List toastShadows; const MoonToastShadows({required this.toastShadows}); @override MoonToastShadows copyWith({List? toastShadows}) { return MoonToastShadows( toastShadows: toastShadows ?? this.toastShadows, ); } @override MoonToastShadows lerp(ThemeExtension? other, double t) { if (other is! MoonToastShadows) return this; return MoonToastShadows( toastShadows: BoxShadow.lerpList(toastShadows, other.toastShadows, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonToastShadows")) ..add(DiagnosticsProperty>("toastShadows", toastShadows)); } } ================================================ FILE: lib/src/theme/toast/toast_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/toast/toast_colors.dart'; import 'package:moon_design/src/theme/toast/toast_properties.dart'; import 'package:moon_design/src/theme/toast/toast_shadows.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; @immutable class MoonToastTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonToast. final MoonToastColors colors; /// The properties of the MoonToast. final MoonToastProperties properties; /// The shadows of the MoonToast. final MoonToastShadows shadows; MoonToastTheme({ required this.tokens, MoonToastColors? colors, MoonToastProperties? properties, MoonToastShadows? shadows, }) : colors = colors ?? MoonToastColors( lightVariantBackgroundColor: tokens.colors.goku, darkVariantBackgroundColor: tokens.complementaryColors.goku, lightVariantTextColor: tokens.colors.bulma, darkVariantTextColor: tokens.complementaryColors.bulma, lightVariantIconColor: tokens.colors.bulma, darkVariantIconColor: tokens.complementaryColors.bulma, ), properties = properties ?? MoonToastProperties( borderRadius: tokens.borders.surfaceSm, horizontalGap: tokens.sizes.x2s, verticalGap: tokens.sizes.x3s, displayDuration: const Duration(seconds: 3), transitionDuration: tokens.transitions.defaultTransitionDuration, transitionCurve: tokens.transitions.defaultTransitionCurve, contentPadding: EdgeInsets.all(tokens.sizes.x2s), textStyle: tokens.typography.body.textDefault, ), shadows = shadows ?? MoonToastShadows(toastShadows: tokens.shadows.lg); @override MoonToastTheme copyWith({ MoonTokens? tokens, MoonToastColors? colors, MoonToastProperties? properties, MoonToastShadows? shadows, }) { return MoonToastTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, ); } @override MoonToastTheme lerp(ThemeExtension? other, double t) { if (other is! MoonToastTheme) return this; return MoonToastTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add(DiagnosticsProperty("type", "MoonToastTheme")) ..add(DiagnosticsProperty("tokens", tokens)) ..add(DiagnosticsProperty("colors", colors)) ..add(DiagnosticsProperty("properties", properties)) ..add(DiagnosticsProperty("shadows", shadows)); } } ================================================ FILE: lib/src/theme/tokens/borders.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonBorders extends ThemeExtension with DiagnosticableTreeMixin { static const borders = MoonBorders( interactiveXs: BorderRadius.all(Radius.circular(4)), interactiveSm: BorderRadius.all(Radius.circular(8)), interactiveMd: BorderRadius.all(Radius.circular(12)), surfaceXs: BorderRadius.all(Radius.circular(4)), surfaceSm: BorderRadius.all(Radius.circular(8)), surfaceMd: BorderRadius.all(Radius.circular(12)), surfaceLg: BorderRadius.all(Radius.circular(16)), defaultBorderWidth: 1, activeBorderWidth: 1.5, ); /// The extra small interactive radius. final BorderRadiusGeometry interactiveXs; /// The small interactive radius. final BorderRadiusGeometry interactiveSm; /// The medium interactive radius. final BorderRadiusGeometry interactiveMd; /// The extra small surface radius. final BorderRadiusGeometry surfaceXs; /// The small surface radius. final BorderRadiusGeometry surfaceSm; /// The medium surface radius. final BorderRadiusGeometry surfaceMd; /// The large surface radius. final BorderRadiusGeometry surfaceLg; /// The default border width. final double defaultBorderWidth; /// The active border width. final double activeBorderWidth; const MoonBorders({ required this.interactiveXs, required this.interactiveSm, required this.interactiveMd, required this.surfaceXs, required this.surfaceSm, required this.surfaceMd, required this.surfaceLg, required this.defaultBorderWidth, required this.activeBorderWidth, }); @override MoonBorders copyWith({ BorderRadiusGeometry? interactiveXs, BorderRadiusGeometry? interactiveSm, BorderRadiusGeometry? interactiveMd, BorderRadiusGeometry? surfaceXs, BorderRadiusGeometry? surfaceSm, BorderRadiusGeometry? surfaceMd, BorderRadiusGeometry? surfaceLg, double? defaultBorderWidth, double? activeBorderWidth, }) { return MoonBorders( interactiveXs: interactiveXs ?? this.interactiveXs, interactiveSm: interactiveSm ?? this.interactiveSm, interactiveMd: interactiveMd ?? this.interactiveMd, surfaceXs: surfaceXs ?? this.surfaceXs, surfaceSm: surfaceSm ?? this.surfaceSm, surfaceMd: surfaceMd ?? this.surfaceMd, surfaceLg: surfaceLg ?? this.surfaceLg, defaultBorderWidth: defaultBorderWidth ?? this.defaultBorderWidth, activeBorderWidth: activeBorderWidth ?? this.activeBorderWidth, ); } @override MoonBorders lerp(ThemeExtension? other, double t) { if (other is! MoonBorders) return this; return MoonBorders( interactiveXs: BorderRadiusGeometry.lerp(interactiveXs, other.interactiveXs, t)!, interactiveSm: BorderRadiusGeometry.lerp(interactiveSm, other.interactiveSm, t)!, interactiveMd: BorderRadiusGeometry.lerp(interactiveMd, other.interactiveMd, t)!, surfaceXs: BorderRadiusGeometry.lerp(surfaceXs, other.surfaceXs, t)!, surfaceSm: BorderRadiusGeometry.lerp(surfaceSm, other.surfaceSm, t)!, surfaceMd: BorderRadiusGeometry.lerp(surfaceMd, other.surfaceMd, t)!, surfaceLg: BorderRadiusGeometry.lerp(surfaceLg, other.surfaceLg, t)!, defaultBorderWidth: lerpDouble(defaultBorderWidth, other.defaultBorderWidth, t)!, activeBorderWidth: lerpDouble(activeBorderWidth, other.activeBorderWidth, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonBorders", ), ) ..add( DiagnosticsProperty( "interactiveXs", interactiveXs, ), ) ..add( DiagnosticsProperty( "interactiveSm", interactiveSm, ), ) ..add( DiagnosticsProperty( "interactiveMd", interactiveMd, ), ) ..add(DiagnosticsProperty("surfaceXs", surfaceXs)) ..add(DiagnosticsProperty("surfaceSm", surfaceSm)) ..add(DiagnosticsProperty("surfaceMd", surfaceMd)) ..add(DiagnosticsProperty("surfaceLg", surfaceLg)) ..add(DoubleProperty("defaultBorderWidth", defaultBorderWidth)) ..add(DoubleProperty("activeBorderWidth", activeBorderWidth)); } } ================================================ FILE: lib/src/theme/tokens/opacities.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonOpacities extends ThemeExtension with DiagnosticableTreeMixin { static const opacities = MoonOpacities(disabled: 0.6); /// The disabled opacity value. final double disabled; const MoonOpacities({required this.disabled}); @override MoonOpacities copyWith({double? disabled}) { return MoonOpacities( disabled: disabled ?? this.disabled, ); } @override MoonOpacities lerp(ThemeExtension? other, double t) { if (other is! MoonOpacities) return this; return MoonOpacities( disabled: lerpDouble(disabled, other.disabled, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonOpacities")) ..add(DoubleProperty("disabled", disabled)); } } ================================================ FILE: lib/src/theme/tokens/shadows.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonShadows extends ThemeExtension with DiagnosticableTreeMixin { static const light = MoonShadows( sm: [ BoxShadow( color: Color(0x66000000), blurRadius: 1, ), BoxShadow( color: Color(0x28000000), blurRadius: 6, offset: Offset(0, 6), spreadRadius: -6, ), ], md: [ BoxShadow( color: Color(0x66000000), blurRadius: 1, ), BoxShadow( color: Color(0x28000000), blurRadius: 12, offset: Offset(0, 12), ), ], lg: [ BoxShadow( color: Color(0x66000000), blurRadius: 1, ), BoxShadow( color: Color(0x28000000), blurRadius: 24, offset: Offset(0, 8), ), ], xl: [ BoxShadow( color: Color(0x33000000), blurRadius: 1, ), BoxShadow( color: Color(0x1E000000), blurRadius: 32, ), BoxShadow( color: Color(0x14000000), blurRadius: 32, offset: Offset(0, 32), ), ], ); static const dark = MoonShadows( sm: [ BoxShadow( color: Color(0x8E000000), blurRadius: 1, ), BoxShadow( color: Color(0xA3000000), blurRadius: 6, offset: Offset(0, 6), spreadRadius: -6, ), ], md: [ BoxShadow( color: Color(0x8E000000), blurRadius: 1, ), BoxShadow( color: Color(0xA3000000), blurRadius: 12, offset: Offset(0, 12), ), ], lg: [ BoxShadow( color: Color(0x8E000000), blurRadius: 1, ), BoxShadow( color: Color(0xA3000000), blurRadius: 24, offset: Offset(0, 24), ), ], xl: [ BoxShadow( color: Color(0xB7000000), blurRadius: 1, ), BoxShadow( color: Color(0xE0000000), blurRadius: 48, offset: Offset(0, 48), ), ], ); /// The small shadow. final List sm; /// The medium shadow. final List md; /// The large shadow. final List lg; /// The extra large shadow. final List xl; const MoonShadows({ required this.sm, required this.md, required this.lg, required this.xl, }); @override MoonShadows copyWith({ List? sm, List? md, List? lg, List? xl, }) { return MoonShadows( sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, xl: xl ?? this.xl, ); } @override MoonShadows lerp(ThemeExtension? other, double t) { if (other is! MoonShadows) return this; return MoonShadows( sm: BoxShadow.lerpList(sm, other.sm, t)!, md: BoxShadow.lerpList(md, other.md, t)!, lg: BoxShadow.lerpList(lg, other.lg, t)!, xl: BoxShadow.lerpList(xl, other.xl, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonShadows")) ..add(DiagnosticsProperty>("sm", sm)) ..add(DiagnosticsProperty>("md", md)) ..add(DiagnosticsProperty>("lg", lg)) ..add(DiagnosticsProperty>("xl", xl)); } } ================================================ FILE: lib/src/theme/tokens/sizes.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonSizes extends ThemeExtension with DiagnosticableTreeMixin { static const sizes = MoonSizes( x6s: 2, x5s: 4, x4s: 8, x3s: 12, x2s: 16, xs: 24, sm: 32, md: 40, lg: 48, xl: 56, x2l: 64, ); /// The (6x) extra small size. final double x6s; /// The (5x) extra small size. final double x5s; /// The (4x) extra small size. final double x4s; /// The (3x) extra small size. final double x3s; /// The (2x) extra small size. final double x2s; /// The extra small size. final double xs; /// The small size. final double sm; /// The medium size. final double md; /// The large size. final double lg; /// The extra large size. final double xl; /// The (2x) extra large size. final double x2l; const MoonSizes({ required this.x6s, required this.x5s, required this.x4s, required this.x3s, required this.x2s, required this.xs, required this.sm, required this.md, required this.lg, required this.xl, required this.x2l, }); @override MoonSizes copyWith({ double? x6s, double? x5s, double? x4s, double? x3s, double? x2s, double? xs, double? sm, double? md, double? lg, double? xl, double? x2l, }) { return MoonSizes( x6s: x6s ?? this.x6s, x5s: x5s ?? this.x5s, x4s: x4s ?? this.x4s, x3s: x3s ?? this.x3s, x2s: x2s ?? this.x2s, xs: xs ?? this.xs, sm: sm ?? this.sm, md: md ?? this.md, lg: lg ?? this.lg, xl: xl ?? this.xl, x2l: x2l ?? this.x2l, ); } @override MoonSizes lerp(ThemeExtension? other, double t) { if (other is! MoonSizes) return this; return MoonSizes( x6s: lerpDouble(x6s, other.x6s, t)!, x5s: lerpDouble(x5s, other.x5s, t)!, x4s: lerpDouble(x4s, other.x4s, t)!, x3s: lerpDouble(x3s, other.x3s, t)!, x2s: lerpDouble(x2s, other.x2s, t)!, xs: lerpDouble(xs, other.xs, t)!, sm: lerpDouble(sm, other.sm, t)!, md: lerpDouble(md, other.md, t)!, lg: lerpDouble(lg, other.lg, t)!, xl: lerpDouble(xl, other.xl, t)!, x2l: lerpDouble(x2l, other.x2l, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonSizes")) ..add(DoubleProperty("x6s", x6s)) ..add(DoubleProperty("x5s", x5s)) ..add(DoubleProperty("x4s", x4s)) ..add(DoubleProperty("x3s", x3s)) ..add(DoubleProperty("x2s", x2s)) ..add(DoubleProperty("xs", xs)) ..add(DoubleProperty("sm", sm)) ..add(DoubleProperty("md", md)) ..add(DoubleProperty("lg", lg)) ..add(DoubleProperty("xl", xl)) ..add(DoubleProperty("x2l", x2l)); } } ================================================ FILE: lib/src/theme/tokens/tokens.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_tokens/moon_tokens.dart'; @immutable class MoonTokens extends ThemeExtension with DiagnosticableTreeMixin { static const light = MoonTokens( borders: MoonBorders.borders, colors: MoonColors.light, complementaryColors: MoonColors.dark, opacities: MoonOpacities.opacities, shadows: MoonShadows.light, sizes: MoonSizes.sizes, transitions: MoonTransitions.transitions, typography: MoonTypography.typography, ); static const dark = MoonTokens( borders: MoonBorders.borders, colors: MoonColors.dark, complementaryColors: MoonColors.light, opacities: MoonOpacities.opacities, shadows: MoonShadows.dark, sizes: MoonSizes.sizes, transitions: MoonTransitions.transitions, typography: MoonTypography.typography, ); /// The borders of the Moon Design System. final MoonBorders borders; /// The colors of the Moon Design System. final MoonColors colors; /// The colors of the Moon Design System that are from complementary theme /// (light -> dark, dark -> light). final MoonColors complementaryColors; /// The opacities of the Moon Design System. final MoonOpacities opacities; /// The shadows of the Moon Design System. final MoonShadows shadows; /// The sizes of the Moon Design System. final MoonSizes sizes; final MoonTransitions transitions; /// The typography of the Moon Design System. final MoonTypography typography; const MoonTokens({ required this.borders, required this.colors, required this.complementaryColors, required this.opacities, required this.shadows, required this.sizes, required this.transitions, required this.typography, }); @override MoonTokens copyWith({ MoonBorders? borders, MoonColors? colors, MoonColors? complementaryColors, MoonOpacities? opacities, MoonShadows? shadows, MoonSizes? sizes, MoonTransitions? transitions, MoonTypography? typography, }) { return MoonTokens( borders: borders ?? this.borders, colors: colors ?? this.colors, complementaryColors: complementaryColors ?? this.complementaryColors, opacities: opacities ?? this.opacities, shadows: shadows ?? this.shadows, sizes: sizes ?? this.sizes, transitions: transitions ?? this.transitions, typography: typography ?? this.typography, ); } @override MoonTokens lerp(ThemeExtension? other, double t) { if (other is! MoonTokens) return this; return MoonTokens( borders: borders.lerp(other.borders, t), colors: colors.lerp(other.colors, t), complementaryColors: complementaryColors.lerp(other.complementaryColors, t), opacities: opacities.lerp(other.opacities, t), shadows: shadows.lerp(other.shadows, t), sizes: sizes.lerp(other.sizes, t), transitions: transitions.lerp(other.transitions, t), typography: typography.lerp(other.typography, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTokens")) ..add(DiagnosticsProperty("MoonBorders", borders)) ..add(DiagnosticsProperty("MoonColors", colors)) ..add(DiagnosticsProperty("MoonColors", complementaryColors)) ..add(DiagnosticsProperty("MoonOpacities", opacities)) ..add(DiagnosticsProperty("MoonShadows", shadows)) ..add(DiagnosticsProperty("MoonSizes", sizes)) ..add( DiagnosticsProperty( "MoonTransitions", transitions, ), ) ..add( DiagnosticsProperty( "MoonTypography", typography, ), ); } } ================================================ FILE: lib/src/theme/tokens/transitions.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTransitions extends ThemeExtension with DiagnosticableTreeMixin { static const transitions = MoonTransitions( defaultTransitionDuration: Duration(milliseconds: 200), defaultTransitionCurve: Curves.easeInOutCubic, ); /// The default transition duration. final Duration defaultTransitionDuration; /// The default transition curve. final Curve defaultTransitionCurve; const MoonTransitions({ required this.defaultTransitionDuration, required this.defaultTransitionCurve, }); @override MoonTransitions copyWith({ Duration? defaultTransitionDuration, Curve? defaultTransitionCurve, }) { return MoonTransitions( defaultTransitionDuration: defaultTransitionDuration ?? this.defaultTransitionDuration, defaultTransitionCurve: defaultTransitionCurve ?? this.defaultTransitionCurve, ); } @override MoonTransitions lerp(ThemeExtension? other, double t) { if (other is! MoonTransitions) return this; return MoonTransitions( defaultTransitionDuration: lerpDuration( defaultTransitionDuration, other.defaultTransitionDuration, t, ), defaultTransitionCurve: other.defaultTransitionCurve, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty( "type", "MoonTransitions", ), ) ..add( DiagnosticsProperty( "defaultTransitionDuration", defaultTransitionDuration, ), ) ..add( DiagnosticsProperty( "defaultTransitionCurve", defaultTransitionCurve, ), ); } } ================================================ FILE: lib/src/theme/tokens/typography/text_styles.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTextStyles extends ThemeExtension with DiagnosticableTreeMixin { static const _semiBold = FontWeight.w600; static const _semiBoldVariation = [FontVariation('wght', 600)]; static const body = MoonTextStyles( textDefault: TextStyle( fontSize: 14, ), text6: TextStyle( fontSize: 6, ), text8: TextStyle( fontSize: 8, ), text9: TextStyle( fontSize: 9, ), text10: TextStyle( fontSize: 10, ), text12: TextStyle( fontSize: 12, ), text14: TextStyle( fontSize: 14, ), text16: TextStyle( fontSize: 16, ), text18: TextStyle( fontSize: 18, ), text20: TextStyle( fontSize: 20, ), text24: TextStyle( fontSize: 24, ), text32: TextStyle( fontSize: 32, ), text40: TextStyle( fontSize: 40, ), text48: TextStyle( fontSize: 48, ), text56: TextStyle( fontSize: 56, ), text64: TextStyle( fontSize: 64, ), text72: TextStyle( fontSize: 72, ), ); static const heading = MoonTextStyles( textDefault: TextStyle( fontSize: 14, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text6: TextStyle( fontSize: 6, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text8: TextStyle( fontSize: 8, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text9: TextStyle( fontSize: 9, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text10: TextStyle( fontSize: 10, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text12: TextStyle( fontSize: 12, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text14: TextStyle( fontSize: 14, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text16: TextStyle( fontSize: 16, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text18: TextStyle( fontSize: 18, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text20: TextStyle( fontSize: 20, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text24: TextStyle( fontSize: 24, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text32: TextStyle( fontSize: 32, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text40: TextStyle( fontSize: 40, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text48: TextStyle( fontSize: 48, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text56: TextStyle( fontSize: 56, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text64: TextStyle( fontSize: 64, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), text72: TextStyle( fontSize: 72, fontVariations: _semiBoldVariation, fontWeight: _semiBold, ), ); /// The default text size. final TextStyle textDefault; /// The text size 6. final TextStyle text6; /// The text size 8. final TextStyle text8; /// The text size 9. final TextStyle text9; /// The text size 10. final TextStyle text10; /// The text size 12. final TextStyle text12; /// The text size 14. final TextStyle text14; /// The text size 16. final TextStyle text16; /// The text size 18. final TextStyle text18; /// The text size 20. final TextStyle text20; /// The text size 24. final TextStyle text24; /// The text size 32. final TextStyle text32; /// The text size 40. final TextStyle text40; /// The text size 48. final TextStyle text48; /// The text size 56. final TextStyle text56; /// The text size 64. final TextStyle text64; /// The text size 72. final TextStyle text72; const MoonTextStyles({ required this.textDefault, required this.text6, required this.text8, required this.text9, required this.text10, required this.text12, required this.text14, required this.text16, required this.text18, required this.text20, required this.text24, required this.text32, required this.text40, required this.text48, required this.text56, required this.text64, required this.text72, }); /// Creates a copy of the text theme but with the given field replaced in each of the individual text styles. MoonTextStyles apply({ Color? backgroundColor, Color? color, Color? decorationColor, double decorationThicknessDelta = 0.0, double decorationThicknessFactor = 1.0, double fontSizeDelta = 0.0, double fontSizeFactor = 1.0, double heightDelta = 0.0, double heightFactor = 1.0, double letterSpacingDelta = 0.0, double letterSpacingFactor = 1.0, FontStyle? fontStyle, int fontWeightDelta = 0, List? fontFeatures, List? fontVariations, List? shadows, List? fontFamilyFallback, Locale? locale, String? fontFamily, String? package, TextBaseline? textBaseline, TextDecoration? decoration, TextDecorationStyle? decorationStyle, TextLeadingDistribution? leadingDistribution, TextOverflow? overflow, }) { TextStyle applyProps(TextStyle style) => style.apply( backgroundColor: backgroundColor, decorationThicknessDelta: decorationThicknessDelta, decorationThicknessFactor: decorationThicknessFactor, color: color, decorationColor: decorationColor, fontSizeDelta: fontSizeDelta, fontSizeFactor: fontSizeFactor, heightDelta: heightDelta, heightFactor: heightFactor, letterSpacingDelta: letterSpacingDelta, letterSpacingFactor: letterSpacingFactor, fontFeatures: fontFeatures, fontStyle: fontStyle, fontWeightDelta: fontWeightDelta, fontVariations: fontVariations, shadows: shadows, fontFamilyFallback: fontFamilyFallback, locale: locale, fontFamily: fontFamily, package: package, textBaseline: textBaseline, decoration: decoration, decorationStyle: decorationStyle, leadingDistribution: leadingDistribution, overflow: overflow, ); return MoonTextStyles( textDefault: applyProps(textDefault), text6: applyProps(text6), text8: applyProps(text8), text9: applyProps(text9), text10: applyProps(text10), text12: applyProps(text12), text14: applyProps(text14), text16: applyProps(text16), text18: applyProps(text18), text20: applyProps(text20), text24: applyProps(text24), text32: applyProps(text32), text40: applyProps(text40), text48: applyProps(text48), text56: applyProps(text56), text64: applyProps(text64), text72: applyProps(text72), ); } @override MoonTextStyles copyWith({ TextStyle? textDefault, TextStyle? text6, TextStyle? text8, TextStyle? text9, TextStyle? text10, TextStyle? text12, TextStyle? text14, TextStyle? text16, TextStyle? text18, TextStyle? text20, TextStyle? text24, TextStyle? text32, TextStyle? text40, TextStyle? text48, TextStyle? text56, TextStyle? text64, TextStyle? text72, }) { return MoonTextStyles( textDefault: textDefault ?? this.textDefault, text6: text6 ?? this.text6, text8: text8 ?? this.text8, text9: text9 ?? this.text9, text10: text10 ?? this.text10, text12: text12 ?? this.text12, text14: text14 ?? this.text14, text16: text16 ?? this.text16, text18: text18 ?? this.text18, text20: text20 ?? this.text20, text24: text24 ?? this.text24, text32: text32 ?? this.text32, text40: text40 ?? this.text40, text48: text48 ?? this.text48, text56: text56 ?? this.text56, text64: text64 ?? this.text64, text72: text72 ?? this.text72, ); } @override MoonTextStyles lerp(ThemeExtension? other, double t) { if (other is! MoonTextStyles) return this; return MoonTextStyles( textDefault: TextStyle.lerp(textDefault, other.textDefault, t)!, text6: TextStyle.lerp(text6, other.text6, t)!, text8: TextStyle.lerp(text8, other.text8, t)!, text9: TextStyle.lerp(text9, other.text9, t)!, text10: TextStyle.lerp(text10, other.text10, t)!, text12: TextStyle.lerp(text12, other.text12, t)!, text14: TextStyle.lerp(text14, other.text14, t)!, text16: TextStyle.lerp(text16, other.text16, t)!, text18: TextStyle.lerp(text18, other.text18, t)!, text20: TextStyle.lerp(text20, other.text20, t)!, text24: TextStyle.lerp(text24, other.text24, t)!, text32: TextStyle.lerp(text32, other.text32, t)!, text40: TextStyle.lerp(text40, other.text40, t)!, text48: TextStyle.lerp(text48, other.text48, t)!, text56: TextStyle.lerp(text56, other.text56, t)!, text64: TextStyle.lerp(text64, other.text64, t)!, text72: TextStyle.lerp(text72, other.text72, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTextStyles")) ..add(DiagnosticsProperty("textDefault", textDefault)) ..add(DiagnosticsProperty("text6", text6)) ..add(DiagnosticsProperty("text8", text8)) ..add(DiagnosticsProperty("text9", text9)) ..add(DiagnosticsProperty("text10", text10)) ..add(DiagnosticsProperty("text12", text12)) ..add(DiagnosticsProperty("text14", text14)) ..add(DiagnosticsProperty("text16", text16)) ..add(DiagnosticsProperty("text18", text18)) ..add(DiagnosticsProperty("text20", text20)) ..add(DiagnosticsProperty("text24", text24)) ..add(DiagnosticsProperty("text32", text32)) ..add(DiagnosticsProperty("text40", text40)) ..add(DiagnosticsProperty("text48", text48)) ..add(DiagnosticsProperty("text56", text56)) ..add(DiagnosticsProperty("text64", text64)) ..add(DiagnosticsProperty("text72", text72)); } } ================================================ FILE: lib/src/theme/tokens/typography/typography.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tokens/typography/text_styles.dart'; @immutable class MoonTypography extends ThemeExtension with DiagnosticableTreeMixin { static const typography = MoonTypography( body: MoonTextStyles.body, heading: MoonTextStyles.heading, ); /// The text styles for the body. final MoonTextStyles body; /// The text styles for the heading. final MoonTextStyles heading; const MoonTypography({required this.body, required this.heading}); @override MoonTypography copyWith({MoonTextStyles? body, MoonTextStyles? heading}) { return MoonTypography( body: body ?? this.body, heading: heading ?? this.heading, ); } @override MoonTypography lerp(ThemeExtension? other, double t) { if (other is! MoonTypography) return this; return MoonTypography( body: body.lerp(other.body, t), heading: heading.lerp(other.heading, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTypography")) ..add(DiagnosticsProperty("body", body)) ..add(DiagnosticsProperty("heading", heading)); } } ================================================ FILE: lib/src/theme/tooltip/tooltip_colors.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; @immutable class MoonTooltipColors extends ThemeExtension with DiagnosticableTreeMixin { /// The text color of the MoonTooltip. final Color textColor; /// The icon color of the MoonTooltip. final Color iconColor; /// The background color of the MoonTooltip. final Color backgroundColor; const MoonTooltipColors({ required this.textColor, required this.iconColor, required this.backgroundColor, }); @override MoonTooltipColors copyWith({ Color? textColor, Color? iconColor, Color? backgroundColor, }) { return MoonTooltipColors( textColor: textColor ?? this.textColor, iconColor: iconColor ?? this.iconColor, backgroundColor: backgroundColor ?? this.backgroundColor, ); } @override MoonTooltipColors lerp(ThemeExtension? other, double t) { if (other is! MoonTooltipColors) return this; return MoonTooltipColors( textColor: colorPremulLerp(textColor, other.textColor, t)!, iconColor: colorPremulLerp(iconColor, other.iconColor, t)!, backgroundColor: colorPremulLerp( backgroundColor, other.backgroundColor, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add(DiagnosticsProperty("type", "MoonTooltipColors")) ..add(ColorProperty("textColor", textColor)) ..add(ColorProperty("iconColor", iconColor)) ..add(ColorProperty("backgroundColor", backgroundColor)); } } ================================================ FILE: lib/src/theme/tooltip/tooltip_properties.dart ================================================ import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTooltipProperties extends ThemeExtension with DiagnosticableTreeMixin { /// The border radius of the MoonTooltip. final BorderRadiusGeometry borderRadius; /// The base width of the MoonTooltip arrow (tail). final double arrowBaseWidth; /// The length of the MoonTooltip arrow (tail). final double arrowLength; /// The distance from the tip of the MoonTooltip arrow (tail) to the target /// widget. final double arrowTipDistance; /// The duration of the MoonTooltip transition animation (fade in or out). final Duration transitionDuration; /// The curve of the MoonTooltip transition animation (fade in or out). final Curve transitionCurve; /// The padding of the MoonTooltip content. final EdgeInsetsGeometry contentPadding; /// The text style of the MoonTooltip. final TextStyle textStyle; const MoonTooltipProperties({ required this.borderRadius, required this.arrowBaseWidth, required this.arrowLength, required this.arrowTipDistance, required this.transitionDuration, required this.transitionCurve, required this.contentPadding, required this.textStyle, }); @override MoonTooltipProperties copyWith({ BorderRadiusGeometry? borderRadius, double? arrowBaseWidth, double? arrowLength, double? arrowTipDistance, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? contentPadding, TextStyle? textStyle, }) { return MoonTooltipProperties( borderRadius: borderRadius ?? this.borderRadius, arrowBaseWidth: arrowBaseWidth ?? this.arrowBaseWidth, arrowLength: arrowLength ?? this.arrowLength, arrowTipDistance: arrowTipDistance ?? this.arrowTipDistance, transitionDuration: transitionDuration ?? this.transitionDuration, transitionCurve: transitionCurve ?? this.transitionCurve, contentPadding: contentPadding ?? this.contentPadding, textStyle: textStyle ?? this.textStyle, ); } @override MoonTooltipProperties lerp( ThemeExtension? other, double t, ) { if (other is! MoonTooltipProperties) return this; return MoonTooltipProperties( borderRadius: BorderRadiusGeometry.lerp(borderRadius, other.borderRadius, t)!, arrowBaseWidth: lerpDouble(arrowBaseWidth, other.arrowBaseWidth, t)!, arrowLength: lerpDouble(arrowLength, other.arrowLength, t)!, arrowTipDistance: lerpDouble(arrowTipDistance, other.arrowTipDistance, t)!, transitionDuration: lerpDuration(transitionDuration, other.transitionDuration, t), transitionCurve: other.transitionCurve, contentPadding: EdgeInsetsGeometry.lerp(contentPadding, other.contentPadding, t)!, textStyle: TextStyle.lerp(textStyle, other.textStyle, t)!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonTooltipProperties"), ) ..add( DiagnosticsProperty("borderRadius", borderRadius), ) ..add( DoubleProperty("arrowBaseWidth", arrowBaseWidth), ) ..add( DoubleProperty("arrowLength", arrowLength), ) ..add( DoubleProperty("arrowTipDistance", arrowTipDistance), ) ..add( DiagnosticsProperty("transitionDuration", transitionDuration), ) ..add( DiagnosticsProperty("transitionCurve", transitionCurve), ) ..add( DiagnosticsProperty( "contentPadding", contentPadding, ), ) ..add( DiagnosticsProperty( "textStyle", textStyle, ), ); } } ================================================ FILE: lib/src/theme/tooltip/tooltip_shadows.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; @immutable class MoonTooltipShadows extends ThemeExtension with DiagnosticableTreeMixin { /// The list of shadows applied to the MoonTooltip. final List tooltipShadows; const MoonTooltipShadows({required this.tooltipShadows}); @override MoonTooltipShadows copyWith({List? tooltipShadows}) { return MoonTooltipShadows( tooltipShadows: tooltipShadows ?? this.tooltipShadows, ); } @override MoonTooltipShadows lerp(ThemeExtension? other, double t) { if (other is! MoonTooltipShadows) return this; return MoonTooltipShadows( tooltipShadows: BoxShadow.lerpList( tooltipShadows, other.tooltipShadows, t, )!, ); } @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties ..add( DiagnosticsProperty("type", "MoonTooltipShadows"), ) ..add( DiagnosticsProperty>("tooltipShadows", tooltipShadows), ); } } ================================================ FILE: lib/src/theme/tooltip/tooltip_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tooltip/tooltip_colors.dart'; import 'package:moon_design/src/theme/tooltip/tooltip_properties.dart'; import 'package:moon_design/src/theme/tooltip/tooltip_shadows.dart'; @immutable class MoonTooltipTheme extends ThemeExtension with DiagnosticableTreeMixin { /// The tokens of the Moon Design System. final MoonTokens tokens; /// The colors of the MoonTooltip. final MoonTooltipColors colors; /// The properties of the MoonTooltip. final MoonTooltipProperties properties; /// The shadows of the MoonTooltip. final MoonTooltipShadows shadows; MoonTooltipTheme({ required this.tokens, MoonTooltipColors? colors, MoonTooltipProperties? properties, MoonTooltipShadows? shadows, }) : colors = colors ?? MoonTooltipColors( textColor: tokens.colors.textPrimary, iconColor: tokens.colors.iconPrimary, backgroundColor: tokens.colors.goku, ), properties = properties ?? MoonTooltipProperties( borderRadius: tokens.borders.interactiveXs, arrowBaseWidth: tokens.sizes.x2s, arrowLength: tokens.sizes.x4s, arrowTipDistance: tokens.sizes.x4s, transitionDuration: const Duration(milliseconds: 150), transitionCurve: tokens.transitions.defaultTransitionCurve, contentPadding: EdgeInsets.all(tokens.sizes.x3s), textStyle: tokens.typography.body.text12, ), shadows = shadows ?? MoonTooltipShadows(tooltipShadows: tokens.shadows.sm); @override MoonTooltipTheme copyWith({ MoonTokens? tokens, MoonTooltipColors? colors, MoonTooltipProperties? properties, MoonTooltipShadows? shadows, }) { return MoonTooltipTheme( tokens: tokens ?? this.tokens, colors: colors ?? this.colors, properties: properties ?? this.properties, shadows: shadows ?? this.shadows, ); } @override MoonTooltipTheme lerp(ThemeExtension? other, double t) { if (other is! MoonTooltipTheme) return this; return MoonTooltipTheme( tokens: tokens.lerp(other.tokens, t), colors: colors.lerp(other.colors, t), properties: properties.lerp(other.properties, t), shadows: shadows.lerp(other.shadows, t), ); } @override void debugFillProperties(DiagnosticPropertiesBuilder diagnosticProperties) { super.debugFillProperties(diagnosticProperties); diagnosticProperties ..add( DiagnosticsProperty("type", "MoonTooltipTheme"), ) ..add( DiagnosticsProperty("tokens", tokens), ) ..add( DiagnosticsProperty("colors", colors), ) ..add( DiagnosticsProperty("properties", properties), ) ..add( DiagnosticsProperty("shadows", shadows), ); } } ================================================ FILE: lib/src/utils/brightness_from_pixels.dart ================================================ import 'dart:typed_data'; double getBrightnessFromBytes(Uint8List bytes) { /// Calculates the brightness score for each pixel in the image. /// /// For each pixel, a brightness score is assigned based on its color. /// Bright pixels receive a positive value, while dark pixels receive a /// negative value. A score close to 0 indicates a neutral grey color. /// /// The score is discounted if the pixel has transparency (alpha < 255). /// For example, a semi-transparent black pixel (#000000 with alpha < 255) /// has a negative score. double totalScore = 0.0; for (int i = 0; i < bytes.length; i += 4) { final r = bytes[i]; final g = bytes[i + 1]; final b = bytes[i + 2]; final a = bytes[i + 3]; final brightness = 0.2126 * r + 0.7152 * g + 0.0722 * b; // 0 to 255. final normalized = (brightness / 127.5 - 1) * (a / 255); // -1 to 1. totalScore += normalized; } return totalScore; } ================================================ FILE: lib/src/utils/color_premul_lerp.dart ================================================ import 'dart:ui'; Color _scaleAlpha(Color a, double factor) { return a.withAlpha((a.alpha * factor).round().clamp(0, 255)); } /// Workaround for Flutter's use of straight alpha instead of premultiplied /// alpha for color lerping. Color? colorPremulLerp(Color? a, Color? b, double t) { if (b == null) { if (a == null) { return null; } else { return _scaleAlpha(a, 1.0 - t); } } else { if (a == null) { return _scaleAlpha(b, t); } else { final weight1 = (1 - t) * a.opacity; final weight2 = t * b.opacity; final summedWeight = weight1 + weight2; final w = summedWeight > 0.000001 ? weight2 / summedWeight : 0.5; return Color.fromARGB( lerpDouble(a.alpha, b.alpha, t)!.toInt().clamp(0, 255), lerpDouble(a.red, b.red, w)!.toInt().clamp(0, 255), lerpDouble(a.green, b.green, w)!.toInt().clamp(0, 255), lerpDouble(a.blue, b.blue, w)!.toInt().clamp(0, 255), ); } } } ================================================ FILE: lib/src/utils/color_tween_premul.dart ================================================ import 'package:flutter/animation.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; // TODO: Remove this once Flutter transitions from straight alpha to premultiplied alpha for color lerping. class ColorTweenWithPremultipliedAlpha extends Tween { /// Creates a [Color] tween with premultiplied alpha. /// /// The [begin] and [end] properties may be null to indicate transparency. /// It's discouraged to pass [Colors.transparent] as it may result in fading /// in or out of black, which may not be the intended effect. /// Instead, prefer using null to indicate transparency. ColorTweenWithPremultipliedAlpha({super.begin, super.end}); /// Returns the value of this variable at the given animation clock value. @override Color? lerp(double t) => colorPremulLerp(begin, end, t); } ================================================ FILE: lib/src/utils/extensions.dart ================================================ import 'dart:ui'; import 'package:flutter/widgets.dart'; import 'package:moon_design/src/utils/squircle/squircle_border_radius.dart'; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; extension BuildContextX on BuildContext { /// Whether the dark mode is currently active. bool get isDarkMode { final brightness = MediaQuery.of(this).platformBrightness; return brightness == Brightness.dark; } } extension BorderRadiusGeometryX on BorderRadiusGeometry { /// Returns the MoonSquircleBorderRadius. MoonSquircleBorderRadius squircleBorderRadius(BuildContext context) { final borderRadius = resolve(Directionality.of(context)); return MoonSquircleBorderRadius.only( topLeft: MoonSquircleRadius(cornerRadius: borderRadius.topLeft.x), topRight: MoonSquircleRadius(cornerRadius: borderRadius.topRight.x), bottomLeft: MoonSquircleRadius(cornerRadius: borderRadius.bottomLeft.x), bottomRight: MoonSquircleRadius(cornerRadius: borderRadius.bottomRight.x), ); } } ================================================ FILE: lib/src/utils/linked_scroll_controller.dart ================================================ // Copyright 2018 the Dart project authors. // // Use of this source code is governed by a BSD-style // license that can be found in the LICENSE file or at // https://developers.google.com/open-source/licenses/bsd import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; /// Sets up a collection of scroll controllers that mirror their movements to /// each other. /// /// Controllers are added and returned via [addAndGet]. The initial offset /// of the newly created controller is synced to the current offset. /// It is important to dispose the controllers when they are no longer in /// use to prevent memory leaks and performance degradation. /// /// If controllers are disposed during the lifetime of this object, the /// corresponding scrollables should be given unique keys. Without unique keys, /// Flutter may reuse a disposed controller, potentially causing the controller /// offsets to fall out of sync. class LinkedScrollControllerGroup { LinkedScrollControllerGroup() { _offsetNotifier = _LinkedScrollControllerGroupOffsetNotifier(this); } final _allControllers = <_LinkedScrollController>[]; late _LinkedScrollControllerGroupOffsetNotifier _offsetNotifier; /// The current scroll offset of the group. double get offset { assert( _attachedControllers.isNotEmpty, 'LinkedScrollControllerGroup does not have any scroll controllers ' 'attached.', ); return _attachedControllers.first.offset; } /// Creates a new controller that is linked to any existing ones. ScrollController addAndGet() { final initialScrollOffset = _attachedControllers.isEmpty ? 0.0 : _attachedControllers.first.position.pixels; final controller = _LinkedScrollController(this, initialScrollOffset: initialScrollOffset); _allControllers.add(controller); controller.addListener(_offsetNotifier.notifyListeners); return controller; } /// Adds a callback that will be called when the value of [offset] changes. void addOffsetChangedListener(VoidCallback onChanged) { _offsetNotifier.addListener(onChanged); } /// Removes the specified offset changed listener. void removeOffsetChangedListener(VoidCallback listener) { _offsetNotifier.removeListener(listener); } Iterable<_LinkedScrollController> get _attachedControllers => _allControllers.where((controller) => controller.hasClients); /// Animates the scroll position of all linked controllers to [offset]. Future animateTo( double offset, { required Curve curve, required Duration duration, }) async { final animations = >[]; for (final controller in _attachedControllers) { animations .add(controller.animateTo(offset, duration: duration, curve: curve)); } return Future.wait(animations).then((List _) => null); } /// Jumps the scroll position of all linked controllers to [value]. void jumpTo(double value) { for (final controller in _attachedControllers) { controller.jumpTo(value); } } /// Resets the scroll position of all linked controllers to 0. void resetScroll() { jumpTo(0.0); } } /// This class provides change notification for the scroll offset of a /// [LinkedScrollControllerGroup]. /// /// It de-duplicates change events by only firing listeners when the scroll /// offset of the group changes. class _LinkedScrollControllerGroupOffsetNotifier extends ChangeNotifier { _LinkedScrollControllerGroupOffsetNotifier(this.controllerGroup); final LinkedScrollControllerGroup controllerGroup; /// The cached offset for the group. /// /// This value is used internally to determine whether to notify listeners /// when the offset changes. It helps optimize performance by avoiding /// unnecessary notifications when the offset remains unchanged. double? _cachedOffset; @override void notifyListeners() { final currentOffset = controllerGroup.offset; if (currentOffset != _cachedOffset) { _cachedOffset = currentOffset; super.notifyListeners(); } } } /// A scroll controller that synchronizes its movements with a peer scroll /// controller. Both controllers must be instances of [_LinkedScrollController]. class _LinkedScrollController extends ScrollController { final LinkedScrollControllerGroup _controllers; _LinkedScrollController( this._controllers, { required super.initialScrollOffset, }) : super(keepScrollOffset: false); @override void dispose() { _controllers._allControllers.remove(this); super.dispose(); } @override void attach(ScrollPosition position) { assert( position is _LinkedScrollPosition, '_LinkedScrollControllers can only be used with _LinkedScrollPositions.', ); final _LinkedScrollPosition linkedPosition = position as _LinkedScrollPosition; assert( linkedPosition.owner == this, '_LinkedScrollPosition cannot change controllers once created.', ); super.attach(position); } @override _LinkedScrollPosition createScrollPosition( ScrollPhysics physics, ScrollContext context, ScrollPosition? oldPosition, ) { return _LinkedScrollPosition( this, physics: physics, context: context, initialPixels: initialScrollOffset, oldPosition: oldPosition, ); } @override double get initialScrollOffset => _controllers._attachedControllers.isEmpty ? super.initialScrollOffset : _controllers.offset; @override _LinkedScrollPosition get position => super.position as _LinkedScrollPosition; Iterable<_LinkedScrollController> get _allPeersWithClients => _controllers._attachedControllers.where((peer) => peer != this); bool get canLinkWithPeers => _allPeersWithClients.isNotEmpty; Iterable<_LinkedScrollActivity> linkWithPeers(_LinkedScrollPosition driver) { assert(canLinkWithPeers); return _allPeersWithClients .map((peer) => peer.link(driver)) .expand((e) => e); } Iterable<_LinkedScrollActivity> link(_LinkedScrollPosition driver) { assert(hasClients); final activities = <_LinkedScrollActivity>[]; for (final position in positions) { final linkedPosition = position as _LinkedScrollPosition; activities.add(linkedPosition.link(driver)); } return activities; } } // Implementation details: // When position.setPixels or position.forcePixels is called on a // _LinkedScrollPosition, it creates a _LinkedScrollActivity for each linked // position to move or jump to the appropriate offset, either programmatically // or as a result of a user action. When a new activity starts, the set of peer // activities is cleared. class _LinkedScrollPosition extends ScrollPositionWithSingleContext { _LinkedScrollPosition( this.owner, { required super.physics, required super.context, super.initialPixels = null, super.oldPosition, }); final _LinkedScrollController owner; final Set<_LinkedScrollActivity> _peerActivities = <_LinkedScrollActivity>{}; // Overrides the hold method to propagate it to all peer controllers. @override ScrollHoldController hold(VoidCallback holdCancelCallback) { for (final controller in owner._allPeersWithClients) { controller.position._holdInternal(); } return super.hold(holdCancelCallback); } // Invokes hold without propagating to peers. void _holdInternal() { super.hold(() {}); } @override void beginActivity(ScrollActivity? newActivity) { if (newActivity == null) { return; } for (final activity in _peerActivities) { activity.unlink(this); } _peerActivities.clear(); super.beginActivity(newActivity); } @override double setPixels(double newPixels) { if (newPixels == pixels) return 0.0; updateUserScrollDirection( newPixels - pixels > 0.0 ? ScrollDirection.forward : ScrollDirection.reverse, ); if (owner.canLinkWithPeers) { _peerActivities.addAll(owner.linkWithPeers(this)); for (final activity in _peerActivities) { activity.moveTo(newPixels); } } return setPixelsInternal(newPixels); } double setPixelsInternal(double newPixels) { return super.setPixels(newPixels); } @override void forcePixels(double value) { if (value == pixels) return; updateUserScrollDirection( value - pixels > 0.0 ? ScrollDirection.forward : ScrollDirection.reverse, ); if (owner.canLinkWithPeers) { _peerActivities.addAll(owner.linkWithPeers(this)); for (final activity in _peerActivities) { activity.jumpTo(value); } } forcePixelsInternal(value); } void forcePixelsInternal(double value) { super.forcePixels(value); } _LinkedScrollActivity link(_LinkedScrollPosition driver) { if (this.activity is! _LinkedScrollActivity) { beginActivity(_LinkedScrollActivity(this)); } final _LinkedScrollActivity activity = this.activity! as _LinkedScrollActivity; activity.link(driver); return activity; } void unlink(_LinkedScrollActivity activity) { _peerActivities.remove(activity); } // This method is overridden to make it public; the original method is protected. @override void updateUserScrollDirection(ScrollDirection value) { super.updateUserScrollDirection(value); } @override void debugFillDescription(List description) { super.debugFillDescription(description); description.add('owner: $owner'); } } class _LinkedScrollActivity extends ScrollActivity { _LinkedScrollActivity(_LinkedScrollPosition super.delegate); @override _LinkedScrollPosition get delegate => super.delegate as _LinkedScrollPosition; final Set<_LinkedScrollPosition> drivers = <_LinkedScrollPosition>{}; void link(_LinkedScrollPosition driver) { drivers.add(driver); } void unlink(_LinkedScrollPosition driver) { drivers.remove(driver); if (drivers.isEmpty) { delegate.goIdle(); } } @override bool get shouldIgnorePointer => true; @override bool get isScrolling => true; // _LinkedScrollActivity is not self-driven; it moves in response to calls to the [moveTo] method. @override double get velocity => 0.0; void moveTo(double newPixels) { _updateUserScrollDirection(); delegate.setPixelsInternal(newPixels); } void jumpTo(double newPixels) { _updateUserScrollDirection(); delegate.forcePixelsInternal(newPixels); } void _updateUserScrollDirection() { assert(drivers.isNotEmpty); ScrollDirection commonDirection = drivers.first.userScrollDirection; for (final driver in drivers) { if (driver.userScrollDirection != commonDirection) { commonDirection = ScrollDirection.idle; } } delegate.updateUserScrollDirection(commonDirection); } @override void dispose() { for (final driver in drivers) { driver.unlink(this); } super.dispose(); } } ================================================ FILE: lib/src/utils/measure_size.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; typedef OnWidgetSizeChange = void Function(Size size); /// Wrap a widget with this to receive updates about its size changes. class MeasureSize extends SingleChildRenderObjectWidget { final OnWidgetSizeChange onChange; final bool getInitialSize; const MeasureSize({ super.key, required this.onChange, required Widget super.child, this.getInitialSize = false, }); @override RenderObject createRenderObject(BuildContext context) { return MeasureSizeRenderObject( onChange: onChange, getInitialSize: getInitialSize, ); } } class MeasureSizeRenderObject extends RenderProxyBox { Size? oldSize; final OnWidgetSizeChange onChange; final bool getInitialSize; MeasureSizeRenderObject({ required this.onChange, this.getInitialSize = false, }); @override void performLayout() { super.performLayout(); final newSize = child!.size; if (oldSize == newSize) return; oldSize = newSize; if (getInitialSize) { onChange(child!.size); } else { WidgetsBinding.instance.addPostFrameCallback((Duration _) { onChange(newSize); }); } } } ================================================ FILE: lib/src/utils/shape_decoration_premul.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/widgets.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; // TODO: Remove this once Flutter transitions from straight alpha to premultiplied alpha for color lerping. class ShapeDecorationWithPremultipliedAlpha extends Decoration { /// The color to fill in the background of the shape. /// /// The color is under the [image]. /// /// If a [gradient] is specified, [color] must be null. final Color? color; /// A gradient to use for filling the shape. /// /// The gradient is under the [image]. /// /// If a [color] is specified, [gradient] must be null. final Gradient? gradient; /// An image to paint inside the shape (clipped to its outline). /// /// The image is drawn over the [color] or [gradient]. final DecorationImage? image; /// The list of shadows cast by the [shape]. /// /// See also: /// /// * [kElevationToShadow], for some predefined shadows used in Material /// Design. /// * [PhysicalModel], a widget for showing shadows. final List? shadows; /// The shape to fill the [color], [gradient], and [image] into and to cast as /// the [shadows]. /// /// Shapes can be stacked (using the `+` operator). The color, gradient, and /// image are drawn into the inner-most shape specified. /// /// The [shape] property specifies the outline (border) of the decoration. The /// shape must not be null. /// /// ## Directionality-dependent shapes /// /// Some [ShapeBorder] subclasses are sensitive to the [TextDirection]. The /// direction that is provided to the border (e.g. for its [ShapeBorder.paint] /// method) is the one specified in the [ImageConfiguration] /// ([ImageConfiguration.textDirection]) provided to the [BoxPainter] /// (via its [BoxPainter.paint method). The [BoxPainter] is obtained when /// [createBoxPainter] is called. /// /// When a [ShapeDecorationWithPremultipliedAlpha] is used with a [Container] /// widget or a [DecoratedBox] widget (which is what [Container] uses), the /// [TextDirection] specified in the [ImageConfiguration] is obtained from the /// ambient [Directionality], using [createLocalImageConfiguration]. final ShapeBorder shape; /// Creates a shape decoration with premultiplied alpha for color lerp. /// In others respects, it is identical to [ShapeDecoration]. /// /// * If [color] is null, this decoration does not paint a background color. /// * If [gradient] is null, this decoration does not paint gradients. /// * If [image] is null, this decoration does not paint a background image. /// * If [shadows] is null, this decoration does not paint a shadow. /// /// The [color] and [gradient] properties are mutually exclusive, /// one (or both) of them must be null. /// /// The [shape] must not be null. const ShapeDecorationWithPremultipliedAlpha({ this.color, this.image, this.gradient, this.shadows, required this.shape, }) : assert(!(color != null && gradient != null)); /// Creates a shape decoration configured to match a [BoxDecoration]. /// /// The [BoxDecoration] class is more efficient for shapes that it can /// describe than the [ShapeDecorationWithPremultipliedAlpha] class is for /// those same shapes, because [ShapeDecorationWithPremultipliedAlpha] has to /// be more general as it can support any shape. However, having a /// [ShapeDecorationWithPremultipliedAlpha] is sometimes necessary, for /// example when calling [ShapeDecorationWithPremultipliedAlpha.lerp] to /// transition between different shapes (e.g. from a [CircleBorder] to a /// [RoundedRectangleBorder]; the [BoxDecoration] class cannot animate the /// transition from a [BoxShape.circle] to [BoxShape.rectangle]). factory ShapeDecorationWithPremultipliedAlpha.fromBoxDecoration( BoxDecoration source, ) { final ShapeBorder shape; switch (source.shape) { case BoxShape.circle: if (source.border != null) { assert(source.border!.isUniform); shape = CircleBorder(side: source.border!.top); } else { shape = const CircleBorder(); } case BoxShape.rectangle: if (source.borderRadius != null) { assert(source.border == null || source.border!.isUniform); shape = RoundedRectangleBorder( side: source.border?.top ?? BorderSide.none, borderRadius: source.borderRadius!, ); } else { shape = source.border ?? const Border(); } } return ShapeDecorationWithPremultipliedAlpha( color: source.color, image: source.image, gradient: source.gradient, shadows: source.boxShadow, shape: shape, ); } @override Path getClipPath(Rect rect, TextDirection textDirection) { return shape.getOuterPath(rect, textDirection: textDirection); } /// The inset space occupied by the [shape]'s border. /// /// This value may be misleading. /// See the discussion at [ShapeBorder.dimensions]. @override EdgeInsetsGeometry get padding => shape.dimensions; @override bool get isComplex => shadows != null; @override ShapeDecorationWithPremultipliedAlpha? lerpFrom(Decoration? a, double t) { if (a is BoxDecoration) { return ShapeDecorationWithPremultipliedAlpha.lerp( ShapeDecorationWithPremultipliedAlpha.fromBoxDecoration(a), this, t, ); } else if (a == null || a is ShapeDecorationWithPremultipliedAlpha) { return ShapeDecorationWithPremultipliedAlpha.lerp( a as ShapeDecorationWithPremultipliedAlpha?, this, t, ); } return super.lerpFrom(a, t) as ShapeDecorationWithPremultipliedAlpha?; } @override ShapeDecorationWithPremultipliedAlpha? lerpTo(Decoration? b, double t) { if (b is BoxDecoration) { return ShapeDecorationWithPremultipliedAlpha.lerp( this, ShapeDecorationWithPremultipliedAlpha.fromBoxDecoration(b), t, ); } else if (b == null || b is ShapeDecorationWithPremultipliedAlpha) { return ShapeDecorationWithPremultipliedAlpha.lerp( this, b as ShapeDecorationWithPremultipliedAlpha?, t, ); } return super.lerpTo(b, t) as ShapeDecorationWithPremultipliedAlpha?; } static ShapeDecorationWithPremultipliedAlpha? lerp( ShapeDecorationWithPremultipliedAlpha? a, ShapeDecorationWithPremultipliedAlpha? b, double t, ) { if (a == null && b == null) { return null; } if (a != null && b != null) { if (t == 0.0) { return a; } if (t == 1.0) { return b; } } return ShapeDecorationWithPremultipliedAlpha( color: colorPremulLerp(a!.color, b!.color, t), gradient: Gradient.lerp(a.gradient, b.gradient, t), image: t < 0.5 ? a.image : b.image, shadows: BoxShadow.lerpList(a.shadows, b.shadows, t), shape: ShapeBorder.lerp(a.shape, b.shape, t)!, ); } @override bool operator ==(Object other) { if (identical(this, other)) return true; if (other.runtimeType != runtimeType) return false; return other is ShapeDecorationWithPremultipliedAlpha && other.color == color && other.gradient == gradient && other.image == image && listEquals(other.shadows, shadows) && other.shape == shape; } @override int get hashCode => Object.hash( color, gradient, image, shape, shadows == null ? null : Object.hashAll(shadows!), ); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties.defaultDiagnosticsTreeStyle = DiagnosticsTreeStyle.whitespace; properties.add( ColorProperty('color', color, defaultValue: null), ); properties.add( DiagnosticsProperty('gradient', gradient, defaultValue: null), ); properties.add( DiagnosticsProperty('image', image, defaultValue: null), ); properties.add( DiagnosticsProperty('shape', shape), ); properties.add( IterableProperty( 'shadows', shadows, defaultValue: null, style: DiagnosticsTreeStyle.whitespace, ), ); } @override bool hitTest(Size size, Offset position, {TextDirection? textDirection}) { return shape .getOuterPath(Offset.zero & size, textDirection: textDirection) .contains(position); } @override BoxPainter createBoxPainter([VoidCallback? onChanged]) { assert(onChanged != null || image == null); return _ShapeDecorationPainter(this, onChanged!); } } /// An object that paints a [ShapeDecorationWithPremultipliedAlpha] into a /// canvas. class _ShapeDecorationPainter extends BoxPainter { _ShapeDecorationPainter(this._decoration, VoidCallback onChanged) : super(onChanged); final ShapeDecorationWithPremultipliedAlpha _decoration; Rect? _lastRect; TextDirection? _lastTextDirection; late Path _outerPath; Path? _innerPath; Paint? _interiorPaint; int? _shadowCount; late List _shadowBounds; late List _shadowPaths; late List _shadowPaints; @override VoidCallback get onChanged => super.onChanged!; void _precache(Rect rect, TextDirection? textDirection) { if (rect == _lastRect && textDirection == _lastTextDirection) return; // This code path is reached either during the initial paint or when the // rectangle has changed. In the latter case, only features dependent on the // rectangle need to be updated. if (_interiorPaint == null && (_decoration.color != null || _decoration.gradient != null)) { _interiorPaint = Paint(); if (_decoration.color != null) { _interiorPaint!.color = _decoration.color!; } } if (_decoration.gradient != null) { _interiorPaint!.shader = _decoration.gradient! .createShader(rect, textDirection: textDirection); } if (_decoration.shadows != null) { if (_shadowCount == null) { _shadowCount = _decoration.shadows!.length; _shadowPaints = [ ..._decoration.shadows!.map((BoxShadow shadow) => shadow.toPaint()), ]; } if (_decoration.shape.preferPaintInterior) { _shadowBounds = [ ..._decoration.shadows!.map((BoxShadow shadow) { return rect.shift(shadow.offset).inflate(shadow.spreadRadius); }), ]; } else { _shadowPaths = [ ..._decoration.shadows!.map((BoxShadow shadow) { return _decoration.shape.getOuterPath( rect.shift(shadow.offset).inflate(shadow.spreadRadius), textDirection: textDirection, ); }), ]; } } if (!_decoration.shape.preferPaintInterior && (_interiorPaint != null || _shadowCount != null)) { _outerPath = _decoration.shape.getOuterPath( rect, textDirection: textDirection, ); } if (_decoration.image != null) { _innerPath = _decoration.shape.getInnerPath( rect, textDirection: textDirection, ); } _lastRect = rect; _lastTextDirection = textDirection; } void _paintShadows(Canvas canvas, Rect rect, TextDirection? textDirection) { if (_shadowCount != null) { if (_decoration.shape.preferPaintInterior) { for (int index = 0; index < _shadowCount!; index += 1) { _decoration.shape.paintInterior( canvas, _shadowBounds[index], _shadowPaints[index], textDirection: textDirection, ); } } else { for (int index = 0; index < _shadowCount!; index += 1) { canvas.drawPath(_shadowPaths[index], _shadowPaints[index]); } } } } void _paintInterior(Canvas canvas, Rect rect, TextDirection? textDirection) { if (_interiorPaint != null) { if (_decoration.shape.preferPaintInterior) { _decoration.shape.paintInterior( canvas, rect, _interiorPaint!, textDirection: textDirection, ); } else { canvas.drawPath(_outerPath, _interiorPaint!); } } } DecorationImagePainter? _imagePainter; void _paintImage(Canvas canvas, ImageConfiguration configuration) { if (_decoration.image == null) return; _imagePainter ??= _decoration.image!.createPainter(onChanged); _imagePainter!.paint(canvas, _lastRect!, _innerPath, configuration); } @override void dispose() { _imagePainter?.dispose(); super.dispose(); } @override void paint(Canvas canvas, Offset offset, ImageConfiguration configuration) { assert(configuration.size != null); final Rect rect = offset & configuration.size!; final TextDirection? textDirection = configuration.textDirection; _precache(rect, textDirection); _paintShadows(canvas, rect, textDirection); _paintInterior(canvas, rect, textDirection); _paintImage(canvas, configuration); _decoration.shape.paint(canvas, rect, textDirection: textDirection); } } ================================================ FILE: lib/src/utils/squircle/clip_squircle_rect.dart ================================================ import 'package:flutter/widgets.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/utils/squircle/squircle_border_radius.dart'; class MoonClipSquircleRect extends StatelessWidget { final MoonSquircleBorderRadius radius; final Clip clipBehavior; final Widget? child; const MoonClipSquircleRect({ super.key, required this.child, this.radius = MoonSquircleBorderRadius.zero, this.clipBehavior = Clip.antiAlias, }); @override Widget build(BuildContext context) { return ClipPath.shape( clipBehavior: clipBehavior, shape: MoonSquircleBorder( borderRadius: radius, ), child: child, ); } } ================================================ FILE: lib/src/utils/squircle/path_squircle_corners.dart ================================================ import 'dart:math' as math; import 'dart:ui'; import 'package:moon_design/src/utils/squircle/processed_squircle_radius.dart'; extension PathSquircleCornersExtensions on Path { void addSmoothTopRight(ProcessedSquircleRadius radius, Rect rect) { final width = rect.width; final height = rect.height; if (radius.radius.cornerRadius > 0) { final a = radius.a; final b = radius.b; final c = radius.c; final d = radius.d; final p = radius.p; this ..moveTo( math.max(width / 2, width - p), 0, ) ..cubicTo( width - (p - a), 0, width - (p - a - b), 0, width - (p - a - b - c), d, ) ..relativeArcToPoint( Offset( radius.circularSectionLength, radius.circularSectionLength, ), radius: radius.radius, ) ..cubicTo( width, p - a - b, width, p - a, width, math.min(height / 2, p), ); } else { this ..moveTo(width / 2, 0) ..lineTo(width, 0) ..lineTo(width, height / 2); } } void addSmoothBottomRight(ProcessedSquircleRadius radius, Rect rect) { final width = rect.width; final height = rect.height; if (radius.radius.cornerRadius > 0) { final a = radius.a; final b = radius.b; final c = radius.c; final d = radius.d; final p = radius.p; this ..lineTo( width, math.max(height / 2, height - p), ) ..cubicTo( width, height - (p - a), width, height - (p - a - b), width - d, height - (p - a - b - c), ) ..relativeArcToPoint( Offset( -radius.circularSectionLength, radius.circularSectionLength, ), radius: radius.radius, ) ..cubicTo( width - (p - a - b), height, width - (p - a), height, math.max(width / 2, width - p), height, ); } else { this ..lineTo(width, height) ..lineTo(width / 2, height); } } void addSmoothBottomLeft(ProcessedSquircleRadius radius, Rect rect) { final width = rect.width; final height = rect.height; if (radius.radius.cornerRadius > 0) { final a = radius.a; final b = radius.b; final c = radius.c; final d = radius.d; final p = radius.p; this ..lineTo( math.min(width / 2, p), height, ) ..cubicTo( p - a, height, p - a - b, height, p - a - b - c, height - d, ) ..relativeArcToPoint( Offset( -radius.circularSectionLength, -radius.circularSectionLength, ), radius: radius.radius, ) ..cubicTo( 0, height - (p - a - b), 0, height - (p - a), 0, math.max(height / 2, height - p), ); } else { this ..lineTo(0, height) ..lineTo(0, height / 2); } } void addSmoothTopLeft(ProcessedSquircleRadius radius, Rect rect) { final width = rect.width; final height = rect.height; if (radius.radius.cornerRadius > 0) { final a = radius.a; final b = radius.b; final c = radius.c; final d = radius.d; final p = radius.p; this ..lineTo( 0, math.min(height / 2, p), ) ..cubicTo( 0, p - a, 0, p - a - b, d, p - a - b - c, ) ..relativeArcToPoint( Offset( radius.circularSectionLength, -radius.circularSectionLength, ), radius: radius.radius, ) ..cubicTo( p - a - b, 0, p - a, 0, math.min(width / 2, p), 0, ) ..close(); } else { this ..lineTo(0, 0) ..close(); } } } ================================================ FILE: lib/src/utils/squircle/processed_squircle_radius.dart ================================================ import 'dart:math' as math; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; // The article from figma's blog // https://www.figma.com/blog/desperately-seeking-squircles/ // // The original code // https://github.com/MartinRGB/Figma_Squircles_Approximation/blob/bf29714aab58c54329f3ca130ffa16d39a2ff08c/js/rounded-corners.js#L64 class ProcessedSquircleRadius { final MoonSquircleRadius radius; final double a; final double b; final double c; final double d; final double p; final double circularSectionLength; final double width; final double height; factory ProcessedSquircleRadius( MoonSquircleRadius radius, { required double width, required double height, }) { /// Constant factor to convert an angle from degrees to radians. const double degrees2Radians = math.pi / 180.0; /// Convert degrees to radians. double radians(double degrees) => degrees * degrees2Radians; final cornerSmoothing = radius.cornerSmoothing; var cornerRadius = radius.cornerRadius; final maxRadius = math.min(width, height) / 2; cornerRadius = math.min(cornerRadius, maxRadius); // 12.2 from the article. final p = math.min((1 + cornerSmoothing) * cornerRadius, maxRadius); final double angleAlpha; final double angleBeta; if (cornerRadius <= maxRadius / 2) { angleBeta = 90 * (1 - cornerSmoothing); angleAlpha = 45 * cornerSmoothing; } else { // When 'cornerRadius' exceeds 'maxRadius / 2', these angles also depend // on 'cornerRadius' and 'maxRadius / 2'. // // After conducting several tests in Figma, this code produced similar, // albeit not identical, results. The 'diffRatio' was referred to as // 'change_percentage' in the original code. final diffRatio = (cornerRadius - maxRadius / 2) / (maxRadius / 2); angleBeta = 90 * (1 - cornerSmoothing * (1 - diffRatio)); angleAlpha = 45 * cornerSmoothing * (1 - diffRatio); } final angleTheta = (90 - angleBeta) / 2; // In the original code, this was referred to as 'h_longest'. // In the article, this represents the distance between two control // points: P3 and P4. final p3ToP4Distance = cornerRadius * math.tan(radians(angleTheta / 2)); // In the original code, this was referred to as 'l'. final circularSectionLength = math.sin(radians(angleBeta / 2)) * cornerRadius * math.sqrt(2); // The variables a, b, c, and d correspond to the values mentioned in // section 11.1 of the article. final c = p3ToP4Distance * math.cos(radians(angleAlpha)); final d = c * math.tan(radians(angleAlpha)); final b = (p - circularSectionLength - c - d) / 3; final a = 2 * b; return ProcessedSquircleRadius._( a: a, b: b, c: c, d: d, p: p, width: width, height: height, radius: MoonSquircleRadius( cornerRadius: cornerRadius, cornerSmoothing: radius.cornerSmoothing, ), circularSectionLength: circularSectionLength, ); } const ProcessedSquircleRadius._({ required this.a, required this.b, required this.c, required this.d, required this.p, required this.width, required this.height, required this.radius, required this.circularSectionLength, }); double get cornerRadius => radius.cornerRadius; @override bool operator ==(Object other) { if (identical(this, other)) return true; if (runtimeType != other.runtimeType) return false; if (other is MoonSquircleRadius) { return other == radius; } if (other is ProcessedSquircleRadius) { return other.radius == radius; } return false; } @override int get hashCode => radius.hashCode; @override String toString() { return 'ProcessedSquircleRadius(' 'radius: $radius, ' 'a: ${a.toStringAsFixed(2)}, ' 'b: ${b.toStringAsFixed(2)}, ' 'c: ${c.toStringAsFixed(2)}, ' 'd: ${d.toStringAsFixed(2)}, ' 'p: ${p.toStringAsFixed(2)}, ' 'width: ${width.toStringAsFixed(2)}, ' 'height: ${height.toStringAsFixed(2)}, ' ')'; } } ================================================ FILE: lib/src/utils/squircle/squircle_border.dart ================================================ import 'dart:math'; import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; import 'package:moon_design/src/utils/squircle/squircle_border_radius.dart'; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; enum BorderAlign { inside, center, outside, } class MoonSquircleBorder extends OutlinedBorder { /// The radius for each corner. /// /// Negative radius values are clamped to 0.0 by [getInnerPath] and /// [getOuterPath]. final MoonSquircleBorderRadius borderRadius; final BorderAlign borderAlign; const MoonSquircleBorder({ super.side = MoonSquicleBorderSide.none, this.borderRadius = MoonSquircleBorderRadius.zero, this.borderAlign = BorderAlign.inside, }); @override EdgeInsetsGeometry get dimensions { switch (borderAlign) { // Ensure that the border behaves like in Figma, i.e., without adding any // padding. case BorderAlign.inside: return EdgeInsets.zero; case BorderAlign.center: return EdgeInsets.zero; case BorderAlign.outside: return EdgeInsets.zero; } } @override ShapeBorder scale(double t) { return MoonSquircleBorder( side: side.scale(t), borderRadius: borderRadius * t, ); } @override ShapeBorder? lerpFrom(ShapeBorder? a, double t) { if (a is MoonSquircleBorder) { return MoonSquircleBorder( side: MoonSquicleBorderSide.lerp(a.side, side, t), borderRadius: MoonSquircleBorderRadius.lerp( a.borderRadius, borderRadius, t, )!, ); } return super.lerpFrom(a, t); } @override ShapeBorder? lerpTo(ShapeBorder? b, double t) { if (b is MoonSquircleBorder) { return MoonSquircleBorder( side: MoonSquicleBorderSide.lerp(side, b.side, t), borderRadius: MoonSquircleBorderRadius.lerp(borderRadius, b.borderRadius, t)!, ); } return super.lerpTo(b, t); } @override Path getInnerPath(Rect rect, {TextDirection? textDirection}) { final innerRect = () { switch (borderAlign) { case BorderAlign.inside: return rect.deflate(side.width); case BorderAlign.center: return rect.deflate(side.width / 2); case BorderAlign.outside: return rect; } }(); final radius = () { switch (borderAlign) { case BorderAlign.inside: return borderRadius - MoonSquircleBorderRadius.all( MoonSquircleRadius( cornerRadius: side.width, ), ); case BorderAlign.center: return borderRadius - MoonSquircleBorderRadius.all( MoonSquircleRadius( cornerRadius: side.width / 2, ), ); case BorderAlign.outside: return borderRadius; } }(); if ([radius.bottomLeft, radius.bottomRight, radius.topLeft, radius.topRight] .every((x) => x.cornerSmoothing == 0.0)) { return Path()..addRRect(radius.resolve(textDirection).toRRect(innerRect)); } return radius.toPath(innerRect); } @override Path getOuterPath(Rect rect, {TextDirection? textDirection}) { return _getPath(rect, borderRadius, textDirection: textDirection); } Path _getPath( Rect rect, MoonSquircleBorderRadius radius, { TextDirection? textDirection, }) { if ([radius.bottomLeft, radius.bottomRight, radius.topLeft, radius.topRight] .every((x) => x.cornerSmoothing == 0.0)) { return Path()..addRRect(radius.resolve(textDirection).toRRect(rect)); } return radius.toPath(rect); } @override MoonSquircleBorder copyWith({ BorderSide? side, MoonSquircleBorderRadius? borderRadius, BorderAlign? borderAlign, }) { return MoonSquircleBorder( side: side ?? this.side, borderRadius: borderRadius ?? this.borderRadius, borderAlign: borderAlign ?? this.borderAlign, ); } @override void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) { if (rect.isEmpty) return; switch (side.style) { case BorderStyle.none: break; case BorderStyle.solid: // Since the stroke is painted at the center of the border, we adjust // the rectangle based on the [borderAlign] to ensure the stroke is // properly positioned. final adjustedRect = () { switch (borderAlign) { case BorderAlign.inside: return rect.deflate(side.width / 2); case BorderAlign.center: return rect; case BorderAlign.outside: return rect.inflate(side.width / 2); } }(); final adjustedBorderRadius = () { switch (borderAlign) { case BorderAlign.inside: return borderRadius - MoonSquircleBorderRadius.all( MoonSquircleRadius( cornerRadius: side.width / 2, ), ); case BorderAlign.center: return borderRadius; case BorderAlign.outside: return borderRadius + MoonSquircleBorderRadius.all( MoonSquircleRadius( cornerRadius: side.width / 2, ), ); } }(); final outerPath = _getPath( adjustedRect, adjustedBorderRadius, textDirection: textDirection, ); canvas.drawPath( outerPath, side.toPaint(), ); } } @override bool operator ==(Object other) { if (other.runtimeType != runtimeType) return false; return other is MoonSquircleBorder && other.side == side && other.borderRadius == borderRadius && other.borderAlign == borderAlign; } @override int get hashCode => Object.hash(side, borderRadius, borderAlign); @override String toString() { return '${objectRuntimeType(this, 'MoonSquircleBorder')}($side, $borderRadius, $borderAlign)'; } } class MoonSquicleBorderSide with Diagnosticable { /// This constant represents the border being drawn fully inside the border /// path. /// /// This is used as the default value for the [strokeAlign] property. static const double strokeAlignInside = -1.0; /// This constant represents the border being drawn along the center of the /// border path, with half of the [BorderSide.width] inside the path and the /// other half outside. /// /// This is used as a value for the [strokeAlign] property. static const double strokeAlignCenter = 0.0; /// This constant represents the border being drawn outside the border path. /// /// This is used as a value for the [strokeAlign] property. static const double strokeAlignOutside = 1.0; /// Creates a [BorderSide] representing the addition of the two provided /// [BorderSide]'s. /// /// This method should only be called if [canMerge] returns true for the two /// sides. /// /// If one side is zero-width with [BorderStyle.none], the other side is /// returned as is. If both sides are zero-width with [BorderStyle.none], /// [BorderSide.none] is returned. /// /// The arguments must not be null. static BorderSide merge(BorderSide a, BorderSide b) { assert(canMerge(a, b)); final bool aIsNone = a.style == BorderStyle.none && a.width == 0.0; final bool bIsNone = b.style == BorderStyle.none && b.width == 0.0; if (aIsNone && bIsNone) { return BorderSide.none; } if (aIsNone) { return b; } if (bIsNone) { return a; } assert(a.color == b.color); assert(a.style == b.style); return BorderSide( color: a.color, // == b.color. width: a.width + b.width, strokeAlign: max(a.strokeAlign, b.strokeAlign), style: a.style, // == b.style. ); } /// The color of this side of the border. final Color color; /// The width of this side of the border, in logical pixels. /// /// Setting width to 0.0 will result in a hairline border. /// This means that the border will have the width of one physical pixel. /// Hairline rendering takes shortcuts when the path overlaps a pixel more /// than once. This means that it will render faster than otherwise, but it /// might double-hit pixels, giving it a slightly darker/lighter result. /// /// To omit the border entirely, set the [style] to [BorderStyle.none]. final double width; /// The style of this side of the border. /// /// To omit a side, set [style] to [BorderStyle.none]. /// This skips painting the border, but the border still has a [width]. final BorderStyle style; /// A hairline black border that is not rendered. static const BorderSide none = BorderSide.none; /// The relative position of the stroke on a [BorderSide] in an /// [OutlinedBorder] or [Border]. /// /// Values typically range from -1.0 ([strokeAlignInside], inside border, /// default) to 1.0 ([strokeAlignOutside], outside border), without any /// bound constraints (e.g., a value of -2.0 is not typical, but allowed). /// A value of 0 ([strokeAlignCenter]) will center the border on the edge /// of the widget. /// /// When set to [strokeAlignInside], the stroke is drawn completely inside /// the widget. For [strokeAlignCenter] and [strokeAlignOutside], a property /// such as [Container.clipBehavior] can be used in an outside widget to clip /// it. If [Container.decoration] has a border, the container may incorporate /// [width] as additional padding: /// - [strokeAlignInside] provides padding with full [width]. /// - [strokeAlignCenter] provides padding with half [width]. /// - [strokeAlignOutside] provides zero padding, as stroke is drawn entirely /// outside. /// /// This property is not honored by [toPaint] (because the [Paint] object /// cannot represent it); it is intended that classes that use [BorderSide] /// objects implement this property when painting borders by suitably /// inflating or deflating their regions. /// /// {@tool dartpad} /// This example shows an animation of how [strokeAlign] affects the drawing /// when applied to borders of various shapes. /// /// ** See code in examples/api/lib/painting/borders/border_side.stroke_align.0.dart ** /// {@end-tool} final double strokeAlign; /// Creates the side of a border with premultiplied alpha color. /// /// By default, the border is 1.0 logical pixels wide and solid black. const MoonSquicleBorderSide({ this.color = const Color(0xFF000000), this.width = 1.0, this.style = BorderStyle.solid, this.strokeAlign = strokeAlignInside, }) : assert(width >= 0.0); /// Creates a copy of this border but with the given fields replaced with the /// new values. BorderSide copyWith({ Color? color, double? width, BorderStyle? style, double? strokeAlign, }) { return BorderSide( color: color ?? this.color, width: width ?? this.width, style: style ?? this.style, strokeAlign: strokeAlign ?? this.strokeAlign, ); } /// Creates a copy of this border side description but with the width scaled /// by the factor 't'. /// /// The 't' argument represents the multiplicand, or the position on the /// timeline for an interpolation from nothing to 'this', with 0.0 meaning /// that the object returned should be the nil variant of this object, 1.0 /// meaning that no change should be applied, returning 'this' (or something /// equivalent to 'this'), and other values meaning that the object should be /// multiplied by 't'. Negative values are treated like zero. /// /// Since a zero width is normally painted as a hairline width rather than no /// border at all, the zero factor is special-cased to instead change the /// style to [BorderStyle.none]. /// /// Values for 't' are usually obtained from an [Animation], such as /// an [AnimationController]. BorderSide scale(double t) { return BorderSide( color: color, width: max(0.0, width * t), style: t <= 0.0 ? BorderStyle.none : style, ); } /// Create a [Paint] object that, if used to stroke a line, will draw the line /// in this border's style. /// /// The [strokeAlign] property is not reflected in the [Paint]; consumers must /// implement that directly by inflating or deflating their region /// appropriately. /// /// Not all borders use this method to paint their border sides. For example, /// non-uniform rectangular [Border]s have beveled edges and so paint their /// border sides as filled shapes rather than using a stroke. Paint toPaint() { switch (style) { case BorderStyle.solid: return Paint() ..color = color ..strokeWidth = width ..style = PaintingStyle.stroke; case BorderStyle.none: return Paint() ..color = const Color(0x00000000) ..strokeWidth = 0.0 ..style = PaintingStyle.stroke; } } /// Whether the two given [BorderSide]s can be merged using [BorderSide.merge]. /// /// Two sides can be merged if one or both are zero-width with /// [BorderStyle.none], or if they both have the same color and style. /// /// The arguments must not be null. static bool canMerge(BorderSide a, BorderSide b) { if ((a.style == BorderStyle.none && a.width == 0.0) || (b.style == BorderStyle.none && b.width == 0.0)) { return true; } return a.style == b.style && a.color == b.color; } /// Linearly interpolate between two border sides. /// /// The arguments must not be null. /// /// {@macro dart.ui.shadow.lerp} static BorderSide lerp(BorderSide a, BorderSide b, double t) { if (identical(a, b)) { return a; } if (t == 0.0) { return a; } if (t == 1.0) { return b; } final double width = lerpDouble(a.width, b.width, t)!; if (width < 0.0) { return BorderSide.none; } if (a.style == b.style && a.strokeAlign == b.strokeAlign) { return BorderSide( color: colorPremulLerp(a.color, b.color, t)!, width: width, style: a.style, // == b.style. strokeAlign: a.strokeAlign, // == b.strokeAlign. ); } final Color colorA; final Color colorB; switch (a.style) { case BorderStyle.solid: colorA = a.color; case BorderStyle.none: colorA = a.color.withAlpha(0x00); } switch (b.style) { case BorderStyle.solid: colorB = b.color; case BorderStyle.none: colorB = b.color.withAlpha(0x00); } if (a.strokeAlign != b.strokeAlign) { return BorderSide( color: colorPremulLerp(colorA, colorB, t)!, width: width, strokeAlign: lerpDouble(a.strokeAlign, b.strokeAlign, t)!, ); } return BorderSide( color: colorPremulLerp(colorA, colorB, t)!, width: width, strokeAlign: a.strokeAlign, // == b.strokeAlign ); } /// Get the amount of the stroke width that lies inside of the [BorderSide]. /// /// For example, this will return the [width] for a [strokeAlign] of -1, half /// the [width] for a [strokeAlign] of 0, and 0 for a [strokeAlign] of 1. double get strokeInset => width * (1 - (1 + strokeAlign) / 2); /// Get the amount of the stroke width that lies outside of the [BorderSide]. /// /// For example, this will return 0 for a [strokeAlign] of -1, half the /// [width] for a [strokeAlign] of 0, and the [width] for a [strokeAlign] /// of 1. double get strokeOutset => width * (1 + strokeAlign) / 2; /// The offset of the stroke, taking into account the stroke alignment. /// /// For example, this will return the negative [width] of the stroke /// for a [strokeAlign] of -1, 0 for a [strokeAlign] of 0, and the /// [width] for a [strokeAlign] of -1. double get strokeOffset => width * strokeAlign; @override bool operator ==(Object other) { if (identical(this, other)) { return true; } if (other.runtimeType != runtimeType) { return false; } return other is BorderSide && other.color == color && other.width == width && other.style == style && other.strokeAlign == strokeAlign; } @override int get hashCode => Object.hash(color, width, style, strokeAlign); @override String toStringShort() => 'BorderSide'; @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties.add( DiagnosticsProperty( 'color', color, defaultValue: const Color(0xFF000000), ), ); properties.add( DoubleProperty( 'width', width, defaultValue: 1.0, ), ); properties.add( DoubleProperty( 'strokeAlign', strokeAlign, defaultValue: strokeAlignInside, ), ); properties.add( EnumProperty( 'style', style, defaultValue: BorderStyle.solid, ), ); } } ================================================ FILE: lib/src/utils/squircle/squircle_border_radius.dart ================================================ // ignore_for_file: overridden_fields, unused_element import 'package:flutter/rendering.dart'; import 'package:moon_design/src/utils/squircle/path_squircle_corners.dart'; import 'package:moon_design/src/utils/squircle/processed_squircle_radius.dart'; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; class MoonSquircleBorderRadius extends BorderRadius { /// The border radius with zero radii. static const MoonSquircleBorderRadius zero = MoonSquircleBorderRadius.all(MoonSquircleRadius.zero); /// The top-left [MoonSquircleRadius]. @override final MoonSquircleRadius topLeft; /// The top-right [MoonSquircleRadius]. @override final MoonSquircleRadius topRight; /// The bottom-left [MoonSquircleRadius]. @override final MoonSquircleRadius bottomLeft; /// The bottom-right [MoonSquircleRadius]. @override final MoonSquircleRadius bottomRight; MoonSquircleBorderRadius({ required double cornerRadius, // The value of 1 or 1.0 leads to NaN error in mobile web/PWA. Hence, we use // 0.9 instead to avoid this issue. double cornerSmoothing = 0.9, }) : this.only( topLeft: MoonSquircleRadius( cornerRadius: cornerRadius, cornerSmoothing: cornerSmoothing, ), topRight: MoonSquircleRadius( cornerRadius: cornerRadius, cornerSmoothing: cornerSmoothing, ), bottomLeft: MoonSquircleRadius( cornerRadius: cornerRadius, cornerSmoothing: cornerSmoothing, ), bottomRight: MoonSquircleRadius( cornerRadius: cornerRadius, cornerSmoothing: cornerSmoothing, ), ); /// Creates a border radius with all radii set to [radius]. const MoonSquircleBorderRadius.all(MoonSquircleRadius radius) : this.only( topLeft: radius, topRight: radius, bottomLeft: radius, bottomRight: radius, ); /// Creates a border radius with vertical symmetry, ensuring that the top and /// bottom sides of the rectangle have the same radii. const MoonSquircleBorderRadius.vertical({ MoonSquircleRadius top = MoonSquircleRadius.zero, MoonSquircleRadius bottom = MoonSquircleRadius.zero, }) : this.only( topLeft: top, topRight: top, bottomLeft: bottom, bottomRight: bottom, ); /// Creates a border radius with horizontal symmetry, ensuring that the left /// and right sides of the rectangle have the same radii. const MoonSquircleBorderRadius.horizontal({ MoonSquircleRadius left = MoonSquircleRadius.zero, MoonSquircleRadius right = MoonSquircleRadius.zero, }) : this.only( topLeft: left, topRight: right, bottomLeft: left, bottomRight: right, ); /// Creates a border radius with only the provided non-zero values, resulting /// in right angles for the other corners. const MoonSquircleBorderRadius.only({ this.topLeft = MoonSquircleRadius.zero, this.topRight = MoonSquircleRadius.zero, this.bottomLeft = MoonSquircleRadius.zero, this.bottomRight = MoonSquircleRadius.zero, }) : super.only( topLeft: topLeft, bottomRight: topRight, topRight: topRight, bottomLeft: bottomLeft, ); /// Required by Flutter framework internals for proper functioning. Radius get _topLeft => topLeft; Radius get _topRight => topRight; Radius get _bottomLeft => bottomLeft; Radius get _bottomRight => bottomRight; Radius get _topStart => Radius.zero; Radius get _topEnd => Radius.zero; Radius get _bottomStart => Radius.zero; Radius get _bottomEnd => Radius.zero; /// Returns a copy of this BorderRadius with the given fields replaced with /// the new values. @override MoonSquircleBorderRadius copyWith({ Radius? topLeft, Radius? topRight, Radius? bottomLeft, Radius? bottomRight, }) { return MoonSquircleBorderRadius.only( topLeft: topLeft is MoonSquircleRadius ? topLeft : this.topLeft, topRight: topRight is MoonSquircleRadius ? topRight : this.topRight, bottomLeft: bottomLeft is MoonSquircleRadius ? bottomLeft : this.bottomLeft, bottomRight: bottomRight is MoonSquircleRadius ? bottomRight : this.bottomRight, ); } /// Creates a [Path] inside the given [Rect]. Path toPath(Rect rect) { final width = rect.width; final height = rect.height; final result = Path(); /// Calculating only if values are different. final processedTopLeft = ProcessedSquircleRadius( topLeft, width: width, height: height, ); final processedBottomLeft = topLeft == bottomLeft ? processedTopLeft : ProcessedSquircleRadius( bottomLeft, width: width, height: height, ); final processedBottomRight = bottomLeft == bottomRight ? processedBottomLeft : ProcessedSquircleRadius( bottomRight, width: width, height: height, ); final processedTopRight = topRight == bottomRight ? processedBottomRight : ProcessedSquircleRadius( topRight, width: width, height: height, ); result ..addSmoothTopRight(processedTopRight, rect) ..addSmoothBottomRight(processedBottomRight, rect) ..addSmoothBottomLeft(processedBottomLeft, rect) ..addSmoothTopLeft(processedTopLeft, rect); return result.transform( Matrix4.translationValues(rect.left, rect.top, 0).storage, ); } @override BorderRadiusGeometry subtract(BorderRadiusGeometry other) { if (other is MoonSquircleBorderRadius) return this - other; return super.subtract(other); } @override BorderRadiusGeometry add(BorderRadiusGeometry other) { if (other is MoonSquircleBorderRadius) return this + other; return super.add(other); } /// Returns the difference between two [BorderRadius] objects. @override MoonSquircleBorderRadius operator -(BorderRadius other) { if (other is MoonSquircleBorderRadius) { return MoonSquircleBorderRadius.only( topLeft: (topLeft - other.topLeft) as MoonSquircleRadius, topRight: (topRight - other.topRight) as MoonSquircleRadius, bottomLeft: (bottomLeft - other.bottomLeft) as MoonSquircleRadius, bottomRight: (bottomRight - other.bottomRight) as MoonSquircleRadius, ); } return this; } /// Returns the sum of two [BorderRadius] objects. @override MoonSquircleBorderRadius operator +(BorderRadius other) { if (other is MoonSquircleBorderRadius) { return MoonSquircleBorderRadius.only( topLeft: (topLeft + other.topLeft) as MoonSquircleRadius, topRight: (topRight + other.topRight) as MoonSquircleRadius, bottomLeft: (bottomLeft + other.bottomLeft) as MoonSquircleRadius, bottomRight: (bottomRight + other.bottomRight) as MoonSquircleRadius, ); } return this; } /// Returns the [BorderRadius] object with each corner negated. /// /// This is the same as multiplying the object by -1.0. @override MoonSquircleBorderRadius operator -() { return MoonSquircleBorderRadius.only( topLeft: (-topLeft) as MoonSquircleRadius, topRight: (-topRight) as MoonSquircleRadius, bottomLeft: (-bottomLeft) as MoonSquircleRadius, bottomRight: (-bottomRight) as MoonSquircleRadius, ); } /// Scales each corner of the [BorderRadius] by the given factor. @override MoonSquircleBorderRadius operator *(double other) { return MoonSquircleBorderRadius.only( topLeft: topLeft * other, topRight: topRight * other, bottomLeft: bottomLeft * other, bottomRight: bottomRight * other, ); } /// Divides each corner of the [BorderRadius] by the given factor. @override MoonSquircleBorderRadius operator /(double other) { return MoonSquircleBorderRadius.only( topLeft: topLeft / other, topRight: topRight / other, bottomLeft: bottomLeft / other, bottomRight: bottomRight / other, ); } /// Integer divides each corner of the [BorderRadius] by the given factor. @override MoonSquircleBorderRadius operator ~/(double other) { return MoonSquircleBorderRadius.only( topLeft: topLeft ~/ other, topRight: topRight ~/ other, bottomLeft: bottomLeft ~/ other, bottomRight: bottomRight ~/ other, ); } /// Computes the remainder of each corner by the given factor. @override MoonSquircleBorderRadius operator %(double other) { return MoonSquircleBorderRadius.only( topLeft: topLeft % other, topRight: topRight % other, bottomLeft: bottomLeft % other, bottomRight: bottomRight % other, ); } /// Linearly interpolate between two [BorderRadius] objects. /// /// If either is null, this function interpolates from [BorderRadius.zero]. /// /// {@macro dart.ui.shadow.lerp} static MoonSquircleBorderRadius? lerp( MoonSquircleBorderRadius? a, MoonSquircleBorderRadius? b, double t, ) { if (a == null && b == null) return null; if (a == null) return b! * t; if (b == null) return a * (1.0 - t); return MoonSquircleBorderRadius.only( topLeft: MoonSquircleRadius.lerp(a.topLeft, b.topLeft, t)!, topRight: MoonSquircleRadius.lerp(a.topRight, b.topRight, t)!, bottomLeft: MoonSquircleRadius.lerp(a.bottomLeft, b.bottomLeft, t)!, bottomRight: MoonSquircleRadius.lerp(a.bottomRight, b.bottomRight, t)!, ); } @override BorderRadius resolve(TextDirection? direction) => BorderRadius.only( topLeft: topLeft, topRight: topRight, bottomLeft: bottomLeft, bottomRight: bottomRight, ); @override String toString() { if (topLeft == topRight && topLeft == bottomRight && topLeft == bottomLeft) { final radius = topLeft.toString(); return 'MoonSquircleBorderRadius${radius.substring(12)}'; } return 'MoonSquircleBorderRadius(' 'topLeft: $topLeft, ' 'topRight: $topRight, ' 'bottomLeft: $bottomLeft, ' 'bottomRight: $bottomRight, ' ')'; } } ================================================ FILE: lib/src/utils/squircle/squircle_radius.dart ================================================ import 'dart:ui'; class MoonSquircleRadius extends Radius { static const zero = MoonSquircleRadius( cornerRadius: 0, cornerSmoothing: 0, ); final double cornerSmoothing; const MoonSquircleRadius({ required double cornerRadius, // The value of 1 or 1.0 leads to NaN error in mobile web/PWA for some // reason. So we use 0.9 instead. this.cornerSmoothing = 0.9, }) : super.circular(cornerRadius); double get cornerRadius => x; /// Unary negation operator. /// /// Returns a Radius with the distances negated. /// /// Radiuses with negative values aren't geometrically meaningful, but could /// occur as part of expressions. For example, negating a radius of one pixel /// and then adding the result to another radius is equivalent to subtracting /// a radius of one pixel from the other. @override Radius operator -() => MoonSquircleRadius( cornerRadius: -cornerRadius, cornerSmoothing: cornerSmoothing, ); /// Binary subtraction operator. /// /// Returns a radius whose [x] value is the left-hand-side operand's [x] /// minus the right-hand-side operand's [x] and whose [y] value is the /// left-hand-side operand's [y] minus the right-hand-side operand's [y]. @override Radius operator -(Radius other) { if (other is MoonSquircleRadius) { return MoonSquircleRadius( cornerRadius: cornerRadius - other.cornerRadius, cornerSmoothing: (cornerSmoothing + other.cornerSmoothing) / 2, ); } return MoonSquircleRadius( cornerRadius: cornerRadius - other.x, cornerSmoothing: cornerSmoothing, ); } /// Binary addition operator. /// /// Returns a radius whose [x] value is the sum of the [x] values of the /// two operands, and whose [y] value is the sum of the [y] values of the /// two operands. @override Radius operator +(Radius other) { if (other is MoonSquircleRadius) { return MoonSquircleRadius( cornerRadius: cornerRadius + other.cornerRadius, cornerSmoothing: (cornerSmoothing + other.cornerSmoothing) / 2, ); } return MoonSquircleRadius( cornerRadius: cornerRadius + other.x, cornerSmoothing: cornerSmoothing, ); } /// Multiplication operator. /// /// Returns a radius whose coordinates are the coordinates of the /// left-hand-side operand (a radius) multiplied by the scalar /// right-hand-side operand (a double). @override MoonSquircleRadius operator *(double operand) => MoonSquircleRadius( cornerRadius: cornerRadius * operand, cornerSmoothing: cornerSmoothing * operand, ); /// Division operator. /// /// Returns a radius whose coordinates are the coordinates of the /// left-hand-side operand (a radius) divided by the scalar right-hand-side /// operand (a double). @override MoonSquircleRadius operator /(double operand) => MoonSquircleRadius( cornerRadius: cornerRadius / operand, cornerSmoothing: cornerSmoothing / operand, ); /// Integer (truncating) division operator. /// /// Returns a radius whose coordinates are the coordinates of the /// left-hand-side operand (a radius) divided by the scalar right-hand-side /// operand (a double), rounded towards zero. @override MoonSquircleRadius operator ~/(double operand) => MoonSquircleRadius( cornerRadius: (cornerRadius ~/ operand).toDouble(), cornerSmoothing: (cornerSmoothing ~/ operand).toDouble(), ); /// Modulo (remainder) operator. /// /// Returns a radius whose coordinates are the remainder of dividing the /// coordinates of the left-hand-side operand (a radius) by the scalar /// right-hand-side operand (a double). @override MoonSquircleRadius operator %(double operand) => MoonSquircleRadius( cornerRadius: cornerRadius % operand, cornerSmoothing: cornerSmoothing % operand, ); /// Linearly interpolate between two smooth radii. /// /// If either is null, this function substitutes [MoonSquircleRadius.zero] /// instead. /// /// The `t` argument represents position on the timeline, with 0.0 meaning /// that the interpolation has not started, returning `a` (or something /// equivalent to `a`), 1.0 meaning that the interpolation has finished, /// returning `b` (or something equivalent to `b`), and values in between /// meaning that the interpolation is at the relevant point on the timeline /// between `a` and `b`. The interpolation can be extrapolated beyond 0.0 and /// 1.0, so negative values and values greater than 1.0 are valid (and can /// easily be generated by curves such as [Curves.elasticInOut]). /// /// Values for `t` are usually obtained from an [Animation], such as /// an [AnimationController]. static MoonSquircleRadius? lerp( MoonSquircleRadius? a, MoonSquircleRadius? b, double t, ) { if (b == null) { if (a == null) { return null; } else { final double k = 1.0 - t; return MoonSquircleRadius( cornerRadius: a.cornerRadius * k, cornerSmoothing: a.cornerSmoothing * k, ); } } else { if (a == null) { return MoonSquircleRadius( cornerRadius: b.cornerRadius * t, cornerSmoothing: b.cornerSmoothing * t, ); } else { return MoonSquircleRadius( cornerRadius: lerpDouble(a.cornerRadius, b.cornerRadius, t) ?? 0, cornerSmoothing: lerpDouble( a.cornerSmoothing, b.cornerSmoothing, t, ) ?? 0, ); } } } @override bool operator ==(Object other) { if (identical(this, other)) return true; if (runtimeType != other.runtimeType) return false; return other is MoonSquircleRadius && other.cornerRadius == cornerRadius && other.cornerSmoothing == cornerSmoothing; } @override int get hashCode => Object.hash(cornerRadius, cornerSmoothing); @override String toString() { return 'MoonSquircleRadius(' 'cornerRadius: ${cornerRadius.toStringAsFixed(2)}, ' 'cornerSmoothing: ${cornerSmoothing.toStringAsFixed(2)}, ' ')'; } } ================================================ FILE: lib/src/utils/touch_target_padding.dart ================================================ import 'dart:math' as math; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; class TouchTargetPadding extends SingleChildRenderObjectWidget { final Size minSize; const TouchTargetPadding({super.child, required this.minSize}); @override RenderObject createRenderObject(BuildContext context) { return _RenderTouchTargetPadding(minSize); } @override void updateRenderObject( BuildContext context, covariant _RenderTouchTargetPadding renderObject, ) { renderObject.minSize = minSize; } } class _RenderTouchTargetPadding extends RenderShiftedBox { Size _minSize; _RenderTouchTargetPadding(this._minSize, [RenderBox? child]) : super(child); Size get minSize => _minSize; set minSize(Size value) { if (_minSize != value) { _minSize = value; markNeedsLayout(); } } @override double computeMinIntrinsicWidth(double height) => child != null ? math.max(child!.getMinIntrinsicWidth(height), minSize.width) : 0.0; @override double computeMinIntrinsicHeight(double width) => child != null ? math.max(child!.getMinIntrinsicHeight(width), minSize.height) : 0.0; @override double computeMaxIntrinsicWidth(double height) => child != null ? math.max(child!.getMaxIntrinsicWidth(height), minSize.width) : 0.0; @override double computeMaxIntrinsicHeight(double width) => child != null ? math.max(child!.getMaxIntrinsicHeight(width), minSize.height) : 0.0; Size _computeSize({ required BoxConstraints constraints, required ChildLayouter layoutChild, }) { if (child != null) { final Size childSize = layoutChild(child!, constraints); final double height = math.max(childSize.width, minSize.width); final double width = math.max(childSize.height, minSize.height); return constraints.constrain(Size(height, width)); } return Size.zero; } @override Size computeDryLayout(BoxConstraints constraints) { return _computeSize( constraints: constraints, layoutChild: ChildLayoutHelper.dryLayoutChild, ); } @override void performLayout() { size = _computeSize( constraints: constraints, layoutChild: ChildLayoutHelper.layoutChild, ); if (child != null) { final BoxParentData childParentData = child!.parentData! as BoxParentData; childParentData.offset = Alignment.center.alongOffset(size - child!.size as Offset); } } @override bool hitTest(BoxHitTestResult result, {required Offset position}) { if (super.hitTest(result, position: position)) return true; final Offset center = child!.size.center(Offset.zero); return result.addWithRawTransform( transform: MatrixUtils.forceToPoint(center), position: center, hitTest: (BoxHitTestResult result, Offset position) { assert(position == center); return child!.hitTest(result, position: center); }, ); } } ================================================ FILE: lib/src/utils/widget_surveyor.dart ================================================ // Licensed to the Apache Software Foundation (ASF) under one or more // contributor license agreements. See the NOTICE file distributed with // this work for additional information regarding copyright ownership. // The ASF licenses this file to you under the Apache License, // Version 2.0 (the "License"); you may not use this file except in // compliance with the License. You may obtain a copy of the License at // // http://www.apache.org/licenses/LICENSE-2.0 // // Unless required by applicable law or agreed to in writing, software // distributed under the License is distributed on an "AS IS" BASIS, // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. // See the License for the specific language governing permissions and // limitations under the License. import 'package:flutter/rendering.dart'; import 'package:flutter/widgets.dart'; /// Allows callers to measure the size of arbitrary widgets when laid out with /// specific constraints. /// /// The widget surveyor creates synthetic widget trees to hold the widgets it /// measures. This is crucial because widgets relying on inherited widgets /// (e.g., [Directionality]) assume they exist in their ancestry. These /// assumptions may hold true when the widget is rendered by the application but /// prove false when the widget is rendered via the widget surveyor. /// /// Due to this, callers should ensure that: /// /// 1. Passed-in widgets do not rely on inherited widgets, or /// 2. All necessary inherited widget dependencies exist in the widget tree /// provided to the widget surveyor's measure methods. class WidgetSurveyor { const WidgetSurveyor(); /// Builds a widget using the specified builder function, inserts the widget /// into a synthetic widget tree, lays out the resulting render tree, and /// returns the size of the laid-out render tree. /// /// The build context passed to the [builder] function represents the root of /// the synthetic tree. /// /// The [constraints] argument specifies the constraints passed to the render /// tree during layout. If unspecified, the widget will be laid out /// unconstrained. Size measureBuilder( WidgetBuilder builder, { BoxConstraints constraints = const BoxConstraints(), }) { return measureWidget(Builder(builder: builder), constraints: constraints); } /// Inserts the specified widget into a synthetic widget tree, lays out the /// resulting render tree, and returns the size of the laid-out render tree. /// /// The [constraints] argument specifies the constraints passed to the render /// tree during layout. If unspecified, the widget will be laid out /// unconstrained. Size measureWidget( Widget widget, { BoxConstraints constraints = const BoxConstraints(), }) { final SurveyorView rendered = _render(widget, constraints); assert(rendered.hasSize); return rendered.size; } double measureDistanceToBaseline( Widget widget, { TextBaseline baseline = TextBaseline.alphabetic, BoxConstraints constraints = const BoxConstraints(), }) { final SurveyorView rendered = _render(widget, constraints, baselineToCalculate: baseline); return rendered.childBaseline ?? rendered.size.height; } double? measureDistanceToActualBaseline( Widget widget, { TextBaseline baseline = TextBaseline.alphabetic, BoxConstraints constraints = const BoxConstraints(), }) { final SurveyorView rendered = _render(widget, constraints, baselineToCalculate: baseline); return rendered.childBaseline; } SurveyorView _render( Widget widget, BoxConstraints constraints, { TextBaseline? baselineToCalculate, }) { bool debugIsPerformingCleanup = false; final PipelineOwner pipelineOwner = PipelineOwner( onNeedVisualUpdate: () { assert(() { if (!debugIsPerformingCleanup) { throw FlutterError.fromParts([ ErrorSummary('Visual update was requested during survey.'), ErrorDescription( 'WidgetSurveyor does not support a render object ' 'calling markNeedsLayout(), markNeedsPaint(), or ' 'markNeedsSemanticUpdate() while the widget is being surveyed.'), ]); } return true; }()); }, ); final SurveyorView rootView = pipelineOwner.rootNode = SurveyorView(); final BuildOwner buildOwner = BuildOwner(focusManager: FocusManager()); assert(buildOwner.globalKeyCount == 0); final RenderObjectToWidgetElement element = RenderObjectToWidgetAdapter( container: rootView, debugShortDescription: '[root]', child: widget, ).attachToRenderTree(buildOwner); try { rootView.baselineToCalculate = baselineToCalculate; rootView.childConstraints = constraints; rootView.scheduleInitialLayout(); pipelineOwner.flushLayout(); assert(rootView.child != null); return rootView; } finally { // Unmounts all child elements to ensure proper cleanup. debugIsPerformingCleanup = true; try { element.update( RenderObjectToWidgetAdapter(container: rootView), ); buildOwner.finalizeTree(); } finally { debugIsPerformingCleanup = false; } assert( buildOwner.globalKeyCount == 1, ); // RenderObjectToWidgetAdapter uses a global key. } } } class SurveyorView extends RenderBox with RenderObjectWithChildMixin { BoxConstraints? childConstraints; TextBaseline? baselineToCalculate; double? childBaseline; @override void performLayout() { assert(child != null); assert(childConstraints != null); child!.layout(childConstraints!, parentUsesSize: true); if (baselineToCalculate != null) { childBaseline = child!.getDistanceToBaseline(baselineToCalculate!); } size = child!.size; } @override void debugAssertDoesMeetConstraints() => true; } ================================================ FILE: lib/src/widgets/accordion/accordion.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/accordion/accordion_size_properties.dart'; import 'package:moon_design/src/theme/accordion/accordion_sizes.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; import 'package:moon_icons/moon_icons.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonAccordionSize { sm, md, lg, xl, } class MoonAccordion extends StatefulWidget { /// The alignment of [children], which are arranged in a column when the /// accordion is expanded. /// /// Internally, the expanded accordion uses a [Column] widget for [children] /// and an [Align] widget to align the column. The [expandedAlignment] /// parameter is directly passed into the [Align]. /// /// Modifying this property controls the alignment of the column within the /// expanded accordion, not the alignment of [children] widgets within the /// column. /// To align each child within [children], see [expandedCrossAxisAlignment]. /// /// The width of the column is determined by the widest child widget in /// [children]. final AlignmentGeometry? expandedAlignment; /// The alignment of each child within [children] when the accordion is /// expanded. /// /// Internally, the expanded accordion uses a [Column] widget for /// [children], and the `crossAxisAlignment` parameter is directly passed into /// the [Column]. /// /// Modifying this property controls the cross axis alignment of each child /// within its [Column]. The width of the [Column] housing [children] will be /// the same as the widest child widget in [children]. It is not necessarily /// that the width of the [Column] is equal to the width of the expanded /// accordion. /// /// To align the [Column] along the expanded accordion, use the /// [expandedAlignment] property instead. final CrossAxisAlignment? expandedCrossAxisAlignment; /// Whether to propagate gestures to the children of the accordion. /// Defaults to true. final bool propagateGesturesToChild; /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether to display the accordion content outside of its header. final bool hasContentOutside; /// Whether the accordion is initially expanded (true) or collapsed (false). /// Defaults to collapsed state. /// If the [identityValue] matches the [groupIdentityValue], this parameter is /// disregarded. final bool initiallyExpanded; /// Whether the accordion is disabled. final bool isDisabled; /// Whether to preserve the state of the [children] when the accordion expands /// and collapses. /// /// When true, the children remain in the widget tree even when the accordion /// is collapsed. When false (default), the children are removed from the tree /// when the accordion is collapsed and recreated when it is expanded. final bool maintainState; /// Whether to show a border around the accordion. final bool showBorder; /// Whether to show a dividing line between the accordion header and the body. final bool showDivider; /// The border radius of the accordion. final BorderRadiusGeometry? borderRadius; /// {@macro flutter.material.Material.clipBehavior} final Clip? clipBehavior; /// The icon color of the collapsed accordion header. final Color? iconColor; /// The icon color of the expanded accordion header. final Color? expandedIconColor; /// The text color of the collapsed accordion header. final Color? textColor; /// The text color of the expanded accordion header. final Color? expandedTextColor; /// The background color of the collapsed accordion. final Color? backgroundColor; /// The background color of the expanded accordion. final Color? expandedBackgroundColor; /// The border color of the accordion. final Color? borderColor; /// The color of the line dividing the accordion header from the body. final Color? dividerColor; /// The custom decoration of the accordion. final Decoration? decoration; /// The gap between the [leading], [label] and [trailing] widgets of the /// accordion header. final double? gap; /// The height of the accordion header. final double? headerHeight; /// The duration of the accordion transition animation (expand and collapse). final Duration? transitionDuration; /// The curve of the accordion transition animation (expand and collapse). final Curve? transitionCurve; /// The padding of the accordion [children]. final EdgeInsetsGeometry? childrenPadding; /// The padding of the accordion header. final EdgeInsetsGeometry? headerPadding; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The list of shadows applied to the accordion. final List? shadows; /// The size of the accordion. final MoonAccordionSize? accordionSize; /// The semantic label for the accordion. final String? semanticLabel; /// The identity value represented by this accordion. final T? identityValue; /// The currently selected identity value for a group of accordions. /// /// This accordion is considered selected if its [identityValue] is equal to /// the [groupIdentityValue]. final T? groupIdentityValue; /// The callback that is called when the accordion expands or collapses. /// /// When the accordion expansion changes, this function is called with the /// [identityValue]. final ValueChanged? onExpansionChanged; /// The widget to display before the [label] widget of the accordion. /// /// Typically, a [CircleAvatar] widget is used. final Widget? leading; /// The primary content of the accordion header. /// /// Typically, a [Text] widget is used. final Widget label; /// The widget to display after the [label] widget of the accordion. /// /// Depending on the value of [controlAffinity], the [trailing] widget /// may replace the rotating expansion arrow icon. final Widget? trailing; /// The list of widgets to display as the content of the accordion when the /// accordion expands. final List children; /// Creates a Moon Design accordion. const MoonAccordion({ super.key, this.expandedAlignment, this.expandedCrossAxisAlignment, this.propagateGesturesToChild = true, this.autofocus = false, this.hasContentOutside = false, this.initiallyExpanded = false, this.isDisabled = false, this.maintainState = false, this.showBorder = false, this.showDivider = true, this.borderRadius, this.clipBehavior, this.iconColor, this.expandedIconColor, this.textColor, this.expandedTextColor, this.backgroundColor, this.expandedBackgroundColor, this.borderColor, this.dividerColor, this.decoration, this.gap, this.headerHeight, this.transitionDuration, this.transitionCurve, this.childrenPadding, this.headerPadding, this.focusNode, this.shadows, this.accordionSize, this.semanticLabel, this.identityValue, this.groupIdentityValue, this.onExpansionChanged, this.leading, required this.label, this.trailing, this.children = const [], }) : assert( expandedCrossAxisAlignment != CrossAxisAlignment.baseline, 'CrossAxisAlignment.baseline is not supported since the expanded ' 'children are aligned in a column, not a row. Try to use another ' 'constant.', ); bool get _selected => identityValue != null && identityValue == groupIdentityValue; @override State> createState() => _MoonAccordionState(); } class _MoonAccordionState extends State> with TickerProviderStateMixin { static final Animatable _halfTween = Tween(begin: 0.0, end: 0.5); late MoonAccordionSizeProperties _effectiveMoonAccordionSize; late BorderRadiusGeometry _effectiveBorderRadius; late EdgeInsetsGeometry _effectiveHeaderPadding; late EdgeInsets _resolvedDirectionalHeaderPadding; late double _effectiveHeaderHeight; final ColorTweenWithPremultipliedAlpha _textColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _iconColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _backgroundColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _hoverColorTween = ColorTweenWithPremultipliedAlpha(); Animation? _textColor; Animation? _iconColor; Animation? _backgroundColor; Animation? _hoverColor; AnimationController? _expansionAnimationController; AnimationController? _hoverAnimationController; CurvedAnimation? _expansionCurvedAnimation; FocusNode? _focusNode; Color? _effectiveHoverEffectColor; bool _isExpanded = false; FocusNode get _effectiveFocusNode => widget.focusNode ?? (_focusNode ??= FocusNode()); void _handleActiveState(bool isActive) { isActive ? _hoverAnimationController!.forward() : _hoverAnimationController!.reverse(); } void _handleTap() { setState(() { _isExpanded = !_isExpanded; if (_isExpanded) { _expansionAnimationController!.forward(); } else { _expansionAnimationController!.reverse().then((void value) { if (!mounted) return; setState(() { // Rebuild without widget.children. }); }); } PageStorage.maybeOf(context)?.writeState(context, _isExpanded); }); widget.onExpansionChanged?.call(_isExpanded ? widget.identityValue : null); } MoonAccordionSizeProperties _getMoonAccordionSize( BuildContext context, MoonAccordionSize? moonAccordionSize, ) { switch (moonAccordionSize) { case MoonAccordionSize.sm: return context.moonTheme?.accordionTheme.sizes.sm ?? MoonAccordionSizes(tokens: MoonTokens.light).sm; case MoonAccordionSize.md: return context.moonTheme?.accordionTheme.sizes.md ?? MoonAccordionSizes(tokens: MoonTokens.light).md; case MoonAccordionSize.lg: return context.moonTheme?.accordionTheme.sizes.lg ?? MoonAccordionSizes(tokens: MoonTokens.light).lg; case MoonAccordionSize.xl: return context.moonTheme?.accordionTheme.sizes.xl ?? MoonAccordionSizes(tokens: MoonTokens.light).xl; default: return context.moonTheme?.accordionTheme.sizes.md ?? MoonAccordionSizes(tokens: MoonTokens.light).md; } } @override void initState() { super.initState(); _isExpanded = PageStorage.maybeOf(context)?.readState(context) as bool? ?? widget.initiallyExpanded || widget._selected; WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; if (_isExpanded) { _expansionAnimationController!.value = 1.0; } }); } @override void didUpdateWidget(MoonAccordion oldWidget) { super.didUpdateWidget(oldWidget); if (widget.identityValue == null && widget.groupIdentityValue == null) { return; } _isExpanded = widget._selected; setState(() { if (_isExpanded) { _expansionAnimationController!.forward(); } else { _expansionAnimationController!.reverse().then((void value) { if (!mounted) return; setState(() { // Rebuild without widget.children. }); }); } PageStorage.maybeOf(context)?.writeState(context, _isExpanded); }); } @override void dispose() { _expansionAnimationController!.dispose(); _hoverAnimationController!.dispose(); super.dispose(); } Widget? _buildIcon(BuildContext context) { final double iconSize = _getMoonAccordionSize(context, widget.accordionSize).iconSizeValue; final Color effectiveTrailingIconColor = widget.iconColor ?? context.moonTheme?.accordionTheme.colors.trailingIconColor ?? MoonColors.light.textSecondary; final Color effectiveExpandedTrailingIconColor = widget.expandedIconColor ?? context.moonTheme?.accordionTheme.colors.expandedTrailingIconColor ?? MoonColors.light.textPrimary; _iconColor ??= _iconColorTween.animate(_expansionCurvedAnimation!); _iconColorTween ..begin = effectiveTrailingIconColor ..end = effectiveExpandedTrailingIconColor; return IconTheme( data: IconThemeData(color: _iconColor?.value), child: RotationTransition( turns: _halfTween.animate(_expansionCurvedAnimation!), child: Icon( switch (iconSize) { 16 => MoonIcons.controls_chevron_down_small_16_light, 24 => MoonIcons.controls_chevron_down_small_24_light, _ => MoonIcons.controls_chevron_down_small_32_regular, }, size: iconSize, ), ), ); } Widget _buildDecorationContainer({required Widget child}) { final Color effectiveBorderColor = widget.borderColor ?? context.moonTheme?.accordionTheme.colors.borderColor ?? MoonColors.light.beerus; final List effectiveShadows = widget.shadows ?? context.moonTheme?.accordionTheme.shadows.shadows ?? MoonShadows.light.sm; return MoonBaseControl( onTap: widget.isDisabled ? null : _handleTap, propagateGesturesToChild: widget.propagateGesturesToChild, autofocus: widget.autofocus, focusNode: _effectiveFocusNode, borderRadius: _effectiveBorderRadius.squircleBorderRadius(context), builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { final bool isActive = isHovered || isFocused; _handleActiveState(isActive); return AnimatedBuilder( animation: _hoverAnimationController!, builder: (BuildContext context, Widget? child) { return Container( clipBehavior: widget.clipBehavior ?? Clip.hardEdge, decoration: widget.decoration ?? ShapeDecoration( color: _hoverColor!.value, shadows: effectiveShadows, shape: MoonSquircleBorder( side: widget.showBorder ? BorderSide(color: effectiveBorderColor) : BorderSide.none, borderRadius: _effectiveBorderRadius.squircleBorderRadius(context), ), ), child: child, ); }, child: child, ); }, ); } Widget _buildContent(BuildContext context, Widget? rootChild) { _effectiveHoverEffectColor ??= context.moonEffects?.controlHoverEffect.primaryHoverColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .primaryHoverColor; _effectiveMoonAccordionSize = _getMoonAccordionSize(context, widget.accordionSize); _effectiveBorderRadius = widget.borderRadius ?? _effectiveMoonAccordionSize.borderRadius; _effectiveHeaderHeight = widget.headerHeight ?? _effectiveMoonAccordionSize.headerHeight; _effectiveHeaderPadding = widget.headerPadding ?? _effectiveMoonAccordionSize.headerPadding; _resolvedDirectionalHeaderPadding = _effectiveHeaderPadding.resolve(Directionality.of(context)); final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.accordionTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveExpandedBackgroundColor = widget.expandedBackgroundColor ?? context.moonTheme?.accordionTheme.colors.expandedBackgroundColor ?? MoonColors.light.goku; final Color effectiveIconColor = widget.iconColor ?? context.moonTheme?.accordionTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final Color effectiveExpandedIconColor = widget.expandedIconColor ?? context.moonTheme?.accordionTheme.colors.expandedIconColor ?? MoonColors.light.iconPrimary; final Color effectiveTextColor = widget.textColor ?? context.moonTheme?.accordionTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveExpandedTextColor = widget.expandedTextColor ?? context.moonTheme?.accordionTheme.colors.expandedTextColor ?? MoonColors.light.textPrimary; final Color effectiveContentTextColor = context.moonTheme?.accordionTheme.colors.contentColor ?? MoonColors.light.textPrimary; final TextStyle effectiveHeaderTextStyle = _effectiveMoonAccordionSize.headerTextStyle; final TextStyle effectiveContentTextStyle = _effectiveMoonAccordionSize.contentTextStyle; final Color effectiveHoverEffectColor = context.moonEffects?.controlHoverEffect.primaryHoverColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .primaryHoverColor; final Duration effectiveHoverEffectDuration = context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .hoverDuration; final Curve effectiveHoverEffectCurve = context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .hoverCurve; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.accordionTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.accordionTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; _expansionAnimationController ??= AnimationController(duration: effectiveTransitionDuration, vsync: this); _expansionCurvedAnimation ??= CurvedAnimation( parent: _expansionAnimationController!, curve: effectiveTransitionCurve, ); _hoverAnimationController ??= AnimationController( duration: effectiveHoverEffectDuration, vsync: this, ); _backgroundColor ??= _backgroundColorTween.animate(_expansionCurvedAnimation!); _backgroundColorTween ..begin = effectiveBackgroundColor ..end = effectiveExpandedBackgroundColor; _hoverColor ??= _hoverAnimationController!.drive( _hoverColorTween.chain(CurveTween(curve: effectiveHoverEffectCurve)), ); _hoverColorTween ..begin = _backgroundColor!.value ..end = Color.alphaBlend( effectiveHoverEffectColor, _backgroundColor!.value!, ); _textColor ??= _textColorTween.animate(_expansionCurvedAnimation!); _textColorTween ..begin = effectiveTextColor ..end = effectiveExpandedTextColor; _iconColor ??= _iconColorTween.animate(_expansionCurvedAnimation!); _iconColorTween ..begin = effectiveIconColor ..end = effectiveExpandedIconColor; final Widget header = SizedBox( height: _effectiveHeaderHeight, child: Padding( padding: _resolvedDirectionalHeaderPadding, child: IconTheme( data: IconThemeData(color: _iconColor!.value), child: DefaultTextStyle( style: effectiveHeaderTextStyle.copyWith(color: _textColor!.value), child: Row( children: [ if (widget.leading != null) Padding( padding: EdgeInsetsDirectional.only( end: widget.gap ?? _resolvedDirectionalHeaderPadding.left, ), child: widget.leading, ), Expanded(child: widget.label), Padding( padding: EdgeInsetsDirectional.only( start: widget.gap ?? _resolvedDirectionalHeaderPadding.right, ), child: widget.trailing ?? _buildIcon(context)!, ), ], ), ), ), ), ); final Widget childWrapper = ClipRect( child: IconTheme( data: IconThemeData(color: effectiveContentTextColor), child: DefaultTextStyle( style: effectiveContentTextStyle.copyWith( color: effectiveContentTextColor, ), child: Align( alignment: widget.expandedAlignment ?? Alignment.topCenter, heightFactor: _expansionCurvedAnimation!.value, child: rootChild, ), ), ), ); return switch (widget.hasContentOutside) { true => Semantics( label: widget.semanticLabel, enabled: _isExpanded, child: Column( mainAxisSize: MainAxisSize.min, children: [ _buildDecorationContainer(child: header), childWrapper, ], ), ), false => Semantics( label: widget.semanticLabel, enabled: _isExpanded, child: _buildDecorationContainer( child: Column( mainAxisSize: MainAxisSize.min, children: [ header, childWrapper, ], ), ), ), }; } @override Widget build(BuildContext context) { final Color effectiveDividerColor = widget.dividerColor ?? context.moonTheme?.accordionTheme.colors.dividerColor ?? MoonColors.light.beerus; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.accordionTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; _expansionAnimationController ??= AnimationController( duration: effectiveTransitionDuration, vsync: this, ); final bool isClosed = !_isExpanded && _expansionAnimationController!.isDismissed; final bool shouldRemoveChildren = isClosed && !widget.maintainState; final Widget result = Offstage( offstage: isClosed, child: TickerMode( enabled: !isClosed, child: Column( children: [ if (widget.showDivider && !widget.hasContentOutside) Container(height: 1, color: effectiveDividerColor), Padding( padding: widget.childrenPadding ?? EdgeInsets.zero, child: Column( crossAxisAlignment: widget.expandedCrossAxisAlignment ?? CrossAxisAlignment.center, children: widget.children, ), ), ], ), ), ); return RepaintBoundary( child: AnimatedBuilder( animation: _expansionAnimationController!.view, builder: _buildContent, child: shouldRemoveChildren ? null : result, ), ); } } ================================================ FILE: lib/src/widgets/alert/alert.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonAlert extends StatefulWidget { /// Whether to show the alert. final bool show; /// Whether to show a border around the alert. final bool showBorder; /// The border radius of the alert. final BorderRadiusGeometry? borderRadius; /// The background color of the alert. final Color? backgroundColor; /// The border color of the alert. final Color? borderColor; /// The text and icon color of the alert. final Color? color; /// The border width of the alert. final double? borderWidth; /// The horizontal gap between the [leading], [label] and [trailing] widgets /// of the alert. final double? horizontalGap; /// The minimum height of the alert. final double? minimumHeight; /// The vertical gap between the alert header and [content]. final double? verticalGap; /// The duration of the alert transition animation (fade in or out). final Duration? transitionDuration; /// The curve of the alert transition animation (fade in or out). final Curve? transitionCurve; /// The padding of the alert. final EdgeInsetsGeometry? padding; /// The custom decoration of the alert. final Decoration? decoration; /// The semantic label for the alert. final String? semanticLabel; /// The widget to display before the [label] widget of the alert. final Widget? leading; /// The primary content of the alert header. final Widget label; /// The widget to display after the [label] widget of the alert. final Widget? trailing; /// The widget to display below the alert header. final Widget? content; /// Creates a Moon Design base alert. /// /// See also: /// /// * [MoonAlert.filled], Moon Design filled alert. /// * [MoonAlert.outlined], Moon Design outlined alert. const MoonAlert({ super.key, this.show = false, this.showBorder = false, this.borderRadius, this.backgroundColor, this.borderColor, this.color, this.borderWidth, this.horizontalGap, this.minimumHeight, this.verticalGap, this.transitionDuration, this.transitionCurve, this.padding, this.decoration, this.semanticLabel, this.leading, required this.label, this.trailing, this.content, }); /// Creates a Moon Design filled alert. /// /// See also: /// /// * [MoonAlert.outlined], Moon Design outlined alert. const MoonAlert.filled({ super.key, this.show = false, this.borderRadius, this.color, required this.backgroundColor, this.semanticLabel, this.leading, required this.label, this.trailing, this.content, }) : showBorder = false, borderColor = null, borderWidth = null, decoration = null, minimumHeight = null, padding = null, horizontalGap = null, verticalGap = null, transitionDuration = null, transitionCurve = null; /// Creates a Moon Design outlined alert. /// /// See also: /// /// * [MoonAlert.filled], Moon Design filled alert. const MoonAlert.outlined({ super.key, this.show = false, this.borderRadius, this.borderWidth, this.color, required this.borderColor, this.semanticLabel, this.leading, required this.label, this.trailing, this.content, }) : showBorder = true, backgroundColor = Colors.transparent, decoration = null, minimumHeight = null, padding = null, horizontalGap = null, verticalGap = null, transitionDuration = null, transitionCurve = null; @override State createState() => _MoonAlertState(); } class _MoonAlertState extends State with SingleTickerProviderStateMixin { bool _isVisible = true; AnimationController? _animationController; Animation? _curvedAnimation; TextStyle _getLabelTextStyle({required BuildContext context}) { if (widget.content != null) { return context.moonTheme?.alertTheme.properties.labelTextStyle ?? MoonTypography.typography.heading.textDefault; } else { return context.moonTheme?.alertTheme.properties.contentTextStyle ?? MoonTypography.typography.body.textDefault; } } void _showAlert() { _animationController!.forward(); setState(() => _isVisible = true); } void _hideAlert() { _animationController!.reverse().then((void value) { if (mounted) setState(() => _isVisible = false); }); } @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; if (_isVisible) _animationController!.value = 1.0; }); } @override void didUpdateWidget(MoonAlert oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.show != widget.show) { widget.show ? _showAlert() : _hideAlert(); } } @override void dispose() { _animationController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.alertTheme.properties.borderRadius ?? MoonBorders.borders.interactiveSm; final double effectiveBorderWidth = widget.borderWidth ?? context.moonBorders?.defaultBorderWidth ?? MoonBorders.borders.defaultBorderWidth; final double effectiveHorizontalGap = widget.horizontalGap ?? context.moonTheme?.alertTheme.properties.horizontalGap ?? MoonSizes.sizes.x3s; final double effectiveVerticalGap = widget.verticalGap ?? context.moonTheme?.alertTheme.properties.verticalGap ?? MoonSizes.sizes.x4s; final double effectiveMinimumHeight = widget.minimumHeight ?? context.moonTheme?.alertTheme.properties.minimumHeight ?? MoonSizes.sizes.xl; final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.alertTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveBorderColor = widget.borderColor ?? context.moonTheme?.alertTheme.colors.borderColor ?? MoonColors.light.bulma; final Color effectiveTextColor = widget.color ?? context.moonTheme?.alertTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = widget.color ?? context.moonTheme?.alertTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final EdgeInsetsGeometry effectivePadding = widget.padding ?? context.moonTheme?.alertTheme.properties.padding ?? EdgeInsets.all(MoonSizes.sizes.x2s); final TextStyle effectiveLabelTextStyle = _getLabelTextStyle(context: context); final TextStyle effectiveContentTextStyle = context.moonTheme?.alertTheme.properties.contentTextStyle ?? MoonTypography.typography.body.textDefault; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.alertTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.alertTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; _animationController ??= AnimationController( duration: effectiveTransitionDuration, vsync: this, ); _curvedAnimation ??= CurvedAnimation( parent: _animationController!, curve: effectiveTransitionCurve, ); return Visibility( visible: _isVisible, child: Semantics( label: widget.semanticLabel, child: RepaintBoundary( child: FadeTransition( opacity: _curvedAnimation!, child: Container( padding: effectivePadding, constraints: BoxConstraints(minHeight: effectiveMinimumHeight), decoration: widget.decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shape: MoonSquircleBorder( side: BorderSide( color: effectiveBorderColor, width: widget.showBorder ? effectiveBorderWidth : 0, style: widget.showBorder ? BorderStyle.solid : BorderStyle.none, ), borderRadius: effectiveBorderRadius.squircleBorderRadius(context), ), ), child: IconTheme( data: IconThemeData( color: effectiveIconColor, ), child: DefaultTextStyle( style: effectiveContentTextStyle.copyWith( color: effectiveTextColor, ), child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Row( children: [ if (widget.leading != null) Padding( padding: EdgeInsetsDirectional.only( end: effectiveHorizontalGap, ), child: widget.leading, ), DefaultTextStyle( style: effectiveLabelTextStyle.copyWith( color: effectiveTextColor, ), child: Expanded( child: widget.label, ), ), if (widget.trailing != null) Padding( padding: EdgeInsetsDirectional.only( start: effectiveHorizontalGap, ), child: widget.trailing, ), ], ), if (widget.content != null) Row( children: [ Expanded( child: Padding( padding: EdgeInsetsDirectional.only( top: effectiveVerticalGap, ), child: widget.content, ), ), ], ), ], ), ), ), ), ), ), ), ); } } ================================================ FILE: lib/src/widgets/auth_code/auth_code.dart ================================================ import 'dart:async'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum AuthFieldShape { box, underline, circle, } enum ErrorAnimationType { noAnimation, shake, } typedef MoonAuthCodeErrorBuilder = Widget Function( BuildContext context, String? errorText, ); class MoonAuthCode extends StatefulWidget { /// The shape of the auth code input field. final AuthFieldShape? authFieldShape; /// Whether to automatically dismiss the keyboard when the last input is /// entered. final bool autoDismissKeyboard; /// {@macro flutter.widgets.Focus.autofocus} final bool autoFocus; /// Whether to automatically unfocus the auth code. final bool autoUnfocus; /// Whether the auth code is enabled. final bool enabled; /// Whether to enable the fill color for the auth code input fields. final bool enableInputFill; /// Whether to replace all typed characters in the auth code input fields with /// the [obscuringCharacter]. final bool obscureText; /// Whether to briefly display the typed character before obscuring it with /// the [obscuringCharacter]. final bool peekWhenObscuring; /// Whether to show the cursor in the selected auth code input field. final bool showAuthFieldCursor; /// Whether to use haptic feedback (vibration) for auth code error state. final bool useHapticFeedback; /// The border radius of the auth code input field. final BorderRadiusGeometry? borderRadius; /// The cursor color of the auth code input field. final Color? authFieldCursorColor; /// The border color of the selected auth code input field. final Color? selectedBorderColor; /// The border color of the auth code input field with input. final Color? activeBorderColor; /// The border color of the auth code input field without input. final Color? inactiveBorderColor; /// The border color of the auth code input field in error state. final Color? errorBorderColor; /// The fill color of the selected auth code input field. /// /// [enableInputFill] has to be set true. final Color? selectedFillColor; /// The fill color of the auth code input field with input. /// /// [enableInputFill] has to be set true. final Color? activeFillColor; /// The fill color of the auth code input field without input. /// /// [enableInputFill] has to be set true. final Color? inactiveFillColor; /// The border width of the auth code input field. final double? borderWidth; /// The opacity value of the auth code when [enabled] is false. final double? disabledOpacityValue; /// The horizontal gap between the auth code input fields. final double? gap; /// The height of the auth code input field. final double? height; /// The width of the auth code input field. final double? width; /// The duration of the auth code input field transition animation. final Duration? animationDuration; /// The duration of the auth code error state animation. final Duration? errorAnimationDuration; /// The duration to display the typed character before it is obscured with /// [obscuringCharacter]. The [peekWhenObscuring] has to be set to true. final Duration? peekDuration; /// The curve of the auth code input field transition animation. final Curve? animationCurve; /// The curve of the auth code error state animation. final Curve? errorAnimationCurve; /// The animation type for the auth code validation error. final ErrorAnimationType errorAnimationType; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The total number of input fields to build for the auth code. final int authInputFieldCount; /// The list of shadows applied to the auth code input field. final List? boxShadows; /// The list of shadows applied to the auth code input field with input. final List? activeBoxShadows; /// The list of shadows applied to the auth code input field without input. final List? inActiveBoxShadows; /// {@macro flutter.widgets.editableText.inputFormatters} final List? inputFormatters; /// The placement of the auth code input fields along the main axis. final MainAxisAlignment mainAxisAlignment; /// The error text can be used to force authentication into an error state /// (useful for asynchronous errors). /// /// The validator errors take precedence over the provided [errorText]. final String? errorText; /// The character or placeholder to display in the auth code input field when /// its value is empty. final String? hintCharacter; /// The character to use to obscure the text when [obscureText] is true. /// /// Defaults to Unicode character U+2022 BULLET (•). final String obscuringCharacter; /// The semantic label for the auth code. final String? semanticLabel; /// The action to perform by the text input control. final TextInputAction textInputAction; /// The keyboard [TextInputType] for the auth code. final TextInputType keyboardType; /// The text style of the [hintCharacter]. final TextStyle? hintStyle; /// The text style of the auth code. final TextStyle? textStyle; /// The text style of the auth code in error state. final TextStyle? errorTextStyle; /// The [TextEditingController] used to edit the text in the auth code input /// field. final TextEditingController? textController; /// The input text validator for the auth code [TextFormField]. /// The validator errors take precedence over the provided [errorText]. final FormFieldValidator validator; /// The callback that is called when the auth code input text changes. final ValueChanged? onChanged; /// The callback that is called when all the auth code input fields are /// filled. final ValueChanged? onCompleted; /// The callback that is called when the 'done' or 'next' action is triggered /// on the keyboard. final ValueChanged? onSubmitted; /// The [onEditingComplete] callback runs when editing is finished. /// It differs from [onSubmitted] by having a default value which /// updates [textController] and yields keyboard focus. /// /// Set this to empty function if keyboard should not close automatically on /// 'done' or 'next' press. final VoidCallback? onEditingComplete; /// A builder to build the auth code error widget. final MoonAuthCodeErrorBuilder errorBuilder; /// The widget to obscure the auth code input field text. /// /// Overrides the [obscuringCharacter]. final Widget? obscuringWidget; /// Creates a Moon Design auth code. const MoonAuthCode({ super.key, this.authFieldShape = AuthFieldShape.box, this.autoDismissKeyboard = true, this.autoFocus = false, this.autoUnfocus = true, this.enabled = true, this.enableInputFill = false, this.obscureText = false, this.peekWhenObscuring = false, this.showAuthFieldCursor = true, this.useHapticFeedback = false, this.borderRadius, this.authFieldCursorColor, this.selectedBorderColor, this.activeBorderColor, this.inactiveBorderColor, this.errorBorderColor, this.selectedFillColor, this.activeFillColor, this.inactiveFillColor, this.borderWidth, this.disabledOpacityValue, this.gap, this.height, this.width, this.animationDuration, this.errorAnimationDuration, this.peekDuration, this.animationCurve, this.errorAnimationCurve, this.errorAnimationType = ErrorAnimationType.noAnimation, this.focusNode, this.authInputFieldCount = 6, this.boxShadows, this.activeBoxShadows, this.inActiveBoxShadows, this.inputFormatters, this.mainAxisAlignment = MainAxisAlignment.center, this.hintCharacter, this.obscuringCharacter = '•', this.semanticLabel, this.textInputAction = TextInputAction.done, this.keyboardType = TextInputType.visiblePassword, this.errorText, this.hintStyle, this.textStyle, this.errorTextStyle, this.textController, required this.validator, this.onChanged, this.onCompleted, this.onSubmitted, this.onEditingComplete, required this.errorBuilder, this.obscuringWidget, }) : assert(authInputFieldCount > 0), assert(height == null || height > 0), assert(width == null || width > 0); @override _MoonAuthCodeState createState() => _MoonAuthCodeState(); } class _MoonAuthCodeState extends State with TickerProviderStateMixin { late FocusNode _focusNode; late List _inputList; late BorderRadiusGeometry _effectiveBorderRadius; late Color _effectiveSelectedBorderColor; late Color _effectiveActiveBorderColor; late Color _effectiveInactiveBorderColor; late Color _effectiveErrorBorderColor; late Color _effectiveSelectedFillColor; late Color _effectiveActiveFillColor; late Color _effectiveInactiveFillColor; late Color _effectiveTextColor; late Color _effectiveCursorColor; late double _effectiveBorderWidth; late double _effectiveGap; late double _effectiveHeight; late double _effectiveWidth; late TextStyle _effectiveTextStyle; late TextStyle _effectiveErrorTextStyle; late TextEditingController _textEditingController; late AnimationController _cursorController; late Animation _cursorAnimation; AnimationController? _errorAnimationController; Animation? _errorOffsetAnimation; Duration? _peekDuration; Duration? _animationDuration; Curve? _animationCurve; bool _isInErrorMode = false; bool _hasPeeked = false; int _selectedIndex = 0; Timer? _peekDebounce; TextStyle get _resolvedTextStyle => _effectiveTextStyle.merge(widget.textStyle).copyWith( color: _isInErrorMode ? _resolvedErrorTextStyle.color : widget.textStyle?.color ?? _effectiveTextColor, ); TextStyle get _hintStyle => _resolvedTextStyle.merge(widget.hintStyle); TextStyle get _resolvedErrorTextStyle => _effectiveErrorTextStyle.merge(widget.errorTextStyle).copyWith( color: widget.errorTextStyle?.color ?? _effectiveErrorBorderColor, ); Color get _resolvedErrorCursorColor => _isInErrorMode ? _resolvedErrorTextStyle.color ?? _effectiveErrorBorderColor : _effectiveCursorColor; void _initializeFields() { _initializeFocusNode(); _initializeInputList(); _initializeErrorAnimationListener(); _initializeTextEditingController(); _initializeAuthFieldCursor(); } void _initializeFocusNode() { _focusNode = (widget.focusNode ?? FocusNode()) ..addListener(() => setState(() {})); } void _initializeInputList() { _inputList = List.filled(widget.authInputFieldCount, ''); } void _initializeTextEditingController() { _textEditingController = widget.textController ?? TextEditingController(); _textEditingController.addListener(() { // Since we use custom error builder, manual input validation is required // to trigger validation error. The _validateInput() method returns an // error String in case of an validation error, otherwise null. if (_validateInput() != null) { if (widget.errorAnimationType == ErrorAnimationType.shake) { _errorAnimationController!.forward(); if (widget.useHapticFeedback) HapticFeedback.lightImpact(); } if (!_isInErrorMode) _setState(() => _isInErrorMode = true); } else { if (_isInErrorMode && widget.errorText == null) { _setState(() => _isInErrorMode = false); } } _debounceBlink(); String currentText = _textEditingController.text; if (widget.enabled && _inputList.join() != currentText) { if (currentText.length >= widget.authInputFieldCount) { if (widget.onCompleted != null) { if (currentText.length > widget.authInputFieldCount) { currentText = currentText.substring(0, widget.authInputFieldCount); } Future.delayed( const Duration(milliseconds: 100), () => widget.onCompleted!(currentText), ); } if (widget.autoDismissKeyboard) _focusNode.unfocus(); } widget.onChanged?.call(currentText); } _updateTextField(currentText); }); // If a default value is set for the TextEditingController, // update the text field initial value accordingly. if (_textEditingController.text.isNotEmpty) { _updateTextField(_textEditingController.text); } } void _initializeAuthFieldCursor() { _cursorController = AnimationController(duration: const Duration(seconds: 1), vsync: this); _cursorAnimation = Tween(begin: 1, end: 0).animate( CurvedAnimation( parent: _cursorController, curve: Curves.easeInOut, ), ); if (widget.showAuthFieldCursor) _cursorController.repeat(); } void _initializeErrorAnimationListener() { WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; _errorAnimationController!.addStatusListener((AnimationStatus status) { if (status == AnimationStatus.completed) { _errorAnimationController!.reverse(); } }); }); } void _debounceBlink() { _hasPeeked = true; if (widget.peekWhenObscuring && _textEditingController.text.length > _inputList.where((x) => x.isNotEmpty).length) { _setState(() => _hasPeeked = false); if (_peekDebounce?.isActive ?? false) _peekDebounce!.cancel(); _peekDebounce = Timer(_peekDuration!, () { _setState(() => _hasPeeked = true); }); } } void _onFocus() { if (widget.autoUnfocus) { if (_focusNode.hasFocus && MediaQuery.of(context).viewInsets.bottom == 0) { _focusNode.unfocus(); Future.delayed( const Duration(microseconds: 1), () => _focusNode.requestFocus(), ); } else { _focusNode.requestFocus(); } } else { _focusNode.requestFocus(); } } Color _getBorderColorFromIndex(int index) { if (((_selectedIndex == index) || (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount)) && _focusNode.hasFocus) { return _isInErrorMode ? _effectiveErrorBorderColor : _effectiveSelectedBorderColor; } else if (_selectedIndex > index) { return _isInErrorMode ? _effectiveErrorBorderColor : _effectiveActiveBorderColor; } return _isInErrorMode ? _effectiveErrorBorderColor : _effectiveInactiveBorderColor; } Color _getFillColorFromIndex(int index) { if (((_selectedIndex == index) || (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount)) && _focusNode.hasFocus) { return _effectiveSelectedFillColor; } else if (_selectedIndex > index) { return _effectiveActiveFillColor; } return _effectiveInactiveFillColor; } double _getBorderWidthFromIndex(int index) { if (((_selectedIndex == index) || (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount)) && _focusNode.hasFocus) { return _effectiveBorderWidth + 1; } return _effectiveBorderWidth; } List? _getBoxShadowFromIndex(int index) { if (_selectedIndex == index) { return widget.activeBoxShadows; } else if (_selectedIndex > index) { return widget.inActiveBoxShadows; } return []; } ShapeBorder _getAuthInputFieldShape({required int elementIndex}) { final BorderSide borderSide = BorderSide( color: _getBorderColorFromIndex(elementIndex), width: _getBorderWidthFromIndex(elementIndex), ); switch (widget.authFieldShape) { case AuthFieldShape.circle: return CircleBorder(side: borderSide); case AuthFieldShape.underline: return Border(bottom: borderSide); default: return MoonSquircleBorder( borderRadius: _effectiveBorderRadius.squircleBorderRadius(context), side: borderSide, ); } } Future _updateTextField(String text) async { final List updatedList = List.filled(widget.authInputFieldCount, ''); for (int i = 0; i < widget.authInputFieldCount; i++) { updatedList[i] = text.length > i ? text[i] : ''; } _setState(() { _selectedIndex = text.length; _inputList = updatedList; }); } String? _validateInput() => widget.validator.call(_textEditingController.text); void _setState(void Function() function) { if (mounted) setState(function); } @override void initState() { super.initState(); _isInErrorMode = widget.errorText != null; _initializeFields(); } @override void didUpdateWidget(MoonAuthCode oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.errorText != widget.errorText) { _setState(() { _isInErrorMode = widget.errorText != null || _validateInput() != null; }); } } @override void dispose() { if (widget.textController == null) _textEditingController.dispose(); if (widget.focusNode == null) _focusNode.dispose(); _errorAnimationController!.dispose(); _cursorController.dispose(); super.dispose(); } List _generateAuthInputFields() { final List authInputFields = []; for (int i = 0; i < widget.authInputFieldCount; i++) { authInputFields.add( Padding( padding: EdgeInsetsDirectional.only( end: i == widget.authInputFieldCount - 1 ? 0 : _effectiveGap, ), child: RepaintBoundary( child: Container( width: _effectiveWidth, height: _effectiveHeight, decoration: ShapeDecorationWithPremultipliedAlpha( shape: _getAuthInputFieldShape(elementIndex: i), color: widget.enableInputFill ? _getFillColorFromIndex(i) : Colors.transparent, shadows: (widget.activeBoxShadows != null || widget.inActiveBoxShadows != null) ? _getBoxShadowFromIndex(i) : widget.boxShadows, ), child: Center( child: _buildChild(i), ), ), ), ), ); } return authInputFields; } Widget _buildChild(int index) { if (((_selectedIndex == index) || (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount)) && _focusNode.hasFocus && widget.showAuthFieldCursor) { final double cursorHeight = _resolvedTextStyle.fontSize!; if (_selectedIndex == index + 1 && index + 1 == widget.authInputFieldCount) { return Stack( alignment: Alignment.center, children: [ Center( child: Padding( padding: EdgeInsets.only( left: _resolvedTextStyle.fontSize! / 1.5, ), child: FadeTransition( opacity: _cursorAnimation, child: CustomPaint( size: Size(0, cursorHeight), painter: _CursorPainter( cursorColor: _resolvedErrorCursorColor, ), ), ), ), ), _renderAuthInputFieldText(index: index), ], ); } else { return Center( child: FadeTransition( opacity: _cursorAnimation, child: CustomPaint( size: Size(0, cursorHeight), painter: _CursorPainter( cursorColor: _resolvedErrorCursorColor, ), ), ), ); } } return _renderAuthInputFieldText(index: index); } Widget _renderAuthInputFieldText({@required int? index}) { assert(index != null); final bool showObscured = !widget.peekWhenObscuring || (widget.peekWhenObscuring && _hasPeeked) || index != _inputList.where((x) => x.isNotEmpty).length - 1; if (widget.obscuringWidget != null && showObscured && _inputList[index!].isNotEmpty) { return widget.obscuringWidget!; } if (_inputList[index!].isEmpty && widget.hintCharacter != null) { return Text( widget.hintCharacter!, key: ValueKey(_inputList[index]), style: _hintStyle, ); } final String text = widget.obscureText && _inputList[index].isNotEmpty && showObscured ? widget.obscuringCharacter : _inputList[index]; return Text( text, key: ValueKey(_inputList[index]), style: _resolvedTextStyle, ); } Widget _getTextFormField() { final List inputFormatters = [ LengthLimitingTextInputFormatter(widget.authInputFieldCount), ]; if (widget.inputFormatters != null) { inputFormatters.addAll(widget.inputFormatters!); } return Directionality( textDirection: Directionality.of(context), child: SizedBox( height: _effectiveHeight, child: TextFormField( autocorrect: false, autofocus: widget.autoFocus, autovalidateMode: AutovalidateMode.onUserInteraction, controller: _textEditingController, cursorWidth: 0.01, enabled: widget.enabled, enableInteractiveSelection: false, enableSuggestions: false, focusNode: _focusNode, inputFormatters: inputFormatters, keyboardType: widget.keyboardType, onChanged: widget.onChanged, onEditingComplete: widget.onEditingComplete, onFieldSubmitted: widget.onSubmitted, obscureText: widget.obscureText, obscuringCharacter: widget.obscuringCharacter, scrollPadding: const EdgeInsets.all(24.0), showCursor: true, smartDashesType: SmartDashesType.disabled, textInputAction: widget.textInputAction, decoration: const InputDecoration( contentPadding: EdgeInsets.zero, border: InputBorder.none, enabledBorder: InputBorder.none, focusedBorder: InputBorder.none, disabledBorder: InputBorder.none, ), style: const TextStyle( color: Colors.transparent, fontSize: kIsWeb ? 1 : 0.01, height: .01, ), ), ), ); } @override Widget build(BuildContext context) { _effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.authCodeTheme.properties.borderRadius ?? MoonBorders.borders.interactiveSm; _effectiveBorderWidth = widget.borderWidth ?? context.moonBorders?.defaultBorderWidth ?? MoonBorders.borders.defaultBorderWidth; _effectiveGap = widget.gap ?? context.moonTheme?.authCodeTheme.properties.gap ?? MoonSizes.sizes.x4s; _effectiveHeight = widget.height ?? context.moonTheme?.authCodeTheme.properties.height ?? MoonSizes.sizes.xl; _effectiveWidth = widget.width ?? context.moonTheme?.authCodeTheme.properties.width ?? MoonSizes.sizes.lg; _effectiveSelectedBorderColor = widget.selectedBorderColor ?? context.moonTheme?.authCodeTheme.colors.selectedBorderColor ?? MoonColors.light.piccolo; _effectiveActiveBorderColor = widget.activeBorderColor ?? context.moonTheme?.authCodeTheme.colors.activeBorderColor ?? MoonColors.light.beerus; _effectiveInactiveBorderColor = widget.inactiveBorderColor ?? context.moonTheme?.authCodeTheme.colors.inactiveBorderColor ?? MoonColors.light.beerus; _effectiveErrorBorderColor = widget.errorBorderColor ?? context.moonTheme?.authCodeTheme.colors.errorBorderColor ?? MoonColors.light.chichi; _effectiveSelectedFillColor = widget.selectedFillColor ?? context.moonTheme?.authCodeTheme.colors.selectedFillColor ?? MoonColors.light.goku; _effectiveActiveFillColor = widget.activeFillColor ?? context.moonTheme?.authCodeTheme.colors.activeFillColor ?? MoonColors.light.goku; _effectiveInactiveFillColor = widget.inactiveFillColor ?? context.moonTheme?.authCodeTheme.colors.inactiveFillColor ?? MoonColors.light.goku; _effectiveTextStyle = context.moonTheme?.authCodeTheme.properties.textStyle ?? MoonTypography.typography.body.text24; _effectiveErrorTextStyle = context.moonTheme?.authCodeTheme.properties.errorTextStyle ?? MoonTypography.typography.body.text12; _effectiveTextColor = context.moonTheme?.authCodeTheme.colors.textColor ?? MoonColors.light.textPrimary; _effectiveCursorColor = widget.authFieldCursorColor ?? context.moonTheme?.authCodeTheme.colors.textColor ?? MoonColors.light.textPrimary; _animationDuration ??= widget.animationDuration ?? context.moonTheme?.authCodeTheme.properties.animationDuration ?? MoonTransitions.transitions.defaultTransitionDuration; _animationCurve ??= widget.animationCurve ?? context.moonTheme?.authCodeTheme.properties.animationCurve ?? MoonTransitions.transitions.defaultTransitionCurve; _peekDuration ??= widget.peekDuration ?? context.moonTheme?.authCodeTheme.properties.peekDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final double effectiveDisabledOpacityValue = widget.disabledOpacityValue ?? context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final Duration effectiveErrorAnimationDuration = widget .errorAnimationDuration ?? context.moonTheme?.authCodeTheme.properties.errorAnimationDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveErrorAnimationCurve = widget.errorAnimationCurve ?? context.moonTheme?.authCodeTheme.properties.errorAnimationCurve ?? MoonTransitions.transitions.defaultTransitionCurve; _errorAnimationController ??= AnimationController( duration: effectiveErrorAnimationDuration, vsync: this, ); _errorOffsetAnimation ??= Tween( begin: Offset.zero, end: const Offset(.01, 0.0), ).animate( CurvedAnimation( parent: _errorAnimationController!, curve: effectiveErrorAnimationCurve, ), ); return Semantics( label: widget.semanticLabel, child: RepaintBoundary( child: AnimatedOpacity( duration: _animationDuration!, curve: _animationCurve!, opacity: widget.enabled ? 1 : effectiveDisabledOpacityValue, child: Column( children: [ SlideTransition( position: _errorOffsetAnimation!, child: Stack( children: [ AbsorbPointer( child: AutofillGroup( child: _getTextFormField(), ), ), Positioned( top: 0, left: 0, right: 0, child: GestureDetector( onTap: () => _onFocus(), child: Row( mainAxisAlignment: widget.mainAxisAlignment, children: _generateAuthInputFields(), ), ), ), ], ), ), if (_isInErrorMode) DefaultTextStyle( style: _resolvedErrorTextStyle, child: IconTheme( data: IconThemeData( color: _resolvedErrorTextStyle.color, ), child: widget.errorBuilder( context, _validateInput() ?? widget.errorText, ), ), ), ], ), ), ), ); } } class _CursorPainter extends CustomPainter { final Color cursorColor; _CursorPainter({required this.cursorColor}); @override void paint(Canvas canvas, Size size) { const Offset p1 = Offset.zero; final Offset p2 = Offset(0, size.height); final Paint paint = Paint() ..color = cursorColor ..strokeWidth = 2; canvas.drawLine(p1, p2, paint); } @override bool shouldRepaint(CustomPainter old) => false; } ================================================ FILE: lib/src/widgets/avatar/avatar.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/avatar/avatar_size_properties.dart'; import 'package:moon_design/src/theme/avatar/avatar_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/avatar/avatar_clipper.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonAvatarSize { xs, sm, md, lg, xl, x2l, } enum MoonBadgeAlignment { topLeft, topRight, bottomLeft, bottomRight, } class MoonAvatar extends StatelessWidget { /// Whether to show the avatar badge. final bool showBadge; /// The border radius of the avatar. final BorderRadiusGeometry? borderRadius; /// The background color of the avatar. final Color? backgroundColor; /// The color of the avatar badge. final Color? badgeColor; /// The margin value of the avatar badge. final double? badgeMarginValue; /// The size of the avatar badge. final double? badgeSize; /// The height of the avatar. final double? height; /// The width of the avatar. final double? width; /// The background image of the avatar. final ImageProvider? backgroundImage; /// The size of the avatar. final MoonAvatarSize? avatarSize; /// The alignment of the avatar badge. final MoonBadgeAlignment badgeAlignment; /// The semantic label for the avatar. final String? semanticLabel; /// The widget to display within the avatar. final Widget? content; /// Creates a Moon Design avatar. const MoonAvatar({ super.key, this.showBadge = false, this.borderRadius, this.backgroundColor, this.badgeColor, this.badgeMarginValue, this.badgeSize, this.height, this.width, this.backgroundImage, this.avatarSize, this.badgeAlignment = MoonBadgeAlignment.bottomRight, this.semanticLabel, this.content, }); Alignment _avatarAlignmentMapper(BuildContext context) { final bool isRTL = Directionality.of(context) == TextDirection.rtl; if (isRTL) { switch (badgeAlignment) { case MoonBadgeAlignment.topLeft: return Alignment.topRight; case MoonBadgeAlignment.topRight: return Alignment.topLeft; case MoonBadgeAlignment.bottomLeft: return Alignment.bottomRight; case MoonBadgeAlignment.bottomRight: return Alignment.bottomLeft; default: return Alignment.bottomRight; } } else { switch (badgeAlignment) { case MoonBadgeAlignment.topLeft: return Alignment.topLeft; case MoonBadgeAlignment.topRight: return Alignment.topRight; case MoonBadgeAlignment.bottomLeft: return Alignment.bottomLeft; case MoonBadgeAlignment.bottomRight: return Alignment.bottomRight; default: return Alignment.bottomRight; } } } MoonAvatarSizeProperties _getMoonAvatarSize( BuildContext context, MoonAvatarSize? moonAvatarSize, ) { switch (moonAvatarSize) { case MoonAvatarSize.xs: return context.moonTheme?.avatarTheme.sizes.xs ?? MoonAvatarSizes(tokens: MoonTokens.light).xs; case MoonAvatarSize.sm: return context.moonTheme?.avatarTheme.sizes.sm ?? MoonAvatarSizes(tokens: MoonTokens.light).sm; case MoonAvatarSize.md: return context.moonTheme?.avatarTheme.sizes.md ?? MoonAvatarSizes(tokens: MoonTokens.light).md; case MoonAvatarSize.lg: return context.moonTheme?.avatarTheme.sizes.lg ?? MoonAvatarSizes(tokens: MoonTokens.light).lg; case MoonAvatarSize.xl: return context.moonTheme?.avatarTheme.sizes.xl ?? MoonAvatarSizes(tokens: MoonTokens.light).xl; case MoonAvatarSize.x2l: return context.moonTheme?.avatarTheme.sizes.x2l ?? MoonAvatarSizes(tokens: MoonTokens.light).x2l; default: return context.moonTheme?.avatarTheme.sizes.md ?? MoonAvatarSizes(tokens: MoonTokens.light).md; } } @override Widget build(BuildContext context) { final MoonAvatarSizeProperties effectiveMoonAvatarSize = _getMoonAvatarSize(context, avatarSize); final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? effectiveMoonAvatarSize.borderRadius; final resolvedBorderRadius = effectiveBorderRadius.resolve(Directionality.of(context)); final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.avatarTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveBadgeColor = badgeColor ?? context.moonTheme?.avatarTheme.colors.badgeColor ?? MoonColors.light.roshi; final Color effectiveTextColor = context.moonTheme?.avatarTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = context.moonTheme?.avatarTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final double effectiveAvatarHeight = height ?? effectiveMoonAvatarSize.avatarSizeValue; final double effectiveAvatarWidth = width ?? effectiveMoonAvatarSize.avatarSizeValue; final double effectiveBadgeMarginValue = badgeMarginValue ?? effectiveMoonAvatarSize.badgeMarginValue; final double effectiveBadgeSize = badgeSize ?? effectiveMoonAvatarSize.badgeSizeValue; return Semantics( label: semanticLabel, button: false, focusable: false, image: backgroundImage != null, child: SizedBox( width: effectiveAvatarWidth, height: effectiveAvatarHeight, child: Stack( children: [ Positioned.fill( child: ClipPath( // TODO: Since clipper does not work properly on mobile web/PWA, // we are disabling it. Remove this check when it has been // fixed from Flutter side. clipper: kIsWeb && MediaQueryData.fromView(View.of(context)).size.width < 500 ? null : AvatarClipper( showBadge: showBadge, width: effectiveAvatarWidth, height: effectiveAvatarHeight, borderRadius: resolvedBorderRadius, badgeSize: effectiveBadgeSize, badgeMarginValue: effectiveBadgeMarginValue, badgeAlignment: badgeAlignment, textDirection: Directionality.of(context), ), child: DefaultTextStyle( style: effectiveMoonAvatarSize.textStyle .copyWith(color: effectiveTextColor), child: IconTheme( data: IconThemeData( color: effectiveIconColor, ), child: DecoratedBox( decoration: ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, image: backgroundImage != null ? DecorationImage( image: backgroundImage!, fit: BoxFit.cover, ) : null, shape: MoonSquircleBorder( borderRadius: resolvedBorderRadius .squircleBorderRadius(context), ), ), child: Center(child: content), ), ), ), ), ), if (showBadge) Align( alignment: _avatarAlignmentMapper(context), child: Container( height: effectiveBadgeSize, width: effectiveBadgeSize, decoration: BoxDecoration( color: effectiveBadgeColor, borderRadius: BorderRadius.circular(effectiveBadgeSize / 2), ), ), ), ], ), ), ); } } ================================================ FILE: lib/src/widgets/avatar/avatar_clipper.dart ================================================ import 'package:flutter/rendering.dart'; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; import 'package:moon_design/src/widgets/avatar/avatar.dart'; class AvatarClipper extends CustomClipper { final bool showBadge; final BorderRadius borderRadius; final double height; final double width; final double badgeMarginValue; final double badgeSize; final MoonBadgeAlignment badgeAlignment; final TextDirection textDirection; AvatarClipper({ required this.showBadge, required this.borderRadius, required this.height, required this.width, required this.badgeMarginValue, required this.badgeSize, required this.badgeAlignment, required this.textDirection, }); Path _getBadgePath() { final double badgeRadius = badgeSize / 2; if (textDirection == TextDirection.rtl) { switch (badgeAlignment) { case MoonBadgeAlignment.topLeft: return Path() ..addOval( Rect.fromCircle( center: Offset(width - badgeRadius, 0 + badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); case MoonBadgeAlignment.topRight: return Path() ..addOval( Rect.fromCircle( center: Offset(0 + badgeRadius, 0 + badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); case MoonBadgeAlignment.bottomLeft: return Path() ..addOval( Rect.fromCircle( center: Offset(width - badgeRadius, width - badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); case MoonBadgeAlignment.bottomRight: return Path() ..addOval( Rect.fromCircle( center: Offset(0 + badgeRadius, width - badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); default: return Path() ..addOval( Rect.fromCircle( center: Offset(width - badgeRadius, width - badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); } } else { switch (badgeAlignment) { case MoonBadgeAlignment.topLeft: return Path() ..addOval( Rect.fromCircle( center: Offset(0 + badgeRadius, 0 + badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); case MoonBadgeAlignment.topRight: return Path() ..addOval( Rect.fromCircle( center: Offset(width - badgeRadius, 0 + badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); case MoonBadgeAlignment.bottomLeft: return Path() ..addOval( Rect.fromCircle( center: Offset(0 + badgeRadius, height - badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); case MoonBadgeAlignment.bottomRight: return Path() ..addOval( Rect.fromCircle( center: Offset(width - badgeRadius, height - badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); default: return Path() ..addOval( Rect.fromCircle( center: Offset(width - badgeRadius, width - badgeRadius), radius: badgeRadius + badgeMarginValue, ), ); } } } @override Path getClip(Size size) { final Path pathWithBadge = Path.combine( PathOperation.difference, // Avatar shape properties Path() ..addRRect( RRect.fromLTRBAndCorners( 0, 0, width, height, topLeft: MoonSquircleRadius(cornerRadius: borderRadius.topLeft.x), topRight: MoonSquircleRadius(cornerRadius: borderRadius.topRight.x), bottomLeft: MoonSquircleRadius(cornerRadius: borderRadius.bottomLeft.x), bottomRight: MoonSquircleRadius(cornerRadius: borderRadius.bottomRight.x), ), ), _getBadgePath(), // Badge shape properties. ); final Path pathWithoutBadge = Path() ..addRRect( RRect.fromLTRBAndCorners( 0, 0, width, height, topLeft: MoonSquircleRadius(cornerRadius: borderRadius.topLeft.x), topRight: MoonSquircleRadius(cornerRadius: borderRadius.topRight.x), bottomLeft: MoonSquircleRadius(cornerRadius: borderRadius.bottomLeft.x), bottomRight: MoonSquircleRadius(cornerRadius: borderRadius.bottomRight.x), ), ); return showBadge ? pathWithBadge : pathWithoutBadge; } @override bool shouldReclip(CustomClipper oldClipper) => true; } ================================================ FILE: lib/src/widgets/bottom_sheet/bottom_sheet.dart ================================================ import 'dart:async'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/utils/squircle/squircle_border_radius.dart'; import 'package:moon_design/src/widgets/bottom_sheet/modal_bottom_sheet.dart'; import 'package:moon_design/src/widgets/bottom_sheet/utils/bottom_sheet_custom_scroll_physics.dart'; import 'package:moon_design/src/widgets/bottom_sheet/utils/bottom_sheet_suspended_curve.dart'; import 'package:moon_design/src/widgets/bottom_sheet/utils/scroll_to_top_status_bar.dart'; import 'package:moon_tokens/moon_tokens.dart'; const double _minFlingVelocity = 500.0; const double _closeProgressThreshold = 0.6; typedef WidgetWithChildBuilder = Widget Function( BuildContext context, Animation animation, Widget child, ); /// The Moon Design bottom sheet. /// /// The MoonBottomSheet widget itself is rarely used directly. /// Instead, prefer to create a modal bottom sheet with /// [showMoonModalBottomSheet]. class MoonBottomSheet extends StatefulWidget { /// Whether the bottom sheet can be dragged vertically and dismissed by /// swiping downwards. final bool enableDrag; /// Whether the bottom sheet is expanded to its full available width or /// resizes to fit its content. final bool isExpanded; /// The border radius of the bottom sheet. final BorderRadiusGeometry? borderRadius; /// The background color of the bottom sheet. final Color? backgroundColor; /// The custom decoration of the bottom sheet. final Decoration? decoration; /// The minimum velocity required for the bottom sheet to close when flung. final double minFlingVelocity; /// The threshold distance that the bottom sheet must be dragged to before it /// triggers dismissal. final double closeProgressThreshold; /// The fixed height of the bottom sheet or null to adjust to the content /// height. final double? height; /// The duration of the bottom sheet transition animation (slide in or out). final Duration? transitionDuration; /// The curve of the bottom sheet transition animation (slide in or out). final Curve? transitionCurve; /// The semantic label for the bottom sheet. final String? semanticLabel; /// The callback that is called when the bottom sheet begins the closing /// process. /// /// The bottom sheet may not be fully closed (e.g., due to user interaction) /// even after this callback is called. Therefore, this callback may be called /// multiple times for the same bottom sheet. final void Function() onClosing; /// The callback that is called to determine whether the bottom sheet should /// close based on user interaction. /// /// If [shouldClose] is null, it is ignored. /// If the return value is true, the bottom sheet closes. /// If the return value is false, the bottom sheet remains open. /// /// If [shouldClose] is not null, the bottom sheet will temporarily /// return to its previous position until the function returns a value. final Future Function()? shouldClose; /// Controls the animation for the bottom sheet entrance and exit transitions. /// /// The bottom sheet will manipulate the position of this animation controller. final AnimationController animationController; /// The scroll controller used to navigate the content within the bottom sheet. final ScrollController scrollController; /// The widget to display inside the bottom sheet as its content. final Widget child; /// Creates a Moon Design modal bottom sheet. const MoonBottomSheet({ super.key, this.enableDrag = true, this.isExpanded = false, this.borderRadius, this.backgroundColor, this.decoration, double? closeProgressThreshold, this.height, this.minFlingVelocity = _minFlingVelocity, this.transitionDuration, this.transitionCurve, this.semanticLabel, required this.onClosing, this.shouldClose, required this.animationController, required this.scrollController, required this.child, }) : closeProgressThreshold = closeProgressThreshold ?? _closeProgressThreshold; @override MoonBottomSheetState createState() => MoonBottomSheetState(); /// Creates an [AnimationController] specifically designed for a /// [MoonBottomSheet.animationController]. /// /// This API serves as a convenient mechanism to create a Material compliant /// bottom sheet animation. If custom animation durations are required, a /// different animation controller should be utilized. static AnimationController createAnimationController( TickerProvider vsync, Duration duration, ) { return AnimationController( duration: duration, debugLabel: 'MoonBottomSheet', vsync: vsync, ); } } class MoonBottomSheetState extends State with TickerProviderStateMixin { final GlobalKey _childKey = GlobalKey(debugLabel: 'BottomSheet child'); // Used in NotificationListener to identify distinct ScrollNotification events // before and after the dragging gesture. bool _isDragging = false; bool _verifyingShouldClose = false; Curve? _defaultCurve; ParametricCurve? transitionCurve; DateTime? _startTime; // The DragGesture detector of the scroll view cannot be directly accessed, // therefore a VelocityTracker is used to determine the scroll end velocity // when attempting to dismiss the modal via dragging. VelocityTracker? _velocityTracker; bool get needsVerifyShouldClose => widget.shouldClose != null; bool get _dismissUnderway => widget.animationController.status == AnimationStatus.reverse; bool get _hasReachedCloseThreshold => widget.animationController.value < widget.closeProgressThreshold; double? get _childHeight => (_childKey.currentContext?.findRenderObject() as RenderBox?)?.size.height; ScrollController get _scrollController => widget.scrollController; void _close() { _isDragging = false; widget.onClosing(); } void _cancelClose() { widget.animationController.forward().then((value) { if (!widget.animationController.isCompleted) { widget.animationController.value = 1; } }); } FutureOr shouldClose() async { if (_verifyingShouldClose) return false; _verifyingShouldClose = true; final bool? result = await widget.shouldClose?.call(); _verifyingShouldClose = false; return result ?? false; } Future _handleDragUpdate(double primaryDelta) async { assert(widget.enableDrag, 'Dragging is disabled'); transitionCurve = Curves.linear; if (_dismissUnderway) return; _isDragging = true; final double progress = primaryDelta / (_childHeight ?? primaryDelta); if (widget.shouldClose != null) { _cancelClose(); final bool canClose = await shouldClose(); if (canClose) { _close(); return; } else { _cancelClose(); } } widget.animationController.value -= progress; } Future _handleDragEnd(double velocity) async { assert(widget.enableDrag, 'Dragging is disabled'); if (_dismissUnderway || !_isDragging) return; transitionCurve = BottomSheetSuspendedCurve( widget.animationController.value, curve: _defaultCurve!, ); _isDragging = false; Future tryClose() async { if (widget.shouldClose != null) { _cancelClose(); final bool canClose = await shouldClose(); if (canClose) _close(); } else { _close(); } } if (velocity > widget.minFlingVelocity) { tryClose(); } else if (_hasReachedCloseThreshold) { if (widget.animationController.value > 0.0) { widget.animationController.fling(velocity: -1.0); } tryClose(); } else { _cancelClose(); } } void _handleScrollUpdate(ScrollNotification notification) { assert(notification.context != null); if (!_scrollController.hasClients) return; ScrollPosition scrollPosition; if (_scrollController.positions.length > 1) { scrollPosition = _scrollController.positions.firstWhere( (p) => p.isScrollingNotifier.value, orElse: () => _scrollController.positions.first, ); } else { scrollPosition = _scrollController.position; } if (scrollPosition.axis == Axis.horizontal) return; final bool isScrollReversed = scrollPosition.axisDirection == AxisDirection.down; final double offset = isScrollReversed ? scrollPosition.pixels : scrollPosition.maxScrollExtent - scrollPosition.pixels; if (offset <= 0) { // ClampingScrollPhysics terminates with a ScrollEndNotification that // encompasses a DragEndDetails class, while BouncingScrollPhysics and // other physics that permit overflow do not provide drag end information. // We utilize the velocity from DragEndDetails if it is accessible. if (notification is ScrollEndNotification) { final DragEndDetails? dragDetails = notification.dragDetails; if (dragDetails != null) { _handleDragEnd(dragDetails.primaryVelocity ?? 0); _velocityTracker = null; _startTime = null; return; } } // Otherwise, the velocity is calculated using a VelocityTracker. if (_velocityTracker == null) { final PointerDeviceKind pointerKind = _defaultPointerDeviceKind(context); _velocityTracker = VelocityTracker.withKind(pointerKind); _startTime = DateTime.now(); } DragUpdateDetails? dragDetails; if (notification is ScrollUpdateNotification) { dragDetails = notification.dragDetails; } if (notification is OverscrollNotification) { dragDetails = notification.dragDetails; } if (notification is UserScrollNotification) return; assert(_velocityTracker != null); assert(_startTime != null); final startTime = _startTime!; final velocityTracker = _velocityTracker!; if (dragDetails != null) { final Duration duration = startTime.difference(DateTime.now()); velocityTracker.addPosition(duration, Offset(0, offset)); _handleDragUpdate(dragDetails.delta.dy); return; } else if (_isDragging) { final double velocity = velocityTracker.getVelocity().pixelsPerSecond.dy; _velocityTracker = null; _startTime = null; _handleDragEnd(velocity); } } } @override Widget build(BuildContext context) { final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.bottomSheetTheme.properties.borderRadius ?? MoonBorders.borders.surfaceSm; final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.bottomSheetTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveIconColor = context.moonTheme?.bottomSheetTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final Color effectiveTextColor = context.moonTheme?.bottomSheetTheme.colors.textColor ?? MoonColors.light.textPrimary; final TextStyle effectiveTextStyle = context.moonTheme?.bottomSheetTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; _defaultCurve ??= widget.transitionCurve ?? context.moonTheme?.bottomSheetTheme.properties.transitionCurve ?? const Cubic(0.0, 0.0, 0.2, 1.0); transitionCurve ??= _defaultCurve; return ScrollToTopStatusBarHandler( scrollController: _scrollController, child: AnimatedBuilder( animation: widget.animationController, builder: (BuildContext context, Widget? child) { assert(child != null); final double animationValue = transitionCurve!.transform(widget.animationController.value); final draggableChild = widget.enableDrag ? KeyedSubtree( key: _childKey, child: GestureDetector( onVerticalDragUpdate: (DragUpdateDetails details) => _handleDragUpdate(details.delta.dy), onVerticalDragEnd: (DragEndDetails details) => _handleDragEnd(details.primaryVelocity ?? 0), child: NotificationListener( onNotification: (ScrollNotification notification) { _handleScrollUpdate(notification); return false; }, child: child!, ), ), ) : child; return ClipRect( child: CustomSingleChildLayout( delegate: _ModalBottomSheetLayout( progress: animationValue, isExpanded: widget.isExpanded, ), child: draggableChild, ), ); }, child: ScrollConfiguration( behavior: const ScrollBehavior().copyWith( overscroll: false, scrollbars: false, physics: CustomModalScrollPhysics( controller: widget.animationController, parent: const BouncingScrollPhysics(), ), dragDevices: { PointerDeviceKind.touch, PointerDeviceKind.mouse, }, ), child: RepaintBoundary( child: Semantics( label: widget.semanticLabel, child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Container( height: widget.height, decoration: widget.decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shape: MoonSquircleBorder( borderRadius: MoonSquircleBorderRadius.only( topLeft: effectiveBorderRadius .squircleBorderRadius(context) .topLeft, topRight: effectiveBorderRadius .squircleBorderRadius(context) .topRight, ), ), ), child: widget.child, ), ), ), ), ), ), ), ); } } class _ModalBottomSheetLayout extends SingleChildLayoutDelegate { final bool isExpanded; final double progress; _ModalBottomSheetLayout({required this.isExpanded, required this.progress}); @override BoxConstraints getConstraintsForChild(BoxConstraints constraints) { return BoxConstraints( minWidth: constraints.maxWidth, maxWidth: constraints.maxWidth, minHeight: isExpanded ? constraints.maxHeight : 0, maxHeight: isExpanded ? constraints.maxHeight : constraints.minHeight, ); } @override Offset getPositionForChild(Size size, Size childSize) { return Offset(0.0, size.height - childSize.height * progress); } @override bool shouldRelayout(_ModalBottomSheetLayout oldDelegate) { return progress != oldDelegate.progress; } } // Determines the input type of the device's operating system. // Mobile platforms default to 'touch' input and desktop to 'mouse' input. // Used with VelocityTracker. // https://github.com/flutter/flutter/pull/64267#issuecomment-694196304 PointerDeviceKind _defaultPointerDeviceKind(BuildContext context) { final TargetPlatform platform = Theme.of(context).platform; switch (platform) { case TargetPlatform.iOS: case TargetPlatform.android: return PointerDeviceKind.touch; case TargetPlatform.linux: case TargetPlatform.macOS: case TargetPlatform.windows: return PointerDeviceKind.mouse; case TargetPlatform.fuchsia: return PointerDeviceKind.unknown; } } ================================================ FILE: lib/src/widgets/bottom_sheet/modal_bottom_sheet.dart ================================================ import 'dart:async'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/bottom_sheet/bottom_sheet.dart'; import 'package:moon_tokens/moon_tokens.dart'; /// Displays a Moon Design modal bottom sheet. Future showMoonModalBottomSheet({ required BuildContext context, bool enableDrag = true, bool isExpanded = false, bool isDismissible = true, bool useRootNavigator = false, BorderRadiusGeometry? borderRadius, Color? backgroundColor, Color? barrierColor, Decoration? decoration, double? closeProgressThreshold, double? height, Duration? transitionDuration, Curve? transitionCurve, RouteSettings? settings, String? semanticLabel, AnimationController? animationController, required WidgetBuilder builder, }) async { assert(debugCheckHasMediaQuery(context)); assert(debugCheckHasMaterialLocalizations(context)); final bool hasMaterialLocalizations = Localizations.of(context, MaterialLocalizations) != null; final String barrierLabel = hasMaterialLocalizations ? MaterialLocalizations.of(context).modalBarrierDismissLabel : ''; final CapturedThemes themes = InheritedTheme.capture( from: context, to: Navigator.of(context, rootNavigator: useRootNavigator).context, ); final Color effectiveBarrierColor = barrierColor ?? context.moonTheme?.bottomSheetTheme.colors.barrierColor ?? MoonColors.light.zeno; final Duration effectiveTransitionDuration = transitionDuration ?? context.moonTheme?.bottomSheetTheme.properties.transitionDuration ?? const Duration(milliseconds: 350); final Curve effectiveTransitionCurve = transitionCurve ?? context.moonTheme?.bottomSheetTheme.properties.transitionCurve ?? const Cubic(0.0, 0.0, 0.2, 1.0); final T? result = await Navigator.of(context, rootNavigator: useRootNavigator).push( MoonModalBottomSheetRoute( enableDrag: enableDrag, isExpanded: isExpanded, isDismissible: isDismissible, borderRadius: borderRadius, themes: themes, backgroundColor: backgroundColor, modalBarrierColor: effectiveBarrierColor, decoration: decoration, closeProgressThreshold: closeProgressThreshold, height: height, animationDuration: effectiveTransitionDuration, animationCurve: effectiveTransitionCurve, settings: settings, semanticLabel: semanticLabel, barrierLabel: barrierLabel, animationController: animationController, builder: builder, ), ); return result; } class MoonModalBottomSheetRoute extends PageRoute { final bool enableDrag; final bool isExpanded; final bool isDismissible; final BorderRadiusGeometry? borderRadius; final CapturedThemes? themes; final Color? backgroundColor; final Color modalBarrierColor; final Decoration? decoration; final double? closeProgressThreshold; final double? height; final Duration animationDuration; final Curve animationCurve; final String? semanticLabel; final AnimationController? animationController; final ScrollController? scrollController; final WidgetBuilder builder; MoonModalBottomSheetRoute({ super.settings, this.enableDrag = true, this.isExpanded = false, this.isDismissible = true, this.borderRadius, this.themes, this.backgroundColor, required this.modalBarrierColor, this.decoration, this.closeProgressThreshold, this.height, required this.animationDuration, required this.animationCurve, this.barrierLabel, this.semanticLabel, this.animationController, this.scrollController, required this.builder, }); AnimationController? _animationController; // RoutePopDisposition.pop breaks the bottom sheet drag to close functionality // and eventually causes a crash. bool get _hasScopedWillPopCallback => popDisposition == RoutePopDisposition.bubble; @override bool get maintainState => true; @override bool get opaque => false; @override bool get barrierDismissible => isDismissible; @override Color get barrierColor => modalBarrierColor; @override Duration get transitionDuration => animationDuration; @override final String? barrierLabel; @override AnimationController createAnimationController() { assert(_animationController == null); _animationController = MoonBottomSheet.createAnimationController( navigator!.overlay!, transitionDuration, ); return _animationController!; } @override bool canTransitionTo(TransitionRoute nextRoute) => nextRoute is MoonModalBottomSheetRoute; @override bool canTransitionFrom(TransitionRoute previousRoute) => previousRoute is MoonModalBottomSheetRoute || previousRoute is PageRoute; @override Widget buildPage( BuildContext context, Animation animation, Animation secondaryAnimation, ) { // By design, the bottom sheet is positioned at the bottom of the viewport // and is not affected by the top padding of the MediaQuery. final Widget bottomSheet = MediaQuery.removePadding( context: context, child: _ModalBottomSheet( enableDrag: enableDrag, isExpanded: isExpanded, borderRadius: borderRadius, backgroundColor: backgroundColor, decoration: decoration, closeProgressThreshold: closeProgressThreshold, height: height, transitionDuration: animationDuration, transitionCurve: animationCurve, semanticLabel: semanticLabel, animationController: animationController, route: this, ), ); return themes?.wrap(bottomSheet) ?? bottomSheet; } } class _ModalBottomSheet extends StatefulWidget { final bool enableDrag; final bool isExpanded; final BorderRadiusGeometry? borderRadius; final Color? backgroundColor; final Decoration? decoration; final double? closeProgressThreshold; final double? height; final Duration? transitionDuration; final Curve? transitionCurve; final String? semanticLabel; final AnimationController? animationController; final MoonModalBottomSheetRoute route; const _ModalBottomSheet({ super.key, this.enableDrag = true, this.isExpanded = false, this.borderRadius, this.backgroundColor, this.decoration, this.closeProgressThreshold, this.height, this.transitionDuration, this.transitionCurve, this.semanticLabel, this.animationController, required this.route, }); @override _ModalBottomSheetState createState() => _ModalBottomSheetState(); } class _ModalBottomSheetState extends State<_ModalBottomSheet> { ScrollController? _scrollController; String _getRouteLabel() { final TargetPlatform platform = Theme.of(context).platform; switch (platform) { case TargetPlatform.iOS: case TargetPlatform.linux: case TargetPlatform.macOS: case TargetPlatform.windows: return ''; case TargetPlatform.android: case TargetPlatform.fuchsia: if (Localizations.of( context, MaterialLocalizations, ) != null) { return MaterialLocalizations.of(context).dialogLabel; } else { return const DefaultMaterialLocalizations().dialogLabel; } } } Future _handleShouldClose() async { final RoutePopDisposition willPop = widget.route.popDisposition; return willPop != RoutePopDisposition.doNotPop; } void _updateController() { final Animation? animation = widget.route.animation; // Used to relay the state of the bottom sheet internal animation // controller. if (animation != null) { widget.animationController?.value = animation.value; } } @override void initState() { super.initState(); widget.route.animation?.addListener(_updateController); } @override void dispose() { widget.route.animation?.removeListener(_updateController); widget.animationController?.dispose(); _scrollController?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { assert(debugCheckHasMediaQuery(context)); assert(widget.route._animationController != null); final ScrollController scrollController = PrimaryScrollController.maybeOf(context) ?? (_scrollController ??= ScrollController()); return PrimaryScrollController( controller: scrollController, child: Builder( builder: (BuildContext context) => AnimatedBuilder( animation: widget.route._animationController!, builder: (BuildContext context, Widget? child) { assert(child != null); return Semantics( explicitChildNodes: true, label: _getRouteLabel(), namesRoute: true, scopesRoute: true, child: MoonBottomSheet( enableDrag: widget.enableDrag, isExpanded: widget.route.isExpanded, borderRadius: widget.borderRadius, backgroundColor: widget.backgroundColor, decoration: widget.decoration, closeProgressThreshold: widget.closeProgressThreshold, height: widget.height, transitionDuration: widget.transitionDuration, transitionCurve: widget.transitionCurve, semanticLabel: widget.semanticLabel, onClosing: () => {if (widget.route.isCurrent) Navigator.of(context).pop()}, shouldClose: widget.route._hasScopedWillPopCallback ? () => _handleShouldClose() : null, animationController: widget.route._animationController!, scrollController: scrollController, child: child!, ), ); }, child: widget.route.builder(context), ), ), ); } } ================================================ FILE: lib/src/widgets/bottom_sheet/utils/bottom_sheet_custom_scroll_physics.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; class CustomModalScrollPhysics extends ScrollPhysics { final AnimationController controller; /// Creates scroll physics that restrict the scroll offset from reaching the /// modal's upper boundary. Permits users to drag the bottom sheet up and down /// when the content is scrollable. const CustomModalScrollPhysics({super.parent, required this.controller}); @override CustomModalScrollPhysics applyTo(ScrollPhysics? ancestor) { return CustomModalScrollPhysics( parent: buildParent(ancestor), controller: controller, ); } @override double applyBoundaryConditions(ScrollMetrics position, double value) { assert(() { if (value == position.pixels) { throw FlutterError.fromParts([ ErrorSummary( '$runtimeType.applyBoundaryConditions() was called redundantly.', ), ErrorDescription( 'The proposed new position, $value, is exactly equal to the current ' 'position of the given ${position.runtimeType}, ${position.pixels}.' '\n The applyBoundaryConditions method should only be called when ' 'the value is going to actually change the pixels, otherwise it is ' 'redundant.', ), DiagnosticsProperty( 'The physics object in question was', this, style: DiagnosticsTreeStyle.errorProperty, ), DiagnosticsProperty( 'The position object in question was', position, style: DiagnosticsTreeStyle.errorProperty, ), ]); } return true; }()); if (value < position.pixels && position.pixels <= position.minScrollExtent) { // Under scroll while dragging down. return value - position.pixels; } if (position.maxScrollExtent <= position.pixels && position.pixels < value) { // Over scroll. return value - position.pixels; } if (value < position.minScrollExtent && position.minScrollExtent < position.pixels) { // Hit top edge. return value - position.minScrollExtent; } if (position.pixels < position.maxScrollExtent && position.maxScrollExtent < value) { // Hit bottom edge. return value - position.maxScrollExtent; } if (value > position.pixels && position.pixels == 0 && controller.value < 1) { // Under scroll while dragging up. return value - position.pixels; } return 0.0; } } ================================================ FILE: lib/src/widgets/bottom_sheet/utils/bottom_sheet_suspended_curve.dart ================================================ import 'dart:ui'; import 'package:flutter/animation.dart'; import 'package:flutter/foundation.dart'; // Copied from bottom_sheet.dart as is a private class // https://github.com/flutter/flutter/issues/51627 // TODO(guidezpl): Look into making this public. A copy of this class is in // scaffold.dart, for now, https://github.com/flutter/flutter/issues/51627 /// A curve that progresses linearly until a specified [startingPoint], at which /// point [curve] will begin. Unlike [Interval], [curve] will not start at zero, /// but will use [startingPoint] as the Y position. /// /// For example, if [startingPoint] is set to `0.5`, and [curve] is set to /// [Curves.easeOut], then the bottom-left quarter of the curve will be a /// straight line, and the top-right quarter will contain the entire contents of /// [Curves.easeOut]. /// /// This is useful in situations where a widget must track the user's finger /// (which requires a linear animation), and afterwards can be flung using a /// curve specified with the [curve] argument, after the finger is released. In /// such a case, the value of [startingPoint] would be the progress of the /// animation at the time when the finger was released. /// /// The [startingPoint] and [curve] arguments must not be null. class BottomSheetSuspendedCurve extends Curve { /// Creates a suspended curve. const BottomSheetSuspendedCurve( this.startingPoint, { this.curve = Curves.easeOutCubic, }); /// The progress value at which the transition should begin using the /// specified [curve]. final double startingPoint; /// The curve to be applied when the specified [startingPoint] is reached. /// /// Defaults to [Curves.easeOutCubic]. final Curve curve; @override double transform(double t) { assert(t >= 0.0 && t <= 1.0); assert(startingPoint >= 0.0 && startingPoint <= 1.0); if (t < startingPoint) { return t; } if (t == 1.0) { return t; } final curveProgress = (t - startingPoint) / (1 - startingPoint); final transformed = curve.transform(curveProgress); return lerpDouble(startingPoint, 1, transformed)!; } @override String toString() { return '${describeIdentity(this)}($startingPoint, $curve)'; } } ================================================ FILE: lib/src/widgets/bottom_sheet/utils/scroll_to_top_status_bar.dart ================================================ import 'package:flutter/widgets.dart'; /// The widget that enables the associated ScrollController to scroll to the top /// when the status bar is tapped. /// /// Extracted from Scaffold and utilized in modal bottom sheets. class ScrollToTopStatusBarHandler extends StatefulWidget { final ScrollController scrollController; final Widget child; const ScrollToTopStatusBarHandler({ super.key, required this.scrollController, required this.child, }); @override ScrollToTopStatusBarState createState() => ScrollToTopStatusBarState(); } class ScrollToTopStatusBarState extends State { void _handleStatusBarTap(BuildContext context) { final ScrollController controller = widget.scrollController; if (controller.hasClients) { controller.animateTo( 0.0, duration: const Duration(milliseconds: 300), curve: Curves.linear, ); } } @override void initState() { super.initState(); } @override Widget build(BuildContext context) { return Stack( fit: StackFit.expand, children: [ widget.child, Positioned( top: 0, left: 0, right: 0, height: MediaQuery.of(context).padding.top, child: Builder( builder: (BuildContext context) => GestureDetector( behavior: HitTestBehavior.opaque, onTap: () => _handleStatusBarTap(context), // iOS accessibility features automatically enable a scroll-to-top // gesture for the clock in the status bar. excludeFromSemantics: true, ), ), ), ], ); } } ================================================ FILE: lib/src/widgets/breadcrumb/breadcrumb.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/breadcrumb/breadcrumb_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/text_styles.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/widgets/breadcrumb/breadcrumb_item.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; import 'package:moon_icons/moon_icons.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonBreadcrumb extends StatefulWidget { /// The color of the breadcrumb divider. final Color? dividerColor; /// The icon and text color of the breadcrumb item on hover. final Color? hoverEffectColor; /// The custom decoration of the breadcrumb item. final BoxDecoration? itemDecoration; /// The gap between the [divider] widget and the breadcrumb item. final double? gap; /// The padding of the breadcrumb. final EdgeInsetsGeometry? padding; /// The total number of the breadcrumb [items] to display. final int visibleItemCount; /// The semantic label for the breadcrumb default [showMoreWidget]. final String? semanticLabel; /// The text style of the breadcrumb item. final TextStyle? itemTextStyle; /// The text style of the current breadcrumb item. final TextStyle? currentItemTextStyle; /// The list of breadcrumb items to display as a sequence of steps. final List items; /// The separating widget to display between the breadcrumb items. final Widget? divider; /// The single custom widget to replace all the breadcrumb collapsed items /// with. final MoonBreadcrumbItem? showMoreWidget; /// Creates a Moon Design breadcrumb. const MoonBreadcrumb({ super.key, this.dividerColor, this.hoverEffectColor, this.itemDecoration, this.gap, this.padding, this.visibleItemCount = 3, this.semanticLabel, this.itemTextStyle, this.currentItemTextStyle, required this.items, this.divider, this.showMoreWidget, }); @override State createState() => _MoonBreadcrumbState(); } class _MoonBreadcrumbState extends State { bool _showFullPath = false; List _buildItems() { final MoonBreadcrumbTheme? theme = context.moonTheme?.breadcrumbTheme; final double effectiveGap = widget.gap ?? theme?.properties.gap ?? MoonSizes.sizes.x4s; final Color effectiveItemTextColor = widget.itemTextStyle?.color ?? theme?.colors.itemColor ?? MoonColors.light.textSecondary; final Color effectiveCurrentItemTextColor = widget.currentItemTextStyle?.color ?? theme?.colors.currentItemColor ?? MoonColors.light.textPrimary; final Color effectiveHoverEffectColor = widget.hoverEffectColor ?? theme?.colors.hoverEffectColor ?? MoonColors.light.textPrimary; final TextStyle effectiveItemTextStyle = widget.itemTextStyle ?? theme?.properties.itemTextStyle ?? MoonTextStyles.body.textDefault; final TextStyle effectiveCurrentItemTextStyle = widget.currentItemTextStyle ?? theme?.properties.currentItemTextStyle ?? MoonTextStyles.body.textDefault; final TextStyle effectiveShowMoreItemTextStyle = theme?.properties.showMoreItemTextStyle ?? MoonTextStyles.body.textDefault; final Duration effectiveTransitionDuration = theme?.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = theme?.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; final int resolvedItemCountToShow = _showFullPath ? widget.items.length : widget.visibleItemCount; final List visibleItemsList = _getVisibleItems(); final List customizedVisibleItemsList = visibleItemsList.map( (MoonBreadcrumbItem item) { return Row( children: [ if (item != visibleItemsList.first) SizedBox(width: effectiveGap), _BreadcrumbItemBuilder( isCurrent: item == visibleItemsList.last, itemColor: effectiveItemTextColor, currentItemColor: effectiveCurrentItemTextColor, hoverEffectColor: effectiveHoverEffectColor, decoration: widget.itemDecoration, itemTextStyle: effectiveItemTextStyle, currentItemTextStyle: effectiveCurrentItemTextStyle, transitionDuration: effectiveTransitionDuration, transitionCurve: effectiveTransitionCurve, onTap: item.onTap, item: item, ), if (item != visibleItemsList.last) ...[ SizedBox(width: effectiveGap), _buildDivider(), ], ], ); }, ).toList(); if (widget.items.length > resolvedItemCountToShow && resolvedItemCountToShow > 1) { customizedVisibleItemsList.insert( 1, Row( children: [ Padding( padding: EdgeInsets.symmetric(horizontal: effectiveGap), child: _BreadcrumbItemBuilder( isCurrent: false, itemColor: effectiveItemTextColor, currentItemColor: effectiveCurrentItemTextColor, hoverEffectColor: effectiveHoverEffectColor, decoration: widget.itemDecoration, itemTextStyle: effectiveItemTextStyle, currentItemTextStyle: effectiveCurrentItemTextStyle, transitionDuration: effectiveTransitionDuration, transitionCurve: effectiveTransitionCurve, onTap: widget.showMoreWidget?.onTap ?? () => setState(() => _showFullPath = true), item: widget.showMoreWidget ?? MoonBreadcrumbItem( semanticLabel: widget.semanticLabel, label: SizedBox( width: 24, child: Text( '...', textAlign: TextAlign.center, style: effectiveShowMoreItemTextStyle, ), ), ), ), ), _buildDivider(), ], ), ); } // Restores the breadcrumb's initial collapsed state during every rebuild. _showFullPath = false; return customizedVisibleItemsList; } List _getVisibleItems() { final int resolvedItemCountToShow = _showFullPath ? widget.items.length : widget.visibleItemCount; final List visibleItems = resolvedItemCountToShow == 0 ? [] : widget.items.length > resolvedItemCountToShow ? [ widget.items[0], ...List.generate( resolvedItemCountToShow - 1, (index) => widget.items.length - index, ).reversed.map((int index) => widget.items[index - 1]), ] : widget.items; return visibleItems; } Widget _buildDivider() { final Color effectiveDividerColor = widget.dividerColor ?? widget.itemTextStyle?.color ?? context.moonTheme?.breadcrumbTheme.colors.itemColor ?? MoonColors.light.iconSecondary; return IconTheme( data: IconThemeData(color: effectiveDividerColor), child: widget.divider ?? Icon( Directionality.of(context) == TextDirection.ltr ? MoonIcons.arrows_right_24_light : MoonIcons.arrows_left_24_light, size: 24, ), ); } @override Widget build(BuildContext context) { return SingleChildScrollView( padding: widget.padding, scrollDirection: Axis.horizontal, child: Row( mainAxisSize: MainAxisSize.min, children: _buildItems(), ), ); } } class _BreadcrumbItemBuilder extends StatefulWidget { final bool isCurrent; final Color itemColor; final Color currentItemColor; final Color hoverEffectColor; final BoxDecoration? decoration; final Duration transitionDuration; final Curve transitionCurve; final TextStyle itemTextStyle; final TextStyle currentItemTextStyle; final VoidCallback? onTap; final MoonBreadcrumbItem item; const _BreadcrumbItemBuilder({ required this.isCurrent, required this.itemColor, required this.currentItemColor, required this.hoverEffectColor, required this.decoration, required this.transitionDuration, required this.transitionCurve, required this.itemTextStyle, required this.currentItemTextStyle, required this.item, required this.onTap, }); @override State<_BreadcrumbItemBuilder> createState() => _BreadCrumbItemBuilderState(); } class _BreadCrumbItemBuilderState extends State<_BreadcrumbItemBuilder> with SingleTickerProviderStateMixin { final ColorTweenWithPremultipliedAlpha _itemColorTween = ColorTweenWithPremultipliedAlpha(); Animation? _itemColor; AnimationController? _animationController; void _handleActiveEffect(bool isActive) => isActive ? _animationController?.forward() : _animationController?.reverse(); @override void initState() { super.initState(); _animationController = AnimationController( duration: widget.transitionDuration, vsync: this, value: widget.isCurrent ? 1 : 0, ); } @override void dispose() { _animationController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double effectiveGap = widget.item.gap ?? context.moonTheme?.breadcrumbTheme.properties.itemGap ?? MoonSizes.sizes.x6s; final Color resolvedItemColor = widget.isCurrent ? widget.currentItemColor : widget.itemColor; final Color resolvedHoverEffectColor = widget.isCurrent ? widget.currentItemColor : widget.hoverEffectColor; final TextStyle resolvedTextStyle = widget.isCurrent ? widget.currentItemTextStyle : widget.itemTextStyle; _itemColor ??= _animationController!.drive( _itemColorTween.chain(CurveTween(curve: widget.transitionCurve)), ); _itemColorTween ..begin = resolvedItemColor ..end = resolvedHoverEffectColor; return MoonBaseControl( semanticLabel: widget.item.semanticLabel, backgroundColor: widget.decoration?.color, borderRadius: widget.decoration?.borderRadius, propagateGesturesToChild: true, onTap: widget.onTap, builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { final bool isActive = isEnabled && (widget.isCurrent || isHovered || isPressed); _handleActiveEffect(isActive); return AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return IconTheme( data: IconThemeData( color: _itemColor!.value, ), child: DefaultTextStyle( style: resolvedTextStyle.copyWith(color: _itemColor?.value), child: child!, ), ); }, child: DecoratedBox( decoration: widget.decoration ?? const BoxDecoration(), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ if (widget.item.leading != null) ...[ widget.item.leading!, SizedBox(width: widget.item.gap ?? effectiveGap), ], widget.item.label, if (widget.item.trailing != null) ...[ SizedBox(width: widget.item.gap ?? effectiveGap), widget.item.trailing!, ], ], ), ), ); }, ); } } ================================================ FILE: lib/src/widgets/breadcrumb/breadcrumb_item.dart ================================================ import 'package:flutter/material.dart'; class MoonBreadcrumbItem { /// The gap between the [leading], [label] and [trailing] widgets of the /// breadcrumb item. final double? gap; /// The semantic label for the breadcrumb item. final String? semanticLabel; /// The callback that is called when the breadcrumb item is tapped or pressed. /// If null, the breadcrumb item is disabled. /// /// For [MoonBreadcrumb.showMoreWidget], when [onTap] is null, default /// behavior is to display all collapsed breadcrumb items. final VoidCallback? onTap; /// The widget to display before the [label] widget of the breadcrumb item. final Widget? leading; /// The primary content of the breadcrumb item. final Widget label; /// The widget to display after the [label] widget of the breadcrumb item. final Widget? trailing; /// Creates a Moon Design breadcrumb item. const MoonBreadcrumbItem({ this.gap, this.semanticLabel, this.onTap, this.leading, required this.label, this.trailing, }); } ================================================ FILE: lib/src/widgets/buttons/button.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/button/button_size_properties.dart'; import 'package:moon_design/src/theme/button/button_sizes.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonButtonSize { xs, sm, md, lg, xl, } class MoonButton extends StatefulWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether the button is focusable. final bool isFocusable; /// Whether to ensure a minimum touch target size for the button. final bool ensureMinimalTouchTargetSize; /// Whether the button takes up the full width of its parent container. final bool isFullWidth; /// Whether to show a border around the button. final bool showBorder; /// Whether to show a focus outline effect when the button is focused. final bool showFocusEffect; /// Whether to show a continuous pulsating effect. final bool showPulseEffect; /// Whether to show a jiggle during the button pulse effect. final bool showPulseEffectJiggle; /// Whether to show a scale effect when the button is tapped or long-pressed. final bool showScaleEffect; /// The border radius of the button. final BorderRadiusGeometry? borderRadius; /// The background color of the button. final Color? backgroundColor; /// The border color of the button. final Color? borderColor; /// The color of the button focus effect. final Color? focusEffectColor; /// The color of the button hover effect. final Color? hoverEffectColor; /// The color of the button pulse effect. final Color? pulseEffectColor; /// The text color of the button. final Color? textColor; /// The text color of the button on hover. final Color? hoverTextColor; /// The custom decoration of the button. final Decoration? decoration; /// The border width of the button. final double? borderWidth; /// The opacity value of the button when disabled. final double? disabledOpacityValue; /// The gap between the [leading], [label] and [trailing] widgets of the /// button. final double? gap; /// The height of the button. final double? height; /// The width of the button. final double? width; /// The minimum size of the button touch target. final double minTouchTargetSize; /// The extent of the button focus effect. final double? focusEffectExtent; /// The extent of the button pulse effect. final double? pulseEffectExtent; /// The degree of scaling applied during the button scale effect. final double? scaleEffectScalar; /// The duration of the button focus effect. final Duration? focusEffectDuration; /// The duration of the button hover effect. final Duration? hoverEffectDuration; /// The duration of the button pulse effect. final Duration? pulseEffectDuration; /// The duration of the button scale effect. final Duration? scaleEffectDuration; /// The curve of the button focus effect. final Curve? focusEffectCurve; /// The curve of the button hover effect. final Curve? hoverEffectCurve; /// The curve of the button pulse effect. final Curve? pulseEffectCurve; /// The curve of the button scale effect. final Curve? scaleEffectCurve; /// The padding of the button. final EdgeInsetsGeometry? padding; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The size of the button. final MoonButtonSize? buttonSize; /// The semantic label for the button. final String? semanticLabel; /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; /// The callback that is called when the button is long-pressed. final VoidCallback? onLongPress; /// The widget to display before the [label] widget of the button. final Widget? leading; /// The primary content of the button widget. final Widget? label; /// The widget to display after the [label] widget of the button. final Widget? trailing; /// Creates a Moon Design base button. /// /// See also: /// /// * [MoonFilledButton], Moon Design filled button. /// * [MoonOutlinedButton], Moon Design outlined button. /// * [MoonTextButton], Moon Design text button. /// * [MoonButton.icon], Moon Design icon button. const MoonButton({ super.key, this.autofocus = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, this.showBorder = false, this.showFocusEffect = true, this.showPulseEffect = false, this.showPulseEffectJiggle = true, this.showScaleEffect = true, this.borderRadius, this.backgroundColor, this.borderColor, this.focusEffectColor, this.hoverEffectColor, this.pulseEffectColor, this.textColor, this.hoverTextColor, this.decoration, this.borderWidth, this.disabledOpacityValue, this.gap, this.height, this.width, this.minTouchTargetSize = 40, this.focusEffectExtent, this.pulseEffectExtent, this.scaleEffectScalar, this.focusEffectDuration, this.hoverEffectDuration, this.pulseEffectDuration, this.scaleEffectDuration, this.focusEffectCurve, this.hoverEffectCurve, this.pulseEffectCurve, this.scaleEffectCurve, this.padding, this.focusNode, this.buttonSize, this.semanticLabel, this.onTap, this.onLongPress, this.leading, this.label, this.trailing, }); /// Creates a Moon Design icon button. /// /// See also: /// /// * [MoonFilledButton], Moon Design filled button. /// * [MoonOutlinedButton], Moon Design outlined button. /// * [MoonTextButton], Moon Design text button. const MoonButton.icon({ super.key, this.autofocus = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, this.showBorder = false, this.showFocusEffect = true, this.showPulseEffect = false, this.showPulseEffectJiggle = true, this.showScaleEffect = true, this.borderRadius, this.backgroundColor, this.borderColor, this.focusEffectColor, this.hoverEffectColor, this.pulseEffectColor, this.hoverTextColor, this.borderWidth, this.disabledOpacityValue, this.gap, this.height, this.width, this.minTouchTargetSize = 40, this.focusEffectExtent, this.pulseEffectExtent, this.scaleEffectScalar, this.focusEffectDuration, this.hoverEffectDuration, this.pulseEffectDuration, this.scaleEffectDuration, this.focusEffectCurve, this.hoverEffectCurve, this.pulseEffectCurve, this.scaleEffectCurve, this.padding, this.focusNode, this.buttonSize, this.decoration, this.semanticLabel, this.onTap, this.onLongPress, Color? iconColor, Widget? icon, }) : textColor = iconColor, leading = icon, label = null, trailing = null; @override State createState() => _MoonButtonState(); } class _MoonButtonState extends State with SingleTickerProviderStateMixin { final ColorTweenWithPremultipliedAlpha _backgroundColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _textColorTween = ColorTweenWithPremultipliedAlpha(); Animation? _backgroundColor; Animation? _textColor; AnimationController? _animationController; bool get _isEnabled => widget.onTap != null || widget.onLongPress != null; void _handleHoverEffect(bool shouldAnimate) { shouldAnimate ? _animationController?.forward() : _animationController?.reverse(); } MoonButtonSizeProperties _getMoonButtonSize( BuildContext context, MoonButtonSize? moonButtonSize, ) { switch (moonButtonSize) { case MoonButtonSize.xs: return context.moonTheme?.buttonTheme.sizes.xs ?? MoonButtonSizes(tokens: MoonTokens.light).xs; case MoonButtonSize.sm: return context.moonTheme?.buttonTheme.sizes.sm ?? MoonButtonSizes(tokens: MoonTokens.light).sm; case MoonButtonSize.md: return context.moonTheme?.buttonTheme.sizes.md ?? MoonButtonSizes(tokens: MoonTokens.light).md; case MoonButtonSize.lg: return context.moonTheme?.buttonTheme.sizes.lg ?? MoonButtonSizes(tokens: MoonTokens.light).lg; case MoonButtonSize.xl: return context.moonTheme?.buttonTheme.sizes.xl ?? MoonButtonSizes(tokens: MoonTokens.light).xl; default: return context.moonTheme?.buttonTheme.sizes.md ?? MoonButtonSizes(tokens: MoonTokens.light).md; } } @override void dispose() { _animationController?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final MoonButtonSizeProperties effectiveMoonButtonSize = _getMoonButtonSize(context, widget.buttonSize); final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? effectiveMoonButtonSize.borderRadius; final Color effectiveBorderColor = widget.borderColor ?? context.moonTheme?.buttonTheme.colors.borderColor ?? MoonColors.light.trunks; final double effectiveBorderWidth = widget.borderWidth ?? context.moonBorders?.defaultBorderWidth ?? MoonBorders.borders.defaultBorderWidth; final Color effectiveTextColor = widget.textColor ?? context.moonTheme?.buttonTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveHoverEffectColor = widget.hoverEffectColor ?? context.moonEffects?.controlHoverEffect.primaryHoverColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .primaryHoverColor; final Color hoverColor = Color.alphaBlend( effectiveHoverEffectColor, widget.backgroundColor ?? Colors.transparent, ); final double effectiveHeight = widget.height ?? effectiveMoonButtonSize.height; final double effectiveGap = widget.gap ?? effectiveMoonButtonSize.gap; final EdgeInsetsGeometry effectivePadding = widget.padding ?? effectiveMoonButtonSize.padding; final EdgeInsets resolvedDirectionalPadding = effectivePadding.resolve(Directionality.of(context)); final EdgeInsetsGeometry correctedPadding = widget.padding == null ? EdgeInsetsDirectional.fromSTEB( widget.leading == null && widget.label != null ? resolvedDirectionalPadding.left : 0, resolvedDirectionalPadding.top, widget.trailing == null && widget.label != null ? resolvedDirectionalPadding.right : 0, resolvedDirectionalPadding.bottom, ) : resolvedDirectionalPadding; final Duration effectiveHoverEffectDuration = widget.hoverEffectDuration ?? context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .hoverDuration; final Curve effectiveHoverEffectCurve = widget.hoverEffectCurve ?? context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .hoverCurve; _animationController ??= AnimationController( duration: effectiveHoverEffectDuration, vsync: this, ); _backgroundColor ??= _animationController!.drive( _backgroundColorTween.chain(CurveTween(curve: effectiveHoverEffectCurve)), ); _textColor ??= _animationController!.drive( _textColorTween.chain(CurveTween(curve: effectiveHoverEffectCurve)), ); _backgroundColorTween ..begin = widget.backgroundColor ..end = hoverColor; _textColorTween ..begin = effectiveTextColor ..end = widget.hoverTextColor ?? effectiveTextColor; return MoonBaseControl( autofocus: widget.autofocus, isFocusable: widget.isFocusable, ensureMinimalTouchTargetSize: widget.ensureMinimalTouchTargetSize, semanticTypeIsButton: true, showFocusEffect: widget.showFocusEffect, showPulseEffect: widget.showPulseEffect, showPulseEffectJiggle: widget.showPulseEffectJiggle, showScaleEffect: widget.showScaleEffect, borderRadius: effectiveBorderRadius, backgroundColor: widget.backgroundColor, focusEffectColor: widget.focusEffectColor, pulseEffectColor: widget.pulseEffectColor, disabledOpacityValue: widget.disabledOpacityValue, minTouchTargetSize: widget.minTouchTargetSize, focusEffectExtent: widget.focusEffectExtent, pulseEffectExtent: widget.pulseEffectExtent, scaleEffectScalar: widget.scaleEffectScalar, focusEffectDuration: widget.focusEffectDuration, pulseEffectDuration: widget.pulseEffectDuration, scaleEffectDuration: widget.scaleEffectDuration, focusEffectCurve: widget.focusEffectCurve, pulseEffectCurve: widget.pulseEffectCurve, scaleEffectCurve: widget.scaleEffectCurve, focusNode: widget.focusNode, semanticLabel: widget.semanticLabel, onTap: widget.onTap, onLongPress: widget.onLongPress, builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { final bool canAnimate = _isEnabled && (isHovered || isFocused || isPressed); _handleHoverEffect(canAnimate); return AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return IconTheme( data: IconThemeData( color: _textColor!.value, size: effectiveMoonButtonSize.iconSizeValue, ), child: DefaultTextStyle( style: effectiveMoonButtonSize.textStyle .copyWith(color: _textColor!.value), child: Container( width: widget.width, height: effectiveHeight, constraints: BoxConstraints(minWidth: effectiveHeight), decoration: widget.decoration ?? ShapeDecoration( color: _backgroundColor!.value, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius .squircleBorderRadius(context), side: BorderSide( color: effectiveBorderColor, width: widget.showBorder ? effectiveBorderWidth : 0, style: widget.showBorder ? BorderStyle.solid : BorderStyle.none, ), ), ), child: child, ), ), ); }, child: Padding( padding: widget.isFullWidth ? EdgeInsets.zero : correctedPadding, child: widget.isFullWidth ? Stack( fit: StackFit.expand, children: [ if (widget.leading != null) Container( margin: EdgeInsets.symmetric(horizontal: effectiveGap), alignment: Directionality.of(context) == TextDirection.ltr ? Alignment.centerLeft : Alignment.centerRight, child: widget.leading, ), if (widget.label != null) Align( child: widget.label, ), if (widget.trailing != null) Container( margin: EdgeInsets.symmetric(horizontal: effectiveGap), alignment: Directionality.of(context) == TextDirection.ltr ? Alignment.centerRight : Alignment.centerLeft, child: widget.trailing, ), ], ) : Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ if (widget.leading != null) Padding( padding: EdgeInsets.symmetric(horizontal: effectiveGap), child: widget.leading, ), if (widget.label != null) widget.label!, if (widget.trailing != null) Padding( padding: EdgeInsets.symmetric(horizontal: effectiveGap), child: widget.trailing, ), ], ), ), ); }, ); } } ================================================ FILE: lib/src/widgets/buttons/filled_button.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonFilledButton extends StatelessWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether the button is focusable. final bool isFocusable; /// Whether to ensure a minimum touch target size for the button. final bool ensureMinimalTouchTargetSize; /// Whether the button takes up the full width of its parent container. final bool isFullWidth; /// Whether to show a continuous pulsating effect. final bool showPulseEffect; /// The border radius of the button. final BorderRadiusGeometry? borderRadius; /// The background color of the button. final Color? backgroundColor; /// The custom decoration of the button. final Decoration? decoration; /// The height of the button. final double? height; /// The width of the button. final double? width; /// The minimum size of the button touch target. final double minTouchTargetSize; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The size of the button. final MoonButtonSize? buttonSize; /// The semantic label for the button. final String? semanticLabel; /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; /// The callback that is called when the button is long-pressed. final VoidCallback? onLongPress; /// The widget to display before the [label] widget of the button. final Widget? leading; /// The primary content of the button widget. final Widget? label; /// The widget to display after the [label] widget of the button. final Widget? trailing; /// Creates a Moon Design filled button. /// /// See also: /// /// * [MoonOutlinedButton], Moon Design outlined button. /// * [MoonTextButton], Moon Design text button. /// * [MoonButton.icon], Moon Design icon button. const MoonFilledButton({ super.key, this.autofocus = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, this.showPulseEffect = false, this.borderRadius, this.backgroundColor, this.decoration, this.height, this.width, this.minTouchTargetSize = 40, this.focusNode, this.buttonSize, this.semanticLabel, this.onTap, this.onLongPress, this.leading, this.label, this.trailing, }); @override Widget build(BuildContext context) { final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.buttonTheme.colors.filledVariantBackgroundColor ?? MoonColors.light.piccolo; final Color effectiveTextColor = context.moonTheme?.buttonTheme.colors.filledVariantTextColor ?? MoonColors.light.goten; return MoonButton( autofocus: autofocus, isFocusable: isFocusable, ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, showPulseEffect: showPulseEffect, textColor: effectiveTextColor, borderRadius: borderRadius, backgroundColor: effectiveBackgroundColor, height: height, width: width, minTouchTargetSize: minTouchTargetSize, focusNode: focusNode, buttonSize: buttonSize, decoration: decoration, semanticLabel: semanticLabel, onTap: onTap, onLongPress: onLongPress, label: label, leading: leading, trailing: trailing, ); } } ================================================ FILE: lib/src/widgets/buttons/outlined_button.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; class MoonOutlinedButton extends StatelessWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether the button is focusable. final bool isFocusable; /// Whether to ensure a minimum touch target size for the button. final bool ensureMinimalTouchTargetSize; /// Whether the button takes up the full width of its parent container. final bool isFullWidth; /// Whether to show a continuous pulsating effect. final bool showPulseEffect; /// The border radius of the button. final BorderRadiusGeometry? borderRadius; /// The border color of the button. final Color? borderColor; /// The custom decoration of the button. final Decoration? decoration; /// The height of the button. final double? height; /// The width of the button. final double? width; /// The minimum size of the button touch target. final double minTouchTargetSize; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The size of the button. final MoonButtonSize? buttonSize; /// The semantic label for the button. final String? semanticLabel; /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; /// The callback that is called when the button is long-pressed. final VoidCallback? onLongPress; /// The widget to display before the [label] widget of the button. final Widget? leading; /// The primary content of the button widget. final Widget? label; /// The widget to display after the [label] widget of the button. final Widget? trailing; /// Creates a Moon Design outlined button. /// /// See also: /// /// * [MoonFilledButton], Moon Design filled button. /// * [MoonTextButton], Moon Design text button. /// * [MoonButton.icon], Moon Design icon button. const MoonOutlinedButton({ super.key, this.autofocus = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, this.showPulseEffect = false, this.borderRadius, this.borderColor, this.decoration, this.height, this.width, this.minTouchTargetSize = 40, this.focusNode, this.buttonSize, this.semanticLabel, this.onTap, this.onLongPress, this.label, this.leading, this.trailing, }); @override Widget build(BuildContext context) { return MoonButton( autofocus: autofocus, isFocusable: isFocusable, ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, showPulseEffect: showPulseEffect, showBorder: true, borderRadius: borderRadius, borderColor: borderColor, height: height, width: width, minTouchTargetSize: minTouchTargetSize, focusNode: focusNode, buttonSize: buttonSize, decoration: decoration, semanticLabel: semanticLabel, onTap: onTap, onLongPress: onLongPress, label: label, leading: leading, trailing: trailing, ); } } ================================================ FILE: lib/src/widgets/buttons/text_button.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/widgets/buttons/button.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonTextButton extends StatelessWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether the button is focusable. final bool isFocusable; /// Whether to ensure a minimum touch target size for the button. final bool ensureMinimalTouchTargetSize; /// Whether the button takes up the full width of its parent container. final bool isFullWidth; /// Whether to show a continuous pulsating effect. final bool showPulseEffect; /// The custom decoration of the button. final Decoration? decoration; /// The height of the button. final double? height; /// The width of the button. final double? width; /// The minimum size of the button touch target. final double minTouchTargetSize; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The size of the button. final MoonButtonSize? buttonSize; /// The semantic label for the button. final String? semanticLabel; /// The callback that is called when the button is tapped or pressed. final VoidCallback? onTap; /// The callback that is called when the button is long-pressed. final VoidCallback? onLongPress; /// The widget to display before the [label] widget of the button. final Widget? leading; /// The primary content of the button widget. final Widget? label; /// The widget to display after the [label] widget of the button. final Widget? trailing; /// Creates a Moon Design text button. /// /// See also: /// /// * [MoonFilledButton], Moon Design filled button. /// * [MoonOutlinedButton], Moon Design outlined button. /// * [MoonButton.icon], Moon Design icon button. const MoonTextButton({ super.key, this.autofocus = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, this.isFullWidth = false, this.showPulseEffect = false, this.decoration, this.height, this.width, this.minTouchTargetSize = 40, this.focusNode, this.buttonSize, this.semanticLabel, this.onTap, this.onLongPress, this.label, this.leading, this.trailing, }); @override Widget build(BuildContext context) { final Color effectiveTextColor = context.moonTheme?.buttonTheme.colors.textVariantTextColor ?? MoonColors.light.textSecondary; final Color effectiveHoverTextColor = context.moonTheme?.buttonTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveHoverColor = context.moonTheme?.buttonTheme.colors.textVariantHoverColor ?? MoonColors.light.jiren; final Color effectiveFocusColor = context .moonTheme?.buttonTheme.colors.textVariantFocusColor .withOpacity(context.isDarkMode ? 0.8 : 0.2) ?? MoonColors.light.piccolo.withOpacity(context.isDarkMode ? 0.8 : 0.2); return MoonButton( autofocus: autofocus, isFocusable: isFocusable, ensureMinimalTouchTargetSize: ensureMinimalTouchTargetSize, isFullWidth: isFullWidth, showPulseEffect: showPulseEffect, textColor: effectiveTextColor, hoverTextColor: effectiveHoverTextColor, hoverEffectColor: effectiveHoverColor, focusEffectColor: effectiveFocusColor, height: height, width: width, minTouchTargetSize: minTouchTargetSize, focusNode: focusNode, buttonSize: buttonSize, decoration: decoration, semanticLabel: semanticLabel, onTap: onTap, onLongPress: onLongPress, label: label, leading: leading, trailing: trailing, ); } } ================================================ FILE: lib/src/widgets/carousel/carousel.dart ================================================ import 'dart:async'; import 'dart:math' as math; import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:flutter/physics.dart'; import 'package:flutter/rendering.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonCarousel extends StatefulWidget { /// The axis direction in which the carousel scrolls. final Axis axisDirection; /// Whether to enable the automatic scrolling for the carousel. final bool autoPlay; /// Whether to align the selected carousel item to the center of the viewport. /// When set to true, the [anchor] property is ignored. final bool isCentered; /// Whether to limit the 'maxExtent' proportionally based on the [anchor]. /// /// This makes the carousel behave like a [ListView] in terms of how the /// 'maxExtent' is calculated /// and makes the last carousel item(s) unreachable for the purposes of the /// [onIndexChanged] callback. final bool clampMaxExtent; /// Whether to enable infinite looping for the carousel items. final bool loop; /// Positions the selected carousel item within the viewport. Values range /// from 0 to 1. /// /// A value of 0.0 indicates that the selected item is aligned to the start /// of the viewport, and a value of 1.0 indicates that it is aligned to the /// end of the viewport. /// /// This property is ignored when [isCentered] is set to true. final double anchor; /// The gap between the carousel items. final double? gap; /// The maximum width for each carousel item in the viewport. final double itemExtent; /// The factor to adjust and multiply the velocity of carousel scrolling. final double velocityFactor; /// The delay between the items in the carousel's automatic scrolling /// sequence. final Duration? autoPlayDelay; /// The duration of the MoonCarousel [autoplay] transition animation. final Duration? transitionDuration; /// The curve of the MoonCarousel [autoplay] transition animation. final Curve? transitionCurve; /// The total number of items to build for the carousel. final int itemCount; /// The [ScrollController] used to control the carousel. final ScrollController? controller; /// The scroll physics of the carousel. /// /// Defaults to [MoonCarouselScrollPhysics], which ensures that the carousel /// always lands on a specific item after scrolling. final ScrollPhysics? physics; /// The custom scroll behavior for the carousel. final ScrollBehavior? scrollBehavior; /// The callback that is called when the carousel item index has changed. final void Function(int index)? onIndexChanged; /// Builds carousel items lazily within the viewport. /// /// When [loop] is false, 'itemIndex' corresponds to 'realIndex' /// (i.e., the index of the element). /// /// When [loop] is true, two indexes are exposed by the 'itemBuilder'. /// /// The first is 'itemIndex', which represents the modded item index, /// e.g., for a list of 10, 'position(11) = 1', and 'position(-1) = 9'. /// /// The second is 'realIndex', which represents the actual index, /// e.g., [..., -2, -1, 0, 1, 2, ...] in loop. /// The 'realIndex' is essential to support 'jumpToItem' by tapping on it. final Widget Function(BuildContext context, int itemIndex, int realIndex) itemBuilder; /// Creates a Moon Design carousel. const MoonCarousel({ super.key, this.axisDirection = Axis.horizontal, this.autoPlay = false, this.isCentered = true, this.clampMaxExtent = false, this.loop = false, this.anchor = 0.0, this.gap, required this.itemExtent, this.velocityFactor = 0.5, this.autoPlayDelay, this.transitionDuration, this.transitionCurve, required this.itemCount, this.controller, this.physics, this.scrollBehavior, this.onIndexChanged, required this.itemBuilder, }) : assert(itemExtent > 0), assert(itemCount > 0), assert(velocityFactor > 0.0 && velocityFactor <= 1.0); @override State createState() => _MoonCarouselState(); } class _MoonCarouselState extends State { late int _lastReportedItemIndex; late MoonCarouselScrollController _scrollController; final Key _forwardListKey = const ValueKey("moon_carousel_key"); double _effectiveGap = 0; // Calculates the anchor position for the viewport to center the selected item // when 'isCentered' is true. double _getCenteredAnchor(BoxConstraints constraints) { if (!widget.isCentered) return widget.anchor; final maxExtent = widget.axisDirection == Axis.horizontal ? constraints.maxWidth : constraints.maxHeight; return ((maxExtent / 2) - (widget.itemExtent / 2)) / maxExtent; } // Determines whether the carousel's anchored content surpasses the viewport's // width. If not, clamping is not applicable. bool _clampMaxExtent(double viewportWidth) { final double itemsWidth = widget.itemCount * widget.itemExtent; final double gapWidth = (widget.itemCount - 1) * _effectiveGap; final double anchor = viewportWidth * widget.anchor * 2; final double totalWidth = itemsWidth + gapWidth + anchor; return totalWidth >= viewportWidth && widget.clampMaxExtent; } AxisDirection _getDirection(BuildContext context) { switch (widget.axisDirection) { case Axis.horizontal: assert(debugCheckHasDirectionality(context)); final TextDirection textDirection = Directionality.of(context); final AxisDirection axisDirection = textDirectionToAxisDirection(textDirection); return axisDirection; case Axis.vertical: return AxisDirection.down; } } @override void initState() { super.initState(); _scrollController = (widget.controller as MoonCarouselScrollController?) ?? MoonCarouselScrollController(); _lastReportedItemIndex = _scrollController.initialItem; if (widget.autoPlay) { WidgetsBinding.instance.addPostFrameCallback((Duration _) { final Duration effectiveAutoPlayDelay = widget.autoPlayDelay ?? context.moonTheme?.carouselTheme.properties.autoPlayDelay ?? const Duration(seconds: 3); final Duration effectiveTransitionDuration = widget .transitionDuration ?? context.moonTheme?.carouselTheme.properties.transitionDuration ?? const Duration(milliseconds: 800); final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.carouselTheme.properties.transitionCurve ?? Curves.fastOutSlowIn; _scrollController.startAutoPlay( delay: effectiveAutoPlayDelay, duration: effectiveTransitionDuration, curve: effectiveTransitionCurve, ); }); } } @override void didUpdateWidget(MoonCarousel oldWidget) { super.didUpdateWidget(oldWidget); if (widget.autoPlay != oldWidget.autoPlay) { if (widget.autoPlay) { final Duration effectiveAutoPlayDelay = widget.autoPlayDelay ?? context.moonTheme?.carouselTheme.properties.autoPlayDelay ?? const Duration(seconds: 3); final Duration effectiveTransitionDuration = widget .transitionDuration ?? context.moonTheme?.carouselTheme.properties.transitionDuration ?? const Duration(milliseconds: 800); final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.carouselTheme.properties.transitionCurve ?? Curves.fastOutSlowIn; _scrollController.startAutoPlay( delay: effectiveAutoPlayDelay, duration: effectiveTransitionDuration, curve: effectiveTransitionCurve, ); } else { _scrollController.stopAutoplay(); } } } @override void dispose() { if (widget.controller == null) _scrollController.dispose(); super.dispose(); } List _buildSlivers( BuildContext context, { required AxisDirection axisDirection, }) { final EdgeInsetsDirectional resolvedPadding = widget.axisDirection == Axis.horizontal ? EdgeInsetsDirectional.only(end: _effectiveGap) : EdgeInsetsDirectional.only(bottom: _effectiveGap); /// Delegate responsible for building items lazily in the forward direction /// as the viewport scrolls. final SliverChildDelegate childDelegate = SliverChildBuilderDelegate( (context, index) => Padding( padding: resolvedPadding, child: widget.itemBuilder( context, index.abs() % widget.itemCount, index, ), ), childCount: widget.loop ? null : widget.itemCount, ); /// Delegate responsible for building items lazily in the reverse direction /// as the viewport scrolls. final SliverChildDelegate? reversedChildDelegate = widget.loop ? SliverChildBuilderDelegate( (context, index) => Padding( padding: resolvedPadding, child: widget.itemBuilder( context, widget.itemCount - (index.abs() % widget.itemCount) - 1, -(index + 1), ), ), ) : null; final Widget forward = SliverFixedExtentList( key: _forwardListKey, delegate: childDelegate, itemExtent: widget.itemExtent + _effectiveGap, ); if (!widget.loop) return [forward]; final Widget reversed = SliverFixedExtentList( delegate: reversedChildDelegate!, itemExtent: widget.itemExtent + _effectiveGap, ); return [reversed, forward]; } @override Widget build(BuildContext context) { final Color effectiveTextColor = context.moonTheme?.carouselTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = context.moonTheme?.carouselTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final TextStyle effectiveTextStyle = context.moonTheme?.carouselTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final AxisDirection axisDirection = _getDirection(context); final ScrollBehavior effectiveScrollBehavior = widget.scrollBehavior ?? ScrollConfiguration.of(context).copyWith( scrollbars: false, overscroll: false, dragDevices: { PointerDeviceKind.touch, PointerDeviceKind.mouse, }, ); _effectiveGap = widget.gap ?? context.moonTheme?.carouselTheme.properties.gap ?? MoonSizes.sizes.x2s; return NotificationListener( onNotification: (ScrollUpdateNotification notification) { final MoonCarouselExtentMetrics metrics = notification.metrics as MoonCarouselExtentMetrics; final int currentItem = metrics.itemIndex; if (currentItem != _lastReportedItemIndex) { _lastReportedItemIndex = currentItem; final int trueIndex = _getTrueIndex(_lastReportedItemIndex, widget.itemCount); widget.onIndexChanged?.call(trueIndex); } return false; }, child: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { final double centeredAnchor = _getCenteredAnchor(constraints); final bool clampMaxExtent = _clampMaxExtent(constraints.maxWidth); return IconTheme( data: IconThemeData( color: effectiveIconColor, ), child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: _MoonCarouselScrollable( anchor: centeredAnchor, axisDirection: axisDirection, controller: _scrollController, clampMaxExtent: clampMaxExtent, gap: _effectiveGap, itemCount: widget.itemCount, itemExtent: widget.itemExtent + _effectiveGap, loop: widget.loop, physics: widget.physics ?? const MoonCarouselScrollPhysics(), scrollBehavior: effectiveScrollBehavior, velocityFactor: widget.velocityFactor, viewportBuilder: ( BuildContext context, ViewportOffset position, ) { return Viewport( anchor: centeredAnchor, axisDirection: axisDirection, center: _forwardListKey, offset: position, slivers: _buildSlivers( context, axisDirection: axisDirection, ), ); }, ), ), ); }, ), ); } } /// Extends Scrollable by including the viewport's itemExtent, itemCount, loop, /// and other values. This allows ScrollPosition and Physics to access these /// values directly from the scroll context. class _MoonCarouselScrollable extends Scrollable { final bool clampMaxExtent; final bool loop; final double anchor; final double gap; final double itemExtent; final double velocityFactor; final int itemCount; const _MoonCarouselScrollable({ super.axisDirection = AxisDirection.right, super.controller, super.physics, super.scrollBehavior, required super.viewportBuilder, required this.clampMaxExtent, required this.loop, required this.anchor, required this.gap, required this.itemExtent, required this.velocityFactor, required this.itemCount, }); @override _MoonCarouselScrollableState createState() => _MoonCarouselScrollableState(); } class _MoonCarouselScrollableState extends ScrollableState { bool get clampMaxExtent => (widget as _MoonCarouselScrollable).clampMaxExtent; bool get loop => (widget as _MoonCarouselScrollable).loop; double get anchor => (widget as _MoonCarouselScrollable).anchor; double get gap => (widget as _MoonCarouselScrollable).gap; double get itemExtent => (widget as _MoonCarouselScrollable).itemExtent; double get velocityFactor => (widget as _MoonCarouselScrollable).velocityFactor; int get itemCount => (widget as _MoonCarouselScrollable).itemCount; } /// Scroll controller for [MoonCarousel]. class MoonCarouselScrollController extends ScrollController { /// The initial carousel item index for [MoonCarouselScrollController]. /// /// Defaults to '0'. final int initialItem; /// Scroll controller for [MoonCarousel]. MoonCarouselScrollController({this.initialItem = 0}); // Timer for autoplay. Timer? _autoplayTimer; void startAutoPlay({ Duration delay = const Duration(seconds: 3), Duration? duration, Curve? curve, }) { _autoplayTimer?.cancel(); _autoplayTimer = Timer.periodic(delay, (timer) { // When the carousel reaches the end, animate it back to the beginning. if (offset >= position.maxScrollExtent && !position.outOfRange) { animateToItem(0, duration: duration, curve: curve); } else { nextItem(duration: duration, curve: curve); } }); } void stopAutoplay() { _autoplayTimer?.cancel(); } @override void dispose() { stopAutoplay(); super.dispose(); } /// Returns the index of the currently selected item. If [MoonCarousel.loop] /// is true it provides the modded index value. int get selectedItem => _getTrueIndex( (position as _MoonCarouselScrollPosition).itemIndex, (position as _MoonCarouselScrollPosition).itemCount, ); /// Animate to the specified item index. Future animateToItem( int itemIndex, { Duration? duration, Curve? curve, }) async { if (!hasClients) return; await Future.wait([ for (final position in positions.cast<_MoonCarouselScrollPosition>()) position.animateTo( itemIndex * position.itemExtent, duration: duration ?? const Duration(milliseconds: 800), curve: curve ?? Curves.fastOutSlowIn, ), ]); } /// Jump to the specified item index. void jumpToItem(int itemIndex) { for (final position in positions.cast<_MoonCarouselScrollPosition>()) { position.jumpTo(itemIndex * position.itemExtent); } } /// Animate to the next item in the viewport. Future nextItem({Duration? duration, Curve? curve}) async { if (!hasClients) return; await Future.wait([ for (final position in positions.cast<_MoonCarouselScrollPosition>()) position.animateTo( offset + position.itemExtent, duration: duration ?? const Duration(milliseconds: 800), curve: curve ?? Curves.fastOutSlowIn, ), ]); } /// Animate to the previous item in the viewport. Future previousItem({Duration? duration, Curve? curve}) async { if (!hasClients) return; await Future.wait([ for (final position in positions.cast<_MoonCarouselScrollPosition>()) position.animateTo( offset - position.itemExtent, duration: duration ?? const Duration(milliseconds: 800), curve: curve ?? Curves.fastOutSlowIn, ), ]); } @override ScrollPosition createScrollPosition( ScrollPhysics physics, ScrollContext context, ScrollPosition? oldPosition, ) { return _MoonCarouselScrollPosition( context: context, initialItem: initialItem, oldPosition: oldPosition, physics: physics, ); } } /// The metrics for the [MoonCarouselScrollController]. class MoonCarouselExtentMetrics extends FixedScrollMetrics { /// The index of the currently selected item within the scroll view. final int itemIndex; /// Provides an immutable snapshot of the current scroll positions within the /// carousel. This snapshot can be directly accessed by [ScrollNotification] /// to retrieve the currently selected real item index at any given moment. MoonCarouselExtentMetrics({ required super.minScrollExtent, required super.maxScrollExtent, required super.pixels, required super.viewportDimension, required super.axisDirection, required super.devicePixelRatio, required this.itemIndex, }); @override MoonCarouselExtentMetrics copyWith({ AxisDirection? axisDirection, double? devicePixelRatio, double? minScrollExtent, double? maxScrollExtent, double? pixels, double? viewportDimension, int? itemIndex, }) { return MoonCarouselExtentMetrics( axisDirection: axisDirection ?? this.axisDirection, devicePixelRatio: devicePixelRatio ?? this.devicePixelRatio, minScrollExtent: minScrollExtent ?? (hasContentDimensions ? this.minScrollExtent : 0.0), maxScrollExtent: maxScrollExtent ?? this.maxScrollExtent, pixels: pixels ?? this.pixels, viewportDimension: viewportDimension ?? this.viewportDimension, itemIndex: itemIndex ?? this.itemIndex, ); } } int _getItemFromOffset({ required double itemExtent, required double minScrollExtent, required double maxScrollExtent, required double offset, }) { return (_clipOffsetToScrollableRange( offset, minScrollExtent, maxScrollExtent, ) / itemExtent) .round(); } double _clipOffsetToScrollableRange( double offset, double minScrollExtent, double maxScrollExtent, ) { return math.min(math.max(offset, minScrollExtent), maxScrollExtent); } // Returns the modded item index from the real index. int _getTrueIndex(int currentIndex, int totalCount) { if (currentIndex >= 0) return currentIndex % totalCount; return (totalCount + (currentIndex % totalCount)) % totalCount; } class _MoonCarouselScrollPosition extends ScrollPositionWithSingleContext implements MoonCarouselExtentMetrics { _MoonCarouselScrollPosition({ required super.physics, required super.context, required int initialItem, super.oldPosition, }) : assert(context is _MoonCarouselScrollableState), super( initialPixels: _getItemExtentFromScrollContext(context) * initialItem, ); double get anchor => _getAnchorFromScrollContext(context); static double _getAnchorFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).anchor; double get itemExtent => _getItemExtentFromScrollContext(context); static double _getItemExtentFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).itemExtent; double get gap => _getGapFromScrollContext(context); static double _getGapFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).gap; int get itemCount => _getItemCountFromScrollContext(context); static int _getItemCountFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).itemCount; bool get clampMaxExtent => _getDeferMaxExtentFromScrollContext(context); static bool _getDeferMaxExtentFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).clampMaxExtent; bool get loop => _getLoopFromScrollContext(context); static bool _getLoopFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).loop; double get velocityFactor => _getVelocityFactorFromScrollContext(context); static double _getVelocityFactorFromScrollContext(ScrollContext context) => (context as _MoonCarouselScrollableState).velocityFactor; @override int get itemIndex { return _getItemFromOffset( itemExtent: itemExtent, minScrollExtent: hasContentDimensions ? minScrollExtent : 0.0, maxScrollExtent: maxScrollExtent, offset: pixels, ); } @override double get maxScrollExtent { if (loop) { return super.hasContentDimensions ? super.maxScrollExtent : 0.0; } else if (clampMaxExtent) { final itemsToSubtract = viewportDimension ~/ itemExtent; final remainderOfViewport = viewportDimension % itemExtent; final anchorWhitespaceFactor = viewportDimension * anchor * 2; return itemExtent * (itemCount - itemsToSubtract) - remainderOfViewport + anchorWhitespaceFactor - gap; } else { return itemExtent * (itemCount - 1); } } @override MoonCarouselExtentMetrics copyWith({ AxisDirection? axisDirection, double? devicePixelRatio, double? minScrollExtent, double? maxScrollExtent, double? pixels, double? viewportDimension, int? itemIndex, }) { return MoonCarouselExtentMetrics( axisDirection: axisDirection ?? this.axisDirection, devicePixelRatio: devicePixelRatio ?? this.devicePixelRatio, minScrollExtent: minScrollExtent ?? (hasContentDimensions ? this.minScrollExtent : 0.0), maxScrollExtent: maxScrollExtent ?? this.maxScrollExtent, pixels: pixels ?? this.pixels, viewportDimension: viewportDimension ?? this.viewportDimension, itemIndex: itemIndex ?? this.itemIndex, ); } } /// The physics for the [MoonCarousel]. class MoonCarouselScrollPhysics extends ScrollPhysics { /// Extends Flutter's [FixedExtentScrollPhysics] to implement /// carousel-specific behavior. When [MoonCarousel.loop] is false, friction is /// applied when the user tries to scroll beyond the viewport. The friction /// factor is calculated the same way as in [BouncingScrollPhysics]. const MoonCarouselScrollPhysics({super.parent}); @override MoonCarouselScrollPhysics applyTo(ScrollPhysics? ancestor) { return MoonCarouselScrollPhysics(parent: buildParent(ancestor)); } @override double applyBoundaryConditions(ScrollMetrics position, double value) { assert(() { if (value == position.pixels) { throw FlutterError.fromParts([ ErrorSummary( '$runtimeType.applyBoundaryConditions() was called redundantly.', ), ErrorDescription( 'The proposed new position, $value, is exactly equal to the current ' 'position of the given ${position.runtimeType}, ${position.pixels}.' '\n The applyBoundaryConditions method should only be called when ' 'the value is going to actually change the pixels, otherwise it is ' 'redundant.', ), DiagnosticsProperty( 'The physics object in question was', this, style: DiagnosticsTreeStyle.errorProperty, ), DiagnosticsProperty( 'The position object in question was', position, style: DiagnosticsTreeStyle.errorProperty, ), ]); } return true; }()); if (value < position.pixels && position.pixels <= position.minScrollExtent) { // Under-scroll. return value - position.pixels; } if (position.maxScrollExtent <= position.pixels && position.pixels < value) { // Overscroll. return value - position.pixels; } if (value < position.minScrollExtent && position.minScrollExtent < position.pixels) { // Hit top edge. return value - position.minScrollExtent; } if (position.pixels < position.maxScrollExtent && position.maxScrollExtent < value) { // Hit bottom edge. return value - position.maxScrollExtent; } return 0.0; } @override Simulation? createBallisticSimulation( ScrollMetrics position, double velocity, ) { final _MoonCarouselScrollPosition metrics = position as _MoonCarouselScrollPosition; // Scenario 1: // If the carousel is out of range and not returning to range, we defer to // the parent ballistics to bring the carousel back into range at the // scrollable boundary. if ((velocity <= 0.0 && metrics.pixels <= metrics.minScrollExtent) || (velocity >= 0.0 && metrics.pixels >= metrics.maxScrollExtent)) { return super.createBallisticSimulation(metrics, velocity); } // Perform a test simulation to determine the carousel's ballistic // trajectory without interference from carousel items, simulating a natural // fall. final Simulation? testFrictionSimulation = super.createBallisticSimulation( metrics, velocity * math.min(metrics.velocityFactor + 0.15, 1.0), ); // Scenario 2: // If the simulated trajectory would have taken the carousel beyond the // scroll extent, defer back to the parent physics' ballistics to prevent it // from overshooting the scrollable boundary. if (testFrictionSimulation != null && (testFrictionSimulation.x(double.infinity) == metrics.minScrollExtent || testFrictionSimulation.x(double.infinity) == metrics.maxScrollExtent)) { return super.createBallisticSimulation(metrics, velocity); } // From the simulated final position, identify the nearest item the carousel // should have settled onto based on its natural trajectory. final int settlingItemIndex = _getItemFromOffset( itemExtent: metrics.itemExtent, minScrollExtent: metrics.minScrollExtent, maxScrollExtent: metrics.maxScrollExtent, offset: testFrictionSimulation?.x(double.infinity) ?? metrics.pixels, ); final double settlingPixels = settlingItemIndex * metrics.itemExtent; // Scenario 3: // If the carousel has zero velocity and is already at the position it // should settle onto, there's no need for further action. final Tolerance tolerance = toleranceFor(metrics); if (velocity.abs() < tolerance.velocity && (settlingPixels - metrics.pixels).abs() < tolerance.distance) { return null; } // Scenario 4: // If the simulated trajectory indicates the carousel is likely to return to // its initial position due to a lack of sufficient initial velocity, use a // spring simulation. if (settlingItemIndex == metrics.itemIndex) { return SpringSimulation( spring, metrics.pixels, settlingPixels, velocity * metrics.velocityFactor, tolerance: tolerance, ); } // Scenario 5: // Create a new friction simulation, adjusting the drag force to ensure the // carousel transitions to the nearest item, aligning with its natural // stopping point. return FrictionSimulation.through( metrics.pixels, settlingPixels, velocity * metrics.velocityFactor, tolerance.velocity * metrics.velocityFactor * velocity.sign, ); } } ================================================ FILE: lib/src/widgets/checkbox/checkbox.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; import 'package:moon_design/src/widgets/checkbox/checkbox_painter.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonCheckbox extends StatefulWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether the checkbox supports a tri-state (indeterminate). /// /// When tri-state is true, the checkbox can be in one of three states: true, /// false, or null. /// /// When tri-state is false (the default), the checkbox [value] can only be /// true or false. /// /// If tri-state is true, the checkbox displays a dash when its [value] is /// null, indicating the mixed state. /// /// When a tri-state checkbox is tapped, its [onChanged] callback is invoked, /// cycling through the three states: /// * If the current value is false, the [value] becomes true. /// * If the current value is true, the [value] becomes null (mixed state). /// * If the current value is null (mixed state), the [value] becomes false. /// /// If tri-state is false, the [value] must not be null. final bool tristate; /// Whether the checkbox is checked. /// /// When [tristate] is true, a value of null corresponds to the mixed state. /// When [tristate] is false, this value must not be null. final bool? value; /// The background color of the checked checkbox. final Color? activeColor; /// The background color of the unchecked checkbox. final Color? inactiveColor; /// The border color of the unchecked checkbox. final Color? borderColor; /// The color of the check icon when the checkbox is checked. final Color? checkColor; /// The size of the checkbox tap target. /// /// Defaults to 40. final double tapAreaSizeValue; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The semantic label for the checkbox. final String? semanticLabel; /// The callback that is called when the checkbox value changes. final ValueChanged? onChanged; /// Creates a Moon Design checkbox. const MoonCheckbox({ super.key, this.autofocus = false, this.tristate = false, required this.value, this.activeColor, this.borderColor, this.checkColor, this.inactiveColor, this.tapAreaSizeValue = 40, this.focusNode, this.semanticLabel, required this.onChanged, }); @override State createState() => _MoonCheckboxState(); } class _MoonCheckboxState extends State with TickerProviderStateMixin, ToggleableStateMixin { final MoonCheckboxPainter _painter = MoonCheckboxPainter(); bool? _previousValue; @override ValueChanged? get onChanged => widget.onChanged; @override bool get tristate => widget.tristate; @override bool? get value => widget.value; BorderSide? _resolveSide(BorderSide? side) { if (side is MaterialStateBorderSide) { return MaterialStateProperty.resolveAs(side, states); } if (!states.contains(MaterialState.selected)) return side; return null; } @override void initState() { super.initState(); _previousValue = widget.value; } @override void didUpdateWidget(MoonCheckbox oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.value != widget.value) { _previousValue = oldWidget.value; animateToValue(); } } @override void dispose() { _painter.dispose(); super.dispose(); } @override Widget build(BuildContext context) { const Size size = Size(16, 16); final BorderRadiusGeometry effectiveBorderRadius = context.moonTheme?.checkboxTheme.properties.borderRadius ?? MoonBorders.borders.interactiveXs; final Color effectiveActiveColor = widget.activeColor ?? context.moonTheme?.checkboxTheme.colors.activeColor ?? MoonColors.light.piccolo; final Color effectiveInactiveColor = widget.inactiveColor ?? context.moonTheme?.checkboxTheme.colors.inactiveColor ?? Colors.transparent; final Color effectiveCheckColor = widget.checkColor ?? context.moonTheme?.checkboxTheme.colors.checkColor ?? MoonColors.light.goten; final Color effectiveBorderColor = widget.borderColor ?? context.moonTheme?.checkboxTheme.colors.borderColor ?? MoonColors.light.trunks; final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectColor; final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectDuration; final Curve effectiveFocusEffectCurve = context.moonEffects?.controlFocusEffect.effectCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectCurve; final double effectiveFocusEffectExtent = context.moonEffects?.controlFocusEffect.effectExtent ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectExtent; final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final MaterialStateProperty effectiveMouseCursor = MaterialStateProperty.resolveWith( (Set states) { return MaterialStateMouseCursor.clickable.resolve(states); }); return Semantics( label: widget.semanticLabel, checked: widget.value ?? false, mixed: widget.tristate ? widget.value == null : null, child: TouchTargetPadding( minSize: Size(widget.tapAreaSizeValue, widget.tapAreaSizeValue), child: RepaintBoundary( child: MoonFocusEffect( show: states.contains(MaterialState.focused), childBorderRadius: effectiveBorderRadius, effectColor: effectiveFocusEffectColor, effectCurve: effectiveFocusEffectCurve, effectDuration: effectiveFocusEffectDuration, effectExtent: effectiveFocusEffectExtent, child: AnimatedOpacity( opacity: states.contains(MaterialState.disabled) ? effectiveDisabledOpacityValue : 1, duration: effectiveFocusEffectDuration, child: buildToggleable( mouseCursor: effectiveMouseCursor, focusNode: widget.focusNode, autofocus: widget.autofocus, size: size, painter: _painter ..position = position ..activeColor = effectiveActiveColor ..inactiveColor = effectiveInactiveColor ..checkColor = effectiveCheckColor ..value = value ..previousValue = _previousValue ..shape = MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), ) ..side = _resolveSide( BorderSide(color: effectiveBorderColor), ), ), ), ), ), ), ); } } ================================================ FILE: lib/src/widgets/checkbox/checkbox_painter.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; class MoonCheckboxPainter extends ToggleablePainter { static const double _kEdgeSize = 16; static const double _kStrokeWidth = 1.0; Color get checkColor => _checkColor!; Color? _checkColor; set checkColor(Color value) { if (_checkColor == value) return; _checkColor = value; notifyListeners(); } bool? get value => _value; bool? _value; set value(bool? value) { if (_value == value) return; _value = value; notifyListeners(); } bool? get previousValue => _previousValue; bool? _previousValue; set previousValue(bool? value) { if (_previousValue == value) return; _previousValue = value; notifyListeners(); } OutlinedBorder get shape => _shape!; OutlinedBorder? _shape; set shape(OutlinedBorder value) { if (_shape == value) return; _shape = value; notifyListeners(); } BorderSide? get side => _side; BorderSide? _side; set side(BorderSide? value) { if (_side == value) return; _side = value; notifyListeners(); } Rect _outerRectAt(Offset origin, double t) { final Rect rect = Rect.fromLTWH(origin.dx, origin.dy, _kEdgeSize, _kEdgeSize); return rect; } // Controls the checkbox border or fill color based on its checked state. // // When the checkbox is unchecked (value == false), the border color is set to // this value. When the checkbox is checked (value == true) or in the mixed // state (value == null), the fill color is set to this value. Color _colorAt(double t) { // As t goes from 0.0 to 0.25, animate from the inactiveColor to activeColor. return t >= 0.25 ? activeColor : colorPremulLerp(inactiveColor, activeColor, t * 4.0)!; } // The white stroke is used to paint the check and dash. Paint _createStrokePaint() { return Paint() ..color = checkColor ..style = PaintingStyle.stroke ..strokeWidth = _kStrokeWidth; } void _drawBox( Canvas canvas, Rect outer, Paint paint, BorderSide? side, bool fill, ) { if (fill) canvas.drawPath(shape.getOuterPath(outer), paint); if (side != null) shape.copyWith(side: side).paint(canvas, outer); } void _drawCheck(Canvas canvas, Offset origin, double t, Paint paint) { assert(t >= 0.0 && t <= 1.0); // As t goes from 0.0 to 1.0, animate the two check mark strokes from the // short side to the long side. final Path path = Path(); const Offset start = Offset(_kEdgeSize * 0.15, _kEdgeSize * 0.45); const Offset mid = Offset(_kEdgeSize * 0.4, _kEdgeSize * 0.7); const Offset end = Offset(_kEdgeSize * 0.85, _kEdgeSize * 0.25); if (t < 0.5) { final double strokeT = t * 2.0; final Offset drawMid = Offset.lerp(start, mid, strokeT)!; path.moveTo(origin.dx + start.dx, origin.dy + start.dy); path.lineTo(origin.dx + drawMid.dx, origin.dy + drawMid.dy); } else { final double strokeT = (t - 0.5) * 2.0; final Offset drawEnd = Offset.lerp(mid, end, strokeT)!; path.moveTo(origin.dx + start.dx, origin.dy + start.dy); path.lineTo(origin.dx + mid.dx, origin.dy + mid.dy); path.lineTo(origin.dx + drawEnd.dx, origin.dy + drawEnd.dy); } canvas.drawPath(path, paint); } void _drawDash(Canvas canvas, Offset origin, double t, Paint paint) { assert(t >= 0.0 && t <= 1.0); // As t goes from 0.0 to 1.0, animate the horizontal line from the mid point // outwards. const Offset start = Offset(_kEdgeSize * 0.2, _kEdgeSize * 0.5); const Offset mid = Offset(_kEdgeSize * 0.5, _kEdgeSize * 0.5); const Offset end = Offset(_kEdgeSize * 0.8, _kEdgeSize * 0.5); final Offset drawStart = Offset.lerp(start, mid, 1.0 - t)!; final Offset drawEnd = Offset.lerp(mid, end, t)!; canvas.drawLine(origin + drawStart, origin + drawEnd, paint); } @override void paint(Canvas canvas, Size size) { final Paint strokePaint = _createStrokePaint(); final Offset origin = size / 2.0 - const Size.square(_kEdgeSize) / 2.0 as Offset; final AnimationStatus status = position.status; final double tNormalized = status == AnimationStatus.forward || status == AnimationStatus.completed ? position.value : 1.0 - position.value; // Four cases: false to null, false to true, null to false, true to false. if (previousValue == false || value == false) { final double t = value == false ? 1.0 - tNormalized : tNormalized; final Rect outer = _outerRectAt(origin, t); final Paint paint = Paint()..color = _colorAt(t); if (t <= 0.5) { final BorderSide border = side ?? BorderSide(color: paint.color); _drawBox(canvas, outer, paint, border, true); // Only paint the border. } else { _drawBox(canvas, outer, paint, side, true); final double tShrink = (t - 0.5) * 2.0; if (previousValue == null || value == null) { _drawDash(canvas, origin, tShrink, strokePaint); } else { _drawCheck(canvas, origin, tShrink, strokePaint); } } } else { // Two cases: null to true, true to null. final Rect outer = _outerRectAt(origin, 1.0); final Paint paint = Paint()..color = _colorAt(1.0); _drawBox(canvas, outer, paint, side, true); if (tNormalized <= 0.5) { final double tShrink = 1.0 - tNormalized * 2.0; if (previousValue ?? false) { _drawCheck(canvas, origin, tShrink, strokePaint); } else { _drawDash(canvas, origin, tShrink, strokePaint); } } else { final double tExpand = (tNormalized - 0.5) * 2.0; if (value ?? false) { _drawCheck(canvas, origin, tExpand, strokePaint); } else { _drawDash(canvas, origin, tExpand, strokePaint); } } } } } ================================================ FILE: lib/src/widgets/chip/chip.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/chip/chip_size_properties.dart'; import 'package:moon_design/src/theme/chip/chip_sizes.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonChipSize { sm, md, } class MoonChip extends StatefulWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether the chip is focusable. final bool isFocusable; /// Whether to ensure a minimum touch target size for the chip. final bool ensureMinimalTouchTargetSize; /// Whether the chip is active (selected). final bool isActive; /// Whether to show a border around the chip. final bool showBorder; /// Whether to show a focus outline effect when the chip is focused. final bool showFocusEffect; /// The border radius of the chip. final BorderRadiusGeometry? borderRadius; /// The text and border color of the chip when [isActive] is true. final Color? activeColor; /// The background color of the chip. final Color? backgroundColor; /// The background color of the chip when [isActive] is true. final Color? activeBackgroundColor; /// The border color of the chip. final Color? borderColor; /// The color of the chip focus effect. final Color? focusEffectColor; /// The text color of the chip. final Color? textColor; /// The custom decoration of the chip. final Decoration? decoration; /// The border width of the chip. final double? borderWidth; /// The opacity value of the disabled chip. final double? disabledOpacityValue; /// The extent of the chip focus effect. final double? focusEffectExtent; /// The gap between the [leading], [label] and [trailing] widgets of the chip. final double? gap; /// The height of the chip. final double? height; /// The width of the chip. final double? width; /// The minimum size of the chip touch target. final double minTouchTargetSize; /// The duration of the chip active state effect. final Duration? activeEffectDuration; /// The duration of the chip focus effect. final Duration? focusEffectDuration; /// The curve of the chip active state effect. final Curve? activeEffectCurve; /// The curve of the chip focus effect. final Curve? focusEffectCurve; /// The padding of the chip. final EdgeInsetsGeometry? padding; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The size of the chip. final MoonChipSize? chipSize; /// The semantic label for the chip. final String? semanticLabel; /// The callback that is called when the chip is tapped or pressed. final VoidCallback? onTap; /// The callback that is called when the chip is long-pressed. final VoidCallback? onLongPress; /// The widget to display before the [label] widget of the chip. final Widget? leading; /// The primary content of the chip widget. final Widget? label; /// The widget to display after the [label] widget of the chip. final Widget? trailing; /// Creates a Moon Design chip. /// /// See also: /// /// * [MoonChip.text], Moon Design text chip. const MoonChip({ super.key, this.autofocus = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, this.isActive = false, this.showBorder = false, this.showFocusEffect = true, this.borderRadius, this.activeColor, this.backgroundColor, this.activeBackgroundColor, this.borderColor, this.focusEffectColor, this.textColor, this.decoration, this.borderWidth, this.disabledOpacityValue, this.focusEffectExtent, this.gap, this.height, this.width, this.minTouchTargetSize = 40, this.activeEffectDuration, this.focusEffectDuration, this.activeEffectCurve, this.focusEffectCurve, this.padding, this.focusNode, this.chipSize, this.semanticLabel, this.onTap, this.onLongPress, this.label, this.leading, this.trailing, }); /// Creates a Moon Design text chip. const MoonChip.text({ super.key, this.autofocus = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, this.isActive = false, this.showBorder = false, this.showFocusEffect = true, this.borderRadius, this.activeColor, this.activeBackgroundColor, this.borderColor, this.focusEffectColor, this.textColor, this.borderWidth, this.disabledOpacityValue, this.focusEffectExtent, this.gap, this.height, this.width, this.minTouchTargetSize = 40, this.focusEffectDuration, this.activeEffectDuration, this.focusEffectCurve, this.activeEffectCurve, this.padding, this.focusNode, this.chipSize, this.decoration, this.semanticLabel, this.onTap, this.onLongPress, this.label, this.leading, this.trailing, }) : backgroundColor = Colors.transparent; @override State createState() => _MoonChipState(); } class _MoonChipState extends State with SingleTickerProviderStateMixin { final ColorTweenWithPremultipliedAlpha _backgroundColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _borderColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _textColorTween = ColorTweenWithPremultipliedAlpha(); Animation? _backgroundColor; Animation? _borderColor; Animation? _textColor; AnimationController? _animationController; void _handleActiveEffect(bool shouldAnimate) { shouldAnimate ? _animationController?.forward() : _animationController?.reverse(); } MoonChipSizeProperties _getMoonChipSize( BuildContext context, MoonChipSize? moonChipSize, ) { switch (moonChipSize) { case MoonChipSize.sm: return context.moonTheme?.chipTheme.sizes.sm ?? MoonChipSizes(tokens: MoonTokens.light).sm; case MoonChipSize.md: return context.moonTheme?.chipTheme.sizes.md ?? MoonChipSizes(tokens: MoonTokens.light).md; default: return context.moonTheme?.chipTheme.sizes.md ?? MoonChipSizes(tokens: MoonTokens.light).md; } } @override void dispose() { _animationController?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final MoonChipSizeProperties effectiveMoonChipSize = _getMoonChipSize(context, widget.chipSize); final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? effectiveMoonChipSize.borderRadius; final double effectiveBorderWidth = widget.borderWidth ?? context.moonBorders?.defaultBorderWidth ?? MoonBorders.borders.defaultBorderWidth; final double effectiveHeight = widget.height ?? effectiveMoonChipSize.height; final double effectiveGap = widget.gap ?? effectiveMoonChipSize.gap; final Color effectiveActiveColor = widget.activeColor ?? context.moonTheme?.chipTheme.colors.activeColor ?? MoonColors.light.piccolo; final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.chipTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveActiveBackgroundColor = widget.activeBackgroundColor ?? context.moonTheme?.chipTheme.colors.activeBackgroundColor ?? MoonColors.light.jiren; final Color effectiveTextColor = widget.textColor ?? context.moonTheme?.chipTheme.colors.textColor ?? MoonColors.light.textPrimary; final Duration effectiveActiveEffectDuration = widget.activeEffectDuration ?? context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .hoverDuration; final Curve effectiveActiveEffectCurve = widget.activeEffectCurve ?? context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .hoverCurve; final EdgeInsetsGeometry effectivePadding = widget.padding ?? effectiveMoonChipSize.padding; final EdgeInsets resolvedDirectionalPadding = effectivePadding.resolve(Directionality.of(context)); final EdgeInsetsGeometry correctedPadding = widget.padding == null ? EdgeInsetsDirectional.fromSTEB( widget.leading == null && widget.label != null ? resolvedDirectionalPadding.left : 0, resolvedDirectionalPadding.top, widget.trailing == null && widget.label != null ? resolvedDirectionalPadding.right : 0, resolvedDirectionalPadding.bottom, ) : resolvedDirectionalPadding; _animationController ??= AnimationController( duration: effectiveActiveEffectDuration, vsync: this, ); _backgroundColor ??= _animationController!.drive( _backgroundColorTween .chain(CurveTween(curve: effectiveActiveEffectCurve)), ); _borderColor ??= _animationController!.drive( _borderColorTween.chain(CurveTween(curve: effectiveActiveEffectCurve)), ); _textColor ??= _animationController!.drive( _textColorTween.chain(CurveTween(curve: effectiveActiveEffectCurve)), ); _backgroundColorTween ..begin = effectiveBackgroundColor ..end = effectiveActiveBackgroundColor; _borderColorTween ..begin = Colors.transparent ..end = widget.borderColor ?? effectiveActiveColor; _textColorTween ..begin = effectiveTextColor ..end = effectiveActiveColor; return MoonBaseControl( autofocus: widget.autofocus, isFocusable: widget.isFocusable, ensureMinimalTouchTargetSize: widget.ensureMinimalTouchTargetSize, showFocusEffect: widget.showFocusEffect, borderRadius: effectiveBorderRadius, backgroundColor: widget.backgroundColor, focusEffectColor: widget.focusEffectColor, disabledOpacityValue: widget.disabledOpacityValue, minTouchTargetSize: widget.minTouchTargetSize, focusEffectExtent: widget.focusEffectExtent, focusEffectDuration: widget.focusEffectDuration, focusEffectCurve: widget.focusEffectCurve, focusNode: widget.focusNode, semanticLabel: widget.semanticLabel, onTap: widget.onTap ?? () {}, onLongPress: widget.onLongPress, builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { final bool canAnimate = widget.isActive || isHovered || isFocused; _handleActiveEffect(canAnimate); return AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return IconTheme( data: IconThemeData( color: _textColor!.value, size: effectiveMoonChipSize.iconSizeValue, ), child: DefaultTextStyle( style: effectiveMoonChipSize.textStyle .copyWith(color: _textColor!.value), child: Container( width: widget.width, height: effectiveHeight, padding: correctedPadding, constraints: BoxConstraints(minWidth: effectiveHeight), decoration: widget.decoration ?? ShapeDecoration( color: _backgroundColor!.value, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius .squircleBorderRadius(context), side: BorderSide( color: widget.showBorder ? _borderColor!.value! : Colors.transparent, width: widget.showBorder ? effectiveBorderWidth : 0, style: widget.showBorder ? BorderStyle.solid : BorderStyle.none, ), ), ), child: child, ), ), ); }, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ if (widget.leading != null) Padding( padding: EdgeInsets.symmetric(horizontal: effectiveGap), child: widget.leading, ), if (widget.label != null) widget.label!, if (widget.trailing != null) Padding( padding: EdgeInsets.symmetric(horizontal: effectiveGap), child: widget.trailing, ), ], ), ); }, ); } } ================================================ FILE: lib/src/widgets/common/animated_icon_theme.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; class AnimatedIconTheme extends ImplicitlyAnimatedWidget { /// The target color for the icon. /// /// The color must not be null. /// /// When this property is set, the icon color will be animated over the /// specified [duration] time. final Color? color; /// The target size for the icon. /// /// The size must not be null. /// /// When this property is set, the icon size will be animated over the /// specified [duration] time. final double? size; /// The widget below this animated icon theme widget in the tree. /// /// {@macro flutter.widgets.ProxyWidget.child} final Widget child; /// Creates a widget that animates the icon properties implicitly. /// /// The [child] and [duration] arguments must not be null. const AnimatedIconTheme({ super.key, super.onEnd, super.curve, required super.duration, this.color, this.size, required this.child, }); @override AnimatedWidgetBaseState createState() => _AnimatedIconThemeState(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties.add( DiagnosticsProperty('iconColor', color, defaultValue: null), ); properties.add( DiagnosticsProperty('iconSize', size, defaultValue: null), ); } } class _AnimatedIconThemeState extends AnimatedWidgetBaseState { ColorTweenWithPremultipliedAlpha? _color; SizeTween? _size; @override void forEachTween(TweenVisitor visitor) { if (widget.color != null) { _color = visitor( _color, widget.color, (dynamic value) => ColorTweenWithPremultipliedAlpha(begin: value as Color), ) as ColorTweenWithPremultipliedAlpha?; } if (widget.size != null) { _size = visitor( _size, Size(widget.size!, widget.size!), (dynamic value) => SizeTween(begin: value as Size), ) as SizeTween?; } } @override Widget build(BuildContext context) { return IconTheme( data: IconThemeData( color: _color?.evaluate(animation), size: _size?.evaluate(animation)?.height, ), child: widget.child, ); } } ================================================ FILE: lib/src/widgets/common/base_control.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_design/src/widgets/common/effects/pulse_effect.dart'; typedef MoonBaseControlBuilder = Widget Function( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ); class MoonBaseControl extends StatefulWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether to absorb the drag events of the base control. final bool absorbDragEvents; /// Whether the base control is focusable. final bool isFocusable; /// Whether to ensure a minimum touch target size for the base control. final bool ensureMinimalTouchTargetSize; /// Whether the semantic type of the base control is button. final bool semanticTypeIsButton; /// Whether to propagate gestures to the child of the base control. final bool propagateGesturesToChild; /// Whether the base control shows a focus effect. final bool showFocusEffect; /// Whether the base control shows a pulse effect. final bool showPulseEffect; /// Whether the base control shows a jiggle during the pulse effect. final bool showPulseEffectJiggle; /// Whether the base control shows a scale effect. final bool showScaleEffect; /// The border radius of the base control. final BorderRadiusGeometry? borderRadius; /// The background color of the base control. final Color? backgroundColor; /// The color of the base control focus effect. final Color? focusEffectColor; /// The color of the base control pulse effect. final Color? pulseEffectColor; /// The opacity value of the base control when disabled. final double? disabledOpacityValue; /// The minimum size of the base control touch target. final double minTouchTargetSize; /// The extent of the base control focus effect. final double? focusEffectExtent; /// The extent of the base control pulse effect. final double? pulseEffectExtent; /// The degree of scaling applied during the scale effect. final double? scaleEffectScalar; /// The duration of the focus effect. final Duration? focusEffectDuration; /// The duration of the pulse effect. final Duration? pulseEffectDuration; /// The duration of the scale effect. final Duration? scaleEffectDuration; /// The curve of the focus effect. final Curve? focusEffectCurve; /// The curve of the pulse effect. final Curve? pulseEffectCurve; /// The curve of the scale effect. final Curve? scaleEffectCurve; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// A builder to build a custom child for the base control. /// Cannot be used in conjunction with the [child] property, one of them must /// be null. final MoonBaseControlBuilder? builder; /// The mouse cursor of the base control. final MouseCursor cursor; /// The semantic label for the base control. final String? semanticLabel; /// The callback that is called when the base control focus state changes. final void Function(bool)? onFocus; /// The callback that is called when the base control hover state changes. final void Function(bool)? onHover; /// The callback that is called when the base control is tapped or pressed. final VoidCallback? onTap; /// The callback that is called when the base control is long-pressed. final VoidCallback? onLongPress; /// The child of the base control. /// Cannot be used in conjunction with the [builder] property, one of them /// must be null. final Widget? child; /// Creates a Moon Design base control. const MoonBaseControl({ super.key, this.autofocus = false, this.absorbDragEvents = false, this.isFocusable = true, this.ensureMinimalTouchTargetSize = false, this.semanticTypeIsButton = false, this.propagateGesturesToChild = false, this.showFocusEffect = true, this.showPulseEffect = false, this.showPulseEffectJiggle = true, this.showScaleEffect = false, this.borderRadius = BorderRadius.zero, this.backgroundColor, this.focusEffectColor, this.pulseEffectColor, this.disabledOpacityValue, this.minTouchTargetSize = 40.0, this.focusEffectExtent, this.pulseEffectExtent, this.scaleEffectScalar, this.focusEffectDuration, this.pulseEffectDuration, this.scaleEffectDuration, this.focusEffectCurve, this.pulseEffectCurve, this.scaleEffectCurve, this.focusNode, this.builder, this.cursor = SystemMouseCursors.click, this.semanticLabel, this.onFocus, this.onHover, this.onTap, this.onLongPress, this.child, }) : assert( (child == null) != (builder == null), "Only either a child or a builder can be provided, not both.", ); @override State createState() => _MoonBaseControlState(); } class _MoonBaseControlState extends State { late Map> _actions; FocusNode? _focusNode; bool _isFocused = false; bool _isHovered = false; bool _isPressed = false; bool _isLongPressed = false; bool get _isEnabled => widget.onTap != null || widget.onLongPress != null; MouseCursor get _cursor => _isEnabled ? widget.cursor : SystemMouseCursors.basic; FocusNode get _effectiveFocusNode => widget.focusNode ?? (_focusNode ??= FocusNode(skipTraversal: !widget.isFocusable)); bool get _hasPrimaryFocus => _effectiveFocusNode.hasPrimaryFocus; bool get _canAnimateFocus => widget.showFocusEffect && _isEnabled && _isFocused && _hasPrimaryFocus; bool get _canAnimatePulse => widget.showPulseEffect && _isEnabled; bool get _canAnimateScale => widget.showScaleEffect && _isEnabled && (_isPressed || _isLongPressed); void _handleHover(bool hover) { if (hover != _isHovered) { setState(() => _isHovered = hover); widget.onHover?.call(hover); } } void _handleFocus(bool focus) { if (focus != _isFocused && _hasPrimaryFocus) { setState(() => _isFocused = focus); widget.onFocus?.call(focus); } } void _handleFocusChange(bool hasFocus) { setState(() { _isFocused = hasFocus && _hasPrimaryFocus; if (!hasFocus) { _isPressed = false; } }); } void _handleTap() { if (_isEnabled) { setState(() => _isPressed = true); widget.onTap?.call(); setState(() => _isPressed = false); } } void _handleTapDown(_) { if (!_isPressed) { setState(() => _isPressed = true); } } void _handleTapUp(_) { if (_isPressed) { setState(() => _isPressed = false); } } void _handleTapCancel() { if (_isPressed) { setState(() => _isPressed = false); } } void _handleLongPress() { if (widget.onLongPress == null) return; if (_isEnabled) { widget.onLongPress?.call(); } } void _handleLongPressStart(_) { if (!_isLongPressed) { setState(() => _isLongPressed = true); } if (!_isPressed) { setState(() => _isPressed = true); } } void _handleLongPressUp() { if (widget.onLongPress == null) { widget.onTap?.call(); } if (_isLongPressed) { setState(() => _isLongPressed = false); } if (_isPressed) { setState(() => _isPressed = false); } } void _handleHorizontalDragStart(DragStartDetails dragStartDetails) => _handleTapDown(null); void _handleHorizontalDragEnd(DragEndDetails dragEndDetails) => _handleTapUp(null); void _handleVerticalDragStart(DragStartDetails dragStartDetails) => _handleTapDown(null); void _handleVerticalDragEnd(DragEndDetails dragEndDetails) => _handleTapUp(null); Color _getFocusColor({required Color focusColor}) { if (widget.backgroundColor != null) { return context.isDarkMode ? widget.backgroundColor!.withOpacity(0.8) : widget.backgroundColor!.withOpacity(0.2); } else { return focusColor; } } @override void initState() { super.initState(); _actions = >{ ActivateIntent: CallbackAction(onInvoke: (_) => _handleTap()), }; _focusNode = FocusNode( canRequestFocus: _isEnabled, skipTraversal: !widget.isFocusable, ); _effectiveFocusNode.canRequestFocus = _isEnabled; if (widget.autofocus) { _effectiveFocusNode.requestFocus(); } } @override void didUpdateWidget(MoonBaseControl oldWidget) { super.didUpdateWidget(oldWidget); if (widget.onTap != oldWidget.onTap || widget.onLongPress != oldWidget.onLongPress) { if (!_isEnabled) { _isHovered = _isPressed = false; } } _effectiveFocusNode.canRequestFocus = _isEnabled; } @override void dispose() { _focusNode!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final double effectiveDisabledOpacityValue = widget.disabledOpacityValue ?? context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; // Focus effect properties. final Color effectiveFocusEffectColor = widget.focusEffectColor ?? context.moonEffects?.controlFocusEffect.effectColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectColor; final Color focusColor = _getFocusColor(focusColor: effectiveFocusEffectColor); final double effectiveFocusEffectExtent = widget.focusEffectExtent ?? context.moonEffects?.controlFocusEffect.effectExtent ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectExtent; final Duration effectiveFocusEffectDuration = widget.focusEffectDuration ?? context.moonEffects?.controlFocusEffect.effectDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectDuration; final Curve effectiveFocusEffectCurve = widget.focusEffectCurve ?? context.moonEffects?.controlFocusEffect.effectCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectCurve; // Pulse effect properties. final Color effectivePulseEffectColor = widget.pulseEffectColor ?? context.moonEffects?.controlPulseEffect.effectColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlPulseEffect .effectColor!; final double effectivePulseEffectExtent = widget.pulseEffectExtent ?? context.moonEffects?.controlPulseEffect.effectExtent ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlPulseEffect .effectExtent!; final Duration effectivePulseEffectDuration = widget.pulseEffectDuration ?? context.moonEffects?.controlPulseEffect.effectDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlPulseEffect .effectDuration; final Curve effectivePulseEffectCurve = widget.pulseEffectCurve ?? context.moonEffects?.controlPulseEffect.effectCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlPulseEffect .effectCurve; // Scale effect properties. final double effectiveScaleEffectScalar = widget.scaleEffectScalar ?? context.moonEffects?.controlScaleEffect.effectScalar ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlScaleEffect .effectScalar!; final Duration effectiveScaleEffectDuration = widget.scaleEffectDuration ?? context.moonEffects?.controlScaleEffect.effectDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlScaleEffect .effectDuration; final Curve effectiveScaleEffectCurve = widget.scaleEffectCurve ?? context.moonEffects?.controlScaleEffect.effectCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlScaleEffect .effectCurve; final Widget child = widget.child ?? widget.builder!( context, _isEnabled, _isHovered, _isFocused, _isPressed, ); return MergeSemantics( child: Semantics( label: widget.semanticLabel, button: widget.semanticTypeIsButton, enabled: _isEnabled, focusable: _isEnabled, focused: _isFocused, child: AbsorbPointer( absorbing: !_isEnabled, child: FocusableActionDetector( enabled: _isEnabled, actions: _actions, mouseCursor: _cursor, focusNode: _effectiveFocusNode, autofocus: _isEnabled && widget.isFocusable && widget.autofocus, descendantsAreFocusable: _isEnabled, descendantsAreTraversable: _isEnabled, onFocusChange: _handleFocusChange, onShowFocusHighlight: _handleFocus, onShowHoverHighlight: _handleHover, child: GestureDetector( excludeFromSemantics: true, onTap: _handleTap, onTapDown: _handleTapDown, onTapUp: _handleTapUp, onLongPress: _handleLongPress, onLongPressStart: _handleLongPressStart, onLongPressUp: _handleLongPressUp, onTapCancel: _handleTapCancel, onHorizontalDragStart: widget.absorbDragEvents ? _handleHorizontalDragStart : null, onHorizontalDragEnd: widget.absorbDragEvents ? _handleHorizontalDragEnd : null, onVerticalDragStart: widget.absorbDragEvents ? _handleVerticalDragStart : null, onVerticalDragEnd: widget.absorbDragEvents ? _handleVerticalDragEnd : null, child: TouchTargetPadding( minSize: widget.ensureMinimalTouchTargetSize ? Size(widget.minTouchTargetSize, widget.minTouchTargetSize) : Size.zero, child: AbsorbPointer( absorbing: !widget.propagateGesturesToChild, child: RepaintBoundary( child: AnimatedScale( scale: _canAnimateScale ? effectiveScaleEffectScalar : 1, duration: effectiveScaleEffectDuration, curve: effectiveScaleEffectCurve, child: MoonPulseEffect( show: _canAnimatePulse, showJiggle: widget.showPulseEffectJiggle, childBorderRadius: widget.borderRadius, effectColor: effectivePulseEffectColor, effectExtent: effectivePulseEffectExtent, effectCurve: effectivePulseEffectCurve, effectDuration: effectivePulseEffectDuration, child: AnimatedOpacity( opacity: _isEnabled ? 1 : effectiveDisabledOpacityValue, duration: context .moonTransitions?.defaultTransitionDuration ?? MoonTransitions .transitions.defaultTransitionDuration, curve: context.moonTransitions?.defaultTransitionCurve ?? MoonTransitions .transitions.defaultTransitionCurve, child: MoonFocusEffect( show: _canAnimateFocus, effectColor: focusColor, effectExtent: effectiveFocusEffectExtent, effectCurve: effectiveFocusEffectCurve, effectDuration: effectiveFocusEffectDuration, childBorderRadius: widget.borderRadius, child: child, ), ), ), ), ), ), ), ), ), ), ), ); } } ================================================ FILE: lib/src/widgets/common/base_segmented_tab_bar.dart ================================================ import 'package:flutter/material.dart'; class BaseSegmentedTabBar extends StatefulWidget { final bool isExpanded; final double gap; final TabController? tabController; final ValueChanged valueChanged; final List children; /// Creates a Moon Design base segmented tab bar. const BaseSegmentedTabBar({ super.key, required this.isExpanded, required this.gap, this.tabController, required this.valueChanged, required this.children, }); @override _BaseSegmentedTabBarState createState() => _BaseSegmentedTabBarState(); } class _BaseSegmentedTabBarState extends State with TickerProviderStateMixin { late TabController? _controller; @override void didChangeDependencies() { super.didChangeDependencies(); _controller = widget.tabController ?? DefaultTabController.maybeOf(context); } void _handleTap(int index) { assert(index >= 0 && index < widget.children.length); _controller?.index = index; widget.valueChanged.call(index); } @override Widget build(BuildContext context) { return Row( mainAxisSize: MainAxisSize.min, children: List.generate( widget.children.length * 2 - 1, (int index) { final int derivedIndex = index ~/ 2; final Widget child = Listener( onPointerDown: (_) => _handleTap(derivedIndex), child: widget.children[derivedIndex], ); return index.isEven ? widget.isExpanded ? Expanded(child: child) : child : SizedBox(width: widget.gap); }, ), ); } } ================================================ FILE: lib/src/widgets/common/border_container.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; class BorderContainer extends StatefulWidget { final bool expands; final Clip clipBehavior; final Color? backgroundColor; final Decoration? decoration; final double? height; final double? width; final ShapeBorder border; final Duration duration; final Curve curve; final Widget child; /// Creates a utility widget for animating the border of a container. /// Primarily utilized in [MoonTextInput] and [MoonTextInputGroup]. const BorderContainer({ super.key, this.expands = false, this.clipBehavior = Clip.none, this.backgroundColor, this.decoration, this.height, this.width, required this.border, required this.duration, required this.curve, required this.child, }); @override _BorderContainerState createState() => _BorderContainerState(); } class _BorderContainerState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _borderAnimation; late ShapeBorderTween _border; @override void initState() { super.initState(); _controller = AnimationController( duration: widget.duration, vsync: this, ); _borderAnimation = CurvedAnimation( parent: _controller, curve: widget.curve, reverseCurve: widget.curve.flipped, ); _border = ShapeBorderTween( begin: widget.border, end: widget.border, ); } @override void dispose() { _controller.dispose(); super.dispose(); } @override void didUpdateWidget(BorderContainer oldWidget) { super.didUpdateWidget(oldWidget); if (widget.border != oldWidget.border) { _border = ShapeBorderTween( begin: oldWidget.border, end: widget.border, ); _controller ..value = 0.0 ..forward(); } } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _borderAnimation, builder: (context, child) { return Container( constraints: BoxConstraints( minHeight: widget.height ?? 0, minWidth: widget.width ?? 0, maxHeight: widget.expands ? double.infinity : widget.height ?? double.infinity, maxWidth: widget.expands ? double.infinity : widget.width ?? double.infinity, ), clipBehavior: widget.clipBehavior, decoration: widget.decoration ?? ShapeDecorationWithPremultipliedAlpha( color: widget.backgroundColor, shape: _border.evaluate(_borderAnimation)!, ), child: child, ); }, child: widget.child, ); } } ================================================ FILE: lib/src/widgets/common/default_animated_text_style.dart ================================================ import 'package:flutter/material.dart'; class MoonAnimatedDefaultTextStyle extends StatefulWidget { final TextStyle textStyle; final Duration duration; final Curve curve; final Widget child; /// Creates a utility widget for animating text style. const MoonAnimatedDefaultTextStyle({ super.key, required this.textStyle, required this.duration, required this.curve, required this.child, }); @override _MoonAnimatedDefaultTextStyleState createState() => _MoonAnimatedDefaultTextStyleState(); } class _MoonAnimatedDefaultTextStyleState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _textStyleAnimation; late TextStyleTween _textStyle; @override void initState() { super.initState(); _controller = AnimationController( duration: widget.duration, vsync: this, ); _textStyleAnimation = CurvedAnimation( parent: _controller, curve: widget.curve, ); _textStyle = TextStyleTween( begin: widget.textStyle, end: widget.textStyle, ); } @override void dispose() { _controller.dispose(); super.dispose(); } @override void didUpdateWidget(MoonAnimatedDefaultTextStyle oldWidget) { super.didUpdateWidget(oldWidget); if (widget.textStyle != oldWidget.textStyle) { _textStyle = TextStyleTween( begin: oldWidget.textStyle, end: widget.textStyle, ); _controller ..value = 0.0 ..forward(); } } @override Widget build(BuildContext context) { return AnimatedBuilder( animation: _textStyleAnimation, builder: (context, child) { return DefaultTextStyle( style: _textStyle.evaluate(_textStyleAnimation), child: child!, ); }, child: widget.child, ); } } ================================================ FILE: lib/src/widgets/common/effects/focus_effect.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/common/effects/painters/focus_effect_painter.dart'; class MoonFocusEffect extends StatefulWidget { final bool show; final BorderRadiusGeometry? childBorderRadius; final Color effectColor; final double effectExtent; final Duration effectDuration; final Curve effectCurve; final Widget child; /// Creates a Moon Design focus effect. const MoonFocusEffect({ super.key, required this.show, this.childBorderRadius, required this.effectColor, required this.effectExtent, required this.effectDuration, required this.effectCurve, required this.child, }); @override State createState() => _MoonFocusEffectState(); } class _MoonFocusEffectState extends State with SingleTickerProviderStateMixin { late final AnimationController _animationController = AnimationController( vsync: this, duration: widget.effectDuration, debugLabel: "MoonFocusEffect animation controller.", ); late final CurvedAnimation _focusAnimation = CurvedAnimation( parent: _animationController, curve: widget.effectCurve, ); @override void didUpdateWidget(MoonFocusEffect oldWidget) { super.didUpdateWidget(oldWidget); widget.show ? _animationController.forward() : _animationController.reverse(); } @override void dispose() { _animationController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final resolvedBorderRadius = widget.childBorderRadius?.resolve(Directionality.of(context)) ?? BorderRadius.zero; return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget? child) { return CustomPaint( willChange: true, painter: FocusEffectPainter( color: widget.effectColor, effectExtent: widget.effectExtent, borderRadius: resolvedBorderRadius, animation: _focusAnimation, ), child: child, ); }, child: widget.child, ); } } ================================================ FILE: lib/src/widgets/common/effects/painters/focus_effect_painter.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; class FocusEffectPainter extends CustomPainter { final Animation animation; final bool isFilled; final BorderRadius borderRadius; final Color color; final double effectExtent; FocusEffectPainter({ required this.animation, required this.borderRadius, this.isFilled = false, required this.color, required this.effectExtent, }) : super(repaint: animation); @override void paint(Canvas canvas, Size size) { if (!animation.isDismissed) { final Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height); final Color transformedColor = colorPremulLerp(null, color, animation.value)!; final double newWidth = rect.width + effectExtent; final double newHeight = rect.height + effectExtent; final double widthIncrease = newWidth / rect.width; final double heightIncrease = newHeight / rect.height; final double widthOffset = (widthIncrease - 1) / 2; final double heightOffset = (heightIncrease - 1) / 2; final double resolvedExtent = borderRadius != BorderRadius.zero ? (effectExtent / 2) : 0; final Paint paint = isFilled ? (Paint() ..color = transformedColor ..style = PaintingStyle.fill) : (Paint() ..color = transformedColor ..style = PaintingStyle.stroke ..strokeWidth = effectExtent + 1); // +1 for squircle hairline border correction. canvas.drawRRect( RRect.fromRectAndCorners( Rect.fromLTWH( -rect.width * widthOffset, -rect.height * heightOffset, rect.width * widthIncrease, rect.height * heightIncrease, ), topLeft: MoonSquircleRadius( cornerRadius: borderRadius.topLeft.x + resolvedExtent, ), topRight: MoonSquircleRadius( cornerRadius: borderRadius.topRight.x + resolvedExtent, ), bottomLeft: MoonSquircleRadius( cornerRadius: borderRadius.bottomLeft.x + resolvedExtent, ), bottomRight: MoonSquircleRadius( cornerRadius: borderRadius.bottomRight.x + resolvedExtent, ), ), paint, ); } } @override bool shouldRepaint(FocusEffectPainter oldDelegate) { return animation != oldDelegate.animation || color != oldDelegate.color; } } ================================================ FILE: lib/src/widgets/common/effects/painters/pulse_effect_painter.dart ================================================ import 'dart:ui'; import 'package:flutter/animation.dart'; import 'package:flutter/rendering.dart'; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; class PulseEffectPainter extends CustomPainter { static const double _animationRangeStartValue = 0.286; final Color color; final Animation animation; final double effectExtent; final BorderRadius borderRadius; PulseEffectPainter({ required this.color, required this.animation, required this.effectExtent, required this.borderRadius, }) : super(repaint: animation); double animationRange({ required double begin, required double end, required double animationValue, }) { return clampDouble((animationValue - begin) / (end - begin), 0.0, 1.0); } @override void paint(Canvas canvas, Size size) { if (!animation.isDismissed) { final double rangeValue = animationRange( begin: _animationRangeStartValue, end: 1.0, animationValue: animation.value, ); final Rect rect = Rect.fromLTRB(0.0, 0.0, size.width, size.height); final double opacity = (rangeValue == 0.0 ? 0.0 : 1.0 - rangeValue).clamp(0.0, 1.0); final Color transformedColor = color.withOpacity(opacity); final double newWidth = rect.width + rangeValue * effectExtent; final double newHeight = rect.height + rangeValue * effectExtent; final double widthIncrease = newWidth / rect.width; final double heightIncrease = newHeight / rect.height; final double widthOffset = (widthIncrease - 1) / 2; final double heightOffset = (heightIncrease - 1) / 2; final double resolvedExtent = borderRadius != BorderRadius.zero ? (effectExtent / 2) : 0; final double topLeftLerp = lerpDouble( borderRadius.topLeft.x, borderRadius.topLeft.x + resolvedExtent, rangeValue, )!; final double topRightLerp = lerpDouble( borderRadius.topRight.x, borderRadius.topRight.x + resolvedExtent, rangeValue, )!; final double bottomLeftLerp = lerpDouble( borderRadius.bottomLeft.x, borderRadius.bottomLeft.x + resolvedExtent, rangeValue, )!; final double bottomRightLerp = lerpDouble( borderRadius.bottomRight.x, borderRadius.bottomRight.x + resolvedExtent, rangeValue, )!; final Paint paint = Paint() ..color = transformedColor ..style = PaintingStyle.stroke ..strokeWidth = rangeValue * effectExtent + 1; // +1 for squircle hairline border correction. canvas.drawRRect( RRect.fromRectAndCorners( Rect.fromLTWH( -rect.width * widthOffset, -rect.height * heightOffset, rect.width * widthIncrease, rect.height * heightIncrease, ), topLeft: MoonSquircleRadius(cornerRadius: topLeftLerp), topRight: MoonSquircleRadius(cornerRadius: topRightLerp), bottomLeft: MoonSquircleRadius(cornerRadius: bottomLeftLerp), bottomRight: MoonSquircleRadius(cornerRadius: bottomRightLerp), ), paint, ); } } @override bool shouldRepaint(PulseEffectPainter oldDelegate) => false; } ================================================ FILE: lib/src/widgets/common/effects/pulse_effect.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/common/effects/painters/pulse_effect_painter.dart'; class MoonPulseEffect extends StatefulWidget { final bool show; final bool showJiggle; final BorderRadiusGeometry? childBorderRadius; final Color effectColor; final double effectExtent; final Duration effectDuration; final Curve effectCurve; final Widget child; /// Creates a Moon Design pulse effect. const MoonPulseEffect({ super.key, required this.show, required this.showJiggle, this.childBorderRadius, required this.effectColor, required this.effectExtent, required this.effectDuration, required this.effectCurve, required this.child, }); @override State createState() => _MoonPulseEffectState(); } class _MoonPulseEffectState extends State with SingleTickerProviderStateMixin { static const double _jiggleTimePercentage = 28.6; static const double _jiggleRestTimePercentage = 100 - _jiggleTimePercentage * 2; late final AnimationController _animationController = AnimationController( animationBehavior: AnimationBehavior.preserve, vsync: this, duration: widget.effectDuration, debugLabel: "MoonPulseEffect animation controller.", ); late final CurvedAnimation _pulseAnimation = CurvedAnimation( parent: _animationController, curve: widget.effectCurve, ); late final Animation _jiggleAnimation = TweenSequence( [ TweenSequenceItem( tween: Tween(begin: 0.0, end: -1.0) .chain(CurveTween(curve: widget.effectCurve)), weight: _jiggleRestTimePercentage / 2, ), TweenSequenceItem( tween: Tween(begin: -1.0, end: 0.0) .chain(CurveTween(curve: widget.effectCurve)), weight: _jiggleRestTimePercentage / 2, ), TweenSequenceItem( tween: ConstantTween(0.0), weight: _jiggleRestTimePercentage, ), TweenSequenceItem( tween: Tween(begin: 0.0, end: -1.0) .chain(CurveTween(curve: widget.effectCurve)), weight: _jiggleRestTimePercentage / 2, ), TweenSequenceItem( tween: Tween(begin: -1.0, end: 0.0) .chain(CurveTween(curve: widget.effectCurve)), weight: _jiggleRestTimePercentage / 2, ), ], ).animate(_animationController); @override void didUpdateWidget(covariant MoonPulseEffect oldWidget) { super.didUpdateWidget(oldWidget); if (widget.show != oldWidget.show) { if (widget.show) { _animationController.repeat(); } else { _animationController .forward() .then((_) => _animationController.reset()); } } } @override void dispose() { _animationController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { // TODO: Revisit this at a later date, when Impeller is more stable, // to determine if we can use CurvedAnimation with Interval. Currently, // there is a bug in Interval where the internal method curve.transform(t) // causes uneven and buggy animations. final BorderRadius resolvedBorderRadius = widget.childBorderRadius?.resolve(Directionality.of(context)) ?? BorderRadius.zero; return AnimatedBuilder( animation: _animationController, builder: (BuildContext context, Widget? child) { return Transform.translate( offset: Offset(widget.showJiggle ? _jiggleAnimation.value : 0.0, 0.0), child: CustomPaint( isComplex: true, willChange: true, painter: PulseEffectPainter( color: widget.effectColor, effectExtent: widget.effectExtent, borderRadius: resolvedBorderRadius, animation: _pulseAnimation, ), child: child, ), ); }, child: widget.child, ); } } ================================================ FILE: lib/src/widgets/common/error_message_widgets.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_icons/moon_icons.dart'; class MoonErrorMessages extends StatelessWidget { final List errors; /// Creates a default error message widget, utilized in [MoonTextInputGroup]. const MoonErrorMessages({required this.errors}); List get _nonEmptyErrors => errors.where((String error) => error.isNotEmpty).toList(); @override Widget build(BuildContext context) { return Column( mainAxisSize: MainAxisSize.min, children: List.generate(_nonEmptyErrors.length * 2 - 1, (int index) { final int derivedIndex = index ~/ 2; return index.isEven ? MoonErrorMessage(errorText: _nonEmptyErrors[derivedIndex]) : SizedBox(height: context.moonSizes?.x5s ?? 4); }), ); } } class MoonErrorMessage extends StatefulWidget { final String errorText; final Duration duration; final Curve curve; /// Creates a default error message widget, utilized in [MoonTextInput] /// and [MoonTextArea]. const MoonErrorMessage({ super.key, required this.errorText, this.duration = const Duration(milliseconds: 167), this.curve = Curves.fastOutSlowIn, }); @override State createState() => _MoonErrorMessageState(); } class _MoonErrorMessageState extends State with SingleTickerProviderStateMixin { late AnimationController _controller; late Animation _opacityAnimation; @override void initState() { super.initState(); _controller = AnimationController( duration: widget.duration, vsync: this, ); _opacityAnimation = CurvedAnimation( parent: _controller, curve: widget.curve, reverseCurve: widget.curve.flipped, ); _controller ..value = 0.0 ..forward(); } @override void dispose() { _controller.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return FadeTransition( opacity: _opacityAnimation, child: Row( children: [ Icon( MoonIcons.generic_info_16_light, size: context.moonSizes?.x2s ?? 16, ), SizedBox(width: context.moonSizes?.x5s ?? 4), Text(widget.errorText), ], ), ); } } ================================================ FILE: lib/src/widgets/common/progress_indicators/base_progress.dart ================================================ import 'package:flutter/foundation.dart'; import 'package:flutter/material.dart'; /// The base class for the Moon Design progress indicators. /// /// This class defines the common properties and behavior for Moon Design /// progress indicators. It can not be instantiated directly. /// Use [MoonLinearProgressIndicator] for a linear progress indicator and /// [MoonCircularProgressIndicator] for a circular progress indicator. abstract class MoonBaseProgressIndicator extends StatefulWidget { /// The progress indicator's color as an animated value. final Animation? valueColor; /// The background color of the progress indicator. /// /// Subclasses must override this method to define the visual representation /// of the progress indicator. See the subclass documentation for details. final Color backgroundColor; /// The color of the progress indicator. final Color color; /// The progress value of the progress indicator. /// /// A value of 0.0 indicates no progress, 1.0 indicates complete progress, and /// values in between represent the percentage of progress completed. /// The value will be clamped to be in the range 0.0-1.0. /// /// If `value` is null, this progress indicator is indeterminate, meaning it /// displays a predetermined animation that does not reflect actual progress. final double? value; /// The [SemanticsProperties.label] for the progress indicator. /// /// Determines the text that screen readers will read out to describe the /// purpose of this progress indicator. final String? semanticsLabel; /// The [SemanticsProperties.value] for the progress indicator. /// /// Used in conjunction with the [semanticsLabel] to provide additional /// context for screen readers to understand the progress indicator's current /// state. /// /// Primarily intended for use with determinate progress indicators, which /// defaults to the [ProgressIndicator.value] expressed as a percentage, i.e. /// `0.1` will become '10%'. final String? semanticsValue; /// Creates a Moon Design progress indicator. /// /// The [value] argument determines whether the progress indicator is /// determinate or indeterminate: /// /// * If [value] is null, the progress indicator is indeterminate and will /// display a predetermined animation that does not indicate how much /// progress is being made. /// * If [value] is a non-null number between 0.0 and 1.0, the progress /// indicator is determinate and will display the progress percentage as a /// value between 0% and 100%. /// /// ## Accessibility /// /// The [semanticsLabel] can be used to identify the purpose of this progress /// bar for screen reading software. /// The [semanticsValue] property may be used for determinate progress /// indicators to announce how much progress has been made. const MoonBaseProgressIndicator({ super.key, this.valueColor, required this.backgroundColor, required this.color, this.value, this.semanticsLabel, this.semanticsValue, }); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties.add( PercentProperty( 'value', value, showName: false, ifNull: '', ), ); } Widget buildSemanticsWrapper({ required BuildContext context, required Widget child, }) { String? expandedSemanticsValue = semanticsValue; if (value != null) { expandedSemanticsValue ??= '${(value! * 100).round()}%'; } return Semantics( label: semanticsLabel, value: expandedSemanticsValue, child: child, ); } } ================================================ FILE: lib/src/widgets/common/progress_indicators/circular_progress_indicator.dart ================================================ import 'package:flutter/widgets.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/base_progress.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/painters/circular_progress_indicator_painter.dart'; class MoonCircularProgressIndicator extends MoonBaseProgressIndicator { /// The width of the stroke for the circular progress indicator. final double strokeWidth; /// The shape of the end of the stroke (stroke-cap) for the circular progress /// indicator. final StrokeCap strokeCap; /// Creates a Moon Design circular progress indicator. const MoonCircularProgressIndicator({ super.key, super.value, required super.backgroundColor, required super.color, super.valueColor, super.semanticsLabel, super.semanticsValue, this.strokeWidth = 4.0, this.strokeCap = StrokeCap.round, }); /// The color of the circular track that forms the background for the circular /// progress indicator. @override Color get backgroundColor => super.backgroundColor; @override State createState() => _MoonCircularProgressIndicatorState(); } class _MoonCircularProgressIndicatorState extends State with SingleTickerProviderStateMixin { static const double _kMinMoonCircularProgressIndicatorSize = 36.0; static const int _kIndeterminateCircularDuration = 1333 * 2222; static const int _pathCount = _kIndeterminateCircularDuration ~/ 1333; static const int _rotationCount = _kIndeterminateCircularDuration ~/ 2222; static final Animatable _strokeHeadTween = CurveTween( curve: const Interval(0.0, 0.5, curve: Curves.fastOutSlowIn), ).chain(CurveTween(curve: const SawTooth(_pathCount))); static final Animatable _strokeTailTween = CurveTween( curve: const Interval(0.5, 1.0, curve: Curves.fastOutSlowIn), ).chain(CurveTween(curve: const SawTooth(_pathCount))); static final Animatable _offsetTween = CurveTween(curve: const SawTooth(_pathCount)); static final Animatable _rotationTween = CurveTween(curve: const SawTooth(_rotationCount)); late AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: _kIndeterminateCircularDuration), vsync: this, ); if (widget.value == null) _controller.repeat(); } @override void didUpdateWidget(MoonCircularProgressIndicator oldWidget) { super.didUpdateWidget(oldWidget); if (widget.value == null && !_controller.isAnimating) { _controller.repeat(); } else if (widget.value != null && _controller.isAnimating) { _controller.stop(); } } @override void dispose() { _controller.dispose(); super.dispose(); } Widget _buildStaticProgressIndicator( BuildContext context, double headValue, double tailValue, double offsetValue, double rotationValue, ) { return widget.buildSemanticsWrapper( context: context, child: Container( constraints: const BoxConstraints( minWidth: _kMinMoonCircularProgressIndicatorSize, minHeight: _kMinMoonCircularProgressIndicatorSize, ), child: RepaintBoundary( child: CustomPaint( painter: MoonCircularProgressIndicatorPainter( backgroundColor: widget.backgroundColor, valueColor: widget.color, value: widget.value, // May be null. headValue: headValue, // If 'widget.value' is not null, all remaining arguments are // ignored. tailValue: tailValue, offsetValue: offsetValue, rotationValue: rotationValue, strokeWidth: widget.strokeWidth, strokeCap: widget.strokeCap, ), ), ), ), ); } Widget _buildAnimation() { return AnimatedBuilder( animation: _controller, builder: (BuildContext context, Widget? child) { return _buildStaticProgressIndicator( context, _strokeHeadTween.evaluate(_controller), _strokeTailTween.evaluate(_controller), _offsetTween.evaluate(_controller), _rotationTween.evaluate(_controller), ); }, ); } @override Widget build(BuildContext context) { if (widget.value != null) { _buildStaticProgressIndicator(context, 0.0, 0.0, 0, 0.0); } return _buildAnimation(); } } ================================================ FILE: lib/src/widgets/common/progress_indicators/linear_progress_indicator.dart ================================================ import 'package:flutter/widgets.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/base_progress.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/painters/linear_progress_indicator_painter.dart'; class MoonLinearProgressIndicator extends MoonBaseProgressIndicator { /// The container radius of the linear progress indicator. final BorderRadiusGeometry containerRadius; /// The progress radius of the linear progress indicator. final BorderRadiusGeometry progressRadius; /// The minimum height of the linear progress indicator. final double minHeight; /// Creates a Moon Design linear progress indicator. const MoonLinearProgressIndicator({ super.key, super.value, required super.backgroundColor, required super.color, super.valueColor, super.semanticsLabel, super.semanticsValue, this.minHeight = 4, this.containerRadius = BorderRadius.zero, this.progressRadius = BorderRadius.zero, }) : assert(minHeight > 0); /// The color of the linear track that forms the background for the linear /// progress indicator. @override Color get backgroundColor => super.backgroundColor; @override State createState() => _MoonLinearProgressIndicatorState(); } class _MoonLinearProgressIndicatorState extends State with SingleTickerProviderStateMixin { static const int _kIndeterminateLinearDuration = 1800; late AnimationController _controller; @override void initState() { super.initState(); _controller = AnimationController( duration: const Duration(milliseconds: _kIndeterminateLinearDuration), vsync: this, ); if (widget.value == null) _controller.repeat(); } @override void didUpdateWidget(MoonLinearProgressIndicator oldWidget) { super.didUpdateWidget(oldWidget); if (widget.value == null && !_controller.isAnimating) { _controller.repeat(); } else if (widget.value != null && _controller.isAnimating) { _controller.stop(); } } @override void dispose() { _controller.dispose(); super.dispose(); } Widget buildStaticProgressIndicator( BuildContext context, double animationValue, TextDirection textDirection, ) { final BorderRadius resolvedContainerRadius = widget.containerRadius.resolve(Directionality.of(context)); final BorderRadius resolvedProgressRadius = widget.progressRadius.resolve(Directionality.of(context)); return widget.buildSemanticsWrapper( context: context, child: ConstrainedBox( constraints: BoxConstraints( minWidth: double.infinity, minHeight: widget.minHeight, ), child: RepaintBoundary( child: CustomPaint( painter: MoonLinearProgressIndicatorPainter( backgroundColor: widget.backgroundColor, valueColor: widget.color, value: widget.value, // May be null. animationValue: animationValue, // Ignored if 'widget.value' is not null. containerRadius: resolvedContainerRadius, progressRadius: resolvedProgressRadius, textDirection: textDirection, ), ), ), ), ); } @override Widget build(BuildContext context) { final TextDirection textDirection = Directionality.of(context); if (widget.value != null) { return buildStaticProgressIndicator( context, _controller.value, textDirection, ); } return AnimatedBuilder( animation: _controller.view, builder: (BuildContext context, Widget? child) { return buildStaticProgressIndicator( context, _controller.value, textDirection, ); }, ); } } ================================================ FILE: lib/src/widgets/common/progress_indicators/painters/circular_progress_indicator_painter.dart ================================================ import 'dart:math' as math; import 'package:flutter/foundation.dart'; import 'package:flutter/rendering.dart'; class MoonCircularProgressIndicatorPainter extends CustomPainter { static const double _twoPi = math.pi * 2.0; static const double _epsilon = .001; static const double _sweep = _twoPi - _epsilon; static const double _startAngle = -math.pi / 2.0; final Color? backgroundColor; final Color valueColor; final double? value; final double headValue; final double tailValue; final double offsetValue; final double rotationValue; final double strokeWidth; final double arcStart; final double arcSweep; final StrokeCap strokeCap; MoonCircularProgressIndicatorPainter({ this.backgroundColor, required this.valueColor, required this.value, required this.headValue, required this.tailValue, required this.offsetValue, required this.rotationValue, required this.strokeWidth, required this.strokeCap, }) : arcStart = value != null ? _startAngle : _startAngle + tailValue * 3 / 2 * math.pi + rotationValue * math.pi * 2.0 + offsetValue * 0.5 * math.pi, arcSweep = value != null ? clampDouble(value, 0.0, 1.0) * _sweep : math.max( headValue * 3 / 2 * math.pi - tailValue * 3 / 2 * math.pi, _epsilon, ); @override void paint(Canvas canvas, Size size) { final Paint paint = Paint() ..color = valueColor ..strokeWidth = strokeWidth ..style = PaintingStyle.stroke; if (backgroundColor != null) { final Paint backgroundPaint = Paint() ..color = backgroundColor! ..strokeWidth = strokeWidth ..style = PaintingStyle.stroke; canvas.drawArc(Offset.zero & size, 0, _sweep, false, backgroundPaint); } paint.strokeCap = strokeCap; canvas.drawArc(Offset.zero & size, arcStart, arcSweep, false, paint); } @override bool shouldRepaint(MoonCircularProgressIndicatorPainter oldPainter) { return oldPainter.backgroundColor != backgroundColor || oldPainter.valueColor != valueColor || oldPainter.value != value || oldPainter.headValue != headValue || oldPainter.tailValue != tailValue || oldPainter.offsetValue != offsetValue || oldPainter.rotationValue != rotationValue || oldPainter.strokeCap != strokeCap || oldPainter.strokeWidth != strokeWidth; } } ================================================ FILE: lib/src/widgets/common/progress_indicators/painters/linear_progress_indicator_painter.dart ================================================ import 'package:flutter/animation.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/rendering.dart'; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; class MoonLinearProgressIndicatorPainter extends CustomPainter { static const int _kIndeterminateLinearDuration = 1800; // The indeterminate progress animation consists of two lines, each with a // leading (head) and trailing (tail) endpoint, defined by the following four // curves. static const Curve _line1Head = Interval( 0.0, 750.0 / _kIndeterminateLinearDuration, curve: Cubic(0.2, 0.0, 0.8, 1.0), ); static const Curve _line1Tail = Interval( 333.0 / _kIndeterminateLinearDuration, (333.0 + 750.0) / _kIndeterminateLinearDuration, curve: Cubic(0.4, 0.0, 1.0, 1.0), ); static const Curve _line2Head = Interval( 1000.0 / _kIndeterminateLinearDuration, (1000.0 + 567.0) / _kIndeterminateLinearDuration, curve: Cubic(0.0, 0.0, 0.65, 1.0), ); static const Curve _line2Tail = Interval( 1267.0 / _kIndeterminateLinearDuration, (1267.0 + 533.0) / _kIndeterminateLinearDuration, curve: Cubic(0.10, 0.0, 0.45, 1.0), ); final Color backgroundColor; final Color valueColor; final double? value; final double animationValue; final BorderRadius containerRadius; final BorderRadius progressRadius; final TextDirection textDirection; const MoonLinearProgressIndicatorPainter({ required this.backgroundColor, required this.valueColor, this.value, required this.animationValue, required this.containerRadius, required this.progressRadius, required this.textDirection, }); @override void paint(Canvas canvas, Size size) { final Paint paint = Paint() ..color = backgroundColor ..style = PaintingStyle.fill; final containerRect = RRect.fromRectAndCorners( Offset.zero & size, topLeft: MoonSquircleRadius(cornerRadius: containerRadius.topLeft.x), topRight: MoonSquircleRadius(cornerRadius: containerRadius.topRight.x), bottomLeft: MoonSquircleRadius(cornerRadius: containerRadius.bottomLeft.x), bottomRight: MoonSquircleRadius(cornerRadius: containerRadius.bottomRight.x), ); canvas.drawRRect(containerRect, paint); paint.color = valueColor; void drawBar(double x, double width) { if (width <= 0.0) return; final double left; switch (textDirection) { case TextDirection.rtl: left = size.width - width - x; case TextDirection.ltr: left = x; } final progressRect = RRect.fromRectAndCorners( Offset(left, 0.0) & Size(width, size.height), topLeft: MoonSquircleRadius(cornerRadius: progressRadius.topLeft.x), topRight: MoonSquircleRadius(cornerRadius: progressRadius.topRight.x), bottomLeft: MoonSquircleRadius(cornerRadius: progressRadius.bottomLeft.x), bottomRight: MoonSquircleRadius(cornerRadius: progressRadius.bottomRight.x), ); // Clipping progressRect with containerRect. canvas.clipRRect(containerRect); canvas.drawRRect(progressRect, paint); } if (value != null) { drawBar(0.0, clampDouble(value!, 0.0, 1.0) * size.width); } else { final double x1 = size.width * _line1Tail.transform(animationValue); final double width1 = size.width * _line1Head.transform(animationValue) - x1; final double x2 = size.width * _line2Tail.transform(animationValue); final double width2 = size.width * _line2Head.transform(animationValue) - x2; drawBar(x1, width1); drawBar(x2, width2); } } @override bool shouldRepaint(MoonLinearProgressIndicatorPainter oldPainter) { return oldPainter.backgroundColor != backgroundColor || oldPainter.valueColor != valueColor || oldPainter.value != value || oldPainter.animationValue != animationValue || oldPainter.containerRadius != containerRadius || oldPainter.progressRadius != progressRadius || oldPainter.textDirection != textDirection; } } ================================================ FILE: lib/src/widgets/dot_indicator/dot_indicator.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonDotIndicator extends StatefulWidget { /// The color of the selected dot. final Color? selectedColor; /// The color of the unselected dots. final Color? unselectedColor; /// The gap between the dots. final double? gap; /// The size of each dot. final double? size; /// The duration of the dot indicator transition animation. final Duration? transitionDuration; /// The curve of the dot indicator transition animation. final Curve? transitionCurve; /// The index of the currently selected dot. final int selectedDot; /// The total number of dots to build for the indicator. final int dotCount; /// Creates a Moon Design dot indicator. const MoonDotIndicator({ this.selectedColor, this.unselectedColor, this.gap, this.size, this.transitionDuration, this.transitionCurve, required this.selectedDot, required this.dotCount, }); @override _CarouselIndicatorState createState() => _CarouselIndicatorState(); } class _CarouselIndicatorState extends State with TickerProviderStateMixin { final ColorTweenWithPremultipliedAlpha _dotColorTween = ColorTweenWithPremultipliedAlpha(); List? _animationControllers; List>? _animations; @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((Duration _) { _animationControllers![widget.selectedDot].forward(); }); } @override void didUpdateWidget(MoonDotIndicator oldWidget) { super.didUpdateWidget(oldWidget); if (widget.selectedDot != oldWidget.selectedDot) { _animationControllers![oldWidget.selectedDot].reverse(); _animationControllers![widget.selectedDot].forward(); } } @override void dispose() { for (final controller in _animationControllers!) { controller.dispose(); } super.dispose(); } @override Widget build(BuildContext context) { final double effectiveSize = widget.size ?? context.moonTheme?.dotIndicatorTheme.properties.size ?? MoonSizes.sizes.x4s; final double effectiveGap = widget.gap ?? context.moonTheme?.dotIndicatorTheme.properties.gap ?? MoonSizes.sizes.x4s; final Color effectiveSelectedColor = widget.selectedColor ?? context.moonTheme?.dotIndicatorTheme.colors.selectedColor ?? MoonColors.light.piccolo; final Color effectiveUnselectedColor = widget.unselectedColor ?? context.moonTheme?.dotIndicatorTheme.colors.unselectedColor ?? MoonColors.light.beerus; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.dotIndicatorTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.dotIndicatorTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; _animationControllers ??= List.generate( widget.dotCount, (index) => AnimationController( duration: effectiveTransitionDuration, vsync: this, ), ); _animations ??= List.generate( widget.dotCount, (index) => _animationControllers![index].drive( _dotColorTween.chain(CurveTween(curve: effectiveTransitionCurve)), ), ); _dotColorTween ..begin = effectiveUnselectedColor ..end = effectiveSelectedColor; return RepaintBoundary( child: Row( mainAxisAlignment: MainAxisAlignment.center, children: List.generate( widget.dotCount, (int index) => AnimatedBuilder( animation: _animations![index], builder: (BuildContext context, Widget? _) { return Container( width: effectiveSize, height: effectiveSize, margin: EdgeInsets.symmetric(horizontal: effectiveGap / 2), decoration: BoxDecoration( shape: BoxShape.circle, color: _animations![index].value, ), ); }, ), ), ), ); } } ================================================ FILE: lib/src/widgets/drawer/drawer.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonDrawer extends StatelessWidget { /// The border radius of the drawer. final BorderRadiusGeometry? borderRadius; /// The background color of the drawer. final Color? backgroundColor; /// The custom decoration of the drawer. final Decoration? decoration; /// The width of the drawer. final double? width; /// The list of shadows applied to the drawer. final List? drawerShadows; /// The semantic label for the drawer. final String? semanticLabel; /// The widget to display inside the drawer as its content. final Widget child; /// Creates a Moon Design drawer. const MoonDrawer({ super.key, this.borderRadius, this.backgroundColor, this.decoration, this.width, this.drawerShadows, this.semanticLabel, required this.child, }); @override Widget build(BuildContext context) { final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? context.moonTheme?.drawerTheme.properties.borderRadius ?? BorderRadius.zero; final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.drawerTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveTextColor = context.moonTheme?.drawerTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = context.moonTheme?.drawerTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final double effectiveWidthFromTheme = context.moonTheme?.drawerTheme.properties.width ?? 448; final double effectiveWidth = width ?? (MediaQuery.of(context).size.width < effectiveWidthFromTheme ? MediaQuery.of(context).size.width : effectiveWidthFromTheme); final List effectiveDrawerShadows = drawerShadows ?? context.moonTheme?.drawerTheme.shadows.drawerShadows ?? MoonShadows.light.lg; final TextStyle effectiveTextStyle = context.moonTheme?.drawerTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; return Semantics( explicitChildNodes: true, namesRoute: true, scopesRoute: true, label: semanticLabel, child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Container( width: effectiveWidth, decoration: decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shadows: effectiveDrawerShadows, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), ), ), child: child, ), ), ), ); } } ================================================ FILE: lib/src/widgets/dropdown/dropdown.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonDropdownAnchorPosition { top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right, vertical, horizontal, } class MoonDropdown extends StatefulWidget { /// Sets the dropdown anchor position on dropdown [content] (follower). /// /// Overrides the [MoonDropdownAnchorPosition] property. final Alignment? followerAnchor; /// Sets the dropdown anchor position on the [child] (target). /// /// Overrides the [MoonDropdownAnchorPosition] property. final Alignment? targetAnchor; /// Whether to constrain the dropdown to the width of its [child] (target). final bool constrainWidthToChild; /// Whether to show the dropdown. final bool show; /// The border radius of the dropdown. final BorderRadiusGeometry? borderRadius; /// The background color of the dropdown. final Color? backgroundColor; /// The border color of the dropdown. final Color borderColor; /// The custom decoration of the dropdown. final Decoration? decoration; /// The border width of the dropdown. final double borderWidth; /// The distance between the dropdown and the [child] (target). /// /// Overridden by the [offset] property if set. final double? distanceToTarget; /// An optional size constraint for the dropdown [content] to define its /// minimum height. /// /// If a constraint is not provided, the size will automatically adjust to the /// [content]. final double? minHeight; /// An optional size constraint for the dropdown [content] to define its /// minimum width. /// /// If a constraint is not provided, the size will automatically adjust to the /// [content]. final double? minWidth; /// An optional size constraint for the dropdown [content] to define its /// maximum height. /// /// If a constraint is not provided, the size will automatically adjust to the /// [content]. final double? maxHeight; /// An optional size constraint for the dropdown [content] to define its /// maximum width. /// /// If a constraint is not provided, the size will automatically adjust to the /// [content]. final double? maxWidth; /// The duration of the dropdown transition animation (fade in or out). final Duration? transitionDuration; /// The curve of the dropdown transition animation (fade in or out). final Curve? transitionCurve; /// The padding of the dropdown [content]. final EdgeInsetsGeometry? contentPadding; /// The margin of the dropdown. Prevents the dropdown from touching the edges /// of the viewport. final EdgeInsetsGeometry? dropdownMargin; /// The list of shadows applied to the dropdown. final List? dropdownShadows; /// Sets the dropdown anchor position on the [child] (target). /// /// This is a convenience shorthand for setting the anchor position. /// This will be overridden by the [followerAnchor], [targetAnchor], [offset], /// or [maxWidth] properties if set. final MoonDropdownAnchorPosition dropdownAnchorPosition; /// The offset of the dropdown. /// /// Overrides the [distanceToTarget] property. final Offset? offset; /// The observer to keep track of the route changes and automatically hide /// the dropdown when the widget's route is not active. final RouteObserver>? routeObserver; /// The unique group ID of the dropdown. /// This ID is used to associate nested dropdowns and prevent them from /// closing when tapped inside each other. final String? groupId; /// The semantic label for the dropdown. final String? semanticLabel; /// The callback that is called when the user taps outside the dropdown. final VoidCallback? onTapOutside; /// The widget to display as the child (target) of the dropdown. final Widget child; /// The widget to display inside the dropdown as its content. final Widget content; /// Creates a Moon Design dropdown. const MoonDropdown({ super.key, required this.show, this.followerAnchor, this.targetAnchor, this.constrainWidthToChild = false, this.borderRadius, this.backgroundColor, this.borderColor = Colors.transparent, this.decoration, this.borderWidth = 0, this.distanceToTarget, this.minHeight, this.minWidth, this.maxHeight, this.maxWidth, this.transitionDuration, this.transitionCurve, this.contentPadding, this.dropdownMargin, this.dropdownShadows, this.dropdownAnchorPosition = MoonDropdownAnchorPosition.bottom, this.offset, this.routeObserver, this.groupId, this.semanticLabel, this.onTapOutside, required this.child, required this.content, }); @override _MoonDropdownState createState() => _MoonDropdownState(); } class _MoonDropdownState extends State with RouteAware, SingleTickerProviderStateMixin { late final Key _regionKey = widget.groupId != null ? ValueKey(widget.groupId) : ObjectKey(widget); final LayerLink _layerLink = LayerLink(); AnimationController? _animationController; CurvedAnimation? _curvedAnimation; OverlayEntry? _overlayEntry; bool _routeIsShowing = true; bool get shouldShowDropdown => widget.show && _routeIsShowing; void _showDropdown() { _overlayEntry = OverlayEntry( builder: (BuildContext context) => _createOverlayContent(), ); Overlay.of(context).insert(_overlayEntry!); _animationController!.value = 0; _animationController!.forward(); } void _updateDropdown() { _overlayEntry?.markNeedsBuild(); } void _removeDropdown({bool immediately = false}) { if (immediately) { _clearOverlayEntry(); } else { _animationController!.value = 1; _animationController!.reverse().then((value) => _clearOverlayEntry()); } } void _handleTapOutside() { widget.onTapOutside?.call(); } void _clearOverlayEntry() { if (_overlayEntry != null) { _overlayEntry!.remove(); _overlayEntry = null; } } _DropdownPositionProperties _resolveDropdownPositionParameters({ required MoonDropdownAnchorPosition dropdownAnchorPosition, required double distanceToTarget, required double overlayWidth, required double dropdownTargetGlobalLeft, required double dropdownTargetGlobalCenter, required double dropdownTargetGlobalRight, required EdgeInsets dropdownMargin, }) { switch (dropdownAnchorPosition) { case MoonDropdownAnchorPosition.top: return _DropdownPositionProperties( offset: Offset(0, -distanceToTarget), targetAnchor: Alignment.topCenter, followerAnchor: Alignment.bottomCenter, dropdownMaxWidth: overlayWidth - ((overlayWidth / 2 - dropdownTargetGlobalCenter) * 2).abs() - dropdownMargin.horizontal, ); case MoonDropdownAnchorPosition.bottom: return _DropdownPositionProperties( offset: Offset(0, distanceToTarget), targetAnchor: Alignment.bottomCenter, followerAnchor: Alignment.topCenter, dropdownMaxWidth: overlayWidth - ((overlayWidth / 2 - dropdownTargetGlobalCenter) * 2).abs() - dropdownMargin.horizontal, ); case MoonDropdownAnchorPosition.left: return _DropdownPositionProperties( offset: Offset(-distanceToTarget, 0), targetAnchor: Alignment.centerLeft, followerAnchor: Alignment.centerRight, dropdownMaxWidth: dropdownTargetGlobalLeft - distanceToTarget - dropdownMargin.left, ); case MoonDropdownAnchorPosition.right: return _DropdownPositionProperties( offset: Offset(distanceToTarget, 0), targetAnchor: Alignment.centerRight, followerAnchor: Alignment.centerLeft, dropdownMaxWidth: overlayWidth - dropdownTargetGlobalRight - distanceToTarget - dropdownMargin.right, ); case MoonDropdownAnchorPosition.topLeft: return _DropdownPositionProperties( offset: Offset(0, -distanceToTarget), targetAnchor: Alignment.topLeft, followerAnchor: Alignment.bottomLeft, dropdownMaxWidth: overlayWidth - dropdownTargetGlobalLeft - dropdownMargin.left, ); case MoonDropdownAnchorPosition.topRight: return _DropdownPositionProperties( offset: Offset(0, -distanceToTarget), targetAnchor: Alignment.topRight, followerAnchor: Alignment.bottomRight, dropdownMaxWidth: dropdownTargetGlobalRight - dropdownMargin.right, ); case MoonDropdownAnchorPosition.bottomLeft: return _DropdownPositionProperties( offset: Offset(0, distanceToTarget), targetAnchor: Alignment.bottomLeft, followerAnchor: Alignment.topLeft, dropdownMaxWidth: overlayWidth - dropdownTargetGlobalLeft - dropdownMargin.left, ); case MoonDropdownAnchorPosition.bottomRight: return _DropdownPositionProperties( offset: Offset(0, distanceToTarget), targetAnchor: Alignment.bottomRight, followerAnchor: Alignment.topRight, dropdownMaxWidth: dropdownTargetGlobalRight - dropdownMargin.right, ); default: throw AssertionError("No match: $dropdownAnchorPosition"); } } @override void didPush() { _routeIsShowing = true; // Route was added to the navigator and is now the top-most route. if (shouldShowDropdown) { _removeDropdown(); WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!mounted) return; _showDropdown(); }); } } @override void didPushNext() { _routeIsShowing = false; _removeDropdown(); } @override Future didPopNext() async { _routeIsShowing = true; if (shouldShowDropdown) { // The covering route was popped off the navigator. _removeDropdown(); await Future.delayed(const Duration(milliseconds: 100), () { if (mounted) _showDropdown(); }); } } @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((Duration _) { widget.routeObserver ?.subscribe(this, ModalRoute.of(context)! as PageRoute); }); } @override void didUpdateWidget(MoonDropdown oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.routeObserver != widget.routeObserver) { oldWidget.routeObserver?.unsubscribe(this); widget.routeObserver ?.subscribe(this, ModalRoute.of(context)! as PageRoute); } WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!_routeIsShowing) return; if (oldWidget.dropdownAnchorPosition != widget.dropdownAnchorPosition) { _removeDropdown(immediately: true); _showDropdown(); } else if (shouldShowDropdown && _overlayEntry == null) { _showDropdown(); } else if (!shouldShowDropdown && _overlayEntry != null) { _removeDropdown(); } _updateDropdown(); }); } @override void deactivate() { if (_overlayEntry != null) _removeDropdown(immediately: true); super.deactivate(); } @override void dispose() { if (_overlayEntry != null) _removeDropdown(immediately: true); widget.routeObserver?.unsubscribe(this); super.dispose(); } Widget _createOverlayContent() { final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.dropdownTheme.properties.borderRadius ?? BorderRadius.circular(12); final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.dropdownTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveTextColor = context.moonTheme?.dropdownTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = context.moonTheme?.dropdownTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final TextStyle effectiveTextStyle = context.moonTheme?.dropdownTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final double effectiveDistanceToTarget = widget.distanceToTarget ?? context.moonTheme?.dropdownTheme.properties.distanceToTarget ?? MoonSizes.sizes.x4s; final EdgeInsetsGeometry effectiveContentPadding = widget.contentPadding ?? context.moonTheme?.dropdownTheme.properties.contentPadding ?? const EdgeInsets.all(4); final EdgeInsets resolvedContentPadding = effectiveContentPadding.resolve(Directionality.of(context)); final EdgeInsetsGeometry effectiveDropdownMargin = widget.dropdownMargin ?? context.moonTheme?.dropdownTheme.properties.dropdownMargin ?? const EdgeInsets.all(8); final EdgeInsets resolvedDropdownMargin = effectiveDropdownMargin.resolve(Directionality.of(context)); final List effectiveDropdownShadows = widget.dropdownShadows ?? context.moonTheme?.dropdownTheme.shadows.dropdownShadows ?? MoonShadows.light.sm; MoonDropdownAnchorPosition dropdownAnchorPosition = widget.dropdownAnchorPosition; final RenderBox overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; final RenderBox targetRenderBox = context.findRenderObject()! as RenderBox; final Offset dropdownTargetGlobalCenter = targetRenderBox.localToGlobal( targetRenderBox.size.center(Offset.zero), ancestor: overlayRenderBox, ); final Offset dropdownTargetGlobalLeft = targetRenderBox.localToGlobal( targetRenderBox.size.centerLeft(Offset.zero), ancestor: overlayRenderBox, ); final Offset dropdownTargetGlobalRight = targetRenderBox.localToGlobal( targetRenderBox.size.centerRight(Offset.zero), ancestor: overlayRenderBox, ); if (Directionality.of(context) == TextDirection.rtl || dropdownAnchorPosition == MoonDropdownAnchorPosition.horizontal || dropdownAnchorPosition == MoonDropdownAnchorPosition.vertical) { switch (dropdownAnchorPosition) { case MoonDropdownAnchorPosition.left: dropdownAnchorPosition = MoonDropdownAnchorPosition.right; case MoonDropdownAnchorPosition.right: dropdownAnchorPosition = MoonDropdownAnchorPosition.left; case MoonDropdownAnchorPosition.topLeft: dropdownAnchorPosition = MoonDropdownAnchorPosition.topRight; case MoonDropdownAnchorPosition.topRight: dropdownAnchorPosition = MoonDropdownAnchorPosition.topLeft; case MoonDropdownAnchorPosition.bottomLeft: dropdownAnchorPosition = MoonDropdownAnchorPosition.bottomRight; case MoonDropdownAnchorPosition.bottomRight: dropdownAnchorPosition = MoonDropdownAnchorPosition.bottomLeft; case MoonDropdownAnchorPosition.vertical: dropdownAnchorPosition = dropdownTargetGlobalCenter.dy < overlayRenderBox.size.center(Offset.zero).dy ? MoonDropdownAnchorPosition.bottom : MoonDropdownAnchorPosition.top; case MoonDropdownAnchorPosition.horizontal: dropdownAnchorPosition = dropdownTargetGlobalCenter.dx < overlayRenderBox.size.center(Offset.zero).dx ? MoonDropdownAnchorPosition.right : MoonDropdownAnchorPosition.left; default: break; } } final _DropdownPositionProperties dropdownAnchorPositionParameters = _resolveDropdownPositionParameters( dropdownAnchorPosition: dropdownAnchorPosition, distanceToTarget: effectiveDistanceToTarget, overlayWidth: overlayRenderBox.size.width, dropdownTargetGlobalLeft: dropdownTargetGlobalLeft.dx, dropdownTargetGlobalCenter: dropdownTargetGlobalCenter.dx, dropdownTargetGlobalRight: dropdownTargetGlobalRight.dx, dropdownMargin: resolvedDropdownMargin, ); final double targetWidth = targetRenderBox.size.width; final double effectiveDropdownWidth = widget.constrainWidthToChild ? targetWidth : widget.maxWidth != null ? widget.maxWidth! : dropdownAnchorPositionParameters.dropdownMaxWidth; return Semantics( label: widget.semanticLabel, child: UnconstrainedBox( child: CompositedTransformFollower( link: _layerLink, showWhenUnlinked: false, offset: widget.offset ?? dropdownAnchorPositionParameters.offset, followerAnchor: widget.followerAnchor ?? dropdownAnchorPositionParameters.followerAnchor, targetAnchor: widget.targetAnchor ?? dropdownAnchorPositionParameters.targetAnchor, child: TapRegion( groupId: _regionKey, behavior: HitTestBehavior.translucent, onTapOutside: (PointerDownEvent _) => _handleTapOutside(), child: RepaintBoundary( child: FadeTransition( opacity: _curvedAnimation!, child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Container( constraints: BoxConstraints( minHeight: widget.minHeight ?? 0, maxHeight: widget.maxHeight ?? double.infinity, minWidth: widget.minWidth ?? 0, maxWidth: effectiveDropdownWidth, ), padding: resolvedContentPadding, decoration: widget.decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shadows: effectiveDropdownShadows, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius .squircleBorderRadius(context), side: BorderSide(color: widget.borderColor), ), ), child: Directionality( textDirection: Directionality.of(context), child: widget.content, ), ), ), ), ), ), ), ), ), ); } @override Widget build(BuildContext context) { final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.dropdownTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.dropdownTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; _animationController ??= AnimationController( duration: effectiveTransitionDuration, vsync: this, ); _curvedAnimation ??= CurvedAnimation( parent: _animationController!, curve: effectiveTransitionCurve, ); return TapRegion( groupId: _regionKey, behavior: HitTestBehavior.translucent, child: CompositedTransformTarget( link: _layerLink, child: widget.child, ), ); } } class _DropdownPositionProperties { final Alignment followerAnchor; final Alignment targetAnchor; final double dropdownMaxWidth; final Offset offset; _DropdownPositionProperties({ required this.followerAnchor, required this.targetAnchor, required this.dropdownMaxWidth, required this.offset, }); } ================================================ FILE: lib/src/widgets/loaders/circular_loader.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_size_properties.dart'; import 'package:moon_design/src/theme/loaders/circular_loader/circular_loader_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonCircularLoaderSize { x2s, xs, sm, md, lg, } class MoonCircularLoader extends StatelessWidget { /// The color of the circular loader. final Color? color; /// The background color of the circular loader. final Color? backgroundColor; /// The custom size value of the circular loader. For predefined sizes, use /// [circularLoaderSize]. final double? sizeValue; /// The width of the stroke for the circular loader. final double? strokeWidth; /// The size of the circular loader. final MoonCircularLoaderSize? circularLoaderSize; /// The shape of the end of the stroke (stroke-cap) for the circular loader. final StrokeCap? strokeCap; /// Creates a Moon Design circular loader. const MoonCircularLoader({ super.key, this.color, this.backgroundColor, this.sizeValue, this.strokeWidth, this.circularLoaderSize, this.strokeCap, }); MoonCircularLoaderSizeProperties _getMoonLoaderSize( BuildContext context, MoonCircularLoaderSize? moonLoaderSize, ) { switch (moonLoaderSize) { case MoonCircularLoaderSize.x2s: return context.moonTheme?.circularLoaderTheme.sizes.x2s ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).x2s; case MoonCircularLoaderSize.xs: return context.moonTheme?.circularLoaderTheme.sizes.xs ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).xs; case MoonCircularLoaderSize.sm: return context.moonTheme?.circularLoaderTheme.sizes.sm ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).sm; case MoonCircularLoaderSize.md: return context.moonTheme?.circularLoaderTheme.sizes.md ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).md; case MoonCircularLoaderSize.lg: return context.moonTheme?.circularLoaderTheme.sizes.lg ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).lg; default: return context.moonTheme?.circularLoaderTheme.sizes.md ?? MoonCircularLoaderSizes(tokens: MoonTokens.light).md; } } @override Widget build(BuildContext context) { final MoonCircularLoaderSizeProperties effectiveLoaderSize = _getMoonLoaderSize(context, circularLoaderSize); final Color effectiveColor = color ?? context.moonTheme?.circularLoaderTheme.colors.color ?? MoonColors.light.piccolo; final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.circularLoaderTheme.colors.backgroundColor ?? Colors.transparent; final double effectiveSize = sizeValue ?? effectiveLoaderSize.loaderSizeValue; final double effectiveStrokeWidth = strokeWidth ?? effectiveLoaderSize.loaderStrokeWidth; final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; return SizedBox( height: effectiveSize, width: effectiveSize, child: MoonCircularProgressIndicator( color: effectiveColor, backgroundColor: effectiveBackgroundColor, strokeWidth: effectiveStrokeWidth, strokeCap: effectiveStrokeCap, ), ); } } ================================================ FILE: lib/src/widgets/loaders/linear_loader.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_size_properties.dart'; import 'package:moon_design/src/theme/loaders/linear_loader/linear_loader_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonLinearLoaderSize { x6s, x5s, x4s, x3s, x2s, } class MoonLinearLoader extends StatelessWidget { /// The border radius of the linear loader. final BorderRadiusGeometry? borderRadius; /// The color of the linear loader. final Color? color; /// The background color of the linear loader. final Color? backgroundColor; /// The height of the linear loader. final double? height; /// The size of the linear loader. final MoonLinearLoaderSize? linearLoaderSize; /// Creates a Moon Design linear loader. const MoonLinearLoader({ super.key, this.borderRadius, this.color, this.backgroundColor, this.height, this.linearLoaderSize, }); MoonLinearLoaderSizeProperties _getMoonLoaderSize( BuildContext context, MoonLinearLoaderSize? moonLoaderSize, ) { switch (moonLoaderSize) { case MoonLinearLoaderSize.x6s: return context.moonTheme?.linearLoaderTheme.sizes.x6s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x6s; case MoonLinearLoaderSize.x5s: return context.moonTheme?.linearLoaderTheme.sizes.x5s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x5s; case MoonLinearLoaderSize.x4s: return context.moonTheme?.linearLoaderTheme.sizes.x4s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x4s; case MoonLinearLoaderSize.x3s: return context.moonTheme?.linearLoaderTheme.sizes.x3s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x3s; case MoonLinearLoaderSize.x2s: return context.moonTheme?.linearLoaderTheme.sizes.x2s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x2s; default: return context.moonTheme?.linearLoaderTheme.sizes.x4s ?? MoonLinearLoaderSizes(tokens: MoonTokens.light).x4s; } } @override Widget build(BuildContext context) { final MoonLinearLoaderSizeProperties effectiveLoaderSize = _getMoonLoaderSize(context, linearLoaderSize); final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? effectiveLoaderSize.borderRadius; final Color effectiveColor = color ?? context.moonTheme?.linearLoaderTheme.colors.color ?? MoonColors.light.piccolo; final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.linearLoaderTheme.colors.backgroundColor ?? Colors.transparent; final double effectiveHeight = height ?? effectiveLoaderSize.loaderHeight; return MoonLinearProgressIndicator( color: effectiveColor, backgroundColor: effectiveBackgroundColor, containerRadius: effectiveBorderRadius, progressRadius: effectiveBorderRadius, minHeight: effectiveHeight, ); } } ================================================ FILE: lib/src/widgets/menu_item/menu_item.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonMenuItem extends StatefulWidget { /// Defines how the widgets of the menu item are aligned along the cross axis. /// /// Defaults to the [CrossAxisAlignment.center]. final CrossAxisAlignment? menuItemCrossAxisAlignment; /// Defines how the [label] and [content] widgets of the menu item are aligned /// along the cross axis within [label] and [content] slots. /// /// Defaults to the [CrossAxisAlignment.start]. final CrossAxisAlignment? labelAndContentCrossAxisAlignment; /// Whether the menu item should absorb gestures. If this is true the menu /// item children will not receive gestures. final bool absorbGestures; /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// The border radius of the menu item. final BorderRadiusGeometry? borderRadius; /// The background color of the menu item. final Color? backgroundColor; /// The color of the menu item hover effect. final Color? hoverEffectColor; /// The custom decoration of the menu item. final Decoration? decoration; /// The height of the menu item. final double? height; /// The width of the menu item. final double? width; /// The horizontal gap between the [leading], [label] and [trailing] widgets /// of the menu item. final double? horizontalGap; /// The vertical gap between the [label] and [content] widgets of the menu /// item. final double? verticalGap; /// The duration of the menu item hover effect. final Duration? hoverEffectDuration; /// The curve of the menu item hover effect. final Curve? hoverEffectCurve; /// The padding of the menu item. final EdgeInsetsGeometry? menuItemPadding; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The semantic label for the menu item. final String? semanticLabel; /// The callback that is called when the menu item is tapped or pressed. /// The menu item is disabled when both [onTap] and [onLongPress] are null. final VoidCallback? onTap; /// The callback that is called when the menu item is long pressed. /// The menu item is disabled when both [onLongPress] and [onTap] are null. final VoidCallback? onLongPress; /// The widget to display before the [label] widget of the menu item. final Widget? leading; /// The primary content of the menu item header. final Widget label; /// The widget to display below the [label] widget of the menu item. /// The secondary content of the menu item header. final Widget? content; /// The widget to display after the [label] widget of the menu item. final Widget? trailing; /// Creates a Moon Design menu item. const MoonMenuItem({ super.key, this.menuItemCrossAxisAlignment, this.labelAndContentCrossAxisAlignment, this.absorbGestures = false, this.autofocus = false, this.borderRadius, this.backgroundColor, this.hoverEffectColor, this.decoration, this.height, this.width, this.horizontalGap, this.verticalGap, this.hoverEffectDuration, this.hoverEffectCurve, this.menuItemPadding, this.focusNode, this.semanticLabel, this.onTap, this.onLongPress, this.leading, required this.label, this.content, this.trailing, }) : assert( labelAndContentCrossAxisAlignment != CrossAxisAlignment.baseline, 'The CrossAxisAlignment.baseline is not supported since the label and ' 'content of menu item are aligned in a column, not in a row. ' 'Try using another constant.', ); static Iterable divideMenuItems({ required BuildContext context, required Iterable menuItems, Color? color, double? width, }) { menuItems = menuItems.toList(); if (menuItems.isEmpty || menuItems.length == 1) return menuItems; final Color effectiveColor = color ?? context.moonTheme?.menuItemTheme.colors.dividerColor ?? MoonColors.light.beerus; Widget wrapMenuItem(Widget menuItems) { return DecoratedBox( position: DecorationPosition.foreground, decoration: BoxDecoration( border: Border( bottom: Divider.createBorderSide( context, color: effectiveColor, width: width, ), ), ), child: menuItems, ); } return [ ...menuItems.take(menuItems.length - 1).map(wrapMenuItem), menuItems.last, ]; } @override State createState() => _MoonMenuItemState(); } class _MoonMenuItemState extends State with TickerProviderStateMixin { final ColorTweenWithPremultipliedAlpha _backgroundColorTween = ColorTweenWithPremultipliedAlpha(); AnimationController? _animationController; Animation? _backgroundColor; void _handleActiveStatus(bool isActive) { isActive ? _animationController!.forward() : _animationController!.reverse(); } @override void dispose() { _animationController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.menuItemTheme.properties.borderRadius ?? MoonBorders.borders.interactiveSm; final double effectiveMinimumHeaderHeight = widget.height ?? context.moonTheme?.menuItemTheme.properties.minimumHeight ?? MoonSizes.sizes.md; final double effectiveVerticalGap = widget.verticalGap ?? context.moonTheme?.menuItemTheme.properties.verticalGap ?? MoonSizes.sizes.x5s; final EdgeInsetsGeometry effectiveHeaderPadding = widget.menuItemPadding ?? context.moonTheme?.menuItemTheme.properties.padding ?? EdgeInsets.all(MoonSizes.sizes.x3s); final EdgeInsets resolvedDirectionalHeaderPadding = effectiveHeaderPadding.resolve(Directionality.of(context)); final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.menuItemTheme.colors.backgroundColor ?? Colors.transparent; final Color effectiveIconColor = context.moonTheme?.menuItemTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final Color effectiveLabelTextColor = context.moonTheme?.menuItemTheme.colors.labelTextColor ?? MoonColors.light.textPrimary; final Color effectiveContentTextColor = context.moonTheme?.menuItemTheme.colors.contentTextColor ?? MoonColors.light.textSecondary; final TextStyle effectiveLabelTextStyle = context.moonTheme?.menuItemTheme.properties.labelTextStyle ?? MoonTypography.typography.body.textDefault; final TextStyle effectiveContentTextStyle = context.moonTheme?.menuItemTheme.properties.contentTextStyle ?? MoonTypography.typography.body.text12; final Color effectiveHoverEffectColor = widget.hoverEffectColor ?? context.moonEffects?.controlHoverEffect.primaryHoverColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .primaryHoverColor; final Color resolvedHoverColor = Color.alphaBlend( effectiveHoverEffectColor, widget.backgroundColor ?? Colors.transparent, ); final Duration effectiveHoverEffectDuration = widget.hoverEffectDuration ?? context.moonEffects?.controlHoverEffect.hoverDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .hoverDuration; final Curve effectiveHoverEffectCurve = widget.hoverEffectCurve ?? context.moonEffects?.controlHoverEffect.hoverCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlHoverEffect .hoverCurve; _animationController ??= AnimationController( duration: effectiveHoverEffectDuration, vsync: this, ); _backgroundColor ??= _animationController!.drive( _backgroundColorTween.chain(CurveTween(curve: effectiveHoverEffectCurve)), ); _backgroundColorTween ..begin = effectiveBackgroundColor ..end = resolvedHoverColor; return Semantics( label: widget.semanticLabel, enabled: widget.onTap != null, child: MoonBaseControl( onTap: widget.onTap, onLongPress: widget.onLongPress, propagateGesturesToChild: !widget.absorbGestures, autofocus: widget.autofocus, focusNode: widget.focusNode, borderRadius: effectiveBorderRadius.squircleBorderRadius(context), builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { final bool isActive = isHovered || isFocused; _handleActiveStatus(isActive); return AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return Container( height: widget.height, width: widget.width, constraints: BoxConstraints( minHeight: effectiveMinimumHeaderHeight, ), padding: resolvedDirectionalHeaderPadding, decoration: widget.decoration ?? ShapeDecoration( color: _backgroundColor!.value, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), ), ), child: child, ); }, child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( style: effectiveLabelTextStyle.copyWith( color: effectiveLabelTextColor, ), child: Row( crossAxisAlignment: widget.menuItemCrossAxisAlignment ?? CrossAxisAlignment.center, children: [ if (widget.leading != null) Padding( padding: EdgeInsetsDirectional.only( end: widget.horizontalGap ?? resolvedDirectionalHeaderPadding.left, ), child: widget.leading, ), Expanded( child: Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: widget.labelAndContentCrossAxisAlignment ?? CrossAxisAlignment.start, children: [ widget.label, if (widget.content != null) DefaultTextStyle( style: effectiveContentTextStyle.copyWith( color: effectiveContentTextColor, ), child: Padding( padding: EdgeInsets.only( top: effectiveVerticalGap, ), child: widget.content, ), ), ], ), ), if (widget.trailing != null) Padding( padding: EdgeInsetsDirectional.only( start: widget.horizontalGap ?? resolvedDirectionalHeaderPadding.right, ), child: widget.trailing, ), ], ), ), ), ); }, ), ); } } ================================================ FILE: lib/src/widgets/modal/modal.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; /// Displays a modal overlay over the app's current content, incorporating /// entrance and exit animations, modal barrier color, and modal barrier /// behavior, enabling dialog dismissal via barrier taps. Intended for use in /// conjunction with [MoonModal]. Future showMoonModal({ bool barrierDismissible = true, bool useRootNavigator = true, bool useSafeArea = true, Color? barrierColor, Curve? transitionCurve, Duration? transitionDuration, Offset? anchorPoint, RouteSettings? routeSettings, String? barrierLabel = "Dismiss", required BuildContext context, required WidgetBuilder builder, }) { assert(!barrierDismissible || barrierLabel != null); assert(_debugIsActive(context)); final CapturedThemes themes = InheritedTheme.capture( from: context, to: Navigator.of(context, rootNavigator: useRootNavigator).context, ); final Color effectiveBarrierColor = barrierColor ?? context.moonTheme?.modalTheme.colors.barrierColor ?? MoonColors.light.zeno; final Duration effectiveTransitionDuration = transitionDuration ?? context.moonTheme?.modalTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = transitionCurve ?? context.moonTheme?.modalTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; return Navigator.of(context, rootNavigator: useRootNavigator).push( MoonModalRoute( context: context, builder: builder, barrierDismissible: barrierDismissible, barrierLabel: barrierLabel, barrierColor: effectiveBarrierColor, transitionDuration: effectiveTransitionDuration, transitionCurve: effectiveTransitionCurve, useSafeArea: useSafeArea, settings: routeSettings, anchorPoint: anchorPoint, themes: themes, ), ); } bool _debugIsActive(BuildContext context) { if (context is Element && !context.debugIsActive) { throw FlutterError.fromParts([ ErrorSummary('This BuildContext is no longer valid.'), ErrorDescription( 'The showMoonModal function context parameter is a BuildContext that is ' 'no longer valid.', ), ErrorHint( 'This can commonly occur when the showMoonModal function is called after ' 'awaiting a Future. In this situation the BuildContext might refer to a ' 'widget that has already been disposed during the await. Consider using ' 'a parent context instead.', ), ]); } return true; } class MoonModalRoute extends RawDialogRoute { /// A Moon Design modal route with entrance and exit animations, modal barrier /// color, and modal barrier behavior that allows dismissing the modal when /// tapped on the barrier. MoonModalRoute({ super.anchorPoint, required super.barrierColor, super.barrierDismissible, String? barrierLabel, super.settings, CapturedThemes? themes, required super.transitionDuration, required Curve transitionCurve, bool useSafeArea = true, required BuildContext context, required WidgetBuilder builder, }) : super( barrierLabel: barrierLabel ?? MaterialLocalizations.of(context).modalBarrierDismissLabel, pageBuilder: ( BuildContext buildContext, Animation animation, Animation secondaryAnimation, ) { final Widget pageChild = Builder(builder: builder); Widget modal = themes?.wrap(pageChild) ?? pageChild; if (useSafeArea) modal = SafeArea(child: modal); return modal; }, transitionBuilder: ( BuildContext context, Animation animation, Animation secondaryAnimation, Widget child, ) { return RepaintBoundary( child: FadeTransition( opacity: CurvedAnimation( parent: animation, curve: transitionCurve, ), child: child, ), ); }, ); } class MoonModal extends StatelessWidget { /// The border radius of the modal. final BorderRadiusGeometry? borderRadius; /// The background color of the modal. final Color? backgroundColor; /// The custom decoration of the modal. final Decoration? decoration; /// The semantic label for the modal. final String? semanticLabel; /// The widget to display inside the modal as its content. final Widget child; /// Creates a Moon Design modal. const MoonModal({ super.key, this.borderRadius, this.backgroundColor, this.decoration, this.semanticLabel, required this.child, }); @override Widget build(BuildContext context) { final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? context.moonTheme?.modalTheme.properties.borderRadius ?? MoonBorders.borders.surfaceSm; final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.modalTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveTextColor = context.moonTheme?.modalTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = context.moonTheme?.modalTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final TextStyle effectiveTextStyle = context.moonTheme?.modalTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; return Semantics( label: semanticLabel, child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Center( child: Container( decoration: decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), ), ), child: child, ), ), ), ), ); } } ================================================ FILE: lib/src/widgets/popover/popover.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonPopoverPosition { top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right, vertical, horizontal, } class MoonPopover extends StatefulWidget { // This is necessary to ensure that only one popover is visible at a time. static final List _openedPopovers = []; /// Whether to show the popover. final bool show; /// The border radius of the popover. final BorderRadiusGeometry? borderRadius; /// The background color of the popover. final Color? backgroundColor; /// The border color of the popover. final Color borderColor; /// The custom decoration of the popover. final Decoration? decoration; /// The border width of the popover. final double borderWidth; /// The distance between the popover and the [child] (target). final double? distanceToTarget; /// An optional size constraint for the popover [content] to define its /// minimum height. /// /// If a constraint is not provided, the size will automatically adjust to /// the [content]. final double? minHeight; /// An optional size constraint for the popover [content] to define its /// minimum width. /// /// If a constraint is not provided, the size will automatically adjust to /// the [content]. final double? minWidth; /// An optional size constraint for the popover [content] to define its /// maximum height. /// /// If a constraint is not provided, the size will automatically adjust to /// the [content]. final double? maxHeight; /// An optional size constraint for the popover [content] to define its /// maximum width. /// /// If a constraint is not provided, the size will automatically adjust to /// the [content]. final double? maxWidth; /// The margin around the popover. Prevents the popover from touching the /// edges of the viewport. final double popoverMargin; /// The duration of the popover transition animation (fade in or out). final Duration? transitionDuration; /// The curve of the popover transition animation (fade in or out). final Curve? transitionCurve; /// The padding of the popover [content]. final EdgeInsetsGeometry? contentPadding; /// The list of shadows applied to the popover. final List? popoverShadows; /// Sets the popover position relative to the [child] (target). /// Defaults to [MoonPopoverPosition.vertical]. final MoonPopoverPosition popoverPosition; /// The observer to keep track of the route changes and automatically hide /// the popover when the widget's route is not active. final RouteObserver>? routeObserver; /// The semantic label for the popover. final String? semanticLabel; /// The callback that is called when the user taps outside the popover. final VoidCallback? onTapOutside; /// The widget to display as the child (target) of the popover. final Widget child; /// The widget to display inside the popover as its content. final Widget content; /// Creates a Moon Design popover. const MoonPopover({ super.key, required this.show, this.borderRadius, this.backgroundColor, this.borderColor = Colors.transparent, this.decoration, this.borderWidth = 0, this.distanceToTarget, this.minHeight, this.minWidth, this.maxHeight, this.maxWidth, this.popoverMargin = 8, this.transitionDuration, this.transitionCurve, this.contentPadding, this.popoverShadows, this.popoverPosition = MoonPopoverPosition.top, this.routeObserver, this.semanticLabel, this.onTapOutside, required this.child, required this.content, }); // Remove all existing popovers except the provided one. static void _removeOtherPopovers(MoonPopoverState current) { if (_openedPopovers.isNotEmpty) { // Avoid concurrent modification. final List openedPopovers = _openedPopovers.toList(); for (final MoonPopoverState state in openedPopovers) { if (state == current) continue; state._clearOverlayEntry(); } } } @override MoonPopoverState createState() => MoonPopoverState(); } class MoonPopoverState extends State with RouteAware, SingleTickerProviderStateMixin { late final ObjectKey _regionKey = ObjectKey(widget); final LayerLink _layerLink = LayerLink(); AnimationController? _animationController; CurvedAnimation? _curvedAnimation; OverlayEntry? _overlayEntry; bool _routeIsShowing = true; bool get shouldShowPopover => widget.show && _routeIsShowing; void _showPopover() { _overlayEntry = OverlayEntry( builder: (BuildContext context) => _createOverlayContent(), ); Overlay.of(context).insert(_overlayEntry!); MoonPopover._openedPopovers.add(this); MoonPopover._removeOtherPopovers(this); _animationController!.value = 0; _animationController!.forward(); } void _updatePopover() { _overlayEntry?.markNeedsBuild(); } void _removePopover({bool immediately = false}) { if (immediately) { _clearOverlayEntry(); } else { _animationController!.value = 1; _animationController!.reverse().then((value) => _clearOverlayEntry()); } } void _handleTapOutside() { widget.onTapOutside?.call(); } void _clearOverlayEntry() { if (_overlayEntry != null) { MoonPopover._openedPopovers.remove(this); _overlayEntry!.remove(); _overlayEntry = null; } } _PopoverPositionProperties _resolvePopoverPositionParameters({ required MoonPopoverPosition popoverPosition, required double distanceToTarget, required double overlayWidth, required double popoverTargetGlobalLeft, required double popoverTargetGlobalCenter, required double popoverTargetGlobalRight, }) { return switch (popoverPosition) { MoonPopoverPosition.top => _PopoverPositionProperties( offset: Offset(0, -distanceToTarget), targetAnchor: Alignment.topCenter, followerAnchor: Alignment.bottomCenter, popoverMaxWidth: overlayWidth - ((overlayWidth / 2 - popoverTargetGlobalCenter) * 2).abs() - widget.popoverMargin * 2, ), MoonPopoverPosition.bottom => _PopoverPositionProperties( offset: Offset(0, distanceToTarget), targetAnchor: Alignment.bottomCenter, followerAnchor: Alignment.topCenter, popoverMaxWidth: overlayWidth - ((overlayWidth / 2 - popoverTargetGlobalCenter) * 2).abs() - widget.popoverMargin * 2, ), MoonPopoverPosition.left => _PopoverPositionProperties( offset: Offset(-distanceToTarget, 0), targetAnchor: Alignment.centerLeft, followerAnchor: Alignment.centerRight, popoverMaxWidth: popoverTargetGlobalLeft - distanceToTarget - widget.popoverMargin, ), MoonPopoverPosition.right => _PopoverPositionProperties( offset: Offset(distanceToTarget, 0), targetAnchor: Alignment.centerRight, followerAnchor: Alignment.centerLeft, popoverMaxWidth: overlayWidth - popoverTargetGlobalRight - distanceToTarget - widget.popoverMargin, ), MoonPopoverPosition.topLeft => _PopoverPositionProperties( offset: Offset(0, -distanceToTarget), targetAnchor: Alignment.topRight, followerAnchor: Alignment.bottomRight, popoverMaxWidth: popoverTargetGlobalRight - widget.popoverMargin, ), MoonPopoverPosition.topRight => _PopoverPositionProperties( offset: Offset(0, -distanceToTarget), targetAnchor: Alignment.topLeft, followerAnchor: Alignment.bottomLeft, popoverMaxWidth: overlayWidth - popoverTargetGlobalLeft - widget.popoverMargin, ), MoonPopoverPosition.bottomLeft => _PopoverPositionProperties( offset: Offset(0, distanceToTarget), targetAnchor: Alignment.bottomRight, followerAnchor: Alignment.topRight, popoverMaxWidth: popoverTargetGlobalRight - widget.popoverMargin, ), MoonPopoverPosition.bottomRight => _PopoverPositionProperties( offset: Offset(0, distanceToTarget), targetAnchor: Alignment.bottomLeft, followerAnchor: Alignment.topLeft, popoverMaxWidth: overlayWidth - popoverTargetGlobalLeft - widget.popoverMargin, ), _ => throw AssertionError("No match: $popoverPosition"), }; } @override void didPush() { _routeIsShowing = true; // Route was added to the navigator and is now the top-most route. if (shouldShowPopover) { _removePopover(); WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (mounted) _showPopover(); }); } } @override void didPushNext() { _routeIsShowing = false; _removePopover(); } @override Future didPopNext() async { _routeIsShowing = true; if (shouldShowPopover) { // The covering route was popped off the navigator. _removePopover(); await Future.delayed(const Duration(milliseconds: 100), () { if (mounted) _showPopover(); }); } } @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((Duration _) { widget.routeObserver ?.subscribe(this, ModalRoute.of(context)! as PageRoute); }); } @override void didUpdateWidget(MoonPopover oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.routeObserver != widget.routeObserver) { oldWidget.routeObserver?.unsubscribe(this); widget.routeObserver ?.subscribe(this, ModalRoute.of(context)! as PageRoute); } WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!_routeIsShowing) return; if (oldWidget.popoverPosition != widget.popoverPosition) { _removePopover(immediately: true); _showPopover(); } else if (shouldShowPopover && _overlayEntry == null) { _showPopover(); } else if (!shouldShowPopover && _overlayEntry != null) { _removePopover(); } _updatePopover(); }); } @override void deactivate() { if (_overlayEntry != null) _removePopover(immediately: true); super.deactivate(); } @override void dispose() { _animationController?.dispose(); if (_overlayEntry != null) _removePopover(immediately: true); widget.routeObserver?.unsubscribe(this); super.dispose(); } Widget _createOverlayContent() { MoonPopoverPosition popoverPosition = widget.popoverPosition; final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.popoverTheme.properties.borderRadius ?? BorderRadius.circular(12); final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.popoverTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveTextColor = context.moonTheme?.popoverTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = context.moonTheme?.popoverTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final TextStyle effectiveTextStyle = context.moonTheme?.popoverTheme.properties.textStyle ?? MoonTypography.typography.body.textDefault; final double effectiveDistanceToTarget = widget.distanceToTarget ?? context.moonTheme?.popoverTheme.properties.distanceToTarget ?? 8; final EdgeInsetsGeometry effectiveContentPadding = widget.contentPadding ?? context.moonTheme?.popoverTheme.properties.contentPadding ?? const EdgeInsets.all(12); final EdgeInsets resolvedContentPadding = effectiveContentPadding.resolve(Directionality.of(context)); final List effectivePopoverShadows = widget.popoverShadows ?? context.moonTheme?.popoverTheme.shadows.popoverShadows ?? MoonShadows.light.sm; final RenderBox overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; final RenderBox targetRenderBox = context.findRenderObject()! as RenderBox; final Offset popoverTargetGlobalCenter = targetRenderBox.localToGlobal( targetRenderBox.size.center(Offset.zero), ancestor: overlayRenderBox, ); final Offset popoverTargetGlobalLeft = targetRenderBox.localToGlobal( targetRenderBox.size.centerLeft(Offset.zero), ancestor: overlayRenderBox, ); final Offset popoverTargetGlobalRight = targetRenderBox.localToGlobal( targetRenderBox.size.centerRight(Offset.zero), ancestor: overlayRenderBox, ); if (Directionality.of(context) == TextDirection.rtl || popoverPosition == MoonPopoverPosition.horizontal || popoverPosition == MoonPopoverPosition.vertical) { switch (popoverPosition) { case MoonPopoverPosition.left: popoverPosition = MoonPopoverPosition.right; case MoonPopoverPosition.right: popoverPosition = MoonPopoverPosition.left; case MoonPopoverPosition.topLeft: popoverPosition = MoonPopoverPosition.topRight; case MoonPopoverPosition.topRight: popoverPosition = MoonPopoverPosition.topLeft; case MoonPopoverPosition.bottomLeft: popoverPosition = MoonPopoverPosition.bottomRight; case MoonPopoverPosition.bottomRight: popoverPosition = MoonPopoverPosition.bottomLeft; case MoonPopoverPosition.vertical: popoverPosition = popoverTargetGlobalCenter.dy < overlayRenderBox.size.center(Offset.zero).dy ? MoonPopoverPosition.bottom : MoonPopoverPosition.top; case MoonPopoverPosition.horizontal: popoverPosition = popoverTargetGlobalCenter.dx < overlayRenderBox.size.center(Offset.zero).dx ? MoonPopoverPosition.right : MoonPopoverPosition.left; default: break; } } final _PopoverPositionProperties popoverPositionParameters = _resolvePopoverPositionParameters( popoverPosition: popoverPosition, distanceToTarget: effectiveDistanceToTarget, overlayWidth: overlayRenderBox.size.width, popoverTargetGlobalLeft: popoverTargetGlobalLeft.dx, popoverTargetGlobalCenter: popoverTargetGlobalCenter.dx, popoverTargetGlobalRight: popoverTargetGlobalRight.dx, ); return Semantics( label: widget.semanticLabel, child: UnconstrainedBox( child: CompositedTransformFollower( link: _layerLink, showWhenUnlinked: false, offset: popoverPositionParameters.offset, followerAnchor: popoverPositionParameters.followerAnchor, targetAnchor: popoverPositionParameters.targetAnchor, child: TapRegion( groupId: _regionKey, behavior: HitTestBehavior.translucent, onTapOutside: (PointerDownEvent _) => _handleTapOutside(), child: RepaintBoundary( child: FadeTransition( opacity: _curvedAnimation!, child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( style: effectiveTextStyle.copyWith( color: effectiveTextColor, ), child: Container( constraints: BoxConstraints( minHeight: widget.minHeight ?? 0, minWidth: widget.minWidth ?? 0, maxHeight: widget.maxHeight ?? double.infinity, maxWidth: widget.maxWidth ?? popoverPositionParameters.popoverMaxWidth, ), padding: resolvedContentPadding, decoration: widget.decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shadows: effectivePopoverShadows, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius .squircleBorderRadius(context), side: BorderSide( color: widget.borderColor, width: widget.borderWidth, ), ), ), child: Directionality( textDirection: Directionality.of(context), child: widget.content, ), ), ), ), ), ), ), ), ), ); } @override Widget build(BuildContext context) { final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.popoverTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.popoverTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; _animationController ??= AnimationController( duration: effectiveTransitionDuration, vsync: this, ); _curvedAnimation ??= CurvedAnimation( parent: _animationController!, curve: effectiveTransitionCurve, ); return TapRegion( groupId: _regionKey, behavior: HitTestBehavior.translucent, child: CompositedTransformTarget( link: _layerLink, child: widget.child, ), ); } } class _PopoverPositionProperties { final Alignment followerAnchor; final Alignment targetAnchor; final double popoverMaxWidth; final Offset offset; _PopoverPositionProperties({ required this.followerAnchor, required this.targetAnchor, required this.popoverMaxWidth, required this.offset, }); } ================================================ FILE: lib/src/widgets/progress/circular_progress.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_size_properties.dart'; import 'package:moon_design/src/theme/progress/circular_progress/circular_progress_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/circular_progress_indicator.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonCircularProgressSize { x2s, xs, sm, md, lg, } class MoonCircularProgress extends StatelessWidget { /// The color of the circular progress. final Color? color; /// The background color of the circular progress. final Color? backgroundColor; /// The custom size value of the circular progress. For predefined sizes, use /// [circularProgressSize]. final double? sizeValue; /// The width of the stroke for the circular progress. final double? strokeWidth; /// The progress value of the circular progress. final double value; /// The size of the circular progress. final MoonCircularProgressSize? circularProgressSize; /// The semantic label for the circular progress. final String? semanticLabel; /// The shape of the end of the stroke (stroke-cap) for the circular progress. final StrokeCap? strokeCap; /// Creates a Moon Design circular progress. const MoonCircularProgress({ super.key, this.color, this.backgroundColor, this.sizeValue, this.strokeWidth, required this.value, this.circularProgressSize, this.semanticLabel, this.strokeCap, }); MoonCircularProgressSizeProperties _getMoonCircularProgressSize( BuildContext context, MoonCircularProgressSize? moonCircularProgressSize, ) { switch (moonCircularProgressSize) { case MoonCircularProgressSize.x2s: return context.moonTheme?.circularProgressTheme.sizes.x2s ?? MoonCircularProgressSizes(tokens: MoonTokens.light).x2s; case MoonCircularProgressSize.xs: return context.moonTheme?.circularProgressTheme.sizes.xs ?? MoonCircularProgressSizes(tokens: MoonTokens.light).xs; case MoonCircularProgressSize.sm: return context.moonTheme?.circularProgressTheme.sizes.sm ?? MoonCircularProgressSizes(tokens: MoonTokens.light).sm; case MoonCircularProgressSize.md: return context.moonTheme?.circularProgressTheme.sizes.md ?? MoonCircularProgressSizes(tokens: MoonTokens.light).md; case MoonCircularProgressSize.lg: return context.moonTheme?.circularProgressTheme.sizes.lg ?? MoonCircularProgressSizes(tokens: MoonTokens.light).lg; default: return context.moonTheme?.circularProgressTheme.sizes.md ?? MoonCircularProgressSizes(tokens: MoonTokens.light).md; } } @override Widget build(BuildContext context) { final Color effectiveColor = color ?? context.moonTheme?.circularProgressTheme.colors.color ?? MoonColors.light.piccolo; final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.circularProgressTheme.colors.backgroundColor ?? MoonColors.light.beerus; final MoonCircularProgressSizeProperties effectiveMoonCircularProgressSize = _getMoonCircularProgressSize(context, circularProgressSize); final double effectiveSize = sizeValue ?? effectiveMoonCircularProgressSize.progressSizeValue; final double effectiveStrokeWidth = strokeWidth ?? effectiveMoonCircularProgressSize.progressStrokeWidth; final StrokeCap effectiveStrokeCap = strokeCap ?? StrokeCap.round; return Semantics( label: semanticLabel, value: "${value * 100}%", child: SizedBox( height: effectiveSize, width: effectiveSize, child: MoonCircularProgressIndicator( color: effectiveColor, backgroundColor: effectiveBackgroundColor, strokeWidth: effectiveStrokeWidth, value: value, strokeCap: effectiveStrokeCap, ), ), ); } } ================================================ FILE: lib/src/widgets/progress/linear_progress.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_size_properties.dart'; import 'package:moon_design/src/theme/progress/linear_progress/linear_progress_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/widgets/common/progress_indicators/linear_progress_indicator.dart'; import 'package:moon_design/src/widgets/progress_pin/pin_style.dart'; import 'package:moon_design/src/widgets/progress_pin/progress_pin.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonLinearProgressSize { x6s, x5s, x4s, x3s, x2s, } class MoonLinearProgress extends StatelessWidget { /// Whether to show the thumb and the pin for the linear progress. final bool showPin; /// Whether to show the [minLabel] widget for the linear progress. final bool showMinLabel; /// Whether to show the [maxLabel] widget for the linear progress. final bool showMaxLabel; /// Whether the pin height is added to the linear progress height. /// Applies only when both this and [showPin] are true. /// Otherwise, the pin acts as an overlay without affecting the linear /// progress height. final bool pinAffectsHeight; /// The border radius of the linear progress. final BorderRadiusGeometry? borderRadius; /// The color of the linear progress. final Color? color; /// The background color of the linear progress. final Color? backgroundColor; /// The text color of the [minLabel] and [maxLabel] widgets. final Color? textColor; /// The height of the linear progress. final double? height; /// The vertical gap between the linear progress and the [minLabel] and /// [maxLabel] widgets. /// /// Has effect only if [showMinLabel] and [showMaxLabel] are true. final double? verticalGap; /// The progress value of the linear progress. final double value; /// The size of the linear progress. final MoonLinearProgressSize? linearProgressSize; /// The styling options for the linear progress pin. final PinStyle? pinStyle; /// The semantic label for the linear progress. final String? semanticLabel; /// The widget to display the minimum progress value of the linear progress. final Widget? minLabel; /// The widget to display the maximum progress value of the linear progress. final Widget? maxLabel; /// Creates a Moon Design linear progress. const MoonLinearProgress({ super.key, this.showPin = false, this.showMinLabel = false, this.showMaxLabel = false, this.pinAffectsHeight = true, this.borderRadius, this.color, this.backgroundColor, this.textColor, this.height, this.verticalGap, required this.value, this.linearProgressSize, this.pinStyle, this.semanticLabel, this.minLabel, this.maxLabel, }); MoonLinearProgressSizeProperties _getMoonProgressSize( BuildContext context, MoonLinearProgressSize? moonProgressSize, ) { switch (moonProgressSize) { case MoonLinearProgressSize.x6s: return context.moonTheme?.linearProgressTheme.sizes.x6s ?? MoonLinearProgressSizes(tokens: MoonTokens.light).x6s; case MoonLinearProgressSize.x5s: return context.moonTheme?.linearProgressTheme.sizes.x5s ?? MoonLinearProgressSizes(tokens: MoonTokens.light).x5s; case MoonLinearProgressSize.x4s: return context.moonTheme?.linearProgressTheme.sizes.x4s ?? MoonLinearProgressSizes(tokens: MoonTokens.light).x4s; case MoonLinearProgressSize.x3s: return context.moonTheme?.linearProgressTheme.sizes.x3s ?? MoonLinearProgressSizes(tokens: MoonTokens.light).x3s; case MoonLinearProgressSize.x2s: return context.moonTheme?.linearProgressTheme.sizes.x2s ?? MoonLinearProgressSizes(tokens: MoonTokens.light).x2s; default: return context.moonTheme?.linearProgressTheme.sizes.x4s ?? MoonLinearProgressSizes(tokens: MoonTokens.light).x4s; } } @override Widget build(BuildContext context) { final MoonLinearProgressSizeProperties effectiveProgressSize = _getMoonProgressSize(context, linearProgressSize); final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? effectiveProgressSize.borderRadius; // This is used to ensure that the corners of the progress bar properly // touch the thumb with bigger bar variants. final BorderRadiusGeometry progressRadius = switch (effectiveBorderRadius) { BorderRadiusDirectional() when showPin == true => BorderRadiusDirectional.only( topStart: effectiveBorderRadius.topStart, bottomStart: effectiveBorderRadius.bottomStart, ), BorderRadius() when showPin == true => BorderRadiusDirectional.only( topStart: effectiveBorderRadius.topLeft, bottomStart: effectiveBorderRadius.bottomLeft, ), _ => effectiveBorderRadius, }; final Color effectiveColor = color ?? context.moonTheme?.linearProgressTheme.colors.color ?? MoonColors.light.piccolo; final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.linearProgressTheme.colors.backgroundColor ?? MoonColors.light.beerus; final Color effectiveTextColor = textColor ?? context.moonTheme?.linearProgressTheme.colors.textColor ?? MoonColors.light.textPrimary; final double effectiveHeight = height ?? effectiveProgressSize.progressHeight; final double effectiveVerticalGap = verticalGap ?? effectiveProgressSize.verticalGap; final double effectiveThumbSizeValue = pinStyle?.thumbSizeValue ?? effectiveProgressSize.thumbSizeValue; final double effectivePinWidth = pinStyle?.pinWidth ?? context.moonTheme?.progressPinTheme.properties.pinWidth ?? 36; final double effectivePinDistance = pinStyle?.pinDistance ?? context.moonTheme?.progressPinTheme.properties.pinDistance ?? MoonSizes.sizes.x5s; final double effectivePinArrowHeight = pinStyle?.arrowHeight ?? context.moonTheme?.progressPinTheme.properties.arrowHeight ?? 6; final TextStyle effectiveTextStyle = effectiveProgressSize.textStyle; final double resolvedPaddingValue = effectiveThumbSizeValue - effectiveHeight > 0 ? effectiveThumbSizeValue / 2 - effectiveHeight / 2 : 0; final double heightWithPin = effectivePinWidth + effectivePinArrowHeight + effectivePinDistance + effectiveThumbSizeValue; Widget child = MoonLinearProgressIndicator( value: value, color: effectiveColor, backgroundColor: effectiveBackgroundColor, containerRadius: effectiveBorderRadius, progressRadius: showPin ? progressRadius : effectiveBorderRadius, minHeight: effectiveHeight, ); if (showPin) { child = MoonProgressPin( progressValue: value, pinText: '${(value * 100).round()}%', pinStyle: pinStyle?.copyWith(thumbSizeValue: effectiveThumbSizeValue), child: child, ); } if (showMinLabel || showMaxLabel) { child = Column( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.end, children: [ Row( mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ if (showMinLabel) Expanded( child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Align( alignment: AlignmentDirectional.centerStart, child: minLabel ?? const Text("0%"), ), ), ), if (showMaxLabel) Expanded( child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: Align( alignment: AlignmentDirectional.centerEnd, child: maxLabel ?? const Text("100%"), ), ), ), ], ), SizedBox(height: effectiveVerticalGap), child, ], ); } if (showPin && pinAffectsHeight) { child = Container( height: heightWithPin, padding: EdgeInsets.only(bottom: resolvedPaddingValue), alignment: Alignment.bottomCenter, child: child, ); } return Semantics( label: semanticLabel, value: "${value * 100}%", child: child, ); } } ================================================ FILE: lib/src/widgets/progress_pin/pin_style.dart ================================================ import 'package:flutter/material.dart'; class PinStyle { /// Whether to show a shadow around the progress pin. final bool? showShadow; /// The color of the progress pin. final Color? pinColor; /// The border color of the progress pin. final Color? pinBorderColor; /// The color of the progress thumb. final Color? thumbColor; /// The shadow color of the progress pin. final Color? shadowColor; /// The height of the progress pin arrow. final double? arrowHeight; /// The width of the progress pin arrow. final double? arrowWidth; /// The size value of the progress thumb. final double? thumbSizeValue; /// The width of the progress pin. final double? pinWidth; /// The border width of the progress pin. final double? pinBorderWidth; /// The vertical distance between the progress pin and the linear progress /// widget. final double? pinDistance; /// The shadow elevation of the progress pin. final double? shadowElevation; /// The text style of the progress pin. final TextStyle? textStyle; /// Defines a Moon Design linear progress pin style. const PinStyle({ this.showShadow = true, this.pinColor, this.pinBorderColor, this.thumbColor, this.shadowColor, this.arrowHeight, this.arrowWidth, this.thumbSizeValue, this.pinWidth, this.pinBorderWidth, this.pinDistance, this.shadowElevation, this.textStyle, }); PinStyle copyWith({ bool? showShadow, Color? pinColor, Color? pinBorderColor, Color? thumbColor, Color? shadowColor, double? arrowHeight, double? arrowWidth, double? thumbSizeValue, double? pinWidth, double? pinBorderWidth, double? pinDistance, double? shadowElevation, TextStyle? textStyle, }) { return PinStyle( showShadow: showShadow ?? this.showShadow, pinColor: pinColor ?? this.pinColor, pinBorderColor: pinBorderColor ?? this.pinBorderColor, thumbColor: thumbColor ?? this.thumbColor, shadowColor: shadowColor ?? this.shadowColor, arrowHeight: arrowHeight ?? this.arrowHeight, arrowWidth: arrowWidth ?? this.arrowWidth, thumbSizeValue: thumbSizeValue ?? this.thumbSizeValue, pinWidth: pinWidth ?? this.pinWidth, pinBorderWidth: pinBorderWidth ?? this.pinBorderWidth, pinDistance: pinDistance ?? this.pinDistance, shadowElevation: shadowElevation ?? this.shadowElevation, textStyle: textStyle ?? this.textStyle, ); } } ================================================ FILE: lib/src/widgets/progress_pin/progress_pin.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/widgets/progress_pin/pin_style.dart'; import 'package:moon_design/src/widgets/progress_pin/progress_pin_painter.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonProgressPin extends StatelessWidget { final double progressValue; final PinStyle? pinStyle; final String pinText; final Widget child; /// Creates a Moon Design progress pin. const MoonProgressPin({ super.key, required this.progressValue, this.pinStyle, required this.pinText, required this.child, }); @override Widget build(BuildContext context) { final Color effectivePinColor = pinStyle?.pinColor ?? context.moonTheme?.progressPinTheme.colors.pinColor ?? MoonColors.light.popo; final Color effectivePinBorderColor = pinStyle?.pinBorderColor ?? context.moonTheme?.progressPinTheme.colors.pinBorderColor ?? MoonColors.light.goten; final Color effectiveThumbColor = pinStyle?.thumbColor ?? context.moonTheme?.progressPinTheme.colors.thumbColor ?? MoonColors.light.goten; final Color effectiveShadowColor = pinStyle?.shadowColor ?? context.moonTheme?.progressPinTheme.colors.shadowColor ?? MoonColors.light.popo; final Color effectiveTextColor = pinStyle?.textStyle?.color ?? context.moonTheme?.progressPinTheme.colors.textColor ?? MoonColors.light.goten; final TextStyle effectiveTextStyle = pinStyle?.textStyle ?? context.moonTheme?.progressPinTheme.properties.textStyle ?? MoonTypography.typography.body.text10; final double effectivePinWidth = pinStyle?.pinWidth ?? context.moonTheme?.progressPinTheme.properties.pinWidth ?? 36; final double effectivePinBorderWidth = pinStyle?.pinBorderWidth ?? context.moonTheme?.progressPinTheme.properties.pinBorderWidth ?? MoonSizes.sizes.x6s; final double effectivePinDistance = pinStyle?.pinDistance ?? context.moonTheme?.progressPinTheme.properties.pinDistance ?? MoonSizes.sizes.x5s; final double effectiveArrowHeight = pinStyle?.arrowHeight ?? context.moonTheme?.progressPinTheme.properties.arrowHeight ?? 6; final double effectiveArrowWidth = pinStyle?.arrowWidth ?? context.moonTheme?.progressPinTheme.properties.arrowWidth ?? MoonSizes.sizes.x4s; final double effectiveShadowElevation = pinStyle?.shadowElevation ?? context.moonTheme?.progressPinTheme.properties.shadowElevation ?? 6; final TextDirection effectiveTextDirection = Directionality.of(context); return CustomPaint( foregroundPainter: ProgressPinPainter( showShadow: pinStyle?.showShadow ?? true, pinColor: effectivePinColor, thumbColor: effectiveThumbColor, shadowColor: effectiveShadowColor, pinBorderColor: effectivePinBorderColor, pinBorderWidth: effectivePinBorderWidth, arrowHeight: effectiveArrowHeight, arrowWidth: effectiveArrowWidth, pinDistance: effectivePinDistance, pinWidth: effectivePinWidth, thumbSizeValue: pinStyle?.thumbSizeValue, progressValue: progressValue, shadowElevation: effectiveShadowElevation, pinText: pinText, textDirection: effectiveTextDirection, textStyle: effectiveTextStyle.copyWith(color: effectiveTextColor), ), child: child, ); } } ================================================ FILE: lib/src/widgets/progress_pin/progress_pin_painter.dart ================================================ import 'package:flutter/material.dart'; class ProgressPinPainter extends CustomPainter { final bool showShadow; final Color pinColor; final Color thumbColor; final Color shadowColor; final Color pinBorderColor; final double arrowHeight; final double arrowWidth; final double pinBorderWidth; final double pinDistance; final double pinWidth; final double? thumbSizeValue; final double progressValue; final double shadowElevation; final String pinText; final TextStyle textStyle; final TextDirection textDirection; const ProgressPinPainter({ required this.showShadow, required this.pinColor, required this.thumbColor, required this.shadowColor, required this.pinBorderColor, required this.pinBorderWidth, required this.arrowHeight, required this.arrowWidth, required this.pinDistance, required this.pinWidth, this.thumbSizeValue, required this.progressValue, required this.shadowElevation, required this.pinText, required this.textStyle, required this.textDirection, }); @override void paint(Canvas canvas, Size size) { final double radius = pinWidth / 2; final double thumbRadius = switch (thumbSizeValue) { _ when thumbSizeValue != null => thumbSizeValue! / 2, _ => size.height / 2, }; final double offsetY = -(radius + arrowHeight + pinDistance) + (size.height / 2 - thumbRadius); // Offset based on directionality. double offsetX = progressValue * size.width; switch (textDirection) { case TextDirection.rtl: offsetX = size.width - progressValue * size.width; case TextDirection.ltr: offsetX = progressValue * size.width; } // Assign colors. final Paint outerCirclePaint = Paint()..color = pinBorderColor; final Paint innerCirclePaint = Paint()..color = pinColor; final Paint thumbCirclePaint = Paint()..color = thumbColor; // Create outer circle with triangle path. final Path path = Path() ..addOval( Rect.fromCircle(center: Offset(offsetX, offsetY), radius: radius), ) ..addOval( Rect.fromCircle(center: Offset(offsetX, offsetY), radius: radius), ) ..moveTo( offsetX - arrowWidth / 2, offsetY + radius - 0.5, ) // shift the origin "up" by 0.5 to avoid aliasing ..lineTo(offsetX, offsetY + radius + arrowHeight) ..lineTo( offsetX + arrowWidth / 2, offsetY + radius - 0.5, ) // shift the destination "up" by 0.5 to avoid aliasing ..close(); // Draw shadow around outer path. if (showShadow) { canvas.drawShadow(path, shadowColor, shadowElevation, false); } // Draw outer path. canvas.drawPath(path, outerCirclePaint); // Draw inner circle. canvas.drawCircle( Offset(offsetX, offsetY), radius - pinBorderWidth, innerCirclePaint, ); // Draw thumb. canvas.drawCircle( Offset(offsetX, size.height / 2), thumbRadius, thumbCirclePaint, ); // Draw pin text. final TextPainter pinTextPainter = TextPainter( text: TextSpan(text: pinText, style: textStyle), textDirection: textDirection, ); pinTextPainter.layout(); pinTextPainter.paint( canvas, Offset( offsetX - pinTextPainter.width / 2, offsetY - pinTextPainter.height / 2, ), ); } @override bool shouldRepaint(ProgressPinPainter oldPainter) { return oldPainter.progressValue != progressValue || oldPainter.pinWidth != pinWidth || oldPainter.pinBorderWidth != pinBorderWidth || oldPainter.pinColor != pinColor || oldPainter.pinBorderColor != pinBorderColor || oldPainter.pinDistance != pinDistance || oldPainter.thumbColor != thumbColor || oldPainter.thumbSizeValue != thumbSizeValue || oldPainter.showShadow != showShadow || oldPainter.shadowColor != shadowColor || oldPainter.shadowElevation != shadowElevation || oldPainter.textDirection != textDirection; } } ================================================ FILE: lib/src/widgets/radio/radio.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/touch_target_padding.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_design/src/widgets/radio/radio_painter.dart'; import 'package:moon_tokens/moon_tokens.dart'; class MoonRadio extends StatefulWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Set to true if this radio button is allowed to be returned to an /// indeterminate state by selecting it again when selected. /// /// To indicate returning to an indeterminate state, [onChanged] is called /// with null. /// /// If true, [onChanged] is called with [value] when selected while /// [groupValue] != [value], or with null when selected again while /// [groupValue] == [value]. /// /// If false, [onChanged] is called with [value] when selected while /// [groupValue] != [value], and only by selecting another radio button in the /// group (i.e. changing the value of [groupValue]) can this radio button be /// unselected. final bool toggleable; /// The color of the active (selected) radio button. final Color? activeColor; /// The background color of the inactive (unselected) radio button. final Color? inactiveColor; /// The size of the radio button tap target. /// /// Defaults to 40. final double tapAreaSizeValue; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The semantic label for the radio button. final String? semanticLabel; /// The value of the radio button. final T value; /// The value of a group of radio buttons. /// /// This radio button is considered selected if its [value] matches the /// [groupValue]. final T? groupValue; /// The callback that is called when the user selects the radio button. /// /// The radio button passes its [value] as a parameter to [onChanged] /// callback. The radio button does not actually change state until the parent /// widget rebuilds the radio button with the new [groupValue]. /// /// If null, the radio button is displayed as disabled. /// /// The provided callback is not invoked if this radio button is already /// selected. /// /// The callback provided to [onChanged] should update the state of the parent /// [StatefulWidget] using the [State.setState] method, so that the parent /// gets rebuilt. final ValueChanged? onChanged; /// Creates a Moon Design radio button. const MoonRadio({ super.key, this.autofocus = false, this.toggleable = false, this.activeColor, this.inactiveColor, this.tapAreaSizeValue = 40, this.focusNode, this.semanticLabel, required this.value, required this.groupValue, required this.onChanged, }); bool get _selected => value == groupValue; @override State> createState() => _RadioState(); } class _RadioState extends State> with TickerProviderStateMixin, ToggleableStateMixin { final MoonRadioPainter _painter = MoonRadioPainter(); void _handleChanged(bool? selected) { if (selected == null) { widget.onChanged!(null); return; } if (selected) { widget.onChanged!(widget.value); } } @override void didUpdateWidget(MoonRadio oldWidget) { super.didUpdateWidget(oldWidget); if (widget._selected != oldWidget._selected) animateToValue(); } @override void dispose() { _painter.dispose(); super.dispose(); } @override ValueChanged? get onChanged => widget.onChanged != null ? _handleChanged : null; @override bool get tristate => widget.toggleable; @override bool? get value => widget._selected; @override Widget build(BuildContext context) { const Size size = Size(16, 16); final Color effectiveActiveColor = widget.activeColor ?? context.moonTheme?.radioTheme.colors.activeColor ?? MoonColors.light.piccolo; final Color effectiveInactiveColor = widget.inactiveColor ?? context.moonTheme?.radioTheme.colors.inactiveColor ?? MoonColors.light.trunks; final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectColor; final double effectiveFocusEffectExtent = context.moonEffects?.controlFocusEffect.effectExtent ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectExtent; final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectDuration; final Curve effectiveFocusEffectCurve = context.moonEffects?.controlFocusEffect.effectCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectCurve; final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final MaterialStateProperty effectiveMouseCursor = MaterialStateProperty.resolveWith( (Set states) { return MaterialStateMouseCursor.clickable.resolve(states); }); return Semantics( label: widget.semanticLabel, inMutuallyExclusiveGroup: true, checked: widget._selected, child: TouchTargetPadding( minSize: Size(widget.tapAreaSizeValue, widget.tapAreaSizeValue), child: MoonFocusEffect( show: states.contains(MaterialState.focused), effectExtent: effectiveFocusEffectExtent, childBorderRadius: BorderRadius.circular(8), effectColor: effectiveFocusEffectColor, effectCurve: effectiveFocusEffectCurve, effectDuration: effectiveFocusEffectDuration, child: RepaintBoundary( child: AnimatedOpacity( opacity: states.contains(MaterialState.disabled) ? effectiveDisabledOpacityValue : 1, duration: effectiveFocusEffectDuration, child: buildToggleable( focusNode: widget.focusNode, autofocus: widget.autofocus, mouseCursor: effectiveMouseCursor, size: size, painter: _painter ..position = position ..activeColor = effectiveActiveColor ..inactiveColor = effectiveInactiveColor, ), ), ), ), ), ); } } ================================================ FILE: lib/src/widgets/radio/radio_painter.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/color_premul_lerp.dart'; class MoonRadioPainter extends ToggleablePainter { static const double _kOuterRadius = 8.0; static const double _kInnerRadius = 4.0; @override void paint(Canvas canvas, Size size) { final Offset center = (Offset.zero & size).center; // Outer circle. final Paint paint = Paint() ..color = colorPremulLerp(inactiveColor, activeColor, position.value)! ..style = PaintingStyle.stroke ..strokeWidth = 1.0; canvas.drawCircle(center, _kOuterRadius, paint); // Inner circle. if (!position.isDismissed) { paint.style = PaintingStyle.fill; canvas.drawCircle(center, _kInnerRadius * position.value, paint); } } } ================================================ FILE: lib/src/widgets/segmented_control/segment.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/segmented_control/segment_style.dart'; class Segment { /// {@macro flutter.widgets.Focus.autofocus} final bool autoFocus; /// Whether the segment is focusable. final bool isFocusable; /// Whether to show a focus outline effect when the segment is focused. final bool showFocusEffect; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The styling options for the segment. final SegmentStyle? segmentStyle; /// The semantic label for the segment. final String? semanticLabel; /// The callback that returns the current selection status of the segment as a /// boolean value. final ValueChanged? isSelected; /// The widget to display before the [label] widget of the segment. final Widget? leading; /// The primary content of the segment widget. final Widget? label; /// The widget to display after the [label] widget of the segment. final Widget? trailing; /// Creates a Moon Design segment. const Segment({ this.autoFocus = false, this.isFocusable = true, this.showFocusEffect = true, this.focusNode, this.segmentStyle, this.semanticLabel, this.isSelected, this.leading, this.label, this.trailing, }); } ================================================ FILE: lib/src/widgets/segmented_control/segment_style.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/segmented_control/segment.dart'; class SegmentStyle { /// The border radius of the segment. final BorderRadiusGeometry? segmentBorderRadius; /// The color of the segment focus effect. final Color? focusEffectColor; /// The color of the selected segment. final Color? selectedSegmentColor; /// The default text color of the segment. final Color? textColor; /// The text color of the selected segment. final Color? selectedTextColor; /// The custom decoration of the segment. final Decoration? decoration; /// The gap between the [Segment.leading], [Segment.label] and /// [Segment.trailing] widgets of the segment. final double? segmentGap; /// The padding of the segment. final EdgeInsetsGeometry? segmentPadding; /// The text style of the segment. /// /// If [TextStyle] color is used, then it overrides the [textColor] and /// [selectedTextColor]. final TextStyle? textStyle; /// Defines a Moon Design segment style. const SegmentStyle({ this.segmentBorderRadius, this.focusEffectColor, this.selectedSegmentColor, this.textColor, this.selectedTextColor, this.decoration, this.segmentGap, this.segmentPadding, this.textStyle, }); } ================================================ FILE: lib/src/widgets/segmented_control/segmented_control.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_size_properties.dart'; import 'package:moon_design/src/theme/segmented_control/segmented_control_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; import 'package:moon_design/src/widgets/common/base_segmented_tab_bar.dart'; import 'package:moon_design/src/widgets/segmented_control/segment.dart'; import 'package:moon_design/src/widgets/segmented_control/segment_style.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonSegmentedControlSize { sm, md, } typedef MoonCustomSegmentBuilder = Widget Function( BuildContext context, bool isSelected, ); class MoonSegmentedControl extends StatefulWidget { /// Whether the segmented control is disabled. final bool isDisabled; /// Whether the segmented control is expanded to its full available /// width horizontally. final bool isExpanded; /// The border radius of the segmented control. final BorderRadiusGeometry? borderRadius; /// The background color of the segmented control. final Color? backgroundColor; /// The gap between the segmented control segments. final double? gap; /// The height of the segmented control. final double? height; /// The width of the segmented control. final double? width; /// The duration of the segmented control transition animation. final Duration? transitionDuration; /// The curve of the segmented control transition animation. final Curve? transitionCurve; /// The padding of the segmented control. final EdgeInsetsGeometry? padding; /// The index of the initially selected segment. /// This property is overridden by the [tabController]'s initial index if the /// [tabController] is provided. For external updates to the segment index, /// use [tabController]. final int initialIndex; /// The size of the segmented control. final MoonSegmentedControlSize? segmentedControlSize; /// The custom decoration of the segmented control. final Decoration? decoration; /// The external controller for managing segment selection and animation in /// segmented control. If tabController is provided, then [initialIndex] is /// ignored and tabController's index is used instead. final TabController? tabController; /// The callback that returns the index of the currently selected segment. final ValueChanged? onSegmentChanged; /// The list of segments to display as the children of the segmented control. /// At least one child is required when this property is used. Cannot be used /// in conjunction with the [customSegments] property, one of them must be /// null. final List? segments; /// The list of custom segments to display as the children of the segmented /// control. At least one child is required when this property is used. Cannot /// be used in conjunction with the [segments] property, one of them must be /// null. final List? customSegments; /// Creates a Moon Design segmented control. /// /// See also: /// /// * [MoonSegmentedControl.custom], Moon Design custom segmented control. const MoonSegmentedControl({ super.key, this.isDisabled = false, this.isExpanded = false, this.borderRadius, this.backgroundColor, this.gap, this.height, this.width, this.transitionDuration, this.transitionCurve, this.padding, this.initialIndex = 0, this.segmentedControlSize, this.decoration, this.tabController, this.onSegmentChanged, required this.segments, }) : assert(height == null || height > 0), assert(segments != null && segments.length > 0), customSegments = null; /// Creates a Moon Design custom segmented control. const MoonSegmentedControl.custom({ super.key, this.isDisabled = false, this.isExpanded = false, this.borderRadius, this.backgroundColor, this.gap, this.height, this.width, this.transitionDuration, this.transitionCurve, this.padding, this.initialIndex = 0, this.segmentedControlSize, this.decoration, this.tabController, this.onSegmentChanged, required this.customSegments, }) : assert(height == null || height > 0), assert(customSegments != null && customSegments.length > 0), segments = null; @override State createState() => _MoonSegmentedControlState(); } class _MoonSegmentedControlState extends State { late final bool _hasDefaultSegments = widget.segments != null; late int _selectedIndex = widget.tabController?.index ?? widget.initialIndex; MoonSegmentedControlSizeProperties _getMoonSegmentedControlSize( BuildContext context, MoonSegmentedControlSize? segmentedControlSize, ) { switch (segmentedControlSize) { case MoonSegmentedControlSize.sm: return context.moonTheme?.segmentedControlTheme.sizes.sm ?? MoonSegmentedControlSizes(tokens: MoonTokens.light).sm; case MoonSegmentedControlSize.md: return context.moonTheme?.segmentedControlTheme.sizes.md ?? MoonSegmentedControlSizes(tokens: MoonTokens.light).md; default: return context.moonTheme?.segmentedControlTheme.sizes.md ?? MoonSegmentedControlSizes(tokens: MoonTokens.light).md; } } void _updateSegmentsSelectedStatus() { if (_hasDefaultSegments) { widget.segments?.asMap().forEach((int index, Segment segment) { segment.isSelected?.call(index == _selectedIndex); }); } else { widget.customSegments?.asMap().forEach( (int index, Widget Function(BuildContext, bool) customSegment) { customSegment.call(context, index == _selectedIndex); }); } } void _handleSegmentChange() { final int animationValue = widget.tabController?.animation?.value.round() ?? 0; if (animationValue != _selectedIndex) { setState(() { _selectedIndex = animationValue; widget.onSegmentChanged?.call(animationValue); _updateSegmentsSelectedStatus(); }); } } @override void initState() { super.initState(); _updateSegmentsSelectedStatus(); widget.tabController?.animation?.addListener(_handleSegmentChange); } @override void dispose() { widget.tabController?.animation?.removeListener(_handleSegmentChange); super.dispose(); } @override Widget build(BuildContext context) { final MoonSegmentedControlSizeProperties effectiveMoonSegmentControlSize = _getMoonSegmentedControlSize(context, widget.segmentedControlSize); final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.segmentedControlTheme.properties.borderRadius ?? MoonBorders.borders.interactiveMd; final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.segmentedControlTheme.colors.backgroundColor ?? MoonColors.light.gohan; final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final double effectiveHeight = widget.height ?? effectiveMoonSegmentControlSize.height; final double effectiveGap = widget.gap ?? context.moonTheme?.segmentedControlTheme.properties.gap ?? MoonSizes.sizes.x5s; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context .moonTheme?.segmentedControlTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.segmentedControlTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; final EdgeInsetsGeometry effectivePadding = widget.padding ?? context.moonTheme?.segmentedControlTheme.properties.padding ?? const EdgeInsets.all(4); return AnimatedOpacity( opacity: widget.isDisabled ? effectiveDisabledOpacityValue : 1, duration: effectiveTransitionDuration, child: Container( height: effectiveHeight, width: widget.width, padding: effectivePadding, constraints: BoxConstraints(minWidth: effectiveHeight), decoration: widget.decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), ), ), child: BaseSegmentedTabBar( gap: effectiveGap, isExpanded: widget.isExpanded, tabController: widget.tabController, valueChanged: (int newIndex) { if (_selectedIndex == newIndex) return; if (widget.isDisabled) return; setState(() { _selectedIndex = newIndex; if (widget.tabController == null) { widget.onSegmentChanged?.call(newIndex); _updateSegmentsSelectedStatus(); } }); }, children: _hasDefaultSegments ? List.generate( widget.segments!.length, (int index) { return _SegmentBuilder( isDisabled: widget.isDisabled, transitionDuration: effectiveTransitionDuration, transitionCurve: effectiveTransitionCurve, isSelected: index == _selectedIndex, backgroundColor: effectiveBackgroundColor, moonSegmentedControlSizeProperties: effectiveMoonSegmentControlSize, segment: widget.segments![index], ); }, ) : List.generate( widget.customSegments!.length, (int index) { return widget.customSegments![index]( context, index == _selectedIndex, ); }, ), ), ), ); } } class _SegmentBuilder extends StatefulWidget { final bool isDisabled; final bool isSelected; final Color backgroundColor; final Duration transitionDuration; final Curve transitionCurve; final MoonSegmentedControlSizeProperties moonSegmentedControlSizeProperties; final Segment segment; const _SegmentBuilder({ required this.isDisabled, required this.isSelected, required this.backgroundColor, required this.transitionDuration, required this.transitionCurve, required this.moonSegmentedControlSizeProperties, required this.segment, }); @override State<_SegmentBuilder> createState() => _SegmentBuilderState(); } class _SegmentBuilderState extends State<_SegmentBuilder> with SingleTickerProviderStateMixin { final ColorTweenWithPremultipliedAlpha _segmentColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _textColorTween = ColorTweenWithPremultipliedAlpha(); Animation? _segmentColor; Animation? _textColor; AnimationController? _animationController; void _handleActiveEffect(bool isActive) { isActive ? _animationController?.forward() : _animationController?.reverse(); } @override void initState() { super.initState(); _animationController = AnimationController(duration: widget.transitionDuration, vsync: this); if (widget.isSelected) _animationController?.value = 1; } @override void dispose() { _animationController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final SegmentStyle? segmentStyle = widget.segment.segmentStyle; final BorderRadiusGeometry effectiveSegmentBorderRadius = segmentStyle?.segmentBorderRadius ?? widget.moonSegmentedControlSizeProperties.segmentBorderRadius; final Color effectiveSelectedSegmentColor = segmentStyle ?.selectedSegmentColor ?? context.moonTheme?.segmentedControlTheme.colors.selectedSegmentColor ?? MoonColors.light.goku; final Color effectiveTextColor = segmentStyle?.textStyle?.color ?? segmentStyle?.textColor ?? context.moonTheme?.segmentedControlTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveSelectedTextColor = segmentStyle?.selectedTextColor ?? context.moonTheme?.segmentedControlTheme.colors.selectedTextColor ?? MoonColors.light.piccolo; final TextStyle effectiveTextStyle = widget .moonSegmentedControlSizeProperties.textStyle .merge(segmentStyle?.textStyle); final double effectiveSegmentGap = segmentStyle?.segmentGap ?? widget.moonSegmentedControlSizeProperties.segmentGap; final EdgeInsetsGeometry effectiveSegmentPadding = segmentStyle?.segmentPadding ?? widget.moonSegmentedControlSizeProperties.segmentPadding; final EdgeInsets resolvedDirectionalPadding = effectiveSegmentPadding.resolve(Directionality.of(context)); final EdgeInsetsGeometry correctedSegmentPadding = segmentStyle?.segmentPadding == null ? EdgeInsetsDirectional.fromSTEB( widget.segment.leading == null && widget.segment.label != null ? resolvedDirectionalPadding.left : 0, resolvedDirectionalPadding.top, widget.segment.trailing == null && widget.segment.label != null ? resolvedDirectionalPadding.right : 0, resolvedDirectionalPadding.bottom, ) : resolvedDirectionalPadding; _segmentColor ??= _animationController!.drive( _segmentColorTween.chain(CurveTween(curve: widget.transitionCurve)), ); _textColor ??= _animationController!.drive( _textColorTween.chain(CurveTween(curve: widget.transitionCurve)), ); _segmentColorTween.end = effectiveSelectedSegmentColor; _textColorTween ..begin = effectiveTextColor ..end = effectiveSelectedTextColor; return MoonBaseControl( onLongPress: widget.isDisabled ? null : () => {}, autofocus: widget.segment.autoFocus, focusNode: widget.segment.focusNode, isFocusable: widget.segment.isFocusable, showFocusEffect: widget.segment.showFocusEffect, focusEffectColor: segmentStyle?.focusEffectColor, semanticLabel: widget.segment.semanticLabel, borderRadius: effectiveSegmentBorderRadius.squircleBorderRadius(context), cursor: widget.isSelected ? SystemMouseCursors.basic : SystemMouseCursors.click, builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { final bool isActive = isEnabled && (widget.isSelected || isHovered || isPressed); _handleActiveEffect(isActive); return AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return DecoratedBox( decoration: segmentStyle?.decoration ?? ShapeDecoration( color: _segmentColor!.value, shape: MoonSquircleBorder( borderRadius: effectiveSegmentBorderRadius .squircleBorderRadius(context), ), ), child: IconTheme( data: IconThemeData( size: widget.moonSegmentedControlSizeProperties.iconSizeValue, color: _textColor!.value, ), child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: _textColor!.value), child: child!, ), ), ); }, child: Center( child: Padding( padding: correctedSegmentPadding, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ if (widget.segment.leading != null) Padding( padding: EdgeInsets.symmetric(horizontal: effectiveSegmentGap), child: widget.segment.leading, ), if (widget.segment.label != null) widget.segment.label!, if (widget.segment.trailing != null) Padding( padding: EdgeInsets.symmetric(horizontal: effectiveSegmentGap), child: widget.segment.trailing, ), ], ), ), ), ); }, ); } } ================================================ FILE: lib/src/widgets/switch/switch.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:moon_design/src/theme/effects/effects_theme.dart'; import 'package:moon_design/src/theme/switch/switch_size_properties.dart'; import 'package:moon_design/src/theme/switch/switch_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/utils/squircle/squircle_border_radius.dart'; import 'package:moon_design/src/widgets/common/effects/focus_effect.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonSwitchSize { x2s, xs, sm, } class MoonSwitch extends StatefulWidget { /// {@macro flutter.widgets.Focus.autofocus} final bool autofocus; /// Whether to use haptic feedback (vibration) when the switch is toggled. final bool hasHapticFeedback; /// Whether the switch is in active (on) state. final bool value; /// The background color of the active (on) switch track. final Color? activeTrackColor; /// The background color of the inactive (off) switch track. final Color? inactiveTrackColor; /// The color of the switch thumb. final Color? thumbColor; /// The height of the switch. final double? height; /// The width of the switch. final double? width; /// The size of the switch thumb. final double? thumbSizeValue; /// The duration of the switch toggle animation. final Duration? duration; /// The curve of the switch toggle animation. final Curve? curve; /// The padding of the switch. final EdgeInsetsGeometry? padding; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The size of the switch. final MoonSwitchSize? switchSize; /// The semantic label for the switch. final String? semanticLabel; /// The callback that is called when the switch toggles between the /// active (on) and inactive (off) states. final ValueChanged? onChanged; /// The widget to display on the left side of the switch track when the switch /// is active (on). final Widget? activeTrackWidget; /// The widget to display on the right side of the switch track when the /// switch is inactive (off). final Widget? inactiveTrackWidget; /// The widget to display inside the thumb when the switch is active (on). final Widget? activeThumbWidget; /// The widget to display inside the thumb when the switch is inactive (off). final Widget? inactiveThumbWidget; /// Creates a Moon Design switch. const MoonSwitch({ super.key, this.autofocus = false, this.hasHapticFeedback = true, required this.value, this.activeTrackColor, this.inactiveTrackColor, this.thumbColor, this.height, this.width, this.thumbSizeValue, this.duration, this.curve, this.padding, this.focusNode, this.switchSize, this.semanticLabel, this.onChanged, this.activeTrackWidget, this.inactiveTrackWidget, this.activeThumbWidget, this.inactiveThumbWidget, }); @override _MoonSwitchState createState() => _MoonSwitchState(); } class _MoonSwitchState extends State with SingleTickerProviderStateMixin { late final Map> _actions = { ActivateIntent: CallbackAction(onInvoke: (_) => _handleTap()), }; late Animation? _alignmentAnimation; late Animation? _trackDecorationAnimation; AnimationController? _animationController; Animation? _thumbFadeAnimation; Animation? _activeTrackWidgetFadeAnimation; Animation? _inactiveTrackWidgetFadeAnimation; CurvedAnimation? _curvedAnimation; CurvedAnimation? _curvedAnimationWithOvershoot; bool _isFocused = false; // Whether to animate the switch to its new position (based on widget value) // using _curvedAnimationWithOvershoot after a drag ends. // Changes to true at the end of a drag. bool _needsPositionAnimation = false; bool get _isInteractive => widget.onChanged != null; MoonSwitchSizeProperties _getMoonSwitchSize( BuildContext context, MoonSwitchSize? moonSwitchSize, ) { switch (moonSwitchSize) { case MoonSwitchSize.x2s: return context.moonTheme?.switchTheme.sizes.x2s ?? MoonSwitchSizes(tokens: MoonTokens.light).x2s; case MoonSwitchSize.xs: return context.moonTheme?.switchTheme.sizes.xs ?? MoonSwitchSizes(tokens: MoonTokens.light).xs; case MoonSwitchSize.sm: return context.moonTheme?.switchTheme.sizes.sm ?? MoonSwitchSizes(tokens: MoonTokens.light).sm; default: return context.moonTheme?.switchTheme.sizes.xs ?? MoonSwitchSizes(tokens: MoonTokens.light).xs; } } // The `isLinear` flag is set to true when the `_curvedAnimationWithOvershoot` // animation attempts to move the thumb to the closest end after the most // recent drag animation. This ensures that the curve remains unchanged when // the controller's value is not 0 or 1. // It can be set to false when it's an implicit animation triggered by changes // in widget.value. void _resumePositionAnimation({bool isLinear = true}) { _needsPositionAnimation = false; _curvedAnimationWithOvershoot! ..curve = isLinear ? Curves.linear : Curves.ease ..reverseCurve = isLinear ? Curves.linear : Curves.ease.flipped; widget.value ? _animationController!.forward() : _animationController!.reverse(); } void _handleFocus(bool focus) { if (focus != _isFocused) { setState(() => _isFocused = focus); } } void _handleFocusChange(bool hasFocus) { setState(() => _isFocused = hasFocus); } void _handleTapDown(TapDownDetails details) { if (_isInteractive) { _needsPositionAnimation = false; } } void _handleTap() { if (_isInteractive) { widget.onChanged!(!widget.value); _emitVibration(); } } void _handleTapUp(TapUpDetails details) { if (_isInteractive) { _needsPositionAnimation = false; } } void _handleDragStart(DragStartDetails details) { if (_isInteractive) { _needsPositionAnimation = false; _emitVibration(); } } void _handleDragUpdate({ required DragUpdateDetails details, required double switchWidth, required double thumbSizeValue, required EdgeInsets padding, }) { if (_isInteractive) { _curvedAnimationWithOvershoot! ..curve = Curves.linear ..reverseCurve = Curves.linear; switch (Directionality.of(context)) { case TextDirection.rtl: _animationController!.value += -details.primaryDelta! / (switchWidth - (thumbSizeValue + padding.right + padding.left)); case TextDirection.ltr: _animationController!.value += details.primaryDelta! / (switchWidth - (thumbSizeValue + padding.right + padding.left)); } } } void _handleDragEnd(DragEndDetails details) { // Deferring the animation to the next build phase. setState(() => _needsPositionAnimation = true); // Trigger onChanged when the user's intent to change the value is evident. if (_curvedAnimationWithOvershoot!.value >= 0.5 != widget.value) { widget.onChanged!(!widget.value); } } void _emitVibration() { if (widget.hasHapticFeedback) HapticFeedback.lightImpact(); } @override void didUpdateWidget(MoonSwitch oldWidget) { super.didUpdateWidget(oldWidget); if (_needsPositionAnimation || oldWidget.value != widget.value) { _resumePositionAnimation(isLinear: _needsPositionAnimation); } if (_curvedAnimationWithOvershoot!.value == 0.0 || _curvedAnimationWithOvershoot!.value == 1.0) { _curvedAnimationWithOvershoot! ..curve = Curves.easeOutBack ..reverseCurve = Curves.easeOutBack.flipped; } } @override void dispose() { _animationController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { if (_needsPositionAnimation) _resumePositionAnimation(); final MoonSwitchSizeProperties effectiveMoonSwitchSize = _getMoonSwitchSize(context, widget.switchSize); final Color effectiveActiveTrackColor = widget.activeTrackColor ?? context.moonTheme?.switchTheme.colors.activeTrackColor ?? MoonColors.light.piccolo; final Color effectiveInactiveTrackColor = widget.inactiveTrackColor ?? context.moonTheme?.switchTheme.colors.inactiveTrackColor ?? MoonColors.light.beerus; final Color effectiveThumbColor = widget.thumbColor ?? context.moonTheme?.switchTheme.colors.thumbColor ?? MoonColors.light.goten; final double effectiveHeight = widget.height ?? effectiveMoonSwitchSize.height; final double effectiveWidth = widget.width ?? effectiveMoonSwitchSize.width; final double effectiveThumbSizeValue = widget.thumbSizeValue ?? effectiveMoonSwitchSize.thumbSizeValue; final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final EdgeInsetsGeometry effectivePadding = widget.padding ?? effectiveMoonSwitchSize.padding; final EdgeInsets resolvedDirectionalPadding = effectivePadding.resolve(Directionality.of(context)); final BorderRadiusGeometry effectiveBorderRadius = BorderRadius.circular(effectiveThumbSizeValue / 2); final List effectiveThumbShadow = context.moonTheme?.switchTheme.shadows.thumbShadows ?? MoonShadows.light.sm; final Duration effectiveDuration = widget.duration ?? context.moonTheme?.switchTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.curve ?? context.moonTheme?.switchTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; final double effectiveFocusEffectExtent = context.moonEffects?.controlFocusEffect.effectExtent ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectExtent; final Color effectiveFocusEffectColor = context.moonEffects?.controlFocusEffect.effectColor ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectColor; final Duration effectiveFocusEffectDuration = context.moonEffects?.controlFocusEffect.effectDuration ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectDuration; final Curve effectiveFocusEffectCurve = context.moonEffects?.controlFocusEffect.effectCurve ?? MoonEffectsTheme(tokens: MoonTokens.light) .controlFocusEffect .effectCurve; _animationController ??= AnimationController( vsync: this, value: widget.value ? 1.0 : 0.0, duration: effectiveDuration, ); _curvedAnimation ??= CurvedAnimation( parent: _animationController!, curve: effectiveTransitionCurve, ); _curvedAnimationWithOvershoot ??= CurvedAnimation( parent: _animationController!, curve: effectiveTransitionCurve, ); _alignmentAnimation = AlignmentTween( begin: Directionality.of(context) == TextDirection.ltr ? Alignment.centerLeft : Alignment.centerRight, end: Directionality.of(context) == TextDirection.ltr ? Alignment.centerRight : Alignment.centerLeft, ).animate(_curvedAnimationWithOvershoot!); _trackDecorationAnimation = DecorationTween( begin: ShapeDecorationWithPremultipliedAlpha( color: effectiveInactiveTrackColor, shape: MoonSquircleBorder( borderRadius: MoonSquircleBorderRadius( cornerRadius: effectiveHeight / 2, ), ), ), end: ShapeDecorationWithPremultipliedAlpha( color: effectiveActiveTrackColor, shape: MoonSquircleBorder( borderRadius: MoonSquircleBorderRadius( cornerRadius: effectiveHeight / 2, ), ), ), ).animate(_curvedAnimation!); _thumbFadeAnimation ??= TweenSequence([ TweenSequenceItem( tween: Tween(begin: 1.0, end: 0.0), weight: 50.0, ), TweenSequenceItem( tween: Tween(begin: 0.0, end: 1.0), weight: 50.0, ), ]).animate(_curvedAnimation!); _activeTrackWidgetFadeAnimation ??= Tween(begin: 0.0, end: 1.0).animate( CurvedAnimation( parent: _animationController!, curve: const Interval(0.7, 1.0), ), ); _inactiveTrackWidgetFadeAnimation ??= Tween(begin: 1.0, end: 0.0).animate( CurvedAnimation( parent: _animationController!, curve: const Interval(0.0, 0.3), ), ); final Color effectiveActiveTextColor = context.moonTheme?.switchTheme.colors.activeTextColor ?? MoonTokens.dark.colors.textPrimary; final Color effectiveInactiveTextColor = context.moonTheme?.switchTheme.colors.inactiveTextColor ?? MoonColors.light.textPrimary; final Color effectiveActiveIconColor = context.moonTheme?.switchTheme.colors.activeIconColor ?? MoonTokens.dark.colors.iconPrimary; final Color effectiveInactiveIconColor = context.moonTheme?.switchTheme.colors.inactiveIconColor ?? MoonColors.light.iconPrimary; final Color effectiveThumbIconColor = context.moonTheme?.switchTheme.colors.thumbIconColor ?? MoonColors.light.iconPrimary; return Semantics( label: widget.semanticLabel, toggled: widget.value, child: FocusableActionDetector( enabled: _isInteractive, actions: _actions, autofocus: widget.autofocus, focusNode: widget.focusNode, onFocusChange: _handleFocusChange, onShowFocusHighlight: _handleFocus, mouseCursor: _isInteractive ? SystemMouseCursors.click : SystemMouseCursors.basic, child: GestureDetector( excludeFromSemantics: true, onTap: _handleTap, onTapDown: _handleTapDown, onTapUp: _handleTapUp, onHorizontalDragStart: _handleDragStart, onHorizontalDragUpdate: (DragUpdateDetails details) => _handleDragUpdate( details: details, switchWidth: effectiveWidth, thumbSizeValue: effectiveThumbSizeValue, padding: resolvedDirectionalPadding, ), onHorizontalDragEnd: _handleDragEnd, child: RepaintBoundary( child: AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return AnimatedOpacity( opacity: _isInteractive ? 1 : effectiveDisabledOpacityValue, duration: effectiveDuration, curve: effectiveTransitionCurve, child: SizedBox( width: effectiveWidth, height: effectiveHeight, child: DecoratedBoxTransition( decoration: _trackDecorationAnimation!, child: Padding( padding: resolvedDirectionalPadding, child: Stack( alignment: Alignment.center, children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: [ IconTheme( data: IconThemeData( color: effectiveActiveIconColor, size: effectiveMoonSwitchSize.iconSizeValue, ), child: DefaultTextStyle( style: effectiveMoonSwitchSize.textStyle .copyWith( color: effectiveActiveTextColor, ), child: Expanded( child: FadeTransition( opacity: _activeTrackWidgetFadeAnimation!, child: widget.activeTrackWidget ?? const SizedBox.shrink(), ), ), ), ), SizedBox( width: resolvedDirectionalPadding.left, ), IconTheme( data: IconThemeData( color: effectiveInactiveIconColor, size: effectiveMoonSwitchSize.iconSizeValue, ), child: DefaultTextStyle( style: effectiveMoonSwitchSize.textStyle .copyWith( color: effectiveInactiveTextColor, ), child: Expanded( child: FadeTransition( opacity: _inactiveTrackWidgetFadeAnimation!, child: widget.inactiveTrackWidget ?? const SizedBox.shrink(), ), ), ), ), ], ), Align( alignment: _alignmentAnimation!.value, child: IconTheme( data: IconThemeData( color: effectiveThumbIconColor, size: effectiveMoonSwitchSize.iconSizeValue, ), child: DefaultTextStyle( style: effectiveMoonSwitchSize.textStyle .copyWith( color: effectiveInactiveTextColor, ), child: MoonFocusEffect( show: _isFocused, effectColor: effectiveFocusEffectColor, childBorderRadius: effectiveBorderRadius, effectExtent: effectiveFocusEffectExtent, effectDuration: effectiveFocusEffectDuration, effectCurve: effectiveFocusEffectCurve, child: Container( width: effectiveThumbSizeValue, height: effectiveThumbSizeValue, alignment: Alignment.center, decoration: ShapeDecorationWithPremultipliedAlpha( color: effectiveThumbColor, shadows: effectiveThumbShadow, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius .squircleBorderRadius(context), ), ), child: FadeTransition( opacity: _thumbFadeAnimation!, child: _curvedAnimation!.value > 0.5 ? widget.activeThumbWidget : widget.inactiveThumbWidget, ), ), ), ), ), ), ], ), ), ), ), ); }, ), ), ), ), ); } } ================================================ FILE: lib/src/widgets/tab_bar/pill_tab.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/tab_bar/pill_tab_style.dart'; class MoonPillTab { /// Whether the tab is disabled. final bool disabled; /// {@macro flutter.widgets.Focus.autofocus} final bool autoFocus; /// Whether the tab is focusable. final bool isFocusable; /// Whether to show a focus outline effect when the tab is focused. final bool showFocusEffect; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The styling options for the tab. final MoonPillTabStyle? tabStyle; /// The semantic label for the tab. final String? semanticLabel; /// The callback that returns the current selection status of the tab as a /// boolean value. final ValueChanged? isSelected; /// The widget to display before the [label] widget of the tab. final Widget? leading; /// The primary content of the tab widget. final Widget? label; /// The widget to display after the [label] widget of the tab. final Widget? trailing; /// Creates a Moon Design pill tab. const MoonPillTab({ this.disabled = false, this.autoFocus = false, this.isFocusable = true, this.showFocusEffect = true, this.focusNode, this.tabStyle, this.semanticLabel, this.isSelected, this.leading, this.label, this.trailing, }); } ================================================ FILE: lib/src/widgets/tab_bar/pill_tab_style.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/tab_bar/pill_tab.dart'; class MoonPillTabStyle { /// The border radius of the tab. final BorderRadiusGeometry? borderRadius; /// The color of the tab focus effect. final Color? focusEffectColor; /// The color of the selected tab. final Color? selectedTabColor; /// The default text color of the tab. final Color? textColor; /// The text color of the selected tab. final Color? selectedTextColor; /// The custom decoration of the tab. final Decoration? decoration; /// The gap between the [MoonPillTab.leading], [MoonPillTab.label] and /// [MoonPillTab.trailing] widgets of the tab. final double? tabGap; /// The padding of the tab. final EdgeInsetsGeometry? tabPadding; /// The text style of the tab. /// /// If [TextStyle] color is used, then it overrides the [textColor] and /// [selectedTextColor]. final TextStyle? textStyle; /// Defines a Moon Design pill tab style. const MoonPillTabStyle({ this.borderRadius, this.focusEffectColor, this.selectedTabColor, this.textColor, this.selectedTextColor, this.decoration, this.tabGap, this.tabPadding, this.textStyle, }); } ================================================ FILE: lib/src/widgets/tab_bar/tab.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/tab_bar/tab_style.dart'; class MoonTab { /// Whether the tab is disabled. final bool disabled; /// {@macro flutter.widgets.Focus.autofocus} final bool autoFocus; /// Whether the tab is focusable. final bool isFocusable; /// Whether to show a focus outline effect when the tab is focused. final bool showFocusEffect; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The styling options for the tab. final MoonTabStyle? tabStyle; /// The semantic label for the tab. final String? semanticLabel; /// The callback that returns the current selection status of the tab as a /// boolean value. final ValueChanged? isSelected; /// The widget to display before the [label] widget of the tab. final Widget? leading; /// The primary content of the tab widget. final Widget? label; /// The widget to display after the [label] widget of the tab. final Widget? trailing; /// Creates a Moon Design tab. const MoonTab({ this.disabled = false, this.autoFocus = false, this.isFocusable = true, this.showFocusEffect = true, this.focusNode, this.tabStyle, this.semanticLabel, this.isSelected, this.leading, this.label, this.trailing, }); } ================================================ FILE: lib/src/widgets/tab_bar/tab_bar.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_size_properties.dart'; import 'package:moon_design/src/theme/tab_bar/tab_bar_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/utils/color_tween_premul.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; import 'package:moon_design/src/widgets/common/base_segmented_tab_bar.dart'; import 'package:moon_design/src/widgets/tab_bar/pill_tab.dart'; import 'package:moon_design/src/widgets/tab_bar/pill_tab_style.dart'; import 'package:moon_design/src/widgets/tab_bar/tab.dart'; import 'package:moon_design/src/widgets/tab_bar/tab_style.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonTabBarVariant { indicator, pill, custom, } enum MoonTabBarSize { sm, md, } typedef MoonCustomTabBuilder = Widget Function( BuildContext context, bool isSelected, ); class MoonTabBar extends StatefulWidget { /// Whether the tab bar is expanded to its full available width horizontally /// or resizes to fit its content. final bool isExpanded; /// The gap between the tab bar tabs. final double? gap; /// The height of the tab bar. final double? height; /// The width of the tab bar. final double? width; /// The duration of the tab bar transition animation. final Duration? transitionDuration; /// The curve of the tab bar transition animation. final Curve? transitionCurve; /// The padding of the tab bar. final EdgeInsetsGeometry? padding; /// The index of the initially selected tab. /// This property is overridden by the [tabController]'s initial index if /// the [tabController] is provided. /// For external updates to the tab index, use [tabController]. final int initialIndex; /// The size of the tab bar. final MoonTabBarSize? tabBarSize; /// The custom decoration of the tab bar. final Decoration? decoration; /// The external controller for managing tab selection and animation in tab /// bar. If tabController is provided, then [initialIndex] is ignored and /// tabController's index is used instead. final TabController? tabController; /// The callback that returns the index of the currently selected tab. final ValueChanged? onTabChanged; /// The list of tabs to display as the children of the tab bar. /// At least one child is required when this property is used. /// This property cannot be used in conjunction with the [pillTabs] or /// [customTabs] properties; both must be set to null. final List? tabs; /// The list of pill tabs to display as the children of the pill tab bar. /// At least one child is required when this property is used. /// This property cannot be used in conjunction with the [tabs] or /// [customTabs] properties; both must be set to null. final List? pillTabs; /// The list of custom tabs to display as the children of the custom tab bar. /// At least one child is required when this property is used. /// This property cannot be used in conjunction with the [tabs] or [pillTabs] /// properties; both must be set to null. final List? customTabs; /// Creates a Moon Design tab bar. /// /// See also: /// /// * [MoonTabBar.pill], Moon Design pill tab bar. /// * [MoonTabBar.custom], Moon Design custom tab bar. const MoonTabBar({ super.key, this.isExpanded = false, this.gap, this.height, this.width, this.transitionDuration, this.transitionCurve, this.padding, this.initialIndex = 0, this.tabBarSize, this.decoration, this.tabController, this.onTabChanged, required this.tabs, }) : assert(height == null || height > 0), assert(tabs != null && tabs.length > 0), pillTabs = null, customTabs = null; /// Creates a Moon Design pill tab bar. /// /// See also: /// /// * [MoonTabBar.custom], Moon Design custom tab bar. const MoonTabBar.pill({ super.key, this.isExpanded = false, this.gap, this.height, this.width, this.transitionDuration, this.transitionCurve, this.padding, this.initialIndex = 0, this.tabBarSize, this.decoration, this.tabController, this.onTabChanged, required this.pillTabs, }) : assert(height == null || height > 0), assert(pillTabs != null && pillTabs.length > 0), tabs = null, customTabs = null; /// Creates a Moon Design custom tab bar. /// /// See also: /// /// * [MoonTabBar.pill], Moon Design pill tab bar. const MoonTabBar.custom({ super.key, this.isExpanded = false, this.gap, this.height, this.width, this.transitionDuration, this.transitionCurve, this.padding, this.initialIndex = 0, this.tabBarSize, this.decoration, this.tabController, this.onTabChanged, required this.customTabs, }) : assert(height == null || height > 0), assert(customTabs != null && customTabs.length > 0), tabs = null, pillTabs = null; @override State createState() => _MoonTabBarState(); } class _MoonTabBarState extends State { late int _selectedIndex = widget.tabController?.index ?? widget.initialIndex; late MoonTabBarVariant _tabBarVariant; late Duration _effectiveTransitionDuration; late Curve _effectiveTransitionCurve; late MoonTabBarSizeProperties _effectiveMoonTabBarSize; MoonTabBarSizeProperties _getMoonTabBarSize( BuildContext context, MoonTabBarSize? tabBarSize, ) { switch (tabBarSize) { case MoonTabBarSize.sm: return context.moonTheme?.tabBarTheme.sizes.sm ?? MoonTabBarSizes(tokens: MoonTokens.light).sm; case MoonTabBarSize.md: return context.moonTheme?.tabBarTheme.sizes.md ?? MoonTabBarSizes(tokens: MoonTokens.light).md; default: return context.moonTheme?.tabBarTheme.sizes.md ?? MoonTabBarSizes(tokens: MoonTokens.light).md; } } void _setSelectedTabBarVariant() { if (widget.tabs != null) { _tabBarVariant = MoonTabBarVariant.indicator; } else if (widget.pillTabs != null) { _tabBarVariant = MoonTabBarVariant.pill; } else { _tabBarVariant = MoonTabBarVariant.custom; } } void _updateTabsSelectedStatus() { if (_tabBarVariant == MoonTabBarVariant.indicator) { widget.tabs?.asMap().forEach((int index, MoonTab tab) { tab.isSelected?.call(index == _selectedIndex); }); } else if (_tabBarVariant == MoonTabBarVariant.pill) { widget.pillTabs?.asMap().forEach((int index, MoonPillTab pillTab) { pillTab.isSelected?.call(index == _selectedIndex); }); } else { widget.customTabs ?.asMap() .forEach((int index, Widget Function(BuildContext, bool) customTab) { customTab.call(context, index == _selectedIndex); }); } } void _handleTabChange() { final int animationValue = widget.tabController?.animation?.value.round() ?? 0; if (animationValue != _selectedIndex) { setState(() { _selectedIndex = animationValue; widget.onTabChanged?.call(animationValue); _updateTabsSelectedStatus(); }); } } @override void initState() { super.initState(); _setSelectedTabBarVariant(); _updateTabsSelectedStatus(); widget.tabController?.animation?.addListener(_handleTabChange); } @override void dispose() { super.dispose(); widget.tabController?.animation?.removeListener(_handleTabChange); } List _generateTabs() { switch (_tabBarVariant) { case MoonTabBarVariant.indicator: return _generateIndicatorTabs(); case MoonTabBarVariant.pill: return _generatePillTabs(); default: return _generateCustomTabs(); } } List _generateIndicatorTabs() { return List.generate( widget.tabs!.length, (int index) { return _IndicatorTabBuilder( transitionDuration: _effectiveTransitionDuration, transitionCurve: _effectiveTransitionCurve, isSelected: index == _selectedIndex, moonTabBarSizeProperties: _effectiveMoonTabBarSize, tab: widget.tabs![index], ); }, ); } List _generatePillTabs() { return List.generate( widget.pillTabs!.length, (int index) { return _PillTabBuilder( transitionDuration: _effectiveTransitionDuration, transitionCurve: _effectiveTransitionCurve, isSelected: index == _selectedIndex, moonTabBarSizeProperties: _effectiveMoonTabBarSize, tab: widget.pillTabs![index], ); }, ); } List _generateCustomTabs() { return List.generate( widget.customTabs!.length, (int index) { return widget.customTabs![index](context, index == _selectedIndex); }, ); } @override Widget build(BuildContext context) { _effectiveMoonTabBarSize = _getMoonTabBarSize(context, widget.tabBarSize); _effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.tabBarTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; _effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.tabBarTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; final double effectiveHeight = widget.height ?? _effectiveMoonTabBarSize.height; final double effectiveGap = widget.gap ?? context.moonTheme?.tabBarTheme.properties.gap ?? MoonSizes.sizes.x5s; return Container( height: effectiveHeight, width: widget.width, padding: widget.padding, decoration: widget.decoration, constraints: BoxConstraints(minWidth: effectiveHeight), child: BaseSegmentedTabBar( gap: effectiveGap, isExpanded: widget.isExpanded, tabController: widget.tabController, valueChanged: (int newIndex) { if (_selectedIndex == newIndex) return; if (widget.tabs != null && widget.tabs![newIndex].disabled) return; if (widget.pillTabs != null && widget.pillTabs![newIndex].disabled) { return; } setState(() { _selectedIndex = newIndex; if (widget.tabController == null) { widget.onTabChanged?.call(newIndex); _updateTabsSelectedStatus(); } }); }, children: _generateTabs(), ), ); } } class _IndicatorTabBuilder extends StatefulWidget { final bool isSelected; final Duration transitionDuration; final Curve transitionCurve; final MoonTabBarSizeProperties moonTabBarSizeProperties; final MoonTab tab; const _IndicatorTabBuilder({ required this.isSelected, required this.transitionDuration, required this.transitionCurve, required this.moonTabBarSizeProperties, required this.tab, }); @override State<_IndicatorTabBuilder> createState() => _IndicatorTabBuilderState(); } class _IndicatorTabBuilderState extends State<_IndicatorTabBuilder> with SingleTickerProviderStateMixin { final ColorTweenWithPremultipliedAlpha _indicatorColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _textColorTween = ColorTweenWithPremultipliedAlpha(); final Tween _indicatorWidthTween = Tween(begin: 0, end: 0); Animation? _indicatorColor; Animation? _textColor; Animation? _indicatorWidth; AnimationController? _animationController; void _handleActiveEffect(bool isActive) { isActive ? _animationController?.forward() : _animationController?.reverse(); } @override void initState() { super.initState(); _animationController = AnimationController( duration: widget.transitionDuration, vsync: this, ); if (widget.isSelected) _animationController?.value = 1; } @override void dispose() { _animationController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final MoonTabStyle? tabStyle = widget.tab.tabStyle; final Color effectiveIndicatorColor = tabStyle?.indicatorColor ?? context.moonTheme?.tabBarTheme.colors.indicatorColor ?? MoonColors.light.piccolo; final Color effectiveTextColor = tabStyle?.textStyle?.color ?? tabStyle?.textColor ?? context.moonTheme?.tabBarTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveSelectedTextColor = tabStyle?.selectedTextColor ?? context.moonTheme?.tabBarTheme.colors.selectedTextColor ?? MoonColors.light.piccolo; final TextStyle effectiveTextStyle = widget.moonTabBarSizeProperties.textStyle.merge(tabStyle?.textStyle); final double effectiveIndicatorHeight = tabStyle?.indicatorHeight ?? widget.moonTabBarSizeProperties.indicatorHeight; final double effectiveTabGap = tabStyle?.tabGap ?? widget.moonTabBarSizeProperties.tabGap; final EdgeInsetsGeometry effectiveTabPadding = tabStyle?.tabPadding ?? widget.moonTabBarSizeProperties.tabPadding; final EdgeInsets resolvedDirectionalPadding = effectiveTabPadding.resolve(Directionality.of(context)); final EdgeInsetsGeometry correctedTabPadding = tabStyle?.tabPadding == null ? EdgeInsetsDirectional.fromSTEB( widget.tab.leading == null && widget.tab.label != null ? resolvedDirectionalPadding.left : 0, resolvedDirectionalPadding.top, widget.tab.trailing == null && widget.tab.label != null ? resolvedDirectionalPadding.right : 0, resolvedDirectionalPadding.bottom, ) : resolvedDirectionalPadding; _indicatorColor ??= _animationController!.drive( _indicatorColorTween.chain(CurveTween(curve: widget.transitionCurve)), ); _textColor ??= _animationController!.drive( _textColorTween.chain(CurveTween(curve: widget.transitionCurve)), ); _indicatorWidth ??= _animationController!.drive( _indicatorWidthTween.chain(CurveTween(curve: widget.transitionCurve)), ); _indicatorColorTween.end = effectiveIndicatorColor; _textColorTween ..begin = effectiveTextColor ..end = effectiveSelectedTextColor; return MoonBaseControl( semanticLabel: widget.tab.semanticLabel, onLongPress: widget.tab.disabled ? null : () => {}, autofocus: widget.tab.autoFocus, focusNode: widget.tab.focusNode, isFocusable: widget.tab.isFocusable, showFocusEffect: widget.tab.showFocusEffect, focusEffectColor: tabStyle?.focusEffectColor, cursor: widget.isSelected ? SystemMouseCursors.basic : SystemMouseCursors.click, builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { final bool isActive = isEnabled && (widget.isSelected || isHovered || isPressed); _handleActiveEffect(isActive); return Container( decoration: tabStyle?.decoration, child: Stack( children: [ AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return IconTheme( data: IconThemeData( color: _textColor!.value, size: widget.moonTabBarSizeProperties.iconSizeValue, ), child: DefaultTextStyle( style: effectiveTextStyle.copyWith( color: _textColor!.value, ), child: child!, ), ); }, child: Center( child: Padding( padding: correctedTabPadding, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ if (widget.tab.leading != null) Padding( padding: EdgeInsets.symmetric( horizontal: effectiveTabGap, ), child: widget.tab.leading, ), if (widget.tab.label != null) ConstrainedBox( constraints: BoxConstraints( minHeight: widget.moonTabBarSizeProperties.iconSizeValue, ), child: Center(child: widget.tab.label), ), if (widget.tab.trailing != null) Padding( padding: EdgeInsets.symmetric( horizontal: effectiveTabGap, ), child: widget.tab.trailing, ), ], ), ), ), ), Positioned( bottom: 0, left: 0, right: 0, child: LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { _indicatorWidthTween.end = constraints.maxWidth; return Align( alignment: Directionality.of(context) == TextDirection.ltr ? Alignment.bottomLeft : Alignment.bottomRight, child: AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return Container( color: effectiveIndicatorColor, height: effectiveIndicatorHeight, width: _indicatorWidth!.value, ); }, ), ); }, ), ), ], ), ); }, ); } } class _PillTabBuilder extends StatefulWidget { final bool isSelected; final Duration transitionDuration; final Curve transitionCurve; final MoonTabBarSizeProperties moonTabBarSizeProperties; final MoonPillTab tab; const _PillTabBuilder({ required this.isSelected, required this.transitionDuration, required this.transitionCurve, required this.moonTabBarSizeProperties, required this.tab, }); @override State<_PillTabBuilder> createState() => _PillTabBuilderState(); } class _PillTabBuilderState extends State<_PillTabBuilder> with SingleTickerProviderStateMixin { final ColorTweenWithPremultipliedAlpha _tabColorTween = ColorTweenWithPremultipliedAlpha(); final ColorTweenWithPremultipliedAlpha _textColorTween = ColorTweenWithPremultipliedAlpha(); Animation? _tabColor; Animation? _textColor; AnimationController? _animationController; void _handleActiveEffect(bool isActive) { isActive ? _animationController?.forward() : _animationController?.reverse(); } @override void initState() { super.initState(); _animationController = AnimationController( duration: widget.transitionDuration, vsync: this, ); if (widget.isSelected) _animationController?.value = 1; } @override void dispose() { _animationController!.dispose(); super.dispose(); } @override Widget build(BuildContext context) { final MoonPillTabStyle? tabStyle = widget.tab.tabStyle; final BorderRadiusGeometry effectiveTabBorderRadius = tabStyle?.borderRadius ?? widget.moonTabBarSizeProperties.borderRadius; final Color effectiveSelectedTabColor = tabStyle?.selectedTabColor ?? context.moonTheme?.tabBarTheme.colors.selectedPillTabColor ?? MoonColors.light.goku; final Color effectiveTextColor = tabStyle?.textStyle?.color ?? tabStyle?.textColor ?? context.moonTheme?.tabBarTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveSelectedTextColor = tabStyle?.selectedTextColor ?? context.moonTheme?.tabBarTheme.colors.selectedPillTextColor ?? MoonColors.light.textPrimary; final TextStyle effectiveTextStyle = widget.moonTabBarSizeProperties.textStyle.merge(tabStyle?.textStyle); final double effectiveTabGap = tabStyle?.tabGap ?? widget.moonTabBarSizeProperties.tabGap; final EdgeInsetsGeometry effectiveTabPadding = tabStyle?.tabPadding ?? widget.moonTabBarSizeProperties.tabPadding; final EdgeInsets resolvedDirectionalPadding = effectiveTabPadding.resolve(Directionality.of(context)); final EdgeInsetsGeometry correctedTabPadding = tabStyle?.tabPadding == null ? EdgeInsetsDirectional.fromSTEB( widget.tab.leading == null && widget.tab.label != null ? resolvedDirectionalPadding.left : 0, resolvedDirectionalPadding.top, widget.tab.trailing == null && widget.tab.label != null ? resolvedDirectionalPadding.right : 0, resolvedDirectionalPadding.bottom, ) : resolvedDirectionalPadding; _tabColor ??= _animationController!.drive( _tabColorTween.chain(CurveTween(curve: widget.transitionCurve)), ); _textColor ??= _animationController!.drive( _textColorTween.chain(CurveTween(curve: widget.transitionCurve)), ); _tabColorTween.end = effectiveSelectedTabColor; _textColorTween ..begin = effectiveTextColor ..end = effectiveSelectedTextColor; return MoonBaseControl( semanticLabel: widget.tab.semanticLabel, onLongPress: widget.tab.disabled ? null : () => {}, autofocus: widget.tab.autoFocus, focusNode: widget.tab.focusNode, isFocusable: widget.tab.isFocusable, showFocusEffect: widget.tab.showFocusEffect, focusEffectColor: tabStyle?.focusEffectColor, borderRadius: effectiveTabBorderRadius.squircleBorderRadius(context), cursor: widget.isSelected ? SystemMouseCursors.basic : SystemMouseCursors.click, builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { final bool isActive = isEnabled && (widget.isSelected || isHovered || isPressed); _handleActiveEffect(isActive); return AnimatedBuilder( animation: _animationController!, builder: (BuildContext context, Widget? child) { return DecoratedBox( decoration: tabStyle?.decoration ?? ShapeDecoration( color: _tabColor!.value, shape: MoonSquircleBorder( borderRadius: effectiveTabBorderRadius .squircleBorderRadius(context), ), ), child: IconTheme( data: IconThemeData( size: widget.moonTabBarSizeProperties.iconSizeValue, color: _textColor!.value, ), child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: _textColor!.value), child: child!, ), ), ); }, child: Center( child: Padding( padding: correctedTabPadding, child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ if (widget.tab.leading != null) Padding( padding: EdgeInsets.symmetric( horizontal: effectiveTabGap, ), child: widget.tab.leading, ), if (widget.tab.label != null) widget.tab.label!, if (widget.tab.trailing != null) Padding( padding: EdgeInsets.symmetric( horizontal: effectiveTabGap, ), child: widget.tab.trailing, ), ], ), ), ), ); }, ); } } ================================================ FILE: lib/src/widgets/tab_bar/tab_style.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/widgets/tab_bar/tab.dart'; class MoonTabStyle { /// The color of the tab focus effect. final Color? focusEffectColor; /// The color of the tab indicator. final Color? indicatorColor; /// The default text color of the tab. final Color? textColor; /// The text color of the selected tab. final Color? selectedTextColor; /// The custom decoration of the tab. final Decoration? decoration; /// The height of the tab indicator. final double? indicatorHeight; /// The gap between the [MoonTab.leading], [MoonTab.label] and /// [MoonTab.trailing] widgets of the tab. final double? tabGap; /// The padding of the tab. final EdgeInsetsGeometry? tabPadding; /// The text style of the tab. /// /// If [TextStyle] color is used, then it overrides the [textColor] and /// [selectedTextColor]. final TextStyle? textStyle; /// Defines a Moon Design tab style. const MoonTabStyle({ this.focusEffectColor, this.indicatorColor, this.textColor, this.selectedTextColor, this.decoration, this.indicatorHeight, this.tabGap, this.tabPadding, this.textStyle, }); } ================================================ FILE: lib/src/widgets/table/table.dart ================================================ import 'dart:math'; import 'dart:ui'; import 'package:flutter/material.dart'; import 'package:moon_design/moon_design.dart'; import 'package:moon_design/src/theme/table/table_size_properties.dart'; import 'package:moon_design/src/theme/table/table_sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/widgets/common/default_animated_text_style.dart'; import 'package:moon_design/src/widgets/table/table_controllers.dart'; class MoonTableRow { /// Whether the table row is selected. final bool selected; /// The height of the table row, primarily determined by this value. If not /// explicitly specified, [MoonTable.rowSize] is used. If [MoonTable.rowSize] /// is also unspecified, the height will dynamically adjust based on the /// content of the table row. final double? height; /// The custom decoration of the table row. final Decoration? decoration; /// The callback that returns the current selection status of the table row as /// a boolean value. final ValueChanged? onSelectChanged; /// The callback that is called when the table row is tapped. final VoidCallback? onTap; /// A widget to display inside the table row, spanning the full width above /// the row cells. final MoonTableRowLabel? label; /// The list of widgets to display as the cells of the table row. Must contain /// the same number of cells as [MoonTableHeader.columns] and cannot be empty. final List cells; /// Creates a Moon Design table row. const MoonTableRow({ this.selected = false, this.height, this.decoration, this.onSelectChanged, this.onTap, this.label, required this.cells, }) : assert(cells.length > 0, 'Cells length must not be empty.'); } class MoonTableRowLabel { /// Whether the table row label is pinned or scrolls horizontally with the /// table body during horizontal scrolling. final bool pinned; /// The duration of the table row label transition animation during horizontal /// scrolling. final Duration? transitionDuration; /// The curve of the table row label transition animation during horizontal /// scrolling. final Curve? transitionCurve; /// The padding of the table row label. final EdgeInsetsGeometry? padding; /// The text style of the table row label when [pinned] is true and the table /// is being horizontally scrolled. final TextStyle? textStyle; /// The animated text style of the table row label when [pinned] is true and /// the table is being horizontally scrolled. final TextStyle? pinnedAnimatedTextStyle; /// The widget displayed inside the table row above the row cells, spanning /// the full width of the row. final Widget label; /// Creates a Moon Design table row label. const MoonTableRowLabel({ this.pinned = true, this.transitionDuration, this.transitionCurve, this.padding, this.textStyle, this.pinnedAnimatedTextStyle, required this.label, }); } typedef ColumnSortCallback = void Function(int columnIndex, bool ascending); class MoonTableColumn { /// Whether to show the [sortingIcon] in the table column. final bool showSortingIcon; /// The gap between the [cell] content and [sortingIcon] of the table column. final double? sortingIconGap; /// The width of the table column. /// Either width for each column or [MoonTable.width] must be provided. /// Cannot be used in conjunction with the [MoonTable.width] property, one of /// them must be null. final double? width; /// The horizontal alignment of the [cell] and [sortingIcon] of the table /// column. final MainAxisAlignment sortingIconAlignment; /// The callback that is called when the table column is sorted. final ColumnSortCallback? onSort; /// The callback that is called when the table column is tapped. final VoidCallback? onTap; /// The widget to display as the content of the table column. final Widget? cell; /// An icon to display when sorting is applied to the table column. /// If not set, the default icon is [MoonIcons.chevron_up_16]. /// Displayed only if the [showSortingIcon] is true and [onSort] is not null. final Widget? sortingIcon; /// Creates a Moon Design table column. const MoonTableColumn({ this.showSortingIcon = true, this.sortingIconGap, this.width, this.sortingIconAlignment = MainAxisAlignment.start, this.onSort, this.onTap, this.cell, this.sortingIcon, }); } class MoonTableHeader { /// The custom decoration of the table header row. final Decoration? decoration; /// The height of the table header row, primarily determined by this value. /// If not specified, [MoonTable.rowSize] is used. If [MoonTable.rowSize] is /// also unspecified, the height will dynamically adjust based on the content /// of the table row. final double? height; /// The list of table columns to display as the content of the table header. final List columns; /// Creates a Moon Design table header. const MoonTableHeader({ this.decoration, this.height, required this.columns, }) : assert( columns.length > 0, 'If header is provided, columns must not be empty.', ); } class MoonTableFooter { /// The custom decoration of the table footer row. final Decoration? decoration; /// The height of the table footer row, primarily determined by this value. /// If not specified, [MoonTable.rowSize] is used. If [MoonTable.rowSize] is /// also unspecified, the height will dynamically adjust based on the row /// content. final double? height; /// The list of widgets to display as the cells of the table footer. Cells /// length must be equal to [MoonTableHeader.columns] length. If footer is /// provided, [cells] must not be empty. final List cells; /// Creates a Moon Design table footer. const MoonTableFooter({ this.decoration, this.height, required this.cells, }) : assert( cells.length > 0, 'If footer is provided, cells must not be empty.', ); } enum MoonTableRowSize { xs, sm, md, lg, xl, x2l, } typedef OnScrollControllersReady = void Function( ScrollController verticalController, ScrollController horizontalController, ); class MoonTable extends StatefulWidget { /// Whether the header of the table is pinned or vertically scrollable with /// the table body. final bool isHeaderPinned; /// Whether the footer of the table is pinned or vertically scrollable with /// the table body. final bool isFooterPinned; /// Whether the [rowsPlaceholder] is pinned or horizontally scrollable with /// the table body. final bool isRowsPlaceholderPinned; /// Whether to sort the table column in ascending or descending order. final bool sortAscending; /// The custom decoration of the table. final Decoration? decoration; /// The vertical gap between the table rows. final double? rowGap; /// The height of the table. By default, the table expands to fill all /// available space. final double? height; /// The width of the table. /// Either the width for the table or the [MoonTableColumn.width] for each /// column must be provided. Cannot be used in conjunction with the /// [MoonTableColumn.width] property, one of them must be null. final double? width; /// The padding of the table row cells. final EdgeInsetsGeometry? cellPadding; /// The padding of the table. final EdgeInsetsGeometry? tablePadding; /// The index of the column to sort the table by. final int sortColumnIndex; /// The number of columns to build for the table. final int columnsCount; /// The size of the table row. /// Applied to table header, footer and rows; unless these widgets have their /// own height specified. If [MoonTable.rowSize] is unspecified, the height /// will dynamically adjust based on the content of the table row. final MoonTableRowSize? rowSize; /// The scrolling behavior of the table. final ScrollBehavior? scrollBehaviour; /// The vertical scroll physics of the table. final ScrollPhysics? verticalScrollPhysics; /// The horizontal scroll physics of the table. final ScrollPhysics? horizontalScrollPhysics; /// The semantic label for the table. final String? semanticLabel; /// The callback that returns the vertical and horizontal scroll controller /// for external usage. final OnScrollControllersReady? onScrollControllersReady; /// The header of the table. final MoonTableHeader? header; /// The footer of the table. final MoonTableFooter? footer; /// The list of table rows to display as the table body. final List rows; /// The widget to display when the provided [rows] property is empty. /// By default it is not horizontally scrollable. To make it scrollable, /// set the [isRowsPlaceholderPinned] to false. final Widget? rowsPlaceholder; /// The widget that separates the table rows horizontally. final Widget? rowDivider; /// The widget to display at the end of an infinite scrolling list /// to signify ongoing content loading while scrolling down. final Widget? loadingIndicator; /// Creates a Moon Design table. const MoonTable({ super.key, this.width, this.isHeaderPinned = true, this.isFooterPinned = true, this.isRowsPlaceholderPinned = true, this.sortAscending = false, this.sortColumnIndex = 0, required this.columnsCount, this.decoration, this.rowGap, this.height, this.cellPadding, this.tablePadding, this.rowSize, this.scrollBehaviour, this.verticalScrollPhysics, this.horizontalScrollPhysics, this.semanticLabel, this.onScrollControllersReady, this.header, this.footer, required this.rows, this.rowsPlaceholder, this.rowDivider, this.loadingIndicator, }) : assert( height == null || height > 0, 'Table height can only be null or > 0.', ), assert(sortColumnIndex >= 0, 'SortColumnIndex can only be >= 0.'), assert(columnsCount > 0, 'Columns count must be > 0'); @override State createState() => _MoonTableState(); } class _MoonTableState extends State { late TableControllers _tableControllers; late MoonTableSizeProperties _effectiveMoonTableRowSize; late double _tableWidth; late EdgeInsetsGeometry _effectiveCellPadding; double _columnEqualWidth = 0; void _assertRequirements() { final bool hasTableFooter = widget.footer != null; final bool hasTableHeader = widget.header != null; assert( !hasTableFooter || hasTableFooter && widget.footer!.cells.length == widget.columnsCount, 'If footer is not null, footer.cells.length must be equal to ' 'widget.columnsCount.', ); assert( !hasTableHeader || hasTableHeader && widget.header!.columns.length == widget.columnsCount, 'If header is not null, header.columns.length must be equal to ' 'widget.columnsCount.', ); if (widget.header != null) { for (final column in widget.header!.columns) { if (widget.width == null) { assert( column.width != null, 'If table width is null, each provided header column must have a ' 'width specified.', ); } else { assert( column.width == null, 'If table width is not null, each provided column width must be ' 'null.', ); } } } else { assert( widget.width != null, 'If table header is null, table width must be specified.', ); } } MoonTableSizeProperties _getMoonTableRowSize( BuildContext context, MoonTableRowSize? moonTableRowSize, ) { switch (moonTableRowSize) { case MoonTableRowSize.xs: return context.moonTheme?.tableTheme.sizes.xs ?? MoonTableSizes(tokens: MoonTokens.light).xs; case MoonTableRowSize.sm: return context.moonTheme?.tableTheme.sizes.sm ?? MoonTableSizes(tokens: MoonTokens.light).sm; case MoonTableRowSize.md: return context.moonTheme?.tableTheme.sizes.md ?? MoonTableSizes(tokens: MoonTokens.light).md; case MoonTableRowSize.lg: return context.moonTheme?.tableTheme.sizes.lg ?? MoonTableSizes(tokens: MoonTokens.light).lg; case MoonTableRowSize.xl: return context.moonTheme?.tableTheme.sizes.xl ?? MoonTableSizes(tokens: MoonTokens.light).xl; case MoonTableRowSize.x2l: return context.moonTheme?.tableTheme.sizes.x2l ?? MoonTableSizes(tokens: MoonTokens.light).x2l; default: return context.moonTheme?.tableTheme.sizes.md ?? MoonTableSizes(tokens: MoonTokens.light).md; } } void _calculateTableWidth() { // If a fixed table width is specified, the remaining space is uniformly // distributed across columns. if (widget.width != null) { _columnEqualWidth = widget.width! / widget.columnsCount; _tableWidth = widget.width!; } else { // Calculates the overall table width based on the combined widths of all // its columns. _tableWidth = widget.header!.columns.fold( 0, (double totalWidth, MoonTableColumn column) => totalWidth + (column.width!), ); } } @override void initState() { super.initState(); _assertRequirements(); _tableControllers = TableControllers( isHeaderPinned: widget.isHeaderPinned, isFooterPinned: widget.isFooterPinned, hasPinnedEmptyPlaceholder: widget.isRowsPlaceholderPinned, ); _tableControllers.init(); widget.onScrollControllersReady?.call( _tableControllers.verticalScrollController, _tableControllers.horizontalScrollController, ); } @override void dispose() { _tableControllers.dispose(); super.dispose(); } Widget _buildHeader() { assert(widget.header != null); final MoonTableHeader header = widget.header!; final Color effectiveTextColor = context.moonTheme?.tableTheme.colors.columnTextColor ?? MoonColors.light.textPrimary; final double? effectiveHeight = header.height ?? (widget.rowSize == null ? null : _effectiveMoonTableRowSize.rowHeight); final double effectiveSortIconSize = _effectiveMoonTableRowSize.sortIconSizeValue; final TextStyle effectiveTextStyle = _effectiveMoonTableRowSize .columnTextStyle .copyWith(color: effectiveTextColor); return Container( height: effectiveHeight, width: _tableWidth, decoration: header.decoration, child: Row( children: List.generate( header.columns.length, (int index) { final MoonTableColumn currentColumn = header.columns[index]; final bool showSortingIcon = currentColumn.onSort != null && currentColumn.showSortingIcon; final double effectiveColumnWidth = currentColumn.width ?? _columnEqualWidth; final double effectiveSortingIconGap = currentColumn.sortingIconGap ?? _effectiveMoonTableRowSize.sortIconGap; final Widget effectiveSortingIcon = currentColumn.sortingIcon ?? Icon( MoonIcons.controls_chevron_up_16_light, size: effectiveSortIconSize, ); return GestureDetector( behavior: HitTestBehavior.translucent, onTap: () { currentColumn.onTap?.call(); currentColumn.onSort?.call(index, !widget.sortAscending); }, child: SizedBox( width: effectiveColumnWidth, child: Padding( padding: _effectiveCellPadding, child: DefaultTextStyle( style: effectiveTextStyle, child: showSortingIcon && index == widget.sortColumnIndex ? Row( mainAxisAlignment: currentColumn.sortingIconAlignment, children: [ currentColumn.cell ?? const SizedBox(), _SortIcon( gap: effectiveSortingIconGap, icon: effectiveSortingIcon, iconSize: effectiveSortIconSize, visible: index == widget.sortColumnIndex, up: index == widget.sortColumnIndex ? widget.sortAscending : null, ), ], ) : Align( alignment: AlignmentDirectional.centerStart, child: currentColumn.cell ?? const SizedBox(), ), ), ), ), ); }, ), ), ); } Widget _buildFooter() { final Color effectiveTextColor = context.moonTheme?.tableTheme.colors.columnTextColor ?? MoonColors.light.textPrimary; final double? effectiveFooterHeight = widget.footer?.height ?? (widget.rowSize == null ? null : _effectiveMoonTableRowSize.rowHeight); final TextStyle effectiveTextStyle = _effectiveMoonTableRowSize .columnTextStyle .copyWith(color: effectiveTextColor); return Container( height: effectiveFooterHeight, width: _tableWidth, decoration: widget.footer!.decoration, child: Row( children: List.generate( widget.footer!.cells.length, (int index) { final double effectiveColumnWidth = widget.header?.columns[index].width ?? _columnEqualWidth; return SizedBox( width: effectiveColumnWidth, child: DefaultTextStyle( style: effectiveTextStyle, child: Padding( padding: _effectiveCellPadding, child: Align( alignment: AlignmentDirectional.centerStart, child: widget.footer!.cells[index], ), ), ), ); }, ), ), ); } Widget _buildRows() { final bool hasScrollableHeader = !widget.isHeaderPinned; final bool hasScrollableFooter = !widget.isFooterPinned && widget.footer != null; final BorderRadiusGeometry effectiveBorderRadius = _effectiveMoonTableRowSize.rowBorderRadius; final Color effectiveTextColor = context.moonTheme?.tableTheme.colors.rowTextColor ?? MoonColors.light.textPrimary; final Color effectiveBackgroundColor = context.moonTheme?.tableTheme.colors.rowBackgroundColor ?? MoonColors.light.gohan; final double effectiveGap = widget.rowGap ?? _effectiveMoonTableRowSize.rowGap; final TextStyle effectiveTextStyle = _effectiveMoonTableRowSize.rowTextStyle .copyWith(color: effectiveTextColor); return CustomScrollView( controller: _tableControllers.verticalScrollController, physics: widget.verticalScrollPhysics, slivers: [ if (hasScrollableHeader && widget.header != null) SliverToBoxAdapter( child: _buildHeader(), ), if (widget.rows.isNotEmpty) SliverList.separated( itemCount: widget.rows.length + 1, separatorBuilder: (BuildContext context, int index) => widget.rowDivider ?? const SizedBox(), itemBuilder: (BuildContext context, int index) { if (index < widget.rows.length) { final MoonTableRow currentRow = widget.rows[index]; final bool firstRow = index == 0; final bool lastRow = index == widget.rows.length - 1; assert( currentRow.cells.length == widget.columnsCount, 'Table row cells count must be equal to table columns count.', ); final double? effectiveRowHeight = currentRow.height ?? (widget.rowSize == null ? null : _effectiveMoonTableRowSize.rowHeight); final EdgeInsetsGeometry effectiveLabelPadding = currentRow.label?.padding ?? _effectiveMoonTableRowSize.rowLabelPadding; final TextStyle effectiveLabelTextStyle = _effectiveMoonTableRowSize.rowLabelTextStyle .merge(currentRow.label?.textStyle); final TextStyle effectiveAnimatedLabelTextStyle = _effectiveMoonTableRowSize.rowPinnedAnimatedLabelTextStyle .merge(currentRow.label?.pinnedAnimatedTextStyle); return GestureDetector( onTap: () { currentRow.onSelectChanged?.call(!currentRow.selected); currentRow.onTap?.call(); }, child: Container( height: effectiveRowHeight, margin: EdgeInsets.only( top: firstRow ? 0 : effectiveGap / 2, bottom: lastRow ? 0 : effectiveGap / 2, ), decoration: currentRow.decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius .squircleBorderRadius(context), ), ), child: Column( mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.start, children: [ if (currentRow.label != null) Padding( padding: effectiveLabelPadding, child: _TableRowLabel( label: currentRow.label!, labelTextStyle: effectiveLabelTextStyle, animatedLabelTextStyle: effectiveAnimatedLabelTextStyle, horizontalScrollController: _tableControllers.horizontalScrollController, ), ), Row( children: [ for (var i = 0; i < currentRow.cells.length; i++) SizedBox( width: widget.header?.columns[i].width ?? _columnEqualWidth, height: currentRow.label != null ? null : effectiveRowHeight, child: DefaultTextStyle( style: effectiveTextStyle, child: Padding( padding: _effectiveCellPadding, child: Align( alignment: AlignmentDirectional.centerStart, child: currentRow.cells[i], ), ), ), ), ], ), ], ), ), ); } else { return widget.loadingIndicator ?? const SizedBox(); } }, ), if (hasScrollableFooter) SliverToBoxAdapter( child: _buildFooter(), ), ], ); } @override Widget build(BuildContext context) { _calculateTableWidth(); _effectiveMoonTableRowSize = _getMoonTableRowSize(context, widget.rowSize); _effectiveCellPadding = widget.cellPadding ?? _effectiveMoonTableRowSize.cellPadding; final Color effectiveIconColor = context.moonTheme?.tableTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final ScrollBehavior effectiveScrollBehavior = widget.scrollBehaviour ?? ScrollConfiguration.of(context).copyWith( scrollbars: false, overscroll: false, dragDevices: { PointerDeviceKind.touch, PointerDeviceKind.mouse, }, ); return Semantics( label: widget.semanticLabel, child: Container( width: _tableWidth, height: widget.height, decoration: widget.decoration, padding: widget.tablePadding, clipBehavior: widget.decoration == null ? Clip.none : Clip.hardEdge, child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: ScrollConfiguration( behavior: effectiveScrollBehavior, child: Column( children: [ if (widget.isHeaderPinned && widget.header != null) SingleChildScrollView( physics: widget.horizontalScrollPhysics, controller: _tableControllers.headerHorizontalScrollController, scrollDirection: Axis.horizontal, clipBehavior: Clip.none, child: _buildHeader(), ), if (widget.rows.isEmpty && widget.rowsPlaceholder != null) widget.isRowsPlaceholderPinned ? widget.rowsPlaceholder! : SingleChildScrollView( physics: widget.horizontalScrollPhysics, controller: _tableControllers .rowsPlaceholderHorizontalScrollController, scrollDirection: Axis.horizontal, clipBehavior: Clip.none, child: SizedBox( width: _tableWidth, child: widget.rowsPlaceholder, ), ), Expanded( child: SingleChildScrollView( physics: widget.horizontalScrollPhysics, controller: _tableControllers.horizontalScrollController, scrollDirection: Axis.horizontal, clipBehavior: Clip.none, child: SizedBox( width: _tableWidth, child: _buildRows(), ), ), ), if (widget.isFooterPinned && widget.footer != null) SingleChildScrollView( physics: widget.horizontalScrollPhysics, controller: _tableControllers.footerHorizontalScrollController, scrollDirection: Axis.horizontal, clipBehavior: Clip.none, child: _buildFooter(), ), ], ), ), ), ), ); } } class _TableRowLabel extends StatelessWidget { final MoonTableRowLabel label; final TextStyle labelTextStyle; final TextStyle animatedLabelTextStyle; final ScrollController horizontalScrollController; const _TableRowLabel({ required this.label, required this.labelTextStyle, required this.animatedLabelTextStyle, required this.horizontalScrollController, }); @override Widget build(BuildContext context) { final Color effectiveLableTextColor = labelTextStyle.color ?? context.moonTheme?.tableTheme.colors.rowLabelTextColor ?? MoonColors.light.textPrimary; final Color effectiveAnimatedLabelTextColor = animatedLabelTextStyle .color ?? context.moonTheme?.tableTheme.colors.rowPinnedAnimatedLabelTextColor ?? MoonColors.light.trunks; final Duration effectiveTransitionDuration = label.transitionDuration ?? context.moonTheme?.tableTheme.properties.transitionDuration ?? const Duration(milliseconds: 400); final Curve effectiveTransitionCurve = label.transitionCurve ?? context.moonTheme?.tableTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; final TextStyle resolvedLabelTextStyle = labelTextStyle.copyWith(color: effectiveLableTextColor); final TextStyle resolvedAnimatedLabelTextStyle = animatedLabelTextStyle.copyWith(color: effectiveAnimatedLabelTextColor); return label.pinned ? AnimatedBuilder( animation: horizontalScrollController, builder: (BuildContext context, Widget? child) { double widgetOffset = 0; double scrollOffset = horizontalScrollController.offset; final bool offsetIsIncreasing = (scrollOffset - widgetOffset) > 0; if (scrollOffset < 0) scrollOffset = 0; if (widgetOffset != scrollOffset) widgetOffset = scrollOffset; return Padding( padding: EdgeInsetsDirectional.only(start: widgetOffset), child: MoonAnimatedDefaultTextStyle( textStyle: offsetIsIncreasing ? resolvedAnimatedLabelTextStyle : resolvedLabelTextStyle, curve: effectiveTransitionCurve, duration: effectiveTransitionDuration, child: child!, ), ); }, child: label.label, ) : DefaultTextStyle( style: resolvedLabelTextStyle, child: label.label, ); } } class _SortIcon extends StatefulWidget { final bool visible; final bool? up; final double gap; final double iconSize; final Widget icon; const _SortIcon({ required this.visible, required this.up, required this.gap, required this.iconSize, required this.icon, }); @override _SortIconState createState() => _SortIconState(); } class _SortIconState extends State<_SortIcon> with TickerProviderStateMixin { final Animatable _turnTween = Tween(begin: 0.0, end: pi) .chain(CurveTween(curve: Curves.easeIn)); final Duration _animationDuration = const Duration(milliseconds: 200); late AnimationController _opacityController; late Animation _opacityAnimation; late AnimationController _orientationController; late Animation _orientationAnimation; bool? _up; double _orientationOffset = 0.0; @override void initState() { super.initState(); _up = widget.up; _opacityAnimation = CurvedAnimation( parent: _opacityController = AnimationController(duration: _animationDuration, vsync: this), curve: Curves.fastOutSlowIn, )..addListener(_rebuild); _opacityController.value = widget.visible ? 1.0 : 0.0; _orientationController = AnimationController(duration: _animationDuration, vsync: this); _orientationAnimation = _orientationController.drive(_turnTween) ..addListener(_rebuild) ..addStatusListener(_resetOrientationAnimation); if (widget.visible) _orientationOffset = widget.up! ? 0.0 : pi; } void _rebuild() { setState(() { // The animation changed, so we need to rebuild. }); } void _resetOrientationAnimation(AnimationStatus status) { if (status == AnimationStatus.completed) { assert(_orientationAnimation.value == pi); _orientationOffset += pi; _orientationController.value = 0.0; } } @override void didUpdateWidget(_SortIcon oldWidget) { super.didUpdateWidget(oldWidget); final bool? newUp = widget.up ?? _up; bool skipIcon = false; if (oldWidget.visible != widget.visible) { if (widget.visible && (_opacityController.status == AnimationStatus.dismissed)) { _orientationController.stop(); _orientationController.value = 0.0; _orientationOffset = newUp! ? 0.0 : pi; skipIcon = true; } widget.visible ? _opacityController.forward() : _opacityController.reverse(); } if (_up != newUp && !skipIcon) { _orientationController.status == AnimationStatus.dismissed ? _orientationController.forward() : _orientationController.reverse(); } _up = newUp; } @override void dispose() { _opacityController.dispose(); _orientationController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Padding( padding: EdgeInsetsDirectional.only(start: widget.gap), child: FadeTransition( opacity: _opacityAnimation, child: Transform( transform: Matrix4.rotationZ( _orientationOffset + _orientationAnimation.value, ), alignment: Alignment.center, child: widget.icon, ), ), ); } } ================================================ FILE: lib/src/widgets/table/table_controllers.dart ================================================ import 'package:flutter/cupertino.dart'; import 'package:moon_design/src/utils/linked_scroll_controller.dart'; class TableControllers { late ScrollController verticalScrollController; late ScrollController horizontalScrollController; final LinkedScrollControllerGroup _horizontalControllersGroup = LinkedScrollControllerGroup(); final bool isHeaderPinned; final bool isFooterPinned; final bool hasPinnedEmptyPlaceholder; ScrollController? headerHorizontalScrollController; ScrollController? footerHorizontalScrollController; ScrollController? rowsPlaceholderHorizontalScrollController; /// Creates Moon Design table controllers. TableControllers({ required this.isHeaderPinned, required this.isFooterPinned, required this.hasPinnedEmptyPlaceholder, }); void init() { verticalScrollController = ScrollController(); horizontalScrollController = _horizontalControllersGroup.addAndGet(); if (isHeaderPinned) { headerHorizontalScrollController = _horizontalControllersGroup.addAndGet(); } if (isFooterPinned) { footerHorizontalScrollController = _horizontalControllersGroup.addAndGet(); } if (!hasPinnedEmptyPlaceholder) { rowsPlaceholderHorizontalScrollController = _horizontalControllersGroup.addAndGet(); } } void dispose() { verticalScrollController.dispose(); horizontalScrollController.dispose(); if (isHeaderPinned) headerHorizontalScrollController?.dispose(); if (isFooterPinned) footerHorizontalScrollController?.dispose(); if (!hasPinnedEmptyPlaceholder) { rowsPlaceholderHorizontalScrollController?.dispose(); } } } ================================================ FILE: lib/src/widgets/tag/tag.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/tag/tag_size_properties.dart'; import 'package:moon_design/src/theme/tag/tag_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonTagSize { x2s, xs, sm, } class MoonTag extends StatelessWidget { /// The border radius of the tag. final BorderRadiusGeometry? borderRadius; /// The background color of the tag. final Color? backgroundColor; /// The height of the tag. final double? height; /// The width of the tag. final double? width; /// The gap between the [leading], [label] and [trailing] widgets of the tag. final double? gap; /// The padding of the tag. final EdgeInsetsGeometry? padding; /// The size of the tag. final MoonTagSize? tagSize; /// The custom decoration of the tag. final Decoration? decoration; /// The semantic label for the tag. final String? semanticLabel; /// The callback that is called when the tag is tapped or pressed. final VoidCallback? onTap; /// The callback that is called when the tag is long-pressed. final VoidCallback? onLongPress; /// The widget to display before the [label] widget of the tag. final Widget? leading; /// The primary content of the tag widget. final Widget? label; /// The widget to display after the [label] widget of the tag. final Widget? trailing; /// Creates a Moon Design tag. const MoonTag({ super.key, this.borderRadius, this.backgroundColor, this.height, this.width, this.gap, this.padding, this.tagSize, this.decoration, this.semanticLabel, this.onTap, this.onLongPress, this.leading, this.label, this.trailing, }); MoonTagSizeProperties _getMoonTagSize( BuildContext context, MoonTagSize? moonTagSize, ) { return switch (moonTagSize) { MoonTagSize.x2s => context.moonTheme?.tagTheme.sizes.x2s ?? MoonTagSizes(tokens: MoonTokens.light).x2s, MoonTagSize.xs => context.moonTheme?.tagTheme.sizes.xs ?? MoonTagSizes(tokens: MoonTokens.light).xs, MoonTagSize.sm => context.moonTheme?.tagTheme.sizes.sm ?? MoonTagSizes(tokens: MoonTokens.light).sm, _ => context.moonTheme?.tagTheme.sizes.xs ?? MoonTagSizes(tokens: MoonTokens.light).xs, }; } @override Widget build(BuildContext context) { final MoonTagSizeProperties effectiveMoonTagSize = _getMoonTagSize(context, tagSize); final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? effectiveMoonTagSize.borderRadius; final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.tagTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveTextColor = context.moonTheme?.tagTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = context.moonTheme?.tagTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final double effectiveHeight = height ?? effectiveMoonTagSize.height; final double effectiveGap = gap ?? effectiveMoonTagSize.gap; final EdgeInsetsGeometry effectivePadding = padding ?? effectiveMoonTagSize.padding; final EdgeInsets resolvedDirectionalPadding = effectivePadding.resolve(Directionality.of(context)); final EdgeInsetsGeometry correctedPadding = padding == null ? EdgeInsetsDirectional.fromSTEB( leading == null && label != null ? resolvedDirectionalPadding.left : 0, resolvedDirectionalPadding.top, trailing == null && label != null ? resolvedDirectionalPadding.right : 0, resolvedDirectionalPadding.bottom, ) : resolvedDirectionalPadding; return Semantics( label: semanticLabel, button: false, focusable: false, child: GestureDetector( excludeFromSemantics: true, onTap: onTap, onLongPress: onLongPress, child: MouseRegion( cursor: onTap != null ? SystemMouseCursors.click : SystemMouseCursors.basic, child: Container( width: width, height: effectiveHeight, padding: correctedPadding, constraints: BoxConstraints(minWidth: effectiveHeight), decoration: decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), ), ), child: IconTheme( data: IconThemeData( color: effectiveIconColor, size: effectiveMoonTagSize.iconSizeValue, ), child: DefaultTextStyle( style: effectiveMoonTagSize.textStyle.copyWith( color: effectiveTextColor, ), child: Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: MainAxisAlignment.center, children: [ if (leading != null) Padding( padding: EdgeInsets.symmetric(horizontal: effectiveGap), child: leading, ), if (label != null) label!, if (trailing != null) Padding( padding: EdgeInsets.symmetric(horizontal: effectiveGap), child: trailing, ), ], ), ), ), ), ), ), ); } } ================================================ FILE: lib/src/widgets/text_area/text_area.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/widgets/text_input/form_text_input.dart'; import 'package:moon_tokens/moon_tokens.dart'; typedef MoonTextAreaErrorBuilder = Widget Function( BuildContext context, String? errorText, ); class MoonTextArea extends StatelessWidget { /// Sets the auto validation mode of the text area. final AutovalidateMode autovalidateMode; /// {@macro flutter.widgets.editableText.autocorrect} final bool autocorrect; /// {@macro flutter.widgets.editableText.autofocus} final bool autofocus; /// Whether the text area is enabled. When false, taps are ignored and the /// opacity reduced. final bool enabled; /// {@macro flutter.services.TextInputConfiguration.enableIMEPersonalizedLearning} final bool enableIMEPersonalizedLearning; /// {@macro flutter.widgets.editableText.enableInteractiveSelection} final bool? enableInteractiveSelection; /// {@macro flutter.services.TextInputConfiguration.enableSuggestions} final bool enableSuggestions; /// {@macro flutter.widgets.editableText.expands} final bool expands; /// {@macro flutter.widgets.editableText.readOnly} final bool readOnly; /// {@macro flutter.widgets.editableText.scribbleEnabled} final bool scribbleEnabled; /// {@macro flutter.widgets.editableText.showCursor} final bool? showCursor; /// The border radius of the text area. final BorderRadiusGeometry? borderRadius; /// The appearance of the keyboard. /// /// This setting is only honored on iOS devices. /// /// If unset, defaults to [ThemeData.brightness]. final Brightness? keyboardAppearance; /// {@macro flutter.material.Material.clipBehavior} /// /// Defaults to [Clip.hardEdge]. final Clip? clipBehavior; /// The background color of the text area. final Color? backgroundColor; /// The border color of the active or focused text area. final Color? activeBorderColor; /// The border color of the inactive text area. final Color? inactiveBorderColor; /// The color of the text area in error state. final Color? errorColor; /// The border color of the text area on hover. final Color? hoverBorderColor; /// The text color of the text area. final Color? textColor; /// The text color of the text area hint. final Color? hintTextColor; /// The height of the text area (does not include the space taken by /// [MoonTextArea.errorBuilder]). final double? height; /// The duration of the text area transition animation (enable and disable). final Duration? transitionDuration; /// The curve of the text area transition animation (enable and disable). final Curve? transitionCurve; /// {@macro flutter.widgets.editableText.scrollPadding} final EdgeInsets scrollPadding; /// The padding of the [helper] and [errorBuilder] widgets. final EdgeInsetsGeometry? helperPadding; /// The padding of the text content. final EdgeInsetsGeometry? textPadding; /// {@macro flutter.widgets.Focus.focusNode} final FocusNode? focusNode; /// The maximum number of characters (unicode grapheme clusters) to allow in /// the text area. /// /// {@macro flutter.services.lengthLimitingTextInputFormatter.maxLength} final int? maxLength; /// {@macro flutter.widgets.editableText.minLines} /// * [expands], which determines whether the field should fill the height of /// its parent. final int? minLines; /// {@macro flutter.widgets.editableText.autofillHints} /// {@macro flutter.services.AutofillConfiguration.autofillHints} final Iterable? autofillHints; /// {@macro flutter.widgets.editableText.inputFormatters} final List? inputFormatters; /// Determines how the [maxLength] limit should be enforced. /// /// {@macro flutter.services.textFormatter.effectiveMaxLengthEnforcement} /// /// {@macro flutter.services.textFormatter.maxLengthEnforcement} final MaxLengthEnforcement? maxLengthEnforcement; /// {@macro flutter.widgets.editableText.scrollController} final ScrollController? scrollController; /// {@macro flutter.widgets.editableText.scrollPhysics} final ScrollPhysics? scrollPhysics; /// The custom decoration of the text area. final Decoration? decoration; /// The hint text to display in the text area. final String? hintText; /// The initial value of the text area. final String? initialValue; /// {@template flutter.material.textfield.restorationId} /// Restoration ID to save and restore the state of the text field. /// /// See also: /// /// * [RestorationManager], which explains how state restoration works in /// Flutter. /// {@endtemplate} final String? restorationId; /// The semantic label for the text area. final String? semanticLabel; /// {@macro flutter.widgets.editableText.strutStyle} final StrutStyle? strutStyle; /// {@macro flutter.widgets.editableText.textAlign} final TextAlign textAlign; /// {@macro flutter.widgets.editableText.textCapitalization} final TextCapitalization textCapitalization; /// {@macro flutter.widgets.editableText.textDirection} final TextDirection? textDirection; /// The [TextEditingController] used to edit the text in the text area. final TextEditingController? controller; /// The type of action button to use for the keyboard. /// /// Defaults to [TextInputAction.newline] if [keyboardType] is /// [TextInputType.multiline] and [TextInputAction.done] otherwise. final TextInputAction? textInputAction; /// The text style of the input text. /// /// This text style is also used as the base style for the [decoration]. final TextStyle? textStyle; /// The text style of the [helper] widget or error state text. final TextStyle? helperTextStyle; /// The text validator for the text area widget. final FormFieldValidator? validator; /// The callback that is called when the user taps on the text area. final GestureTapCallback? onTap; /// The callback that is called when the user taps outside the text area. final TapRegionCallback? onTapOutside; /// {@macro flutter.widgets.editableText.onChanged} /// /// See also: /// /// * [inputFormatters]: called before the [onChanged] runs and can validate /// and change/format the input value. /// * [onEditingComplete], [onSubmitted]: more specialized input change /// notifications. final ValueChanged? onChanged; /// {@macro flutter.widgets.editableText.onEditingComplete} final VoidCallback? onEditingComplete; /// [FormState.save]. final ValueChanged? onSaved; /// {@macro flutter.widgets.editableText.onSubmitted} /// /// See also: /// /// * [TextInputAction.next] and [TextInputAction.previous], which /// automatically shift the focus to the next/previous focusable item when /// the user is done editing. final ValueChanged? onSubmitted; /// A builder to build the text area error widget. final MoonTextAreaErrorBuilder? errorBuilder; /// The widget to display below the text area. Not displayed in error state. final Widget? helper; /// Creates a Moon Design text area. const MoonTextArea({ super.key, this.autovalidateMode = AutovalidateMode.disabled, this.autocorrect = true, this.autofocus = false, this.enabled = true, this.enableIMEPersonalizedLearning = true, this.enableInteractiveSelection, this.enableSuggestions = true, this.expands = false, this.readOnly = false, this.scribbleEnabled = true, this.showCursor, this.borderRadius, this.keyboardAppearance, this.clipBehavior, this.backgroundColor, this.activeBorderColor, this.inactiveBorderColor, this.errorColor, this.hoverBorderColor, this.textColor, this.hintTextColor, this.height, this.transitionDuration, this.transitionCurve, this.scrollPadding = const EdgeInsets.all(24.0), this.helperPadding, this.textPadding, this.focusNode, this.validator, this.maxLength, this.minLines, this.autofillHints, this.inputFormatters, this.maxLengthEnforcement, this.scrollController, this.scrollPhysics, this.decoration, this.hintText, this.initialValue, this.restorationId, this.semanticLabel, this.strutStyle, this.textAlign = TextAlign.start, this.textCapitalization = TextCapitalization.none, this.textDirection, this.controller, this.textInputAction, this.textStyle, this.helperTextStyle, this.onTap, this.onTapOutside, this.onChanged, this.onEditingComplete, this.onSaved, this.onSubmitted, this.errorBuilder, this.helper, }); @override Widget build(BuildContext context) { final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? context.moonTheme?.textAreaTheme.properties.borderRadius ?? BorderRadius.circular(8); final Color effectiveBackgroundColor = backgroundColor ?? context.moonTheme?.textAreaTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveActiveBorderColor = activeBorderColor ?? context.moonTheme?.textAreaTheme.colors.activeBorderColor ?? MoonColors.light.piccolo; final Color effectiveInactiveBorderColor = inactiveBorderColor ?? context.moonTheme?.textAreaTheme.colors.inactiveBorderColor ?? MoonColors.light.beerus; final Color effectiveErrorColor = errorColor ?? context.moonTheme?.textAreaTheme.colors.errorColor ?? MoonColors.light.chichi; final Color effectiveHoverBorderColor = hoverBorderColor ?? context.moonTheme?.textAreaTheme.colors.hoverBorderColor ?? MoonColors.light.beerus; final Color effectiveTextColor = textColor ?? context.moonTheme?.textAreaTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveHelperTextColor = hintTextColor ?? context.moonTheme?.textAreaTheme.colors.helperTextColor ?? MoonColors.light.trunks; final EdgeInsetsGeometry effectiveHelperPadding = helperPadding ?? context.moonTheme?.textAreaTheme.properties.helperPadding ?? EdgeInsets.only( left: MoonSizes.sizes.x3s, top: MoonSizes.sizes.x4s, right: MoonSizes.sizes.x3s, ); final EdgeInsetsGeometry effectiveTextPadding = textPadding ?? context.moonTheme?.textAreaTheme.properties.textPadding ?? const EdgeInsets.all(16); final TextStyle effectiveTextStyle = textStyle ?? context.moonTheme?.textAreaTheme.properties.textStyle ?? MoonTypography.typography.body.text16; final TextStyle effectiveHelperTextStyle = helperTextStyle ?? context.moonTheme?.textAreaTheme.properties.helperTextStyle ?? MoonTypography.typography.body.text12; final Duration effectiveTransitionDuration = transitionDuration ?? context.moonTheme?.textAreaTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = transitionCurve ?? context.moonTheme?.textAreaTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; return MoonFormTextInput( activeBorderColor: effectiveActiveBorderColor, autocorrect: autocorrect, autofillHints: autofillHints, autofocus: autofocus, autovalidateMode: autovalidateMode, backgroundColor: effectiveBackgroundColor, borderRadius: effectiveBorderRadius, controller: controller, cursorColor: effectiveTextColor, cursorErrorColor: effectiveErrorColor, enabled: enabled, enableIMEPersonalizedLearning: enableIMEPersonalizedLearning, enableInteractiveSelection: enableInteractiveSelection, enableSuggestions: enableSuggestions, errorColor: effectiveErrorColor, errorBuilder: errorBuilder, expands: expands, focusNode: focusNode, height: height, helper: helper, helperPadding: effectiveHelperPadding, helperTextStyle: effectiveHelperTextStyle, hintText: hintText, hintTextColor: effectiveHelperTextColor, hoverBorderColor: effectiveHoverBorderColor, inactiveBorderColor: effectiveInactiveBorderColor, initialValue: initialValue, inputFormatters: inputFormatters, keyboardAppearance: keyboardAppearance, keyboardType: TextInputType.multiline, maxLength: maxLength, maxLengthEnforcement: maxLengthEnforcement, maxLines: null, minLines: minLines, onChanged: onChanged, onEditingComplete: onEditingComplete, onSubmitted: onSubmitted, onSaved: onSaved, onTap: onTap, onTapOutside: onTapOutside, padding: effectiveTextPadding, readOnly: readOnly, restorationId: restorationId, scrollController: scrollController, scrollPadding: scrollPadding, scrollPhysics: scrollPhysics, decoration: decoration, showCursor: showCursor, strutStyle: strutStyle, style: effectiveTextStyle.copyWith(color: effectiveTextColor), textAlign: textAlign, textAlignVertical: TextAlignVertical.top, textCapitalization: textCapitalization, textColor: effectiveTextColor, textDirection: textDirection, textInputAction: textInputAction, transitionCurve: effectiveTransitionCurve, transitionDuration: effectiveTransitionDuration, validator: validator, ); } } ================================================ FILE: lib/src/widgets/text_input/form_text_input.dart ================================================ import 'dart:ui' as ui show BoxHeightStyle, BoxWidthStyle; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter/services.dart'; import 'package:moon_design/src/widgets/text_input/text_input.dart'; export 'package:flutter/services.dart' show SmartDashesType, SmartQuotesType; typedef MoonFormTextInputValidationStatusCallback = void Function( String? validationErrorText, ); class MoonFormTextInput extends FormField { final MoonFormTextInputConfiguration configuration; /// Creates a Moon Design [MoonFormTextInput] with a [MoonTextInput]. /// /// If a [controller] is specified, [initialValue] must be null. /// If [controller] is null, a [TextEditingController] is automatically /// created with its `text` initialized to [initialValue] or an empty string. /// /// See [MoonTextInput] documentation for details on various parameters. /// /// Validator errors take precedence over the provided [errorText]. MoonFormTextInput({ super.key, // Moon Design system properties. bool hasFloatingLabel = false, BorderRadiusGeometry? borderRadius, Color? backgroundColor, Color? activeBorderColor, Color? inactiveBorderColor, Color? errorColor, Color? errorBorderColor, Color? hoverBorderColor, Color? textColor, Color? hintTextColor, Decoration? decoration, double? gap, double? height, double? width, Duration? transitionDuration, Curve? transitionCurve, EdgeInsetsGeometry? padding, EdgeInsetsGeometry? helperPadding, MoonFormTextInputValidationStatusCallback? validationStatusCallback, MoonTextInputSize? textInputSize, String? errorText, String? hintText, String? initialValue, TextStyle? helperTextStyle, MoonTextInputErrorBuilder? errorBuilder, Widget? leading, Widget? trailing, Widget? helper, // Flutter properties. this.controller, FocusNode? focusNode, TextInputType? keyboardType, TextCapitalization textCapitalization = TextCapitalization.none, TextInputAction? textInputAction, TextStyle? style, StrutStyle? strutStyle, TextDirection? textDirection, TextAlign textAlign = TextAlign.start, TextAlignVertical? textAlignVertical, bool autofocus = false, bool readOnly = false, bool? showCursor, String obscuringCharacter = '•', bool obscureText = false, bool autocorrect = true, SmartDashesType? smartDashesType, SmartQuotesType? smartQuotesType, bool enableSuggestions = true, MaxLengthEnforcement? maxLengthEnforcement, int? maxLines = 1, int? minLines, bool expands = false, int? maxLength, ValueChanged? onChanged, GestureTapCallback? onTap, bool onTapAlwaysCalled = false, TapRegionCallback? onTapOutside, VoidCallback? onEditingComplete, ValueChanged? onSubmitted, super.onSaved, super.validator, List? inputFormatters, bool? enabled, double cursorWidth = 2.0, double? cursorHeight, Radius? cursorRadius, Color? cursorColor, Color? cursorErrorColor, Brightness? keyboardAppearance, EdgeInsets scrollPadding = const EdgeInsets.all(20.0), bool? enableInteractiveSelection, TextSelectionControls? selectionControls, ScrollPhysics? scrollPhysics, Iterable? autofillHints, AutovalidateMode? autovalidateMode, ScrollController? scrollController, super.restorationId, bool enableIMEPersonalizedLearning = true, MouseCursor? mouseCursor, EditableTextContextMenuBuilder? contextMenuBuilder = defaultContextMenuBuilder, SpellCheckConfiguration? spellCheckConfiguration, TextMagnifierConfiguration? magnifierConfiguration, // Flutter missing properties. AppPrivateCommandCallback? onAppPrivateCommand, bool canRequestFocus = true, bool scribbleEnabled = true, bool? cursorOpacityAnimates, Clip clipBehavior = Clip.hardEdge, ContentInsertionConfiguration? contentInsertionConfiguration, DragStartBehavior dragStartBehavior = DragStartBehavior.start, ui.BoxHeightStyle selectionHeightStyle = ui.BoxHeightStyle.tight, ui.BoxWidthStyle selectionWidthStyle = ui.BoxWidthStyle.tight, UndoHistoryController? undoController, }) : assert(obscuringCharacter.length == 1), assert(maxLines == null || maxLines > 0), assert(minLines == null || minLines > 0), assert( (maxLines == null) || (minLines == null) || (maxLines >= minLines), "MinLines can not be greater than maxLines", ), assert( !expands || (maxLines == null && minLines == null), "MinLines and maxLines must be null when 'expands' is true.", ), assert( !obscureText || maxLines == 1, "Obscured fields cannot be multiline.", ), assert( maxLength == null || maxLength == MoonTextInput.noMaxLength || maxLength > 0, ), configuration = MoonFormTextInputConfiguration( activeBorderColor: activeBorderColor, autocorrect: autocorrect, autofillHints: autofillHints, autofocus: autofocus, autovalidateMode: autovalidateMode ?? AutovalidateMode.disabled, backgroundColor: backgroundColor, borderRadius: borderRadius, canRequestFocus: canRequestFocus, clipBehavior: clipBehavior, contentInsertionConfiguration: contentInsertionConfiguration, contextMenuBuilder: contextMenuBuilder, controller: controller, cursorColor: cursorColor, cursorErrorColor: cursorErrorColor, cursorHeight: cursorHeight, cursorOpacityAnimates: cursorOpacityAnimates, cursorRadius: cursorRadius, cursorWidth: cursorWidth, decoration: decoration, dragStartBehavior: dragStartBehavior, enabled: enabled ?? true, enableIMEPersonalizedLearning: enableIMEPersonalizedLearning, enableInteractiveSelection: enableInteractiveSelection ?? (!obscureText || !readOnly), enableSuggestions: enableSuggestions, errorBorderColor: errorBorderColor, errorBuilder: errorBuilder, errorColor: errorColor, errorText: errorText, expands: expands, focusNode: focusNode, gap: gap, hasFloatingLabel: hasFloatingLabel, height: height, helper: helper, helperPadding: helperPadding, helperTextStyle: helperTextStyle, hintText: hintText, hintTextColor: hintTextColor, hoverBorderColor: hoverBorderColor, inactiveBorderColor: inactiveBorderColor, initialValue: initialValue, inputFormatters: inputFormatters, keyboardAppearance: keyboardAppearance, keyboardType: keyboardType, leading: leading, magnifierConfiguration: magnifierConfiguration, maxLength: maxLength, maxLengthEnforcement: maxLengthEnforcement, maxLines: maxLines, minLines: minLines, mouseCursor: mouseCursor, obscureText: obscureText, obscuringCharacter: obscuringCharacter, onAppPrivateCommand: onAppPrivateCommand, onChanged: onChanged, onEditingComplete: onEditingComplete, validationStatusCallback: validationStatusCallback, onSaved: onSaved, onSubmitted: onSubmitted, onTap: onTap, onTapAlwaysCalled: onTapAlwaysCalled, onTapOutside: onTapOutside, padding: padding, readOnly: readOnly, restorationId: restorationId, scribbleEnabled: scribbleEnabled, scrollController: scrollController, scrollPadding: scrollPadding, scrollPhysics: scrollPhysics, selectionControls: selectionControls, selectionHeightStyle: selectionHeightStyle, selectionWidthStyle: selectionWidthStyle, showCursor: showCursor, smartDashesType: smartDashesType ?? (obscureText ? SmartDashesType.disabled : SmartDashesType.enabled), smartQuotesType: smartQuotesType ?? (obscureText ? SmartQuotesType.disabled : SmartQuotesType.enabled), spellCheckConfiguration: spellCheckConfiguration, strutStyle: strutStyle, style: style, textAlign: textAlign, textAlignVertical: textAlignVertical, textCapitalization: textCapitalization, textColor: textColor, textDirection: textDirection, textInputAction: textInputAction, textInputSize: textInputSize, trailing: trailing, transitionCurve: transitionCurve, transitionDuration: transitionDuration, undoController: undoController, validator: validator, width: width, ), super( initialValue: controller != null ? controller.text : (initialValue ?? ""), enabled: enabled ?? true, autovalidateMode: autovalidateMode ?? AutovalidateMode.disabled, builder: (FormFieldState field) { final _MoonFormTextInputState state = field as _MoonFormTextInputState; validationStatusCallback?.call(field.errorText); void onChangedHandler(String value) { field.didChange(value); if (onChanged != null) { onChanged(value); } } return UnmanagedRestorationScope( bucket: field.bucket, child: MoonTextInput( activeBorderColor: activeBorderColor, autocorrect: autocorrect, autofillHints: autofillHints, autofocus: autofocus, backgroundColor: backgroundColor, borderRadius: borderRadius, canRequestFocus: canRequestFocus, clipBehavior: clipBehavior, contentInsertionConfiguration: contentInsertionConfiguration, contextMenuBuilder: contextMenuBuilder, controller: state._effectiveController, cursorColor: cursorColor, cursorErrorColor: cursorErrorColor, cursorHeight: cursorHeight, cursorOpacityAnimates: cursorOpacityAnimates, cursorRadius: cursorRadius, cursorWidth: cursorWidth, decoration: decoration, dragStartBehavior: dragStartBehavior, enabled: enabled ?? true, enableIMEPersonalizedLearning: enableIMEPersonalizedLearning, enableInteractiveSelection: enableInteractiveSelection ?? (!obscureText || !readOnly), enableSuggestions: enableSuggestions, errorBorderColor: errorBorderColor, errorBuilder: errorBuilder, errorColor: errorColor, errorText: field.errorText ?? errorText, expands: expands, focusNode: focusNode, gap: gap, hasFloatingLabel: hasFloatingLabel, height: height, helper: helper, helperPadding: helperPadding, helperTextStyle: helperTextStyle, hintText: hintText, hintTextColor: hintTextColor, hoverBorderColor: hoverBorderColor, inactiveBorderColor: inactiveBorderColor, initialValue: initialValue, inputFormatters: inputFormatters, keyboardAppearance: keyboardAppearance, keyboardType: keyboardType, leading: leading, magnifierConfiguration: magnifierConfiguration, maxLength: maxLength, maxLengthEnforcement: maxLengthEnforcement, maxLines: maxLines, minLines: minLines, mouseCursor: mouseCursor, obscureText: obscureText, obscuringCharacter: obscuringCharacter, onAppPrivateCommand: onAppPrivateCommand, onChanged: onChangedHandler, onEditingComplete: onEditingComplete, onSubmitted: onSubmitted, onTap: onTap, onTapAlwaysCalled: onTapAlwaysCalled, onTapOutside: onTapOutside, padding: padding, readOnly: readOnly, restorationId: restorationId, scribbleEnabled: scribbleEnabled, scrollController: scrollController, scrollPadding: scrollPadding, scrollPhysics: scrollPhysics, selectionControls: selectionControls, selectionHeightStyle: selectionHeightStyle, selectionWidthStyle: selectionWidthStyle, showCursor: showCursor, smartDashesType: smartDashesType ?? (obscureText ? SmartDashesType.disabled : SmartDashesType.enabled), smartQuotesType: smartQuotesType ?? (obscureText ? SmartQuotesType.disabled : SmartQuotesType.enabled), spellCheckConfiguration: spellCheckConfiguration, strutStyle: strutStyle, style: style, textAlign: textAlign, textAlignVertical: textAlignVertical, textCapitalization: textCapitalization, textColor: textColor, textDirection: textDirection, textInputAction: textInputAction, textInputSize: textInputSize, trailing: trailing, transitionCurve: transitionCurve, transitionDuration: transitionDuration, undoController: undoController, width: width, ), ); }, ); /// Controls the input text. /// /// If null, this widget will create its own [TextEditingController] and initialize its [TextEditingController.text] /// with [initialValue]. final TextEditingController? controller; static Widget defaultContextMenuBuilder( BuildContext context, EditableTextState editableTextState, ) { return AdaptiveTextSelectionToolbar.editableText( editableTextState: editableTextState, ); } @override FormFieldState createState() => _MoonFormTextInputState(); } class _MoonFormTextInputState extends FormFieldState { RestorableTextEditingController? _controller; TextEditingController get _effectiveController => _moonFormTextInput.controller ?? _controller!.value; MoonFormTextInput get _moonFormTextInput => super.widget as MoonFormTextInput; @override void restoreState(RestorationBucket? oldBucket, bool initialRestore) { super.restoreState(oldBucket, initialRestore); if (_controller != null) { _registerController(); } // Update the internal [FormFieldState] value to synchronize with the text editing controller value. setValue(_effectiveController.text); } void _registerController() { assert(_controller != null); registerForRestoration(_controller!, 'controller'); } void _createLocalController([TextEditingValue? value]) { assert(_controller == null); _controller = value == null ? RestorableTextEditingController() : RestorableTextEditingController.fromValue(value); if (!restorePending) { _registerController(); } } @override void initState() { super.initState(); if (_moonFormTextInput.controller == null) { _createLocalController( widget.initialValue != null ? TextEditingValue(text: widget.initialValue!) : null, ); } else { _moonFormTextInput.controller!.addListener(_handleControllerChanged); } } @override void didUpdateWidget(MoonFormTextInput oldWidget) { super.didUpdateWidget(oldWidget); if (_moonFormTextInput.controller != oldWidget.controller) { oldWidget.controller?.removeListener(_handleControllerChanged); _moonFormTextInput.controller?.addListener(_handleControllerChanged); if (oldWidget.controller != null && _moonFormTextInput.controller == null) { _createLocalController(oldWidget.controller!.value); } if (_moonFormTextInput.controller != null) { setValue(_moonFormTextInput.controller!.text); if (oldWidget.controller == null) { unregisterFromRestoration(_controller!); _controller!.dispose(); _controller = null; } } } } @override void dispose() { _moonFormTextInput.controller?.removeListener(_handleControllerChanged); _controller?.dispose(); super.dispose(); } @override void didChange(String? value) { super.didChange(value); if (_effectiveController.text != value) { _effectiveController.text = value ?? ""; } } @override void reset() { // SetState is handled in the superclass, no additional call needed here. _effectiveController.text = widget.initialValue ?? ''; super.reset(); } void _handleControllerChanged() { // Suppress changes originating from within this class. // When a controller is provided, this change listener is registered. In such cases, we may receive notifications // for changes within this class (e.g., the reset() method), but the FormField value will already be set. if (_effectiveController.text != value) { didChange(_effectiveController.text); } } } class MoonFormTextInputConfiguration { // Moon Design System properties. final bool hasFloatingLabel; final BorderRadiusGeometry? borderRadius; final Color? backgroundColor; final Color? activeBorderColor; final Color? errorBorderColor; final Color? inactiveBorderColor; final Color? errorColor; final Color? hoverBorderColor; final Color? textColor; final Color? hintTextColor; final Decoration? decoration; final double? gap; final double? height; final double? width; final Duration? transitionDuration; final Curve? transitionCurve; final EdgeInsetsGeometry? padding; final EdgeInsetsGeometry? helperPadding; final MoonFormTextInputValidationStatusCallback? validationStatusCallback; final MoonTextInputSize? textInputSize; final String? errorText; final String? hintText; final String? initialValue; final TextStyle? helperTextStyle; final MoonTextInputErrorBuilder? errorBuilder; final Widget? leading; final Widget? trailing; final Widget? helper; // Flutter properties. final TextMagnifierConfiguration? magnifierConfiguration; final TextEditingController? controller; final FocusNode? focusNode; final TextInputType keyboardType; final TextInputAction? textInputAction; final TextCapitalization textCapitalization; final TextStyle? style; final StrutStyle? strutStyle; final TextAlign textAlign; final TextAlignVertical? textAlignVertical; final TextDirection? textDirection; final bool autofocus; final String obscuringCharacter; final bool obscureText; final bool autocorrect; final SmartDashesType smartDashesType; final SmartQuotesType smartQuotesType; final bool enableSuggestions; final int? maxLines; final int? minLines; final bool expands; final bool readOnly; final bool? showCursor; final int? maxLength; final MaxLengthEnforcement? maxLengthEnforcement; final ValueChanged? onChanged; final VoidCallback? onEditingComplete; final ValueChanged? onSubmitted; final AppPrivateCommandCallback? onAppPrivateCommand; final List? inputFormatters; final bool enabled; final double cursorWidth; final double? cursorHeight; final Radius? cursorRadius; final bool? cursorOpacityAnimates; final Color? cursorColor; final Color? cursorErrorColor; final ui.BoxHeightStyle selectionHeightStyle; final ui.BoxWidthStyle selectionWidthStyle; final Brightness? keyboardAppearance; final EdgeInsets scrollPadding; final bool enableInteractiveSelection; final TextSelectionControls? selectionControls; final DragStartBehavior dragStartBehavior; final GestureTapCallback? onTap; final bool onTapAlwaysCalled; final TapRegionCallback? onTapOutside; final MouseCursor? mouseCursor; final ScrollPhysics? scrollPhysics; final ScrollController? scrollController; final Iterable? autofillHints; final Clip clipBehavior; final String? restorationId; final bool scribbleEnabled; final bool enableIMEPersonalizedLearning; final ContentInsertionConfiguration? contentInsertionConfiguration; final EditableTextContextMenuBuilder? contextMenuBuilder; final bool canRequestFocus; final UndoHistoryController? undoController; final SpellCheckConfiguration? spellCheckConfiguration; final FormFieldSetter? onSaved; final FormFieldValidator? validator; final AutovalidateMode autovalidateMode; const MoonFormTextInputConfiguration({ // Moon Design System properties. this.hasFloatingLabel = false, this.borderRadius, this.backgroundColor, this.activeBorderColor, this.errorBorderColor, this.inactiveBorderColor, this.errorColor, this.hoverBorderColor, this.textColor, this.hintTextColor, this.decoration, this.gap, this.height, this.width, this.transitionDuration, this.transitionCurve, this.padding, this.helperPadding, this.validationStatusCallback, this.textInputSize, this.errorText, this.hintText, this.initialValue, this.helperTextStyle, this.errorBuilder, this.leading, this.trailing, this.helper, // Flutter properties. this.controller, this.focusNode, this.undoController, TextInputType? keyboardType, this.textInputAction, this.textCapitalization = TextCapitalization.none, this.style, this.strutStyle, this.textAlign = TextAlign.start, this.textAlignVertical, this.textDirection, this.readOnly = false, this.showCursor, this.autofocus = false, this.obscuringCharacter = '•', this.obscureText = false, this.autocorrect = true, SmartDashesType? smartDashesType, SmartQuotesType? smartQuotesType, this.enableSuggestions = true, this.maxLines = 1, this.minLines, this.expands = false, this.maxLength, this.maxLengthEnforcement, this.onChanged, this.onEditingComplete, this.onSubmitted, this.onAppPrivateCommand, this.inputFormatters, this.enabled = true, this.cursorWidth = 2.0, this.cursorHeight, this.cursorRadius, this.cursorOpacityAnimates, this.cursorColor, this.cursorErrorColor, this.selectionHeightStyle = ui.BoxHeightStyle.tight, this.selectionWidthStyle = ui.BoxWidthStyle.tight, this.keyboardAppearance, this.scrollPadding = const EdgeInsets.all(20.0), this.dragStartBehavior = DragStartBehavior.start, bool? enableInteractiveSelection, this.selectionControls, this.onTap, this.onTapAlwaysCalled = false, this.onTapOutside, this.mouseCursor, this.scrollController, this.scrollPhysics, this.autofillHints = const [], this.contentInsertionConfiguration, this.clipBehavior = Clip.hardEdge, this.restorationId, this.scribbleEnabled = true, this.enableIMEPersonalizedLearning = true, this.contextMenuBuilder = MoonFormTextInput.defaultContextMenuBuilder, this.canRequestFocus = true, this.spellCheckConfiguration, this.magnifierConfiguration, this.onSaved, this.validator, this.autovalidateMode = AutovalidateMode.disabled, }) : smartDashesType = smartDashesType ?? (obscureText ? SmartDashesType.disabled : SmartDashesType.enabled), smartQuotesType = smartQuotesType ?? (obscureText ? SmartQuotesType.disabled : SmartQuotesType.enabled), keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline), enableInteractiveSelection = enableInteractiveSelection ?? (!readOnly || !obscureText); } ================================================ FILE: lib/src/widgets/text_input/text_input.dart ================================================ import 'dart:ui' as ui show BoxHeightStyle, BoxWidthStyle; import 'package:flutter/cupertino.dart'; import 'package:flutter/foundation.dart'; import 'package:flutter/gestures.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; import 'package:flutter/services.dart'; import 'package:moon_design/src/theme/text_input/text_input_size_properties.dart'; import 'package:moon_design/src/theme/text_input/text_input_sizes.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/opacities.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/tokens.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/common/border_container.dart'; import 'package:moon_design/src/widgets/common/error_message_widgets.dart'; import 'package:moon_tokens/moon_tokens.dart'; export 'package:flutter/services.dart' show SmartDashesType, SmartQuotesType, TextCapitalization, TextInputAction, TextInputType; enum MoonTextInputSize { sm, md, lg, xl, } typedef MoonTextInputErrorBuilder = Widget Function( BuildContext context, String? errorText, ); class MoonTextInput extends StatefulWidget { /// If [maxLength] is set to this value, only the "current input length" part /// of the character counter is displayed. static const int noMaxLength = -1; static Widget _defaultContextMenuBuilder( BuildContext context, EditableTextState editableTextState, ) { return AdaptiveTextSelectionToolbar.editableText( editableTextState: editableTextState, ); } // Moon Design System properties. /// Whether the text input has floating label. final bool hasFloatingLabel; /// The border radius of the text input. final BorderRadiusGeometry? borderRadius; /// The background color of the text input. final Color? backgroundColor; /// The border color of the active or focused text input. final Color? activeBorderColor; /// The border color of the text input in error state. final Color? errorBorderColor; /// The border color of the inactive text input. final Color? inactiveBorderColor; /// The color of the text input in error state. final Color? errorColor; /// The border color of the text input on hover. final Color? hoverBorderColor; /// The text color of the text input. final Color? textColor; /// The text color of the text input hint. final Color? hintTextColor; /// The custom decoration of the text input. final Decoration? decoration; /// The gap between the [leading] widget, text input and [trailing] widget. final double? gap; /// The height of the text input (does not include the space taken by [MoonTextInput.errorBuilder]). final double? height; /// The width of the text input. final double? width; /// The duration of the text input transition animation (enable and disable). final Duration? transitionDuration; /// The curve of the text input transition animation (enable and disable). final Curve? transitionCurve; /// The padding of the text input. final EdgeInsetsGeometry? padding; /// The padding of the [helper] and [errorBuilder] widget. final EdgeInsetsGeometry? helperPadding; /// The size of the text input. final MoonTextInputSize? textInputSize; /// The error text can be used to force text input into an error state (useful for asynchronous errors). /// /// The validator errors take precedence over the provided [errorText]. final String? errorText; /// The hint text to display in the text area. final String? hintText; /// The initial value of the text input. If [controller] is provided, /// this value is ignored and [controller]'s value is used. final String? initialValue; /// The text style of the [helper] widget or error state text. final TextStyle? helperTextStyle; /// A builder to build the text input error widget. final MoonTextInputErrorBuilder? errorBuilder; /// The widget to display before the text input. final Widget? leading; /// The widget to display after the text input. final Widget? trailing; /// The widget to display below the text input. Not displayed in error state. final Widget? helper; // Flutter properties. /// {@macro flutter.widgets.magnifier.TextMagnifierConfiguration.intro} /// /// {@macro flutter.widgets.magnifier.intro} /// /// {@macro flutter.widgets.magnifier.TextMagnifierConfiguration.details} /// /// By default, builds a [CupertinoTextMagnifier] on iOS and [TextMagnifier] /// on Android, and builds nothing on all other platforms. If it is desired to /// suppress the magnifier, consider passing [TextMagnifierConfiguration.disabled]. /// /// {@tool dartpad} /// This sample demonstrates how to customize the magnifier that this text field uses. /// /// ** See code in examples/api/lib/widgets/text_magnifier/text_magnifier.0.dart ** /// {@end-tool} final TextMagnifierConfiguration? magnifierConfiguration; /// Controls the input text. /// /// If null, this widget will create its own [TextEditingController]. final TextEditingController? controller; /// Defines the keyboard focus for this widget. /// /// The [focusNode] is a long-lived object that is typically managed by a /// [StatefulWidget] parent. See [FocusNode] for more information. /// /// To give the keyboard focus to this widget, provide a [focusNode] and then /// use the current [FocusScope] to request the focus: /// /// ```dart /// FocusScope.of(context).requestFocus(myFocusNode); /// ``` /// /// This happens automatically when the widget is tapped. /// /// To be notified when the widget gains or loses the focus, add a listener /// to the [focusNode]: /// /// ```dart /// myFocusNode.addListener(() { print(myFocusNode.hasFocus); }); /// ``` /// /// If null, this widget will create its own [FocusNode]. /// /// ## Keyboard /// /// Requesting the focus will typically cause the keyboard to be shown /// if it is not showing already. /// /// On Android, the user can hide the keyboard - without changing the focus - /// with the system back button. They can restore the keyboard's visibility /// by tapping on a text field. The user might hide the keyboard and /// switch to a physical keyboard, or they might just need to get it /// out of the way for a moment, to expose something it's /// obscuring. In this case requesting the focus again will not /// cause the focus to change, and will not make the keyboard visible. /// /// This widget builds an [EditableText] and will ensure that the keyboard is /// showing when it is tapped by calling [EditableTextState.requestKeyboard()]. final FocusNode? focusNode; /// {@macro flutter.widgets.editableText.keyboardType} final TextInputType keyboardType; /// {@template flutter.widgets.TextField.textInputAction} /// The type of action button to use for the keyboard. /// /// Defaults to [TextInputAction.newline] if [keyboardType] is /// [TextInputType.multiline] and [TextInputAction.done] otherwise. /// {@endtemplate} final TextInputAction? textInputAction; /// {@macro flutter.widgets.editableText.textCapitalization} final TextCapitalization textCapitalization; /// The text style of the input text. /// /// This text style is also used as the base style for the [decoration]. /// /// If null, defaults to 'titleMedium' text style from the current [Theme]. final TextStyle? style; /// {@macro flutter.widgets.editableText.strutStyle} final StrutStyle? strutStyle; /// {@macro flutter.widgets.editableText.textAlign} final TextAlign textAlign; /// {@macro flutter.material.InputDecorator.textAlignVertical} final TextAlignVertical? textAlignVertical; /// {@macro flutter.widgets.editableText.textDirection} final TextDirection? textDirection; /// {@macro flutter.widgets.editableText.autofocus} final bool autofocus; /// {@macro flutter.widgets.editableText.obscuringCharacter} final String obscuringCharacter; /// {@macro flutter.widgets.editableText.obscureText} final bool obscureText; /// {@macro flutter.widgets.editableText.autocorrect} final bool autocorrect; /// {@macro flutter.services.TextInputConfiguration.smartDashesType} final SmartDashesType smartDashesType; /// {@macro flutter.services.TextInputConfiguration.smartQuotesType} final SmartQuotesType smartQuotesType; /// {@macro flutter.services.TextInputConfiguration.enableSuggestions} final bool enableSuggestions; /// {@macro flutter.widgets.editableText.maxLines} /// * [expands], which determines whether the field should fill the height of /// its parent. final int? maxLines; /// {@macro flutter.widgets.editableText.minLines} /// * [expands], which determines whether the field should fill the height of /// its parent. final int? minLines; /// {@macro flutter.widgets.editableText.expands} final bool expands; /// {@macro flutter.widgets.editableText.readOnly} final bool readOnly; /// Configuration of toolbar options. /// /// If not set, 'select all' and 'paste' default to enabled. /// 'Copy' and 'cut' will be disabled if [obscureText] is true. /// If [readOnly] is true, 'paste' and 'cut' will be disabled regardless. /// {@macro flutter.widgets.editableText.showCursor} final bool? showCursor; /// The maximum number of characters (unicode grapheme clusters) to allow in the text field. /// /// If set, a character counter will be displayed below the /// field showing how many characters have been entered. If set to a number /// greater than 0, it will also display the maximum number allowed. If set /// to [MoonTextInput.noMaxLength] then only the current character count is displayed. /// /// After [maxLength] characters have been input, additional input /// is ignored, unless [maxLengthEnforcement] is set to [MaxLengthEnforcement.none]. /// /// The text field enforces the length with a [LengthLimitingTextInputFormatter], /// which is evaluated after the supplied [inputFormatters], if any. /// /// This value must be either null, [MoonTextInput.noMaxLength], or greater than 0. /// If null (the default) then there is no limit to the number of characters /// that can be entered. If set to [MoonTextInput.noMaxLength], then no limit will /// be enforced, but the number of characters entered will still be displayed. /// /// Whitespace characters (e.g. newline, space, tab) are included in the character count. /// /// If [maxLengthEnforcement] is [MaxLengthEnforcement.none], then more than /// [maxLength] characters may be entered, but the error counter and divider /// will switch to the [decoration]'s [InputDecoration.errorStyle] when the limit is exceeded. /// /// {@macro flutter.services.lengthLimitingTextInputFormatter.maxLength} final int? maxLength; /// Determines how the [maxLength] limit should be enforced. /// /// {@macro flutter.services.textFormatter.effectiveMaxLengthEnforcement} /// /// {@macro flutter.services.textFormatter.maxLengthEnforcement} final MaxLengthEnforcement? maxLengthEnforcement; /// {@macro flutter.widgets.editableText.onChanged} /// /// See also: /// /// * [inputFormatters], which are called before [onChanged] /// runs and can validate and change ("format") the input value. /// * [onEditingComplete], [onSubmitted]: /// which are more specialized input change notifications. final ValueChanged? onChanged; /// {@macro flutter.widgets.editableText.onEditingComplete} final VoidCallback? onEditingComplete; /// {@macro flutter.widgets.editableText.onSubmitted} /// /// See also: /// /// * [TextInputAction.next] and [TextInputAction.previous], which /// automatically shift the focus to the next/previous focusable item when /// the user is done editing. final ValueChanged? onSubmitted; /// {@macro flutter.widgets.editableText.onAppPrivateCommand} final AppPrivateCommandCallback? onAppPrivateCommand; /// {@macro flutter.widgets.editableText.inputFormatters} final List? inputFormatters; /// If false the text field is "disabled": it ignores taps and its /// [decoration] is rendered in grey. /// /// If non-null this property overrides the [decoration]'s /// [InputDecoration.enabled] property. final bool enabled; /// {@macro flutter.widgets.editableText.cursorWidth} final double cursorWidth; /// {@macro flutter.widgets.editableText.cursorHeight} final double? cursorHeight; /// {@macro flutter.widgets.editableText.cursorRadius} final Radius? cursorRadius; /// {@macro flutter.widgets.editableText.cursorOpacityAnimates} final bool? cursorOpacityAnimates; /// The color of the cursor. /// /// The cursor indicates the current location of text insertion point in /// the field. final Color? cursorColor; /// The color of the cursor when the [MoonTextInput] is showing an error. final Color? cursorErrorColor; /// Controls how tall the selection highlight boxes are computed to be. /// /// See [ui.BoxHeightStyle] for details on available styles. final ui.BoxHeightStyle selectionHeightStyle; /// Controls how wide the selection highlight boxes are computed to be. /// /// See [ui.BoxWidthStyle] for details on available styles. final ui.BoxWidthStyle selectionWidthStyle; /// The appearance of the keyboard. /// /// This setting is only honored on iOS devices. /// /// If unset, defaults to [ThemeData.brightness]. final Brightness? keyboardAppearance; /// {@macro flutter.widgets.editableText.scrollPadding} final EdgeInsets scrollPadding; /// {@macro flutter.widgets.editableText.enableInteractiveSelection} final bool enableInteractiveSelection; /// {@macro flutter.widgets.editableText.selectionControls} final TextSelectionControls? selectionControls; /// {@macro flutter.widgets.scrollable.dragStartBehavior} final DragStartBehavior dragStartBehavior; /// {@template flutter.material.textfield.onTap} /// Called for the first tap in a series of taps. /// /// The text field builds a [GestureDetector] to handle input events like tap, /// to trigger focus requests, to move the caret, adjust the selection, etc. /// Handling some of those events by wrapping the text field with a competing /// GestureDetector is problematic. /// /// To unconditionally handle taps, without interfering with the text field's /// internal gesture detector, provide this callback. /// /// If the text field is created with [enabled] false, taps will not be /// recognized. /// /// To be notified when the text field gains or loses the focus, provide a /// [focusNode] and add a listener to that. /// /// To listen to arbitrary pointer events without competing with the /// text field's internal gesture detector, use a [Listener]. /// {@endtemplate} /// /// If [onTapAlwaysCalled] is enabled, this will also be called for consecutive /// taps. final GestureTapCallback? onTap; /// Whether [onTap] should be called for every tap. /// /// Defaults to false, so [onTap] is only called for each distinct tap. When /// enabled, [onTap] is called for every tap including consecutive taps. final bool onTapAlwaysCalled; /// {@macro flutter.widgets.editableText.onTapOutside} /// /// {@tool dartpad} /// This example shows how to use a 'TextFieldTapRegion' to wrap a set of /// "spinner" buttons that increment and decrement a value in the [MoonTextInput] /// without causing the text field to lose keyboard focus. /// /// This example includes a generic 'SpinnerField' class that you can copy /// into your own project and customize. /// /// ** See code in examples/api/lib/widgets/tap_region/text_field_tap_region.0.dart ** /// {@end-tool} /// /// See also: /// /// * [TapRegion] for how the region group is determined. final TapRegionCallback? onTapOutside; /// The cursor for a mouse pointer when it enters or is hovering over the /// widget. final MouseCursor? mouseCursor; /// {@macro flutter.widgets.editableText.scrollPhysics} final ScrollPhysics? scrollPhysics; /// {@macro flutter.widgets.editableText.scrollController} final ScrollController? scrollController; /// {@macro flutter.widgets.editableText.autofillHints} /// {@macro flutter.services.AutofillConfiguration.autofillHints} final Iterable? autofillHints; /// {@macro flutter.material.Material.clipBehavior} /// /// Defaults to [Clip.hardEdge]. final Clip clipBehavior; /// {@template flutter.material.textfield.restorationId} /// Restoration ID to save and restore the state of the text field. /// /// If non-null, the text field will persist and restore its current scroll /// offset and - if no [controller] has been provided - the content of the /// text field. If a [controller] has been provided, it is the responsibility /// of the owner of that controller to persist and restore it, e.g. by using /// a [RestorableTextEditingController]. /// /// The state of this widget is persisted in a [RestorationBucket] claimed /// from the surrounding [RestorationScope] using the provided restoration ID. /// /// See also: /// /// * [RestorationManager], which explains how state restoration works in /// Flutter. /// {@endtemplate} final String? restorationId; /// {@macro flutter.widgets.editableText.scribbleEnabled} final bool scribbleEnabled; /// {@macro flutter.services.TextInputConfiguration.enableIMEPersonalizedLearning} final bool enableIMEPersonalizedLearning; /// {@macro flutter.widgets.editableText.contentInsertionConfiguration} final ContentInsertionConfiguration? contentInsertionConfiguration; /// {@macro flutter.widgets.EditableText.contextMenuBuilder} /// /// If not provided, will build a default menu based on the platform. /// /// See also: /// /// * [AdaptiveTextSelectionToolbar], which is built by default. final EditableTextContextMenuBuilder? contextMenuBuilder; /// Determines whether this text field can request the primary focus. /// /// Defaults to true. If false, the text field will not request focus /// when tapped, or when its context menu is displayed. If false it will not /// be possible to move the focus to the text field with tab key. final bool canRequestFocus; /// {@macro flutter.widgets.undoHistory.controller} final UndoHistoryController? undoController; /// {@macro flutter.widgets.EditableText.spellCheckConfiguration} /// /// If [SpellCheckConfiguration.misspelledTextStyle] is not specified in this /// configuration, then [materialMisspelledTextStyle] is used by default. final SpellCheckConfiguration? spellCheckConfiguration; /// Creates a Moon Design text input. /// /// The [maxLines] property can be set to null to remove the restriction on /// the number of lines. By default, it is one, meaning this is a single-line /// text field. [maxLines] must not be zero. /// /// The [maxLength] property is set to null by default, which means the /// number of characters allowed in the text field is not restricted. If /// [maxLength] is set a character counter will be displayed below the /// field showing how many characters have been entered. If the value is /// set to a positive integer it will also display the maximum allowed /// number of characters to be entered. If the value is set to /// [MoonTextInput.noMaxLength] then only the current length is displayed. /// /// After [maxLength] characters have been input, additional input /// is ignored, unless [maxLengthEnforcement] is set to /// [MaxLengthEnforcement.none]. /// The text field enforces the length with a [LengthLimitingTextInputFormatter], /// which is evaluated after the supplied [inputFormatters], if any. /// The [maxLength] value must be either null or greater than zero. /// /// If [maxLengthEnforcement] is set to [MaxLengthEnforcement.none], then more /// than [maxLength] characters may be entered, and the error counter and /// divider will switch to the [decoration].errorStyle when the limit is /// exceeded. /// /// The text cursor is not shown if [showCursor] is false or if [showCursor] /// is null (the default) and [readOnly] is true. /// /// The [selectionHeightStyle] and [selectionWidthStyle] properties allow /// changing the shape of the selection highlighting. These properties default /// to [ui.BoxHeightStyle.tight] and [ui.BoxWidthStyle.tight] respectively and /// must not be null. /// /// The [textAlign], [autofocus], [obscureText], [readOnly], [autocorrect], /// [scrollPadding], [maxLines], [maxLength], [selectionHeightStyle], /// [selectionWidthStyle], [enableSuggestions], and /// [enableIMEPersonalizedLearning] arguments must not be null. /// /// See also: /// /// * [maxLength], which discusses the precise meaning of "number of /// characters" and how it may differ from the intuitive meaning. const MoonTextInput({ // Moon Design System properties. this.hasFloatingLabel = false, this.borderRadius, this.backgroundColor, this.activeBorderColor, this.errorBorderColor, this.inactiveBorderColor, this.errorColor, this.hoverBorderColor, this.textColor, this.hintTextColor, this.decoration, this.gap, this.height, this.width, this.transitionDuration, this.transitionCurve, this.padding, this.helperPadding, this.textInputSize, this.errorText, this.hintText, this.initialValue, this.helperTextStyle, this.errorBuilder, this.leading, this.trailing, this.helper, // Flutter properties. super.key, this.controller, this.focusNode, this.undoController, TextInputType? keyboardType, this.textInputAction, this.textCapitalization = TextCapitalization.none, this.style, this.strutStyle, this.textAlign = TextAlign.start, this.textAlignVertical, this.textDirection, this.readOnly = false, this.showCursor, this.autofocus = false, this.obscuringCharacter = '•', this.obscureText = false, this.autocorrect = true, SmartDashesType? smartDashesType, SmartQuotesType? smartQuotesType, this.enableSuggestions = true, this.maxLines = 1, this.minLines, this.expands = false, this.maxLength, this.maxLengthEnforcement, this.onChanged, this.onEditingComplete, this.onSubmitted, this.onAppPrivateCommand, this.inputFormatters, this.enabled = true, this.cursorWidth = 2.0, this.cursorHeight, this.cursorRadius, this.cursorOpacityAnimates, this.cursorColor, this.cursorErrorColor, this.selectionHeightStyle = ui.BoxHeightStyle.tight, this.selectionWidthStyle = ui.BoxWidthStyle.tight, this.keyboardAppearance, this.scrollPadding = const EdgeInsets.all(20.0), this.dragStartBehavior = DragStartBehavior.start, bool? enableInteractiveSelection, this.selectionControls, this.onTap, this.onTapAlwaysCalled = false, this.onTapOutside, this.mouseCursor, this.scrollController, this.scrollPhysics, this.autofillHints = const [], this.contentInsertionConfiguration, this.clipBehavior = Clip.hardEdge, this.restorationId, this.scribbleEnabled = true, this.enableIMEPersonalizedLearning = true, this.contextMenuBuilder = _defaultContextMenuBuilder, this.canRequestFocus = true, this.spellCheckConfiguration, this.magnifierConfiguration, }) : assert(obscuringCharacter.length == 1), assert(maxLines == null || maxLines > 0), assert(minLines == null || minLines > 0), assert( (maxLines == null) || (minLines == null) || (maxLines >= minLines), "MinLines can't be greater than maxLines.", ), assert( !expands || !hasFloatingLabel, 'Text input cannot both expand and have a floating label.', ), assert( !expands || (maxLines == null && minLines == null), 'MinLines and maxLines must be null when expands is true.', ), assert( !obscureText || maxLines == 1, 'Obscured fields cannot be multiline.', ), assert( maxLength == null || maxLength == MoonTextInput.noMaxLength || maxLength > 0, ), // Assert the following to prevent unexpected changes in the user's set value. assert( !identical(textInputAction, TextInputAction.newline) || maxLines == 1 || !identical(keyboardType, TextInputType.text), 'Use keyboardType TextInputType.multiline when using TextInputAction.newline on a multiline MoonTextInput.', ), smartDashesType = smartDashesType ?? (obscureText ? SmartDashesType.disabled : SmartDashesType.enabled), smartQuotesType = smartQuotesType ?? (obscureText ? SmartQuotesType.disabled : SmartQuotesType.enabled), keyboardType = keyboardType ?? (maxLines == 1 ? TextInputType.text : TextInputType.multiline), enableInteractiveSelection = enableInteractiveSelection ?? (!readOnly || !obscureText); /// {@macro flutter.widgets.editableText.selectionEnabled} bool get selectionEnabled => enableInteractiveSelection; @override State createState() => _MoonTextInputState(); @override void debugFillProperties(DiagnosticPropertiesBuilder properties) { super.debugFillProperties(properties); properties.add( DiagnosticsProperty( 'controller', controller, defaultValue: null, ), ); properties.add( DiagnosticsProperty( 'focusNode', focusNode, defaultValue: null, ), ); properties.add( DiagnosticsProperty( 'undoController', undoController, defaultValue: null, ), ); properties .add(DiagnosticsProperty('enabled', enabled, defaultValue: null)); properties.add( DiagnosticsProperty( 'keyboardType', keyboardType, defaultValue: TextInputType.text, ), ); properties.add( DiagnosticsProperty('style', style, defaultValue: null), ); properties.add( DiagnosticsProperty('autofocus', autofocus, defaultValue: false), ); properties.add( DiagnosticsProperty( 'obscuringCharacter', obscuringCharacter, defaultValue: '•', ), ); properties.add( DiagnosticsProperty( 'obscureText', obscureText, defaultValue: false, ), ); properties.add( DiagnosticsProperty( 'autocorrect', autocorrect, defaultValue: true, ), ); properties.add( EnumProperty( 'smartDashesType', smartDashesType, defaultValue: obscureText ? SmartDashesType.disabled : SmartDashesType.enabled, ), ); properties.add( EnumProperty( 'smartQuotesType', smartQuotesType, defaultValue: obscureText ? SmartQuotesType.disabled : SmartQuotesType.enabled, ), ); properties.add( DiagnosticsProperty( 'enableSuggestions', enableSuggestions, defaultValue: true, ), ); properties.add(IntProperty('maxLines', maxLines, defaultValue: 1)); properties.add(IntProperty('minLines', minLines, defaultValue: null)); properties.add( DiagnosticsProperty('expands', expands, defaultValue: false), ); properties.add(IntProperty('maxLength', maxLength, defaultValue: null)); properties.add( EnumProperty( 'maxLengthEnforcement', maxLengthEnforcement, defaultValue: null, ), ); properties.add( EnumProperty( 'textInputAction', textInputAction, defaultValue: null, ), ); properties.add( EnumProperty( 'textCapitalization', textCapitalization, defaultValue: TextCapitalization.none, ), ); properties.add( EnumProperty( 'textAlign', textAlign, defaultValue: TextAlign.start, ), ); properties.add( DiagnosticsProperty( 'textAlignVertical', textAlignVertical, defaultValue: null, ), ); properties.add( EnumProperty( 'textDirection', textDirection, defaultValue: null, ), ); properties .add(DoubleProperty('cursorWidth', cursorWidth, defaultValue: 2.0)); properties .add(DoubleProperty('cursorHeight', cursorHeight, defaultValue: null)); properties.add( DiagnosticsProperty( 'cursorRadius', cursorRadius, defaultValue: null, ), ); properties.add( DiagnosticsProperty( 'cursorOpacityAnimates', cursorOpacityAnimates, defaultValue: null, ), ); properties .add(ColorProperty('cursorColor', cursorColor, defaultValue: null)); properties.add( ColorProperty( 'cursorErrorColor', cursorErrorColor, defaultValue: null, ), ); properties.add( DiagnosticsProperty( 'keyboardAppearance', keyboardAppearance, defaultValue: null, ), ); properties.add( DiagnosticsProperty( 'scrollPadding', scrollPadding, defaultValue: const EdgeInsets.all(20.0), ), ); properties.add( FlagProperty( 'selectionEnabled', value: selectionEnabled, defaultValue: true, ifFalse: 'selection disabled', ), ); properties.add( DiagnosticsProperty( 'selectionControls', selectionControls, defaultValue: null, ), ); properties.add( DiagnosticsProperty( 'scrollController', scrollController, defaultValue: null, ), ); properties.add( DiagnosticsProperty( 'scrollPhysics', scrollPhysics, defaultValue: null, ), ); properties.add( DiagnosticsProperty( 'clipBehavior', clipBehavior, defaultValue: Clip.hardEdge, ), ); properties.add( DiagnosticsProperty( 'scribbleEnabled', scribbleEnabled, defaultValue: true, ), ); properties.add( DiagnosticsProperty( 'enableIMEPersonalizedLearning', enableIMEPersonalizedLearning, defaultValue: true, ), ); properties.add( DiagnosticsProperty( 'spellCheckConfiguration', spellCheckConfiguration, defaultValue: null, ), ); properties.add( DiagnosticsProperty>( 'contentCommitMimeTypes', contentInsertionConfiguration?.allowedMimeTypes ?? const [], defaultValue: contentInsertionConfiguration == null ? const [] : kDefaultContentInsertionMimeTypes, ), ); } } class _MoonTextInputState extends State with RestorationMixin implements TextSelectionGestureDetectorBuilderDelegate, AutofillClient { @override final GlobalKey editableTextKey = GlobalKey(); @override late bool forcePressEnabled; late _MoonTextInputSelectionGestureDetectorBuilder _selectionGestureDetectorBuilder; RestorableTextEditingController? _controller; FocusNode? _focusNode; bool _isHovering = false; bool _showSelectionHandles = false; bool get _isEnabled => widget.enabled; bool get _hasError => _hasIntrinsicError || widget.errorText != null; bool get _hasFocus => _effectiveFocusNode.hasFocus; int get _currentLength => _effectiveController.value.text.characters.length; EditableTextState? get _editableText => editableTextKey.currentState; FocusNode get _effectiveFocusNode => widget.focusNode ?? (_focusNode ??= FocusNode()); TextEditingController get _effectiveController => widget.controller ?? _controller!.value; bool get _canRequestFocus { final NavigationMode mode = MediaQuery.maybeNavigationModeOf(context) ?? NavigationMode.traditional; switch (mode) { case NavigationMode.traditional: return widget.canRequestFocus && _isEnabled; case NavigationMode.directional: return true; } } bool get _hasIntrinsicError => widget.maxLength != null && widget.maxLength! > 0 && (widget.controller == null ? !restorePending && _effectiveController.value.text.characters.length > widget.maxLength! : _effectiveController.value.text.characters.length > widget.maxLength!); MaxLengthEnforcement get _effectiveMaxLengthEnforcement => widget.maxLengthEnforcement ?? LengthLimitingTextInputFormatter.getDefaultMaxLengthEnforcement( Theme.of(context).platform, ); Set get _materialState { return { if (!_isEnabled) MaterialState.disabled, if (_isHovering) MaterialState.hovered, if (_hasFocus) MaterialState.focused, if (_hasError) MaterialState.error, }; } @override String? get restorationId => widget.restorationId; @override String get autofillId => _editableText!.autofillId; @override bool get selectionEnabled => widget.selectionEnabled; @override TextInputConfiguration get textInputConfiguration { final List? autofillHints = widget.autofillHints?.toList(growable: false); final AutofillConfiguration autofillConfiguration = autofillHints != null ? AutofillConfiguration( uniqueIdentifier: autofillId, autofillHints: autofillHints, currentEditingValue: _effectiveController.value, ) : AutofillConfiguration.disabled; return _editableText!.textInputConfiguration .copyWith(autofillConfiguration: autofillConfiguration); } void _createLocalController([TextEditingValue? value]) { assert(_controller == null); _controller = value == null ? RestorableTextEditingController() : RestorableTextEditingController.fromValue(value); if (!restorePending) _registerController(); } void _handleFocusChanged() { setState(() { // Rebuilds the widget on focus change to toggle text selection highlight. }); } void _handleSelectionChanged( TextSelection selection, SelectionChangedCause? cause, ) { final bool willShowSelectionHandles = _shouldShowSelectionHandles(cause); if (willShowSelectionHandles != _showSelectionHandles) { setState(() => _showSelectionHandles = willShowSelectionHandles); } switch (Theme.of(context).platform) { case TargetPlatform.iOS: case TargetPlatform.macOS: case TargetPlatform.linux: case TargetPlatform.windows: case TargetPlatform.fuchsia: case TargetPlatform.android: if (cause == SelectionChangedCause.longPress) { _editableText?.bringIntoView(selection.extent); } } switch (Theme.of(context).platform) { case TargetPlatform.iOS: case TargetPlatform.fuchsia: case TargetPlatform.android: break; case TargetPlatform.macOS: case TargetPlatform.linux: case TargetPlatform.windows: if (cause == SelectionChangedCause.drag) _editableText?.hideToolbar(); } } void _handleHover(bool hovering) { if (_isEnabled && hovering != _isHovering) { setState(() => _isHovering = hovering); } } /// Toggle the toolbar when a selection handle is tapped. void _handleSelectionHandleTapped() { if (_effectiveController.selection.isCollapsed) { _editableText!.toggleToolbar(); } } void _registerController() { assert(_controller != null); registerForRestoration(_controller!, 'controller'); } void _requestKeyboard() => _editableText?.requestKeyboard(); bool _shouldShowSelectionHandles(SelectionChangedCause? cause) { // Handles are not shown when the text field is activated by events that don't trigger the selection overlay. if (!_selectionGestureDetectorBuilder.shouldShowSelectionToolbar) { return false; } if (cause == SelectionChangedCause.keyboard) return false; if (widget.readOnly && _effectiveController.selection.isCollapsed) { return false; } if (!_isEnabled) return false; if (cause == SelectionChangedCause.longPress || cause == SelectionChangedCause.scribble) return true; if (_effectiveController.text.isNotEmpty) return true; return false; } MoonTextInputSizeProperties _getMoonTextInputSize( BuildContext context, MoonTextInputSize? moonTextInputSize, ) { switch (moonTextInputSize) { case MoonTextInputSize.sm: return context.moonTheme?.textInputTheme.sizes.sm ?? MoonTextInputSizes(tokens: MoonTokens.light).sm; case MoonTextInputSize.md: return context.moonTheme?.textInputTheme.sizes.md ?? MoonTextInputSizes(tokens: MoonTokens.light).md; case MoonTextInputSize.lg: return context.moonTheme?.textInputTheme.sizes.lg ?? MoonTextInputSizes(tokens: MoonTokens.light).lg; case MoonTextInputSize.xl: return context.moonTheme?.textInputTheme.sizes.xl ?? MoonTextInputSizes(tokens: MoonTokens.light).xl; default: return context.moonTheme?.textInputTheme.sizes.md ?? MoonTextInputSizes(tokens: MoonTokens.light).md; } } @override void autofill(TextEditingValue newEditingValue) => _editableText!.autofill(newEditingValue); @override void initState() { super.initState(); _selectionGestureDetectorBuilder = _MoonTextInputSelectionGestureDetectorBuilder(state: this); if (widget.controller == null) _createLocalController(); _effectiveFocusNode.canRequestFocus = widget.canRequestFocus && _isEnabled; _effectiveFocusNode.addListener(_handleFocusChanged); } @override void didChangeDependencies() { super.didChangeDependencies(); _effectiveFocusNode.canRequestFocus = _canRequestFocus; } @override void didUpdateWidget(MoonTextInput oldWidget) { super.didUpdateWidget(oldWidget); if (widget.controller == null && oldWidget.controller != null) { _createLocalController(oldWidget.controller!.value); } else if (widget.controller != null && oldWidget.controller == null) { unregisterFromRestoration(_controller!); _controller!.dispose(); _controller = null; } if (widget.focusNode != oldWidget.focusNode) { (oldWidget.focusNode ?? _focusNode)?.removeListener(_handleFocusChanged); (widget.focusNode ?? _focusNode)?.addListener(_handleFocusChanged); } _effectiveFocusNode.canRequestFocus = _canRequestFocus; if (_hasFocus && widget.readOnly != oldWidget.readOnly && _isEnabled) { if (_effectiveController.selection.isCollapsed) { _showSelectionHandles = !widget.readOnly; } } } @override void restoreState(RestorationBucket? oldBucket, bool initialRestore) { if (_controller != null) _registerController(); } @override void dispose() { _effectiveFocusNode.removeListener(_handleFocusChanged); _focusNode?.dispose(); _controller?.dispose(); super.dispose(); } @override Widget build(BuildContext context) { assert(debugCheckHasMaterial(context)); assert(debugCheckHasMaterialLocalizations(context)); assert(debugCheckHasDirectionality(context)); assert( !(widget.style != null && widget.style!.inherit == false && (widget.style!.fontSize == null || widget.style!.textBaseline == null)), 'Inherit false style must supply fontSize and textBaseline.', ); final ThemeData theme = Theme.of(context); final DefaultSelectionStyle selectionStyle = DefaultSelectionStyle.of(context); final Brightness keyboardAppearance = widget.keyboardAppearance ?? theme.brightness; final TextEditingController controller = _effectiveController; final FocusNode focusNode = _effectiveFocusNode; final MoonTextInputSizeProperties effectiveMoonTextInputSize = _getMoonTextInputSize(context, widget.textInputSize); final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? effectiveMoonTextInputSize.borderRadius; final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.textInputTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveActiveBorderColor = widget.activeBorderColor ?? context.moonTheme?.textInputTheme.colors.activeBorderColor ?? MoonColors.light.piccolo; final Color effectiveInactiveBorderColor = widget.inactiveBorderColor ?? context.moonTheme?.textInputTheme.colors.inactiveBorderColor ?? MoonColors.light.beerus; final Color effectiveErrorColor = widget.errorColor ?? context.moonTheme?.textInputTheme.colors.errorColor ?? MoonColors.light.chichi; final Color effectiveCursorErrorColor = widget.cursorErrorColor ?? context.moonTheme?.textInputTheme.colors.errorColor ?? MoonColors.light.chichi; final Color effectiveHoverBorderColor = widget.hoverBorderColor ?? context.moonTheme?.textInputTheme.colors.hoverBorderColor ?? MoonColors.light.beerus; final Color effectiveTextColor = widget.textColor ?? context.moonTheme?.textInputTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveHintTextColor = widget.hintTextColor ?? context.moonTheme?.textInputTheme.colors.helperTextColor ?? MoonColors.light.trunks; final double effectiveGap = widget.gap ?? effectiveMoonTextInputSize.gap; final double effectiveHeight = widget.height ?? effectiveMoonTextInputSize.height; final double effectiveDisabledOpacityValue = context.moonOpacities?.disabled ?? MoonOpacities.opacities.disabled; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.textInputTheme.properties.transitionDuration ?? const Duration(milliseconds: 167); final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.textInputTheme.properties.transitionCurve ?? Curves.fastOutSlowIn; final EdgeInsetsGeometry effectivePadding = widget.padding ?? effectiveMoonTextInputSize.padding; final EdgeInsets resolvedContentPadding = effectivePadding.resolve(Directionality.of(context)); final EdgeInsetsGeometry effectiveHelperPadding = widget.helperPadding ?? context.moonTheme?.textInputTheme.properties.helperPadding ?? EdgeInsets.only( left: MoonSizes.sizes.x3s, top: MoonSizes.sizes.x4s, right: MoonSizes.sizes.x3s, ); final TextStyle effectiveTextStyle = widget.style ?? effectiveMoonTextInputSize.textStyle; final TextStyle effectiveHelperTextStyle = widget.helperTextStyle ?? context.moonTheme?.textInputTheme.properties.helperTextStyle ?? MoonTypography.typography.body.text12; final MoonSquircleBorder defaultBorder = MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), side: BorderSide( color: effectiveInactiveBorderColor, width: MoonBorders.borders.defaultBorderWidth, ), ); final MoonSquircleBorder hoverBorder = MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), side: BorderSide( color: effectiveHoverBorderColor, width: MoonBorders.borders.activeBorderWidth, ), ); final MoonSquircleBorder focusBorder = MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), side: BorderSide( color: effectiveActiveBorderColor, width: MoonBorders.borders.activeBorderWidth, ), ); final MoonSquircleBorder errorBorder = MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), side: BorderSide( color: widget.errorBorderColor ?? effectiveErrorColor, width: MoonBorders.borders.activeBorderWidth, ), ); final MoonSquircleBorder resolvedBorder = _hasError ? errorBorder : _hasFocus ? focusBorder : _isHovering ? hoverBorder : defaultBorder; final bool paintCursorAboveText; final Color cursorColor; final Color selectionColor; bool? cursorOpacityAnimates = widget.cursorOpacityAnimates; Color? autocorrectionTextRectColor; Offset? cursorOffset; Radius? cursorRadius = widget.cursorRadius; VoidCallback? handleDidGainAccessibilityFocus; TextSelectionControls? textSelectionControls = widget.selectionControls; final MouseCursor effectiveMouseCursor = MaterialStateProperty.resolveAs( widget.mouseCursor ?? MaterialStateMouseCursor.textable, _materialState, ); final List formatters = [ ...?widget.inputFormatters, if (widget.maxLength != null) LengthLimitingTextInputFormatter( widget.maxLength, maxLengthEnforcement: _effectiveMaxLengthEnforcement, ), ]; // Sets configuration as disabled if not specified; otherwise, ensures the correct style // for misspelled words on the current platform, unless a custom style is provided. final SpellCheckConfiguration spellCheckConfiguration; switch (defaultTargetPlatform) { case TargetPlatform.iOS: case TargetPlatform.macOS: spellCheckConfiguration = CupertinoTextField.inferIOSSpellCheckConfiguration( widget.spellCheckConfiguration, ); case TargetPlatform.android: case TargetPlatform.fuchsia: case TargetPlatform.linux: case TargetPlatform.windows: spellCheckConfiguration = TextField.inferAndroidSpellCheckConfiguration( widget.spellCheckConfiguration, ); } final int? semanticsMaxValueLength; if (_effectiveMaxLengthEnforcement != MaxLengthEnforcement.none && widget.maxLength != null && widget.maxLength! > 0) { semanticsMaxValueLength = widget.maxLength; } else { semanticsMaxValueLength = null; } switch (theme.platform) { case TargetPlatform.iOS: final CupertinoThemeData cupertinoTheme = CupertinoTheme.of(context); forcePressEnabled = true; textSelectionControls ??= cupertinoTextSelectionHandleControls; paintCursorAboveText = true; cursorOpacityAnimates ??= true; cursorColor = _hasError ? effectiveCursorErrorColor : widget.cursorColor ?? effectiveTextColor; selectionColor = selectionStyle.selectionColor ?? cupertinoTheme.primaryColor.withOpacity(0.40); cursorRadius ??= const Radius.circular(2.0); cursorOffset = Offset( iOSHorizontalOffset / MediaQuery.devicePixelRatioOf(context), 0, ); autocorrectionTextRectColor = selectionColor; case TargetPlatform.macOS: final CupertinoThemeData cupertinoTheme = CupertinoTheme.of(context); forcePressEnabled = false; textSelectionControls ??= cupertinoDesktopTextSelectionHandleControls; paintCursorAboveText = true; cursorOpacityAnimates ??= false; cursorColor = _hasError ? effectiveCursorErrorColor : widget.cursorColor ?? effectiveTextColor; selectionColor = selectionStyle.selectionColor ?? cupertinoTheme.primaryColor.withOpacity(0.40); cursorRadius ??= const Radius.circular(2.0); cursorOffset = Offset( iOSHorizontalOffset / MediaQuery.devicePixelRatioOf(context), 0, ); handleDidGainAccessibilityFocus = () { // Automatically activates MoonTextInput on receiving accessibility focus. if (!_hasFocus && _effectiveFocusNode.canRequestFocus) { _effectiveFocusNode.requestFocus(); } }; case TargetPlatform.android: case TargetPlatform.fuchsia: forcePressEnabled = false; textSelectionControls ??= materialTextSelectionHandleControls; paintCursorAboveText = false; cursorOpacityAnimates ??= false; cursorColor = _hasError ? effectiveCursorErrorColor : widget.cursorColor ?? effectiveTextColor; selectionColor = selectionStyle.selectionColor ?? theme.colorScheme.primary.withOpacity(0.40); case TargetPlatform.linux: forcePressEnabled = false; textSelectionControls ??= desktopTextSelectionHandleControls; paintCursorAboveText = false; cursorOpacityAnimates ??= false; cursorColor = _hasError ? effectiveCursorErrorColor : widget.cursorColor ?? effectiveTextColor; selectionColor = selectionStyle.selectionColor ?? theme.colorScheme.primary.withOpacity(0.40); case TargetPlatform.windows: forcePressEnabled = false; textSelectionControls ??= desktopTextSelectionHandleControls; paintCursorAboveText = false; cursorOpacityAnimates ??= false; cursorColor = _hasError ? effectiveCursorErrorColor : widget.cursorColor ?? effectiveTextColor; selectionColor = selectionStyle.selectionColor ?? theme.colorScheme.primary.withOpacity(0.40); handleDidGainAccessibilityFocus = () { // Automatically activates MoonTextInput on receiving accessibility focus. if (!_hasFocus && _effectiveFocusNode.canRequestFocus) { _effectiveFocusNode.requestFocus(); } }; } Widget child = RepaintBoundary( child: UnmanagedRestorationScope( bucket: bucket, child: EditableText( key: editableTextKey, autocorrect: widget.autocorrect, autocorrectionTextRectColor: autocorrectionTextRectColor, autofillClient: this, autofocus: widget.autofocus, backgroundCursorColor: CupertinoColors.inactiveGray, clipBehavior: widget.clipBehavior, contentInsertionConfiguration: widget.contentInsertionConfiguration, contextMenuBuilder: widget.contextMenuBuilder, controller: controller, cursorColor: cursorColor, cursorHeight: widget.cursorHeight, cursorOffset: cursorOffset, cursorOpacityAnimates: cursorOpacityAnimates, cursorRadius: cursorRadius, cursorWidth: widget.cursorWidth, dragStartBehavior: widget.dragStartBehavior, enableIMEPersonalizedLearning: widget.enableIMEPersonalizedLearning, enableInteractiveSelection: widget.enableInteractiveSelection, enableSuggestions: widget.enableSuggestions, expands: widget.expands, focusNode: focusNode, inputFormatters: formatters, keyboardAppearance: keyboardAppearance, keyboardType: widget.keyboardType, magnifierConfiguration: widget.magnifierConfiguration ?? TextMagnifier.adaptiveMagnifierConfiguration, maxLines: widget.maxLines, minLines: widget.minLines, mouseCursor: MouseCursor.defer, // MoonTextInput will handle the cursor. obscureText: widget.obscureText, obscuringCharacter: widget.obscuringCharacter, onAppPrivateCommand: widget.onAppPrivateCommand, onChanged: widget.onChanged, onEditingComplete: widget.onEditingComplete, onSelectionChanged: _handleSelectionChanged, onSelectionHandleTapped: _handleSelectionHandleTapped, onSubmitted: widget.onSubmitted, onTapOutside: widget.onTapOutside, paintCursorAboveText: paintCursorAboveText, readOnly: widget.readOnly || !_isEnabled, rendererIgnoresPointer: true, restorationId: 'editable', scribbleEnabled: widget.scribbleEnabled, scrollController: widget.scrollController, scrollPadding: widget.scrollPadding, scrollPhysics: widget.scrollPhysics, selectionColor: focusNode.hasFocus ? selectionColor : null, selectionControls: widget.selectionEnabled ? textSelectionControls : null, selectionHeightStyle: widget.selectionHeightStyle, selectionWidthStyle: widget.selectionWidthStyle, showCursor: widget.showCursor, showSelectionHandles: _showSelectionHandles, smartDashesType: widget.smartDashesType, smartQuotesType: widget.smartQuotesType, spellCheckConfiguration: spellCheckConfiguration, strutStyle: widget.strutStyle, style: effectiveTextStyle.copyWith(color: effectiveTextColor), textAlign: widget.textAlign, textCapitalization: widget.textCapitalization, textDirection: widget.textDirection, textInputAction: widget.textInputAction, undoController: widget.undoController, ), ), ); child = AnimatedBuilder( animation: Listenable.merge([focusNode, controller]), builder: (BuildContext context, Widget? child) { return BorderContainer( backgroundColor: effectiveBackgroundColor, border: resolvedBorder, decoration: widget.decoration, expands: widget.expands, width: widget.width, height: effectiveHeight, duration: effectiveTransitionDuration, curve: effectiveTransitionCurve, child: Row( crossAxisAlignment: widget.expands ? CrossAxisAlignment.center : CrossAxisAlignment.stretch, children: [ if (widget.leading != null) Padding( padding: EdgeInsetsDirectional.only( start: resolvedContentPadding.left, end: effectiveGap, ), child: widget.leading, ), Expanded( child: Padding( padding: EdgeInsetsDirectional.only( start: widget.leading != null ? 0 : resolvedContentPadding.left, end: widget.trailing != null ? 0 : resolvedContentPadding.right, ), child: Stack( children: [ Align( alignment: widget.hasFloatingLabel ? Alignment.bottomCenter : widget.textAlignVertical == TextAlignVertical.top ? Alignment.topCenter : Alignment.center, child: Padding( padding: EdgeInsets.symmetric( vertical: resolvedContentPadding.bottom, ), child: child, ), ), if (widget.hintText != null) Padding( padding: EdgeInsets.symmetric( vertical: resolvedContentPadding.top, ), child: AnimatedScale( alignment: Directionality.of(context) == TextDirection.ltr ? Alignment.topLeft : Alignment.topRight, duration: effectiveTransitionDuration, scale: widget.hasFloatingLabel && (focusNode.hasFocus || controller.value.text.isNotEmpty) ? 0.75 : 1.0, child: AnimatedAlign( duration: effectiveTransitionDuration, alignment: widget.textAlignVertical == TextAlignVertical.top || (widget.hasFloatingLabel && (focusNode.hasFocus || controller.value.text.isNotEmpty)) ? AlignmentDirectional.topStart : AlignmentDirectional.centerStart, child: AnimatedOpacity( opacity: (controller.value.text.isEmpty || widget.hasFloatingLabel) ? 1.0 : 0.0, duration: effectiveTransitionDuration, curve: effectiveTransitionCurve, child: Text( widget.hintText!, maxLines: 1, overflow: TextOverflow.ellipsis, textAlign: widget.textAlign, style: effectiveTextStyle.copyWith( color: effectiveHintTextColor, ), ), ), ), ), ), ], ), ), ), if (widget.trailing != null) Padding( padding: EdgeInsetsDirectional.only( start: effectiveGap, end: resolvedContentPadding.right, ), child: widget.trailing, ), ], ), ); }, child: child, ); child = AnimatedOpacity( opacity: widget.enabled ? 1.0 : effectiveDisabledOpacityValue, curve: effectiveTransitionCurve, duration: effectiveTransitionDuration, child: Column( mainAxisSize: MainAxisSize.min, children: [ child, if (widget.helper != null || (widget.errorText != null)) RepaintBoundary( child: IconTheme( data: IconThemeData( color: widget.errorText != null ? effectiveErrorColor : effectiveHintTextColor, ), child: DefaultTextStyle( style: effectiveHelperTextStyle.copyWith( color: widget.errorText != null ? effectiveErrorColor : effectiveHintTextColor, ), child: widget.errorText != null ? widget.errorBuilder?.call(context, widget.errorText) ?? Padding( padding: effectiveHelperPadding, child: MoonErrorMessage(errorText: widget.errorText!), ) : Padding( padding: effectiveHelperPadding, child: widget.helper, ), ), ), ), ], ), ); return MouseRegion( cursor: effectiveMouseCursor, onEnter: (PointerEnterEvent event) => _handleHover(true), onExit: (PointerExitEvent event) => _handleHover(false), child: TextFieldTapRegion( child: IgnorePointer( ignoring: !_isEnabled, child: AnimatedBuilder( animation: controller, // Changes the _currentLength. builder: (BuildContext context, Widget? child) { return Semantics( maxValueLength: semanticsMaxValueLength, currentValueLength: _currentLength, onTap: widget.readOnly ? null : () { if (!_effectiveController.selection.isValid) { _effectiveController.selection = TextSelection.collapsed( offset: _effectiveController.text.length, ); } _requestKeyboard(); }, onDidGainAccessibilityFocus: handleDidGainAccessibilityFocus, child: child, ); }, child: _selectionGestureDetectorBuilder.buildGestureDetector( behavior: HitTestBehavior.translucent, child: child, ), ), ), ), ); } } class _MoonTextInputSelectionGestureDetectorBuilder extends TextSelectionGestureDetectorBuilder { _MoonTextInputSelectionGestureDetectorBuilder({ required _MoonTextInputState state, }) : _state = state, super(delegate: state); final _MoonTextInputState _state; @override void onForcePressStart(ForcePressDetails details) { super.onForcePressStart(details); if (delegate.selectionEnabled && shouldShowSelectionToolbar) { editableText.showToolbar(); } } @override void onForcePressEnd(ForcePressDetails details) { // Not required. } @override void onSingleTapUp(TapDragUpDetails details) { super.onSingleTapUp(details); _state._requestKeyboard(); } @override bool get onUserTapAlwaysCalled => _state.widget.onTapAlwaysCalled; @override void onUserTap() { _state.widget.onTap?.call(); } @override void onSingleLongTapStart(LongPressStartDetails details) { super.onSingleLongTapStart(details); if (delegate.selectionEnabled) { switch (Theme.of(_state.context).platform) { case TargetPlatform.iOS: case TargetPlatform.macOS: break; case TargetPlatform.android: case TargetPlatform.fuchsia: case TargetPlatform.linux: case TargetPlatform.windows: Feedback.forLongPress(_state.context); } } } } ================================================ FILE: lib/src/widgets/text_input_group/text_input_group.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_design/src/widgets/common/base_control.dart'; import 'package:moon_design/src/widgets/common/border_container.dart'; import 'package:moon_design/src/widgets/common/error_message_widgets.dart'; import 'package:moon_design/src/widgets/text_input/form_text_input.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonTextInputGroupOrientation { vertical, horizontal, } typedef MoonTextInputGroupErrorBuilder = Widget Function( BuildContext context, List errorText, ); class MoonTextInputGroup extends StatefulWidget { /// Whether the text input group is enabled. When false, taps are ignored and /// the opacity reduced. final bool enabled; /// The border radius of the text input group. final BorderRadiusGeometry? borderRadius; /// {@macro flutter.material.Material.clipBehavior} /// /// Defaults to [Clip.hardEdge]. final Clip? clipBehavior; /// The background color of the text input group. final Color? backgroundColor; /// The default border color of the text input group. final Color? borderColor; /// The color of the text input group in error state. final Color? errorColor; /// The text color of the text input group hint. final Color? hintTextColor; /// The border color of the text input group on hover. final Color? hoverBorderColor; /// The duration of the text input group transition animation /// (enable and disable). final Duration? transitionDuration; /// The curve of the text input group transition animation /// (enable and disable). final Curve? transitionCurve; /// The padding of the [helper] and [errorBuilder] widgets. final EdgeInsetsGeometry? helperPadding; /// The padding of the text content. final EdgeInsetsGeometry? textPadding; /// The custom decoration of the text input group. final Decoration? decoration; /// The semantic label for the text input group widget. final String? semanticLabel; /// The text style of the [helper] or error state text. final TextStyle? helperTextStyle; /// The orientation of the text input group. final MoonTextInputGroupOrientation orientation; /// The list of text inputs to display as the children of the text input group. final List children; /// A builder to build the text input group error widget. final MoonTextInputGroupErrorBuilder? errorBuilder; /// The widget to display below the text input group. Not displayed in error /// state. final Widget? helper; /// Creates a Moon Design text input group. const MoonTextInputGroup({ super.key, this.enabled = true, this.borderRadius, this.clipBehavior, this.backgroundColor, this.borderColor, this.errorColor, this.hintTextColor, this.hoverBorderColor, this.transitionDuration, this.transitionCurve, this.helperPadding, this.textPadding, this.decoration, this.semanticLabel, this.helperTextStyle, this.orientation = MoonTextInputGroupOrientation.vertical, required this.children, this.errorBuilder, this.helper, }); @override State createState() => _MoonTextInputGroupState(); } class _MoonTextInputGroupState extends State { late final List _validatorErrors = List.filled(widget.children.length, null); late List _previousValidatorErrors; bool get _groupHasValidationError => _validatorErrors.nonNulls.toList().isNotEmpty; bool get _groupHasErrorText => widget.children .any((MoonFormTextInput child) => child.configuration.errorText != null); bool get _groupHasError => _groupHasValidationError || _groupHasErrorText; bool get _groupHasAllValidationErrors => _validatorErrors.nonNulls.length == widget.children.length; bool get _groupHasAllErrorTexts => widget.children.every( (MoonFormTextInput child) => child.configuration.errorText != null, ); bool get _groupIsInErrorState => _groupHasAllValidationErrors || _groupHasAllErrorTexts; bool get _shouldShowError => _groupHasError || _groupIsInErrorState; void _handleValidationError(int index, String? errorText) { _previousValidatorErrors = _validatorErrors; if (_previousValidatorErrors[index] == errorText) return; _validatorErrors[index] = errorText; WidgetsBinding.instance.addPostFrameCallback((Duration _) { // Rebuild the widget to show the error. if (mounted) setState(() {}); }); } @override Widget build(BuildContext context) { final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.textInputGroupTheme.properties.borderRadius ?? BorderRadius.circular(8); final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.textInputGroupTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveBorderColor = widget.borderColor ?? context.moonTheme?.textInputGroupTheme.colors.borderColor ?? MoonColors.light.beerus; final Color effectiveErrorColor = widget.errorColor ?? context.moonTheme?.textInputGroupTheme.colors.errorColor ?? MoonColors.light.chichi; final Color effectiveHelperTextColor = widget.hintTextColor ?? context.moonTheme?.textInputGroupTheme.colors.helperTextColor ?? MoonColors.light.trunks; final EdgeInsetsGeometry effectiveHelperPadding = widget.helperPadding ?? context.moonTheme?.textInputGroupTheme.properties.helperPadding ?? EdgeInsets.only( left: MoonSizes.sizes.x3s, top: MoonSizes.sizes.x4s, right: MoonSizes.sizes.x3s, ); final TextStyle effectiveHelperTextStyle = widget.helperTextStyle ?? context.moonTheme?.textInputGroupTheme.properties.helperTextStyle ?? MoonTypography.typography.body.text12; final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.textInputGroupTheme.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.textInputGroupTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; final List effectiveErrorMessages = _validatorErrors.nonNulls.toList().isNotEmpty ? _validatorErrors.nonNulls.toList() : widget.children .map((MoonFormTextInput child) => child.configuration.errorText) .nonNulls .toList(); List childrenWithDivider({required bool shouldHideDivider}) => List.generate( widget.children.length * 2 - 1, (int index) { final int derivedIndex = index ~/ 2; final MoonFormTextInputConfiguration configuration = widget.children[derivedIndex].configuration; final bool selfShowError = ((configuration.errorText != null && _validatorErrors[derivedIndex] == null) && !_groupHasValidationError && !_groupHasAllErrorTexts) || (_validatorErrors[derivedIndex] != null && !_groupHasAllValidationErrors); Widget child = MoonFormTextInput( activeBorderColor: configuration.activeBorderColor, autocorrect: configuration.autocorrect, autofillHints: configuration.autofillHints, autofocus: configuration.autofocus, autovalidateMode: configuration.autovalidateMode, backgroundColor: Colors.transparent, borderRadius: configuration.borderRadius, canRequestFocus: configuration.canRequestFocus, clipBehavior: configuration.clipBehavior, contentInsertionConfiguration: configuration.contentInsertionConfiguration, contextMenuBuilder: configuration.contextMenuBuilder, controller: configuration.controller, cursorColor: configuration.cursorColor, cursorHeight: configuration.cursorHeight, cursorOpacityAnimates: configuration.cursorOpacityAnimates, cursorRadius: configuration.cursorRadius, cursorWidth: configuration.cursorWidth, decoration: configuration.decoration, dragStartBehavior: configuration.dragStartBehavior, enabled: configuration.enabled, enableIMEPersonalizedLearning: configuration.enableIMEPersonalizedLearning, enableInteractiveSelection: configuration.enableInteractiveSelection, enableSuggestions: configuration.enableSuggestions, errorBorderColor: selfShowError ? configuration.errorColor : Colors.transparent, errorBuilder: (BuildContext context, String? errorText) => const SizedBox.shrink(), errorColor: configuration.errorColor, errorText: configuration.errorText, expands: configuration.expands, focusNode: configuration.focusNode, gap: configuration.gap, hasFloatingLabel: configuration.hasFloatingLabel, height: configuration.height, helper: configuration.helper, helperPadding: configuration.helperPadding, helperTextStyle: configuration.helperTextStyle, hintText: configuration.hintText, hintTextColor: configuration.hintTextColor, hoverBorderColor: configuration.hoverBorderColor, inactiveBorderColor: Colors.transparent, initialValue: configuration.initialValue, inputFormatters: configuration.inputFormatters, keyboardAppearance: configuration.keyboardAppearance, keyboardType: configuration.keyboardType, leading: configuration.leading, magnifierConfiguration: configuration.magnifierConfiguration, maxLength: configuration.maxLength, maxLengthEnforcement: configuration.maxLengthEnforcement, maxLines: configuration.maxLines, minLines: configuration.minLines, mouseCursor: configuration.mouseCursor, obscureText: configuration.obscureText, obscuringCharacter: configuration.obscuringCharacter, onAppPrivateCommand: configuration.onAppPrivateCommand, onChanged: configuration.onChanged, onEditingComplete: configuration.onEditingComplete, onSubmitted: configuration.onSubmitted, onSaved: configuration.onSaved, onTap: configuration.onTap, onTapOutside: configuration.onTapOutside, padding: configuration.padding, readOnly: configuration.readOnly, restorationId: configuration.restorationId, scribbleEnabled: configuration.scribbleEnabled, scrollController: configuration.scrollController, scrollPadding: configuration.scrollPadding, scrollPhysics: configuration.scrollPhysics, selectionControls: configuration.selectionControls, selectionHeightStyle: configuration.selectionHeightStyle, selectionWidthStyle: configuration.selectionWidthStyle, showCursor: configuration.showCursor, smartDashesType: configuration.smartDashesType, smartQuotesType: configuration.smartQuotesType, spellCheckConfiguration: configuration.spellCheckConfiguration, strutStyle: configuration.strutStyle, style: configuration.style, textAlign: configuration.textAlign, textAlignVertical: configuration.textAlignVertical, textCapitalization: configuration.textCapitalization, textColor: configuration.textColor, textDirection: configuration.textDirection, textInputAction: configuration.textInputAction, textInputSize: configuration.textInputSize, trailing: configuration.trailing, transitionCurve: configuration.transitionCurve, transitionDuration: configuration.transitionDuration, undoController: configuration.undoController, validationStatusCallback: (errorText) => _handleValidationError(derivedIndex, errorText), validator: configuration.validator, width: configuration.width, ); child = configuration.width != null ? SizedBox( width: configuration.width, child: child, ) : Flexible(child: child); return index.isEven ? child // Animated divider : BorderContainer( height: widget.orientation == MoonTextInputGroupOrientation.horizontal ? double.infinity : 1, width: widget.orientation == MoonTextInputGroupOrientation.vertical ? double.infinity : 1, duration: effectiveTransitionDuration, curve: effectiveTransitionCurve, border: MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), side: BorderSide( color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors ? effectiveErrorColor : shouldHideDivider || (_groupHasError || _groupHasValidationError) ? Colors.transparent : effectiveBorderColor, ), ), child: const SizedBox.shrink(), ); }, growable: false, ); return Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: [ MoonBaseControl( semanticLabel: widget.semanticLabel, isFocusable: false, showFocusEffect: false, onTap: widget.enabled ? () {} : null, propagateGesturesToChild: true, builder: ( BuildContext context, bool isEnabled, bool isHovered, bool isFocused, bool isPressed, ) { return BorderContainer( clipBehavior: widget.clipBehavior ?? Clip.none, backgroundColor: effectiveBackgroundColor, decoration: widget.decoration, duration: effectiveTransitionDuration, curve: effectiveTransitionCurve, border: MoonSquircleBorder( borderRadius: effectiveBorderRadius.squircleBorderRadius(context), side: BorderSide( color: (!_groupHasValidationError && _groupHasAllErrorTexts) || _groupHasAllValidationErrors ? effectiveErrorColor : effectiveBorderColor, ), ), child: _InputGroupOrientation( orientation: widget.orientation, children: childrenWithDivider( shouldHideDivider: isHovered || isFocused, ), ), ); }, ), if (widget.helper != null || _shouldShowError) IconTheme( data: IconThemeData( color: _shouldShowError ? effectiveErrorColor : effectiveHelperTextColor, ), child: DefaultTextStyle( style: effectiveHelperTextStyle.copyWith( color: _shouldShowError ? effectiveErrorColor : effectiveHelperTextColor, ), child: Padding( padding: effectiveHelperPadding, child: _shouldShowError ? (widget.errorBuilder ?.call(context, effectiveErrorMessages) ?? MoonErrorMessages(errors: effectiveErrorMessages)) : widget.helper, ), ), ), ], ); } } class _InputGroupOrientation extends StatelessWidget { final MoonTextInputGroupOrientation orientation; final List children; const _InputGroupOrientation({ required this.orientation, required this.children, }); @override Widget build(BuildContext context) { return switch (orientation) { MoonTextInputGroupOrientation.vertical => Column( mainAxisSize: MainAxisSize.min, crossAxisAlignment: CrossAxisAlignment.stretch, children: children, ), MoonTextInputGroupOrientation.horizontal => SizedBox( height: 56, width: 300, child: Row( mainAxisSize: MainAxisSize.min, children: children, ), ), }; } } ================================================ FILE: lib/src/widgets/toast/toast.dart ================================================ import 'dart:async'; import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/toast/toast_theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/sizes.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/extensions.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/utils/squircle/squircle_border.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonToastVariant { original, inverted, } class MoonToast { static const double _toastTravelDistance = 64.0; static const Duration _timeBetweenToasts = Duration(milliseconds: 200); static final _toastQueue = <_ToastEntry>[]; static Timer? _timer; static OverlayEntry? _entry; /// Creates a Moon Design toast. const MoonToast(); /// Displays a Moon Design toast. static void show( BuildContext context, { /// The alignment (position) of the toast. AlignmentGeometry toastAlignment = Alignment.bottomCenter, /// Whether the toast is persistent (attaches to root navigator). bool isPersistent = true, /// Whether to use the [SafeArea] for the toast (takes into account notches /// and native system bars). bool useSafeArea = true, /// The border radius of the toast. BorderRadiusGeometry? borderRadius, /// The background color of the toast. Color? backgroundColor, /// The horizontal gap between the leading, label and trailing widgets of /// the toast. double? horizontalGap, /// The vertical gap between the toast header and content. double? verticalGap, /// The width of the toast. If not specified, adjusts automatically to fit /// its child elements. double? width, /// The duration to display the toast. Duration? displayDuration, /// The duration of the toast transition animation (slide in or out). Duration? transitionDuration, /// The curve of the toast transition animation (slide in or out). Curve? transitionCurve, /// The margin of the toast. EdgeInsetsGeometry? margin, /// The padding of the toast. EdgeInsetsGeometry? padding, /// The list of shadows applied to the toast. List? toastShadows, /// The theming color scheme variant for the toast. /// Inverted variant flips the theming color scheme (uses dark colors /// instead of light colors). MoonToastVariant variant = MoonToastVariant.original, /// The custom decoration of the toast. Decoration? decoration, /// The semantic label for the toast. String? semanticLabel, /// The widget to display before the label widget of the toast. Widget? leading, /// The primary content of the toast widget. required Widget label, /// The widget to display after the label widget of the toast. Widget? trailing, /// The widget to display below the toast header. Widget? content, }) { assert( displayDuration == null || (displayDuration > _timeBetweenToasts), 'The display duration must be greater than the time between toasts ' '(200 ms).', ); final MoonToastTheme? toastTheme = context.moonTheme?.toastTheme; final BorderRadiusGeometry effectiveBorderRadius = borderRadius ?? toastTheme?.properties.borderRadius ?? MoonBorders.borders.surfaceSm; final Color effectiveBackgroundColor = backgroundColor ?? (variant == MoonToastVariant.original ? (toastTheme?.colors.lightVariantBackgroundColor ?? MoonColors.light.goku) : (toastTheme?.colors.darkVariantBackgroundColor ?? MoonColors.dark.goku)); final Color effectiveTextColor = variant == MoonToastVariant.original ? (toastTheme?.colors.lightVariantTextColor ?? MoonColors.light.textPrimary) : (toastTheme?.colors.darkVariantTextColor ?? MoonColors.dark.textPrimary); final Color effectiveIconColor = variant == MoonToastVariant.original ? (toastTheme?.colors.lightVariantIconColor ?? MoonColors.light.iconPrimary) : (toastTheme?.colors.darkVariantIconColor ?? MoonColors.dark.iconPrimary); final TextStyle effectiveTextStyle = toastTheme?.properties.textStyle ?? MoonTypography.typography.body.textDefault; final double effectiveHorizontalGap = horizontalGap ?? toastTheme?.properties.horizontalGap ?? MoonSizes.sizes.x2s; final double effectiveVerticalGap = verticalGap ?? toastTheme?.properties.verticalGap ?? MoonSizes.sizes.x3s; final Duration effectiveDisplayDuration = displayDuration ?? toastTheme?.properties.displayDuration ?? const Duration(seconds: 3); final Duration effectiveTransitionDuration = transitionDuration ?? toastTheme?.properties.transitionDuration ?? MoonTransitions.transitions.defaultTransitionDuration; final Curve effectiveTransitionCurve = transitionCurve ?? toastTheme?.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; final EdgeInsetsGeometry effectiveContentPadding = padding ?? toastTheme?.properties.contentPadding ?? EdgeInsets.all(MoonSizes.sizes.x2s); final EdgeInsets resolvedContentPadding = effectiveContentPadding.resolve(Directionality.of(context)); final List effectiveToastShadows = toastShadows ?? toastTheme?.shadows.toastShadows ?? MoonShadows.light.lg; final effectiveContext = isPersistent ? (Navigator.maybeOf(context, rootNavigator: true)?.context ?? context) : context; final CapturedThemes themes = InheritedTheme.capture( from: context, to: Navigator.of(effectiveContext).context, ); final OverlayEntry entry = OverlayEntry( builder: (BuildContext context) { return RepaintBoundary( child: TweenAnimationBuilder( duration: effectiveTransitionDuration, curve: effectiveTransitionCurve, tween: Tween(begin: 0.0, end: 1.0), builder: (BuildContext context, double progress, Widget? child) { return SafeArea( left: useSafeArea, top: useSafeArea, right: useSafeArea, bottom: useSafeArea, maintainBottomViewPadding: true, child: Align( alignment: toastAlignment, child: Transform( transform: Matrix4.translationValues( switch (toastAlignment) { Alignment.topLeft || Alignment.centerLeft || Alignment.bottomLeft => -_toastTravelDistance + progress * _toastTravelDistance, Alignment.topRight || Alignment.centerRight || Alignment.bottomRight => (1 - progress) * _toastTravelDistance, _ => 0 }, switch (toastAlignment) { Alignment.topCenter => -_toastTravelDistance + progress * _toastTravelDistance, Alignment.bottomCenter => (1 - progress) * _toastTravelDistance, _ => 0 }, 0, ), child: Opacity( opacity: progress, child: child, ), ), ), ); }, child: themes.wrap( Semantics( label: semanticLabel, child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: DefaultTextStyle( style: effectiveTextStyle.copyWith( color: effectiveTextColor, ), child: Container( margin: margin ?? resolvedContentPadding, padding: resolvedContentPadding, width: width, decoration: decoration ?? ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shadows: effectiveToastShadows, shape: MoonSquircleBorder( borderRadius: effectiveBorderRadius .squircleBorderRadius(context), ), ), child: Column( mainAxisSize: MainAxisSize.min, children: [ Row( mainAxisSize: MainAxisSize.min, mainAxisAlignment: width != null ? MainAxisAlignment.spaceBetween : MainAxisAlignment.center, textDirection: Directionality.of(context), children: [ if (leading != null) ...[ leading, SizedBox(width: effectiveHorizontalGap), ], Flexible(child: label), if (trailing != null) ...[ SizedBox(width: effectiveHorizontalGap), trailing, ], ], ), if (content != null) ...[ SizedBox(height: effectiveVerticalGap), content, ], ], ), ), ), ), ), ), ), ); }, ); final toastEntry = _ToastEntry( buildContext: effectiveContext, overlayEntry: entry, ); _toastQueue.add(toastEntry); if (_timer == null) _showToastOverlay(duration: effectiveDisplayDuration); } /// Clear the toast queue. static void clearToastQueue() { _timer?.cancel(); _timer = null; _entry?.remove(); _entry = null; _toastQueue.clear(); } static void _showToastOverlay({required Duration duration}) { if (_toastQueue.isEmpty) { _entry = null; return; } final toastEntry = _toastQueue.removeAt(0); if (!toastEntry.buildContext.mounted) { clearToastQueue(); return; } _entry = toastEntry.overlayEntry; _timer = Timer(duration, () => _removeToastOverlay(duration: duration)); Future.delayed( _timeBetweenToasts, () { if (toastEntry.buildContext.mounted) { Navigator.of(toastEntry.buildContext).overlay?.insert(_entry!); } }, ); } static void _removeToastOverlay({required Duration duration}) { _timer?.cancel(); _timer = null; _entry?.remove(); _entry = null; _showToastOverlay(duration: duration); } } class _ToastEntry { final BuildContext buildContext; final OverlayEntry overlayEntry; _ToastEntry({ required this.buildContext, required this.overlayEntry, }); } ================================================ FILE: lib/src/widgets/tooltip/tooltip.dart ================================================ import 'package:flutter/material.dart'; import 'package:moon_design/src/theme/theme.dart'; import 'package:moon_design/src/theme/tokens/borders.dart'; import 'package:moon_design/src/theme/tokens/shadows.dart'; import 'package:moon_design/src/theme/tokens/transitions.dart'; import 'package:moon_design/src/theme/tokens/typography/typography.dart'; import 'package:moon_design/src/utils/shape_decoration_premul.dart'; import 'package:moon_design/src/widgets/tooltip/tooltip_shape.dart'; import 'package:moon_tokens/moon_tokens.dart'; enum MoonTooltipPosition { top, topLeft, topRight, bottom, bottomLeft, bottomRight, left, right, vertical, horizontal, } class MoonTooltip extends StatefulWidget { // This is required to show only one tooltip at a time. static final List<_MoonTooltipState> _openedTooltips = []; /// Whether the tooltip has an arrow (tail). final bool hasArrow; /// Whether to hide (dismiss) the tooltip on tap. Defaults to true. /// For finer control over dismissal, use [show] and [onTap] properties. final bool hideOnTap; /// Whether to show the tooltip. final bool show; /// The border radius of the tooltip. final BorderRadiusGeometry? borderRadius; /// The background color of the tooltip. final Color? backgroundColor; /// The border color of the tooltip. Displayed when [borderWidth] is larger /// than 0. final Color borderColor; /// The base width of the tooltip arrow (tail). final double? arrowBaseWidth; /// The length of the tooltip arrow (tail). final double? arrowLength; /// The offset of the tooltip arrow (tail) from the center of the tooltip. final double arrowOffsetValue; /// The distance from the tip of the tooltip arrow (tail) to the /// [child] (target). final double? arrowTipDistance; /// The width of the tooltip border. final double borderWidth; /// An optional size constraint for the tooltip [content] to define its /// minimum height. /// /// If a constraint is not provided, the size will automatically adjust to /// the [content]. final double? minHeight; /// An optional size constraint for the tooltip [content] to define its /// minimum width. /// /// If a constraint is not provided, the size will automatically adjust to /// the [content]. final double? minWidth; /// An optional size constraint for the tooltip [content] to define its /// maximum height. /// /// If a constraint is not provided, the size will automatically adjust to /// the [content]. final double? maxHeight; /// An optional size constraint for the tooltip [content] to define its /// maximum width. /// /// If a constraint is not provided, the size will automatically adjust to /// the [content]. final double? maxWidth; /// The margin of the tooltip. Prevents the tooltip from touching the edges of /// the viewport. final double tooltipMargin; /// The duration of the tooltip transition animation (fade in or out). final Duration? transitionDuration; /// The curve of the tooltip transition animation (fade in or out). final Curve? transitionCurve; /// The padding of the tooltip [content]. final EdgeInsetsGeometry? contentPadding; /// The list of shadows applied to the tooltip. final List? tooltipShadows; /// The tooltip position relative to the [child] (target). /// Defaults to [MoonTooltipPosition.vertical]. final MoonTooltipPosition tooltipPosition; /// The observer to track route changes and automatically hide the tooltip /// when the widget's route is not active. final RouteObserver>? routeObserver; /// The semantic label for the tooltip. final String? semanticLabel; /// The callback that is called when the tooltip is tapped. final VoidCallback? onTap; /// The widget to display as the child (target) of the tooltip. final Widget child; /// The widget to display inside the tooltip as its content. final Widget content; /// Creates a Moon Design tooltip. const MoonTooltip({ super.key, this.hasArrow = true, this.hideOnTap = true, required this.show, this.borderRadius, this.backgroundColor, this.borderColor = Colors.transparent, this.arrowBaseWidth, this.arrowLength, this.arrowOffsetValue = 0, this.arrowTipDistance, this.borderWidth = 0, this.minHeight, this.minWidth, this.maxHeight, this.maxWidth, this.tooltipMargin = 8, this.transitionDuration, this.transitionCurve, this.contentPadding, this.tooltipShadows, this.tooltipPosition = MoonTooltipPosition.top, this.routeObserver, this.semanticLabel, this.onTap, required this.child, required this.content, }); // Clear existing tooltips, excluding the supplied one. static void _removeOtherTooltips(_MoonTooltipState current) { if (_openedTooltips.isNotEmpty) { // Avoid concurrent modification. final List<_MoonTooltipState> openedTooltips = _openedTooltips.toList(); for (final _MoonTooltipState state in openedTooltips) { if (state == current) continue; state._clearOverlayEntry(); } } } @override _MoonTooltipState createState() => _MoonTooltipState(); } class _MoonTooltipState extends State with RouteAware, SingleTickerProviderStateMixin { final GlobalKey _tooltipKey = GlobalKey(); final LayerLink _layerLink = LayerLink(); AnimationController? _animationController; CurvedAnimation? _curvedAnimation; OverlayEntry? _overlayEntry; bool _routeIsShowing = true; bool get shouldShowTooltip => widget.show && _routeIsShowing; void _showTooltip() { _overlayEntry = OverlayEntry( builder: (BuildContext context) => _createOverlayContent(), ); Overlay.of(context).insert(_overlayEntry!); MoonTooltip._openedTooltips.add(this); MoonTooltip._removeOtherTooltips(this); _animationController!.value = 0; _animationController!.forward(); } void _updateTooltip() { _overlayEntry?.markNeedsBuild(); } void _removeTooltip({bool immediately = false}) { if (immediately) { _clearOverlayEntry(); } else { _animationController!.value = 1; _animationController!.reverse().then((value) => _clearOverlayEntry()); } } void _clearOverlayEntry() { if (_overlayEntry != null) { MoonTooltip._openedTooltips.remove(this); _overlayEntry!.remove(); _overlayEntry = null; } } void _handleTap(TapDownDetails details) { final RenderBox? tooltipRenderBox = _tooltipKey.currentContext?.findRenderObject() as RenderBox?; final RenderBox? overlayRenderBox = Overlay.of(context).context.findRenderObject() as RenderBox?; final Offset? tooltipPosition = tooltipRenderBox?.localToGlobal( Offset.zero, ancestor: overlayRenderBox, ); if (widget.hideOnTap || tooltipPosition != null && !tooltipRenderBox!.size .contains(details.localPosition - tooltipPosition)) { _removeTooltip(); } widget.onTap?.call(); } _TooltipPositionProperties _resolveTooltipPositionParameters({ required MoonTooltipPosition tooltipPosition, required double arrowTipDistance, required double arrowLength, required double overlayWidth, required double tooltipTargetGlobalLeft, required double tooltipTargetGlobalCenter, required double tooltipTargetGlobalRight, }) { return switch (tooltipPosition) { MoonTooltipPosition.top => _TooltipPositionProperties( offset: Offset(0, -(arrowTipDistance + arrowLength)), targetAnchor: Alignment.topCenter, followerAnchor: Alignment.bottomCenter, tooltipMaxWidth: overlayWidth - ((overlayWidth / 2 - tooltipTargetGlobalCenter) * 2).abs() - widget.tooltipMargin * 2, ), MoonTooltipPosition.bottom => _TooltipPositionProperties( offset: Offset(0, arrowTipDistance + arrowLength), targetAnchor: Alignment.bottomCenter, followerAnchor: Alignment.topCenter, tooltipMaxWidth: overlayWidth - ((overlayWidth / 2 - tooltipTargetGlobalCenter) * 2).abs() - widget.tooltipMargin * 2, ), MoonTooltipPosition.left => _TooltipPositionProperties( offset: Offset(-(arrowTipDistance + arrowLength), 0), targetAnchor: Alignment.centerLeft, followerAnchor: Alignment.centerRight, tooltipMaxWidth: tooltipTargetGlobalLeft - arrowLength - arrowTipDistance - widget.tooltipMargin, ), MoonTooltipPosition.right => _TooltipPositionProperties( offset: Offset(arrowTipDistance + arrowLength, 0), targetAnchor: Alignment.centerRight, followerAnchor: Alignment.centerLeft, tooltipMaxWidth: overlayWidth - tooltipTargetGlobalRight - arrowLength - arrowTipDistance - widget.tooltipMargin, ), MoonTooltipPosition.topLeft => _TooltipPositionProperties( offset: Offset(0, -(arrowTipDistance + arrowLength)), targetAnchor: Alignment.topRight, followerAnchor: Alignment.bottomRight, tooltipMaxWidth: tooltipTargetGlobalRight - widget.tooltipMargin, ), MoonTooltipPosition.topRight => _TooltipPositionProperties( offset: Offset(0, -(arrowTipDistance + arrowLength)), targetAnchor: Alignment.topLeft, followerAnchor: Alignment.bottomLeft, tooltipMaxWidth: overlayWidth - tooltipTargetGlobalLeft - widget.tooltipMargin, ), MoonTooltipPosition.bottomLeft => _TooltipPositionProperties( offset: Offset(0, arrowTipDistance + arrowLength), targetAnchor: Alignment.bottomRight, followerAnchor: Alignment.topRight, tooltipMaxWidth: tooltipTargetGlobalRight - widget.tooltipMargin, ), MoonTooltipPosition.bottomRight => _TooltipPositionProperties( offset: Offset(0, arrowTipDistance + arrowLength), targetAnchor: Alignment.bottomLeft, followerAnchor: Alignment.topLeft, tooltipMaxWidth: overlayWidth - tooltipTargetGlobalLeft - widget.tooltipMargin, ), _ => throw AssertionError(tooltipPosition), }; } @override void didPush() { _routeIsShowing = true; // Route was added to the navigator and is now the top-most route. if (shouldShowTooltip) { _removeTooltip(); WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (mounted) _showTooltip(); }); } } @override void didPushNext() { _routeIsShowing = false; _removeTooltip(); } @override Future didPopNext() async { _routeIsShowing = true; if (shouldShowTooltip) { // The covering route was popped off the navigator. _removeTooltip(); await Future.delayed(const Duration(milliseconds: 100), () { if (mounted) _showTooltip(); }); } } @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((Duration _) { widget.routeObserver ?.subscribe(this, ModalRoute.of(context)! as PageRoute); if (widget.show) _showTooltip(); }); } @override void didUpdateWidget(MoonTooltip oldWidget) { super.didUpdateWidget(oldWidget); if (oldWidget.routeObserver != widget.routeObserver) { oldWidget.routeObserver?.unsubscribe(this); widget.routeObserver ?.subscribe(this, ModalRoute.of(context)! as PageRoute); } WidgetsBinding.instance.addPostFrameCallback((Duration _) { if (!_routeIsShowing) return; if (oldWidget.tooltipPosition != widget.tooltipPosition) { _removeTooltip(immediately: true); _showTooltip(); } else if (shouldShowTooltip && _overlayEntry == null) { _showTooltip(); } else if (!shouldShowTooltip && _overlayEntry != null) { _removeTooltip(); } _updateTooltip(); }); } @override void deactivate() { if (_overlayEntry != null) _removeTooltip(immediately: true); super.deactivate(); } @override void dispose() { _animationController?.dispose(); if (_overlayEntry != null) _removeTooltip(immediately: true); widget.routeObserver?.unsubscribe(this); super.dispose(); } Widget _createOverlayContent() { MoonTooltipPosition tooltipPosition = widget.tooltipPosition; final BorderRadiusGeometry effectiveBorderRadius = widget.borderRadius ?? context.moonTheme?.tooltipTheme.properties.borderRadius ?? MoonBorders.borders.interactiveXs; final resolvedBorderRadius = effectiveBorderRadius.resolve(Directionality.of(context)); final Color effectiveBackgroundColor = widget.backgroundColor ?? context.moonTheme?.tooltipTheme.colors.backgroundColor ?? MoonColors.light.goku; final Color effectiveTextColor = context.moonTheme?.tooltipTheme.colors.textColor ?? MoonColors.light.textPrimary; final Color effectiveIconColor = context.moonTheme?.tooltipTheme.colors.iconColor ?? MoonColors.light.iconPrimary; final double effectiveArrowBaseWidth = widget.arrowBaseWidth ?? context.moonTheme?.tooltipTheme.properties.arrowBaseWidth ?? 16; final double effectiveArrowLength = widget.hasArrow ? (widget.arrowLength ?? context.moonTheme?.tooltipTheme.properties.arrowLength ?? 8) : 0; final double effectiveArrowTipDistance = widget.arrowTipDistance ?? context.moonTheme?.tooltipTheme.properties.arrowTipDistance ?? 8; final EdgeInsetsGeometry effectiveContentPadding = widget.contentPadding ?? context.moonTheme?.tooltipTheme.properties.contentPadding ?? const EdgeInsets.all(12); final EdgeInsets resolvedContentPadding = effectiveContentPadding.resolve(Directionality.of(context)); final List effectiveTooltipShadows = widget.tooltipShadows ?? context.moonTheme?.tooltipTheme.shadows.tooltipShadows ?? MoonShadows.light.sm; final TextStyle effectiveTextStyle = context.moonTheme?.tooltipTheme.properties.textStyle ?? MoonTypography.typography.body.text12; final overlayRenderBox = Overlay.of(context).context.findRenderObject()! as RenderBox; final targetRenderBox = context.findRenderObject()! as RenderBox; final tooltipTargetGlobalCenter = targetRenderBox.localToGlobal( targetRenderBox.size.center(Offset.zero), ancestor: overlayRenderBox, ); final tooltipTargetGlobalLeft = targetRenderBox.localToGlobal( targetRenderBox.size.centerLeft(Offset.zero), ancestor: overlayRenderBox, ); final tooltipTargetGlobalRight = targetRenderBox.localToGlobal( targetRenderBox.size.centerRight(Offset.zero), ancestor: overlayRenderBox, ); if (Directionality.of(context) == TextDirection.rtl || tooltipPosition == MoonTooltipPosition.horizontal || tooltipPosition == MoonTooltipPosition.vertical) { switch (tooltipPosition) { case MoonTooltipPosition.left: tooltipPosition = MoonTooltipPosition.right; case MoonTooltipPosition.right: tooltipPosition = MoonTooltipPosition.left; case MoonTooltipPosition.topLeft: tooltipPosition = MoonTooltipPosition.topRight; case MoonTooltipPosition.topRight: tooltipPosition = MoonTooltipPosition.topLeft; case MoonTooltipPosition.bottomLeft: tooltipPosition = MoonTooltipPosition.bottomRight; case MoonTooltipPosition.bottomRight: tooltipPosition = MoonTooltipPosition.bottomLeft; case MoonTooltipPosition.vertical: tooltipPosition = tooltipTargetGlobalCenter.dy < overlayRenderBox.size.center(Offset.zero).dy ? MoonTooltipPosition.bottom : MoonTooltipPosition.top; case MoonTooltipPosition.horizontal: tooltipPosition = tooltipTargetGlobalCenter.dx < overlayRenderBox.size.center(Offset.zero).dx ? MoonTooltipPosition.right : MoonTooltipPosition.left; default: break; } } final tooltipPositionParameters = _resolveTooltipPositionParameters( tooltipPosition: tooltipPosition, arrowTipDistance: effectiveArrowTipDistance, arrowLength: effectiveArrowLength, overlayWidth: overlayRenderBox.size.width, tooltipTargetGlobalLeft: tooltipTargetGlobalLeft.dx, tooltipTargetGlobalCenter: tooltipTargetGlobalCenter.dx, tooltipTargetGlobalRight: tooltipTargetGlobalRight.dx, ); return Semantics( label: widget.semanticLabel, child: GestureDetector( excludeFromSemantics: true, behavior: HitTestBehavior.translucent, onTapDown: _handleTap, child: UnconstrainedBox( child: CompositedTransformFollower( link: _layerLink, showWhenUnlinked: false, offset: tooltipPositionParameters.offset, followerAnchor: tooltipPositionParameters.followerAnchor, targetAnchor: tooltipPositionParameters.targetAnchor, child: RepaintBoundary( child: FadeTransition( opacity: _curvedAnimation!, child: DefaultTextStyle( style: effectiveTextStyle.copyWith(color: effectiveTextColor), child: IconTheme( data: IconThemeData(color: effectiveIconColor), child: Container( key: _tooltipKey, constraints: BoxConstraints( minHeight: widget.minHeight ?? 0, minWidth: widget.minWidth ?? 0, maxHeight: widget.maxHeight ?? double.infinity, maxWidth: widget.maxWidth ?? tooltipPositionParameters.tooltipMaxWidth, ), padding: resolvedContentPadding, decoration: ShapeDecorationWithPremultipliedAlpha( color: effectiveBackgroundColor, shadows: effectiveTooltipShadows, shape: TooltipShape( arrowBaseWidth: effectiveArrowBaseWidth, arrowLength: effectiveArrowLength, arrowOffset: widget.arrowOffsetValue, arrowTipDistance: effectiveArrowTipDistance, borderColor: widget.borderColor, borderRadius: resolvedBorderRadius, borderWidth: widget.borderWidth, childWidth: targetRenderBox.size.width, tooltipPosition: tooltipPosition, ), ), child: widget.content, ), ), ), ), ), ), ), ), ); } @override Widget build(BuildContext context) { final Duration effectiveTransitionDuration = widget.transitionDuration ?? context.moonTheme?.tooltipTheme.properties.transitionDuration ?? const Duration(milliseconds: 150); final Curve effectiveTransitionCurve = widget.transitionCurve ?? context.moonTheme?.tooltipTheme.properties.transitionCurve ?? MoonTransitions.transitions.defaultTransitionCurve; _animationController ??= AnimationController( duration: effectiveTransitionDuration, vsync: this, ); _curvedAnimation ??= CurvedAnimation( parent: _animationController!, curve: effectiveTransitionCurve, ); return CompositedTransformTarget( link: _layerLink, child: widget.child, ); } } class _TooltipPositionProperties { final Offset offset; final Alignment followerAnchor; final Alignment targetAnchor; final double tooltipMaxWidth; _TooltipPositionProperties({ required this.offset, required this.followerAnchor, required this.targetAnchor, required this.tooltipMaxWidth, }); } ================================================ FILE: lib/src/widgets/tooltip/tooltip_shape.dart ================================================ import 'dart:math'; import 'package:flutter/material.dart'; import 'package:moon_design/src/utils/squircle/squircle_radius.dart'; import 'package:moon_design/src/widgets/tooltip/tooltip.dart'; class TooltipShape extends ShapeBorder { final BorderRadius borderRadius; final Color borderColor; final double borderWidth; final double arrowOffset; final double arrowBaseWidth; final double arrowLength; final double arrowTipDistance; final double childWidth; final MoonTooltipPosition tooltipPosition; const TooltipShape({ required this.borderRadius, required this.borderColor, required this.borderWidth, this.arrowOffset = 0, required this.arrowBaseWidth, required this.arrowLength, required this.arrowTipDistance, required this.childWidth, required this.tooltipPosition, }); @override EdgeInsetsGeometry get dimensions => EdgeInsets.zero; @override Path getInnerPath(Rect rect, {TextDirection? textDirection}) { return Path() ..fillType = PathFillType.evenOdd ..addPath(getOuterPath(rect), Offset.zero); } @override Path getOuterPath(Rect rect, {TextDirection? textDirection}) { final double topLeftRadius = borderRadius.topLeft.x; final double topRightRadius = borderRadius.topRight.x; final double bottomLeftRadius = borderRadius.bottomLeft.x; final double bottomRightRadius = borderRadius.bottomRight.x; Offset tooltipCenter = rect.center; Path getLeftTopPath(Rect rect) { return Path() ..moveTo(rect.left, rect.bottom - bottomLeftRadius) ..lineTo(rect.left, rect.top + topLeftRadius) ..arcToPoint( Offset(rect.left + topLeftRadius, rect.top), radius: MoonSquircleRadius(cornerRadius: topLeftRadius), ) ..lineTo(rect.right - topRightRadius, rect.top) ..arcToPoint( Offset(rect.right, rect.top + topRightRadius), radius: MoonSquircleRadius(cornerRadius: topRightRadius), ); } Path getBottomRightPath(Rect rect) { return Path() ..moveTo(rect.left + bottomLeftRadius, rect.bottom) ..lineTo(rect.right - bottomRightRadius, rect.bottom) ..arcToPoint( Offset(rect.right, rect.bottom - bottomRightRadius), radius: MoonSquircleRadius(cornerRadius: bottomRightRadius), clockwise: false, ) ..lineTo(rect.right, rect.top + topRightRadius) ..arcToPoint( Offset(rect.right - topRightRadius, rect.top), radius: MoonSquircleRadius(cornerRadius: topRightRadius), clockwise: false, ); } if (tooltipPosition == MoonTooltipPosition.right) { tooltipCenter = rect.centerLeft.translate(-arrowLength - arrowTipDistance, 0); } else if (tooltipPosition == MoonTooltipPosition.left) { tooltipCenter = rect.centerRight.translate(arrowLength + arrowTipDistance, 0); } switch (tooltipPosition) { case MoonTooltipPosition.top: return getLeftTopPath(rect) ..lineTo(rect.right, rect.bottom - bottomRightRadius) ..arcToPoint( Offset(rect.right - bottomRightRadius, rect.bottom), radius: MoonSquircleRadius(cornerRadius: bottomRightRadius), ) // To corner of arrow base. ..lineTo( min( max( arrowOffset + tooltipCenter.dx + arrowBaseWidth / 2, rect.left + bottomLeftRadius + arrowBaseWidth, ), rect.right - bottomRightRadius, ), rect.bottom, ) // To arrow tip. ..lineTo(arrowOffset + tooltipCenter.dx, rect.bottom + arrowLength) // To opposite corner of arrow base. ..lineTo( max( min( arrowOffset + tooltipCenter.dx - arrowBaseWidth / 2, rect.right - bottomRightRadius - arrowBaseWidth, ), rect.left + bottomLeftRadius, ), rect.bottom, ) ..lineTo(rect.left + bottomLeftRadius, rect.bottom) ..arcToPoint( Offset(rect.left, rect.bottom - bottomLeftRadius), radius: MoonSquircleRadius(cornerRadius: bottomLeftRadius), ) ..lineTo(rect.left, rect.top + topLeftRadius) ..arcToPoint( Offset(rect.left + topLeftRadius, rect.top), radius: MoonSquircleRadius(cornerRadius: topLeftRadius), ); case MoonTooltipPosition.bottom: return getBottomRightPath(rect) // To corner of arrow base. ..lineTo( min( max( arrowOffset + tooltipCenter.dx + arrowBaseWidth / 2, rect.left + topRightRadius + arrowBaseWidth, ), rect.right - topRightRadius, ), rect.top, ) // To arrow tip. ..lineTo(arrowOffset + tooltipCenter.dx, rect.top - arrowLength) // To opposite corner of arrow base. ..lineTo( max( min( arrowOffset + tooltipCenter.dx - arrowBaseWidth / 2, rect.right - topLeftRadius - arrowBaseWidth, ), rect.left + topLeftRadius, ), rect.top, ) ..lineTo(rect.left + topLeftRadius, rect.top) ..arcToPoint( Offset(rect.left, rect.top + topLeftRadius), radius: MoonSquircleRadius(cornerRadius: topLeftRadius), clockwise: false, ) ..lineTo(rect.left, rect.bottom - bottomLeftRadius) ..arcToPoint( Offset(rect.left + bottomLeftRadius, rect.bottom), radius: MoonSquircleRadius(cornerRadius: bottomLeftRadius), clockwise: false, ); case MoonTooltipPosition.left: return getLeftTopPath(rect) // To corner of arrow base. ..lineTo( rect.right, max( min( -arrowOffset + tooltipCenter.dy - arrowBaseWidth / 2, rect.bottom - bottomRightRadius - arrowBaseWidth, ), rect.top + topRightRadius, ), ) // To arrow tip. ..lineTo( tooltipCenter.dx - arrowTipDistance, -arrowOffset + tooltipCenter.dy, ) // To opposite corner of arrow base. ..lineTo( rect.right, min( max( -arrowOffset + tooltipCenter.dy + arrowBaseWidth / 2, rect.top + topRightRadius + arrowBaseWidth, ), rect.bottom - bottomRightRadius, ), ) ..lineTo(rect.right, rect.bottom - bottomRightRadius) ..arcToPoint( Offset(rect.right - bottomRightRadius, rect.bottom), radius: MoonSquircleRadius(cornerRadius: bottomRightRadius), ) ..lineTo(rect.left + bottomLeftRadius, rect.bottom) ..arcToPoint( Offset(rect.left, rect.bottom - bottomLeftRadius), radius: MoonSquircleRadius(cornerRadius: bottomLeftRadius), ); case MoonTooltipPosition.right: return getBottomRightPath(rect) ..lineTo(rect.left + topLeftRadius, rect.top) ..arcToPoint( Offset(rect.left, rect.top + topLeftRadius), radius: MoonSquircleRadius(cornerRadius: topLeftRadius), clockwise: false, ) // To corner of arrow base. ..lineTo( rect.left, max( min( -arrowOffset + tooltipCenter.dy - arrowBaseWidth / 2, rect.bottom - bottomLeftRadius - arrowBaseWidth, ), rect.top + topLeftRadius, ), ) // To arrow tip. ..lineTo( tooltipCenter.dx + arrowTipDistance, -arrowOffset + tooltipCenter.dy, ) // To opposite corner of arrow base. ..lineTo( rect.left, min( max( -arrowOffset + tooltipCenter.dy + arrowBaseWidth / 2, rect.top + topLeftRadius + arrowBaseWidth, ), rect.bottom - bottomLeftRadius, ), ) ..lineTo(rect.left, rect.bottom - bottomLeftRadius) ..arcToPoint( Offset(rect.left + bottomLeftRadius, rect.bottom), radius: MoonSquircleRadius(cornerRadius: bottomLeftRadius), clockwise: false, ); case MoonTooltipPosition.topLeft: return getLeftTopPath(rect) ..lineTo(rect.right, rect.bottom - bottomRightRadius) ..arcToPoint( Offset(rect.right - bottomRightRadius, rect.bottom), radius: MoonSquircleRadius(cornerRadius: bottomRightRadius), ) // To corner of arrow base. ..lineTo( min( rect.right - bottomRightRadius, max( arrowOffset + rect.right - (childWidth / 2) + (arrowBaseWidth / 2), rect.left + bottomLeftRadius + arrowBaseWidth, ), ), rect.bottom, ) // To arrow tip. ..lineTo( arrowOffset + rect.right - (childWidth / 2), rect.bottom + arrowLength, ) // To opposite corner of arrow base. ..lineTo( max( min( arrowOffset + rect.right - (childWidth / 2) - (arrowBaseWidth / 2), rect.right - bottomRightRadius - arrowBaseWidth, ), rect.left + bottomLeftRadius, ), rect.bottom, ) ..lineTo(rect.left + bottomLeftRadius, rect.bottom) ..arcToPoint( Offset(rect.left, rect.bottom - bottomLeftRadius), radius: MoonSquircleRadius(cornerRadius: bottomLeftRadius), ) ..lineTo(rect.left, rect.top + topLeftRadius) ..arcToPoint( Offset(rect.left + topLeftRadius, rect.top), radius: MoonSquircleRadius(cornerRadius: topLeftRadius), ); case MoonTooltipPosition.topRight: return getLeftTopPath(rect) ..lineTo(rect.right, rect.bottom - bottomRightRadius) ..arcToPoint( Offset(rect.right - bottomRightRadius, rect.bottom), radius: MoonSquircleRadius(cornerRadius: bottomRightRadius), ) // To corner of arrow base. ..lineTo( min( max( arrowOffset + rect.left + (childWidth / 2) + (arrowBaseWidth / 2), rect.left + bottomLeftRadius + arrowBaseWidth, ), rect.right - bottomRightRadius, ), rect.bottom, ) // To arrow tip. ..lineTo( arrowOffset + rect.left + (childWidth / 2), rect.bottom + arrowLength, ) // To opposite corner of arrow base. ..lineTo( max( min( arrowOffset + rect.left + (childWidth / 2) - (arrowBaseWidth / 2), rect.right - bottomRightRadius - arrowBaseWidth, ), rect.left + bottomLeftRadius, ), rect.bottom, ) ..lineTo(rect.left + bottomLeftRadius, rect.bottom) ..arcToPoint( Offset(rect.left, rect.bottom - bottomLeftRadius), radius: MoonSquircleRadius(cornerRadius: bottomLeftRadius), ) ..lineTo(rect.left, rect.top + topLeftRadius) ..arcToPoint( Offset(rect.left + topLeftRadius, rect.top), radius: MoonSquircleRadius(cornerRadius: topLeftRadius), ); case MoonTooltipPosition.bottomLeft: return getBottomRightPath(rect) // To corner of arrow base. ..lineTo( min( max( arrowOffset + rect.right - (childWidth / 2) + (arrowBaseWidth / 2), rect.left + topRightRadius + arrowBaseWidth, ), rect.right - topRightRadius, ), rect.top, ) // To arrow tip. ..lineTo( arrowOffset + rect.right - (childWidth / 2), rect.top - arrowLength, ) // To opposite corner of arrow base. ..lineTo( max( min( arrowOffset + rect.right - (childWidth / 2) - (arrowBaseWidth / 2), rect.right - bottomRightRadius - arrowBaseWidth, ), rect.left + topLeftRadius, ), rect.top, ) ..lineTo(rect.left + topLeftRadius, rect.top) ..arcToPoint( Offset(rect.left, rect.top + topLeftRadius), radius: MoonSquircleRadius(cornerRadius: topLeftRadius), clockwise: false, ) ..lineTo(rect.left, rect.bottom - bottomLeftRadius) ..arcToPoint( Offset(rect.left + bottomLeftRadius, rect.bottom), radius: MoonSquircleRadius(cornerRadius: bottomLeftRadius), clockwise: false, ); case MoonTooltipPosition.bottomRight: return getBottomRightPath(rect) // To corner of arrow base. ..lineTo( min( max( arrowOffset + rect.left + (childWidth / 2) + (arrowBaseWidth / 2), rect.left + topRightRadius + arrowBaseWidth, ), rect.right - topRightRadius, ), rect.top, ) // To arrow tip. ..lineTo( arrowOffset + rect.left + (childWidth / 2), rect.top - arrowLength, ) // To opposite corner of arrow base. ..lineTo( max( min( arrowOffset + rect.left + (childWidth / 2) - (arrowBaseWidth / 2), rect.right - bottomRightRadius - arrowBaseWidth, ), rect.left + topLeftRadius, ), rect.top, ) ..lineTo(rect.left + topLeftRadius, rect.top) ..arcToPoint( Offset(rect.left, rect.top + topLeftRadius), radius: MoonSquircleRadius(cornerRadius: topLeftRadius), clockwise: false, ) ..lineTo(rect.left, rect.bottom - bottomLeftRadius) ..arcToPoint( Offset(rect.left + bottomLeftRadius, rect.bottom), radius: MoonSquircleRadius(cornerRadius: bottomLeftRadius), clockwise: false, ); default: throw AssertionError(tooltipPosition); } } @override void paint(Canvas canvas, Rect rect, {TextDirection? textDirection}) { final Paint paint = Paint() // If borderWidth is set to 0, set the color to be transparent to avoid // strange behavior with border. ..color = borderWidth == 0 ? Colors.transparent : borderColor ..style = PaintingStyle.stroke ..strokeWidth = borderWidth; canvas.drawPath(getOuterPath(rect), paint); canvas.clipPath(getOuterPath(rect)); } @override ShapeBorder scale(double t) { return TooltipShape( tooltipPosition: tooltipPosition, arrowOffset: arrowOffset, arrowBaseWidth: arrowBaseWidth, arrowLength: arrowLength, arrowTipDistance: arrowTipDistance, borderRadius: borderRadius, borderWidth: borderWidth, childWidth: childWidth, borderColor: borderColor, ); } } ================================================ FILE: pubspec.yaml ================================================ name: moon_design description: Moon Design System for Flutter. A set of coherent, themable, and extensible widgets following the Moon Design System. version: 1.1.0 homepage: https://flutter.moon.io/ repository: https://github.com/coingaming/moon_flutter environment: sdk: '>=3.3.1 <4.0.0' flutter: ">=1.17.0" dependencies: flutter: sdk: flutter moon_icons: ^1.1.0 moon_tokens: ^0.0.6 dev_dependencies: flutter_test: sdk: flutter lint: ^2.1.2 flutter: uses-material-design: true ================================================ FILE: release-please-config.json ================================================ { "include-component-in-tag": false, "packages": { ".": { "release-type": "dart", "draft": false, "prerelease": false, "extra-files": [ { "type": "yaml", "path": "example/pubspec.yaml", "jsonpath": "$.version" } ] } } } ================================================ FILE: test/accordion_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; enum _AccordionItems { first, second } const Key _accordionKey = Key("accordionKey"); const Key _firstAccordionKey = Key("firstAccordionKey"); const Key _firstAccordionChildKey = Key("firstAccordionChildKey"); const Key _secondAccordionKey = Key("secondAccordionKey"); const Key _secondAccordionChildKey = Key("secondAccordionChildKey"); const String _accordionLabel = "Label"; const String _accordionContent = "Content"; const IconData _accordionTrailingIcon = MoonIcons.other_frame_24_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _AccordionTestWidget( accordionKey: _accordionKey, ), ); expect(find.byKey(_accordionKey), findsOneWidget); }); group('Single accordion', () { testWidgets("Accordion expands when tapped.", (tester) async { await tester.pumpWidget(const _SingleAccordionTestWidget()); final accordion = find.byKey(_firstAccordionKey); final child = find.byKey(_firstAccordionChildKey); expect(accordion, findsOneWidget); expect(child, findsNothing); expect(find.text(_accordionLabel), findsOneWidget); expect(find.byIcon(_accordionTrailingIcon), findsOneWidget); await tester.tap(accordion); await tester.pumpAndSettle(); expect(child, findsOneWidget); expect(find.text(_accordionContent), findsOneWidget); }); testWidgets("Disabled accordion does not expand when tapped.", (tester) async { await tester.pumpWidget( const _SingleAccordionTestWidget( isDisabled: true, ), ); final accordion = find.byKey(_firstAccordionKey); final child = find.byKey(_firstAccordionChildKey); expect(accordion, findsOneWidget); expect(child, findsNothing); await tester.tap(accordion); await tester.pumpAndSettle(); expect(child, findsNothing); }); }); group('Grouped accordion', () { testWidgets("First accordion collapses when second accordion expands.", (tester) async { await tester.pumpWidget(const _GroupedAccordionTestWidget()); // First accordion. final accordion1 = find.byKey(_firstAccordionKey); final child1 = find.byKey(_firstAccordionChildKey); // Second accordion. final accordion2 = find.byKey(_secondAccordionKey); final child2 = find.byKey(_secondAccordionChildKey); // Initially, the first accordion is expanded. expect(accordion1, findsOneWidget); expect(accordion2, findsOneWidget); expect(child1, findsOneWidget); expect(child2, findsNothing); // Tap on the second accordion to expand it and collapse the first one. await tester.tap(accordion2); await tester.pumpAndSettle(); expect(child2, findsOneWidget); expect(child1, findsNothing); // Tap on the second accordion again to collapse it. await tester.tap(accordion2); await tester.pumpAndSettle(); expect(child2, findsNothing); expect(child1, findsNothing); }); }); } class _AccordionTestWidget extends StatelessWidget { final Key? accordionKey; const _AccordionTestWidget({this.accordionKey}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonAccordion<_AccordionItems>( key: accordionKey, label: const Text(_accordionLabel), ), ), ); } } class _SingleAccordionTestWidget extends StatelessWidget { final bool isDisabled; const _SingleAccordionTestWidget({this.isDisabled = false}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonAccordion<_AccordionItems>( key: _firstAccordionKey, isDisabled: isDisabled, leading: const Icon(_accordionTrailingIcon), label: const Text(_accordionLabel), children: const [ Text( key: _firstAccordionChildKey, _accordionContent, ), ], ), ), ); } } class _GroupedAccordionTestWidget extends StatefulWidget { const _GroupedAccordionTestWidget(); @override State<_GroupedAccordionTestWidget> createState() => _GroupedAccordionTestWidgetState(); } class _GroupedAccordionTestWidgetState extends State<_GroupedAccordionTestWidget> { _AccordionItems? _currentlyOpenAccordionItem = _AccordionItems.first; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: ListView( children: [ MoonAccordion<_AccordionItems>( key: _firstAccordionKey, identityValue: _AccordionItems.first, groupIdentityValue: _currentlyOpenAccordionItem, onExpansionChanged: (_AccordionItems? value) => setState(() => _currentlyOpenAccordionItem = value), leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("Grouped MoonAccordion item #1"), children: const [ Text( key: _firstAccordionChildKey, _accordionContent, ), ], ), MoonAccordion<_AccordionItems>( key: _secondAccordionKey, identityValue: _AccordionItems.second, groupIdentityValue: _currentlyOpenAccordionItem, onExpansionChanged: (_AccordionItems? value) => setState(() => _currentlyOpenAccordionItem = value), leading: const Icon(MoonIcons.other_frame_24_light), label: const Text("Grouped MoonAccordion item #2"), children: const [ Text( key: _secondAccordionChildKey, _accordionContent, ), ], ), ], ), ), ); } } ================================================ FILE: test/alert_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _alertKey = Key("alertKey"); const Key _closeButtonKey = Key("closeButtonKey"); const String _alertLabel = "Label"; const String _alertBody = "Body"; const IconData _alertLeadingIcon = MoonIcons.other_frame_24_light; const IconData _alertTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _AlertTestWidget( alertKey: _alertKey, ), ); expect(find.byKey(_alertKey), findsOneWidget); }); testWidgets( "Alert has only label widget and no leading, trailing or body widget.", (tester) async { await tester.pumpWidget(const _AlertTestWidget()); expect(find.text(_alertLabel), findsOneWidget); expect(find.text(_alertBody), findsNothing); expect(find.byIcon(_alertTrailingIcon), findsNothing); expect(find.byIcon(_alertLeadingIcon), findsNothing); }); testWidgets("Alert has a leading, trailing and body widget.", (tester) async { await tester.pumpWidget( const _AlertTestWidget( showLeading: true, showBody: true, showTrailing: true, ), ); expect(find.text(_alertLabel), findsOneWidget); expect(find.text(_alertBody), findsOneWidget); expect(find.byIcon(_alertTrailingIcon), findsOneWidget); expect(find.byIcon(_alertLeadingIcon), findsOneWidget); }); testWidgets("Alert is not visible when the 'close' button is tapped.", (tester) async { await tester.pumpWidget( const _AlertTestWidget( showTrailing: true, ), ); final trailing = find.byKey(_closeButtonKey); expect(find.text(_alertLabel), findsOneWidget); expect(trailing, findsOneWidget); await tester.tap(trailing, warnIfMissed: false); await tester.pumpAndSettle(); expect(find.text(_alertLabel), findsNothing); }); } class _AlertTestWidget extends StatefulWidget { final Key? alertKey; final bool showLeading; final bool showTrailing; final bool showBody; const _AlertTestWidget({ this.alertKey, this.showLeading = false, this.showTrailing = false, this.showBody = false, }); @override State<_AlertTestWidget> createState() => _AlertTestWidgetState(); } class _AlertTestWidgetState extends State<_AlertTestWidget> { bool _showAlert = true; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonAlert( key: widget.alertKey, show: _showAlert, leading: widget.showLeading ? const Icon(_alertLeadingIcon) : null, label: const Text(_alertLabel), trailing: widget.showTrailing ? MoonButton.icon( key: _closeButtonKey, icon: const Icon(_alertTrailingIcon), onTap: () => setState(() => _showAlert = !_showAlert), ) : null, content: widget.showBody ? const Text(_alertBody) : null, ), ), ); } } ================================================ FILE: test/auth_code_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _authCodeKey = Key("authCodeKey"); const String _validatorErrorMessage = 'Validator error message.'; const String _providedErrorMessage = 'Provided error message.'; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _AuthCodeTestWidget( authCodeKey: _authCodeKey, ), ); expect(find.byKey(_authCodeKey), findsOneWidget); }); testWidgets("When valid code is entered, error message is not shown.", (tester) async { await tester.pumpWidget(const _AuthCodeTestWidget()); final widget = find.byType(TextFormField).first; await tester.enterText(widget, '9921'); await tester.pump(); expect(find.text(_validatorErrorMessage), findsNothing); }); testWidgets("When invalid code is entered, error message is shown.", (tester) async { await tester.pumpWidget(const _AuthCodeTestWidget()); final widget = find.byType(TextFormField).first; await tester.enterText(widget, '1111'); await tester.pump(); expect(find.text(_validatorErrorMessage), findsOneWidget); }); testWidgets("Validator errors take precedence over the provided errorText.", (tester) async { await tester.pumpWidget( const _AuthCodeTestWidget( providedErrorMessage: _providedErrorMessage, ), ); final widget = find.byType(TextFormField).first; expect(find.text(_providedErrorMessage), findsOneWidget); await tester.enterText(widget, '1111'); await tester.pump(); expect(find.text(_providedErrorMessage), findsNothing); expect(find.text(_validatorErrorMessage), findsOneWidget); }); } class _AuthCodeTestWidget extends StatelessWidget { final Key? authCodeKey; final String? providedErrorMessage; const _AuthCodeTestWidget({this.authCodeKey, this.providedErrorMessage}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Directionality( textDirection: TextDirection.ltr, child: MoonAuthCode( key: authCodeKey, authInputFieldCount: 4, errorText: providedErrorMessage, validator: (String? pin) => pin?.length == 4 && pin != '9921' ? _validatorErrorMessage : null, errorBuilder: (BuildContext context, String? errorText) => Text(errorText ?? ''), ), ), ), ); } } ================================================ FILE: test/bottom_sheet_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _bottomSheetKey = Key("bottomSheetKey"); const Key _showButtonKey = Key("showButtonKey"); const Widget _bottomSheetContent = Text("Content"); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _BottomSheetTestWidget( key: _bottomSheetKey, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byKey(_bottomSheetKey), findsOneWidget); }); testWidgets("Bottom sheet is displayed when the 'show' button is tapped.", (tester) async { await tester.pumpWidget(const _BottomSheetTestWidget()); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_bottomSheetContent), findsOneWidget); }); testWidgets( "Bottom sheet closes when a tap occurs outside its content, " "if dismissible.", (tester) async { await tester.pumpWidget(const _BottomSheetTestWidget()); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_bottomSheetContent), findsOneWidget); await tester.tapAt(const Offset(10, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_bottomSheetContent), findsNothing); }); testWidgets( "Bottom sheet stays visible when a tap occurs outside its content, " "if not dismissible.", (tester) async { await tester.pumpWidget( const _BottomSheetTestWidget( isDismissible: false, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_bottomSheetContent), findsOneWidget); await tester.tapAt(const Offset(10, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_bottomSheetContent), findsOneWidget); }); testWidgets("Bottom sheet is expanded.", (tester) async { await tester.pumpWidget( const _BottomSheetTestWidget( isExpanded: true, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_bottomSheetContent), findsOneWidget); await tester.tapAt(const Offset(1, 1)); await tester.pumpAndSettle(); expect(find.byWidget(_bottomSheetContent), findsOneWidget); await tester.tapAt(const Offset(100, 1)); await tester.pumpAndSettle(); expect(find.byWidget(_bottomSheetContent), findsOneWidget); }); } class _BottomSheetTestWidget extends StatelessWidget { final bool isDismissible; final bool isExpanded; const _BottomSheetTestWidget({ super.key, this.isDismissible = true, this.isExpanded = false, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Builder( builder: (BuildContext context) { return MoonFilledButton( key: _showButtonKey, onTap: () => bottomSheetBuilder(context), ); }, ), ), ); } Future bottomSheetBuilder(BuildContext context) { return showMoonModalBottomSheet( context: context, isExpanded: isExpanded, isDismissible: isDismissible, builder: (BuildContext context) => _bottomSheetContent, ); } } ================================================ FILE: test/breadcrumb_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _breadcrumbKey = Key("breadcrumbKey"); const String _showMoreButtonText = '...'; const String _breadcrumbItem = 'breadcrumb item'; const IconData _breadcrumbLeadingIcon = MoonIcons.other_frame_24_light; const IconData _breadcrumbDividerIcon = MoonIcons.arrows_chevron_right_double_16_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _BreadCrumbTestWidget( breadcrumbKey: _breadcrumbKey, ), ); expect(find.byKey(_breadcrumbKey), findsOneWidget); }); testWidgets( "Tapping on a 'show more' button expands collapsed items, and the " "button itself becomes hidden.", (tester) async { await tester.pumpWidget(const _BreadCrumbTestWidget()); final moreButton = find.text(_showMoreButtonText); expect(moreButton, findsOneWidget); // Collapsed item with index 1 is not visible. expect(find.textContaining('1'), findsNothing); await tester.tap(moreButton, warnIfMissed: false); await tester.pumpAndSettle(); // Collapsed item with index 1 is visible. expect(find.textContaining('1'), findsOneWidget); expect(find.textContaining(_showMoreButtonText), findsNothing); }); testWidgets("Breadcrumb item has a leading, divider and label widget.", (tester) async { await tester.pumpWidget( const _BreadCrumbTestWidget( showLeading: true, ), ); expect(find.textContaining(_breadcrumbItem), findsWidgets); expect(find.byIcon(_breadcrumbLeadingIcon), findsWidgets); expect(find.byIcon(_breadcrumbDividerIcon), findsWidgets); }); testWidgets( "Only N items are shown, where N is defined by the value of itemsToShow.", (tester) async { await tester.pumpWidget( const _BreadCrumbTestWidget( itemsToShow: 3, ), ); final moreButton = find.textContaining(_showMoreButtonText); expect(moreButton, findsOneWidget); expect(find.textContaining(_breadcrumbItem), findsNWidgets(3)); await tester.tap(moreButton, warnIfMissed: false); await tester.pumpAndSettle(); expect(find.textContaining(_breadcrumbItem), findsNWidgets(4)); }); testWidgets("Breadcrumb item callback works.", (tester) async { int value = 0; await tester.pumpWidget( _BreadCrumbTestWidget( onTap: (index) => value = index, ), ); final moreButton = find.text(_showMoreButtonText); // Find breadcrumb item with index 2 and tap on it. await tester.tap(find.textContaining('2'), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 2); // Find breadcrumb item with index 0 and tap on it. await tester.tap(find.textContaining('0'), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); expect(moreButton, findsOneWidget); await tester.tap(moreButton, warnIfMissed: false); await tester.pumpAndSettle(); // Find initially collapsed breadcrumb item with index 1 and tap on it. await tester.tap(find.textContaining('1'), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 1); // Tapping on a 'show more' button expands collapsed items, and the button // itself becomes hidden. expect(moreButton, findsNothing); }); } class _BreadCrumbTestWidget extends StatelessWidget { final Key? breadcrumbKey; final bool showLeading; final int? itemsToShow; final void Function(int)? onTap; const _BreadCrumbTestWidget({ this.breadcrumbKey, this.showLeading = false, this.itemsToShow, this.onTap, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SingleChildScrollView( scrollDirection: Axis.horizontal, child: MoonBreadcrumb( key: breadcrumbKey, visibleItemCount: itemsToShow ?? 3, divider: const Icon(_breadcrumbDividerIcon), items: [ ...List.generate(4, (i) => i).map( (int index) { return MoonBreadcrumbItem( label: Text('$_breadcrumbItem $index'), leading: showLeading ? const Icon(_breadcrumbLeadingIcon) : null, onTap: () => onTap?.call(index), ); }, ), ], ), ), ), ); } } ================================================ FILE: test/button_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _buttonKey = Key("buttonKey"); const String _buttonLabel = "Label"; const IconData _buttonLeadingIcon = MoonIcons.other_frame_24_light; const IconData _buttonTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _ButtonTestWidget( buttonKey: _buttonKey, ), ); expect(find.byKey(_buttonKey), findsOneWidget); }); testWidgets("Button has a leading, label and trailing widget.", (tester) async { await tester.pumpWidget( const _ButtonTestWidget( showLeading: true, showLabel: true, showTrailing: true, ), ); expect(find.text(_buttonLabel), findsOneWidget); expect(find.byIcon(_buttonTrailingIcon), findsOneWidget); expect(find.byIcon(_buttonLeadingIcon), findsOneWidget); }); testWidgets("Button onTap callback works.", (tester) async { bool tapped = false; await tester.pumpWidget( _ButtonTestWidget( buttonKey: _buttonKey, onTap: () => tapped = true, ), ); await tester.tap(find.byKey(_buttonKey)); await tester.pumpAndSettle(); expect(tapped, true); }); testWidgets("Button onLongPress callback works.", (tester) async { bool longPressed = false; await tester.pumpWidget( _ButtonTestWidget( buttonKey: _buttonKey, onLongPress: () => longPressed = true, ), ); await tester.longPress(find.byKey(_buttonKey)); await tester.pumpAndSettle(); expect(longPressed, true); }); } class _ButtonTestWidget extends StatelessWidget { final Key? buttonKey; final bool showLeading; final bool showTrailing; final bool showLabel; final VoidCallback? onTap; final VoidCallback? onLongPress; const _ButtonTestWidget({ this.buttonKey, this.showLeading = false, this.showTrailing = false, this.showLabel = false, this.onTap, this.onLongPress, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonButton( key: buttonKey, onLongPress: onLongPress, onTap: onTap, leading: showLeading ? const Icon(_buttonLeadingIcon) : null, label: showLabel ? const Text(_buttonLabel) : null, trailing: showTrailing ? const Icon(_buttonTrailingIcon) : null, ), ), ); } } ================================================ FILE: test/carousel_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _carouselKey = Key("carouselKey"); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _CarouselTestWidget( carouselKey: _carouselKey, ), ); expect(find.byKey(_carouselKey), findsOneWidget); }); testWidgets("Carousel items visibility changes on scroll.", (tester) async { await tester .pumpWidget(const _CarouselTestWidget(carouselKey: _carouselKey)); expect(find.text('0'), findsOneWidget); expect(find.text('1'), findsOneWidget); expect(find.text('2'), findsNothing); await tester.drag(find.byKey(_carouselKey), const Offset(-150, 0)); await tester.pumpAndSettle(); expect(find.text('0'), findsNothing); expect(find.text('1'), findsOneWidget); expect(find.text('2'), findsOneWidget); expect(find.text('3'), findsOneWidget); expect(find.text('4'), findsNothing); }); } class _CarouselTestWidget extends StatelessWidget { final Key? carouselKey; const _CarouselTestWidget({this.carouselKey}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: SizedBox( height: 114, width: 200, child: MoonCarousel( key: carouselKey, gap: 0, itemCount: 10, itemExtent: 100, itemBuilder: (BuildContext _, int itemIndex, int __) => Text("$itemIndex"), ), ), ), ); } } ================================================ FILE: test/checkbox_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _checkboxKey = Key("checkboxKey"); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _CheckboxTestWidget( checkboxKey: _checkboxKey, ), ); expect(find.byKey(_checkboxKey), findsOneWidget); }); testWidgets("Checkbox value changes after a tap.", (tester) async { bool? checkboxValue = false; await tester.pumpWidget( _CheckboxTestWidget( checkboxKey: _checkboxKey, onChanged: (bool? newValue) => checkboxValue = newValue, ), ); final checkbox = find.byKey(_checkboxKey); await tester.tap(checkbox); await tester.pumpAndSettle(); expect(checkboxValue, true); await tester.tap(checkbox); await tester.pumpAndSettle(); expect(checkboxValue, false); }); testWidgets( "Tristate checkbox value changes correctly when tapped multiple times.", (tester) async { bool? checkboxValue = false; await tester.pumpWidget( _CheckboxTestWidget( checkboxKey: _checkboxKey, isTristate: true, onChanged: (newValue) => checkboxValue = newValue, ), ); final checkbox = find.byKey(_checkboxKey); await tester.tap(checkbox); await tester.pumpAndSettle(); expect(checkboxValue, true); await tester.tap(checkbox); await tester.pumpAndSettle(); expect(checkboxValue, null); await tester.tap(checkbox); await tester.pumpAndSettle(); expect(checkboxValue, false); }); } class _CheckboxTestWidget extends StatefulWidget { final Key? checkboxKey; final bool isTristate; final void Function(bool?)? onChanged; const _CheckboxTestWidget({ this.checkboxKey, this.isTristate = false, this.onChanged, }); @override State<_CheckboxTestWidget> createState() => _CheckboxTestWidgetState(); } class _CheckboxTestWidgetState extends State<_CheckboxTestWidget> { bool? _checkboxValue = false; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonCheckbox( key: widget.checkboxKey, value: _checkboxValue, tristate: widget.isTristate, onChanged: (bool? newValue) { setState(() => _checkboxValue = newValue); widget.onChanged?.call(newValue); }, ), ), ); } } ================================================ FILE: test/chip_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _chipKey = Key("chipKey"); const String _chipLabel = "Label"; const IconData _chipLeadingIcon = MoonIcons.other_frame_24_light; const IconData _chipTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _ChipTestWidget( chipKey: _chipKey, ), ); expect(find.byKey(_chipKey), findsOneWidget); }); testWidgets("Chip has only a label and no leading or trailing widget.", (tester) async { await tester.pumpWidget( const _ChipTestWidget( showLabel: true, ), ); expect(find.text(_chipLabel), findsOneWidget); expect(find.byIcon(_chipTrailingIcon), findsNothing); expect(find.byIcon(_chipLeadingIcon), findsNothing); }); testWidgets("Chip has a leading, label and trailing widget.", (tester) async { await tester.pumpWidget( const _ChipTestWidget( showLeading: true, showLabel: true, showTrailing: true, ), ); expect(find.byIcon(_chipLeadingIcon), findsOneWidget); expect(find.text(_chipLabel), findsOneWidget); expect(find.byIcon(_chipTrailingIcon), findsOneWidget); }); } class _ChipTestWidget extends StatelessWidget { final Key? chipKey; final bool showLeading; final bool showTrailing; final bool showLabel; const _ChipTestWidget({ this.chipKey, this.showLeading = false, this.showLabel = false, this.showTrailing = false, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonChip( key: chipKey, leading: showLeading ? const Icon(_chipLeadingIcon) : null, label: showLabel ? const Text(_chipLabel) : null, trailing: showTrailing ? const Icon(_chipTrailingIcon) : null, ), ), ); } } ================================================ FILE: test/drawer_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _drawerKey = Key("drawerKey"); const Key _openButtonKey = Key("openButtonKey"); const Key _closeButtonKey = Key("closeButtonKey"); const Widget _drawerContent = Text("Content"); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _DrawerTestWidget( drawerKey: _drawerKey, ), ); final button = find.byKey(_openButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byKey(_drawerKey), findsOneWidget); }); testWidgets("Drawer is displayed when the open button is tapped.", (tester) async { await tester.pumpWidget(const _DrawerTestWidget()); final button = find.byKey(_openButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsOneWidget); }); testWidgets("Drawer closes when a tap occurs outside its content.", (tester) async { await tester.pumpWidget(const _DrawerTestWidget()); final button = find.byKey(_openButtonKey); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsOneWidget); await tester.tapAt(const Offset(210, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsNothing); }); testWidgets("Drawer closes when the 'close' button is tapped.", (tester) async { await tester.pumpWidget(const _DrawerTestWidget()); final button = find.byKey(_openButtonKey); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsOneWidget); await tester.tap(find.byKey(_closeButtonKey)); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsNothing); }); } class _DrawerTestWidget extends StatelessWidget { final Key? drawerKey; const _DrawerTestWidget({this.drawerKey}); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( drawer: MoonDrawer( key: drawerKey, width: 200, child: Column( children: [ _drawerContent, Builder( builder: (BuildContext context) { return MoonFilledButton( key: _closeButtonKey, onTap: () => Navigator.of(context).pop(), ); }, ), ], ), ), body: Builder( builder: (BuildContext context) { return MoonFilledButton( key: _openButtonKey, onTap: () => Scaffold.of(context).openDrawer(), ); }, ), ), ); } } ================================================ FILE: test/dropdown_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/src/widgets/buttons/filled_button.dart'; import 'package:moon_design/src/widgets/dropdown/dropdown.dart'; const Key _dropdownKey = Key("dropdownKey"); const Key _showButtonKey = Key("showButtonKey"); const Widget _drawerContent = Text("Content"); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _DropdownTestWidget( dropdownKey: _dropdownKey, ), ); expect(find.byKey(_dropdownKey), findsOneWidget); }); testWidgets("Dropdown is displayed when the 'show' button is tapped.", (tester) async { await tester.pumpWidget(const _DropdownTestWidget()); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsOneWidget); }); testWidgets( "Dropdown collapses when a tap occurs outside its content, if dismissible.", (tester) async { await tester.pumpWidget(const _DropdownTestWidget()); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsOneWidget); await tester.tapAt(const Offset(10, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsNothing); }); testWidgets( "Dropdown stays expanded when a tap occurs outside its content, if not dismissible.", (tester) async { await tester.pumpWidget(const _DropdownTestWidget(isDismissible: false)); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsOneWidget); await tester.tapAt(const Offset(10, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsOneWidget); }); testWidgets("Provided background color is used for dropdown.", (tester) async { await tester.pumpWidget( const _DropdownTestWidget( color: Colors.blue, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_drawerContent), findsOneWidget); expect( find.byWidgetPredicate( (Widget widget) => widget is MoonDropdown && widget.backgroundColor == Colors.blue, ), findsOneWidget, ); }); } class _DropdownTestWidget extends StatefulWidget { final Key? dropdownKey; final bool isDismissible; final Color color; const _DropdownTestWidget({ this.dropdownKey, this.isDismissible = true, this.color = Colors.white, }); @override State<_DropdownTestWidget> createState() => _DropdownTestWidgetState(); } class _DropdownTestWidgetState extends State<_DropdownTestWidget> { bool _show = false; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: MoonDropdown( key: widget.dropdownKey, show: _show, backgroundColor: widget.color, onTapOutside: () => setState(() => _show = !widget.isDismissible), content: _drawerContent, child: MoonFilledButton( key: _showButtonKey, onTap: () => setState(() => _show = true), ), ), ), ), ); } } ================================================ FILE: test/menu_item_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _menuItemKey = Key("menuItemKey"); const String _menuItemLabel = "Label"; const String _menuItemContent = "Content"; const IconData _menuItemLeadingIcon = MoonIcons.other_frame_24_light; const IconData _menuItemTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _MenuItemTestWidget( menuItemKey: _menuItemKey, ), ); expect(find.byKey(_menuItemKey), findsOneWidget); }); testWidgets( "Menu item has only label and no leading, trailing or content widget.", (tester) async { await tester.pumpWidget(const _MenuItemTestWidget()); expect(find.text(_menuItemLabel), findsOneWidget); expect(find.byIcon(_menuItemLeadingIcon), findsNothing); expect(find.byIcon(_menuItemTrailingIcon), findsNothing); expect(find.text(_menuItemContent), findsNothing); }); testWidgets("Menu item has a leading, label, trailing and content widget.", (tester) async { await tester.pumpWidget( const _MenuItemTestWidget( showLeading: true, showTrailing: true, showContent: true, ), ); expect(find.text(_menuItemLabel), findsOneWidget); expect(find.byIcon(_menuItemLeadingIcon), findsOneWidget); expect(find.byIcon(_menuItemTrailingIcon), findsOneWidget); expect(find.text(_menuItemContent), findsOneWidget); }); testWidgets("Menu item onTap callback works.", (tester) async { bool value = false; await tester.pumpWidget( _MenuItemTestWidget( menuItemKey: _menuItemKey, onTap: () => value = !value, ), ); await tester.tap(find.byKey(_menuItemKey)); await tester.pumpAndSettle(); expect(value, true); }); } class _MenuItemTestWidget extends StatelessWidget { final Key? menuItemKey; final bool showLeading; final bool showTrailing; final bool showContent; final VoidCallback? onTap; const _MenuItemTestWidget({ this.menuItemKey, this.showLeading = false, this.showTrailing = false, this.showContent = false, this.onTap, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonMenuItem( key: menuItemKey, onTap: onTap, leading: showLeading ? const Icon(_menuItemLeadingIcon) : null, label: const Text(_menuItemLabel), trailing: showTrailing ? const Icon(_menuItemTrailingIcon) : null, content: showContent ? const Text(_menuItemContent) : null, ), ), ); } } ================================================ FILE: test/modal_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _modalKey = Key("modalKey"); const Key _showButtonKey = Key("showButtonKey"); const Key _closeButtonKey = Key("closeButtonKey"); const Widget _modalContent = Text('Content'); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _ModalTestWidget( modalKey: _modalKey, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byKey(_modalKey), findsOneWidget); }); testWidgets("Modal is displayed when the 'show' button is tapped.", (tester) async { await tester.pumpWidget(const _ModalTestWidget()); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_modalContent), findsOneWidget); }); testWidgets( "Modal closes when a tap occurs outside its content, if dismissible.", ( tester, ) async { await tester.pumpWidget(const _ModalTestWidget()); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_modalContent), findsOneWidget); await tester.tapAt(const Offset(10, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_modalContent), findsNothing); }); testWidgets( "Modal stays visible when a tap occurs outside its content," " if not dismissible.", (tester) async { await tester.pumpWidget( const _ModalTestWidget( isDismissible: false, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_modalContent), findsOneWidget); await tester.tapAt(const Offset(10, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_modalContent), findsOneWidget); }); testWidgets("Modal closes when the 'close' button is tapped.", (tester) async { await tester.pumpWidget(const _ModalTestWidget()); final button = find.byKey(_showButtonKey); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_modalContent), findsOneWidget); await tester.tap(find.byKey(_closeButtonKey)); await tester.pumpAndSettle(); expect(find.byWidget(_modalContent), findsNothing); }); } class _ModalTestWidget extends StatelessWidget { final Key? modalKey; final bool isDismissible; const _ModalTestWidget({ this.modalKey, this.isDismissible = true, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: Builder( builder: (context) { return MoonFilledButton( key: _showButtonKey, onTap: () => modalBuilder(context), ); }, ), ), ), ); } Future modalBuilder(BuildContext context) { return showMoonModal( context: context, barrierDismissible: isDismissible, builder: (BuildContext context) { return Directionality( textDirection: Directionality.of(context), child: MoonModal( key: modalKey, child: SizedBox( width: 300, child: Column( children: [ _modalContent, MoonFilledButton( key: _closeButtonKey, onTap: () => Navigator.of(context).pop(), ), ], ), ), ), ); }, ); } } ================================================ FILE: test/popover_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _popoverKey = Key("popoverKey"); const Key _showButtonKey = Key("showButtonKey"); const Key _closeButtonKey = Key("closeButtonKey"); const Widget _content = Text("Content"); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _PopoverTestWidget( popoverKey: _popoverKey, ), ); expect(find.byKey(_popoverKey), findsOneWidget); }); testWidgets("Popover is displayed when the 'show' button is tapped.", (tester) async { await tester.pumpWidget(const _PopoverTestWidget()); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_content), findsOneWidget); }); testWidgets( "Popover closes when a tap occurs outside its content, if dismissible.", (tester) async { await tester.pumpWidget(const _PopoverTestWidget()); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_content), findsOneWidget); await tester.tapAt(const Offset(10, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_content), findsNothing); }); testWidgets( "Popover stays visible when a tap occurs outside its content, " "if not dismissible.", (tester) async { await tester.pumpWidget( const _PopoverTestWidget( isDismissible: false, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_content), findsOneWidget); await tester.tapAt(const Offset(10, 10)); await tester.pumpAndSettle(); expect(find.byWidget(_content), findsOneWidget); }); testWidgets("Popover closes when the 'close' button is tapped.", (tester) async { await tester.pumpWidget(const _PopoverTestWidget()); final button = find.byKey(_showButtonKey); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_content), findsOneWidget); await tester.tap(find.byKey(_closeButtonKey)); await tester.pumpAndSettle(); expect(find.byWidget(_content), findsNothing); }); } class _PopoverTestWidget extends StatefulWidget { final Key? popoverKey; final bool isDismissible; const _PopoverTestWidget({ this.popoverKey, this.isDismissible = true, }); @override State<_PopoverTestWidget> createState() => _PopoverTestWidgetState(); } class _PopoverTestWidgetState extends State<_PopoverTestWidget> { bool _show = false; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Center( child: MoonPopover( key: widget.popoverKey, show: _show, onTapOutside: () => setState(() => _show = !widget.isDismissible), content: ConstrainedBox( constraints: const BoxConstraints(maxWidth: 190), child: Column( children: [ _content, MoonFilledButton( key: _closeButtonKey, onTap: () => setState(() => _show = false), ), ], ), ), child: MoonFilledButton( key: _showButtonKey, onTap: () => setState(() => _show = !_show), ), ), ), ), ); } } ================================================ FILE: test/radio_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; enum _Choice { first, second } const Key _firstRadioKey = Key("firstRadioKey"); const Key _secondRadioKey = Key("secondRadioKey"); void main() { Finder findSelectorFirstRadio() { return find.byWidgetPredicate( (Widget widget) => widget is MoonRadio && widget.key == _firstRadioKey && widget.value == _Choice.first && widget.groupValue == _Choice.first, ); } Finder findSelectorSecondRadio() { return find.byWidgetPredicate( (Widget widget) => widget is MoonRadio && widget.key == _secondRadioKey && widget.value == _Choice.second && widget.groupValue == _Choice.second, ); } testWidgets("Provided keys are used.", (tester) async { await tester.pumpWidget( const _RadioTestWidget( firstRadioKey: _firstRadioKey, secondRadioKey: _secondRadioKey, ), ); expect(find.byKey(_firstRadioKey), findsOneWidget); expect(find.byKey(_secondRadioKey), findsOneWidget); }); testWidgets("The selection of radio buttons can be changed.", (tester) async { await tester.pumpWidget( const _RadioTestWidget( firstRadioKey: _firstRadioKey, secondRadioKey: _secondRadioKey, ), ); await tester.tap(find.byKey(_firstRadioKey)); await tester.pumpAndSettle(); expect(findSelectorFirstRadio(), findsOneWidget); await tester.tap(find.byKey(_secondRadioKey)); await tester.pumpAndSettle(); expect(findSelectorFirstRadio(), findsNothing); expect(findSelectorSecondRadio(), findsOneWidget); await tester.tap(find.byKey(_firstRadioKey)); await tester.pumpAndSettle(); expect(findSelectorFirstRadio(), findsOneWidget); expect(findSelectorSecondRadio(), findsNothing); }); testWidgets("Selected radio button can be unselected.", (tester) async { await tester.pumpWidget( const _RadioTestWidget( firstRadioKey: _firstRadioKey, secondRadioKey: _secondRadioKey, toggleable: true, ), ); await tester.tap(find.byKey(_firstRadioKey)); await tester.pumpAndSettle(); expect(findSelectorFirstRadio(), findsOneWidget); await tester.tap(find.byKey(_secondRadioKey)); await tester.pumpAndSettle(); expect(findSelectorFirstRadio(), findsNothing); expect(findSelectorSecondRadio(), findsOneWidget); await tester.tap(find.byKey(_secondRadioKey)); await tester.pumpAndSettle(); expect(findSelectorFirstRadio(), findsNothing); expect(findSelectorSecondRadio(), findsNothing); }); } class _RadioTestWidget extends StatefulWidget { final bool toggleable; final Key? firstRadioKey; final Key? secondRadioKey; const _RadioTestWidget({ this.firstRadioKey, this.secondRadioKey, this.toggleable = false, }); @override State<_RadioTestWidget> createState() => _RadioTestWidgetState(); } class _RadioTestWidgetState extends State<_RadioTestWidget> { _Choice? _value; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Column( children: [ MoonRadio( key: widget.firstRadioKey, toggleable: widget.toggleable, value: _Choice.first, groupValue: _value, onChanged: (_Choice? choice) => setState(() => _value = choice), ), const SizedBox(height: 8), MoonRadio( key: widget.secondRadioKey, toggleable: widget.toggleable, value: _Choice.second, groupValue: _value, onChanged: (_Choice? choice) => setState(() => _value = choice), ), ], ), ), ); } } ================================================ FILE: test/segmented_control_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _segmentedControlKey = Key("segmentControlKey"); const String _firstSegmentLabel = "Label 1"; const String _secondSegmentLabel = "Label 2"; const String _thirdSegmentLabel = "Label 3"; const IconData _segmentLeadingIcon = MoonIcons.other_frame_24_light; const IconData _segmentTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _SegmentedControlTestWidget( segmentedControlKey: _segmentedControlKey, ), ); expect(find.byKey(_segmentedControlKey), findsOneWidget); }); testWidgets("Segment has a leading, label and trailing widget.", (tester) async { await tester.pumpWidget( const _SegmentedControlTestWidget( showLabel: true, showLeading: true, showTrailing: true, ), ); expect(find.textContaining(_firstSegmentLabel), findsWidgets); expect(find.textContaining(_secondSegmentLabel), findsWidgets); expect(find.textContaining(_thirdSegmentLabel), findsWidgets); expect(find.byIcon(_segmentLeadingIcon), findsWidgets); expect(find.byIcon(_segmentTrailingIcon), findsWidgets); }); testWidgets("Segment onTap callback works.", (tester) async { var value = 0; await tester.pumpWidget( _SegmentedControlTestWidget( showLabel: true, onTap: (int index) => value = index, ), ); await tester.tap(find.text(_secondSegmentLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 1); await tester.tap(find.text(_firstSegmentLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); await tester.tap(find.text(_thirdSegmentLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 2); }); testWidgets( "The onTap callbacks of segments are ignored if segmented control is " "disabled.", (tester) async { var value = 0; await tester.pumpWidget( _SegmentedControlTestWidget( showLabel: true, isDisabled: true, onTap: (int index) => value = index, ), ); await tester.tap(find.text(_secondSegmentLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); await tester.tap(find.text(_firstSegmentLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); await tester.tap(find.text(_thirdSegmentLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); }); } class _SegmentedControlTestWidget extends StatelessWidget { final Key? segmentedControlKey; final bool showLeading; final bool showLabel; final bool showTrailing; final bool isDisabled; final void Function(int)? onTap; const _SegmentedControlTestWidget({ this.segmentedControlKey, this.showLeading = false, this.showLabel = false, this.showTrailing = false, this.isDisabled = false, this.onTap, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonSegmentedControl( key: segmentedControlKey, isDisabled: isDisabled, onSegmentChanged: onTap, segments: [ Segment( leading: showLeading ? const Icon(_segmentLeadingIcon) : null, label: showLabel ? const Text(_firstSegmentLabel) : null, trailing: showTrailing ? const Icon(_segmentTrailingIcon) : null, ), Segment( leading: showLeading ? const Icon(_segmentLeadingIcon) : null, label: showLabel ? const Text(_secondSegmentLabel) : null, trailing: showTrailing ? const Icon(_segmentTrailingIcon) : null, ), Segment( leading: showLeading ? const Icon(_segmentLeadingIcon) : null, label: showLabel ? const Text(_thirdSegmentLabel) : null, trailing: showTrailing ? const Icon(_segmentTrailingIcon) : null, ), ], ), ), ); } } ================================================ FILE: test/switch_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _switchKey = Key("switchKey"); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _SwitchTestWidget( switchKey: _switchKey, ), ); expect(find.byKey(_switchKey), findsOneWidget); }); testWidgets("Tapping on a switch changes its value.", (tester) async { await tester.pumpWidget( const _SwitchTestWidget( switchKey: _switchKey, ), ); expect( find.byWidgetPredicate( (Widget widget) => widget is MoonSwitch && widget.value == true, ), findsOneWidget, ); await tester.tap(find.byKey(_switchKey)); await tester.pumpAndSettle(); expect( find.byWidgetPredicate( (Widget widget) => widget is MoonSwitch && widget.value == false, ), findsOneWidget, ); await tester.tap(find.byKey(_switchKey)); await tester.pumpAndSettle(); expect( find.byWidgetPredicate( (Widget widget) => widget is MoonSwitch && widget.value == true, ), findsOneWidget, ); }); } class _SwitchTestWidget extends StatefulWidget { final Key? switchKey; const _SwitchTestWidget({this.switchKey}); @override State<_SwitchTestWidget> createState() => _SwitchTestWidgetState(); } class _SwitchTestWidgetState extends State<_SwitchTestWidget> { bool _switchValue = true; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonSwitch( key: widget.switchKey, value: _switchValue, onChanged: (bool newValue) => setState(() => _switchValue = newValue), ), ), ); } } ================================================ FILE: test/tab_bar_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _tabBarKey = Key("tab_bar_test"); const String _firstTabLabel = "Label 1"; const String _secondTabLabel = "Label 2"; const String _thirdTabLabel = "Label 3"; const String _fourthTabLabel = "Label 4"; const IconData _tabLeadingIcon = MoonIcons.other_frame_24_light; const IconData _tabTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _TabBarTestWidget( tabBarKey: _tabBarKey, ), ); expect(find.byKey(_tabBarKey), findsOneWidget); }); testWidgets("Tab bar has a leading, label and trailing widget.", (tester) async { await tester.pumpWidget( const _TabBarTestWidget( showLabel: true, showLeading: true, showTrailing: true, ), ); expect(find.textContaining(_firstTabLabel), findsWidgets); expect(find.textContaining(_secondTabLabel), findsWidgets); expect(find.textContaining(_thirdTabLabel), findsWidgets); expect(find.textContaining(_fourthTabLabel), findsWidgets); expect(find.byIcon(_tabLeadingIcon), findsWidgets); expect(find.byIcon(_tabTrailingIcon), findsWidgets); }); testWidgets("Tab onTap callback works.", (tester) async { var value = 0; await tester.pumpWidget( _TabBarTestWidget( showLabel: true, onTap: (index) => value = index, ), ); await tester.tap(find.text(_secondTabLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 1); await tester.tap(find.text(_firstTabLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); await tester.tap(find.text(_thirdTabLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 2); }); testWidgets("OnTap callback of a disabled tab is ignored.", (tester) async { var value = 0; await tester.pumpWidget( _TabBarTestWidget( showLabel: true, isDisabled: true, onTap: (index) => value = index, ), ); await tester.tap(find.text(_secondTabLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); await tester.tap(find.text(_firstTabLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); await tester.tap(find.text(_thirdTabLabel), warnIfMissed: false); await tester.pumpAndSettle(); expect(value, 0); }); } class _TabBarTestWidget extends StatelessWidget { final Key? tabBarKey; final bool showLeading; final bool showLabel; final bool showTrailing; final bool isDisabled; final void Function(int)? onTap; const _TabBarTestWidget({ this.tabBarKey, this.showLeading = false, this.showLabel = false, this.showTrailing = false, this.isDisabled = false, this.onTap, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonTabBar( key: tabBarKey, onTabChanged: onTap, tabs: [ MoonTab( disabled: isDisabled, leading: showLeading ? const Icon(_tabLeadingIcon) : null, label: showLabel ? const Text(_firstTabLabel) : null, trailing: showTrailing ? const Icon(_tabTrailingIcon) : null, ), MoonTab( disabled: isDisabled, leading: showLeading ? const Icon(_tabLeadingIcon) : null, label: showLabel ? const Text(_secondTabLabel) : null, trailing: showTrailing ? const Icon(_tabTrailingIcon) : null, ), MoonTab( disabled: isDisabled, leading: showLeading ? const Icon(_tabLeadingIcon) : null, label: showLabel ? const Text(_thirdTabLabel) : null, trailing: showTrailing ? const Icon(_tabTrailingIcon) : null, ), MoonTab( disabled: isDisabled, leading: showLeading ? const Icon(_tabLeadingIcon) : null, label: showLabel ? const Text(_fourthTabLabel) : null, trailing: showTrailing ? const Icon(_tabTrailingIcon) : null, ), ], ), ), ); } } ================================================ FILE: test/tag_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _tagKey = Key("tagKey"); const String _tagLabel = "Label"; const IconData _tagLeadingIcon = MoonIcons.other_frame_24_light; const IconData _tagTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _TagTestWidget( tagKey: _tagKey, ), ); expect(find.byKey(_tagKey), findsOneWidget); }); testWidgets("Default tag has no leading, label or trailing widget.", (tester) async { await tester.pumpWidget(const _TagTestWidget()); expect(find.text(_tagLabel), findsNothing); expect(find.text(_tagLabel), findsNothing); expect(find.text(_tagLabel), findsNothing); }); testWidgets("Tag has a leading, label and trailing widget.", (tester) async { await tester.pumpWidget( const _TagTestWidget( showLeading: true, showLabel: true, showTrailing: true, ), ); expect(find.text(_tagLabel), findsOneWidget); expect(find.byIcon(_tagTrailingIcon), findsOneWidget); expect(find.byIcon(_tagLeadingIcon), findsOneWidget); }); testWidgets("Tag onTap callback works.", (tester) async { bool isTapped = false; await tester.pumpWidget( _TagTestWidget( tagKey: _tagKey, showTrailing: true, onTap: () => isTapped = true, ), ); await tester.tap(find.byKey(_tagKey)); await tester.pumpAndSettle(); expect(isTapped, true); }); testWidgets("Tag onLongPress callback works.", (tester) async { bool longPressed = false; bool tapped = false; await tester.pumpWidget( _TagTestWidget( tagKey: _tagKey, onLongPress: () => longPressed = true, onTap: () => tapped = true, ), ); await tester.longPress(find.byKey(_tagKey)); await tester.pumpAndSettle(); expect(longPressed, true); expect(tapped, false); }); } class _TagTestWidget extends StatelessWidget { final Key? tagKey; final bool showLeading; final bool showLabel; final bool showTrailing; final VoidCallback? onTap; final VoidCallback? onLongPress; const _TagTestWidget({ this.tagKey, this.showLeading = false, this.showLabel = false, this.showTrailing = false, this.onTap, this.onLongPress, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: MoonTag( key: tagKey, onTap: onTap, onLongPress: onLongPress, leading: showLeading ? const Icon(_tagLeadingIcon) : null, label: showLabel ? const Text(_tagLabel) : null, trailing: showTrailing ? const Icon(_tagTrailingIcon) : null, ), ), ); } } ================================================ FILE: test/text_area_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _textAreaKey = Key("textAreaKey"); const Key _submitButtonKey = Key("submitButtonKey"); const String _hintText = 'Hint text'; const String _errorText = 'Error text'; const String _helperText = 'Helper text'; const String _validText = 'Valid text'; const String _invalidText = 'Invalid text'; void main() { Future submit(WidgetTester tester) async { await tester.tap(find.byKey(_submitButtonKey)); await tester.pumpAndSettle(); } testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _TextAreaTestWidget( textAreaKey: _textAreaKey, ), ); expect(find.byKey(_textAreaKey), findsOneWidget); }); testWidgets("When valid text is entered and submitted, error is not shown.", (tester) async { await tester.pumpWidget( const _TextAreaTestWidget( textAreaKey: _textAreaKey, ), ); final textArea = find.byKey(_textAreaKey); await tester.enterText(textArea, _validText); await tester.pumpAndSettle(); expect(find.text(_validText), findsOneWidget); await submit(tester); expect(find.text(_errorText), findsNothing); }); testWidgets("When invalid text is entered and submitted, error is shown.", (tester) async { await tester.pumpWidget( const _TextAreaTestWidget( textAreaKey: _textAreaKey, ), ); final textArea = find.byKey(_textAreaKey); await tester.enterText(textArea, _invalidText); await tester.pumpAndSettle(); expect(find.text(_invalidText), findsOneWidget); await submit(tester); expect(find.text(_errorText), findsOneWidget); }); testWidgets("Helper text is shown.", (tester) async { await tester.pumpWidget( const _TextAreaTestWidget( showHelper: true, ), ); expect(find.text(_helperText), findsOneWidget); }); testWidgets("Hint text is shown.", (tester) async { await tester.pumpWidget( const _TextAreaTestWidget( showHelper: true, ), ); expect(find.text(_hintText), findsOneWidget); }); testWidgets("When text area is disabled, input cannot be entered.", (tester) async { await tester.pumpWidget( const _TextAreaTestWidget( textAreaKey: _textAreaKey, enabled: false, ), ); final textArea = find.byKey(_textAreaKey); await tester.enterText(textArea, _validText); await tester.pumpAndSettle(); expect(find.text(_validText), findsNothing); }); } class _TextAreaTestWidget extends StatelessWidget { final Key? textAreaKey; final bool enabled; final bool showHelper; const _TextAreaTestWidget({ this.textAreaKey, this.enabled = true, this.showHelper = false, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Form( child: Builder( builder: (BuildContext context) { return Column( children: [ MoonTextArea( key: textAreaKey, enabled: enabled, hintText: _hintText, validator: (String? value) => value?.length != null && value!.length > 10 ? _errorText : null, helper: showHelper ? const Text(_helperText) : null, ), MoonFilledButton( key: _submitButtonKey, onTap: () => Form.of(context).validate(), ), ], ); }, ), ), ), ); } } ================================================ FILE: test/text_input_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _textInputKey = Key("textInputKey"); const Key _submitButtonKey = Key("submitButtonKey"); const String _hintText = 'Hint text'; const String _errorText = 'Error text'; const String _helperText = 'Helper text'; const String _validText = 'Valid text'; const String _invalidText = 'Invalid text'; const IconData _textInputLeadingIcon = MoonIcons.other_frame_24_light; const IconData _textInputTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { Future submit(WidgetTester tester) async { await tester.tap(find.byKey(_submitButtonKey)); await tester.pumpAndSettle(); } testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _TextInputTestWidget( textInputKey: _textInputKey, ), ); expect(find.byKey(_textInputKey), findsOneWidget); }); testWidgets("When valid text is entered and submitted, error is not shown.", (tester) async { await tester.pumpWidget( const _TextInputTestWidget( textInputKey: _textInputKey, ), ); final textInput = find.byKey(_textInputKey); await tester.enterText(textInput, _validText); await tester.pumpAndSettle(); expect(find.text(_validText), findsOneWidget); await submit(tester); expect(find.text(_errorText), findsNothing); }); testWidgets("When invalid text is entered and submitted, error is shown.", (tester) async { await tester.pumpWidget( const _TextInputTestWidget( textInputKey: _textInputKey, ), ); final textInput = find.byKey(_textInputKey); await tester.enterText(textInput, _invalidText); await tester.pumpAndSettle(); expect(find.text(_invalidText), findsOneWidget); await submit(tester); expect(find.text(_errorText), findsOneWidget); }); testWidgets("Helper text is shown.", (tester) async { await tester.pumpWidget( const _TextInputTestWidget( showHelper: true, ), ); expect(find.text(_helperText), findsOneWidget); }); testWidgets("Hint text is shown.", (tester) async { await tester.pumpWidget( const _TextInputTestWidget( showHelper: true, ), ); expect(find.text(_hintText), findsOneWidget); }); testWidgets("Text input has a leading and trailing widget.", (tester) async { await tester.pumpWidget( const _TextInputTestWidget( showLeading: true, showTrailing: true, ), ); expect(find.byIcon(_textInputLeadingIcon), findsOneWidget); expect(find.byIcon(_textInputTrailingIcon), findsOneWidget); }); testWidgets("When text input is disabled, input cannot be entered.", (tester) async { await tester.pumpWidget( const _TextInputTestWidget( textInputKey: _textInputKey, enabled: false, ), ); final textArea = find.byKey(_textInputKey); await tester.enterText(textArea, _validText); await tester.pumpAndSettle(); expect(find.text(_validText), findsNothing); }); } class _TextInputTestWidget extends StatelessWidget { final Key? textInputKey; final bool enabled; final bool showHelper; final bool showLeading; final bool showTrailing; const _TextInputTestWidget({ this.textInputKey, this.enabled = true, this.showHelper = false, this.showLeading = false, this.showTrailing = false, }); @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Form( child: Builder( builder: (BuildContext context) { return Column( children: [ MoonFormTextInput( key: textInputKey, enabled: enabled, hintText: _hintText, validator: (String? value) => value != null && value.length > 10 ? _errorText : null, leading: showLeading ? const Icon(_textInputLeadingIcon) : null, trailing: showTrailing ? const Icon(_textInputTrailingIcon) : null, helper: showHelper ? const Text(_helperText) : null, ), MoonFilledButton( key: _submitButtonKey, onTap: () => Form.of(context).validate(), ), ], ); }, ), ), ), ); } } ================================================ FILE: test/toast_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/moon_design.dart'; const Key _showButtonKey = Key('showButtonKey'); const String _toastLabel = 'Label'; const String _toastBody = 'Body'; const IconData _toastLeadingIcon = MoonIcons.other_frame_24_light; const IconData _toastTrailingIcon = MoonIcons.controls_close_small_24_light; void main() { testWidgets( "Toast is displayed when the 'show' button is tapped and dismissed after " "2 seconds.", (tester) async { await tester.pumpWidget(_ToastTestWidget()); await tester.tap(find.byKey(_showButtonKey)); await tester.pump(const Duration(milliseconds: 200)); expect(find.text(_toastLabel), findsOneWidget); expect(find.text(_toastBody), findsOneWidget); expect(find.byIcon(_toastLeadingIcon), findsOneWidget); expect(find.byIcon(_toastTrailingIcon), findsOneWidget); await tester.pump(const Duration(seconds: 2)); expect(find.text(_toastLabel), findsNothing); }); } class _ToastTestWidget extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Builder( builder: (context) { return MoonFilledButton( key: _showButtonKey, onTap: () { MoonToast.show( context, displayDuration: const Duration(seconds: 2), transitionDuration: Duration.zero, leading: const Icon(_toastLeadingIcon), label: const Text(_toastLabel), trailing: const Icon(_toastTrailingIcon), content: const Text(_toastBody), ); }, ); }, ), ), ); } } ================================================ FILE: test/tooltip_test.dart ================================================ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:moon_design/src/widgets/buttons/filled_button.dart'; import 'package:moon_design/src/widgets/tooltip/tooltip.dart'; const Key _tooltipKey = Key("tooltipKey"); const Key _showButtonKey = Key("_showButtonKey"); const Widget _tooltipContent = Text("Content"); void main() { testWidgets("Provided key is used.", (tester) async { await tester.pumpWidget( const _ToastTestWidget( tooltipKey: _tooltipKey, ), ); expect(find.byKey(_tooltipKey), findsOneWidget); }); testWidgets("Tooltip is displayed when the 'show' button is tapped.", (tester) async { await tester.pumpWidget( const _ToastTestWidget( tooltipKey: _tooltipKey, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_tooltipContent), findsOneWidget); }); testWidgets("Tooltip closes when tapped.", (tester) async { await tester.pumpWidget( const _ToastTestWidget( tooltipKey: _tooltipKey, ), ); final button = find.byKey(_showButtonKey); final tooltipContent = find.byWidget(_tooltipContent); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); await tester.tap(tooltipContent); await tester.pumpAndSettle(); expect(tooltipContent, findsNothing); }); testWidgets("Provided background color is used.", (tester) async { await tester.pumpWidget( const _ToastTestWidget( tooltipKey: _tooltipKey, color: Colors.blue, ), ); final button = find.byKey(_showButtonKey); expect(button, findsOneWidget); await tester.tap(button); await tester.pumpAndSettle(); expect(find.byWidget(_tooltipContent), findsOneWidget); expect( find.byWidgetPredicate( (Widget widget) => widget is MoonTooltip && widget.backgroundColor == Colors.blue, ), findsOneWidget, ); }); } class _ToastTestWidget extends StatefulWidget { final Key? tooltipKey; final Color color; const _ToastTestWidget({ this.tooltipKey, this.color = Colors.white, }); @override State<_ToastTestWidget> createState() => _ToastTestWidgetState(); } class _ToastTestWidgetState extends State<_ToastTestWidget> { bool _show = false; @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Builder( builder: (BuildContext context) { return Center( child: MoonTooltip( key: widget.tooltipKey, show: _show, backgroundColor: widget.color, content: _tooltipContent, child: MoonFilledButton( key: _showButtonKey, onTap: () => setState(() => _show = true), ), ), ); }, ), ), ); } }