diff --git a/.firebaserc b/.firebaserc new file mode 100644 index 00000000..91581093 --- /dev/null +++ b/.firebaserc @@ -0,0 +1,5 @@ +{ + "projects": { + "default": "zeta-ds" + } +} \ No newline at end of file diff --git a/.github/workflows/on-release.yml b/.github/workflows/on-release.yml new file mode 100644 index 00000000..4d6d1bde --- /dev/null +++ b/.github/workflows/on-release.yml @@ -0,0 +1,41 @@ +name: "CI - Release" +on: + workflow_dispatch: + release: + types: [released] + +jobs: + check-package: + runs-on: ubuntu-latest + permissions: + id-token: write + environment: pub.dev + steps: + - uses: actions/checkout@v4 + - uses: dart-lang/setup-dart@v1 + - name: Install Flutter + uses: subosito/flutter-action@v2 + with: + flutter-version: "3.16.x" + channel: "stable" + - name: Install dependencies + run: flutter pub get + - name: Format code + run: dart format --fix . + - name: Check Publish Warnings + run: dart pub publish --dry-run + - name: Publish + run: dart pub publish --force + deploy-website: + runs-on: ubuntu-latest + steps: + - uses: actions/github-script@v6 + with: + github-token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} + script: | + await github.rest.actions.createworkflowDispatch({ + owner: 'zebratechnologies', + repo: 'zeta', + workflow_id: 'deploy-prod.yml', + ref: 'main' + }) diff --git a/.github/workflows/onMerge.yml b/.github/workflows/onMerge.yml deleted file mode 100644 index 18736e3c..00000000 --- a/.github/workflows/onMerge.yml +++ /dev/null @@ -1,136 +0,0 @@ -name: "Merge" - -on: - pull_request: - types: [closed] - -jobs: - changes: - if: github.event.pull_request.merged - runs-on: ubuntu-latest - timeout-minutes: 5 - outputs: - files: ${{steps.changed-files.outputs.any_changed}} - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - ref: main - persist-credentials: false - - name: Get all changed *.dart, files in docs or pubspec.yaml - id: changed-files - uses: tj-actions/changed-files@v35 - with: - files: | - **/*.dart - custom-docs/* - **/*.yaml - **/*.yml - files_ignore: example/* - update-version: - runs-on: ubuntu-latest - timeout-minutes: 5 - needs: changes - if: needs.changes.outputs.files == 'true' - steps: - - uses: actions/checkout@v3 - with: - fetch-depth: 0 - ref: main - persist-credentials: false - - name: Run step if any *.js file(s) or any file in the static folder change - if: steps.changed-files-excluded.outputs.any_changed == 'true' - run: | - echo "One or more *.js file(s) or any file in the static folder but not in the custom-docs folder has changed." - echo "List all the files that have changed: ${{ steps.changed-files-excluded.outputs.all_changed_files }}" - - name: Change flutter version tag - uses: BentEngbers/flutter-change-version@v1.0.3 - - name: push change - id: update - run: | - git remote set-url origin https://${{ secrets.PAT}}@github.com/zebratechnologies/zeta-flutter.git - git config --global user.name "github-actions" - git config --global user.email "github-actions@github.com" - git add -A - git commit --amend --no-edit - git push -f - publish-changelog: - needs: [changes, update-version] - if: needs.changes.outputs.files == 'true' - runs-on: ubuntu-latest - timeout-minutes: 20 - steps: - - uses: actions/checkout@v3 - with: - ref: main - fetch-depth: 0 - persist-credentials: false - - id: read-version - uses: NiklasLehnfeld/flutter-version-number-action@main - - name: Create tag - uses: actions/github-script@v5 - with: - script: | - github.rest.git.createRef({ - owner: context.repo.owner, - repo: context.repo.repo, - ref: 'refs/tags/${{steps.read-version.outputs.version-number}}', - sha: "${{github.sha}}" - }) - - name: Update CHANGELOG - id: changelog - uses: requarks/changelog-action@v1 - with: - token: ${{ secrets.PAT }} - tag: ${{ steps.read-version.outputs.version-number }} - excludeTypes: "" - includeInvalidCommits: true - - name: Check for modified files - id: git-check - run: echo "modified=$(if [ -n "$(git status --porcelain)" ]; then echo "true"; else echo "false"; fi)" >> $GITHUB_ENV - - name: Update changes in zeta-flutter repository - if: env.modified == 'true' - run: | - git remote set-url origin https://${{ secrets.PAT}}@github.com/zebratechnologies/zeta-flutter.git - git config --global user.name "github-actions" - git config --global user.email "github-actions@github.com" - git add -A - git commit --amend --no-edit - git push -f - - name: Make changelog flutter - run: cp CHANGELOG.md CHANGELOG_FLUTTER.md - - name: Push changelog to Zeta - uses: dmnemec/copy_file_to_another_repo_action@main - env: - API_TOKEN_GITHUB: ${{ secrets.PAT }} - with: - source_file: "CHANGELOG_FLUTTER.md" - destination_repo: "zebratechnologies/zeta" - destination_folder: "./" - destination_branch_create: "flutter/${{ steps.read-version.outputs.version-number }}" - user_email: "github-actions@github.com" - user_name: "github-actions" - commit_message: "flutter changelog" - - name: Push docs to Zeta - uses: dmnemec/copy_file_to_another_repo_action@main - env: - API_TOKEN_GITHUB: ${{ secrets.PAT }} - with: - source_file: "custom-docs/" - destination_repo: "zebratechnologies/zeta" - destination_folder: "./" - destination_branch: "flutter/${{ steps.read-version.outputs.version-number }}" - user_email: "github-actions@github.com" - user_name: "github-actions" - commit_message: "flutter doc" - - name: Open Zeta PR - uses: thecanadianroot/open-pull-request-action@v1.0.3 - with: - token: ${{secrets.PAT}} - base: main - head: "flutter/${{ steps.read-version.outputs.version-number }}" - title: "flutter/${{ steps.read-version.outputs.version-number }}" - labels: flutter - reviewers: benken - owner: zebratechnologies - repository: zebratechnologies/zeta diff --git a/.github/workflows/pr.yml b/.github/workflows/pull-request.yml similarity index 57% rename from .github/workflows/pr.yml rename to .github/workflows/pull-request.yml index 6b5bcf3a..df90b783 100644 --- a/.github/workflows/pr.yml +++ b/.github/workflows/pull-request.yml @@ -1,22 +1,42 @@ -name: "PR" -on: - pull_request: +name: CI - Pull Request +on: pull_request jobs: + up-to-date: + name: "Check branch is up to date" + runs-on: ubuntu-latest + timeout-minutes: 5 + steps: + - uses: actions/checkout@v4 + with: + fetch-depth: 0 + ref: ${{ github.head_ref }} + - name: Check branch is up to date + run: | + if git merge-base --is-ancestor ${{ github.event.pull_request.base.sha}} ${{ github.event.pull_request.head.sha}} + then + echo "Your branch is up to date." + exit 0 + else + echo "You need to merge / rebase." + exit 1 + fi changes: + name: "Check for changes in code" + needs: up-to-date runs-on: ubuntu-latest timeout-minutes: 5 outputs: files: ${{steps.changed-files.outputs.any_changed}} steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 ref: main persist-credentials: false - name: Get all changed *.dart, files in custom-docs or pubspec.yaml id: changed-files - uses: tj-actions/changed-files@v35 + uses: tj-actions/changed-files@v41 with: base_sha: ${{ github.event.pull_request.base.sha }} sha: ${{ github.event.pull_request.head.sha }} @@ -24,32 +44,22 @@ jobs: **/*.dart custom-docs pubspec.yaml - analyze: + code-quality: runs-on: ubuntu-latest timeout-minutes: 20 needs: changes if: needs.changes.outputs.files == 'true' steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 with: fetch-depth: 0 ref: ${{ github.head_ref }} - - name: Check branch is up to date - run: | - if git merge-base --is-ancestor ${{ github.event.pull_request.base.sha}} ${{ github.event.pull_request.head.sha}} - then - echo "Your branch is up to date." - exit 0 - else - echo "You need to merge / rebase." - exit 1 - fi - name: Get branch name id: branch-name - uses: tj-actions/branch-names@v5.1 + uses: tj-actions/branch-names@v7.0.7 - uses: subosito/flutter-action@v2 with: - flutter-version: "3.13.x" + flutter-version: "3.16.x" channel: "stable" - name: Setup flutter run: flutter pub get @@ -70,3 +80,26 @@ jobs: git add -A git commit -m '[automated commit] lint format and import sort' git push + deploy-preview: + name: Deploy preview version of the storybook on firebase + needs: code-quality + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + - uses: subosito/flutter-action@v2 + with: + flutter-version: "3.16.x" + channel: "stable" + - name: Setup flutter + run: flutter pub get + - name: Build example app + run: | + cd example + flutter build web -o ../build --no-tree-shake-icons + - uses: FirebaseExtended/action-hosting-deploy@v0 + with: + repoToken: "${{ secrets.GITHUB_TOKEN }}" + firebaseServiceAccount: "${{ secrets.FIREBASE_SERVICE_ACCOUNT_ZETA_DS }}" + expires: 7d + projectId: zeta-ds + channelId: "pr-${{ github.event.number }}-${{ github.event.pull_request.head.ref }}" diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml new file mode 100644 index 00000000..197446e0 --- /dev/null +++ b/.github/workflows/release-please.yml @@ -0,0 +1,17 @@ +name: release-please +on: + push: + branches: + - main + +permissions: + contents: write + pull-requests: write + +jobs: + release-please: + runs-on: ubuntu-latest + steps: + - uses: google-github-actions/release-please-action@v4 + with: + token: ${{ secrets.PERSONAL_ACCESS_TOKEN }} diff --git a/.pubignore b/.pubignore index 33e41fc7..6df95062 100644 --- a/.pubignore +++ b/.pubignore @@ -1 +1,9 @@ -custom_docs/ \ No newline at end of file +custom_docs/ +example/build +example/android +example/ios +example/linux +example/macos +example/web +example/windows +example/widgetbook diff --git a/.release-please-manifest.json b/.release-please-manifest.json new file mode 100644 index 00000000..10f30916 --- /dev/null +++ b/.release-please-manifest.json @@ -0,0 +1,3 @@ +{ + ".": "0.2.0" +} \ No newline at end of file diff --git a/CHANGELOG.md b/CHANGELOG.md index 9a39bb59..21d91aa3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,86 +1,1595 @@ -## [0.1.1+1] - 2023-12-01 +## [0.1.1+23] - 2024-01-19 -- feature: Refactor theme declaration and introduce theme service +### :wrench: Chores + +- [`ed1210d`](https://github.com/zebratechnologies/zeta-flutter/commit/ed1210d6cbc173aef8b1adf0d20ee91d3e87f2c3) - Update Widgetbook to correct functionality _(PR [#52](https://github.com/zebratechnologies/zeta-flutter/pull/52) by [@thelukewalton](https://github.com/thelukewalton))_ +- [`c627d7a`](https://github.com/zebratechnologies/zeta-flutter/commit/c627d7ab19d3f33e30c406441702ff6134557f14) - Tidy up example app _(PR [#53](https://github.com/zebratechnologies/zeta-flutter/pull/53) by [@thelukewalton](https://github.com/thelukewalton))_ + +## [0.1.1+22] - 2024-01-19 + +### :boom: BREAKING CHANGES + +- due to [`7b543ac`](https://github.com/zebratechnologies/zeta-flutter/commit/7b543ac7b92dc53a866af4de313c36b5728e912e) - Remove legacy code _(PR [#51](https://github.com/zebratechnologies/zeta-flutter/pull/51) by [@thelukewalton](https://github.com/thelukewalton))_: + + Removed ZetaGrid and ZetaSpacing components, renamed widget padding extensions + https://jira.zebra.com/browse/UX-910 + Remove ZetaGrid, ZetaSpacing and ZetaText widgets as these are no longer + part of the library. Functionality is retained in some cases (text + styles, padding extensions) but widgets themselves are removed. -## [0.1.0+1] - 2023-11-28 + *** -- chore: Tidy, reorganise and prepare repo +### :sparkles: New Features + +- [`7b543ac`](https://github.com/zebratechnologies/zeta-flutter/commit/7b543ac7b92dc53a866af4de313c36b5728e912e) - Remove legacy code _(PR [#51](https://github.com/zebratechnologies/zeta-flutter/pull/51) by [@thelukewalton](https://github.com/thelukewalton))_ + +### :wrench: Chores -docs: update changelog and documentation +- [`ccbdeb9`](https://github.com/zebratechnologies/zeta-flutter/commit/ccbdeb93b6995eb3a3ff66562d957bc7e2470432) - Update Widgetbook to correct functionality _(PR [#52](https://github.com/zebratechnologies/zeta-flutter/pull/52) by [@thelukewalton](https://github.com/thelukewalton))_ -feat(type): Add xSmall and conform to latest figma designs. +## [0.1.1+21] - 2024-01-18 -- "Refactored the ZetaColors class for better customization +### :sparkles: New Features + +- [`6ae1269`](https://github.com/zebratechnologies/zeta-flutter/commit/6ae1269422180bbf2ecbfd05814969bfcbb725f1) - Update text styles to match latest designs _(PR [#50](https://github.com/zebratechnologies/zeta-flutter/pull/50) by [@thelukewalton](https://github.com/thelukewalton))_ +- [`977d7e6`](https://github.com/zebratechnologies/zeta-flutter/commit/977d7e6f7cb0c2b67085ab40f5cf1d410e5680c8) - Remove legacy code _(PR [#51](https://github.com/zebratechnologies/zeta-flutter/pull/51) by [@thelukewalton](https://github.com/thelukewalton))_ -The ZetaColors class was heavily refactored for better customization of variables such as brightness, contrast, color swatches, and additional color attributes. Several fields were made final for the overall class safety. This change improves color control on different themes for the application." +## [0.1.1+20] - 2024-01-17 + +### :sparkles: New Features -- "Updated the ZetaColor and Theme setup to use InheritedWidget +- [`35d1d7e`](https://github.com/zebratechnologies/zeta-flutter/commit/35d1d7eed509d4b89593c17e2a48a4a2c79a6ce4) - Update text styles to match latest designs _(PR [#50](https://github.com/zebratechnologies/zeta-flutter/pull/50) by [@thelukewalton](https://github.com/thelukewalton))_ + +### :wrench: Chores + +- [`6787220`](https://github.com/zebratechnologies/zeta-flutter/commit/67872203f0dc96de02e6945f0ac4409f95872262) - Organize ilb/ to match web _(PR [#49](https://github.com/zebratechnologies/zeta-flutter/pull/49) by [@thelukewalton](https://github.com/thelukewalton))_ + +## [0.1.1+19] - 2024-01-17 + +### :wrench: Chores + +- [`d1c0125`](https://github.com/zebratechnologies/zeta-flutter/commit/d1c012523e16ebbf3f38c7028598660cfc7b7ea9) - Organize ilb/ to match web _(PR [#49](https://github.com/zebratechnologies/zeta-flutter/pull/49) by [@thelukewalton](https://github.com/thelukewalton))_ + +### :flying_saucer: Other Changes + +- [`aff41a3`](https://github.com/zebratechnologies/zeta-flutter/commit/aff41a372a2e3ba7eef06e1d69dc3e57b423c3dd) - chore(deps): bump tj-actions/changed-files from 35 to 41 in /.github/workflows ([#48](https://github.com/zebratechnologies/zeta-flutter/pull/48)) + +Bumps +[tj-actions/changed-files](https://github.com/tj-actions/changed-files) +from 35 to 41. + +
+Release notes +

Sourced from tj-actions/changed-files's +releases.

+
+

v41

+

Changes in v41.0.1

+

What's Changed

+ +

Full Changelog: https://github.com/tj-actions/changed-files/compare/v41...v41.0.1

+
+

Changes in v41.0.0

+

🔥 🔥 BREAKING CHANGE 🔥 🔥

+

A new safe_output input is now available to prevent +outputting unsafe filename characters (Enabled by default). This would +escape characters in the filename that could be used for command +injection.

+
+

[!NOTE] +This can be disabled by setting the safe_output to false +this comes with a recommendation to store all outputs generated in an +environment variable first before using them.

+
+

Example

+
...
+    - name: Get changed files
+      id: changed-files
+      uses: tj-actions/changed-files@v40
+      with:
+safe_output: false # set to false because we are using an environment
+variable to store the output and avoid command injection.
+
- name: List all added files
+  env:
+    ADDED_FILES: ${{ steps.changed-files.outputs.added_files }}
+  run: |
+    for file in "$ADDED_FILES"; do
+      echo "$file was added"
+    done
+

+
...
+

+

What's Changed

+ + +
+

... (truncated)

+
+
+Changelog +

Sourced from tj-actions/changed-files's +changelog.

+
+

Changelog

+

41.0.1 +- (2023-12-24)

+

🐛 Bug Fixes

+ +

⚙️ Miscellaneous Tasks

+ +

⬆️ Upgrades

+ +

Co-authored-by: jackton1 jackton1@users.noreply.github.com +(cc08e17) +- (tj-actions[bot])

+

41.0.0 +- (2023-12-23)

+

🐛 Bug Fixes

+ +

⏪ Reverts

+ +

(4f573fe) +- (Tonye Jack)

+

🔄 Update

+ +

Co-authored-by: renovate[bot] (1864078) +- (tj-actions[bot])

+ +

(47371c5) +- (Tonye Jack)

+

📝 Other

+ + + +
+

... (truncated)

+
+
+Commits + +
+
+ +[![Dependabot compatibility +score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=tj-actions/changed-files&package-manager=github_actions&previous-version=35&new-version=41)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) + +Dependabot will resolve any conflicts with this PR as long as you don't +alter it yourself. You can also trigger a rebase manually by commenting +`@dependabot rebase`. + +[//]: # "dependabot-automerge-start" +[//]: # "dependabot-automerge-end" + +--- + +
+Dependabot commands and options +
+ +You can trigger Dependabot actions by commenting on this PR: + +- `@dependabot rebase` will rebase this PR +- `@dependabot recreate` will recreate this PR, overwriting any edits + that have been made to it +- `@dependabot merge` will merge this PR after your CI passes on it +- `@dependabot squash and merge` will squash and merge this PR after + your CI passes on it +- `@dependabot cancel merge` will cancel a previously requested merge + and block automerging +- `@dependabot reopen` will reopen this PR if it is closed +- `@dependabot close` will close this PR and stop Dependabot recreating + it. You can achieve the same result by closing it manually +- `@dependabot show ignore conditions` will show all + of the ignore conditions of the specified dependency +- `@dependabot ignore this major version` will close this PR and stop + Dependabot creating any more for this major version (unless you reopen + the PR or upgrade to it yourself) +- `@dependabot ignore this minor version` will close this PR and stop + Dependabot creating any more for this minor version (unless you reopen + the PR or upgrade to it yourself) +- `@dependabot ignore this dependency` will close this PR and stop + Dependabot creating any more for this dependency (unless you reopen the + PR or upgrade to it yourself) + You can disable automated security fix PRs for this repo from the + [Security Alerts + page](https://github.com/zebratechnologies/zeta-flutter/network/alerts). + +
+ +Signed-off-by: dependabot[bot] +Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> _(commit by [@dependabot[bot]](https://github.com/apps/dependabot))_ + +## [0.1.1+18] - 2024-01-10 + +### :flying_saucer: Other Changes + +- [`caea7bd`](https://github.com/zebratechnologies/zeta-flutter/commit/caea7bdc061149db64344526bd16cd5232a219c2) - chore(deps): bump tj-actions/changed-files from 35 to 41 in /.github/workflows ([#48](https://github.com/zebratechnologies/zeta-flutter/pull/48)) + +Bumps +[tj-actions/changed-files](https://github.com/tj-actions/changed-files) +from 35 to 41. + +
+Release notes +

Sourced from tj-actions/changed-files's +releases.

+
+

v41

+

Changes in v41.0.1

+

What's Changed

+ +

Full Changelog: https://github.com/tj-actions/changed-files/compare/v41...v41.0.1

+
+

Changes in v41.0.0

+

🔥 🔥 BREAKING CHANGE 🔥 🔥

+

A new safe_output input is now available to prevent +outputting unsafe filename characters (Enabled by default). This would +escape characters in the filename that could be used for command +injection.

+
+

[!NOTE] +This can be disabled by setting the safe_output to false +this comes with a recommendation to store all outputs generated in an +environment variable first before using them.

+
+

Example

+
...
+    - name: Get changed files
+      id: changed-files
+      uses: tj-actions/changed-files@v40
+      with:
+safe_output: false # set to false because we are using an environment
+variable to store the output and avoid command injection.
+
- name: List all added files
+  env:
+    ADDED_FILES: ${{ steps.changed-files.outputs.added_files }}
+  run: |
+    for file in &quot;$ADDED_FILES&quot;; do
+      echo &quot;$file was added&quot;
+    done
+

+
...
+

+

What's Changed

+ + +
+

... (truncated)

+
+
+Changelog +

Sourced from tj-actions/changed-files's +changelog.

+
+

Changelog

+

41.0.1 +- (2023-12-24)

+

🐛 Bug Fixes

+ +

⚙️ Miscellaneous Tasks

+
    +
  • deps: Update dependency eslint-plugin-prettier to +v5.1.2 (7aaf10d) +- (renovate[bot])
    • +
+

⬆️ Upgrades

+ +

Co-authored-by: jackton1 jackton1@users.noreply.github.com +(cc08e17) +- (tj-actions[bot])

+

41.0.0 +- (2023-12-23)

+

🐛 Bug Fixes

+ +

⏪ Reverts

+ +

(4f573fe) +- (Tonye Jack)

+

🔄 Update

+ +

Co-authored-by: renovate[bot] (1864078) +- (tj-actions[bot])

+ +

(47371c5) +- (Tonye Jack)

+

📝 Other

+
    +
  • Merge pull request from GHSA-mcph-m25j-8j63
    • +
+
    +
  • +

    feat: add safe_output input enabled by default

    +
    • +
  • +

    fix: migrate README to safe uses of interpolation

    +
    • +
+ +
+

... (truncated)

+
+
+Commits + +
+
+ +[![Dependabot compatibility +score](https://dependabot-badges.githubapp.com/badges/compatibility_score?dependency-name=tj-actions/changed-files&package-manager=github_actions&previous-version=35&new-version=41)](https://docs.github.com/en/github/managing-security-vulnerabilities/about-dependabot-security-updates#about-compatibility-scores) + +Dependabot will resolve any conflicts with this PR as long as you don't +alter it yourself. You can also trigger a rebase manually by commenting +`@dependabot rebase`. + +[//]: # "dependabot-automerge-start" +[//]: # "dependabot-automerge-end" + +--- + +
+Dependabot commands and options +
+ +You can trigger Dependabot actions by commenting on this PR: + +- `@dependabot rebase` will rebase this PR +- `@dependabot recreate` will recreate this PR, overwriting any edits + that have been made to it +- `@dependabot merge` will merge this PR after your CI passes on it +- `@dependabot squash and merge` will squash and merge this PR after + your CI passes on it +- `@dependabot cancel merge` will cancel a previously requested merge + and block automerging +- `@dependabot reopen` will reopen this PR if it is closed +- `@dependabot close` will close this PR and stop Dependabot recreating + it. You can achieve the same result by closing it manually +- `@dependabot show ignore conditions` will show all + of the ignore conditions of the specified dependency +- `@dependabot ignore this major version` will close this PR and stop + Dependabot creating any more for this major version (unless you reopen + the PR or upgrade to it yourself) +- `@dependabot ignore this minor version` will close this PR and stop + Dependabot creating any more for this minor version (unless you reopen + the PR or upgrade to it yourself) +- `@dependabot ignore this dependency` will close this PR and stop + Dependabot creating any more for this dependency (unless you reopen the + PR or upgrade to it yourself) + You can disable automated security fix PRs for this repo from the + [Security Alerts + page](https://github.com/zebratechnologies/zeta-flutter/network/alerts). + +
+ +Signed-off-by: dependabot[bot] +Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> _(commit by [@dependabot[bot]](https://github.com/apps/dependabot))_ + +## [0.1.1+16] - 2024-01-02 + +### :flying_saucer: Other Changes + +- [`225a059`](https://github.com/zebratechnologies/zeta-flutter/commit/225a059aa191f595db4982960c854c2e94c5bdc4) - create bottom sheet ([#45](https://github.com/zebratechnologies/zeta-flutter/pull/45)) + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`656ca24`](https://github.com/zebratechnologies/zeta-flutter/commit/656ca2470112a171064f0d2d7477bf087a4f98bd) - Password input ([#47](https://github.com/zebratechnologies/zeta-flutter/pull/47)) + +Co-authored-by: github-actions +Co-authored-by: Atanas Yordanov _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.1+15] - 2024-01-02 + +### :flying_saucer: Other Changes + +- [`36b9808`](https://github.com/zebratechnologies/zeta-flutter/commit/36b980896602320114c845b68a99a1c4c2e03ecb) - Page banner ([#40](https://github.com/zebratechnologies/zeta-flutter/pull/40)) + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`03f2ed7`](https://github.com/zebratechnologies/zeta-flutter/commit/03f2ed7fb7f34dd995cb850f67582b76a2132111) - create bottom sheet ([#45](https://github.com/zebratechnologies/zeta-flutter/pull/45)) + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.1+14] - 2023-12-21 + +### :flying_saucer: Other Changes + +- [`be7cf58`](https://github.com/zebratechnologies/zeta-flutter/commit/be7cf587995ef4a51c57fc497d91abfccf82c65b) - component floating action button ([#41](https://github.com/zebratechnologies/zeta-flutter/pull/41)) + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`a5d7181`](https://github.com/zebratechnologies/zeta-flutter/commit/a5d71816ff9d6aa9426cda38ee9d6f1116a36496) - Page banner ([#40](https://github.com/zebratechnologies/zeta-flutter/pull/40)) + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.1+13] - 2023-12-21 + +### :flying_saucer: Other Changes + +- [`51caca7`](https://github.com/zebratechnologies/zeta-flutter/commit/51caca71fce57681cabeb82e979499da9a16f4c1) - Menu Items - horizontal & vertical ([#44](https://github.com/zebratechnologies/zeta-flutter/pull/44)) + +* Menu Items - horizontal & vertical The ZetaDefaults class was updated to Zeta inheriting from InheritedWidget. This change allows easy access to the Zeta theme settings (contrast, theme mode, theme data, color set) from anywhere in the widget tree. The ZetaAppBuilder function was updated to take in ThemeData and ThemeMode. The ZetaProvider was added to provide Zeta theming and contrast data down the widget tree. The code for the color and typography examples was adjusted to use the new Zeta context extension, instead of using Theme.of(context) to get colorScheme. This change was crucial to simplify the process of adapting the application visuals to different themes." -- "Improve theme management functionality in Zeta +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`8fe8750`](https://github.com/zebratechnologies/zeta-flutter/commit/8fe87502764834cdbdcc7580bddaa5def36ae518) - component floating action button ([#41](https://github.com/zebratechnologies/zeta-flutter/pull/41)) + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.1+12] - 2023-12-20 + +### :flying_saucer: Other Changes + +- [`dcafe1f`](https://github.com/zebratechnologies/zeta-flutter/commit/dcafe1f2f0436adf75e9cb36e0c4dd1bb8015def) - fix sizings and replace icons with zeta icons ([#43](https://github.com/zebratechnologies/zeta-flutter/pull/43)) + +* fix sizings and replace icons with zeta icons + +- Refactor color swatch generation to utilize zeta + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`231fa4b`](https://github.com/zebratechnologies/zeta-flutter/commit/231fa4b860d4ecbb551ba7ec65b783d26fed43a0) - Menu Items - horizontal & vertical ([#44](https://github.com/zebratechnologies/zeta-flutter/pull/44)) + +* Menu Items - horizontal & vertical + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.1+11] - 2023-12-19 + +### :flying_saucer: Other Changes + +- [`c506b81`](https://github.com/zebratechnologies/zeta-flutter/commit/c506b81c0f00b23192ddef4e484dabf8a0f36890) - Component accordion ([#39](https://github.com/zebratechnologies/zeta-flutter/pull/39)) + +* first draft of the ZetaAccordion + +* create ZetaAccordion component + +* add icon padding + +* add list separator & margin + +* Tag component ([#37](https://github.com/zebratechnologies/zeta-flutter/pull/37)) + +* initial + +* inital + +* initial + +* tag component + +* tag component + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions +Co-authored-by: Atanas Yordanov + +- add comments and more examples + +- pubspec + +- [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: Genoveva Georgieva <151932404+genovevageorgieva@users.noreply.github.com> +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`10a075e`](https://github.com/zebratechnologies/zeta-flutter/commit/10a075ed9dc7aac6021ccc08fde574f520b2fc9e) - fix sizings and replace icons with zeta icons ([#43](https://github.com/zebratechnologies/zeta-flutter/pull/43)) + +* fix sizings and replace icons with zeta icons + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.1+10] - 2023-12-19 + +### :flying_saucer: Other Changes + +- [`c79686a`](https://github.com/zebratechnologies/zeta-flutter/commit/c79686a8221a029280332e144da3fdb6eca0ead8) - Tag component ([#37](https://github.com/zebratechnologies/zeta-flutter/pull/37)) + +* initial + +* inital + +* initial + +* tag component + +* tag component + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions +Co-authored-by: Atanas Yordanov _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`df9eb66`](https://github.com/zebratechnologies/zeta-flutter/commit/df9eb66803c2f005099aa67a9394e520626401d3) - Component accordion ([#39](https://github.com/zebratechnologies/zeta-flutter/pull/39)) + +* first draft of the ZetaAccordion + +* create ZetaAccordion component + +* add icon padding + +* add list separator & margin + +* Tag component ([#37](https://github.com/zebratechnologies/zeta-flutter/pull/37)) + +* initial + +* inital + +* initial + +* tag component + +* tag component + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions +Co-authored-by: Atanas Yordanov + +- add comments and more examples + +- pubspec + +- [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: Genoveva Georgieva <151932404+genovevageorgieva@users.noreply.github.com> +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.1+9] - 2023-12-18 + +### :flying_saucer: Other Changes + +- [`541ec63`](https://github.com/zebratechnologies/zeta-flutter/commit/541ec633f31f117b685671a33342e57c89823434) - force Material 3 ([#38](https://github.com/zebratechnologies/zeta-flutter/pull/38)) + +* force Material 3 + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`0be43ac`](https://github.com/zebratechnologies/zeta-flutter/commit/0be43acce7c8f3b69a778f95420f542f92e725cf) - Tag component ([#37](https://github.com/zebratechnologies/zeta-flutter/pull/37)) + +* initial + +* inital + +* initial + +* tag component + +* tag component + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions +Co-authored-by: Atanas Yordanov _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.1+8] - 2023-12-18 + +### :flying_saucer: Other Changes + +- [`4ca71f3`](https://github.com/zebratechnologies/zeta-flutter/commit/4ca71f3f83535e55c3af36961a5332fced0ecdbf) - Button component ([#36](https://github.com/zebratechnologies/zeta-flutter/pull/36)) + +* initial + +* format_error + +* [automated commit] lint format and import sort + +* button component optimizations + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* colors change + +* colors change + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`ba9062b`](https://github.com/zebratechnologies/zeta-flutter/commit/ba9062bb2268310a8c22d5230227c04afa178166) - force Material 3 ([#38](https://github.com/zebratechnologies/zeta-flutter/pull/38)) + +* force Material 3 + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.1+7] - 2023-12-18 + +### :flying_saucer: Other Changes + +- [`ac2b269`](https://github.com/zebratechnologies/zeta-flutter/commit/ac2b269c5806d2af310a063231abc1e412aea1a1) - fix the border of the indicator component ([#31](https://github.com/zebratechnologies/zeta-flutter/pull/31)) + +* fix the border of the component + +* [automated commit] lint format and import sort + +* inverseBorder + +* [automated commit] lint format and import sort + +* rounded = true by default + +* running on iPhone + +* try to adjust font height + +* horizontal alignment + +* try to remove the line height + +* stick to Material 2 for now + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`cb330c7`](https://github.com/zebratechnologies/zeta-flutter/commit/cb330c7c1952ca2493b5d6c9272e2ade1050f53b) - Button component ([#36](https://github.com/zebratechnologies/zeta-flutter/pull/36)) + +* initial + +* format_error + +* [automated commit] lint format and import sort + +* button component optimizations + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* colors change + +* colors change + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.1+6] - 2023-12-18 + +### :flying_saucer: Other Changes + +- [`354040c`](https://github.com/zebratechnologies/zeta-flutter/commit/354040c91731f53f9186ce0cbce341706dc30b3a) - Workcloud indicators ([#34](https://github.com/zebratechnologies/zeta-flutter/pull/34)) + +* initial + +* workcloud indicator + +* typo + +* . + +* [automated commit] lint format and import sort + +* . + +* . + +* . + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* add default values + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`88080ad`](https://github.com/zebratechnologies/zeta-flutter/commit/88080ada71811b47fe20f73dfba23c52e5223d38) - fix the border of the indicator component ([#31](https://github.com/zebratechnologies/zeta-flutter/pull/31)) + +* fix the border of the component + +* [automated commit] lint format and import sort + +* inverseBorder + +* [automated commit] lint format and import sort + +* rounded = true by default + +* running on iPhone + +* try to adjust font height + +* horizontal alignment + +* try to remove the line height + +* stick to Material 2 for now + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.1+5] - 2023-12-18 + +### :flying_saucer: Other Changes + +- [`1268c92`](https://github.com/zebratechnologies/zeta-flutter/commit/1268c92c7e0057cd166c40bc9ccd53ccf80c2fef) - App bar ([#35](https://github.com/zebratechnologies/zeta-flutter/pull/35)) + +* create ZetaAppBar in four variants with example screens + +* [automated commit] lint format and import sort + +* remove Flexible + +* rename + +* titleIcon should be of type Icon instead of Widget + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`077d161`](https://github.com/zebratechnologies/zeta-flutter/commit/077d16138d5d3f579fbc2bfcba3048b1c5d28afc) - Workcloud indicators ([#34](https://github.com/zebratechnologies/zeta-flutter/pull/34)) + +* initial + +* workcloud indicator + +* typo + +* . + +* [automated commit] lint format and import sort + +* . -Removed code concerning getting a color's RGB hex code from 'color_extensions.dart', as it was seldom used. Updated 'zeta_flutter.dart' to unhide ZetaColorGetters. Adaptations in 'zeta.dart' included switching mediaBrightness to \_mediaBrightness for internal use and adding methods for accurate determination of color set and brightness settings based on the theme mode. Also, ZetaProvider was updated for 'system' theme mode support. example/lib/main.dart and example/lib/widgets.dart were updated to support these changes, including UI updates for seamless theme switching." +* . -- "Add theme update function and extend ZetaColorGetters +* . -Implemented a method in 'zeta.dart' to support updating the current theme data dynamically. Extended 'color_scheme.dart' by introducing \_ZetaColorProperties and updating ZetaColorGetters. These changes increase flexibility for theme management and provide a structured and accessible way to get Zeta colors through the theme context." +* [automated commit] lint format and import sort -- Remove theme_extensions.dart and move contents to colors.dart +* [automated commit] lint format and import sort + +* add default values + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.1+4] - 2023-12-15 + +### :flying_saucer: Other Changes + +- [`8f621dc`](https://github.com/zebratechnologies/zeta-flutter/commit/8f621dc82bd58ace9c994057420cdb1f41a74200) - Component ZetaAvatar ([#32](https://github.com/zebratechnologies/zeta-flutter/pull/32)) + +* add empty avatar example page; upgrade packages + +* add icons + +* [automated commit] lint format and import sort + +* create avatar component with examples + +* create ZetaIndicator component with examples + +* fix value + +* fix & improve; add badges (indicators) + +* add more comments + +* add factory constructors for the different types + +* add widgetbook + +* add avatar to widgetbook + +* [automated commit] lint format and import sort + +* Badge ([#29](https://github.com/zebratechnologies/zeta-flutter/pull/29)) + +* initial + +* Badge + +* fix test + +* [automated commit] lint format and import sort + +* change default border type + +* fix test + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* fix example + +* fix sizing + +* add foreground colors + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions + +- [automated commit] lint format and import sort + +- replace photo with image + +- [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions +Co-authored-by: Genoveva Georgieva <151932404+genovevageorgieva@users.noreply.github.com> _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`350adec`](https://github.com/zebratechnologies/zeta-flutter/commit/350adecf4b0498afc6a476a653d2223a7cb74e0f) - App bar ([#35](https://github.com/zebratechnologies/zeta-flutter/pull/35)) + +* create ZetaAppBar in four variants with example screens + +* [automated commit] lint format and import sort + +* remove Flexible + +* rename + +* titleIcon should be of type Icon instead of Widget + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.1+3] - 2023-12-15 + +### :flying_saucer: Other Changes + +- [`5f0a33e`](https://github.com/zebratechnologies/zeta-flutter/commit/5f0a33e8e3b92de83d83170f267e6cd3f5fca068) - Merge from zebradevs ([#27](https://github.com/zebratechnologies/zeta-flutter/pull/27)) + +* Merge from zebradevs + +* spelling and finals + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@thelukewalton](https://github.com/thelukewalton))_ + +- [`b20aef1`](https://github.com/zebratechnologies/zeta-flutter/commit/b20aef109944e6cfc02db9b0041e7a6009c9e52e) - Component ZetaAvatar ([#32](https://github.com/zebratechnologies/zeta-flutter/pull/32)) + +* add empty avatar example page; upgrade packages + +* add icons + +* [automated commit] lint format and import sort + +* create avatar component with examples + +* create ZetaIndicator component with examples + +* fix value + +* fix & improve; add badges (indicators) + +* add more comments + +* add factory constructors for the different types + +* add widgetbook + +* add avatar to widgetbook + +* [automated commit] lint format and import sort + +* Badge ([#29](https://github.com/zebratechnologies/zeta-flutter/pull/29)) + +* initial + +* Badge + +* fix test + +* [automated commit] lint format and import sort + +* change default border type + +* fix test + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* fix example + +* fix sizing + +* add foreground colors + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions + +- [automated commit] lint format and import sort + +- replace photo with image + +- [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions +Co-authored-by: Genoveva Georgieva <151932404+genovevageorgieva@users.noreply.github.com> _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.1+2] - 2023-12-13 + +### :flying_saucer: Other Changes + +- [`063386f`](https://github.com/zebratechnologies/zeta-flutter/commit/063386f83490bf3bfb6d26fc6a95dd445006d656) - some sizings were not exactly as shown in Figma ([#33](https://github.com/zebratechnologies/zeta-flutter/pull/33)) + +* . + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`1c8ca4c`](https://github.com/zebratechnologies/zeta-flutter/commit/1c8ca4c4b5dbd8378710a18765303a6d37472cf0) - Merge from zebradevs ([#27](https://github.com/zebratechnologies/zeta-flutter/pull/27)) + +* Merge from zebradevs + +* spelling and finals + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@thelukewalton](https://github.com/thelukewalton))_ + +## [0.1.1+1] - 2023-12-01 + +- feature: Refactor theme declaration and introduce theme service Theme extensions were deleted and its contents were moved to colors.dart to consolidate all color-related codes in one file for easier navigation and editing. Additional enhancements include optimizing color assignments and making ZetaColors immutable for more robust color management. -- Refactor code for color theme and add theme switcher +## [0.1.0+9] - 2023-12-12 -Refactored codebase to improve the color theme handling: relocated theme related methods to colors.dart from theme_extensions.dart for consolidated color theme data. Optimized color assignments by leveraging the 'copyWith' method, allowing more efficient color management. Introduced the immutability of ZetaColors to enhance robustness. Bumped version in pubspec.yaml to 0.0.1+13 due to these changes. Renamed theme.dart to theme_data.dart for more semantic file naming. Added 'identifier' to the ZetaThemeData for easier theme identification. -The visible application change is an added ThemeSwitcher in the example app, offering a UI to switch between different predefined themes. +### :flying_saucer: Other Changes -- Add ZetaThemeService and theme switcher in example app +- [`b97fd3b`](https://github.com/zebratechnologies/zeta-flutter/commit/b97fd3bd881a85c8d4ee4f5ea5856e7a8ebf2d09) - Badge ([#29](https://github.com/zebratechnologies/zeta-flutter/pull/29)) -Implemented ZetaThemeService as an abstract class, providing structure for loading and saving themes within the app. Removed an obsolete comment within the contrast.dart and made necessary imports in zeta.dart. Asynchronous theme loading is added during app startup and saving is done upon theme updates. Also, for user-interaction, an exclusive ThemeSwitcher widget is added in the example app allowing users to select between available themes. This improves user experience, and optimizes theme handling and application performance. +* initial -- Refactor color swatch generation to utilize zeta +* Badge + +* fix test + +* [automated commit] lint format and import sort + +* change default border type + +* fix test + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* fix example + +* fix sizing -Refactored color swatch generation in color_example.dart to use Zeta instead of directly using the Theme. Now the brightness for ZetaColorSwatch is being pulled from zeta object rather than theme. This ensures consistency across different parts of the application where Zeta is used. Also changed theme.colorScheme.surface to colors.surfacePrimary for better readability, and alignment with use of zeta object. +* add foreground colors -- Add icon colors to color scheme +* [automated commit] lint format and import sort -Extended the color scheme in colors.dart to include default, subtle, disabled, and inverse icon colors. These were added to ensure consistent icon colors across the application and support dark mode by allowing inverted color swatches. +--- -- Refactor theme switch settings and add new features +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ -Renamed 'theme_switch.dart' to 'theme_color_switch.dart' and added two new files 'theme_contrast_switch.dart' and 'theme_mode_switch.dart' in order to separate the theme settings logically into distinct features - Theme Color Switch, Theme Contrast Switch and Theme Mode Switch respectively. Also, the theme application feature has been refactored within 'widgets.dart' to use the newly created theme features instead of the old theme switch. This enhances modularity and the user's ability to switch theme settings easily. +- [`30fd121`](https://github.com/zebratechnologies/zeta-flutter/commit/30fd12131af2549c0b5b31bf89e12553557a009b) - some sizings were not exactly as shown in Figma ([#33](https://github.com/zebratechnologies/zeta-flutter/pull/33)) -- Update method naming for consistent architecture in text.dart +* . -Changed the method name 'withColor' to 'themeWithColor' in text.dart for consistency with other part of the architecture and for better readability. This change supports the shift towards a consistently designed application architecture and helps developers easily decipher the role of the method in the code. +* [automated commit] lint format and import sort -- Update color scheme mapping and library version in colors.dart and pubspec.lock +--- -Refined the color mapping in ZetaColorScheme in colors.dart by replacing effectiveSurfaceTertiary with textDefault, enhancing the clarity of backdrop's color role. Concurrently, version of multiple dependencies in pubspec.lock are updated to benefit from recent fixes and improvements in those libraries. +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ -- Change `Color` to `ZetaColorSwatch` in theme files +## [0.1.0+8] - 2023-12-11 -Adjusted the class references in colors.dart from `Color` to `ZetaColorSwatch` to provide a more consistent color swatch across the app. The swatch allows for more flexibility in using color variations. Adjustments were also made in color_scheme.dart and color_swatch.dart to include better explanatory messages and use standard dart documentation format. Changes in custom_docs/components/Color/flutter.md were made to align with these updates. +### :flying_saucer: Other Changes + +- [`36f72c1`](https://github.com/zebratechnologies/zeta-flutter/commit/36f72c1df09fecc9d3eeb6dbf1bbf889493529c0) - Component indicator ([#30](https://github.com/zebratechnologies/zeta-flutter/pull/30)) + +* add icons + +* [automated commit] lint format and import sort + +* create ZetaIndicator component with examples + +* fix value + +* add more comments + +* add widgetbook + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`895bbfa`](https://github.com/zebratechnologies/zeta-flutter/commit/895bbfa876c7fea331d6bdb14c77e25632aab28d) - Badge ([#29](https://github.com/zebratechnologies/zeta-flutter/pull/29)) + +* initial + +* Badge + +* fix test + +* [automated commit] lint format and import sort + +* change default border type + +* fix test + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +* fix example + +* fix sizing + +* add foreground colors + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.0+7] - 2023-12-11 + +### :flying_saucer: Other Changes + +- [`19e7d93`](https://github.com/zebratechnologies/zeta-flutter/commit/19e7d933456938d473f1f5c6ef2696e02349e196) - Priority Pill ([#28](https://github.com/zebratechnologies/zeta-flutter/pull/28)) -- Enhance contrast and color handling in theme files +* Priority Pill -Removed 'flutter.md' as it is no longer required due to improvements made in contrast and color handling. For better accessibility support, 'contrast.dart' was refactored for better contrast handling and 'color_extensions.dart' now includes a mechanism to generate color swatch based on contrast ratio. Also, 'zeta.dart' was updated to adapt to the system's brightness providing better user experience. Overall, these adjustments aim to enhance accessibility and user experience, apart from simplifying the codebase. +* [automated commit] lint format and import sort -- Add LICENSE-3RD-PARTY for third-party libraries +* remove unnecessary param -Introduced license details for third-party libraries used in the project. MIT license applies to 'tinycolor' and SIL Open Font License applies to 'IBMPlexSans'. This ensures proper acknowledgement and licensure compliance for used third-party resources. +* [automated commit] lint format and import sort -- Set up with ZDS Analysis +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`fe4fe8d`](https://github.com/zebratechnologies/zeta-flutter/commit/fe4fe8d088fddf9443ce5810a1d2c068b13c75d9) - Component indicator ([#30](https://github.com/zebratechnologies/zeta-flutter/pull/30)) + +* add icons + +* [automated commit] lint format and import sort + +* create ZetaIndicator component with examples + +* fix value + +* add more comments + +* add widgetbook + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.0+6] - 2023-12-08 + +### :flying_saucer: Other Changes + +- [`2f21a18`](https://github.com/zebratechnologies/zeta-flutter/commit/2f21a18e30425fe91fe7bb0ee3c4df7ab8baca35) - add icons ([#24](https://github.com/zebratechnologies/zeta-flutter/pull/24)) + +* add icons + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +- [`2442420`](https://github.com/zebratechnologies/zeta-flutter/commit/2442420da15739e538d50e14c2a18c63de8d6f96) - Priority Pill ([#28](https://github.com/zebratechnologies/zeta-flutter/pull/28)) + +* Priority Pill + +* [automated commit] lint format and import sort + +* remove unnecessary param + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: github-actions _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.0+5] - 2023-12-08 + +### :flying_saucer: Other Changes -## [0.0.1+12] - 2023-09-06 +- [`ef44d24`](https://github.com/zebratechnologies/zeta-flutter/commit/ef44d244589a7cc652a934f25a5122bbd1657c05) - status_label ([#25](https://github.com/zebratechnologies/zeta-flutter/pull/25)) + +* status_label + +* [automated commit] lint format and import sort + +* spacing changes + +* extract BorderType in utils + +* chore(deps): bump tj-actions/branch-names in /.github/workflows ([#26](https://github.com/zebratechnologies/zeta-flutter/pull/26)) + +Bumps [tj-actions/branch-names](https://github.com/tj-actions/branch-names) from 5.1 to 7.0.7. + +- [Release notes](https://github.com/tj-actions/branch-names/releases) +- [Changelog](https://github.com/tj-actions/branch-names/blob/main/HISTORY.md) +- [Commits](https://github.com/tj-actions/branch-names/compare/v5.1...v7.0.7) + +--- + +updated-dependencies: + +- dependency-name: tj-actions/branch-names + dependency-type: direct:production + ... + +Signed-off-by: dependabot[bot] +Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> + +- [automated commit] lint format and import sort + +--- + +Signed-off-by: dependabot[bot] +Co-authored-by: github-actions +Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +- [`c90349b`](https://github.com/zebratechnologies/zeta-flutter/commit/c90349b104f3000956f821934b01dfd74f37a5e2) - add icons ([#24](https://github.com/zebratechnologies/zeta-flutter/pull/24)) + +* add icons + +* [automated commit] lint format and import sort + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.0+4] - 2023-12-06 + +### :wrench: Chores + +- [`0794b08`](https://github.com/zebratechnologies/zeta-flutter/commit/0794b08d029e9954457dbfac56bd576aaf8f0e82) - **deps**: bump tj-actions/branch-names in /.github/workflows _(PR [#26](https://github.com/zebratechnologies/zeta-flutter/pull/26) by [@dependabot[bot]](https://github.com/apps/dependabot))_ + +### :flying_saucer: Other Changes + +- [`65bf57f`](https://github.com/zebratechnologies/zeta-flutter/commit/65bf57fc1d7f13d4017b0e21f5f52d62552b502c) - status_label ([#25](https://github.com/zebratechnologies/zeta-flutter/pull/25)) + +* status_label + +* [automated commit] lint format and import sort + +* spacing changes + +* extract BorderType in utils + +* chore(deps): bump tj-actions/branch-names in /.github/workflows ([#26](https://github.com/zebratechnologies/zeta-flutter/pull/26)) + +Bumps [tj-actions/branch-names](https://github.com/tj-actions/branch-names) from 5.1 to 7.0.7. + +- [Release notes](https://github.com/tj-actions/branch-names/releases) +- [Changelog](https://github.com/tj-actions/branch-names/blob/main/HISTORY.md) +- [Commits](https://github.com/tj-actions/branch-names/compare/v5.1...v7.0.7) + +--- + +updated-dependencies: + +- dependency-name: tj-actions/branch-names + dependency-type: direct:production + ... + +Signed-off-by: dependabot[bot] +Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> + +- [automated commit] lint format and import sort + +--- + +Signed-off-by: dependabot[bot] +Co-authored-by: github-actions +Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> _(commit by [@genovevageorgieva](https://github.com/genovevageorgieva))_ + +## [0.1.0+3] - 2023-12-06 + +### :wrench: Chores + +- [`63b94a6`](https://github.com/zebratechnologies/zeta-flutter/commit/63b94a60da570ce3848aa9c1af7a129a2c952399) - **deps**: bump tj-actions/branch-names in /.github/workflows _(PR [#26](https://github.com/zebratechnologies/zeta-flutter/pull/26) by [@dependabot[bot]](https://github.com/apps/dependabot))_ + +### :flying_saucer: Other Changes + +- [`f333429`](https://github.com/zebratechnologies/zeta-flutter/commit/f333429083f0cf790627211788e69285bcff3a37) - Cleanup dart warnings; fix text scale ([#23](https://github.com/zebratechnologies/zeta-flutter/pull/23)) + +* fix endtemplate in comments; upgrade flutter packages + +* remove unnecessary text scaling + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + +## [0.1.0+2] - 2023-12-01 ### :wrench: Chores -- [`6a2834e`](https://github.com/zebratechnologies/zeta-flutter/commit/6a2834e762c238d3927d83a239490250b1687b64) - Tidy, reorganise and prepare repo _(commit by [@thelukewalton](https://github.com/thelukewalton))_ +- [`d22dd29`](https://github.com/zebratechnologies/zeta-flutter/commit/d22dd29b506affccc8cdc7ecfb15a57fcf330646) - Tidy, reorganise and prepare repo _(commit by [@thelukewalton](https://github.com/thelukewalton))_ ### :flying_saucer: Other Changes +- [`199328c`](https://github.com/zebratechnologies/zeta-flutter/commit/199328c28ccfa8a05a1494c08ad93aaf13dd3b28) - Update to mirror 0.1.0+1 from ZebraDevs _(commit by [@thelukewalton](https://github.com/thelukewalton))_ +- [`0ee6171`](https://github.com/zebratechnologies/zeta-flutter/commit/0ee6171e779c6db9995308aa35f2f598b9db372c) - Cleanup dart warnings; fix text scale ([#23](https://github.com/zebratechnologies/zeta-flutter/pull/23)) + +* fix endtemplate in comments; upgrade flutter packages + +* remove unnecessary text scaling + +* [automated commit] lint format and import sort + +--- + +Co-authored-by: Atanas Yordanov +Co-authored-by: github-actions _(commit by [@atanasyordanov21](https://github.com/atanasyordanov21))_ + - [`f91e8ef`](https://github.com/zebratechnologies/zeta-flutter/commit/f91e8ef85c0a1670227d66bd441513bc33e6242c) - Feature/color ([#21](https://github.com/zebratechnologies/zeta-flutter/pull/21)) * feat(color): Adding color defs @@ -95,15 +1604,15 @@ Introduced license details for third-party libraries used in the project. MIT li * bug(type): Fixing reset height and tests failing _(commit by [@thelukewalton](https://github.com/thelukewalton))_ -## 0.0.1+11 - 2023-08-09 +## [0.0.1+11] - 2023-08-09 ### :sparkles: New Features - [`193dc42`](https://github.com/zebratechnologies/zeta-flutter/commit/193dc42c8e7419d9087afdffce0eae915af12819) - Color ([#21](https://github.com/zebratechnologies/zeta-flutter/pull/21)) _(commit by [@thelukewalton](https://github.com/thelukewalton))_ - - [`a605819`](https://github.com/zebratechnologies/zeta-flutter/commit/a60581973764b5d06711fe6470f9963af934b7ad) - Adding color defs by [@thelukewalton](https://github.com/thelukewalton) - - [`f519cd8`](https://github.com/zebratechnologies/zeta-flutter/commit/f519cd856c7b4793ea7e24dc16f3abba0cffcf66) - starting colorswatch util by [@thelukewalton](https://github.com/thelukewalton) - - [`7445db0`](https://github.com/zebratechnologies/zeta-flutter/commit/7445db0b7da2434f5a55d3067369b3bd35df363b) - adding widgetbook and tests by [@thelukewalton](https://github.com/thelukewalton) +- [`a605819`](https://github.com/zebratechnologies/zeta-flutter/commit/a60581973764b5d06711fe6470f9963af934b7ad) - Adding color defs by [@thelukewalton](https://github.com/thelukewalton) +- [`f519cd8`](https://github.com/zebratechnologies/zeta-flutter/commit/f519cd856c7b4793ea7e24dc16f3abba0cffcf66) - starting colorswatch util by [@thelukewalton](https://github.com/thelukewalton) +- [`7445db0`](https://github.com/zebratechnologies/zeta-flutter/commit/7445db0b7da2434f5a55d3067369b3bd35df363b) - adding widgetbook and tests by [@thelukewalton](https://github.com/thelukewalton) ### :bug: Bug Fixes @@ -111,7 +1620,7 @@ Introduced license details for third-party libraries used in the project. MIT li - [`3479adb`](https://github.com/zebratechnologies/zeta-flutter/commit/3479adb574c9ec1073552f888631f7cee12fe4cb) -bug(platforms): adding windows into example by [@thelukewalton](https://github.com/thelukewalton) - [`70a6144`](https://github.com/zebratechnologies/zeta-flutter/commit/70a614446c4d526315eb3229478d89dbd1c031de) - bug(type): Fixing reset height and tests failing by [@thelukewalton](https://github.com/thelukewalton) -## 0.0.1+10 - 2023-07-11 +## [0.0.1+10] - 2023-07-11 ### :sparkles: New Features @@ -124,7 +1633,7 @@ Introduced license details for third-party libraries used in the project. MIT li - [`988964e`](https://github.com/zebratechnologies/zeta-flutter/commit/988964e122128c4f9e4423fd849b70b6283ccea7) - removing unused dependency; by [@thelukewalton](https://github.com/thelukewalton) -## 0.0.1+9 - 2023-03-28 +## [0.0.1+9]- 2023-03-28 ### :sparkles: New Features @@ -144,7 +1653,7 @@ Introduced license details for third-party libraries used in the project. MIT li - [`d591856`](https://github.com/zebratechnologies/zeta-flutter/commit/d59185680879bf2f938c4f2a6bd2328f29a3ddd2) - test _(commit by [@thelukewalton](https://github.com/thelukewalton))_ - [`1dcbcae`](https://github.com/zebratechnologies/zeta-flutter/commit/1dcbcaec2600210efcefc80861c29aaa7e44c27e) - removing hardcoded shas _(PR [#19](https://github.com/zebratechnologies/zeta-flutter/pull/19) by [@thelukewalton](https://github.com/thelukewalton))_ -## 0.0.1+6 - Spacing - 2023-03-06 +## [0.0.1+6]- Spacing - 2023-03-06 ### :sparkles: New Features @@ -159,7 +1668,7 @@ Introduced license details for third-party libraries used in the project. MIT li - [`1dc0e1b`](https://github.com/zebratechnologies/zeta-flutter/commit/1dc0e1b64cb870685110516c5159b20fb903f2c3) - Update README.md _(commit by [@benken](https://github.com/benken))_ -## 0.0.1+5 - Grid - 2023-02-17 +## [0.0.1+5] - Grid - 2023-02-17 ### :sparkles: New Features @@ -176,8 +1685,28 @@ Introduced license details for third-party libraries used in the project. MIT li - [`4acf3c1`](https://github.com/zebratechnologies/zeta-flutter/commit/4acf3c1134b6c8d17827d8e2c665250d6f6ead1d) - fix(actions) Fix action refs _(PR [#7](https://github.com/zebratechnologies/zeta-flutter/pull/7) by [@thelukewalton](https://github.com/thelukewalton))_ - [`83e073b`](https://github.com/zebratechnologies/zeta-flutter/commit/83e073b16808d89373a74dba35172bb7a978e765) - fix(actions) another attempt at fixing actions checkout _(PR [#8](https://github.com/zebratechnologies/zeta-flutter/pull/8) by [@thelukewalton](https://github.com/thelukewalton))_ -## 0.0.1+1 - Initial setup +## [0.0.1+1] - Initial setup - Initial setup -[0.0.1+12]: https://github.com/zebratechnologies/zeta-flutter/compare/0.0.1+11...0.0.1+12 +[0.1.1+2]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.0+9...0.1.1+2 +[0.1.1+3]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+2...0.1.1+3 +[0.1.1+4]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+3...0.1.1+4 +[0.1.1+5]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+4...0.1.1+5 +[0.1.1+6]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+5...0.1.1+6 +[0.1.1+7]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+6...0.1.1+7 +[0.1.1+8]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+7...0.1.1+8 +[0.1.1+9]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+8...0.1.1+9 +[0.1.1+10]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+9...0.1.1+10 +[0.1.1+11]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+10...0.1.1+11 +[0.1.1+12]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+11...0.1.1+12 +[0.1.1+13]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+12...0.1.1+13 +[0.1.1+14]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+13...0.1.1+14 +[0.1.1+15]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+14...0.1.1+15 +[0.1.1+16]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+15...0.1.1+16 +[0.1.1+18]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+17...0.1.1+18 +[0.1.1+19]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+18...0.1.1+19 +[0.1.1+20]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+19...0.1.1+20 +[0.1.1+21]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+20...0.1.1+21 +[0.1.1+22]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+21...0.1.1+22 +[0.1.1+23]: https://github.com/zebratechnologies/zeta-flutter/compare/0.1.1+22...0.1.1+23 diff --git a/LICENSE b/LICENSE index c091ab8d..d4f367ee 100644 --- a/LICENSE +++ b/LICENSE @@ -1,4 +1,4 @@ -Copyright 2023 Zebra Technologies +Copyright 2024 Zebra Technologies 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: diff --git a/README.md b/README.md index eb8c75bd..7437d3b5 100644 --- a/README.md +++ b/README.md @@ -9,6 +9,7 @@ Zeta is the new, formal, standardized Zebra Design System based off the successe To install `zeta_flutter`, follow the instructions [here](https://pub.dev/packages/zeta_flutter/install). ## Usage + Zeta offers flexibility in theming through its `ZetaProvider` widget. Here's a breakdown of its features: ### Setting the Initial Theme Mode @@ -83,6 +84,7 @@ To tie everything together, use the `ZetaProvider` constructor. The `builder` ar ``` With these configurations, Zeta makes it easy to achieve consistent theming throughout your Flutter application. + ## Viewing the components To view examples of all the components in the library, you can run the example app in this repo or go to [Zeta](https://zeta-ds.web.app/) diff --git a/custom_docs/components/Grid/flutter.md b/custom_docs/components/Grid/flutter.md deleted file mode 100644 index 0edc52d2..00000000 --- a/custom_docs/components/Grid/flutter.md +++ /dev/null @@ -1,59 +0,0 @@ -## ZetaGrid Usage - -To import ZetaGrid into a Dart file: - -```dart -import 'package:zeta_flutter/zeta_flutter.dart'; -``` - -### Example - -```dart -import 'package:zeta_flutter/zeta_flutter.dart'; -class ZetaGridExample extends StatelessWidget{ - const ZetaGridExample({Key? key}) : super(key: key); - @override - Widget build(BuildContext context) { - return ZetaGrid(...); - } -} -``` - -### Setup - -To ensure all components work as intended, applications should have ZetaTheme.zeta applied at their top level; typically within MaterialApp or wrapping its equivalent: - -```dart -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/src/theme/theme.dart'; -class MyApp extends StatelessWidget { - const MyApp({super.key}); - @override - Widget build(BuildContext context) { - return MaterialApp( - theme: ZetaTheme.zeta, - builder: (context, child) => ..., - ); - } -} -``` - -or - -```dart -import 'package:flutter/cupertino.dart'; -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/src/theme/theme.dart'; -class MyApp extends StatelessWidget { - const MyApp({super.key}); - @override - Widget build(BuildContext context) { - return Theme( - data: ZetaTheme.zeta, - child: CupertinoApp( - builder: (context, child) => ..., - ), - ); - } -} -``` diff --git a/custom_docs/components/Spacing/flutter.md b/custom_docs/components/Spacing/flutter.md deleted file mode 100644 index 6eddb8b6..00000000 --- a/custom_docs/components/Spacing/flutter.md +++ /dev/null @@ -1,198 +0,0 @@ -## ZetaSpacing Usage - -To import ZetaSpacing into a Dart file: - -```dart -import 'package:zeta_flutter/zeta_flutter.dart'; -``` - -### Example - -```dart -import 'package:zeta_flutter/zeta_flutter.dart'; - -class ZetaSpacingExample extends StatelessWidget{ - const ZetaSpacingExample({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return ZetaSpacing(...); - } -} -``` - -### Setup - -To ensure all components work as intended, applications should have ZetaTheme.zeta applied at their top level; typically within MaterialApp or wrapping its equivalent: - -```dart -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/src/theme/theme.dart'; - -class MyApp extends StatelessWidget { - const MyApp({super.key}); - - @override - Widget build(BuildContext context) { - return MaterialApp( - theme: ZetaTheme.zeta, - builder: (context, child) => ..., - ); - } -} -``` - -or - -```dart - -import 'package:flutter/cupertino.dart'; -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/src/theme/theme.dart'; - -class MyApp extends StatelessWidget { - const MyApp({super.key}); - - @override - Widget build(BuildContext context) { - return Theme( - data: ZetaTheme.zeta, - child: CupertinoApp( - builder: (context, child) => ..., - ), - ); - } -} -``` - -### ZetaSpacing - -ZetaSpacing provides four options for spacing - -- `square` - applies inset to all 4 sides equally. -- `squish` - applies inset to top and bottom only. -- `inline` - applies inset to start and end only. -- `inlineStart` - applies inset to start only. For LTR locales this is the left, for RTL locales this is the right. -- `inlineEnd` - applies inset to end only. For LTR locales this is the right, for RTL locales this is the left. -- `stack` - applies inset to bottom only. - -These spacings should be applied with the following doubles: - -- `x0` - 0 -- `x1` - 4 - also `xxs` -- `x2` - 8 - also `xs` -- `x3` - 12 - also `s` -- `x4` - 16 - also `b` -- `x5` - 20 -- `x6` - 24 - also `m` -- `x7` - 28 -- `x8` - 32 - also `l` -- `x9` - 36 -- `x10` - 40 -- `x11` - 44 -- `x12` - 48 -- `x13` - 52 -- `x14` - 58 -- `x16` - 64 - also `xl` -- `x20` - 80 - also `xxl` -- `x24` - 96 - also `xxxl` - -Spacing components can be used in multiple ways: - -### ZetaSpacing() widget with named constructors. - -```dart -const ZetaSpacing.square( - Text('Example'), - size: Dimensions.x1, -), -const ZetaSpacing.squish( - Text('Example'), - size: Dimensions.x1, -), -const ZetaSpacing.stack( - Text('Example'), - size: Dimensions.x1, -) -const ZetaSpacing.inline( - Text('Example'), - size: Dimensions.x1, -) -``` - -This is the preferred way to use ZetaSpacing. Having a const, named constructor makes the intuitive and efficient. - -- Const constructor -- Can wrap any Widget. -- Padding inset around widget. - -
- -### ZetaSpacing() widget. - -```dart -const ZetaSpacing( - Text('Example'), - size: Dimensions.x1, - type: ZetaSpacingType.square, -), -const ZetaSpacing( - Text('Example'), - size: Dimensions.x1, - type: ZetaSpacingType.squish, -), -const ZetaSpacing( - Text('Example'), - size: Dimensions.x1, - type: ZetaSpacingType.stack, -), -const ZetaSpacing( - Text('Example'), - size: Dimensions.x1, - type: ZetaSpacingType.inline, -), -``` - -This method is less intuitive than using the named constructor, although it does still provide a const constructor for efficiency. - -- Having a const constructor makes this a preferred approach to spacing. -- Can wrap any Widget. -- Padding inset around widget. - -
- -### SpacingSize extension on double. - -```dart -Container( - padding: Dimensions.x1.square, - margin: Dimensions.x10.squish, - child: Text('Example'), -), -Container( - padding: Dimensions.x1.stack, - margin: Dimensions.x10.inline, - child: Text('Example'), -), -``` - -- Should be used with defined sizes: x0, x1,... or xxs, xs,... (although can be used on any double). -- Can be used for either padding or margin. -- Can be wrapped around any Widget, or used as a parameter. - -
- -### SpacingWidget extension on Widget. - -```dart -Text('Example').square(Dimensions.x1), -Text('Example').squish(Dimensions.x1), -Text('Example').stack(Dimensions.x1), -Text('Example').inline(Dimensions.x1), -Text('Example').inlineStart(Dimensions.x1), -Text('Example').inlineEnd(Dimensions.x1), -``` - -- Should be used with defined sizes: x0, x1,... or xxs, xs,... (although can be used on any double). -- Padding inset around widget. -- Can be applied to any widget. diff --git a/custom_docs/components/Typography/flutter.md b/custom_docs/components/Typography/flutter.md deleted file mode 100644 index 3bd74554..00000000 --- a/custom_docs/components/Typography/flutter.md +++ /dev/null @@ -1,98 +0,0 @@ -## ZetaText Usage - -To import ZetaText into a Dart file: - -```dart -import 'package:zeta_flutter/zeta_flutter.dart'; -``` - -### Example - -```dart -import 'package:zeta_flutter/zeta_flutter.dart'; - -class ZetaTextExample extends StatelessWidget{ - const ZetaTextExample({Key? key}) : super(key: key); - - @override - Widget build(BuildContext context) { - return ZetaText(...); - } -} -``` - -### Setup - -To ensure all components work as intended, applications should have ZetaTheme.zeta applied at their top level; typically within MaterialApp or wrapping its equivalent: - -```dart -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/src/theme/theme.dart'; - -class MyApp extends StatelessWidget { - const MyApp({super.key}); - - @override - Widget build(BuildContext context) { - return MaterialApp( - theme: ZetaTheme.zeta, - builder: (context, child) => ..., - ); - } -} -``` - -or - -```dart - -import 'package:flutter/cupertino.dart'; -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/src/theme/theme.dart'; - -class MyApp extends StatelessWidget { - const MyApp({super.key}); - - @override - Widget build(BuildContext context) { - return Theme( - data: ZetaTheme.zeta, - child: CupertinoApp( - builder: (context, child) => ..., - ), - ); - } -} -``` - -### ZetaText - -Zeta text styles are within ZetaTheme.zeta, and so will be automatically applied to many widgets that use the built in text theme. When building components, text should not have any spacing by default, and so it is recommended to use the individual text styles with Text, rather than using ZetaText as this will by default apply a x2 squish padding (top and bottom). - -Zeta Typography styles can be used in multiple ways: - -### ZetaText widget with named constructors - -```dart -const ZetaText.bodySmall('Example'), -const ZetaText.displayLarge('Example'), -``` - -This is the preferred way to display text. Having a const, named constructor with helper parameters makes the intuitive and efficient. Constructors exist for all pre-defined text styles and helper functions exist to support all tokens. - -### ZetaText widget - -```dart -const ZetaText('Example', style: ZetaText.zetaBodySmall) -``` - -This method is less intuitive than using the named constructor, although it does still provide a const constructor for efficiency. Having a const, named constructor with helper functions makes the intuitive and efficient. Constructors exist for all pre-defined text styles and helper parameters exist to support all tokens. - -### ZetaText styles - -```dart -Text('Example', style: ZetaText.zetaBodySmall) -Text('Example', style: Theme.of(context).bodySmall) -``` - -Using the base styles gives the greatest flexibility as styles can be extended or added to where needed, at the expense of following the specifications exactly. As ZetaText.textTheme is within the base app style, we can use context to get the styles. This greatly speed up the process of applying Zeta to a pre-existing application. Using this method means helper parameters (such as caps) can not be used and spacing is not applied. This can be useful in components where spacing should be zero. diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index f5c285f1..f6342e74 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -3,21 +3,28 @@ PODS: - path_provider_foundation (0.0.1): - Flutter - FlutterMacOS + - shared_preferences_foundation (0.0.1): + - Flutter + - FlutterMacOS DEPENDENCIES: - Flutter (from `Flutter`) - path_provider_foundation (from `.symlinks/plugins/path_provider_foundation/darwin`) + - shared_preferences_foundation (from `.symlinks/plugins/shared_preferences_foundation/darwin`) EXTERNAL SOURCES: Flutter: :path: Flutter path_provider_foundation: :path: ".symlinks/plugins/path_provider_foundation/darwin" + shared_preferences_foundation: + :path: ".symlinks/plugins/shared_preferences_foundation/darwin" SPEC CHECKSUMS: Flutter: f04841e97a9d0b0a8025694d0796dd46242b2854 path_provider_foundation: 29f094ae23ebbca9d3d0cec13889cd9060c0e943 + shared_preferences_foundation: 5b919d13b803cadd15ed2dc053125c68730e5126 PODFILE CHECKSUM: ef19549a9bc3046e7bb7d2fab4d021637c0c58a3 -COCOAPODS: 1.13.0 +COCOAPODS: 1.14.3 diff --git a/example/lib/home.dart b/example/lib/home.dart index d455a251..aaafbe7b 100644 --- a/example/lib/home.dart +++ b/example/lib/home.dart @@ -1,10 +1,16 @@ import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; -import 'package:zeta_example/pages/color_example.dart'; -import 'package:zeta_example/pages/checkbox_example.dart'; -import 'package:zeta_example/pages/grid_example.dart'; -import 'package:zeta_example/pages/spacing_example.dart'; -import 'package:zeta_example/pages/typography_example.dart'; +import 'package:zeta_example/pages/components/accordion_example.dart'; +import 'package:zeta_example/pages/components/avatar_example.dart'; +import 'package:zeta_example/pages/components/badges_example.dart'; +import 'package:zeta_example/pages/components/banner_example.dart'; +import 'package:zeta_example/pages/components/bottom_sheet_example.dart'; +import 'package:zeta_example/pages/components/button_example.dart'; +import 'package:zeta_example/pages/components/checkbox_example.dart'; +import 'package:zeta_example/pages/components/chip_example.dart'; +import 'package:zeta_example/pages/theme/color_example.dart'; +import 'package:zeta_example/pages/components/password_input_example.dart'; +import 'package:zeta_example/pages/assets/icons_example.dart'; import 'package:zeta_example/widgets.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; @@ -16,12 +22,22 @@ class Component { } final List components = [ - Component(GridExample.name, (context) => const GridExample()), - Component(SpacingExample.name, (context) => const SpacingExample()), - Component(TypographyExample.name, (context) => const TypographyExample()), - Component(ColorExample.name, (context) => const ColorExample()), + Component(AccordionExample.name, (context) => const AccordionExample()), + Component(AvatarExample.name, (context) => const AvatarExample()), + Component(BannerExample.name, (context) => const BannerExample()), + Component(BadgesExample.name, (context) => const BadgesExample()), + Component(BottomSheetExample.name, (context) => const BottomSheetExample()), + Component(ButtonExample.name, (context) => const ButtonExample()), Component(CheckBoxExample.name, (context) => const CheckBoxExample()), + Component(ChipExample.name, (context) => const ChipExample()), + Component(PasswordInputExample.name, (context) => const PasswordInputExample()), +]; +final List theme = [ + Component(ColorExample.name, (context) => const ColorExample()), +]; +final List assets = [ + Component(IconsExample.name, (context) => const IconsExample()), ]; class Home extends StatefulWidget { @@ -35,13 +51,25 @@ final GoRouter router = GoRouter( routes: [ GoRoute( path: '/', + name: 'Home', builder: (_, __) => const Home(), routes: [ - ...components.map( + ...[ + ...components, + ...assets, + ...theme, + ].map( (e) => GoRoute( path: e.name, + name: e.name, builder: (_, __) => e.pageBuilder.call(_), - routes: e.children.map((f) => GoRoute(path: f.name, builder: (_, __) => f.pageBuilder(_))).toList(), + routes: e.children + .map((f) => GoRoute( + path: f.name, + name: f.name, + builder: (_, __) => f.pageBuilder(_), + )) + .toList(), ), ) ], @@ -52,18 +80,37 @@ final GoRouter router = GoRouter( class _HomeState extends State { @override Widget build(BuildContext context) { - final items = components..sort((a, b) => a.name.compareTo(b.name)); + final _components = components..sort((a, b) => a.name.compareTo(b.name)); + final _assets = assets..sort((a, b) => a.name.compareTo(b.name)); + final _theme = theme..sort((a, b) => a.name.compareTo(b.name)); return ExampleScaffold( name: 'Zeta', - child: ListView.builder( - padding: EdgeInsets.all(Dimensions.s), - itemCount: items.length, - itemBuilder: (context, index) { - return ListTile( - title: ZetaText(items[index].name), - onTap: () => context.go('/${items[index].name}'), - ); - }, + child: SingleChildScrollView( + child: Column( + children: [ + ExpansionTile( + title: Text('Widgets'), + backgroundColor: Zeta.of(context).colors.warm.shade30, + children: _components + .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) + .toList(), + ), + ExpansionTile( + title: Text('Theme'), + backgroundColor: Zeta.of(context).colors.warm.shade30, + children: _theme + .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) + .toList(), + ), + ExpansionTile( + title: Text('Assets'), + backgroundColor: Zeta.of(context).colors.warm.shade30, + children: _assets + .map((item) => ListTile(title: Text(item.name), onTap: () => context.go('/${item.name}'))) + .toList(), + ), + ], + ), ), ); } diff --git a/example/lib/main.dart b/example/lib/main.dart index 86099838..596eed2e 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -9,14 +9,14 @@ void main() async { final preferences = await SharedPreferences.getInstance(); final themeService = SharedPrefsThemeService(preferences); - final themPreferences = await themeService.loadTheme(); + final themePreferences = await themeService.loadTheme(); runApp( ZetaExample( themeService: themeService, - initialThemeData: themPreferences.$1 ?? ZetaThemeData(), - initialThemeMode: themPreferences.$2 ?? ThemeMode.system, - initialContrast: themPreferences.$3 ?? ZetaContrast.aa, + initialThemeData: themePreferences.$1 ?? ZetaThemeData(), + initialThemeMode: themePreferences.$2 ?? ThemeMode.system, + initialContrast: themePreferences.$3 ?? ZetaContrast.aa, ), ); } @@ -49,14 +49,18 @@ class ZetaExample extends StatelessWidget { routerConfig: router, themeMode: themeMode, theme: ThemeData( + useMaterial3: true, fontFamily: themeData.fontFamily, scaffoldBackgroundColor: light.background, colorScheme: light, + textTheme: zetaTextTheme, ), darkTheme: ThemeData( + useMaterial3: true, fontFamily: themeData.fontFamily, scaffoldBackgroundColor: dark.background, colorScheme: dark, + textTheme: zetaTextTheme, ), ); }, diff --git a/example/lib/pages/assets/icons_example.dart b/example/lib/pages/assets/icons_example.dart new file mode 100644 index 00000000..21d2c56d --- /dev/null +++ b/example/lib/pages/assets/icons_example.dart @@ -0,0 +1,1015 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../widgets.dart'; + +class IconsExample extends StatefulWidget { + static const String name = 'Icons'; + + const IconsExample({super.key}); + + @override + State createState() => _IconsExampleState(); +} + +class _IconsExampleState extends State { + bool showGeneratedColors = false; + + @override + Widget build(BuildContext context) { + return ExampleScaffold( + name: IconsExample.name, + child: SingleChildScrollView( + padding: EdgeInsets.all(ZetaSpacing.s), + child: Column( + children: [ + Text('Round', style: ZetaTextStyles.bodyLarge), + Wrap( + spacing: 8, + runSpacing: 8, + children: [ + // round + Icon(ZetaIcons.alarm_round), + Icon(ZetaIcons.ar_round), + Icon(ZetaIcons.bookmark_outline_round), + Icon(ZetaIcons.bookmark_round), + Icon(ZetaIcons.build_round), + Icon(ZetaIcons.cached_round), + Icon(ZetaIcons.calendar_3_day_round), + Icon(ZetaIcons.calendar_alt_1_round), + Icon(ZetaIcons.calendar_alt_2_round), + Icon(ZetaIcons.calendar_available_round), + Icon(ZetaIcons.calendar_cancel_round), + Icon(ZetaIcons.calendar_day_round), + Icon(ZetaIcons.calendar_edit_round), + Icon(ZetaIcons.calendar_monthly_alt_round), + Icon(ZetaIcons.calendar_monthly_round), + Icon(ZetaIcons.calendar_range_round), + Icon(ZetaIcons.calendar_round), + Icon(ZetaIcons.calendar_weekly_alt_round), + Icon(ZetaIcons.calendar_weekly_round), + Icon(ZetaIcons.calendar_yearly_round), + Icon(ZetaIcons.check_circle_outline_alt_round), + Icon(ZetaIcons.check_circle_outline_round), + Icon(ZetaIcons.check_circle_round), + Icon(ZetaIcons.check_mark_round), + Icon(ZetaIcons.clipboard_round), + Icon(ZetaIcons.clock_outline_round), + Icon(ZetaIcons.clock_round), + Icon(ZetaIcons.credit_card_round), + Icon(ZetaIcons.delete_forever_round), + Icon(ZetaIcons.delete_outline_round), + Icon(ZetaIcons.delete_round), + Icon(ZetaIcons.dislike_action_round), + Icon(ZetaIcons.document_round), + Icon(ZetaIcons.download_round), + Icon(ZetaIcons.filter_alt_round), + Icon(ZetaIcons.filter_round), + Icon(ZetaIcons.hand_round), + Icon(ZetaIcons.history_round), + Icon(ZetaIcons.home_round), + Icon(ZetaIcons.info_round), + Icon(ZetaIcons.label_round), + Icon(ZetaIcons.like_action_round), + Icon(ZetaIcons.lock_alt_round), + Icon(ZetaIcons.lock_round), + Icon(ZetaIcons.log_in_round), + Icon(ZetaIcons.log_out_round), + Icon(ZetaIcons.love_outline_round), + Icon(ZetaIcons.love_round), + Icon(ZetaIcons.open_in_full_round), + Icon(ZetaIcons.open_in_new_window_round), + Icon(ZetaIcons.pending_round), + Icon(ZetaIcons.pin_round), + Icon(ZetaIcons.price_round), + Icon(ZetaIcons.renew_round), + Icon(ZetaIcons.search_round), + Icon(ZetaIcons.security_check_round), + Icon(ZetaIcons.settings_round), + Icon(ZetaIcons.sync_action_round), + Icon(ZetaIcons.touch_round), + Icon(ZetaIcons.trending_down_round), + Icon(ZetaIcons.trending_up_round), + Icon(ZetaIcons.unlock_alt_round), + Icon(ZetaIcons.unlock_round), + Icon(ZetaIcons.update_round), + Icon(ZetaIcons.upload_round), + Icon(ZetaIcons.user_circle_round), + Icon(ZetaIcons.user_round), + Icon(ZetaIcons.user_settings_round), + Icon(ZetaIcons.verified_round), + Icon(ZetaIcons.visibility_off_round), + Icon(ZetaIcons.visibility_round), + Icon(ZetaIcons.world_action_round), + Icon(ZetaIcons.zoom_in_round), + Icon(ZetaIcons.zoom_out_round), + Icon(ZetaIcons.add_alert_round), + Icon(ZetaIcons.alert_round), + Icon(ZetaIcons.auto_delete_round), + Icon(ZetaIcons.error_outline_round), + Icon(ZetaIcons.error_round), + Icon(ZetaIcons.important_notification_round), + Icon(ZetaIcons.warning_outline_round), + Icon(ZetaIcons.warning_round), + Icon(ZetaIcons.block_round), + Icon(ZetaIcons.closed_caption_round), + Icon(ZetaIcons.fast_forward_round), + Icon(ZetaIcons.fast_rewind_round), + Icon(ZetaIcons.loop_round), + Icon(ZetaIcons.microphone_off_round), + Icon(ZetaIcons.microphone_outline_round), + Icon(ZetaIcons.microphone_round), + Icon(ZetaIcons.pause_circle_round), + Icon(ZetaIcons.pause_round), + Icon(ZetaIcons.play_circle_round), + Icon(ZetaIcons.play_outline_round), + Icon(ZetaIcons.play_round), + Icon(ZetaIcons.replay_round), + Icon(ZetaIcons.skip_next_round), + Icon(ZetaIcons.skip_previous_round), + Icon(ZetaIcons.stop_circle_round), + Icon(ZetaIcons.stop_round), + Icon(ZetaIcons.video_camera_round), + Icon(ZetaIcons.volume_down_round), + Icon(ZetaIcons.volume_mute_round), + Icon(ZetaIcons.volume_off_round), + Icon(ZetaIcons.volume_up_round), + Icon(ZetaIcons.add_call_round), + Icon(ZetaIcons.chat_bubble_outline_round), + Icon(ZetaIcons.chat_bubble_round), + Icon(ZetaIcons.conversation_round), + Icon(ZetaIcons.dialpad_round), + Icon(ZetaIcons.do_not_disturb_round), + Icon(ZetaIcons.dollar_round), + Icon(ZetaIcons.email_alt_round), + Icon(ZetaIcons.email_outline_round), + Icon(ZetaIcons.email_round), + Icon(ZetaIcons.end_call_round), + Icon(ZetaIcons.message_round), + Icon(ZetaIcons.person_search_round), + Icon(ZetaIcons.phone_bluetooth_speaker_round), + Icon(ZetaIcons.phone_in_talk_round), + Icon(ZetaIcons.phone_round), + Icon(ZetaIcons.priority_round), + Icon(ZetaIcons.qr_code_round), + Icon(ZetaIcons.qr_code_scan_round), + Icon(ZetaIcons.rss_feed_round), + Icon(ZetaIcons.sd_card_round), + Icon(ZetaIcons.sim_card_round), + Icon(ZetaIcons.sms_round), + Icon(ZetaIcons.sync_disabled_round), + Icon(ZetaIcons.sync_round), + Icon(ZetaIcons.add_box_round), + Icon(ZetaIcons.add_circle_outline_round), + Icon(ZetaIcons.add_circle_round), + Icon(ZetaIcons.add_round), + Icon(ZetaIcons.analysis_round), + Icon(ZetaIcons.android_round), + Icon(ZetaIcons.backspace_round), + Icon(ZetaIcons.block_content_round), + Icon(ZetaIcons.clear_round), + Icon(ZetaIcons.content_round), + Icon(ZetaIcons.copy_file_round), + Icon(ZetaIcons.create_round), + Icon(ZetaIcons.filter_list_round), + Icon(ZetaIcons.flag_round), + Icon(ZetaIcons.link_content_round), + Icon(ZetaIcons.mail_round), + Icon(ZetaIcons.push_pin_round), + Icon(ZetaIcons.redo_round), + Icon(ZetaIcons.remove_box_round), + Icon(ZetaIcons.remove_circle_outline_round), + Icon(ZetaIcons.remove_circle_round), + Icon(ZetaIcons.remove_round), + Icon(ZetaIcons.reply_round), + Icon(ZetaIcons.save_alt_round), + Icon(ZetaIcons.save_round), + Icon(ZetaIcons.send_round), + Icon(ZetaIcons.sort_round), + Icon(ZetaIcons.undo_round), + Icon(ZetaIcons.antenna_round), + Icon(ZetaIcons.battery_alert_round), + Icon(ZetaIcons.battery_charging_round), + Icon(ZetaIcons.battery_round), + Icon(ZetaIcons.bluetooth_disabled_round), + Icon(ZetaIcons.bluetooth_round), + Icon(ZetaIcons.bluetooth_searching_round), + Icon(ZetaIcons.brightness_round), + Icon(ZetaIcons.cellular_signal_round), + Icon(ZetaIcons.chain_round), + Icon(ZetaIcons.contrast_round), + Icon(ZetaIcons.dark_mode_round), + Icon(ZetaIcons.devices_round), + Icon(ZetaIcons.ethernet_round), + Icon(ZetaIcons.flight_mode_round), + Icon(ZetaIcons.hdmi_round), + Icon(ZetaIcons.light_mode_round), + Icon(ZetaIcons.location_point_round), + Icon(ZetaIcons.location_round), + Icon(ZetaIcons.mobile_friendly_round), + Icon(ZetaIcons.network_signal_round), + Icon(ZetaIcons.nfc_round), + Icon(ZetaIcons.night_round), + Icon(ZetaIcons.restart_alt_round), + Icon(ZetaIcons.screen_rotation_round), + Icon(ZetaIcons.uhf_rfid_round), + Icon(ZetaIcons.usb_alt_device_round), + Icon(ZetaIcons.usb_alt_round), + Icon(ZetaIcons.usb_round), + Icon(ZetaIcons.volte_round), + Icon(ZetaIcons.appgallery_round), + Icon(ZetaIcons.application_analytics_round), + Icon(ZetaIcons.asset_tracker_lite_round), + Icon(ZetaIcons.blood_bag_plus_round), + Icon(ZetaIcons.bluetooth_management_round), + Icon(ZetaIcons.browser_print_round), + Icon(ZetaIcons.cloud_connect_round), + Icon(ZetaIcons.data_wedge_round), + Icon(ZetaIcons.design_tools_round), + Icon(ZetaIcons.device_tracker_round), + Icon(ZetaIcons.direct_connect_round), + Icon(ZetaIcons.emdk_round), + Icon(ZetaIcons.enterprise_browser_round), + Icon(ZetaIcons.enterprise_connectors_round), + Icon(ZetaIcons.enterprise_keyboard_round), + Icon(ZetaIcons.gms_restricted_mode_round), + Icon(ZetaIcons.intelligent_document_capture_round), + Icon(ZetaIcons.label_plus_round), + Icon(ZetaIcons.life_guard_round), + Icon(ZetaIcons.link_os_round), + Icon(ZetaIcons.mdm_connectors_round), + Icon(ZetaIcons.mdm_toolkit_round), + Icon(ZetaIcons.mobility_dna_round), + Icon(ZetaIcons.mobility_security_round), + Icon(ZetaIcons.multi_code_data_formatting_round), + Icon(ZetaIcons.mx_round), + Icon(ZetaIcons.ocr_round), + Icon(ZetaIcons.oem_config_round), + Icon(ZetaIcons.pairing_solutions_round), + Icon(ZetaIcons.pdf_direct_round), + Icon(ZetaIcons.power_precision_round), + Icon(ZetaIcons.preferred_symbol_round), + Icon(ZetaIcons.print_secure_round), + Icon(ZetaIcons.print_station_round), + Icon(ZetaIcons.printer_profile_manager_round), + Icon(ZetaIcons.przm_round), + Icon(ZetaIcons.remote_control_round), + Icon(ZetaIcons.remote_diagnostics_round), + Icon(ZetaIcons.remote_management_round), + Icon(ZetaIcons.rx_round), + Icon(ZetaIcons.scan_and_pair_round), + Icon(ZetaIcons.scan_speed_analytics_round), + Icon(ZetaIcons.scan_to_connect_round), + Icon(ZetaIcons.scanner_control_application_round), + Icon(ZetaIcons.setting_tool_round), + Icon(ZetaIcons.simulscan_round), + Icon(ZetaIcons.smart_te_lite_round), + Icon(ZetaIcons.smart_te_round), + Icon(ZetaIcons.smart_tek_round), + Icon(ZetaIcons.smartdex_round), + Icon(ZetaIcons.stagenow_round), + Icon(ZetaIcons.swipe_assist_round), + Icon(ZetaIcons.tekspeech_pro_round), + Icon(ZetaIcons.virtual_devices_round), + Icon(ZetaIcons.virtual_tether_round), + Icon(ZetaIcons.visibility_services_round), + Icon(ZetaIcons.voice_wedge_round), + Icon(ZetaIcons.workforce_connect_round), + Icon(ZetaIcons.workstation_connect_round), + Icon(ZetaIcons.zebra_designer_round), + Icon(ZetaIcons.zebra_onecare_round), + Icon(ZetaIcons.zebra_setup_utility_round), + Icon(ZetaIcons.zero_touch_round), + Icon(ZetaIcons.align_center_round), + Icon(ZetaIcons.align_horizontal_center_round), + Icon(ZetaIcons.align_horizontal_left_round), + Icon(ZetaIcons.align_horizontal_right_round), + Icon(ZetaIcons.align_left_round), + Icon(ZetaIcons.align_right_round), + Icon(ZetaIcons.align_vertical_bottom_round), + Icon(ZetaIcons.align_vertical_center_round), + Icon(ZetaIcons.align_vertical_top_round), + Icon(ZetaIcons.attach_round), + Icon(ZetaIcons.bold_round), + Icon(ZetaIcons.bullet_list_round), + Icon(ZetaIcons.checklist_round), + Icon(ZetaIcons.color_fill_round), + Icon(ZetaIcons.distribute_horizontal_round), + Icon(ZetaIcons.distribute_vertical_round), + Icon(ZetaIcons.edit_border_round), + Icon(ZetaIcons.edit_round), + Icon(ZetaIcons.font_size_decrease_round), + Icon(ZetaIcons.font_size_increase_round), + Icon(ZetaIcons.format_shapes_round), + Icon(ZetaIcons.indent_decrease_round), + Icon(ZetaIcons.indent_increase_round), + Icon(ZetaIcons.italic_round), + Icon(ZetaIcons.justify_round), + Icon(ZetaIcons.line_spacing_round), + Icon(ZetaIcons.link_round), + Icon(ZetaIcons.no_color_round), + Icon(ZetaIcons.numbered_list_round), + Icon(ZetaIcons.strikethrough_round), + Icon(ZetaIcons.text_color_round), + Icon(ZetaIcons.type_round), + Icon(ZetaIcons.underline_round), + Icon(ZetaIcons.barcode_bluetooth_round), + Icon(ZetaIcons.barcode_done_round), + Icon(ZetaIcons.barcode_image_scan_round), + Icon(ZetaIcons.barcode_qr_code_round), + Icon(ZetaIcons.barcode_round), + Icon(ZetaIcons.barcode_scanner_down_round), + Icon(ZetaIcons.barcode_settings_round), + Icon(ZetaIcons.calculator_round), + Icon(ZetaIcons.card_orientation_round), + Icon(ZetaIcons.card_with_chip_round), + Icon(ZetaIcons.certificate_round), + Icon(ZetaIcons.choices_round), + Icon(ZetaIcons.contactless_pay_round), + Icon(ZetaIcons.credit_card_swipe_round), + Icon(ZetaIcons.eas_round), + Icon(ZetaIcons.enterprise_diagnostics_round), + Icon(ZetaIcons.environmental_round), + Icon(ZetaIcons.factory_round), + Icon(ZetaIcons.freezer_round), + Icon(ZetaIcons.issue_audit_round), + Icon(ZetaIcons.performance_round), + Icon(ZetaIcons.planogram_round), + Icon(ZetaIcons.productivity_apps_round), + Icon(ZetaIcons.receipt_round), + Icon(ZetaIcons.retail_round), + Icon(ZetaIcons.road_map_round), + Icon(ZetaIcons.rules_round), + Icon(ZetaIcons.scan_rate_round), + Icon(ZetaIcons.shape_recognition_round), + Icon(ZetaIcons.solutions_round), + Icon(ZetaIcons.steps_round), + Icon(ZetaIcons.strategy_round), + Icon(ZetaIcons.tap_to_pay_round), + Icon(ZetaIcons.zero_scale_round), + Icon(ZetaIcons.attachment_round), + Icon(ZetaIcons.cloud_done_round), + Icon(ZetaIcons.cloud_download_round), + Icon(ZetaIcons.cloud_off_round), + Icon(ZetaIcons.cloud_outline_round), + Icon(ZetaIcons.cloud_round), + Icon(ZetaIcons.cloud_upload_round), + Icon(ZetaIcons.create_new_folder_round), + Icon(ZetaIcons.doc_attach_round), + Icon(ZetaIcons.downloading_round), + Icon(ZetaIcons.file_download_round), + Icon(ZetaIcons.file_upload_round), + Icon(ZetaIcons.finished_download_round), + Icon(ZetaIcons.folder_outline_round), + Icon(ZetaIcons.folder_round), + Icon(ZetaIcons.grid_view_round), + Icon(ZetaIcons.jpg_attach_round), + Icon(ZetaIcons.pdf_attach_round), + Icon(ZetaIcons.png_attach_round), + Icon(ZetaIcons.ppt_attach_round), + Icon(ZetaIcons.shared_folder_round), + Icon(ZetaIcons.upload_file_round), + Icon(ZetaIcons.cast_connected_round), + Icon(ZetaIcons.cast_round), + Icon(ZetaIcons.desktop_round), + Icon(ZetaIcons.device_settings_round), + Icon(ZetaIcons.devices_ecosystem_round), + Icon(ZetaIcons.headphones_round), + Icon(ZetaIcons.keyboard_round), + Icon(ZetaIcons.laptop_round), + Icon(ZetaIcons.memory_round), + Icon(ZetaIcons.monitor_round), + Icon(ZetaIcons.phone_android_round), + Icon(ZetaIcons.phone_iphone_round), + Icon(ZetaIcons.phonelink_round), + Icon(ZetaIcons.printer_round), + Icon(ZetaIcons.scanner_round), + Icon(ZetaIcons.security_round), + Icon(ZetaIcons.smart_phone_round), + Icon(ZetaIcons.speaker_round), + Icon(ZetaIcons.tablet_mac_round), + Icon(ZetaIcons.tablet_round), + Icon(ZetaIcons.tv_round), + Icon(ZetaIcons.video_play_round), + Icon(ZetaIcons.watch_round), + Icon(ZetaIcons.adjustments_round), + Icon(ZetaIcons.auto_round), + Icon(ZetaIcons.awb_round), + Icon(ZetaIcons.camera_round), + Icon(ZetaIcons.camera_shutter_round), + Icon(ZetaIcons.contrast_image_round), + Icon(ZetaIcons.crop_round), + Icon(ZetaIcons.eye_dropper_round), + Icon(ZetaIcons.flip_camera_round), + Icon(ZetaIcons.grid_off_round), + Icon(ZetaIcons.grid_on_round), + Icon(ZetaIcons.hdr_round), + Icon(ZetaIcons.image_library_round), + Icon(ZetaIcons.image_round), + Icon(ZetaIcons.iso_round), + Icon(ZetaIcons.portrait_round), + Icon(ZetaIcons.pro_round), + Icon(ZetaIcons.rotate_left_round), + Icon(ZetaIcons.rotate_right_round), + Icon(ZetaIcons.slide_show_round), + Icon(ZetaIcons.straighten_round), + Icon(ZetaIcons.timer_round), + Icon(ZetaIcons.visibility_image_round), + Icon(ZetaIcons.visibility_off_image_round), + Icon(ZetaIcons.wb_image_round), + Icon(ZetaIcons.wb_round), + Icon(ZetaIcons.bus_round), + Icon(ZetaIcons.cafe_round), + Icon(ZetaIcons.car_round), + Icon(ZetaIcons.flight_round), + Icon(ZetaIcons.layers_round), + Icon(ZetaIcons.light_rail_train_round), + Icon(ZetaIcons.local_shipping_round), + Icon(ZetaIcons.map_round), + Icon(ZetaIcons.my_location_round), + Icon(ZetaIcons.navigation_round), + Icon(ZetaIcons.near_me_round), + Icon(ZetaIcons.offer_round), + Icon(ZetaIcons.place_round), + Icon(ZetaIcons.ship_round), + Icon(ZetaIcons.taxi_round), + Icon(ZetaIcons.train_round), + Icon(ZetaIcons.world_round), + Icon(ZetaIcons.zoom_in_map_round), + Icon(ZetaIcons.zoom_out_map_round), + Icon(ZetaIcons.apps_round), + Icon(ZetaIcons.arrow_back_round), + Icon(ZetaIcons.arrow_down_round), + Icon(ZetaIcons.arrow_forward_round), + Icon(ZetaIcons.arrow_up_round), + Icon(ZetaIcons.cancel_outline_round), + Icon(ZetaIcons.cancel_round), + Icon(ZetaIcons.caret_down_round), + Icon(ZetaIcons.caret_left_round), + Icon(ZetaIcons.caret_right_round), + Icon(ZetaIcons.caret_sort_round), + Icon(ZetaIcons.caret_up_round), + Icon(ZetaIcons.check_round), + Icon(ZetaIcons.chevron_left_round), + Icon(ZetaIcons.chevron_right_round), + Icon(ZetaIcons.close_round), + Icon(ZetaIcons.columns_round), + Icon(ZetaIcons.dashboard_round), + Icon(ZetaIcons.drop_down_circle_round), + Icon(ZetaIcons.expand_less_round), + Icon(ZetaIcons.expand_more_round), + Icon(ZetaIcons.first_page_round), + Icon(ZetaIcons.full_screen_exit_round), + Icon(ZetaIcons.full_screen_round), + Icon(ZetaIcons.hamburger_menu_navigation_rail_round), + Icon(ZetaIcons.hamburger_menu_round), + Icon(ZetaIcons.hamburger_menu_thick_round), + Icon(ZetaIcons.help_outline_round), + Icon(ZetaIcons.help_round), + Icon(ZetaIcons.last_page_round), + Icon(ZetaIcons.list_alt_round), + Icon(ZetaIcons.list_round), + Icon(ZetaIcons.more_horizontal_round), + Icon(ZetaIcons.more_vertical_round), + Icon(ZetaIcons.refresh_round), + Icon(ZetaIcons.unfold_less_round), + Icon(ZetaIcons.unfold_more_round), + Icon(ZetaIcons.add_group_round), + Icon(ZetaIcons.add_person_round), + Icon(ZetaIcons.bad_mood_round), + Icon(ZetaIcons.blog_round), + Icon(ZetaIcons.dislike_round), + Icon(ZetaIcons.facebook_round), + Icon(ZetaIcons.group_round), + Icon(ZetaIcons.groups_round), + Icon(ZetaIcons.happy_round), + Icon(ZetaIcons.instagram_round), + Icon(ZetaIcons.ios_share_round), + Icon(ZetaIcons.like_round), + Icon(ZetaIcons.linkedin_round), + Icon(ZetaIcons.medium_round), + Icon(ZetaIcons.notifications_active_round), + Icon(ZetaIcons.notifications_outline_round), + Icon(ZetaIcons.notifications_round), + Icon(ZetaIcons.person_outline_round), + Icon(ZetaIcons.person_round), + Icon(ZetaIcons.remove_group_round), + Icon(ZetaIcons.remove_person_round), + Icon(ZetaIcons.sad_round), + Icon(ZetaIcons.satisfied_round), + Icon(ZetaIcons.share_round), + Icon(ZetaIcons.switch_user_round), + Icon(ZetaIcons.twitter_round), + Icon(ZetaIcons.very_satisfied_round), + Icon(ZetaIcons.world_map_round), + Icon(ZetaIcons.youtube_round), + Icon(ZetaIcons.check_box_empty_round), + Icon(ZetaIcons.check_box_round), + Icon(ZetaIcons.indeterminate_check_box_round), + Icon(ZetaIcons.radio_button_checked_round), + Icon(ZetaIcons.radio_button_unchecked_round), + Icon(ZetaIcons.star_half_round), + Icon(ZetaIcons.star_outline_round), + Icon(ZetaIcons.star_round), + Icon(ZetaIcons.toggle_off_round), + Icon(ZetaIcons.toggle_on_round), + ], + ), + const SizedBox(height: 20), + Text('Sharp', style: ZetaTextStyles.bodyLarge), + Wrap( + spacing: 8, + runSpacing: 8, + children: [ + Icon(ZetaIcons.alarm_sharp), + Icon(ZetaIcons.ar_sharp), + Icon(ZetaIcons.bookmark_outline_sharp), + Icon(ZetaIcons.bookmark_sharp), + Icon(ZetaIcons.build_sharp), + Icon(ZetaIcons.cached_sharp), + Icon(ZetaIcons.calendar_3_day_sharp), + Icon(ZetaIcons.calendar_alt_1_sharp), + Icon(ZetaIcons.calendar_alt_2_sharp), + Icon(ZetaIcons.calendar_available_sharp), + Icon(ZetaIcons.calendar_cancel_sharp), + Icon(ZetaIcons.calendar_day_sharp), + Icon(ZetaIcons.calendar_edit_sharp), + Icon(ZetaIcons.calendar_monthly_alt_sharp), + Icon(ZetaIcons.calendar_monthly_sharp), + Icon(ZetaIcons.calendar_range_sharp), + Icon(ZetaIcons.calendar_sharp), + Icon(ZetaIcons.calendar_weekly_alt_sharp), + Icon(ZetaIcons.calendar_weekly_sharp), + Icon(ZetaIcons.calendar_yearly_sharp), + Icon(ZetaIcons.check_circle_outline_alt_sharp), + Icon(ZetaIcons.check_circle_outline_sharp), + Icon(ZetaIcons.check_circle_sharp), + Icon(ZetaIcons.check_mark_sharp), + Icon(ZetaIcons.clipboard_sharp), + Icon(ZetaIcons.clock_outline_sharp), + Icon(ZetaIcons.clock_sharp), + Icon(ZetaIcons.credit_card_sharp), + Icon(ZetaIcons.delete_forever_sharp), + Icon(ZetaIcons.delete_outline_sharp), + Icon(ZetaIcons.delete_sharp), + Icon(ZetaIcons.dislike_action_sharp), + Icon(ZetaIcons.document_sharp), + Icon(ZetaIcons.download_sharp), + Icon(ZetaIcons.filter_alt_sharp), + Icon(ZetaIcons.filter_sharp), + Icon(ZetaIcons.hand_sharp), + Icon(ZetaIcons.history_sharp), + Icon(ZetaIcons.home_sharp), + Icon(ZetaIcons.info_sharp), + Icon(ZetaIcons.label_sharp), + Icon(ZetaIcons.like_action_sharp), + Icon(ZetaIcons.lock_alt_sharp), + Icon(ZetaIcons.lock_sharp), + Icon(ZetaIcons.log_in_sharp), + Icon(ZetaIcons.log_out_sharp), + Icon(ZetaIcons.love_outline_sharp), + Icon(ZetaIcons.love_sharp), + Icon(ZetaIcons.open_in_full_sharp), + Icon(ZetaIcons.open_in_new_window_sharp), + Icon(ZetaIcons.pending_sharp), + Icon(ZetaIcons.pin_sharp), + Icon(ZetaIcons.price_sharp), + Icon(ZetaIcons.renew_sharp), + Icon(ZetaIcons.search_sharp), + Icon(ZetaIcons.security_check_sharp), + Icon(ZetaIcons.settings_sharp), + Icon(ZetaIcons.sync_action_sharp), + Icon(ZetaIcons.touch_sharp), + Icon(ZetaIcons.trending_down_sharp), + Icon(ZetaIcons.trending_up_sharp), + Icon(ZetaIcons.unlock_alt_sharp), + Icon(ZetaIcons.unlock_sharp), + Icon(ZetaIcons.update_sharp), + Icon(ZetaIcons.upload_sharp), + Icon(ZetaIcons.user_circle_sharp), + Icon(ZetaIcons.user_sharp), + Icon(ZetaIcons.user_settings_sharp), + Icon(ZetaIcons.verified_sharp), + Icon(ZetaIcons.visibility_off_sharp), + Icon(ZetaIcons.visibility_sharp), + Icon(ZetaIcons.world_action_sharp), + Icon(ZetaIcons.zoom_in_sharp), + Icon(ZetaIcons.zoom_out_sharp), + Icon(ZetaIcons.add_alert_sharp), + Icon(ZetaIcons.alert_sharp), + Icon(ZetaIcons.auto_delete_sharp), + Icon(ZetaIcons.error_outline_sharp), + Icon(ZetaIcons.error_sharp), + Icon(ZetaIcons.important_notification_sharp), + Icon(ZetaIcons.warning_outline_sharp), + Icon(ZetaIcons.warning_sharp), + Icon(ZetaIcons.block_sharp), + Icon(ZetaIcons.closed_caption_sharp), + Icon(ZetaIcons.fast_forward_sharp), + Icon(ZetaIcons.fast_rewind_sharp), + Icon(ZetaIcons.loop_sharp), + Icon(ZetaIcons.microphone_off_sharp), + Icon(ZetaIcons.microphone_outline_sharp), + Icon(ZetaIcons.microphone_sharp), + Icon(ZetaIcons.pause_circle_sharp), + Icon(ZetaIcons.pause_sharp), + Icon(ZetaIcons.play_circle_sharp), + Icon(ZetaIcons.play_outline_sharp), + Icon(ZetaIcons.play_sharp), + Icon(ZetaIcons.replay_sharp), + Icon(ZetaIcons.skip_next_sharp), + Icon(ZetaIcons.skip_previous_sharp), + Icon(ZetaIcons.stop_circle_sharp), + Icon(ZetaIcons.stop_sharp), + Icon(ZetaIcons.video_camera_sharp), + Icon(ZetaIcons.volume_down_sharp), + Icon(ZetaIcons.volume_mute_sharp), + Icon(ZetaIcons.volume_off_sharp), + Icon(ZetaIcons.volume_up_sharp), + Icon(ZetaIcons.add_call_sharp), + Icon(ZetaIcons.chat_bubble_outline_sharp), + Icon(ZetaIcons.chat_bubble_sharp), + Icon(ZetaIcons.conversation_sharp), + Icon(ZetaIcons.dialpad_sharp), + Icon(ZetaIcons.do_not_disturb_sharp), + Icon(ZetaIcons.dollar_sharp), + Icon(ZetaIcons.email_alt_sharp), + Icon(ZetaIcons.email_outline_sharp), + Icon(ZetaIcons.email_sharp), + Icon(ZetaIcons.end_call_sharp), + Icon(ZetaIcons.message_sharp), + Icon(ZetaIcons.person_search_sharp), + Icon(ZetaIcons.phone_bluetooth_speaker_sharp), + Icon(ZetaIcons.phone_in_talk_sharp), + Icon(ZetaIcons.phone_sharp), + Icon(ZetaIcons.priority_sharp), + Icon(ZetaIcons.qr_code_sharp), + Icon(ZetaIcons.qr_code_scan_sharp), + Icon(ZetaIcons.rss_feed_sharp), + Icon(ZetaIcons.sd_card_sharp), + Icon(ZetaIcons.sim_card_sharp), + Icon(ZetaIcons.sms_sharp), + Icon(ZetaIcons.sync_disabled_sharp), + Icon(ZetaIcons.sync_sharp), + Icon(ZetaIcons.add_box_sharp), + Icon(ZetaIcons.add_circle_outline_sharp), + Icon(ZetaIcons.add_circle_sharp), + Icon(ZetaIcons.add_sharp), + Icon(ZetaIcons.analysis_sharp), + Icon(ZetaIcons.android_sharp), + Icon(ZetaIcons.backspace_sharp), + Icon(ZetaIcons.block_content_sharp), + Icon(ZetaIcons.clear_sharp), + Icon(ZetaIcons.content_sharp), + Icon(ZetaIcons.copy_file_sharp), + Icon(ZetaIcons.create_sharp), + Icon(ZetaIcons.filter_list_sharp), + Icon(ZetaIcons.flag_sharp), + Icon(ZetaIcons.link_content_sharp), + Icon(ZetaIcons.mail_sharp), + Icon(ZetaIcons.push_pin_sharp), + Icon(ZetaIcons.redo_sharp), + Icon(ZetaIcons.remove_box_sharp), + Icon(ZetaIcons.remove_circle_outline_sharp), + Icon(ZetaIcons.remove_circle_sharp), + Icon(ZetaIcons.remove_sharp), + Icon(ZetaIcons.reply_sharp), + Icon(ZetaIcons.save_alt_sharp), + Icon(ZetaIcons.save_sharp), + Icon(ZetaIcons.send_sharp), + Icon(ZetaIcons.sort_sharp), + Icon(ZetaIcons.undo_sharp), + Icon(ZetaIcons.antenna_sharp), + Icon(ZetaIcons.battery_alert_sharp), + Icon(ZetaIcons.battery_charging_sharp), + Icon(ZetaIcons.battery_sharp), + Icon(ZetaIcons.bluetooth_disabled_sharp), + Icon(ZetaIcons.bluetooth_sharp), + Icon(ZetaIcons.bluetooth_searching_sharp), + Icon(ZetaIcons.brightness_sharp), + Icon(ZetaIcons.cellular_signal_sharp), + Icon(ZetaIcons.chain_sharp), + Icon(ZetaIcons.contrast_sharp), + Icon(ZetaIcons.dark_mode_sharp), + Icon(ZetaIcons.devices_sharp), + Icon(ZetaIcons.ethernet_sharp), + Icon(ZetaIcons.flight_mode_sharp), + Icon(ZetaIcons.hdmi_sharp), + Icon(ZetaIcons.light_mode_sharp), + Icon(ZetaIcons.location_point_sharp), + Icon(ZetaIcons.location_sharp), + Icon(ZetaIcons.mobile_friendly_sharp), + Icon(ZetaIcons.network_signal_sharp), + Icon(ZetaIcons.nfc_sharp), + Icon(ZetaIcons.night_sharp), + Icon(ZetaIcons.restart_alt_sharp), + Icon(ZetaIcons.screen_rotation_sharp), + Icon(ZetaIcons.uhf_rfid_sharp), + Icon(ZetaIcons.usb_alt_device_sharp), + Icon(ZetaIcons.usb_alt_sharp), + Icon(ZetaIcons.usb_sharp), + Icon(ZetaIcons.volte_sharp), + Icon(ZetaIcons.appgallery_sharp), + Icon(ZetaIcons.application_analytics_sharp), + Icon(ZetaIcons.asset_tracker_lite_sharp), + Icon(ZetaIcons.blood_bag_plus_sharp), + Icon(ZetaIcons.bluetooth_management_sharp), + Icon(ZetaIcons.browser_print_sharp), + Icon(ZetaIcons.cloud_connect_sharp), + Icon(ZetaIcons.data_wedge_sharp), + Icon(ZetaIcons.design_tools_sharp), + Icon(ZetaIcons.device_tracker_sharp), + Icon(ZetaIcons.direct_connect_sharp), + Icon(ZetaIcons.emdk_sharp), + Icon(ZetaIcons.enterprise_browser_sharp), + Icon(ZetaIcons.enterprise_connectors_sharp), + Icon(ZetaIcons.enterprise_keyboard_sharp), + Icon(ZetaIcons.gms_restricted_mode_sharp), + Icon(ZetaIcons.intelligent_document_capture_sharp), + Icon(ZetaIcons.label_plus_sharp), + Icon(ZetaIcons.life_guard_sharp), + Icon(ZetaIcons.link_os_sharp), + Icon(ZetaIcons.mdm_connectors_sharp), + Icon(ZetaIcons.mdm_toolkit_sharp), + Icon(ZetaIcons.mobility_dna_sharp), + Icon(ZetaIcons.mobility_security_sharp), + Icon(ZetaIcons.multi_code_data_formatting_sharp), + Icon(ZetaIcons.mx_sharp), + Icon(ZetaIcons.ocr_sharp), + Icon(ZetaIcons.oem_config_sharp), + Icon(ZetaIcons.pairing_solutions_sharp), + Icon(ZetaIcons.pdf_direct_sharp), + Icon(ZetaIcons.power_precision_sharp), + Icon(ZetaIcons.preferred_symbol_sharp), + Icon(ZetaIcons.print_secure_sharp), + Icon(ZetaIcons.print_station_sharp), + Icon(ZetaIcons.printer_profile_manager_sharp), + Icon(ZetaIcons.przm_sharp), + Icon(ZetaIcons.remote_control_sharp), + Icon(ZetaIcons.remote_diagnostics_sharp), + Icon(ZetaIcons.remote_management_sharp), + Icon(ZetaIcons.rx_sharp), + Icon(ZetaIcons.scan_and_pair_sharp), + Icon(ZetaIcons.scan_speed_analytics_sharp), + Icon(ZetaIcons.scan_to_connect_sharp), + Icon(ZetaIcons.scanner_control_application_sharp), + Icon(ZetaIcons.setting_tool_sharp), + Icon(ZetaIcons.simulscan_sharp), + Icon(ZetaIcons.smart_te_lite_sharp), + Icon(ZetaIcons.smart_te_sharp), + Icon(ZetaIcons.smart_tek_sharp), + Icon(ZetaIcons.smartdex_sharp), + Icon(ZetaIcons.stagenow_sharp), + Icon(ZetaIcons.swipe_assist_sharp), + Icon(ZetaIcons.tekspeech_pro_sharp), + Icon(ZetaIcons.virtual_devices_sharp), + Icon(ZetaIcons.virtual_tether_sharp), + Icon(ZetaIcons.visibility_services_sharp), + Icon(ZetaIcons.voice_wedge_sharp), + Icon(ZetaIcons.workforce_connect_sharp), + Icon(ZetaIcons.workstation_connect_sharp), + Icon(ZetaIcons.zebra_designer_sharp), + Icon(ZetaIcons.zebra_onecare_sharp), + Icon(ZetaIcons.zebra_setup_utility_sharp), + Icon(ZetaIcons.zero_touch_sharp), + Icon(ZetaIcons.align_center_sharp), + Icon(ZetaIcons.align_horizontal_center_sharp), + Icon(ZetaIcons.align_horizontal_left_sharp), + Icon(ZetaIcons.align_horizontal_right_sharp), + Icon(ZetaIcons.align_left_sharp), + Icon(ZetaIcons.align_right_sharp), + Icon(ZetaIcons.align_vertical_bottom_sharp), + Icon(ZetaIcons.align_vertical_center_sharp), + Icon(ZetaIcons.align_vertical_top_sharp), + Icon(ZetaIcons.attach_sharp), + Icon(ZetaIcons.bold_sharp), + Icon(ZetaIcons.bullet_list_sharp), + Icon(ZetaIcons.checklist_sharp), + Icon(ZetaIcons.color_fill_sharp), + Icon(ZetaIcons.distribute_horizontal_sharp), + Icon(ZetaIcons.distribute_vertical_sharp), + Icon(ZetaIcons.edit_border_sharp), + Icon(ZetaIcons.edit_sharp), + Icon(ZetaIcons.font_size_decrease_sharp), + Icon(ZetaIcons.font_size_increase_sharp), + Icon(ZetaIcons.format_shapes_sharp), + Icon(ZetaIcons.indent_decrease_sharp), + Icon(ZetaIcons.indent_increase_sharp), + Icon(ZetaIcons.italic_sharp), + Icon(ZetaIcons.justify_sharp), + Icon(ZetaIcons.line_spacing_sharp), + Icon(ZetaIcons.link_sharp), + Icon(ZetaIcons.no_color_sharp), + Icon(ZetaIcons.numbered_list_sharp), + Icon(ZetaIcons.strikethrough_sharp), + Icon(ZetaIcons.text_color_sharp), + Icon(ZetaIcons.type_sharp), + Icon(ZetaIcons.underline_sharp), + Icon(ZetaIcons.barcode_bluetooth_sharp), + Icon(ZetaIcons.barcode_done_sharp), + Icon(ZetaIcons.barcode_image_scan_sharp), + Icon(ZetaIcons.barcode_qr_code_sharp), + Icon(ZetaIcons.barcode_sharp), + Icon(ZetaIcons.barcode_scanner_down_sharp), + Icon(ZetaIcons.barcode_settings_sharp), + Icon(ZetaIcons.calculator_sharp), + Icon(ZetaIcons.card_orientation_sharp), + Icon(ZetaIcons.card_with_chip_sharp), + Icon(ZetaIcons.certificate_sharp), + Icon(ZetaIcons.choices_sharp), + Icon(ZetaIcons.contactless_pay_sharp), + Icon(ZetaIcons.credit_card_swipe_sharp), + Icon(ZetaIcons.eas_sharp), + Icon(ZetaIcons.enterprise_diagnostics_sharp), + Icon(ZetaIcons.environmental_sharp), + Icon(ZetaIcons.factory_sharp), + Icon(ZetaIcons.freezer_sharp), + Icon(ZetaIcons.issue_audit_sharp), + Icon(ZetaIcons.performance_sharp), + Icon(ZetaIcons.planogram_sharp), + Icon(ZetaIcons.productivity_apps_sharp), + Icon(ZetaIcons.receipt_sharp), + Icon(ZetaIcons.retail_sharp), + Icon(ZetaIcons.road_map_sharp), + Icon(ZetaIcons.rules_sharp), + Icon(ZetaIcons.scan_rate_sharp), + Icon(ZetaIcons.shape_recognition_sharp), + Icon(ZetaIcons.solutions_sharp), + Icon(ZetaIcons.steps_sharp), + Icon(ZetaIcons.strategy_sharp), + Icon(ZetaIcons.tap_to_pay_sharp), + Icon(ZetaIcons.zero_scale_sharp), + Icon(ZetaIcons.attachment_sharp), + Icon(ZetaIcons.cloud_done_sharp), + Icon(ZetaIcons.cloud_download_sharp), + Icon(ZetaIcons.cloud_off_sharp), + Icon(ZetaIcons.cloud_outline_sharp), + Icon(ZetaIcons.cloud_sharp), + Icon(ZetaIcons.cloud_upload_sharp), + Icon(ZetaIcons.create_new_folder_sharp), + Icon(ZetaIcons.doc_attach_sharp), + Icon(ZetaIcons.downloading_sharp), + Icon(ZetaIcons.file_download_sharp), + Icon(ZetaIcons.file_upload_sharp), + Icon(ZetaIcons.finished_download_sharp), + Icon(ZetaIcons.folder_outline_sharp), + Icon(ZetaIcons.folder_sharp), + Icon(ZetaIcons.grid_view_sharp), + Icon(ZetaIcons.jpg_attach_sharp), + Icon(ZetaIcons.pdf_attach_sharp), + Icon(ZetaIcons.png_attach_sharp), + Icon(ZetaIcons.ppt_attach_sharp), + Icon(ZetaIcons.shared_folder_sharp), + Icon(ZetaIcons.upload_file_sharp), + Icon(ZetaIcons.cast_connected_sharp), + Icon(ZetaIcons.cast_sharp), + Icon(ZetaIcons.desktop_sharp), + Icon(ZetaIcons.device_settings_sharp), + Icon(ZetaIcons.devices_ecosystem_sharp), + Icon(ZetaIcons.headphones_sharp), + Icon(ZetaIcons.keyboard_sharp), + Icon(ZetaIcons.laptop_sharp), + Icon(ZetaIcons.memory_sharp), + Icon(ZetaIcons.monitor_sharp), + Icon(ZetaIcons.phone_android_sharp), + Icon(ZetaIcons.phone_iphone_sharp), + Icon(ZetaIcons.phonelink_sharp), + Icon(ZetaIcons.printer_sharp), + Icon(ZetaIcons.scanner_sharp), + Icon(ZetaIcons.security_sharp), + Icon(ZetaIcons.smart_phone_sharp), + Icon(ZetaIcons.speaker_sharp), + Icon(ZetaIcons.tablet_mac_sharp), + Icon(ZetaIcons.tablet_sharp), + Icon(ZetaIcons.tv_sharp), + Icon(ZetaIcons.video_play_sharp), + Icon(ZetaIcons.watch_sharp), + Icon(ZetaIcons.adjustments_sharp), + Icon(ZetaIcons.auto_sharp), + Icon(ZetaIcons.awb_sharp), + Icon(ZetaIcons.camera_sharp), + Icon(ZetaIcons.camera_shutter_sharp), + Icon(ZetaIcons.contrast_image_sharp), + Icon(ZetaIcons.crop_sharp), + Icon(ZetaIcons.eye_dropper_sharp), + Icon(ZetaIcons.flip_camera_sharp), + Icon(ZetaIcons.grid_off_sharp), + Icon(ZetaIcons.grid_on_sharp), + Icon(ZetaIcons.hdr_sharp), + Icon(ZetaIcons.image_library_sharp), + Icon(ZetaIcons.image_sharp), + Icon(ZetaIcons.iso_sharp), + Icon(ZetaIcons.portrait_sharp), + Icon(ZetaIcons.pro_sharp), + Icon(ZetaIcons.rotate_left_sharp), + Icon(ZetaIcons.rotate_right_sharp), + Icon(ZetaIcons.slide_show_sharp), + Icon(ZetaIcons.straighten_sharp), + Icon(ZetaIcons.timer_sharp), + Icon(ZetaIcons.visibility_image_sharp), + Icon(ZetaIcons.visibility_off_image_sharp), + Icon(ZetaIcons.wb_image_sharp), + Icon(ZetaIcons.wb_sharp), + Icon(ZetaIcons.bus_sharp), + Icon(ZetaIcons.cafe_sharp), + Icon(ZetaIcons.car_sharp), + Icon(ZetaIcons.flight_sharp), + Icon(ZetaIcons.layers_sharp), + Icon(ZetaIcons.light_rail_train_sharp), + Icon(ZetaIcons.local_shipping_sharp), + Icon(ZetaIcons.map_sharp), + Icon(ZetaIcons.my_location_sharp), + Icon(ZetaIcons.navigation_sharp), + Icon(ZetaIcons.near_me_sharp), + Icon(ZetaIcons.offer_sharp), + Icon(ZetaIcons.place_sharp), + Icon(ZetaIcons.ship_sharp), + Icon(ZetaIcons.taxi_sharp), + Icon(ZetaIcons.train_sharp), + Icon(ZetaIcons.world_sharp), + Icon(ZetaIcons.zoom_in_map_sharp), + Icon(ZetaIcons.zoom_out_map_sharp), + Icon(ZetaIcons.apps_sharp), + Icon(ZetaIcons.arrow_back_sharp), + Icon(ZetaIcons.arrow_down_sharp), + Icon(ZetaIcons.arrow_forward_sharp), + Icon(ZetaIcons.arrow_up_sharp), + Icon(ZetaIcons.cancel_outline_sharp), + Icon(ZetaIcons.cancel_sharp), + Icon(ZetaIcons.caret_down_sharp), + Icon(ZetaIcons.caret_left_sharp), + Icon(ZetaIcons.caret_right_sharp), + Icon(ZetaIcons.caret_sort_sharp), + Icon(ZetaIcons.caret_up_sharp), + Icon(ZetaIcons.check_sharp), + Icon(ZetaIcons.chevron_left_sharp), + Icon(ZetaIcons.chevron_right_sharp), + Icon(ZetaIcons.close_sharp), + Icon(ZetaIcons.columns_sharp), + Icon(ZetaIcons.dashboard_sharp), + Icon(ZetaIcons.drop_down_circle_sharp), + Icon(ZetaIcons.expand_less_sharp), + Icon(ZetaIcons.expand_more_sharp), + Icon(ZetaIcons.first_page_sharp), + Icon(ZetaIcons.full_screen_exit_sharp), + Icon(ZetaIcons.full_screen_sharp), + Icon(ZetaIcons.hamburger_menu_navigation_rail_sharp), + Icon(ZetaIcons.hamburger_menu_sharp), + Icon(ZetaIcons.hamburger_menu_thick_sharp), + Icon(ZetaIcons.help_outline_sharp), + Icon(ZetaIcons.help_sharp), + Icon(ZetaIcons.last_page_sharp), + Icon(ZetaIcons.list_alt_sharp), + Icon(ZetaIcons.list_sharp), + Icon(ZetaIcons.more_horizontal_sharp), + Icon(ZetaIcons.more_vertical_sharp), + Icon(ZetaIcons.refresh_sharp), + Icon(ZetaIcons.unfold_less_sharp), + Icon(ZetaIcons.unfold_more_sharp), + Icon(ZetaIcons.add_group_sharp), + Icon(ZetaIcons.add_person_sharp), + Icon(ZetaIcons.bad_mood_sharp), + Icon(ZetaIcons.blog_sharp), + Icon(ZetaIcons.dislike_sharp), + Icon(ZetaIcons.facebook_sharp), + Icon(ZetaIcons.group_sharp), + Icon(ZetaIcons.groups_sharp), + Icon(ZetaIcons.happy_sharp), + Icon(ZetaIcons.instagram_sharp), + Icon(ZetaIcons.ios_share_sharp), + Icon(ZetaIcons.like_sharp), + Icon(ZetaIcons.linkedin_sharp), + Icon(ZetaIcons.medium_sharp), + Icon(ZetaIcons.notifications_active_sharp), + Icon(ZetaIcons.notifications_outline_sharp), + Icon(ZetaIcons.notifications_sharp), + Icon(ZetaIcons.person_outline_sharp), + Icon(ZetaIcons.person_sharp), + Icon(ZetaIcons.remove_group_sharp), + Icon(ZetaIcons.remove_person_sharp), + Icon(ZetaIcons.sad_sharp), + Icon(ZetaIcons.satisfied_sharp), + Icon(ZetaIcons.share_sharp), + Icon(ZetaIcons.switch_user_sharp), + Icon(ZetaIcons.twitter_sharp), + Icon(ZetaIcons.very_satisfied_sharp), + Icon(ZetaIcons.world_map_sharp), + Icon(ZetaIcons.youtube_sharp), + Icon(ZetaIcons.check_box_empty_sharp), + Icon(ZetaIcons.check_box_sharp), + Icon(ZetaIcons.indeterminate_check_box_sharp), + Icon(ZetaIcons.radio_button_checked_sharp), + Icon(ZetaIcons.radio_button_unchecked_sharp), + Icon(ZetaIcons.star_half_sharp), + Icon(ZetaIcons.star_outline_sharp), + Icon(ZetaIcons.star_sharp), + Icon(ZetaIcons.toggle_off_sharp), + Icon(ZetaIcons.toggle_on_sharp), + ], + ), + ], + ), + ), + ); + } +} diff --git a/example/lib/pages/components/accordion_example.dart b/example/lib/pages/components/accordion_example.dart new file mode 100644 index 00000000..b23587c8 --- /dev/null +++ b/example/lib/pages/components/accordion_example.dart @@ -0,0 +1,93 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class AccordionExample extends StatelessWidget { + static const String name = 'Accordion'; + + const AccordionExample({super.key}); + + @override + Widget build(BuildContext context) { + return ExampleScaffold( + name: AccordionExample.name, + child: SingleChildScrollView( + padding: EdgeInsets.all(ZetaSpacing.s), + child: Column( + children: [ + Text('Rounded Divider'), + const SizedBox(height: 20), + ZetaAccordion( + title: 'title', + child: Column( + children: [ + ListTile(title: Text('List Item')), + ListTile(title: Text('List Item')), + ListTile(title: Text('List Item')), + ], + ), + ), + ZetaAccordion(title: 'title'), + const SizedBox(height: 40), + Text('Rounded Contained'), + const SizedBox(height: 20), + ZetaAccordion( + contained: true, + title: 'title', + child: Column( + children: [ + ListTile(title: Text('List Item')), + ListTile(title: Text('List Item')), + ListTile(title: Text('List Item')), + ], + ), + ), + ZetaAccordion( + contained: true, + title: 'title', + ), + const SizedBox(height: 40), + Text('Sharp Divider'), + const SizedBox(height: 20), + ZetaAccordion( + contained: false, + title: 'title', + rounded: false, + child: Column( + children: [ + ListTile(title: Text('List Item')), + ListTile(title: Text('List Item')), + ListTile(title: Text('List Item')), + ], + ), + ), + ZetaAccordion( + contained: false, + title: 'title', + rounded: false, + ), + Text('Sharp Contained'), + const SizedBox(height: 20), + ZetaAccordion( + contained: true, + title: 'title', + rounded: false, + child: Column( + children: [ + ListTile(title: Text('List Item')), + ListTile(title: Text('List Item')), + ListTile(title: Text('List Item')), + ], + ), + ), + ZetaAccordion( + contained: true, + title: 'title', + rounded: false, + ), + ].divide(const SizedBox.square(dimension: 10)).toList(), + ), + ), + ); + } +} diff --git a/example/lib/pages/components/avatar_example.dart b/example/lib/pages/components/avatar_example.dart new file mode 100644 index 00000000..39f42a8f --- /dev/null +++ b/example/lib/pages/components/avatar_example.dart @@ -0,0 +1,595 @@ +import 'package:cached_network_image/cached_network_image.dart'; +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class AvatarExample extends StatelessWidget { + static const String name = 'Avatar'; + + const AvatarExample({super.key}); + + @override + Widget build(BuildContext context) { + final Widget image = CachedNetworkImage( + imageUrl: "https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg", + placeholder: (context, url) => Icon(ZetaIcons.user_round), + errorWidget: (context, url, error) => Icon(Icons.error), + fit: BoxFit.cover, + ); + + return ExampleScaffold( + name: AvatarExample.name, + child: SingleChildScrollView( + padding: EdgeInsets.all(ZetaSpacing.s), + child: Column( + children: [ + Column( + children: [ + Text( + 'ZetaAvatar.image', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), + ), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image(size: size), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.initials', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), + ), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 15), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + borderColor: Zeta.of(context).colors.green, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.image with badge', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), + ), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + upperBadge: ZetaIndicator.notification(value: 3), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaIndicator.notification(value: 3), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + upperBadge: ZetaIndicator.notification(value: 3), + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaIndicator.notification(value: 3), + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.initials with badge', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), + ), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + upperBadge: ZetaIndicator.notification(value: 3), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaIndicator.notification(value: 3), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.image with special status', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), + ), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + lowerBadge: ZetaIndicator.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + lowerBadge: ZetaIndicator.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + lowerBadge: ZetaIndicator.icon(), + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + borderColor: Zeta.of(context).colors.green, + lowerBadge: ZetaIndicator.icon(), + image: image, + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar.initials with special status', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), + ), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + lowerBadge: ZetaIndicator.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + borderColor: Zeta.of(context).colors.green, + lowerBadge: ZetaIndicator.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + Column( + children: [ + Text( + 'ZetaAvatar with notification badge and status badge', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + children: [ + Column( + children: ZetaAvatarSize.values.map((size) { + final height = size.pixelSize; + final padding = (height - 14) / 2; + return Column( + children: [ + SizedBox( + height: height, + child: Padding( + padding: EdgeInsets.only(top: padding), + child: Text(size.name.toUpperCase()), + ), + ), + const SizedBox(height: 20), + ], + ); + }).toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + image: image, + upperBadge: ZetaIndicator.notification(value: 3), + lowerBadge: ZetaIndicator.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.image( + size: size, + image: image, + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaIndicator.notification(value: 3), + lowerBadge: ZetaIndicator.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + upperBadge: ZetaIndicator.notification(value: 3), + lowerBadge: ZetaIndicator.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + const SizedBox(width: 12), + Column( + children: ZetaAvatarSize.values + .map((size) => Column( + children: [ + ZetaAvatar.initials( + size: size, + initials: 'AB', + borderColor: Zeta.of(context).colors.green, + upperBadge: ZetaIndicator.notification(value: 3), + lowerBadge: ZetaIndicator.icon(), + ), + const SizedBox(height: 20), + ], + )) + .toList(), + ), + ], + ), + ], + ), + ].divide(const SizedBox(height: ZetaSpacing.x6)).toList(), + ), + ), + ); + } +} + +extension on ZetaAvatarSize { + double get pixelSize { + switch (this) { + case ZetaAvatarSize.xl: + return ZetaSpacing.x16; + case ZetaAvatarSize.l: + return ZetaSpacing.x12; + case ZetaAvatarSize.m: + return ZetaSpacing.x10; + case ZetaAvatarSize.s: + return ZetaSpacing.x8; + case ZetaAvatarSize.xs: + return ZetaSpacing.x6; + } + } +} diff --git a/example/lib/pages/components/badges_example.dart b/example/lib/pages/components/badges_example.dart new file mode 100644 index 00000000..76d28534 --- /dev/null +++ b/example/lib/pages/components/badges_example.dart @@ -0,0 +1,265 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class BadgesExample extends StatelessWidget { + static const String name = 'Badges'; + + const BadgesExample({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return ExampleScaffold( + name: BadgesExample.name, + child: SingleChildScrollView( + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + _DividingText('Status Label'), + _StatusLabel(), + _DividingText('Priority Pill'), + _PriorityPill(), + _DividingText('Badge'), + _Badge(), + _DividingText('Indicators'), + _Indicators(), + _DividingText('Tags'), + _Tags(), + _DividingText('WorkCloud indicators'), + _WorkcloudIndicators(), + ], + ), + ), + ); + } +} + +class _DividingText extends StatelessWidget { + final String text; + const _DividingText(this.text); + + @override + Widget build(BuildContext context) { + return Text( + text, + style: ZetaTextStyles.displayMedium, + ).paddingVertical(ZetaSpacing.l); + } +} + +class _StatusLabel extends StatelessWidget { + const _StatusLabel(); + + Widget statusLabelExampleRow(ZetaWidgetStatus type) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + ZetaStatusLabel(label: 'Label', status: type, rounded: false), + ZetaStatusLabel(label: 'Label', status: type, rounded: true), + ], + ); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + statusLabelExampleRow(ZetaWidgetStatus.neutral), + statusLabelExampleRow(ZetaWidgetStatus.info), + statusLabelExampleRow(ZetaWidgetStatus.positive), + statusLabelExampleRow(ZetaWidgetStatus.warning), + statusLabelExampleRow(ZetaWidgetStatus.negative), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ); + } +} + +class _PriorityPill extends StatelessWidget { + const _PriorityPill(); + + @override + Widget build(BuildContext context) { + return Row( + mainAxisSize: MainAxisSize.min, + children: [ + ZetaPriorityPill(index: 1000, priority: 'Rounded', rounded: true), + ZetaPriorityPill(index: 2, priority: 'Sharp', rounded: false), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ); + } +} + +class _Badge extends StatelessWidget { + const _Badge(); + + Widget badgeExampleRow(ZetaWidgetStatus type) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + crossAxisAlignment: CrossAxisAlignment.center, + children: [ + ZetaBadge(label: 'Label', status: type, rounded: false), + ZetaBadge(label: 'Label', status: type), + ], + ); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + badgeExampleRow(ZetaWidgetStatus.info), + badgeExampleRow(ZetaWidgetStatus.positive), + badgeExampleRow(ZetaWidgetStatus.warning), + badgeExampleRow(ZetaWidgetStatus.negative), + badgeExampleRow(ZetaWidgetStatus.neutral), + ].divide(const SizedBox(height: ZetaSpacing.m)).toList(), + ); + } +} + +class _Indicators extends StatelessWidget { + const _Indicators(); + + @override + Widget build(BuildContext context) { + return Row( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + children: [ + Text( + 'ZetaIndicator.icon', + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 15), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + ZetaIndicator.icon(), + ZetaIndicator.icon(size: ZetaWidgetSize.medium), + ZetaIndicator.icon(size: ZetaWidgetSize.small), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ), + Row( + children: [ + ZetaIndicator.icon(inverse: true), + ZetaIndicator.icon(size: ZetaWidgetSize.medium, inverse: true), + ZetaIndicator.icon(size: ZetaWidgetSize.small, inverse: true), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ), + ].divide(const SizedBox.square(dimension: ZetaSpacing.xs)).toList(), + ), + const SizedBox(width: 50), + ], + ), + ], + ), + const SizedBox.square(dimension: ZetaSpacing.xl), + Column( + children: [ + Text('ZetaIndicator.notification', style: TextStyle(fontWeight: FontWeight.bold)), + const SizedBox(height: 15), + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Row( + children: [ + ZetaIndicator.notification(value: 3), + ZetaIndicator.notification(size: ZetaWidgetSize.medium, value: 3), + ZetaIndicator.notification(size: ZetaWidgetSize.small), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ), + Row( + children: [ + ZetaIndicator.notification(value: 3, inverse: true), + ZetaIndicator.notification(size: ZetaWidgetSize.medium, value: 3, inverse: true), + ZetaIndicator.notification(size: ZetaWidgetSize.small, inverse: true), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ), + ].divide(const SizedBox.square(dimension: ZetaSpacing.s)).toList(), + ), + ], + ), + ], + ), + ], + ); + } +} + +class _Tags extends StatelessWidget { + const _Tags(); + + @override + Widget build(BuildContext context) { + return SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + ZetaTag.left(label: 'Sharp', rounded: false), + ZetaTag.right(label: 'Sharp', rounded: false), + ZetaTag.left(label: 'Rounded'), + ZetaTag.right(label: 'Rounded'), + ].divide(SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ), + ); + } +} + +class _WorkcloudIndicators extends StatelessWidget { + const _WorkcloudIndicators(); + + Widget workcloudIndicatorExampleRow(ZetaWorkcloudIndicatorType type) { + return Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + ZetaWorkcloudIndicator( + priorityType: type, + prioritySize: ZetaWidgetSize.large, + icon: ZetaIcons.star_half_round, + label: 'Label', + ), + ZetaWorkcloudIndicator( + prioritySize: ZetaWidgetSize.medium, + index: '14', + priorityType: type, + label: 'Label!', + ), + ZetaWorkcloudIndicator( + priorityType: type, + ), + ], + ); + } + + @override + Widget build(BuildContext context) { + return Column( + children: [ + SizedBox(height: 30), + Column( + children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [Text('Medium'), Text('Small'), Text('X-Small')], + ), + ...List.generate(10, (index) { + return workcloudIndicatorExampleRow(ZetaWorkcloudIndicatorType.values[index]); + }), + ].divide(const SizedBox.square(dimension: ZetaSpacing.s)).toList(), + ).paddingAll(ZetaSpacing.m) + ], + ); + } +} diff --git a/example/lib/pages/components/banner_example.dart b/example/lib/pages/components/banner_example.dart new file mode 100644 index 00000000..b6513599 --- /dev/null +++ b/example/lib/pages/components/banner_example.dart @@ -0,0 +1,198 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class BannerExample extends StatelessWidget { + static const String name = 'Banner'; + + const BannerExample({Key? key}) : super(key: key); + + @override + Widget build(BuildContext context) { + return ExampleScaffold( + name: BannerExample.name, + child: SingleChildScrollView( + child: Padding( + padding: EdgeInsets.all(20), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text('System Banner', style: ZetaTextStyles.displayMedium), + _getTitle('Style variants'), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + title: 'Centered', + context: context, + titleStart: true, + leadingIcon: ZetaIcons.info_round, + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + context: context, + title: 'Title Left', + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + context: context, + title: 'Title left with arrow', + titleStart: true, + trailing: Icon(ZetaIcons.chevron_right_round), + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + title: 'Title left + Icon', + titleStart: true, + context: context, + leadingIcon: ZetaIcons.info_round, + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.primary, + context: context, + title: 'Title left + Icon with Arrow', + titleStart: true, + leadingIcon: ZetaIcons.info_round, + trailing: IconButton( + icon: Icon(ZetaIcons.chevron_right_round), + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + title: 'Title', + context: context, + type: ZetaSystemBannerStatus.primary, + trailing: IconButton( + icon: Icon(ZetaIcons.close_round), + onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), + ), + )); + }, + ), + ), + _getTitle('Color variants'), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.positive, + context: context, + title: 'Centered', + titleStart: true, + leadingIcon: ZetaIcons.info_round, + trailing: IconButton( + icon: Icon(ZetaIcons.chevron_right_round), + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + title: 'Title', + context: context, + type: ZetaSystemBannerStatus.positive, + trailing: IconButton( + icon: Icon(ZetaIcons.close_round), + onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), + ), + )); + }, + ), + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.warning, + title: 'Centered', + context: context, + titleStart: true, + leadingIcon: ZetaIcons.info_round, + trailing: IconButton( + icon: Icon(ZetaIcons.chevron_right_round), + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + title: 'Title', + context: context, + type: ZetaSystemBannerStatus.warning, + trailing: IconButton( + icon: Icon(ZetaIcons.close_round), + onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), + ), + )); + }, + ), + ), + ZetaSystemBanner( + type: ZetaSystemBannerStatus.negative, + title: 'Centered', + context: context, + titleStart: true, + leadingIcon: ZetaIcons.info_round, + trailing: IconButton( + icon: Icon(ZetaIcons.chevron_right_round), + onPressed: () { + ScaffoldMessenger.of(context).showMaterialBanner(ZetaSystemBanner( + title: 'Title', + context: context, + type: ZetaSystemBannerStatus.negative, + trailing: IconButton( + icon: Icon(ZetaIcons.close_round), + onPressed: () => ScaffoldMessenger.of(context).clearMaterialBanners(), + ), + )); + }, + ), + ), + const Divider(), + Text('In-Page Banner', style: ZetaTextStyles.displayMedium), + ZetaInPageBanner( + content: Text(_content), + status: ZetaWidgetStatus.info, + ), + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: ZetaWidgetStatus.positive, + title: 'Banner Title', + rounded: false, + ), + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: ZetaWidgetStatus.warning, + title: 'Banner Title', + actions: [ZetaButton(label: 'Button', onPressed: () {})], + ), + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: ZetaWidgetStatus.negative, + title: 'Banner Title Banner Title Banner Title Banner Title', + rounded: false, + ), + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + status: ZetaWidgetStatus.neutral, + title: 'Banner Title', + ) + ].divide(const SizedBox(height: 10)).toList(), + ), + ), + ), + ); + } + + final _content = 'Lorem ipsum dolor sit amet, conse ctetur cididunt ut' + 'labore et do lore magna aliqua.'; + + Widget _getTitle(String title) => Container(height: 50, child: Center(child: Text(title))); + + Column buildExampleBannerColumn( + ZetaWidgetStatus status, { + bool rounded = true, + IconData? customIcon, + }) { + return Column( + mainAxisAlignment: MainAxisAlignment.spaceAround, + mainAxisSize: MainAxisSize.min, + children: [ + ZetaInPageBanner( + content: Text(_content), + onClose: () {}, + rounded: rounded, + status: status, + title: 'Banner Title', + customIcon: customIcon, + ), + ], + ); + } +} diff --git a/example/lib/pages/components/bottom_sheet_example.dart b/example/lib/pages/components/bottom_sheet_example.dart new file mode 100644 index 00000000..1cc6fa0f --- /dev/null +++ b/example/lib/pages/components/bottom_sheet_example.dart @@ -0,0 +1,83 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class BottomSheetExample extends StatefulWidget { + static const String name = 'BottomSheet'; + + const BottomSheetExample({super.key}); + + @override + State createState() => _BottomSheetExampleState(); +} + +class _BottomSheetExampleState extends State { + bool centerTitle = true; + + @override + Widget build(BuildContext context) { + return ExampleScaffold( + name: BottomSheetExample.name, + child: SingleChildScrollView( + padding: EdgeInsets.all(ZetaSpacing.s), + child: Column( + children: [ + ZetaMenuItem.horizontal( + label: Text('Grid'), + onTap: () { + showModalBottomSheet( + context: context, + builder: (BuildContext context) { + return ZetaBottomSheet( + title: 'Bottom Sheet', + centerTitle: centerTitle, + body: Wrap( + spacing: 12, + runSpacing: 12, + children: List.generate( + 6, + (index) => ZetaMenuItem.vertical( + label: Text('Menu Item'), + icon: Icon(ZetaIcons.star_round), + onTap: () {}, + ), + ), + ), + ); + }, + ); + }, + ), + ZetaMenuItem.horizontal( + label: Text('Horizontal'), + onTap: () { + showZetaBottomSheet( + context: context, + title: 'Bottom Sheet', + centerTitle: centerTitle, + body: Wrap( + spacing: 12, + runSpacing: 12, + children: List.generate( + 6, + (index) => ZetaMenuItem.horizontal( + label: Text('Menu Item'), + onTap: () {}, + leading: Icon(ZetaIcons.star_round), + ), + ), + ), + ); + }, + ), + ZetaCheckbox( + label: 'Center title', + value: centerTitle, + onChanged: (value) => setState(() => centerTitle = !centerTitle), + ), + ], + ), + ), + ); + } +} diff --git a/example/lib/pages/components/button_example.dart b/example/lib/pages/components/button_example.dart new file mode 100644 index 00000000..c99d80e6 --- /dev/null +++ b/example/lib/pages/components/button_example.dart @@ -0,0 +1,139 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class ButtonExample extends StatefulWidget { + static const String name = 'Button'; + + const ButtonExample({super.key}); + + @override + State createState() => _ButtonExampleState(); +} + +class _ButtonExampleState extends State { + Widget? fab; + late ScrollController _scrollController; + + @override + void initState() { + super.initState(); + _scrollController = ScrollController(); + } + + @override + void dispose() { + _scrollController.dispose(); + super.dispose(); + } + + void setFab(int index) => setState(() => fab = fabs[index]); + + List fabs = []; + @override + Widget build(BuildContext context) { + if (fabs.isEmpty) { + fabs = [ + ZetaFAB( + scrollController: _scrollController, + label: 'Small Circle Primary', + size: ZetaFabSize.small, + shape: ZetaWidgetBorder.full, + type: ZetaFabType.primary, + onPressed: () => setFab(0), + ), + ZetaFAB( + scrollController: _scrollController, + label: 'Small Rounded Primary', + size: ZetaFabSize.small, + shape: ZetaWidgetBorder.rounded, + type: ZetaFabType.secondary, + onPressed: () => setFab(1), + ), + ZetaFAB( + scrollController: _scrollController, + label: 'Small Sharp Primary', + size: ZetaFabSize.small, + shape: ZetaWidgetBorder.sharp, + type: ZetaFabType.inverse, + onPressed: () => setFab(2), + ), + ZetaFAB( + scrollController: _scrollController, + label: 'Large Circle Primary', + size: ZetaFabSize.large, + shape: ZetaWidgetBorder.full, + type: ZetaFabType.secondary, + onPressed: () => setFab(3), + ), + ZetaFAB( + scrollController: _scrollController, + label: 'Large Rounded Secondary', + size: ZetaFabSize.large, + shape: ZetaWidgetBorder.rounded, + type: ZetaFabType.inverse, + onPressed: () => setFab(4), + ), + ZetaFAB( + scrollController: _scrollController, + label: 'Large Sharp Secondary', + size: ZetaFabSize.large, + shape: ZetaWidgetBorder.sharp, + type: ZetaFabType.primary, + onPressed: () => setFab(5), + ), + ]; + } + + return ExampleScaffold( + name: 'Button', + floatingActionButton: fab ?? fabs.first, + child: SingleChildScrollView( + controller: _scrollController, + child: Row( + children: [ + Expanded( + flex: 8, + child: Column( + children: [ + Text('Rounded Buttons', style: ZetaTextStyles.displayMedium), + Column(children: buttons(ZetaWidgetBorder.rounded)), + Text('Sharp Buttons', style: ZetaTextStyles.displayMedium), + Column(children: buttons(ZetaWidgetBorder.sharp)), + Text('Full Buttons', style: ZetaTextStyles.displayMedium), + Column(children: buttons(ZetaWidgetBorder.full)), + Text('Floating Action Buttons', style: ZetaTextStyles.displayMedium), + Text('Tap buttons to change current FAB: ', style: ZetaTextStyles.bodyMedium), + Wrap(children: fabs.divide(SizedBox.square(dimension: 10)).toList()), + ].divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ), + ), + Expanded(child: const SizedBox()), + ], + ), + ), + ); + } + + List buttons(ZetaWidgetBorder borderType) { + return List.generate( + ZetaWidgetSize.values.length + 1, + (index) => SingleChildScrollView( + scrollDirection: Axis.horizontal, + child: Row( + mainAxisSize: MainAxisSize.min, + children: List.generate( + ZetaButtonType.values.length, + (index2) => ZetaButton( + label: 'Button', + onPressed: index == 0 ? null : () {}, + type: ZetaButtonType.values[index2], + size: ZetaWidgetSize.values[index == 0 ? 0 : index - 1], + borderType: borderType, + ), + ).divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(), + ), + ), + ).reversed.divide(const SizedBox.square(dimension: ZetaSpacing.m)).toList(); + } +} diff --git a/example/lib/pages/checkbox_example.dart b/example/lib/pages/components/checkbox_example.dart similarity index 54% rename from example/lib/pages/checkbox_example.dart rename to example/lib/pages/components/checkbox_example.dart index 37ab826d..be48113d 100644 --- a/example/lib/pages/checkbox_example.dart +++ b/example/lib/pages/components/checkbox_example.dart @@ -1,8 +1,7 @@ import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -import '../widgets.dart'; - class CheckBoxExample extends StatefulWidget { static const String name = 'Checkbox'; @@ -15,6 +14,7 @@ class CheckBoxExample extends StatefulWidget { class _CheckBoxExampleState extends State { bool? isChecked = true; bool isEnabled = true; + bool useIndeterminate = false; @override Widget build(BuildContext context) { @@ -29,22 +29,27 @@ class _CheckBoxExampleState extends State { mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ ZetaCheckbox( - value: isChecked, - isEnabled: isEnabled, - onChanged: (value) => setState(() => isChecked = value)), - ElevatedButton( - child: const Text('Disable'), + value: isChecked, + onChanged: isEnabled ? (value) => setState(() => isChecked = value) : null, + useIndeterminate: useIndeterminate, + ), + ZetaButton( + label: isEnabled ? 'Disable' : 'Enable', onPressed: () => setState(() => isEnabled = !isEnabled), - ) + ), + ZetaButton( + label: !useIndeterminate ? 'Use Indeterminate' : 'Don\'t use indeterminate', + onPressed: () => setState(() => useIndeterminate = !useIndeterminate), + ), ], ), - Row(children: [const Text('Sharp Checkbox Enabled')]), + Row(children: [Text('Sharp Checkbox Enabled')]), getCheckBoxRow(isEnabled: true), - Row(children: [const Text('Sharp Checkbox Disabled')]), + Row(children: [Text('Sharp Checkbox Disabled')]), getCheckBoxRow(isEnabled: false), - Row(children: [const Text('Rounded Checkbox Enabled')]), + Row(children: [Text('Rounded Checkbox Enabled')]), getCheckBoxRow(isEnabled: true, isSharp: false), - Row(children: [const Text('Rounded Checkbox Disabled')]), + Row(children: [Text('Rounded Checkbox Disabled')]), getCheckBoxRow(isEnabled: false, isSharp: false), ], ), @@ -59,21 +64,21 @@ Row getCheckBoxRow({required bool isEnabled, bool isSharp = true}) { mainAxisAlignment: MainAxisAlignment.spaceAround, children: [ ZetaCheckbox( - value: true, - isEnabled: isEnabled, - label: 'Selected', - borderType: isSharp ? BorderType.sharp : BorderType.rounded, - onChanged: (value) => {}), + value: true, + label: 'Label', + rounded: !isSharp, + onChanged: isEnabled ? (value) => {} : null, + ), ZetaCheckbox( - value: false, - isEnabled: isEnabled, - label: 'Indeterminate', - borderType: isSharp ? BorderType.sharp : BorderType.rounded, - onChanged: (value) => {}), + value: false, + label: 'Label', + rounded: !isSharp, + onChanged: isEnabled ? (value) => {} : null, + ), ZetaCheckbox( - value: null, - borderType: isSharp ? BorderType.sharp : BorderType.rounded, - isEnabled: isEnabled, - onChanged: (value) => {}), + value: null, + rounded: !isSharp, + onChanged: isEnabled ? (value) => {} : null, + ) ]); } diff --git a/example/lib/pages/components/chip_example.dart b/example/lib/pages/components/chip_example.dart new file mode 100644 index 00000000..cbbc09f2 --- /dev/null +++ b/example/lib/pages/components/chip_example.dart @@ -0,0 +1,228 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +class ChipExample extends StatelessWidget { + static const String name = 'Chip'; + + const ChipExample({super.key}); + + @override + Widget build(BuildContext context) { + final List inputChipExample = [ + Text( + 'Input Chip', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 10), + Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Column( + children: [ + Text( + 'Rounded', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 30), + Text('Label Only', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaInputChip(label: 'Label'), + const SizedBox(height: 30), + Text('Label + Icon', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaInputChip( + label: 'Label', + ), + const SizedBox(height: 30), + Text('Label + Avatar', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaInputChip( + label: 'Label', + leading: const Icon(ZetaIcons.user_round), + ), + const SizedBox(height: 30), + Text('Label, Avatar + Icon', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaInputChip( + label: 'Label', + leading: const Icon(ZetaIcons.user_round), + trailing: Icon(ZetaIcons.close_round), + ), + ], + ), + Column( + children: [ + Text( + 'Sharp', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 30), + Text('Label Only', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaInputChip( + label: 'Label', + rounded: false, + ), + const SizedBox(height: 30), + Text('Label + Icon', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaInputChip( + label: 'Label', + rounded: false, + ), + const SizedBox(height: 30), + Text('Label + Avatar', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaInputChip( + label: 'Label', + rounded: false, + leading: const Icon(ZetaIcons.user_round), + ), + const SizedBox(height: 30), + Text('Label, Avatar + Icon', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaInputChip( + label: 'Label', + rounded: false, + leading: const Icon(ZetaIcons.user_round), + trailing: Icon(ZetaIcons.close_sharp), + ), + ], + ), + ], + ), + ]; + + final List filterChipExample = [ + Text( + 'Filter Chip', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 10), + Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Column( + children: [ + Text( + 'Rounded', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 10), + ZetaFilterChip(label: 'Label'), + const SizedBox(height: 10), + ZetaFilterChip( + label: 'Label', + selected: true, + ), + ], + ), + Column( + children: [ + Text( + 'Sharp', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 10), + ZetaFilterChip( + label: 'Label', + rounded: false, + ), + const SizedBox(height: 10), + ZetaFilterChip( + label: 'Label', + rounded: false, + selected: true, + ), + ], + ), + ], + ), + ]; + + final List assistChipExample = [ + Text( + 'Assist Chip', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 10), + Row( + mainAxisSize: MainAxisSize.max, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Column( + children: [ + Text( + 'Rounded', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 30), + Text('Label Only', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaAssistChip(label: 'Label'), + const SizedBox(height: 30), + Text('Label + Icon', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaAssistChip( + label: 'Label', + leading: Icon(ZetaIcons.star_round), + ), + ], + ), + Column( + children: [ + Text( + 'Sharp', + textAlign: TextAlign.center, + style: TextStyle(fontWeight: FontWeight.bold), + ), + const SizedBox(height: 30), + Text('Label Only', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaAssistChip( + label: 'Label', + rounded: false, + ), + const SizedBox(height: 30), + Text('Label + Icon', textAlign: TextAlign.center), + const SizedBox(height: 10), + ZetaAssistChip( + label: 'Label', + rounded: false, + leading: Icon(ZetaIcons.star_round), + ), + ], + ), + ], + ), + ]; + + return ExampleScaffold( + name: ChipExample.name, + child: SingleChildScrollView( + padding: EdgeInsets.all(ZetaSpacing.s), + child: Column( + children: [ + ...inputChipExample, + const SizedBox(height: 30), + ...assistChipExample, + const SizedBox(height: 30), + ...filterChipExample, + const SizedBox(height: 30), + ], + ), + ), + ); + } +} diff --git a/example/lib/pages/components/password_input_example.dart b/example/lib/pages/components/password_input_example.dart new file mode 100644 index 00000000..d7a46e20 --- /dev/null +++ b/example/lib/pages/components/password_input_example.dart @@ -0,0 +1,83 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../widgets.dart'; + +class PasswordInputExample extends StatefulWidget { + static const String name = 'PasswordInput'; + + const PasswordInputExample({Key? key}) : super(key: key); + + @override + State createState() => _PasswordInputExampleState(); +} + +class _PasswordInputExampleState extends State { + final _passwordController = TextEditingController(); + final _formKey = GlobalKey(); + + @override + void dispose() { + _passwordController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return Form( + key: _formKey, + child: ExampleScaffold( + name: PasswordInputExample.name, + child: Padding( + padding: EdgeInsets.all(10), + child: SingleChildScrollView( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding(padding: EdgeInsets.only(top: 20)), + ZetaPasswordInput( + size: ZetaWidgetSize.medium, + rounded: false, + footerText: 'Error state is triggered if the password contains digits', + footerIcon: ZetaIcons.info_round, + hintText: 'Password', + controller: _passwordController, + onChanged: (value) => _formKey.currentState?.validate(), + validator: (value) { + if (value != null) { + final regExp = RegExp(r'\d'); + if (regExp.hasMatch(value)) return 'Password is incorrect'; + } + return null; + }, + ), + SizedBox(height: ZetaSpacing.x10), + ...passwordInputExampleRow(ZetaWidgetSize.large), + Divider(height: ZetaSpacing.x20), + ...passwordInputExampleRow(ZetaWidgetSize.medium), + Divider(height: ZetaSpacing.x20), + ...passwordInputExampleRow(ZetaWidgetSize.small), + ], + ), + ), + ), + )); + } +} + +List passwordInputExampleRow(ZetaWidgetSize size, {bool rounded = true}) { + return [ + ZetaPasswordInput(size: size, hintText: 'Password', rounded: rounded), + SizedBox(height: 20), + ZetaPasswordInput(rounded: rounded, size: size, hintText: 'Password', enabled: false), + SizedBox(height: 20), + ZetaPasswordInput( + size: size, + label: 'Label', + hintText: 'Password', + footerText: 'Default hint text', + rounded: rounded, + footerIcon: ZetaIcons.info_round, + ), + ]; +} diff --git a/example/lib/pages/grid_example.dart b/example/lib/pages/grid_example.dart deleted file mode 100644 index fd10ed3d..00000000 --- a/example/lib/pages/grid_example.dart +++ /dev/null @@ -1,112 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; - -import '../widgets.dart'; - -class GridExample extends StatelessWidget { - static const String name = 'Grid'; - - static const List symmetrical = [null, 2, 4, 8, 16]; - static const List noGaps = [false, true]; - static const List asymmetrical = [11, 10, 9, 8, 7, 5, 4, 3, 2, 1]; - - const GridExample({super.key}); - - @override - Widget build(BuildContext context) { - final List gridItems = List.generate(20, (index) => GridItem(label: (index + 1).toString())); - - final List examples = [ - ...symmetrical - .map( - (col) => noGaps.map( - (noGaps) => ExampleModel( - example: ZetaGrid( - col: col ?? 12, - noGaps: noGaps, - children: gridItems.getRange(0, (col ?? 12).toInt()).toList(), - ), - token: - r'$grid.zeta' + (col != null && col != 0 ? '.${col.toInt()}col' : '') + (noGaps ? '.nogaps' : ''), - code: - 'ZetaGrid(${col != null ? 'col:${col.toInt()}' : ''}${col != null && noGaps ? ', ' : ''}${noGaps ? 'noGaps: true' : ''}${col != null || noGaps ? ', ' : ''}children:[])', - ), - ), - ) - .expand((element) => element), - ...asymmetrical - .map( - (col) => noGaps.map( - (noGaps) => ExampleModel( - example: ZetaGrid( - asymmetricWeight: col.toInt(), - noGaps: noGaps, - children: gridItems.getRange(0, 12).toList(), - ), - token: r'$grid.zeta' + ('.${col.toInt()}to${(12 - col).toInt()}') + (noGaps ? '.nogaps' : ''), - code: 'ZetaGrid(${'asymmetricWeight:${col.toInt()}'}${noGaps ? ', noGaps: true' : ''}, children:[])', - ), - ), - ) - .expand((element) => element), - ...noGaps.map( - (noGaps) => ExampleModel( - example: Column( - children: [ - ZetaGrid( - noGaps: noGaps, - col: 8, - hybrid: true, - children: const [ - GridItem(width: 120), - Flexible(fit: FlexFit.tight, child: GridItem()), - GridItem(width: 80), - Flexible(fit: FlexFit.tight, flex: 2, child: GridItem()), - GridItem(width: 76), - Flexible(fit: FlexFit.tight, child: GridItem()), - Flexible(fit: FlexFit.tight, flex: 3, child: GridItem()), - GridItem(width: 40), - ], - ), - ], - ), - token: r'$grid.zeta.120px.1fr.80px.2fr.76px.1fr.3fr.40px' + (noGaps ? '.nogaps' : ''), - code: - 'ZetaGrid(\n col: 8,\n hybrid: true,\n ${noGaps ? 'noGaps: true,\n ' : ''}children:[\n GridItem(width: 120),\n Flexible(fit: FlexFit.tight, child: GridItem()),\n GridItem(width: 80),\n Flexible(fit: FlexFit.tight, flex: 2, child: GridItem()),\n GridItem(width: 76),\n Flexible(fit: FlexFit.tight, child: GridItem()),\n Flexible(fit: FlexFit.tight, flex: 3, child: GridItem()),\n GridItem(width: 40),\n ],\n)', - ), - ) - ]; - - return ExampleScaffold( - name: name, - child: SingleChildScrollView( - padding: EdgeInsets.all(Dimensions.s), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [...examples.map(ExampleBuilder.new)], - ), - ), - ); - } -} - -class GridItem extends StatelessWidget { - final String label; - final double? width; - - const GridItem({this.label = '', this.width, super.key}); - - @override - Widget build(BuildContext context) { - final colors = Zeta.of(context).colors; - return Container( - height: 80, - width: width, - decoration: BoxDecoration(border: Border.all(color: colors.blue.border), color: colors.blue.surface), - child: Padding( - padding: const EdgeInsets.only(left: 8), - child: ZetaText.bodyLarge(label, textColor: colors.blue.text), - ), - ); - } -} diff --git a/example/lib/pages/spacing_example.dart b/example/lib/pages/spacing_example.dart deleted file mode 100644 index ca7a82ce..00000000 --- a/example/lib/pages/spacing_example.dart +++ /dev/null @@ -1,132 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; - -import '../widgets.dart'; - -class _SizeEx { - final String name; - final double? value; - - const _SizeEx({required this.name, required this.value}); -} - -class _TypeEx { - final String name; - final ZetaSpacingType? value; - final String description; - - const _TypeEx({required this.name, required this.value, required this.description}); -} - -class SpacingExample extends StatelessWidget { - static const String name = 'Spacing'; - - const SpacingExample({super.key}); - - static const List<_SizeEx> _sizes = [ - _SizeEx(name: '', value: null), - _SizeEx(name: 'x1', value: Dimensions.x1), - _SizeEx(name: 'xxs', value: Dimensions.xxs), - _SizeEx(name: 'x2', value: Dimensions.x2), - _SizeEx(name: 'xs', value: Dimensions.xs), - _SizeEx(name: 'x3', value: Dimensions.x3), - _SizeEx(name: 's', value: Dimensions.s), - _SizeEx(name: 'x4', value: Dimensions.x4), - _SizeEx(name: 'b', value: Dimensions.b), - _SizeEx(name: 'x5', value: Dimensions.x5), - _SizeEx(name: 'x6', value: Dimensions.x6), - _SizeEx(name: 'm', value: Dimensions.m), - _SizeEx(name: 'x7', value: Dimensions.x7), - _SizeEx(name: 'x8', value: Dimensions.x8), - _SizeEx(name: 'l', value: Dimensions.l), - _SizeEx(name: 'x9', value: Dimensions.x9), - _SizeEx(name: 'x10', value: Dimensions.x10), - _SizeEx(name: 'x11', value: Dimensions.x11), - _SizeEx(name: 'x12', value: Dimensions.x12), - _SizeEx(name: 'x16', value: Dimensions.x16), - _SizeEx(name: 'xl', value: Dimensions.xl), - _SizeEx(name: 'x20', value: Dimensions.x20), - _SizeEx(name: 'xxl', value: Dimensions.xxl), - _SizeEx(name: 'x24', value: Dimensions.x24), - _SizeEx(name: 'xxxl', value: Dimensions.xxxl), - ]; - - static const List<_TypeEx> _types = [ - _TypeEx(name: '', value: null, description: 'Adds {0}rem either or both margin and padding.'), - _TypeEx(name: 'square', value: ZetaSpacingType.square, description: 'Adds {0}rem padding.'), - _TypeEx(name: 'squish', value: ZetaSpacingType.squish, description: 'Adds {0}rem top and bottom padding.'), - _TypeEx(name: 'inline', value: ZetaSpacingType.inline, description: 'Adds {0}rem left and right padding.'), - _TypeEx(name: 'inline.start', value: ZetaSpacingType.inlineStart, description: 'Adds {0}rem start padding.'), - _TypeEx(name: 'inline.end', value: ZetaSpacingType.inlineEnd, description: 'Adds {0}rem end padding.'), - _TypeEx(name: 'stack', value: ZetaSpacingType.stack, description: 'Adds {0}rem bottom padding.'), - ]; - - static final List _x = _sizes - .map((size) { - final x = _types.map((type) { - return ExampleModel( - token: r'$spacing.zeta' + - (type.value != null ? '.${type.name}' : '') + - (size.value != null ? '.${size.name}' : ''), - example: _SpaceExample(size: size.value ?? 0, type: type.value ?? ZetaSpacingType.square), - description: type.description.replaceAll('{0}', size.value == null ? '0' : (size.value! ~/ 4).toString()), - code: - 'ZetaSpacing${type.value != null ? '.${type.name}' : ''}(child${size.value != null ? ', size: ZetaSpacing.${size.name}' : ''})', - ); - }); - return [...x, null]; - }) - .expand((element) => element) - .toList(); - - @override - Widget build(BuildContext context) { - return ExampleScaffold( - name: name, - child: ListView.builder( - padding: EdgeInsets.all(Dimensions.s), - itemCount: _x.length, - itemBuilder: (context, index) { - final e = _x[index]; - return e == null ? const Divider() : ExampleBuilder(e); - }, - ), - ); - } -} - -class _SpaceExample extends StatelessWidget { - final double size; - final ZetaSpacingType type; - - const _SpaceExample({required this.size, required this.type}); - - @override - Widget build(BuildContext context) { - return Row( - children: [ - Expanded( - child: ColoredBox( - color: Zeta.of(context).colors.blue.shade20, - child: ZetaSpacing(const SpacingItem(), size: size, type: type), - ), - ), - ], - ); - } -} - -class SpacingItem extends StatelessWidget { - const SpacingItem({super.key}); - - @override - Widget build(BuildContext context) { - return DecoratedBox( - decoration: BoxDecoration( - color: Theme.of(context).colorScheme.surface, - border: Border.all(color: const Color(0xFFdddddd)), - ), - child: const Text('Text with some spacing'), - ); - } -} diff --git a/example/lib/pages/color_example.dart b/example/lib/pages/theme/color_example.dart similarity index 83% rename from example/lib/pages/color_example.dart rename to example/lib/pages/theme/color_example.dart index 1093e8bf..da441b7c 100644 --- a/example/lib/pages/color_example.dart +++ b/example/lib/pages/theme/color_example.dart @@ -1,8 +1,7 @@ import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -import '../widgets.dart'; - class ColorExample extends StatefulWidget { static const String name = 'Color'; @@ -124,21 +123,21 @@ class _ColorExampleState extends State { }; final Map primaries = { - 'primaryColor': colors.primary, - 'secondaryColor': colors.secondary, + 'primaryColor': colors.primary.text, + 'secondaryColor': colors.secondary.text, }; final Map alerts = { - 'positive': colors.positive, - 'negative': colors.negative, - 'warning': colors.warning, - 'info': colors.info, + 'positive': colors.positive.text, + 'negative': colors.negative.text, + 'warning': colors.warning.text, + 'info': colors.info.text, }; return ExampleScaffold( name: ColorExample.name, child: SingleChildScrollView( - padding: EdgeInsets.all(Dimensions.s), + padding: EdgeInsets.all(ZetaSpacing.s), child: Column( children: [ MyRow(children: textIcon, title: 'Text and icon styles'), @@ -147,7 +146,8 @@ class _ColorExampleState extends State { MyRow(children: backdrop, title: 'Backdrop colors'), MyRow(children: primaries, title: 'Primary colors'), MyRow(children: alerts, title: 'Alert colors'), - Row(children: [ZetaText.displayMedium('Full color swatches')]).squish(Dimensions.x8), + Row(children: [Text('Full color swatches', style: ZetaTextStyles.displayMedium)]) + .paddingVertical(ZetaSpacing.x8), ...swatches.entries.map( (value) => Row( children: List.generate(10, (index) => 100 - (10 * index)) @@ -158,21 +158,19 @@ class _ColorExampleState extends State { color: value.value[e], child: FittedBox( fit: BoxFit.scaleDown, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - DefaultTextStyle( - style: ZetaText.zetaBodyMedium - .copyWith(color: calculateTextColor(value.value[e] ?? Colors.white)), - child: Column( - children: [ - Text('${value.key.toLowerCase().replaceAll(' ', '')}-$e'), - Text(value.value[e].toString().replaceAll('Color(0xff', '#').substring(0, 7)), - ], - ), + child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ + DefaultTextStyle( + style: ZetaTextStyles.bodyMedium + .copyWith(color: calculateTextColor(value.value[e] ?? Colors.white)), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Text('${value.key.toLowerCase().replaceAll(' ', '')}-$e'), + Text(value.value[e].toString().replaceAll('Color(0xff', '#').substring(0, 7)), + ], ), - ], - ), + ), + ]), ), ), ), @@ -182,10 +180,11 @@ class _ColorExampleState extends State { ), ElevatedButton( onPressed: () => setState(() => showGeneratedColors = !showGeneratedColors), - child: const Text('Toggle generated colors').square(Dimensions.s), - ).square(Dimensions.s), + child: const Text('Toggle generated colors').paddingAll(ZetaSpacing.s), + ).paddingAll(ZetaSpacing.s), if (showGeneratedColors) - Row(children: [ZetaText.displayMedium('Generated color swatches')]).squish(Dimensions.x8), + Row(children: [Text('Generated color swatches', style: ZetaTextStyles.displayMedium)]) + .paddingVertical(ZetaSpacing.x8), if (showGeneratedColors) ...generatedSwatches.entries.map( (value) => Row( @@ -203,7 +202,7 @@ class _ColorExampleState extends State { mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ DefaultTextStyle( - style: ZetaText.zetaBodyMedium + style: ZetaTextStyles.bodyMedium .copyWith(color: calculateTextColor(value.value[e] ?? Colors.white)), child: Column( children: [ @@ -251,7 +250,7 @@ class MyRow extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - ZetaText.labelLarge(title, textColor: Zeta.of(context).colors.textDefault), + Text(title, style: ZetaTextStyles.labelLarge), Row( crossAxisAlignment: CrossAxisAlignment.start, mainAxisSize: MainAxisSize.min, @@ -268,7 +267,7 @@ class MyRow extends StatelessWidget { mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: [ DefaultTextStyle( - style: ZetaText.zetaBodyMedium.copyWith(color: calculateTextColor(e.value)), + style: ZetaTextStyles.bodyMedium.copyWith(color: calculateTextColor(e.value)), child: Column( children: [ Text(e.key), @@ -292,12 +291,6 @@ class MyRow extends StatelessWidget { } } -extension StringExtension on Color { - String get toHexString { - return toString().substring(10, 16).toUpperCase(); - } -} - Color calculateTextColor(Color background) { return ThemeData.estimateBrightnessForColor(background) == Brightness.light ? Colors.black : Colors.white; } diff --git a/example/lib/pages/theme/typography_example.dart b/example/lib/pages/theme/typography_example.dart new file mode 100644 index 00000000..80e9542b --- /dev/null +++ b/example/lib/pages/theme/typography_example.dart @@ -0,0 +1,115 @@ +import 'package:flutter/material.dart'; +import 'package:zeta_example/widgets.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +const String exampleText = 'The quick brown fox jumps over the lazy dog.'; + +class TypographyExample extends StatelessWidget { + static const String name = 'Typography'; + + const TypographyExample({super.key}); + + @override + Widget build(BuildContext context) { + final dedicatedSizes = [ + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.displayLarge), + code: "Text('...', style: ZetaTextStyles.displayLarge)", + title: 'Display Large', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.displayMedium), + code: "Text('...', style: ZetaTextStyles.displayMedium)", + title: 'Display Medium', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.displaySmall), + code: "Text('...', style: ZetaTextStyles.displaySmall)", + title: 'Display Small', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.heading1), + code: "Text('...', style: ZetaTextStyles.heading1)", + title: 'Heading 1', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.heading2), + code: "Text('...', style: ZetaTextStyles.heading2)", + title: 'Heading 2', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.heading3), + code: "Text('...', style: ZetaTextStyles.heading3)", + title: 'Heading 3', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.titleLarge), + code: "Text('...', style: ZetaTextStyles.titleLarge)", + title: 'Title Large', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.titleMedium), + code: "Text('...', style: ZetaTextStyles.titleMedium)", + title: 'Title Medium', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.titleSmall), + code: "Text('...', style: ZetaTextStyles.titleSmall)", + title: 'Title Small', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.bodyLarge), + code: "Text('...', style: ZetaTextStyles.titleLarge)", + title: 'Body Large', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.bodyMedium), + code: "Text('...', style: ZetaTextStyles.titleMedium)", + title: 'Body Medium', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.bodySmall), + code: "Text('...', style: ZetaTextStyles.titleSmall)", + title: 'Body Small', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.labelLarge), + code: "Text('...', style: ZetaTextStyles.labelLarge)", + title: 'Label Large', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.labelMedium), + code: "Text('...', style: ZetaTextStyles.labelMedium)", + title: 'Label Medium', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.labelSmall), + code: "Text('...', style: ZetaTextStyles.labelSmall)", + title: 'Label Small', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.labelIndicator), + code: "Text('...', style: ZetaTextStyles.labelIndicator)", + title: 'Label Indicator', + ), + ExampleModel( + example: Text(exampleText, style: ZetaTextStyles.labelTiny), + code: "Text('...', style: ZetaTextStyles.labelTiny)", + title: 'Label Tiny', + ), + ]; + + return ExampleScaffold( + name: name, + child: SingleChildScrollView( + padding: EdgeInsets.all(ZetaSpacing.s), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + ...dedicatedSizes.map(ExampleBuilder.new), + ], + ), + ), + ); + } +} diff --git a/example/lib/pages/typography_example.dart b/example/lib/pages/typography_example.dart deleted file mode 100644 index 0ff46d3b..00000000 --- a/example/lib/pages/typography_example.dart +++ /dev/null @@ -1,188 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; -import '../widgets.dart'; - -const String exampleText = 'Lorem ipsum dolor sit amet.'; -const String exampleParagraph = - 'Paragraph: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.'; - -class TypographyExample extends StatelessWidget { - static const String name = 'Typography'; - - const TypographyExample({super.key}); - - static const Map sizes = { - 'x3': Dimensions.x3, - 'x3_5': Dimensions.x3_5, - 'x4': Dimensions.x4, - 'x5': Dimensions.x5, - 'x6': Dimensions.x6, - 'x7': Dimensions.x7, - 'x8': Dimensions.x8, - 'x9': Dimensions.x9, - 'x10': Dimensions.x10, - 'x11': Dimensions.x11, - 'x12': Dimensions.x12, - 'x13': Dimensions.x13, - }; - static final List universalSizes = sizes.entries.map( - (size) { - return ExampleModel( - example: ZetaText(exampleText, fontSize: size.value), - token: size.value == Dimensions.x3_5 - ? r'$text.zeta.x3_5.x4' - : r'$text.zeta.x' + '${size.value ~/ 4}.x${(size.value + 4) ~/ 4}', - code: "ZetaText('', size: ZetaSpacing.${size.key})", - ); - }, - ).toList(); - - static final dedicatedSizes = [ - ExampleModel( - example: ZetaText.bodySmall(exampleText), - wDescription: ZetaText.bodySmall(exampleParagraph, maxWidth: 66), - code: "ZetaText.bodySmall('')", - token: r'$text.zeta.bodysmall', - ), - ExampleModel( - example: ZetaText.bodyMedium(exampleText), - wDescription: ZetaText.bodyMedium(exampleParagraph, maxWidth: 66), - code: "ZetaText.bodyMedium('')", - token: r'$text.zeta.bodymedium', - ), - ExampleModel( - example: ZetaText.bodyLarge(exampleText), - wDescription: ZetaText.bodyLarge(exampleParagraph, maxWidth: 66), - code: "ZetaText.bodyLarge('')", - token: r'$text.zeta.bodylarge', - ), - ExampleModel( - example: ZetaText.titleSmall(exampleText), - code: "ZetaText.titleSmall('')", - token: r'$text.zeta.titlesmall', - ), - ExampleModel( - example: ZetaText.titleMedium(exampleText), - code: "ZetaText.titleMedium('')", - token: r'$text.zeta.titlemedium', - ), - ExampleModel( - example: ZetaText.titleLarge(exampleText), - code: "ZetaText.titleLarge('')", - token: r'$text.zeta.titlelarge', - ), - ExampleModel( - example: ZetaText.headingSmall(exampleText), - code: "ZetaText.headingSmall('')", - token: r'$text.zeta.headingsmall', - ), - ExampleModel( - example: ZetaText.headingMedium(exampleText), - code: "ZetaText.headingMedium('')", - token: r'$text.zeta.headingmedium', - ), - ExampleModel( - example: ZetaText.headingLarge(exampleText), - code: "ZetaText.headingLarge('')", - token: r'$text.zeta.headinglarge', - ), - ExampleModel( - example: ZetaText.displaySmall(exampleText), - code: "ZetaText.displaySmall('')", - token: r'$text.zeta.displaysmall', - ), - ExampleModel( - example: ZetaText.displayMedium(exampleText), - code: "ZetaText.displayMedium('')", - token: r'$text.zeta.displaymedium', - ), - ExampleModel( - example: ZetaText.displayLarge(exampleText), - code: "ZetaText.displayLarge('')", - token: r'$text.zeta.displaylarge', - ), - ]; - - @override - Widget build(BuildContext context) { - final colors = Zeta.of(context).colors; - - final tokens = [ - const ExampleModel( - example: ZetaText(exampleText), - code: "ZetaText('')", - token: r'$text.zeta', - ), - ExampleModel( - example: ZetaText(exampleText, textColor: colors.textSubtle), - code: "ZetaText('', textColor: ZetaColors.textColorSubtle)", - token: r'$text.zeta.subtle', - ), - const ExampleModel( - example: ZetaText(exampleText, fontWeight: FontWeight.w300), - code: "ZetaText('', fontWeight: FontWeight.w300)", - token: r'$text.zeta.300', - ), - const ExampleModel( - example: ZetaText(exampleText, fontWeight: FontWeight.w500), - code: "ZetaText('', fontWeight: FontWeight.w500)", - token: r'$text.zeta.500', - ), - const ExampleModel( - example: ZetaText(exampleText, fontStyle: FontStyle.italic), - code: "ZetaText('', fontStyle: FontStyle.italic)", - token: r'$text.zeta.italics', - ), - const ExampleModel( - code: "ZetaText('', uppercase: true)", - token: r'$text.zeta.caps', - example: ZetaText(exampleText, upperCase: true), - ), - const ExampleModel( - example: ZetaText(exampleText, decoration: TextDecoration.underline), - code: "ZetaText('', decoration: TextDecoration.underline)", - token: r'$text.zeta.underline', - ), - const ExampleModel( - code: "ZetaText('', textDirection: TextDirection.rtl)", - token: r'$text.zeta.direction', - example: ZetaText(exampleText, textDirection: TextDirection.rtl), - ), - const ExampleModel( - code: "ZetaText('', first: true)", - token: r'$text.zeta.first', - example: ZetaText(exampleText, first: true), - ), - const ExampleModel( - code: "ZetaText('', last: true)", - token: r'$text.zeta.last', - example: ZetaText(exampleText, last: true), - ), - const ExampleModel( - code: "ZetaText('', resetHeight: true)", - token: r'$text.zeta.reset', - example: ZetaText(exampleText, resetHeight: true), - ), - ]; - - return ExampleScaffold( - name: name, - child: SingleChildScrollView( - padding: EdgeInsets.all(Dimensions.s), - child: Column( - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - ZetaText.headingLarge('Text').inline(Dimensions.x10), - ...tokens.map(ExampleBuilder.new), - const Divider().squish(Dimensions.x4), - ZetaText.headingLarge('Universal sizes').inline(Dimensions.x10), - ...universalSizes.map(ExampleBuilder.new), - const Divider().squish(Dimensions.x4), - ZetaText.headingLarge('Dedicated sizes').inline(Dimensions.x10), - ...dedicatedSizes.map(ExampleBuilder.new), - ], - ), - ), - ); - } -} diff --git a/example/lib/theme_service.dart b/example/lib/theme_service.dart index b25c0a45..3c80a1b9 100644 --- a/example/lib/theme_service.dart +++ b/example/lib/theme_service.dart @@ -1,6 +1,6 @@ import 'package:flutter/src/material/app.dart'; import 'package:shared_preferences/shared_preferences.dart'; -import 'package:zeta_example/pages/theme_color_switch.dart'; +import 'package:zeta_example/utils/theme_color_switch.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; class SharedPrefsThemeService extends ZetaThemeService { diff --git a/example/lib/pages/theme_color_switch.dart b/example/lib/utils/theme_color_switch.dart similarity index 92% rename from example/lib/pages/theme_color_switch.dart rename to example/lib/utils/theme_color_switch.dart index 98ebbeec..cb4a29d8 100644 --- a/example/lib/pages/theme_color_switch.dart +++ b/example/lib/utils/theme_color_switch.dart @@ -26,7 +26,7 @@ class ZetaThemeColorSwitch extends StatelessWidget { @override Widget build(BuildContext context) { - var zeta = Zeta.of(context); + final zeta = Zeta.of(context); ZetaColors primary(ZetaThemeData data) { if (zeta.brightness == Brightness.light) { @@ -45,8 +45,8 @@ class ZetaThemeColorSwitch extends StatelessWidget { icon: SizedBox(width: 8), dropdownColor: zeta.colors.borderDisabled, items: appThemes.entries.map((e) { - var zetaColors = primary(appThemes[e.key]!); - var color = zetaColors.primary; + final zetaColors = primary(appThemes[e.key]!); + final color = zetaColors.primary; return DropdownMenuItem( value: e.value.identifier, alignment: Alignment.center, diff --git a/example/lib/pages/theme_constrast_switch.dart b/example/lib/utils/theme_constrast_switch.dart similarity index 89% rename from example/lib/pages/theme_constrast_switch.dart rename to example/lib/utils/theme_constrast_switch.dart index 9d36c28f..780acd01 100644 --- a/example/lib/pages/theme_constrast_switch.dart +++ b/example/lib/utils/theme_constrast_switch.dart @@ -11,7 +11,7 @@ class ZetaThemeContrastSwitch extends StatelessWidget { @override Widget build(BuildContext context) { - var zeta = Zeta.of(context); + final zeta = Zeta.of(context); ZetaColors zetaColors(ZetaContrast contrast) { if (zeta.brightness == Brightness.light) { @@ -37,10 +37,9 @@ class ZetaThemeContrastSwitch extends StatelessWidget { child: CircleAvatar( backgroundColor: colors.primary.surface, foregroundColor: colors.primary, - child: ZetaText.bodyMedium( + child: Text( e == ZetaContrast.aa ? 'AA' : 'AAA', - textColor: colors.primary, - fontWeight: FontWeight.w700, + style: ZetaTextStyles.bodyMedium.copyWith(color: colors.primary, fontWeight: FontWeight.w700), ), ), ); diff --git a/example/lib/pages/theme_mode_switch.dart b/example/lib/utils/theme_mode_switch.dart similarity index 98% rename from example/lib/pages/theme_mode_switch.dart rename to example/lib/utils/theme_mode_switch.dart index 392d7e12..fb9a22e1 100644 --- a/example/lib/pages/theme_mode_switch.dart +++ b/example/lib/utils/theme_mode_switch.dart @@ -12,7 +12,7 @@ class ZetaThemeModeSwitch extends StatelessWidget { @override Widget build(BuildContext context) { - var zeta = Zeta.of(context); + final zeta = Zeta.of(context); ZetaColors zetaColors(ThemeMode mode) { if ((mode == ThemeMode.system && MediaQuery.of(context).platformBrightness == Brightness.light) || diff --git a/example/lib/widgets.dart b/example/lib/widgets.dart index 99c8da5d..ae57919f 100644 --- a/example/lib/widgets.dart +++ b/example/lib/widgets.dart @@ -1,24 +1,25 @@ import 'package:flutter/material.dart'; - import 'package:google_fonts/google_fonts.dart'; -import 'package:zeta_example/pages/theme_color_switch.dart'; -import 'package:zeta_example/pages/theme_constrast_switch.dart'; -import 'package:zeta_example/pages/theme_mode_switch.dart'; +import 'package:zeta_example/utils/theme_color_switch.dart'; +import 'package:zeta_example/utils/theme_constrast_switch.dart'; +import 'package:zeta_example/utils/theme_mode_switch.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; class ExampleModel { final Widget example; final String code; - final String token; + final String? token; final String? description; final Widget? wDescription; + final String? title; const ExampleModel({ required this.example, - required this.token, required this.code, + this.token, this.description, this.wDescription, + this.title, }); } @@ -32,17 +33,21 @@ class ExampleBuilder extends StatelessWidget { return Row( crossAxisAlignment: CrossAxisAlignment.start, children: [ - Container( - height: 7, - width: 7, - decoration: BoxDecoration(color: Theme.of(context).colorScheme.onSurface, shape: BoxShape.circle), - ).squish(Dimensions.x9).inline(Dimensions.x4), + if (model.token != null) + Container( + height: 7, + width: 7, + decoration: BoxDecoration(color: Theme.of(context).colorScheme.onSurface, shape: BoxShape.circle), + ).paddingVertical(ZetaSpacing.x9).paddingHorizontal(ZetaSpacing.x4), + if (model.title != null && MediaQuery.of(context).size.width > 767) Expanded(child: Text(model.title!)), Expanded( + flex: 5, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - CodeExample(code: model.token), - if (model.description != null) ZetaText(model.description), + if (model.title != null && MediaQuery.of(context).size.width <= 767) Text(model.title!), + if (model.token != null) CodeExample(code: model.token!), + if (model.description != null) Text(model.description!), if (model.wDescription != null) model.wDescription!, model.example, Container(color: const Color(0xFFF5F5F5)), @@ -50,7 +55,7 @@ class ExampleBuilder extends StatelessWidget { ], ), ), - const SizedBox(height: 7, width: 7).squish(Dimensions.x9).inline(Dimensions.x4), + const SizedBox(height: 7, width: 7).paddingVertical(ZetaSpacing.x9).paddingHorizontal(ZetaSpacing.x4), ], ); } @@ -60,23 +65,29 @@ class ExampleScaffold extends StatelessWidget { final String name; final Widget child; final List actions; + final Widget? floatingActionButton; const ExampleScaffold({ required this.name, required this.child, this.actions = const [], + this.floatingActionButton, super.key, }); @override Widget build(BuildContext context) { - var theme = Theme.of(context); + final theme = Theme.of(context); final colors = theme.colorScheme; return Scaffold( + floatingActionButton: floatingActionButton, appBar: AppBar( centerTitle: false, - title: Text(name), + title: Text( + name, + style: ZetaTextStyles.titleMedium, + ), backgroundColor: colors.primary, foregroundColor: colors.onPrimary, actions: [ @@ -86,6 +97,7 @@ class ExampleScaffold extends StatelessWidget { ZetaThemeColorSwitch(), ], ), + backgroundColor: colors.surface, body: SelectionArea( child: child, ), @@ -101,10 +113,10 @@ class CodeExample extends StatelessWidget { @override Widget build(BuildContext context) { - var colors = Zeta.of(context).colors; + final colors = Zeta.of(context).colors; final widget = Container( color: colors.surfaceDisabled, - padding: Dimensions.x4.square, + padding: EdgeInsets.all(ZetaSpacing.x4), child: Text(code, style: GoogleFonts.ibmPlexMono(color: colors.textDefault)), ); @@ -115,7 +127,6 @@ class CodeExample extends StatelessWidget { child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ - const FlutterWordMark(), Row(children: [Expanded(child: widget)]), ], ), @@ -123,26 +134,6 @@ class CodeExample extends StatelessWidget { ], ) : widget) - .squish(Dimensions.x4); - } -} - -class FlutterWordMark extends StatelessWidget { - final String text; - final EdgeInsets padding; - - const FlutterWordMark({ - this.text = 'Flutter', - this.padding = const EdgeInsets.symmetric(horizontal: Dimensions.x5, vertical: Dimensions.x2), - super.key, - }); - - @override - Widget build(BuildContext context) { - return Container( - color: Zeta.of(context).colors.borderSubtle, - padding: padding, - child: ZetaText(text), - ); + .paddingVertical(ZetaSpacing.x4); } } diff --git a/example/macos/Flutter/GeneratedPluginRegistrant.swift b/example/macos/Flutter/GeneratedPluginRegistrant.swift new file mode 100644 index 00000000..eefcc6d7 --- /dev/null +++ b/example/macos/Flutter/GeneratedPluginRegistrant.swift @@ -0,0 +1,16 @@ +// +// Generated file. Do not edit. +// + +import FlutterMacOS +import Foundation + +import path_provider_foundation +import shared_preferences_foundation +import sqflite + +func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) { + PathProviderPlugin.register(with: registry.registrar(forPlugin: "PathProviderPlugin")) + SharedPreferencesPlugin.register(with: registry.registrar(forPlugin: "SharedPreferencesPlugin")) + SqflitePlugin.register(with: registry.registrar(forPlugin: "SqflitePlugin")) +} diff --git a/example/macos/Podfile.lock b/example/macos/Podfile.lock index 0782b5c6..4556329c 100644 --- a/example/macos/Podfile.lock +++ b/example/macos/Podfile.lock @@ -3,20 +3,34 @@ PODS: - path_provider_foundation (0.0.1): - Flutter - FlutterMacOS + - shared_preferences_foundation (0.0.1): + - Flutter + - FlutterMacOS + - sqflite (0.0.3): + - Flutter + - FlutterMacOS DEPENDENCIES: - FlutterMacOS (from `Flutter/ephemeral`) - path_provider_foundation (from `Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin`) + - shared_preferences_foundation (from `Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/darwin`) + - sqflite (from `Flutter/ephemeral/.symlinks/plugins/sqflite/darwin`) EXTERNAL SOURCES: FlutterMacOS: :path: Flutter/ephemeral path_provider_foundation: :path: Flutter/ephemeral/.symlinks/plugins/path_provider_foundation/darwin + shared_preferences_foundation: + :path: Flutter/ephemeral/.symlinks/plugins/shared_preferences_foundation/darwin + sqflite: + :path: Flutter/ephemeral/.symlinks/plugins/sqflite/darwin SPEC CHECKSUMS: FlutterMacOS: 8f6f14fa908a6fb3fba0cd85dbd81ec4b251fb24 - path_provider_foundation: 29f094ae23ebbca9d3d0cec13889cd9060c0e943 + path_provider_foundation: 3784922295ac71e43754bd15e0653ccfd36a147c + shared_preferences_foundation: b4c3b4cddf1c21f02770737f147a3f5da9d39695 + sqflite: 673a0e54cc04b7d6dba8d24fb8095b31c3a99eec PODFILE CHECKSUM: 353c8bcc5d5b0994e508d035b5431cfe18c1dea7 diff --git a/example/macos/Runner.xcodeproj/project.pbxproj b/example/macos/Runner.xcodeproj/project.pbxproj index d644e73f..253d9342 100644 --- a/example/macos/Runner.xcodeproj/project.pbxproj +++ b/example/macos/Runner.xcodeproj/project.pbxproj @@ -159,7 +159,6 @@ 775BFA427E635DE4CCD15022 /* Pods-Runner.release.xcconfig */, 89C2799490DE736CE6C6B909 /* Pods-Runner.profile.xcconfig */, ); - name = Pods; path = Pods; sourceTree = ""; }; diff --git a/example/pubspec.yaml b/example/pubspec.yaml index 74d5c998..6b891784 100644 --- a/example/pubspec.yaml +++ b/example/pubspec.yaml @@ -7,6 +7,7 @@ environment: sdk: ">=3.0.1 <4.0.0" dependencies: + cached_network_image: ^3.3.1 flutter: sdk: flutter go_router: ^11.1.2 diff --git a/example/test/badge_test.dart b/example/test/badge_test.dart new file mode 100644 index 00000000..0028007d --- /dev/null +++ b/example/test/badge_test.dart @@ -0,0 +1,24 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import 'test_components.dart'; + +void main() { + testWidgets('Initializes with correct parameters', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaBadge( + label: 'Test Label', + status: ZetaWidgetStatus.warning, + ), + ), + ); + + final zetaBadgeFinder = find.byType(ZetaBadge); + final ZetaBadge badge = tester.firstWidget(zetaBadgeFinder); + + expect(badge.rounded, true); + expect(badge.label, 'Test Label'); + expect(badge.status, ZetaWidgetStatus.warning); + }); +} diff --git a/example/test/button_test.dart b/example/test/button_test.dart new file mode 100644 index 00000000..cbd6ed03 --- /dev/null +++ b/example/test/button_test.dart @@ -0,0 +1,36 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import 'test_components.dart'; + +void main() { + group('ZetaButton Tests', () { + testWidgets('Initializes with correct Label', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaButton( + onPressed: () {}, + label: 'Test Button', + ), + ), + ); + + expect(find.text('Test Button'), findsOneWidget); + }); + }); + + testWidgets('Triggers callback on tap', (WidgetTester tester) async { + bool callbackTriggered = false; + await tester.pumpWidget( + TestWidget( + widget: ZetaButton( + onPressed: () => callbackTriggered = true, + label: 'Test Button', + )), + ); + await tester.tap(find.byType(ZetaButton)); + await tester.pump(); + + expect(callbackTriggered, isTrue); + }); +} diff --git a/example/test/checkbox_test.dart b/example/test/checkbox_test.dart index abc531a6..78ba7381 100644 --- a/example/test/checkbox_test.dart +++ b/example/test/checkbox_test.dart @@ -1,42 +1,43 @@ +import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; -import 'package:flutter/material.dart'; + +import 'test_components.dart'; void main() { group('ZetaCheckbox Tests', () { - testWidgets('Initializes with correct parameters', - (WidgetTester tester) async { + testWidgets('Initializes with correct parameters', (WidgetTester tester) async { await tester.pumpWidget( - TestWidgetCB( - widget: ZetaCheckbox( - value: true, - onChanged: (value) {}, - borderType: BorderType.rounded, - label: 'Test Checkbox', - checkboxSize: Size(30, 30), - )), + TestWidget( + widget: ZetaCheckbox( + value: true, + onChanged: (value) {}, + label: 'Test Checkbox', + ), + ), ); final checkboxFinder = find.byType(ZetaCheckbox); final ZetaCheckbox checkbox = tester.firstWidget(checkboxFinder); expect(checkbox.value, true); - expect(checkbox.borderType, BorderType.rounded); + expect(checkbox.rounded, true); expect(checkbox.label, 'Test Checkbox'); - expect(checkbox.checkboxSize, Size(30, 30)); }); testWidgets('ZetaCheckbox changes state on tap', (WidgetTester tester) async { bool? checkboxValue = true; await tester.pumpWidget( - TestWidgetCB( - widget: ZetaCheckbox( - value: checkboxValue, - onChanged: (value) { - checkboxValue = value; - }, - )), + TestWidget( + removeBody: true, + widget: ZetaCheckbox( + value: checkboxValue, + onChanged: (value) { + checkboxValue = value; + }, + ), + ), ); await tester.tap(find.byType(ZetaCheckbox)); @@ -60,7 +61,7 @@ class TestWidgetCB extends StatelessWidget { return MaterialApp( theme: ThemeData( fontFamily: theme.fontFamily, - textTheme: ZetaText.textTheme, + textTheme: zetaTextTheme, ), home: Scaffold( body: widget, diff --git a/example/test/fab_test.dart b/example/test/fab_test.dart new file mode 100644 index 00000000..63bebbc0 --- /dev/null +++ b/example/test/fab_test.dart @@ -0,0 +1,46 @@ +import 'package:flutter/cupertino.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import 'test_components.dart'; + +void main() { + group('ZetaFAB Tests', () { + testWidgets('Initializes with correct', (WidgetTester tester) async { + final scrollController = ScrollController(); + await tester.pumpWidget(TestWidget( + widget: ZetaFAB( + scrollController: scrollController, + label: 'Label', + ))); + + expect(find.byType(ZetaFAB), findsOneWidget); + }); + + testWidgets('OnPressed callback', (WidgetTester tester) async { + bool isPressed = false; + final scrollController = ScrollController(); + + await tester.pumpWidget(TestWidget( + widget: ZetaFAB( + scrollController: scrollController, + label: 'Label', + onPressed: () => isPressed = true, + ))); + + await tester.tap(find.byType(ZetaFAB)); + await tester.pumpAndSettle(); + expect(isPressed, isTrue); + }); + }); + + testWidgets('Icon Test', (WidgetTester tester) async { + final scrollController = ScrollController(); + await tester.pumpWidget(TestWidget( + widget: ZetaFAB( + scrollController: scrollController, + label: 'Label', + ))); + expect(find.byIcon(ZetaIcons.add_round), findsOneWidget); + }); +} diff --git a/example/test/grid_test.dart b/example/test/grid_test.dart deleted file mode 100644 index c766503e..00000000 --- a/example/test/grid_test.dart +++ /dev/null @@ -1,42 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_test/flutter_test.dart'; -import 'package:zeta_example/pages/grid_example.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; -import 'test_components.dart'; - -void main() { - testWidgets('Grid component default desktop', (tester) async { - await tester.pumpWidget( - TestWidget(widget: ZetaGrid(children: List.generate(20, (index) => GridItem(key: Key(index.toString()))))), - ); - - final item0 = tester.getCenter(find.byKey(const Key('0'))); - final item11 = tester.getCenter(find.byKey(const Key('11'))); - final item12 = tester.getCenter(find.byKey(const Key('12'))); - - // First 12 items don't wrap - all grid items on same row - expect(item0.dy, item11.dy); - - // Items wrap after 12th item - expect(item0.dy != item12.dy, true); - }); - - testWidgets('Grid component default mobile', (tester) async { - await tester.pumpWidget( - TestWidget( - widget: ZetaGrid(children: List.generate(20, (index) => GridItem(key: Key(index.toString())))), - screenSize: const Size(400, 600), - ), - ); - - final item0 = tester.getCenter(find.byKey(const Key('0'))); - final item1 = tester.getCenter(find.byKey(const Key('1'))); - final item2 = tester.getCenter(find.byKey(const Key('2'))); - - // First 2 items are on same row - expect(item0.dy, item1.dy); - - // Grid wraps at 2 columns - expect(item1.dy == item2.dy, false); - }); -} diff --git a/example/test/in_page_banner_test.dart b/example/test/in_page_banner_test.dart new file mode 100644 index 00000000..bf28f160 --- /dev/null +++ b/example/test/in_page_banner_test.dart @@ -0,0 +1,88 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; +import 'package:flutter/material.dart'; + +import 'test_components.dart'; + +void main() { + group('ZetaInPageBanner Tests', () { + testWidgets('ZetaInPageBanner creation', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaInPageBanner( + content: Text('Test'), + )), + ); + + expect(find.byType(ZetaInPageBanner), findsOneWidget); + }); + }); + + testWidgets('ZetaInPageBanner displays content text', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaInPageBanner( + content: Text('Test'), + )), + ); + + expect(find.text('Test'), findsOneWidget); + }); + + testWidgets('ZetaInPageBanner shows/hides \'close icon\' correctly', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaInPageBanner( + content: Text('Test'), + onClose: () {}, + )), + ); + expect(find.byIcon(ZetaIcons.close_round), findsOneWidget); + + await tester.pumpWidget( + TestWidget( + widget: ZetaInPageBanner( + content: Text('Test'), + )), + ); + expect(find.byIcon(ZetaIcons.close_sharp), findsNothing); + }); + + testWidgets('ZetaInPageBanner button callbacks work', (WidgetTester tester) async { + bool onPressed = false; + final key = GlobalKey(); + await tester.pumpWidget( + TestWidget( + widget: ZetaInPageBanner( + content: Text('Test'), + actions: [ + ZetaButton( + label: 'Test button', + onPressed: () => onPressed = true, + key: key, + ), + ], + ), + ), + ); + + await tester.tap(find.byKey(key)); + await tester.pumpAndSettle(); + expect(onPressed, isTrue); + }); + + testWidgets('ZetaInPageBanner \'close\' icon tap test', (WidgetTester tester) async { + bool closeIconIsTapped = false; + await tester.pumpWidget( + TestWidget( + widget: ZetaInPageBanner( + onClose: () => closeIconIsTapped = true, + content: Text('Test'), + )), + ); + final closeIcon = find.byIcon(ZetaIcons.close_round); + await tester.tap(closeIcon); + await tester.pump(); + expect(closeIconIsTapped, isTrue); + }); +} diff --git a/example/test/password_input_test.dart b/example/test/password_input_test.dart new file mode 100644 index 00000000..765ede1a --- /dev/null +++ b/example/test/password_input_test.dart @@ -0,0 +1,54 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import 'test_components.dart'; + +void main() { + testWidgets('ZetaPasswordInput initializes correctly', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaPasswordInput(), + ), + ); + expect(find.byType(ZetaPasswordInput), findsOneWidget); + }); + + testWidgets('Test password visibility', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaPasswordInput(), + ), + ); + final obscureIconOff = find.byIcon(ZetaIcons.visibility_off_sharp); + expect(obscureIconOff, findsOneWidget); + await tester.tap(obscureIconOff); + await tester.pump(); + + final obscureIconOn = find.byIcon(ZetaIcons.visibility_sharp); + expect(obscureIconOn, findsOneWidget); + }); + + testWidgets('Test error message visibility', (WidgetTester tester) async { + String? testValidator(String? value) { + final regExp = RegExp(r'\d'); + if (value != null && regExp.hasMatch(value)) return 'Error'; + return null; + } + + await tester.pumpWidget( + TestWidget( + widget: ZetaPasswordInput( + controller: TextEditingController(), + validator: testValidator, + ), + ), + ); + + final passwordField = find.byType(TextFormField); + await tester.enterText(passwordField, 'password12'); + await tester.pump(); + + expect(find.text('Error'), findsOneWidget); + }); +} diff --git a/example/test/priority_pill_test.dart b/example/test/priority_pill_test.dart new file mode 100644 index 00000000..b2bd6557 --- /dev/null +++ b/example/test/priority_pill_test.dart @@ -0,0 +1,19 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import 'test_components.dart'; + +void main() { + testWidgets('Initializes with correct label and index', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaPriorityPill( + priority: 'High', + index: 2, + ), + ), + ); + expect(find.text('High'), findsOneWidget); + expect(find.text('2'), findsOneWidget); + }); +} diff --git a/example/test/spacing_test.dart b/example/test/spacing_test.dart deleted file mode 100644 index cc6cf27a..00000000 --- a/example/test/spacing_test.dart +++ /dev/null @@ -1,188 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_test/flutter_test.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; -import 'test_components.dart'; - -void main() { - const Widget testChild = Text('Item'); - const Key control = Key('control'); - - testWidgets('Square', (tester) async { - await tester.pumpWidget( - TestWidget( - widget: Column( - children: [ - const SizedBox(key: Key('1'), child: ZetaSpacing(testChild, size: Dimensions.x1)), - const SizedBox( - key: Key('2'), - child: ZetaSpacing.square(testChild, size: Dimensions.x1), - ), - SizedBox(key: const Key('3'), child: testChild.square(Dimensions.x1)), - SizedBox(key: const Key('4'), child: Padding(padding: Dimensions.x1.square, child: testChild)), - const SizedBox( - key: control, - child: Padding(padding: EdgeInsets.all(4), child: testChild), - ), - ], - ), - ), - ); - - final item1 = tester.getSize(find.byKey(const Key('1'))); - final item2 = tester.getSize(find.byKey(const Key('2'))); - final item3 = tester.getSize(find.byKey(const Key('3'))); - final item4 = tester.getSize(find.byKey(const Key('4'))); - final controlItem = tester.getSize(find.byKey(control)); - - // Test all spacing methods return same size widget - expect(item1, item2); - expect(item2, item3); - expect(item3, item4); - - // Test spacing component against known correct control item - expect(item1, controlItem); - }); - testWidgets('Squish', (tester) async { - await tester.pumpWidget( - TestWidget( - widget: Column( - children: [ - const SizedBox(key: Key('1'), child: ZetaSpacing.squish(testChild, size: Dimensions.x1)), - SizedBox(key: const Key('2'), child: testChild.squish(Dimensions.x1)), - SizedBox(key: const Key('3'), child: Padding(padding: Dimensions.x1.squish, child: testChild)), - const SizedBox( - key: control, - child: Padding(padding: EdgeInsets.symmetric(vertical: 4), child: testChild), - ), - ], - ), - ), - ); - - final item1 = tester.getSize(find.byKey(const Key('1'))); - final item2 = tester.getSize(find.byKey(const Key('2'))); - final item3 = tester.getSize(find.byKey(const Key('3'))); - final controlItem = tester.getSize(find.byKey(control)); - - // Test all spacing methods return same size widget - expect(item1, item2); - expect(item2, item3); - - // Test spacing component against known correct control item - expect(item1, controlItem); - }); - - testWidgets('Stack', (tester) async { - await tester.pumpWidget( - TestWidget( - widget: Column( - children: [ - const SizedBox(key: Key('1'), child: ZetaSpacing.stack(testChild, size: Dimensions.x1)), - SizedBox(key: const Key('2'), child: testChild.stack(Dimensions.x1)), - SizedBox(key: const Key('3'), child: Padding(padding: Dimensions.x1.stack, child: testChild)), - const SizedBox(key: control, child: Padding(padding: EdgeInsets.only(bottom: 4), child: testChild)), - ], - ), - ), - ); - - final item1 = tester.getSize(find.byKey(const Key('1'))); - final item2 = tester.getSize(find.byKey(const Key('2'))); - final item3 = tester.getSize(find.byKey(const Key('3'))); - final controlItem = tester.getSize(find.byKey(control)); - - // Test all spacing methods return same size widget - expect(item1, item2); - expect(item2, item3); - - // Test spacing component against known correct control item - expect(item1, controlItem); - }); - testWidgets('Inline', (tester) async { - await tester.pumpWidget( - TestWidget( - widget: Column( - children: [ - const SizedBox(key: Key('1'), child: ZetaSpacing.inline(testChild, size: Dimensions.x1)), - SizedBox(key: const Key('2'), child: testChild.inline(Dimensions.x1)), - SizedBox(key: const Key('3'), child: Padding(padding: Dimensions.x1.inline, child: testChild)), - const SizedBox( - key: control, - child: Padding(padding: EdgeInsets.symmetric(horizontal: 4), child: testChild), - ), - ], - ), - ), - ); - - final item1 = tester.getSize(find.byKey(const Key('1'))); - final item2 = tester.getSize(find.byKey(const Key('2'))); - final item3 = tester.getSize(find.byKey(const Key('3'))); - final controlItem = tester.getSize(find.byKey(control)); - - // Test all spacing methods return same size widget - expect(item1, item2); - expect(item2, item3); - - // Test spacing component against known correct control item - expect(item1, controlItem); - }); - testWidgets('Inline Start', (tester) async { - await tester.pumpWidget( - TestWidget( - widget: Column( - children: [ - const SizedBox(key: Key('1'), child: ZetaSpacing.inlineStart(testChild, size: Dimensions.x1)), - SizedBox(key: const Key('2'), child: testChild.inlineStart(Dimensions.x1)), - SizedBox(key: const Key('3'), child: Padding(padding: Dimensions.x1.inlineStart, child: testChild)), - const SizedBox( - key: control, - child: Padding(padding: EdgeInsetsDirectional.only(start: 4), child: testChild), - ), - ], - ), - ), - ); - - final item1 = tester.getSize(find.byKey(const Key('1'))); - final item2 = tester.getSize(find.byKey(const Key('2'))); - final item3 = tester.getSize(find.byKey(const Key('3'))); - final controlItem = tester.getSize(find.byKey(control)); - - // Test all spacing methods return same size widget - expect(item1, item2); - expect(item2, item3); - - // Test spacing component against known correct control item - expect(item1, controlItem); - }); - testWidgets('Inline end', (tester) async { - await tester.pumpWidget( - TestWidget( - widget: Column( - children: [ - const SizedBox(key: Key('1'), child: ZetaSpacing.inlineEnd(testChild, size: Dimensions.x1)), - SizedBox(key: const Key('2'), child: testChild.inlineEnd(Dimensions.x1)), - SizedBox(key: const Key('3'), child: Padding(padding: Dimensions.x1.inlineEnd, child: testChild)), - const SizedBox( - key: control, - child: Padding(padding: EdgeInsetsDirectional.only(end: 4), child: testChild), - ), - ], - ), - ), - ); - - final item1 = tester.getSize(find.byKey(const Key('1'))); - final item2 = tester.getSize(find.byKey(const Key('2'))); - final item3 = tester.getSize(find.byKey(const Key('3'))); - final controlItem = tester.getSize(find.byKey(control)); - - // Test all spacing methods return same size widget - expect(item1, item2); - expect(item2, item3); - - // Test spacing component against known correct control item - expect(item1, controlItem); - }); -} diff --git a/example/test/status_label_test.dart b/example/test/status_label_test.dart new file mode 100644 index 00000000..b1908792 --- /dev/null +++ b/example/test/status_label_test.dart @@ -0,0 +1,54 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; +import 'package:flutter/material.dart'; + +void main() { + group('ZetaStatusLabel Tests', () { + testWidgets('Initializes with correct properties', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidgetStatusLabel( + widget: ZetaStatusLabel(label: 'Test Label'), + ), + ); + expect(find.text('Test Label'), findsOneWidget); + }); + }); + + testWidgets('Initializes with correct label and custom icon', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidgetStatusLabel( + widget: ZetaStatusLabel( + label: 'Custom Icon', + customIcon: Icons.person, + ), + ), + ); + expect(find.text('Custom Icon'), findsOneWidget); + expect(find.byIcon(Icons.person), findsOneWidget); + }); +} + +class TestWidgetStatusLabel extends StatelessWidget { + final Widget widget; + + const TestWidgetStatusLabel({Key? key, required this.widget}); + + @override + Widget build(BuildContext context) { + return ZetaProvider( + builder: (context, theme, __) { + return Builder(builder: (context) { + return MaterialApp( + theme: ThemeData( + fontFamily: theme.fontFamily, + textTheme: zetaTextTheme, + ), + home: Scaffold( + body: widget, + ), + ); + }); + }, + ); + } +} diff --git a/example/test/tag_test.dart b/example/test/tag_test.dart new file mode 100644 index 00000000..6925b94c --- /dev/null +++ b/example/test/tag_test.dart @@ -0,0 +1,40 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import 'test_components.dart'; + +void main() { + group('ZetaCheckbox Tests', () { + testWidgets('Initializes with correct parameters', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaTag.right( + label: 'Tag', + ), + ), + ); + + expect(find.text('Tag'), findsOneWidget); + }); + + testWidgets('ZetaTag handles direction correctly', (WidgetTester tester) async { + const widgetLeft = TestWidget( + widget: ZetaTag( + label: 'Tag', + direction: ZetaTagDirection.left, + )); + + const widgetRight = TestWidget( + widget: ZetaTag( + label: 'Tag', + direction: ZetaTagDirection.right, + )); + + await tester.pumpWidget(widgetLeft); + expect(find.byType(ZetaTag), findsOneWidget); + + await tester.pumpWidget(widgetRight); + expect(find.byType(ZetaTag), findsOneWidget); + }); + }); +} diff --git a/example/test/test_components.dart b/example/test/test_components.dart index 117e5717..38c78b57 100644 --- a/example/test/test_components.dart +++ b/example/test/test_components.dart @@ -4,37 +4,49 @@ import 'package:zeta_flutter/zeta_flutter.dart'; class TestWidget extends StatelessWidget { final Size? screenSize; final Widget widget; + final ThemeMode? themeMode; + final bool removeBody; - const TestWidget({required this.widget, this.screenSize, super.key}); + const TestWidget({ + required this.widget, + this.screenSize, + super.key, + this.themeMode, + this.removeBody = false, + }); @override Widget build(BuildContext context) { final size = screenSize ?? const Size(1280, 720); return ZetaProvider( + initialThemeMode: themeMode ?? ThemeMode.system, builder: (context, theme, __) { return Builder( builder: (context) { return MaterialApp( + debugShowCheckedModeBanner: false, theme: ThemeData( fontFamily: theme.fontFamily, colorScheme: theme.colorsLight.toScheme(), - textTheme: ZetaText.textTheme, + textTheme: zetaTextTheme, ), darkTheme: ThemeData( fontFamily: theme.fontFamily, colorScheme: theme.colorsDark.toScheme(), - textTheme: ZetaText.textTheme, + textTheme: zetaTextTheme, ), home: Scaffold( - body: SizedBox( - width: size.width, - height: size.height, - child: MediaQuery( - data: MediaQueryData(size: Size(size.width, size.height)), - child: SingleChildScrollView(child: widget), - ), - ), + body: removeBody + ? widget + : SizedBox( + width: size.width, + height: size.height, + child: MediaQuery( + data: MediaQueryData(size: Size(size.width, size.height)), + child: SingleChildScrollView(child: widget), + ), + ), ), ); }, diff --git a/example/test/typography_test.dart b/example/test/typography_test.dart index b20074f0..6eec19ef 100644 --- a/example/test/typography_test.dart +++ b/example/test/typography_test.dart @@ -1,6 +1,7 @@ import 'package:flutter/material.dart'; import 'package:flutter_test/flutter_test.dart'; -import 'package:zeta_example/pages/typography_example.dart'; +import 'package:zeta_example/pages/theme/typography_example.dart'; + import 'package:zeta_flutter/zeta_flutter.dart'; import 'test_components.dart'; @@ -18,23 +19,14 @@ void main() { builder: (context) { return Column( children: [ - const ZetaText(exampleText, key: key1), - ZetaText( + const Text(exampleText, key: key1), + Text(exampleText, style: ZetaTextStyles.bodyMedium, key: key2), + Text(exampleText, style: ZetaTextStyles.displayLarge, key: key3), + Text( exampleText, - maxWidth: 66, - decoration: TextDecoration.underline, - key: key2, - upperCase: true, - fontSize: 100, - fontStyle: FontStyle.italic, - fontWeight: FontWeight.w500, - textColor: Zeta.of(context).colors.textSubtle, - textDirection: TextDirection.rtl, - first: true, - last: true, + style: TextStyle(fontSize: 52, fontWeight: FontWeight.w300, height: 64 / 52), + key: key4, ), - ZetaText(exampleText, style: ZetaText.zetaHeadingLarge, key: key3), - ZetaText.headingLarge(exampleText, key: key4), ], ); }, @@ -56,46 +48,19 @@ void main() { final InlineSpan text4 = (find.descendant(of: zetaText4, matching: find.byType(RichText)).evaluate().first.widget as RichText).text; - final Padding padding1 = - find.descendant(of: zetaText1, matching: find.byType(Padding)).evaluate().first.widget as Padding; - final Padding padding2 = - find.descendant(of: zetaText2, matching: find.byType(Padding)).evaluate().first.widget as Padding; + /// Test default in [Text] widget is [ZetaTextStyles.bodyMedium]. + expect(text1.style, text2.style); - final item1Size = tester.getSize(zetaText1); - final item2Size = tester.getSize(zetaText2); + /// Test that [ZetaTextStyles.displayLarge] has not changed. + expect(text3.style, text4.style); - expect(item1Size == item2Size, false); - expect(item2Size.width.floor(), 800); - expect( - TextStyle( - fontSize: text1.style?.fontSize, - height: text1.style?.height, - fontWeight: text1.style?.fontWeight, - ), - ZetaText.zetaBodyMedium, - ); - expect( - TextStyle( - fontSize: text2.style?.fontSize, - height: text2.style?.height, - fontWeight: text2.style?.fontWeight, - ) == - ZetaText.zetaBodyMedium, - false, - ); - expect(text1.style?.fontFamily, 'packages/zeta_flutter/IBMPlexSans'); - expect(text1.style?.color, const Color(0xFF1D1E23)); + /// Test font size of [ZetaTextStyles.bodyMedium] is correct + expect(text1.style!.fontSize, 14); + + /// Test line height of [ZetaTextStyles.bodyMedium] is correct + expect(text1.style!.height, 20 / 14); - expect(text1.style?.decoration, TextDecoration.none); - expect(text1.toPlainText(), exampleText); - expect(text2.toPlainText(), exampleText.toUpperCase()); - expect(text2.style?.decoration, TextDecoration.underline); - expect(text2.style?.fontSize, 100); - expect(text2.style?.fontStyle, FontStyle.italic); - expect(text2.style?.fontWeight, FontWeight.w500); - expect(text2.style?.color, const Color(0xFF545963)); - expect(padding1.padding, Dimensions.x2.squish); - expect(padding2.padding, EdgeInsets.zero); - expect(text3, text4); + /// Test font weight of [ZetaTextStyles.bodyMedium] is correct + expect(text1.style!.fontWeight, FontWeight.w400); }); } diff --git a/example/test/workcloud_indicator_test.dart b/example/test/workcloud_indicator_test.dart new file mode 100644 index 00000000..5d7ee833 --- /dev/null +++ b/example/test/workcloud_indicator_test.dart @@ -0,0 +1,15 @@ +import 'package:flutter_test/flutter_test.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import 'test_components.dart'; + +void main() { + testWidgets('ZetaWorkcloud creates priority pill', (WidgetTester tester) async { + await tester.pumpWidget( + TestWidget( + widget: ZetaWorkcloudIndicator(index: '1'), + ), + ); + expect(find.text('1'), findsOneWidget); + }); +} diff --git a/example/widgetbook/components/accordion_widgetbook.dart b/example/widgetbook/components/accordion_widgetbook.dart new file mode 100644 index 00000000..2cd130c5 --- /dev/null +++ b/example/widgetbook/components/accordion_widgetbook.dart @@ -0,0 +1,39 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent accordionWidgetBook() { + return WidgetbookComponent( + isInitiallyExpanded: false, + name: 'Accordion', + useCases: [ + WidgetbookUseCase( + name: 'Accordion', + builder: (context) => TestWidget( + themeMode: ThemeMode.dark, + widget: Padding( + padding: const EdgeInsets.all(20), + child: ZetaAccordion( + child: context.knobs.boolean(label: 'Disabled') + ? null + : Column( + children: [ + ListTile(title: Text('Item One')), + ListTile(title: Text('Item two')), + ListTile(title: Text('Item three')), + ListTile(title: Text('Item four')), + ], + ), + title: context.knobs.string(label: 'Accordion Title', initialValue: 'Title'), + contained: context.knobs.boolean(label: 'Contained', initialValue: false), + isOpen: context.knobs.boolean(label: 'Open', initialValue: false), + rounded: context.knobs.boolean(label: 'Rounded', initialValue: false), + ), + ), + ), + ), + ], + ); +} diff --git a/example/widgetbook/components/avatar_widgetbook.dart b/example/widgetbook/components/avatar_widgetbook.dart new file mode 100644 index 00000000..ff73ed42 --- /dev/null +++ b/example/widgetbook/components/avatar_widgetbook.dart @@ -0,0 +1,68 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent avatarWidgetBook() { + return WidgetbookComponent( + isInitiallyExpanded: false, + name: 'Avatar', + useCases: [ + WidgetbookUseCase( + name: 'Image Avatar', + builder: (context) { + final Widget image = Image.network('https://i.ytimg.com/vi/KItsWUzFUOs/maxresdefault.jpg', fit: BoxFit.cover); + + return TestWidget( + themeMode: ThemeMode.dark, + widget: Column( + children: [ + Padding( + padding: const EdgeInsets.all(20), + child: ZetaAvatar.image( + image: context.knobs.boolean(label: 'Image') ? image : null, + size: context.knobs.list(label: 'Size', options: ZetaAvatarSize.values), + lowerBadge: + context.knobs.boolean(label: 'Status Badge', initialValue: false) ? ZetaIndicator.icon() : null, + borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null), + upperBadge: context.knobs.boolean(label: 'Notification Badge', initialValue: false) + ? ZetaIndicator.notification() + : null, + ), + ), + ], + ), + ); + }, + ), + WidgetbookUseCase( + name: 'Initials Avatar', + builder: (context) { + return TestWidget( + themeMode: ThemeMode.dark, + widget: Column( + children: [ + Padding( + padding: const EdgeInsets.all(20), + child: ZetaAvatar.initials( + backgroundColor: context.knobs.colorOrNull(label: 'Background color', initialValue: null), + initials: context.knobs.stringOrNull(label: 'Initials', initialValue: 'AB'), + size: context.knobs.list(label: 'Size', options: ZetaAvatarSize.values), + lowerBadge: context.knobs.boolean(label: 'Status badge', initialValue: false) + ? ZetaIndicator.notification() + : null, + borderColor: context.knobs.colorOrNull(label: 'Outline', initialValue: null), + upperBadge: context.knobs.boolean(label: 'Notification badge', initialValue: false) + ? ZetaIndicator.icon() + : null, + ), + ), + ], + ), + ); + }, + ), + ], + ); +} diff --git a/example/widgetbook/components/badges_widgetbook.dart b/example/widgetbook/components/badges_widgetbook.dart new file mode 100644 index 00000000..6147d1bb --- /dev/null +++ b/example/widgetbook/components/badges_widgetbook.dart @@ -0,0 +1,183 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent badgeWidgetBook() { + return WidgetbookComponent( + isInitiallyExpanded: false, + name: 'Badges', + useCases: [ + WidgetbookUseCase( + name: 'Status Label', + builder: (context) { + return TestWidget( + themeMode: ThemeMode.dark, + widget: Column( + children: [ + Padding( + padding: EdgeInsets.all(20), + child: ZetaStatusLabel( + label: context.knobs.string(label: 'Label', initialValue: 'Label'), + rounded: context.knobs.boolean(label: 'Rounded'), + status: context.knobs.list(label: 'Status', options: ZetaWidgetStatus.values), + customIcon: context.knobs.list( + label: 'Icon', + options: [ + ZetaIcons.star_half_round, + ZetaIcons.add_alert_round, + ZetaIcons.add_box_round, + ZetaIcons.barcode_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + ), + ), + ), + ], + ), + ); + }, + ), + WidgetbookUseCase( + name: 'Priority Pill', + builder: (context) => TestWidget( + themeMode: ThemeMode.dark, + widget: Column( + children: [ + Padding( + padding: EdgeInsets.all(20), + child: ZetaPriorityPill( + index: context.knobs.int.slider(label: 'Index'), + priority: context.knobs.string(label: 'Priority', initialValue: 'Priority'), + rounded: context.knobs.boolean(label: 'Rounded'), + ), + ), + ], + ), + ), + ), + WidgetbookUseCase( + name: 'Badge', + builder: (context) => TestWidget( + themeMode: ThemeMode.dark, + widget: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.all(20), + child: ZetaBadge( + label: context.knobs.string(label: 'Label', initialValue: 'Label'), + rounded: context.knobs.boolean(label: 'Rounded'), + status: context.knobs.list(label: 'Status', options: ZetaWidgetStatus.values), + ), + ), + ], + ), + ), + ), + WidgetbookUseCase( + name: 'Indicators', + builder: (context) => TestWidget( + themeMode: ThemeMode.dark, + widget: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.all(20), + child: ZetaIndicator( + type: context.knobs.list(label: 'Type', options: ZetaIndicatorType.values), + icon: context.knobs.list( + label: 'Icon', + options: [ + Icon(ZetaIcons.star_half_round), + Icon(ZetaIcons.add_alert_round), + Icon(ZetaIcons.add_box_round), + Icon(ZetaIcons.barcode_round), + ], + labelBuilder: (value) { + if (value?.icon == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value?.icon == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value?.icon == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value?.icon == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + ), + inverse: context.knobs.boolean(label: 'Inverse Border'), + size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values), + value: context.knobs.int.slider(label: 'Value'), + ), + ), + ], + ), + ), + ), + WidgetbookUseCase( + name: 'Tags', + builder: (context) => TestWidget( + themeMode: ThemeMode.dark, + widget: Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.all(20), + child: ZetaTag( + label: context.knobs.string(label: 'Label', initialValue: 'Tag'), + rounded: context.knobs.boolean(label: 'Rounded'), + direction: context.knobs.list(label: 'Direction', options: ZetaTagDirection.values), + ), + ) + ], + ), + ), + ), + WidgetbookUseCase( + name: 'Workcloud Indicators', + builder: (context) => TestWidget( + themeMode: ThemeMode.dark, + widget: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Column( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: EdgeInsets.all(20), + child: ZetaWorkcloudIndicator( + index: context.knobs.string(label: 'Index', initialValue: '1'), + label: context.knobs.string(label: 'Label', initialValue: 'Label'), + prioritySize: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values), + priorityType: context.knobs.list(label: 'Type', options: ZetaWorkcloudIndicatorType.values), + icon: context.knobs.listOrNull( + label: 'Icon', + options: [ + ZetaIcons.star_half_round, + ZetaIcons.add_alert_round, + ZetaIcons.add_box_round, + ZetaIcons.barcode_round, + ], + initialOption: null, + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + )), + ) + ], + ), + ], + ), + ), + ), + ], + ); +} diff --git a/example/widgetbook/components/banner_widgetbook.dart b/example/widgetbook/components/banner_widgetbook.dart new file mode 100644 index 00000000..b6dceb62 --- /dev/null +++ b/example/widgetbook/components/banner_widgetbook.dart @@ -0,0 +1,109 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent BannerWidgetBook() { + return WidgetbookComponent( + isInitiallyExpanded: false, + name: 'Banners', + useCases: [ + WidgetbookUseCase( + name: 'System Banner', + builder: (context) => TestWidget( + widget: Padding( + padding: EdgeInsets.all(20), + child: Column( + children: [ + ZetaSystemBanner( + context: context, + title: context.knobs.string(label: 'Title', initialValue: 'Banner Title'), + type: context.knobs.list(label: 'Type', options: ZetaSystemBannerStatus.values), + leadingIcon: context.knobs.list( + label: 'Icon', + options: [ + ZetaIcons.star_half_round, + ZetaIcons.add_alert_round, + ZetaIcons.add_box_round, + ZetaIcons.barcode_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + ), + titleStart: context.knobs.boolean(label: 'Center title'), + trailing: context.knobs.boolean(label: 'Trailing Icon') + ? IconButton(icon: Icon(ZetaIcons.chevron_right_round), onPressed: () {}) + : null, + ), + ], + ), + ), + ), + ), + WidgetbookUseCase( + name: 'In Page Banner', + builder: (context) => TestWidget( + themeMode: ThemeMode.dark, + widget: Padding( + padding: EdgeInsets.all(20), + child: Column( + children: [ + ZetaInPageBanner( + content: Text( + context.knobs.string( + label: 'content', + initialValue: + 'Lorem ipsum dolor sit amet, conse ctetur cididunt ut labore et do lore magna aliqua.', + ), + ), + status: context.knobs.list(label: 'Severity', options: ZetaWidgetStatus.values), + onClose: context.knobs.boolean(label: 'Show Close icon') ? () {} : null, + title: context.knobs.string(label: 'Title', initialValue: 'Title'), + rounded: context.knobs.boolean(label: 'Rounded'), + actions: () { + final x = context.knobs.list(label: 'Show Buttons', options: [0, 1, 2]); + + if (x == 1) { + return [ + ZetaButton(label: 'Button 1', onPressed: () {}), + ]; + } + if (x == 2) { + return [ + ZetaButton(label: 'Button 1', onPressed: () {}), + ZetaButton(label: 'Button 2', onPressed: () {}) + ]; + } + return []; + }(), + customIcon: context.knobs.list( + label: 'Icon', + options: [ + ZetaIcons.star_half_round, + ZetaIcons.add_alert_round, + ZetaIcons.add_box_round, + ZetaIcons.barcode_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + ), + ) + ], + ), + ), + ), + ), + ], + ); +} diff --git a/example/widgetbook/components/bottom_sheet_widgetbook.dart b/example/widgetbook/components/bottom_sheet_widgetbook.dart new file mode 100644 index 00000000..2bb95e37 --- /dev/null +++ b/example/widgetbook/components/bottom_sheet_widgetbook.dart @@ -0,0 +1,63 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent bottomSheetWidgetBook() { + return WidgetbookComponent( + isInitiallyExpanded: false, + name: 'Bottom Sheet', + useCases: [ + WidgetbookUseCase( + name: 'Content', + builder: (context) => TestWidget( + themeMode: ThemeMode.dark, + widget: Padding( + padding: const EdgeInsets.all(20), + child: _bottomSheet(context), + ), + ), + ), + WidgetbookUseCase( + name: 'Live', + builder: (context) { + final sheet = _bottomSheet(context); + return TestWidget( + themeMode: ThemeMode.dark, + widget: Padding( + padding: const EdgeInsets.all(20), + child: ElevatedButton( + child: Text('Open'), + onPressed: () { + showModalBottomSheet(context: context, builder: (_) => sheet); + }, + ), + ), + ); + }, + ), + ], + ); +} + +ZetaBottomSheet _bottomSheet(BuildContext context) { + return ZetaBottomSheet( + centerTitle: context.knobs.boolean(label: 'Center title', initialValue: true), + title: context.knobs.string(label: 'Title', initialValue: 'Title'), + body: Wrap( + spacing: 12, + runSpacing: 12, + children: List.generate( + 6, + (index) => ZetaMenuItem( + type: context.knobs.boolean(label: 'Grid') ? ZetaMenuItemType.vertical : ZetaMenuItemType.horizontal, + leading: context.knobs.boolean(label: 'Leading Icon') ? Icon(ZetaIcons.star_round) : null, + trailing: context.knobs.boolean(label: 'Trailing Icon') ? Icon(ZetaIcons.chevron_right_round) : null, + label: Text('Menu Item'), + onTap: context.knobs.boolean(label: 'Disabled') ? null : () {}, + ), + ), + ), + ); +} diff --git a/example/widgetbook/components/button_widgetbook.dart b/example/widgetbook/components/button_widgetbook.dart new file mode 100644 index 00000000..2f3f3655 --- /dev/null +++ b/example/widgetbook/components/button_widgetbook.dart @@ -0,0 +1,101 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent buttonWidgetBook() { + return WidgetbookComponent( + name: 'Button', + isInitiallyExpanded: false, + useCases: [ + WidgetbookUseCase( + name: 'Button', + builder: (context) { + return TestWidget( + widget: Padding( + padding: EdgeInsets.all(20), + child: ZetaButton( + label: context.knobs.string(label: 'Text', initialValue: 'Button'), + onPressed: context.knobs.boolean(label: 'Disabled') ? null : () {}, + borderType: context.knobs.boolean(label: 'Rounded') ? ZetaWidgetBorder.rounded : ZetaWidgetBorder.sharp, + size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values), + type: context.knobs.list(label: 'Type', options: ZetaButtonType.values), + ), + ), + ); + }, + ), + WidgetbookUseCase( + name: 'Floating Action Button', + builder: (context) => TestWidget( + widget: Padding(padding: EdgeInsets.all(20), child: FabWidget(context)), + ), + ) + ], + ); +} + +class FabWidget extends StatefulWidget { + const FabWidget(this.c); + final BuildContext c; + + @override + State createState() => _FabWidgetState(); +} + +class _FabWidgetState extends State { + late ScrollController _scrollController; + + @override + void initState() { + super.initState(); + _scrollController = ScrollController(); + } + + @override + void dispose() { + _scrollController.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext _) { + return SizedBox( + height: MediaQuery.of(context).size.height * 0.9, + child: Scaffold( + body: ListView.builder( + itemCount: MediaQuery.of(context).size.height.toInt(), + controller: _scrollController, + itemBuilder: (context, index) { + return Text("$index"); + }, + ), + floatingActionButton: ZetaFAB( + scrollController: _scrollController, + label: widget.c.knobs.string(label: 'Label', initialValue: 'Floating Action Button'), + onPressed: widget.c.knobs.boolean(label: 'Disabled') ? null : () {}, + icon: widget.c.knobs.list( + label: 'Icon', + options: [ + ZetaIcons.star_half_round, + ZetaIcons.add_alert_round, + ZetaIcons.add_box_round, + ZetaIcons.barcode_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + ), + shape: widget.c.knobs.list(label: 'Shape', options: ZetaWidgetBorder.values), + size: widget.c.knobs.list(label: 'Shape', options: ZetaFabSize.values), + type: widget.c.knobs.list(label: 'Shape', options: ZetaFabType.values), + ), + ), + ); + } +} diff --git a/example/widgetbook/components/checkbox_widgetbook.dart b/example/widgetbook/components/checkbox_widgetbook.dart index 6909ee4e..5883b6d0 100644 --- a/example/widgetbook/components/checkbox_widgetbook.dart +++ b/example/widgetbook/components/checkbox_widgetbook.dart @@ -1,35 +1,29 @@ import 'package:flutter/material.dart'; import 'package:widgetbook/widgetbook.dart'; -import 'package:zeta_example/pages/checkbox_example.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; WidgetbookComponent checkboxWidgetBook() { return WidgetbookComponent( + isInitiallyExpanded: false, name: 'Checkbox', useCases: [ WidgetbookUseCase( - name: 'Checkbox (sharp)', - builder: (context) => SingleChildScrollView( - child: Padding( - padding: EdgeInsets.only(top: 10), - child: getCheckBoxRow(isEnabled: true), - ), - ), - ), - WidgetbookUseCase( - name: 'Checkbox (rounded)', - builder: (context) => SingleChildScrollView( - child: Padding( - padding: EdgeInsets.only(top: 10), - child: getCheckBoxRow(isEnabled: true, isSharp: false), - ), - ), - ), - WidgetbookUseCase( - name: 'Checkbox disabled (rounded)', - builder: (context) => SingleChildScrollView( - child: Padding( - padding: EdgeInsets.only(top: 10), - child: getCheckBoxRow(isEnabled: false, isSharp: false), + name: 'Checkbox', + builder: (context) => TestWidget( + widget: Column( + children: [ + Padding( + padding: EdgeInsets.only(top: 10), + child: ZetaCheckbox( + value: context.knobs.booleanOrNull(label: 'Checked'), + onChanged: context.knobs.boolean(label: 'Enabled', initialValue: true) ? (_) {} : null, + rounded: context.knobs.boolean(label: 'Rounded'), + label: context.knobs.string(label: 'Label', initialValue: 'Checkbox'), + ), + ), + ], ), ), ), diff --git a/example/widgetbook/components/chip_widgetbook.dart b/example/widgetbook/components/chip_widgetbook.dart new file mode 100644 index 00000000..072617dc --- /dev/null +++ b/example/widgetbook/components/chip_widgetbook.dart @@ -0,0 +1,83 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent chipWidgetBook() { + return WidgetbookComponent( + isInitiallyExpanded: false, + name: 'Chip', + useCases: [ + WidgetbookUseCase( + name: 'Input Chip', + builder: (context) { + final trailing = context.knobs.listOrNull( + label: 'Icon', + options: [ + ZetaIcons.star_half_round, + ZetaIcons.add_alert_round, + ZetaIcons.add_box_round, + ZetaIcons.barcode_round, + ], + initialOption: null, + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + ); + return TestWidget( + widget: ZetaInputChip( + label: context.knobs.string(label: 'Label', initialValue: 'Label'), + leading: context.knobs.boolean(label: 'Avatar') + ? ZetaAvatar( + initials: 'AZ', + size: ZetaAvatarSize.xs, + ) + : null, + rounded: context.knobs.boolean(label: 'Rounded'), + trailing: trailing != null ? Icon(trailing) : null, + ), + ); + }, + ), + WidgetbookUseCase( + name: 'Filter Chip', + builder: (context) => TestWidget( + widget: Padding( + padding: const EdgeInsets.all(20), + child: Column( + children: [ + ZetaFilterChip( + label: context.knobs.string(label: 'Label', initialValue: 'Label'), + rounded: context.knobs.boolean(label: 'Rounded'), + selected: context.knobs.boolean(label: 'Selected'), + ) + ], + ), + ), + ), + ), + WidgetbookUseCase( + name: 'Assist Chip', + builder: (context) => TestWidget( + widget: Padding( + padding: const EdgeInsets.all(20), + child: Column( + children: [ + ZetaAssistChip( + label: context.knobs.string(label: 'Label', initialValue: 'Label'), + rounded: context.knobs.boolean(label: 'Rounded'), + leading: context.knobs.boolean(label: 'Icon') ? Icon(ZetaIcons.star_round) : null, + ) + ], + ), + ), + ), + ), + ], + ); +} diff --git a/example/widgetbook/components/color_widgetbook.dart b/example/widgetbook/components/color_widgetbook.dart deleted file mode 100644 index 3c4ef757..00000000 --- a/example/widgetbook/components/color_widgetbook.dart +++ /dev/null @@ -1,129 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:widgetbook/widgetbook.dart'; -import 'package:zeta_example/pages/color_example.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; - -WidgetbookComponent colorWidgetBook() { - return WidgetbookComponent( - name: 'Colors', - useCases: [ - WidgetbookUseCase( - name: 'Colors', - builder: (BuildContext context) { - final colors = Zeta.of(context).colors; - - return LayoutBuilder( - builder: (context, constraints) { - final Map swatches = { - 'Blue': colors.blue, - 'Green': colors.green, - 'Red': colors.red, - 'Orange': colors.orange, - 'Purple': colors.purple, - 'Yellow': colors.yellow, - 'Teal': colors.teal, - 'Pink': colors.pink, - 'Grey Warm': colors.warm, - 'Grey Cool': colors.cool, - }; - final Map textIcon = { - 'textDefault': colors.textDefault, - 'textSubtle': colors.textSubtle, - 'textDisabled': colors.textDisabled, - 'textInverse': colors.textInverse, - }; - final Map border = { - 'borderDefault': colors.borderDefault, - 'borderSubtle': colors.borderSubtle, - 'borderDisabled': colors.borderDisabled, - 'borderSelected': colors.borderSelected, - }; - final Map links = { - 'linkDefault': colors.link, - 'linkVisited': colors.linkVisited, - }; - final Map backdrop = { - 'surfacePrimary': colors.surfacePrimary, - 'surfaceDisabled': colors.surfaceDisabled, - 'surfaceHovered': colors.surfaceHovered, - 'surfaceSecondary': colors.surfaceSecondary, - 'surfaceTertiary': colors.surfaceTertiary, - 'surfaceSelectedHovered': colors.surfaceSelectedHovered, - 'surfaceSelected': colors.surfaceSelected, - }; - - final Map alerts = { - 'positive': colors.positive, - 'negative': colors.negative, - 'warning': colors.warning, - 'info': colors.info, - }; - - return ZetaProvider( - builder: (context3, _, __) { - return Container( - padding: const EdgeInsets.symmetric(horizontal: Dimensions.l), - child: SingleChildScrollView( - child: Column( - children: [ - const SizedBox(height: Dimensions.l), - MyRow(children: textIcon, title: 'Text and icon styles'), - MyRow(children: border, title: 'Border styles'), - MyRow(children: links, title: 'Links'), - MyRow(children: backdrop, title: 'Backdrop colors'), - MyRow(children: alerts, title: 'Alert colors'), - Row(children: [ZetaText.displayMedium('Full color swatches')]).squish(Dimensions.x8), - ...swatches.entries.map( - (value) { - return Row( - children: List.generate(10, (index) => 100 - (10 * index)).map( - (e) { - return Expanded( - child: Container( - height: constraints.maxWidth / 10, - color: value.value[e], - child: FittedBox( - fit: BoxFit.scaleDown, - child: Column( - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - DefaultTextStyle( - style: ZetaText.zetaBodyMedium.copyWith( - color: calculateTextColor(value.value[e] ?? Colors.white), - ), - child: Column( - children: [ - Text('${value.key.toLowerCase().replaceAll(' ', '')}-$e'), - Text( - value.value[e] - .toString() - .replaceAll('Color(0xff', '#') - .substring(0, 7), - ), - ], - ), - ), - ], - ), - ), - ), - ); - }, - ).toList(), - ); - }, - ), - const SizedBox(height: Dimensions.l), - ], - ), - ), - ); - }, - ); - }, - ); - }, - ) - ], - ); -} diff --git a/example/widgetbook/components/grid_widgetbook.dart b/example/widgetbook/components/grid_widgetbook.dart deleted file mode 100644 index 72409360..00000000 --- a/example/widgetbook/components/grid_widgetbook.dart +++ /dev/null @@ -1,84 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:widgetbook/widgetbook.dart' hide DeviceType; -import 'package:zeta_example/pages/grid_example.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; - -WidgetbookComponent gridWidgetBook() { - return WidgetbookComponent( - name: 'Grid', - useCases: [ - WidgetbookUseCase( - name: 'Basic Grid', - builder: (context) => SingleChildScrollView( - child: ZetaGrid( - col: context.knobs.double.slider(label: 'col', min: 2, max: 16, divisions: 7, initialValue: 12), - noGaps: context.knobs.boolean(label: 'No Gaps'), - children: List.generate(16, (index) => const GridItem()), - ), - ), - ), - WidgetbookUseCase( - name: 'Asymmetrical Grid', - builder: (context) => SingleChildScrollView( - child: ZetaGrid( - asymmetricWeight: context.knobs.double.slider(label: 'Asymmetric', min: 1, max: 11, divisions: 10).toInt(), - noGaps: context.knobs.boolean(label: 'No Gaps'), - children: List.generate(16, (index) => const GridItem()), - ), - ), - ), - WidgetbookUseCase( - name: 'Hybrid Grid', - builder: (context) => LayoutBuilder( - builder: (context, constraints) { - final double initialSize = constraints.maxWidth * 0.01; - final double maxSize = (constraints.maxWidth - (context.knobs.boolean(label: 'No Gaps') ? 0 : 40)) * 0.2; - - return ZetaGrid( - noGaps: context.knobs.boolean(label: 'No Gaps'), - col: 7, - hybrid: true, - children: [ - GridItem( - width: context.knobs.double - .slider(label: 'Fixed width 1', min: 1, max: maxSize, initialValue: initialSize), - label: 'Fixed 1', - ), - Flexible( - fit: FlexFit.tight, - flex: context.knobs.double.slider(label: 'Flex width 1', min: 0, max: 5, initialValue: 1).toInt(), - child: const GridItem(label: 'Flex 1'), - ), - GridItem( - width: context.knobs.double - .slider(label: 'Fixed width 2', min: 1, max: maxSize, initialValue: initialSize), - label: 'Fixed 2', - ), - Flexible( - fit: FlexFit.tight, - flex: context.knobs.double.slider(label: 'Flex width 2', min: 0, max: 5, initialValue: 1).toInt(), - child: const GridItem(label: 'Flex 2'), - ), - GridItem( - width: context.knobs.double - .slider(label: 'Fixed width 3', min: 1, max: maxSize, initialValue: initialSize), - label: 'Fixed 3', - ), - Flexible( - fit: FlexFit.tight, - flex: context.knobs.double.slider(label: 'Flex width 3', min: 0, max: 5, initialValue: 1).toInt(), - child: const GridItem(label: 'Flex 3'), - ), - GridItem( - width: context.knobs.double - .slider(label: 'Fixed width 4', min: 1, max: maxSize, initialValue: initialSize), - label: 'Fixed 4', - ), - ], - ); - }, - ), - ) - ], - ); -} diff --git a/example/widgetbook/components/password_input_widgetbook.dart b/example/widgetbook/components/password_input_widgetbook.dart new file mode 100644 index 00000000..fdfe3c5b --- /dev/null +++ b/example/widgetbook/components/password_input_widgetbook.dart @@ -0,0 +1,82 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +import '../../test/test_components.dart'; + +WidgetbookComponent passwordInputWidgetBook() { + return WidgetbookComponent( + name: 'Password Input', + isInitiallyExpanded: false, + useCases: [ + WidgetbookUseCase( + name: 'Password Input', + builder: (context) { + return _Password(); + }, + ), + ], + ); +} + +class _Password extends StatefulWidget { + const _Password(); + + @override + State<_Password> createState() => _PasswordState(); +} + +class _PasswordState extends State<_Password> { + final _passwordController = TextEditingController(); + final _formKey = GlobalKey(); + + @override + Widget build(BuildContext _) { + final enableValidation = context.knobs.boolean(label: 'Enable validation', initialValue: false); + final validationString = context.knobs.string(label: 'Error label', initialValue: 'Incorrect'); + return Form( + key: _formKey, + child: TestWidget( + widget: Padding( + padding: EdgeInsets.all(ZetaSpacing.x5), + child: Column( + children: [ + ConstrainedBox( + constraints: BoxConstraints(maxWidth: 328), + child: ZetaPasswordInput( + rounded: context.knobs.boolean(label: 'Rounded'), + enabled: context.knobs.boolean(label: 'Enabled', initialValue: true), + obscureText: context.knobs.boolean(label: 'Obscure text', initialValue: true), + size: context.knobs.list(label: 'Size', options: ZetaWidgetSize.values), + footerIcon: context.knobs.listOrNull( + label: 'Icon', + options: [ + ZetaIcons.star_half_round, + ZetaIcons.add_alert_round, + ZetaIcons.add_box_round, + ZetaIcons.barcode_round, + ], + labelBuilder: (value) { + if (value == ZetaIcons.star_half_round) return 'ZetaIcons.star_half_round'; + if (value == ZetaIcons.add_alert_round) return 'ZetaIcons.add_alert_round'; + if (value == ZetaIcons.add_box_round) return 'ZetaIcons.add_box_round'; + if (value == ZetaIcons.barcode_round) return 'ZetaIcons.barcode_round'; + return ''; + }, + initialOption: null, + ), + footerText: context.knobs.string(label: 'Footer Text'), + hintText: context.knobs.string(label: 'Hint text'), + label: context.knobs.string(label: 'Label'), + onChanged: (_) => _formKey.currentState?.validate(), + validator: (_) => enableValidation ? validationString : null, + controller: _passwordController, + ), + ), + ], + ), + ), + ), + ); + } +} diff --git a/example/widgetbook/components/spacing_widgetbook.dart b/example/widgetbook/components/spacing_widgetbook.dart deleted file mode 100644 index 95117c91..00000000 --- a/example/widgetbook/components/spacing_widgetbook.dart +++ /dev/null @@ -1,119 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:widgetbook/widgetbook.dart' hide DeviceType; -import 'package:zeta_example/pages/spacing_example.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; - -const List typeSelector = [ - ZetaSpacingType.square, - ZetaSpacingType.squish, - ZetaSpacingType.inline, - ZetaSpacingType.inlineStart, - ZetaSpacingType.inlineEnd, - ZetaSpacingType.stack, -]; -WidgetbookComponent spacingWidgetbook() { - final tShirtSizes = { - 'xxs': Dimensions.xxs, - 'xs': Dimensions.xs, - 's': Dimensions.s, - 'm': Dimensions.m, - 'l': Dimensions.l, - 'xl': Dimensions.xl, - 'xxl': Dimensions.xxl, - 'xxxl': Dimensions.xxxl, - }; - return WidgetbookComponent( - name: 'Spacing', - useCases: [ - WidgetbookUseCase( - name: 'Defined numbers', - builder: (context) => SingleChildScrollView( - child: Row( - children: [ - Expanded( - child: ColoredBox( - color: const Color(0xFFcce2fa), - child: ZetaSpacing( - const SpacingItem(), - size: context.knobs.list( - label: 'Size', - labelBuilder: (p0) => 'x${p0 ~/ 4}', - options: const [ - Dimensions.x0, - Dimensions.x1, - Dimensions.x2, - Dimensions.x3, - Dimensions.x3, - Dimensions.x4, - Dimensions.x5, - Dimensions.x6, - Dimensions.x7, - Dimensions.x8, - Dimensions.x9, - Dimensions.x10, - Dimensions.x12, - Dimensions.x16, - Dimensions.x20, - Dimensions.x24, - ], - ), - type: context.knobs.list(label: 'Spacing Type', options: typeSelector), - ), - ), - ), - ], - ), - ), - ), - WidgetbookUseCase( - name: 'T-Shirt Sizes', - builder: (context) => SingleChildScrollView( - child: Row( - children: [ - Expanded( - child: ColoredBox( - color: const Color(0xFFcce2fa), - child: ZetaSpacing( - const SpacingItem(), - size: context.knobs.list( - label: 'Size', - labelBuilder: (p0) => tShirtSizes.entries.firstWhere((element) => element.value == p0).key, - options: tShirtSizes.values.toList(), - ), - type: context.knobs.list(label: 'Spacing Type', options: typeSelector), - ), - ), - ), - ], - ), - ), - ), - WidgetbookUseCase( - name: 'Numbers', - builder: (context) => SingleChildScrollView( - child: Row( - children: [ - Expanded( - child: ColoredBox( - color: const Color(0xFFcce2fa), - child: ZetaSpacing( - const SpacingItem(), - size: (context.knobs.double.slider( - label: 'Size (rounding to nearest even int)', - min: 0, - max: 96, - initialValue: 0, - ) ~/ - 2) * - 2, - type: context.knobs.list(label: 'Spacing Type', options: typeSelector), - ), - ), - ), - ], - ), - ), - ), - ], - ); -} diff --git a/example/widgetbook/components/typography_widgetbook.dart b/example/widgetbook/components/typography_widgetbook.dart deleted file mode 100644 index d7f5949b..00000000 --- a/example/widgetbook/components/typography_widgetbook.dart +++ /dev/null @@ -1,114 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:widgetbook/widgetbook.dart'; -import 'package:zeta_example/pages/typography_example.dart'; -import 'package:zeta_flutter/zeta_flutter.dart'; - -WidgetbookComponent textWidgetBook() { - final dedicatedSizes = { - 'Body small': ZetaText.zetaBodySmall, - 'Body medium': ZetaText.zetaBodyMedium, - 'Body large': ZetaText.zetaBodyLarge, - 'Headline small': ZetaText.zetaHeadingSmall, - 'Headline medium': ZetaText.zetaHeadingMedium, - 'Headline large': ZetaText.zetaHeadingLarge, - 'Display small': ZetaText.zetaDisplaySmall, - 'Display medium': ZetaText.zetaDisplayMedium, - 'Display large': ZetaText.zetaDisplayLarge, - }; - return WidgetbookComponent( - name: 'Typography', - useCases: [ - WidgetbookUseCase( - name: 'Tokens', - builder: (context) => const _TextWrapper(), - ), - WidgetbookUseCase( - name: 'Universal sizes', - builder: (context) => Container( - color: Theme.of(context).colorScheme.background, - padding: const EdgeInsets.all(Dimensions.l), - child: ZetaText( - exampleText, - fontSize: context.knobs.list( - label: 'Sizes', - labelBuilder: (p0) => p0 == 14 ? 'x3_5' : 'x${p0! ~/ 4}', - options: const [ - Dimensions.x3, - Dimensions.x3_5, - Dimensions.x4, - Dimensions.x5, - Dimensions.x6, - Dimensions.x7, - Dimensions.x8, - Dimensions.x9, - Dimensions.x10, - Dimensions.x11, - Dimensions.x12, - Dimensions.x13, - ], - ), - ), - ), - ), - WidgetbookUseCase( - name: 'Dedicated sizes', - builder: (context) => Container( - color: Theme.of(context).colorScheme.background, - padding: const EdgeInsets.all(Dimensions.l), - child: ZetaText( - exampleText, - style: context.knobs.list( - label: 'Sizes', - labelBuilder: (p0) => dedicatedSizes.entries.firstWhere((element) => element.value == p0).key, - options: dedicatedSizes.values.toList(), - ), - ), - ), - ), - ], - ); -} - -class _TextWrapper extends StatelessWidget { - const _TextWrapper(); - - @override - Widget build(BuildContext context) { - final colors = Zeta.of(context).colors; - return Container( - padding: const EdgeInsets.all(Dimensions.l), - child: ZetaText( - context.knobs.string(label: 'Input text', initialValue: exampleText.split(',').first), - decoration: context.knobs.boolean(label: 'Underline') ? TextDecoration.underline : null, - first: context.knobs.boolean(label: 'First'), - last: context.knobs.boolean(label: 'Last'), - fontStyle: context.knobs.boolean(label: 'Italic') ? FontStyle.italic : null, - fontWeight: context.knobs.list( - label: 'Font Weight', - labelBuilder: (p0) => p0 == FontWeight.w400 - ? 'Default' - : p0 == FontWeight.w300 - ? 'Light' - : 'Medium', - options: const [FontWeight.w400, FontWeight.w300, FontWeight.w500], - ), - resetHeight: context.knobs.boolean(label: 'Reset height'), - textColor: context.knobs.list( - label: 'Text color', - labelBuilder: (p0) => p0?.value == colors.textDefault.value ? 'Default' : 'Subtle', - options: [colors.textDefault, colors.textSubtle], - ), - textDirection: context.knobs.list( - label: 'Text direction', - options: const [ - TextDirection.ltr, - TextDirection.rtl, - ], - ), - upperCase: context.knobs.boolean(label: 'Upper case'), - maxWidth: context.knobs.double.slider(label: 'Width', initialValue: 66, max: 100, min: 10, divisions: 90), - fontSize: context.knobs.double.slider(label: 'Font size', initialValue: 12, divisions: 42, min: 12, max: 96), - ), - ); - } -} diff --git a/example/widgetbook/theme/color_widgetbook.dart b/example/widgetbook/theme/color_widgetbook.dart new file mode 100644 index 00000000..8beaf9cb --- /dev/null +++ b/example/widgetbook/theme/color_widgetbook.dart @@ -0,0 +1,144 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; +import 'package:zeta_example/pages/theme/color_example.dart'; +import 'package:zeta_flutter/zeta_flutter.dart'; + +WidgetbookComponent colorWidgetBook() { + return WidgetbookComponent( + name: 'Colors', + useCases: [ + WidgetbookUseCase( + name: 'Light Mode', + builder: (BuildContext context) { + return ZetaProvider( + initialThemeMode: ThemeMode.light, + builder: (_, __, ___) => ColorBody(), + ); + }, + ), + WidgetbookUseCase( + name: 'Dark Mode', + builder: (BuildContext context) { + return ZetaProvider( + initialThemeMode: ThemeMode.dark, + builder: (_, __, ___) => ColorBody(), + ); + }, + ) + ], + ); +} + +class ColorBody extends StatelessWidget { + const ColorBody({ + super.key, + }); + + @override + Widget build(BuildContext context) { + return LayoutBuilder(builder: (_, constraints) { + final colors = Zeta.of(context).colors; + + final Map swatches = { + 'Blue': colors.blue, + 'Green': colors.green, + 'Red': colors.red, + 'Orange': colors.orange, + 'Purple': colors.purple, + 'Yellow': colors.yellow, + 'Teal': colors.teal, + 'Pink': colors.pink, + 'Grey Warm': colors.warm, + 'Grey Cool': colors.cool, + }; + final Map textIcon = { + 'textDefault': colors.textDefault, + 'textSubtle': colors.textSubtle, + 'textDisabled': colors.textDisabled, + 'textInverse': colors.textInverse, + }; + final Map border = { + 'borderDefault': colors.borderDefault, + 'borderSubtle': colors.borderSubtle, + 'borderDisabled': colors.borderDisabled, + 'borderSelected': colors.borderSelected, + }; + final Map links = { + 'linkDefault': colors.link, + 'linkVisited': colors.linkVisited, + }; + final Map backdrop = { + 'surfacePrimary': colors.surfacePrimary, + 'surfaceDisabled': colors.surfaceDisabled, + 'surfaceHovered': colors.surfaceHovered, + 'surfaceSecondary': colors.surfaceSecondary, + 'surfaceTertiary': colors.surfaceTertiary, + 'surfaceSelectedHovered': colors.surfaceSelectedHovered, + 'surfaceSelected': colors.surfaceSelected, + }; + + final Map alerts = { + 'positive': colors.positive, + 'negative': colors.negative, + 'warning': colors.warning, + 'info': colors.info, + }; + + return Container( + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.l), + child: SingleChildScrollView( + child: Column( + children: [ + const SizedBox(height: ZetaSpacing.l), + MyRow(children: textIcon, title: 'Text and icon styles'), + MyRow(children: border, title: 'Border styles'), + MyRow(children: links, title: 'Links'), + MyRow(children: backdrop, title: 'Backdrop colors'), + MyRow(children: alerts, title: 'Alert colors'), + Row(children: [Text('Full color swatches', style: ZetaTextStyles.displayMedium)]) + .paddingVertical(ZetaSpacing.x8), + ...swatches.entries.map( + (value) { + return Row( + children: List.generate(10, (index) => 100 - (10 * index)).map( + (e) { + return Expanded( + child: Container( + height: constraints.maxWidth / 10, + color: value.value[e], + child: FittedBox( + fit: BoxFit.scaleDown, + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + DefaultTextStyle( + style: ZetaTextStyles.bodyMedium.copyWith( + color: calculateTextColor(value.value[e] ?? Colors.white), + ), + child: Column( + children: [ + Text('${value.key.toLowerCase().replaceAll(' ', '')}-$e'), + Text( + value.value[e].toString().replaceAll('Color(0xff', '#').substring(0, 7), + ), + ], + ), + ), + ], + ), + ), + ), + ); + }, + ).toList(), + ); + }, + ), + const SizedBox(height: ZetaSpacing.l), + ], + ), + ), + ); + }); + } +} diff --git a/example/widgetbook/theme/typography_widgetbook.dart b/example/widgetbook/theme/typography_widgetbook.dart new file mode 100644 index 00000000..6eb20fe5 --- /dev/null +++ b/example/widgetbook/theme/typography_widgetbook.dart @@ -0,0 +1,46 @@ +import 'package:flutter/material.dart'; +import 'package:widgetbook/widgetbook.dart'; + +import 'package:zeta_flutter/zeta_flutter.dart'; + +WidgetbookComponent textWidgetBook() { + final dedicatedSizes = { + 'Display large': ZetaTextStyles.displayLarge, + 'Display medium': ZetaTextStyles.displayMedium, + 'Display small': ZetaTextStyles.displaySmall, + 'Heading 1': ZetaTextStyles.heading1, + 'Heading 2': ZetaTextStyles.heading2, + 'Heading 3': ZetaTextStyles.heading3, + 'Title large': ZetaTextStyles.titleLarge, + 'Title medium': ZetaTextStyles.titleMedium, + 'Title small': ZetaTextStyles.titleSmall, + 'Body large': ZetaTextStyles.bodyLarge, + 'Body medium': ZetaTextStyles.bodyMedium, + 'Body small': ZetaTextStyles.bodySmall, + 'Label large': ZetaTextStyles.labelLarge, + 'Label medium': ZetaTextStyles.labelMedium, + 'Label small': ZetaTextStyles.labelSmall, + 'Label indicator': ZetaTextStyles.labelIndicator, + 'Label tiny': ZetaTextStyles.labelTiny, + }; + return WidgetbookComponent( + name: 'Typography', + useCases: [ + WidgetbookUseCase( + name: 'Text styles', + builder: (context) => Container( + color: Theme.of(context).colorScheme.background, + padding: const EdgeInsets.all(ZetaSpacing.l), + child: Text( + context.knobs.string(label: 'Text', initialValue: 'The quick brown fox jumps over the lazy dog.'), + style: context.knobs.list( + label: 'Sizes', + labelBuilder: (p0) => dedicatedSizes.entries.firstWhere((element) => element.value == p0).key, + options: dedicatedSizes.values.toList(), + ), + ), + ), + ), + ], + ); +} diff --git a/example/widgetbook/widgetbook.dart b/example/widgetbook/widgetbook.dart index df609965..507d869a 100644 --- a/example/widgetbook/widgetbook.dart +++ b/example/widgetbook/widgetbook.dart @@ -2,11 +2,17 @@ import 'package:flutter/material.dart'; import 'package:widgetbook/widgetbook.dart'; import 'package:zeta_flutter/zeta_flutter.dart'; +import 'components/accordion_widgetbook.dart'; +import 'components/avatar_widgetbook.dart'; +import 'components/badges_widgetbook.dart'; +import 'components/bottom_sheet_widgetbook.dart'; +import 'components/button_widgetbook.dart'; import 'components/checkbox_widgetbook.dart'; -import 'components/color_widgetbook.dart'; -import 'components/grid_widgetbook.dart'; -import 'components/spacing_widgetbook.dart'; -import 'components/typography_widgetbook.dart'; +import 'theme/color_widgetbook.dart'; +import 'components/banner_widgetbook.dart'; +import 'components/chip_widgetbook.dart'; +import 'components/password_input_widgetbook.dart'; +import 'theme/typography_widgetbook.dart'; import 'utils/zebra.dart'; class HotReload extends StatelessWidget { @@ -19,14 +25,24 @@ class HotReload extends StatelessWidget { return Widgetbook.material( directories: [ WidgetbookCategory( - name: 'widgets', + name: 'Components', + isInitiallyExpanded: false, children: [ - gridWidgetBook(), - spacingWidgetbook(), - textWidgetBook(), - colorWidgetBook(), - checkboxWidgetBook() - ], + badgeWidgetBook(), + avatarWidgetBook(), + checkboxWidgetBook(), + buttonWidgetBook(), + BannerWidgetBook(), + accordionWidgetBook(), + chipWidgetBook(), + passwordInputWidgetBook(), + bottomSheetWidgetBook(), + ]..sort((a, b) => a.name.compareTo(b.name)), + ), + WidgetbookCategory( + name: 'Theme', + isInitiallyExpanded: false, + children: [textWidgetBook(), colorWidgetBook(), checkboxWidgetBook()], ), ], addons: [ diff --git a/firebase.json b/firebase.json new file mode 100644 index 00000000..4a130f50 --- /dev/null +++ b/firebase.json @@ -0,0 +1,11 @@ +{ + "hosting": { + "public": "build", + "rewrites": [ + { + "source": "**", + "destination": "/index.html" + } + ] + } +} \ No newline at end of file diff --git a/lib/src/assets/fonts/zeta-icons-round.ttf b/lib/src/assets/fonts/zeta-icons-round.ttf new file mode 100644 index 00000000..2ae882a0 Binary files /dev/null and b/lib/src/assets/fonts/zeta-icons-round.ttf differ diff --git a/lib/src/assets/fonts/zeta-icons-sharp.ttf b/lib/src/assets/fonts/zeta-icons-sharp.ttf new file mode 100644 index 00000000..f21be8b4 Binary files /dev/null and b/lib/src/assets/fonts/zeta-icons-sharp.ttf differ diff --git a/lib/src/assets/icons.dart b/lib/src/assets/icons.dart new file mode 100644 index 00000000..682fc135 --- /dev/null +++ b/lib/src/assets/icons.dart @@ -0,0 +1,1008 @@ +// ignore_for_file: public_member_api_docs, constant_identifier_names + +import 'package:flutter/material.dart'; + +class ZetaIcons { + ZetaIcons._(); + static const String _familyRound = 'zeta-icons-round'; + static const String _familySharp = 'zeta-icons-sharp'; + static const String _package = 'zeta_flutter'; + + // round + static const IconData alarm_round = IconData(0xe001, fontFamily: _familyRound, fontPackage: _package); + static const IconData ar_round = IconData(0xe002, fontFamily: _familyRound, fontPackage: _package); + static const IconData bookmark_outline_round = IconData(0xe003, fontFamily: _familyRound, fontPackage: _package); + static const IconData bookmark_round = IconData(0xe004, fontFamily: _familyRound, fontPackage: _package); + static const IconData build_round = IconData(0xe005, fontFamily: _familyRound, fontPackage: _package); + static const IconData cached_round = IconData(0xe006, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_3_day_round = IconData(0xe007, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_alt_1_round = IconData(0xe008, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_alt_2_round = IconData(0xe009, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_available_round = IconData(0xe00a, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_cancel_round = IconData(0xe00b, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_day_round = IconData(0xe00c, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_edit_round = IconData(0xe00d, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_monthly_alt_round = IconData(0xe00e, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_monthly_round = IconData(0xe00f, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_range_round = IconData(0xe010, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_round = IconData(0xe011, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_weekly_alt_round = IconData(0xe012, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_weekly_round = IconData(0xe013, fontFamily: _familyRound, fontPackage: _package); + static const IconData calendar_yearly_round = IconData(0xe014, fontFamily: _familyRound, fontPackage: _package); + static const IconData check_circle_outline_alt_round = + IconData(0xe015, fontFamily: _familyRound, fontPackage: _package); + static const IconData check_circle_outline_round = IconData(0xe016, fontFamily: _familyRound, fontPackage: _package); + static const IconData check_circle_round = IconData(0xe017, fontFamily: _familyRound, fontPackage: _package); + static const IconData check_mark_round = IconData(0xe018, fontFamily: _familyRound, fontPackage: _package); + static const IconData clipboard_round = IconData(0xe019, fontFamily: _familyRound, fontPackage: _package); + static const IconData clock_outline_round = IconData(0xe01a, fontFamily: _familyRound, fontPackage: _package); + static const IconData clock_round = IconData(0xe01b, fontFamily: _familyRound, fontPackage: _package); + static const IconData credit_card_round = IconData(0xe01c, fontFamily: _familyRound, fontPackage: _package); + static const IconData delete_forever_round = IconData(0xe01d, fontFamily: _familyRound, fontPackage: _package); + static const IconData delete_outline_round = IconData(0xe01e, fontFamily: _familyRound, fontPackage: _package); + static const IconData delete_round = IconData(0xe01f, fontFamily: _familyRound, fontPackage: _package); + static const IconData dislike_action_round = IconData(0xe020, fontFamily: _familyRound, fontPackage: _package); + static const IconData document_round = IconData(0xe021, fontFamily: _familyRound, fontPackage: _package); + static const IconData download_round = IconData(0xe022, fontFamily: _familyRound, fontPackage: _package); + static const IconData filter_alt_round = IconData(0xe023, fontFamily: _familyRound, fontPackage: _package); + static const IconData filter_round = IconData(0xe024, fontFamily: _familyRound, fontPackage: _package); + static const IconData hand_round = IconData(0xe025, fontFamily: _familyRound, fontPackage: _package); + static const IconData history_round = IconData(0xe026, fontFamily: _familyRound, fontPackage: _package); + static const IconData home_round = IconData(0xe027, fontFamily: _familyRound, fontPackage: _package); + static const IconData info_round = IconData(0xe028, fontFamily: _familyRound, fontPackage: _package); + static const IconData label_round = IconData(0xe029, fontFamily: _familyRound, fontPackage: _package); + static const IconData like_action_round = IconData(0xe02a, fontFamily: _familyRound, fontPackage: _package); + static const IconData lock_alt_round = IconData(0xe02b, fontFamily: _familyRound, fontPackage: _package); + static const IconData lock_round = IconData(0xe02c, fontFamily: _familyRound, fontPackage: _package); + static const IconData log_in_round = IconData(0xe02d, fontFamily: _familyRound, fontPackage: _package); + static const IconData log_out_round = IconData(0xe02e, fontFamily: _familyRound, fontPackage: _package); + static const IconData love_outline_round = IconData(0xe02f, fontFamily: _familyRound, fontPackage: _package); + static const IconData love_round = IconData(0xe030, fontFamily: _familyRound, fontPackage: _package); + static const IconData open_in_full_round = IconData(0xe031, fontFamily: _familyRound, fontPackage: _package); + static const IconData open_in_new_window_round = IconData(0xe032, fontFamily: _familyRound, fontPackage: _package); + static const IconData pending_round = IconData(0xe033, fontFamily: _familyRound, fontPackage: _package); + static const IconData pin_round = IconData(0xe034, fontFamily: _familyRound, fontPackage: _package); + static const IconData price_round = IconData(0xe035, fontFamily: _familyRound, fontPackage: _package); + static const IconData renew_round = IconData(0xe036, fontFamily: _familyRound, fontPackage: _package); + static const IconData search_round = IconData(0xe037, fontFamily: _familyRound, fontPackage: _package); + static const IconData security_check_round = IconData(0xe038, fontFamily: _familyRound, fontPackage: _package); + static const IconData settings_round = IconData(0xe039, fontFamily: _familyRound, fontPackage: _package); + static const IconData sync_action_round = IconData(0xe03a, fontFamily: _familyRound, fontPackage: _package); + static const IconData touch_round = IconData(0xe03b, fontFamily: _familyRound, fontPackage: _package); + static const IconData trending_down_round = IconData(0xe03c, fontFamily: _familyRound, fontPackage: _package); + static const IconData trending_up_round = IconData(0xe03d, fontFamily: _familyRound, fontPackage: _package); + static const IconData unlock_alt_round = IconData(0xe03e, fontFamily: _familyRound, fontPackage: _package); + static const IconData unlock_round = IconData(0xe03f, fontFamily: _familyRound, fontPackage: _package); + static const IconData update_round = IconData(0xe040, fontFamily: _familyRound, fontPackage: _package); + static const IconData upload_round = IconData(0xe041, fontFamily: _familyRound, fontPackage: _package); + static const IconData user_circle_round = IconData(0xe042, fontFamily: _familyRound, fontPackage: _package); + static const IconData user_round = IconData(0xe043, fontFamily: _familyRound, fontPackage: _package); + static const IconData user_settings_round = IconData(0xe044, fontFamily: _familyRound, fontPackage: _package); + static const IconData verified_round = IconData(0xe045, fontFamily: _familyRound, fontPackage: _package); + static const IconData visibility_off_round = IconData(0xe046, fontFamily: _familyRound, fontPackage: _package); + static const IconData visibility_round = IconData(0xe047, fontFamily: _familyRound, fontPackage: _package); + static const IconData world_action_round = IconData(0xe048, fontFamily: _familyRound, fontPackage: _package); + static const IconData zoom_in_round = IconData(0xe049, fontFamily: _familyRound, fontPackage: _package); + static const IconData zoom_out_round = IconData(0xe04a, fontFamily: _familyRound, fontPackage: _package); + static const IconData add_alert_round = IconData(0xe04b, fontFamily: _familyRound, fontPackage: _package); + static const IconData alert_round = IconData(0xe04c, fontFamily: _familyRound, fontPackage: _package); + static const IconData auto_delete_round = IconData(0xe04d, fontFamily: _familyRound, fontPackage: _package); + static const IconData error_outline_round = IconData(0xe04e, fontFamily: _familyRound, fontPackage: _package); + static const IconData error_round = IconData(0xe04f, fontFamily: _familyRound, fontPackage: _package); + static const IconData important_notification_round = + IconData(0xe050, fontFamily: _familyRound, fontPackage: _package); + static const IconData warning_outline_round = IconData(0xe051, fontFamily: _familyRound, fontPackage: _package); + static const IconData warning_round = IconData(0xe052, fontFamily: _familyRound, fontPackage: _package); + static const IconData block_round = IconData(0xe053, fontFamily: _familyRound, fontPackage: _package); + static const IconData closed_caption_round = IconData(0xe054, fontFamily: _familyRound, fontPackage: _package); + static const IconData fast_forward_round = IconData(0xe055, fontFamily: _familyRound, fontPackage: _package); + static const IconData fast_rewind_round = IconData(0xe056, fontFamily: _familyRound, fontPackage: _package); + static const IconData loop_round = IconData(0xe057, fontFamily: _familyRound, fontPackage: _package); + static const IconData microphone_off_round = IconData(0xe058, fontFamily: _familyRound, fontPackage: _package); + static const IconData microphone_outline_round = IconData(0xe059, fontFamily: _familyRound, fontPackage: _package); + static const IconData microphone_round = IconData(0xe05a, fontFamily: _familyRound, fontPackage: _package); + static const IconData pause_circle_round = IconData(0xe05b, fontFamily: _familyRound, fontPackage: _package); + static const IconData pause_round = IconData(0xe05c, fontFamily: _familyRound, fontPackage: _package); + static const IconData play_circle_round = IconData(0xe05d, fontFamily: _familyRound, fontPackage: _package); + static const IconData play_outline_round = IconData(0xe05e, fontFamily: _familyRound, fontPackage: _package); + static const IconData play_round = IconData(0xe05f, fontFamily: _familyRound, fontPackage: _package); + static const IconData replay_round = IconData(0xe060, fontFamily: _familyRound, fontPackage: _package); + static const IconData skip_next_round = IconData(0xe061, fontFamily: _familyRound, fontPackage: _package); + static const IconData skip_previous_round = IconData(0xe062, fontFamily: _familyRound, fontPackage: _package); + static const IconData stop_circle_round = IconData(0xe063, fontFamily: _familyRound, fontPackage: _package); + static const IconData stop_round = IconData(0xe064, fontFamily: _familyRound, fontPackage: _package); + static const IconData video_camera_round = IconData(0xe065, fontFamily: _familyRound, fontPackage: _package); + static const IconData volume_down_round = IconData(0xe066, fontFamily: _familyRound, fontPackage: _package); + static const IconData volume_mute_round = IconData(0xe067, fontFamily: _familyRound, fontPackage: _package); + static const IconData volume_off_round = IconData(0xe068, fontFamily: _familyRound, fontPackage: _package); + static const IconData volume_up_round = IconData(0xe069, fontFamily: _familyRound, fontPackage: _package); + static const IconData add_call_round = IconData(0xe06a, fontFamily: _familyRound, fontPackage: _package); + static const IconData chat_bubble_outline_round = IconData(0xe06b, fontFamily: _familyRound, fontPackage: _package); + static const IconData chat_bubble_round = IconData(0xe06c, fontFamily: _familyRound, fontPackage: _package); + static const IconData conversation_round = IconData(0xe06d, fontFamily: _familyRound, fontPackage: _package); + static const IconData dialpad_round = IconData(0xe06e, fontFamily: _familyRound, fontPackage: _package); + static const IconData do_not_disturb_round = IconData(0xe06f, fontFamily: _familyRound, fontPackage: _package); + static const IconData dollar_round = IconData(0xe070, fontFamily: _familyRound, fontPackage: _package); + static const IconData email_alt_round = IconData(0xe071, fontFamily: _familyRound, fontPackage: _package); + static const IconData email_outline_round = IconData(0xe072, fontFamily: _familyRound, fontPackage: _package); + static const IconData email_round = IconData(0xe073, fontFamily: _familyRound, fontPackage: _package); + static const IconData end_call_round = IconData(0xe074, fontFamily: _familyRound, fontPackage: _package); + static const IconData message_round = IconData(0xe075, fontFamily: _familyRound, fontPackage: _package); + static const IconData person_search_round = IconData(0xe076, fontFamily: _familyRound, fontPackage: _package); + static const IconData phone_bluetooth_speaker_round = + IconData(0xe077, fontFamily: _familyRound, fontPackage: _package); + static const IconData phone_in_talk_round = IconData(0xe078, fontFamily: _familyRound, fontPackage: _package); + static const IconData phone_round = IconData(0xe079, fontFamily: _familyRound, fontPackage: _package); + static const IconData priority_round = IconData(0xe07a, fontFamily: _familyRound, fontPackage: _package); + static const IconData qr_code_round = IconData(0xe07b, fontFamily: _familyRound, fontPackage: _package); + static const IconData qr_code_scan_round = IconData(0xe07c, fontFamily: _familyRound, fontPackage: _package); + static const IconData rss_feed_round = IconData(0xe07d, fontFamily: _familyRound, fontPackage: _package); + static const IconData sd_card_round = IconData(0xe07e, fontFamily: _familyRound, fontPackage: _package); + static const IconData sim_card_round = IconData(0xe07f, fontFamily: _familyRound, fontPackage: _package); + static const IconData sms_round = IconData(0xe080, fontFamily: _familyRound, fontPackage: _package); + static const IconData sync_disabled_round = IconData(0xe081, fontFamily: _familyRound, fontPackage: _package); + static const IconData sync_round = IconData(0xe082, fontFamily: _familyRound, fontPackage: _package); + static const IconData add_box_round = IconData(0xe083, fontFamily: _familyRound, fontPackage: _package); + static const IconData add_circle_outline_round = IconData(0xe084, fontFamily: _familyRound, fontPackage: _package); + static const IconData add_circle_round = IconData(0xe085, fontFamily: _familyRound, fontPackage: _package); + static const IconData add_round = IconData(0xe086, fontFamily: _familyRound, fontPackage: _package); + static const IconData analysis_round = IconData(0xe087, fontFamily: _familyRound, fontPackage: _package); + static const IconData android_round = IconData(0xe088, fontFamily: _familyRound, fontPackage: _package); + static const IconData backspace_round = IconData(0xe089, fontFamily: _familyRound, fontPackage: _package); + static const IconData block_content_round = IconData(0xe08a, fontFamily: _familyRound, fontPackage: _package); + static const IconData clear_round = IconData(0xe08b, fontFamily: _familyRound, fontPackage: _package); + static const IconData content_round = IconData(0xe08c, fontFamily: _familyRound, fontPackage: _package); + static const IconData copy_file_round = IconData(0xe08d, fontFamily: _familyRound, fontPackage: _package); + static const IconData create_round = IconData(0xe08e, fontFamily: _familyRound, fontPackage: _package); + static const IconData filter_list_round = IconData(0xe08f, fontFamily: _familyRound, fontPackage: _package); + static const IconData flag_round = IconData(0xe090, fontFamily: _familyRound, fontPackage: _package); + static const IconData link_content_round = IconData(0xe091, fontFamily: _familyRound, fontPackage: _package); + static const IconData mail_round = IconData(0xe092, fontFamily: _familyRound, fontPackage: _package); + static const IconData push_pin_round = IconData(0xe093, fontFamily: _familyRound, fontPackage: _package); + static const IconData redo_round = IconData(0xe094, fontFamily: _familyRound, fontPackage: _package); + static const IconData remove_box_round = IconData(0xe095, fontFamily: _familyRound, fontPackage: _package); + static const IconData remove_circle_outline_round = IconData(0xe096, fontFamily: _familyRound, fontPackage: _package); + static const IconData remove_circle_round = IconData(0xe097, fontFamily: _familyRound, fontPackage: _package); + static const IconData remove_round = IconData(0xe098, fontFamily: _familyRound, fontPackage: _package); + static const IconData reply_round = IconData(0xe099, fontFamily: _familyRound, fontPackage: _package); + static const IconData save_alt_round = IconData(0xe09a, fontFamily: _familyRound, fontPackage: _package); + static const IconData save_round = IconData(0xe09b, fontFamily: _familyRound, fontPackage: _package); + static const IconData send_round = IconData(0xe09c, fontFamily: _familyRound, fontPackage: _package); + static const IconData sort_round = IconData(0xe09d, fontFamily: _familyRound, fontPackage: _package); + static const IconData undo_round = IconData(0xe09e, fontFamily: _familyRound, fontPackage: _package); + static const IconData antenna_round = IconData(0xe09f, fontFamily: _familyRound, fontPackage: _package); + static const IconData battery_alert_round = IconData(0xe0a0, fontFamily: _familyRound, fontPackage: _package); + static const IconData battery_charging_round = IconData(0xe0a1, fontFamily: _familyRound, fontPackage: _package); + static const IconData battery_round = IconData(0xe0a2, fontFamily: _familyRound, fontPackage: _package); + static const IconData bluetooth_disabled_round = IconData(0xe0a3, fontFamily: _familyRound, fontPackage: _package); + static const IconData bluetooth_round = IconData(0xe0a4, fontFamily: _familyRound, fontPackage: _package); + static const IconData bluetooth_searching_round = IconData(0xe0a5, fontFamily: _familyRound, fontPackage: _package); + static const IconData brightness_round = IconData(0xe0a6, fontFamily: _familyRound, fontPackage: _package); + static const IconData cellular_signal_round = IconData(0xe0a7, fontFamily: _familyRound, fontPackage: _package); + static const IconData chain_round = IconData(0xe0a8, fontFamily: _familyRound, fontPackage: _package); + static const IconData contrast_round = IconData(0xe0a9, fontFamily: _familyRound, fontPackage: _package); + static const IconData dark_mode_round = IconData(0xe0aa, fontFamily: _familyRound, fontPackage: _package); + static const IconData devices_round = IconData(0xe0ab, fontFamily: _familyRound, fontPackage: _package); + static const IconData ethernet_round = IconData(0xe0ac, fontFamily: _familyRound, fontPackage: _package); + static const IconData flight_mode_round = IconData(0xe0ad, fontFamily: _familyRound, fontPackage: _package); + static const IconData hdmi_round = IconData(0xe0ae, fontFamily: _familyRound, fontPackage: _package); + static const IconData light_mode_round = IconData(0xe0af, fontFamily: _familyRound, fontPackage: _package); + static const IconData location_point_round = IconData(0xe0b0, fontFamily: _familyRound, fontPackage: _package); + static const IconData location_round = IconData(0xe0b1, fontFamily: _familyRound, fontPackage: _package); + static const IconData mobile_friendly_round = IconData(0xe0b2, fontFamily: _familyRound, fontPackage: _package); + static const IconData network_signal_round = IconData(0xe0b3, fontFamily: _familyRound, fontPackage: _package); + static const IconData nfc_round = IconData(0xe0b4, fontFamily: _familyRound, fontPackage: _package); + static const IconData night_round = IconData(0xe0b5, fontFamily: _familyRound, fontPackage: _package); + static const IconData restart_alt_round = IconData(0xe0b6, fontFamily: _familyRound, fontPackage: _package); + static const IconData screen_rotation_round = IconData(0xe0b7, fontFamily: _familyRound, fontPackage: _package); + static const IconData uhf_rfid_round = IconData(0xe0b8, fontFamily: _familyRound, fontPackage: _package); + static const IconData usb_alt_device_round = IconData(0xe0b9, fontFamily: _familyRound, fontPackage: _package); + static const IconData usb_alt_round = IconData(0xe0ba, fontFamily: _familyRound, fontPackage: _package); + static const IconData usb_round = IconData(0xe0bb, fontFamily: _familyRound, fontPackage: _package); + static const IconData volte_round = IconData(0xe0bc, fontFamily: _familyRound, fontPackage: _package); + static const IconData appgallery_round = IconData(0xe0bd, fontFamily: _familyRound, fontPackage: _package); + static const IconData application_analytics_round = IconData(0xe0be, fontFamily: _familyRound, fontPackage: _package); + static const IconData asset_tracker_lite_round = IconData(0xe0bf, fontFamily: _familyRound, fontPackage: _package); + static const IconData blood_bag_plus_round = IconData(0xe0c0, fontFamily: _familyRound, fontPackage: _package); + static const IconData bluetooth_management_round = IconData(0xe0c1, fontFamily: _familyRound, fontPackage: _package); + static const IconData browser_print_round = IconData(0xe0c2, fontFamily: _familyRound, fontPackage: _package); + static const IconData cloud_connect_round = IconData(0xe0c3, fontFamily: _familyRound, fontPackage: _package); + static const IconData data_wedge_round = IconData(0xe0c4, fontFamily: _familyRound, fontPackage: _package); + static const IconData design_tools_round = IconData(0xe0c5, fontFamily: _familyRound, fontPackage: _package); + static const IconData device_tracker_round = IconData(0xe0c6, fontFamily: _familyRound, fontPackage: _package); + static const IconData direct_connect_round = IconData(0xe0c7, fontFamily: _familyRound, fontPackage: _package); + static const IconData emdk_round = IconData(0xe0c8, fontFamily: _familyRound, fontPackage: _package); + static const IconData enterprise_browser_round = IconData(0xe0c9, fontFamily: _familyRound, fontPackage: _package); + static const IconData enterprise_connectors_round = IconData(0xe0ca, fontFamily: _familyRound, fontPackage: _package); + static const IconData enterprise_keyboard_round = IconData(0xe0cb, fontFamily: _familyRound, fontPackage: _package); + static const IconData gms_restricted_mode_round = IconData(0xe0cc, fontFamily: _familyRound, fontPackage: _package); + static const IconData intelligent_document_capture_round = + IconData(0xe0cd, fontFamily: _familyRound, fontPackage: _package); + static const IconData label_plus_round = IconData(0xe0ce, fontFamily: _familyRound, fontPackage: _package); + static const IconData life_guard_round = IconData(0xe0cf, fontFamily: _familyRound, fontPackage: _package); + static const IconData link_os_round = IconData(0xe0d0, fontFamily: _familyRound, fontPackage: _package); + static const IconData mdm_connectors_round = IconData(0xe0d1, fontFamily: _familyRound, fontPackage: _package); + static const IconData mdm_toolkit_round = IconData(0xe0d2, fontFamily: _familyRound, fontPackage: _package); + static const IconData mobility_dna_round = IconData(0xe0d3, fontFamily: _familyRound, fontPackage: _package); + static const IconData mobility_security_round = IconData(0xe0d4, fontFamily: _familyRound, fontPackage: _package); + static const IconData multi_code_data_formatting_round = + IconData(0xe0d5, fontFamily: _familyRound, fontPackage: _package); + static const IconData mx_round = IconData(0xe0d6, fontFamily: _familyRound, fontPackage: _package); + static const IconData ocr_round = IconData(0xe0d7, fontFamily: _familyRound, fontPackage: _package); + static const IconData oem_config_round = IconData(0xe0d8, fontFamily: _familyRound, fontPackage: _package); + static const IconData pairing_solutions_round = IconData(0xe0d9, fontFamily: _familyRound, fontPackage: _package); + static const IconData pdf_direct_round = IconData(0xe0da, fontFamily: _familyRound, fontPackage: _package); + static const IconData power_precision_round = IconData(0xe0db, fontFamily: _familyRound, fontPackage: _package); + static const IconData preferred_symbol_round = IconData(0xe0dc, fontFamily: _familyRound, fontPackage: _package); + static const IconData print_secure_round = IconData(0xe0dd, fontFamily: _familyRound, fontPackage: _package); + static const IconData print_station_round = IconData(0xe0de, fontFamily: _familyRound, fontPackage: _package); + static const IconData printer_profile_manager_round = + IconData(0xe0df, fontFamily: _familyRound, fontPackage: _package); + static const IconData przm_round = IconData(0xe0e0, fontFamily: _familyRound, fontPackage: _package); + static const IconData remote_control_round = IconData(0xe0e1, fontFamily: _familyRound, fontPackage: _package); + static const IconData remote_diagnostics_round = IconData(0xe0e2, fontFamily: _familyRound, fontPackage: _package); + static const IconData remote_management_round = IconData(0xe0e3, fontFamily: _familyRound, fontPackage: _package); + static const IconData rx_round = IconData(0xe0e4, fontFamily: _familyRound, fontPackage: _package); + static const IconData scan_and_pair_round = IconData(0xe0e5, fontFamily: _familyRound, fontPackage: _package); + static const IconData scan_speed_analytics_round = IconData(0xe0e6, fontFamily: _familyRound, fontPackage: _package); + static const IconData scan_to_connect_round = IconData(0xe0e7, fontFamily: _familyRound, fontPackage: _package); + static const IconData scanner_control_application_round = + IconData(0xe0e8, fontFamily: _familyRound, fontPackage: _package); + static const IconData setting_tool_round = IconData(0xe0e9, fontFamily: _familyRound, fontPackage: _package); + static const IconData simulscan_round = IconData(0xe0ea, fontFamily: _familyRound, fontPackage: _package); + static const IconData smart_te_lite_round = IconData(0xe0eb, fontFamily: _familyRound, fontPackage: _package); + static const IconData smart_te_round = IconData(0xe0ec, fontFamily: _familyRound, fontPackage: _package); + static const IconData smart_tek_round = IconData(0xe0ed, fontFamily: _familyRound, fontPackage: _package); + static const IconData smartdex_round = IconData(0xe0ee, fontFamily: _familyRound, fontPackage: _package); + static const IconData stagenow_round = IconData(0xe0ef, fontFamily: _familyRound, fontPackage: _package); + static const IconData swipe_assist_round = IconData(0xe0f0, fontFamily: _familyRound, fontPackage: _package); + static const IconData tekspeech_pro_round = IconData(0xe0f1, fontFamily: _familyRound, fontPackage: _package); + static const IconData virtual_devices_round = IconData(0xe0f2, fontFamily: _familyRound, fontPackage: _package); + static const IconData virtual_tether_round = IconData(0xe0f3, fontFamily: _familyRound, fontPackage: _package); + static const IconData visibility_services_round = IconData(0xe0f4, fontFamily: _familyRound, fontPackage: _package); + static const IconData voice_wedge_round = IconData(0xe0f5, fontFamily: _familyRound, fontPackage: _package); + static const IconData workforce_connect_round = IconData(0xe0f6, fontFamily: _familyRound, fontPackage: _package); + static const IconData workstation_connect_round = IconData(0xe0f7, fontFamily: _familyRound, fontPackage: _package); + static const IconData zebra_designer_round = IconData(0xe0f8, fontFamily: _familyRound, fontPackage: _package); + static const IconData zebra_onecare_round = IconData(0xe0f9, fontFamily: _familyRound, fontPackage: _package); + static const IconData zebra_setup_utility_round = IconData(0xe0fa, fontFamily: _familyRound, fontPackage: _package); + static const IconData zero_touch_round = IconData(0xe0fb, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_center_round = IconData(0xe0fc, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_horizontal_center_round = + IconData(0xe0fd, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_horizontal_left_round = IconData(0xe0fe, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_horizontal_right_round = + IconData(0xe0ff, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_left_round = IconData(0xe100, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_right_round = IconData(0xe101, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_vertical_bottom_round = IconData(0xe102, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_vertical_center_round = IconData(0xe103, fontFamily: _familyRound, fontPackage: _package); + static const IconData align_vertical_top_round = IconData(0xe104, fontFamily: _familyRound, fontPackage: _package); + static const IconData attach_round = IconData(0xe105, fontFamily: _familyRound, fontPackage: _package); + static const IconData bold_round = IconData(0xe106, fontFamily: _familyRound, fontPackage: _package); + static const IconData bullet_list_round = IconData(0xe107, fontFamily: _familyRound, fontPackage: _package); + static const IconData checklist_round = IconData(0xe108, fontFamily: _familyRound, fontPackage: _package); + static const IconData color_fill_round = IconData(0xe109, fontFamily: _familyRound, fontPackage: _package); + static const IconData distribute_horizontal_round = IconData(0xe10a, fontFamily: _familyRound, fontPackage: _package); + static const IconData distribute_vertical_round = IconData(0xe10b, fontFamily: _familyRound, fontPackage: _package); + static const IconData edit_border_round = IconData(0xe10c, fontFamily: _familyRound, fontPackage: _package); + static const IconData edit_round = IconData(0xe10d, fontFamily: _familyRound, fontPackage: _package); + static const IconData font_size_decrease_round = IconData(0xe10e, fontFamily: _familyRound, fontPackage: _package); + static const IconData font_size_increase_round = IconData(0xe10f, fontFamily: _familyRound, fontPackage: _package); + static const IconData format_shapes_round = IconData(0xe110, fontFamily: _familyRound, fontPackage: _package); + static const IconData indent_decrease_round = IconData(0xe111, fontFamily: _familyRound, fontPackage: _package); + static const IconData indent_increase_round = IconData(0xe112, fontFamily: _familyRound, fontPackage: _package); + static const IconData italic_round = IconData(0xe113, fontFamily: _familyRound, fontPackage: _package); + static const IconData justify_round = IconData(0xe114, fontFamily: _familyRound, fontPackage: _package); + static const IconData line_spacing_round = IconData(0xe115, fontFamily: _familyRound, fontPackage: _package); + static const IconData link_round = IconData(0xe116, fontFamily: _familyRound, fontPackage: _package); + static const IconData no_color_round = IconData(0xe117, fontFamily: _familyRound, fontPackage: _package); + static const IconData numbered_list_round = IconData(0xe118, fontFamily: _familyRound, fontPackage: _package); + static const IconData strikethrough_round = IconData(0xe119, fontFamily: _familyRound, fontPackage: _package); + static const IconData text_color_round = IconData(0xe11a, fontFamily: _familyRound, fontPackage: _package); + static const IconData type_round = IconData(0xe11b, fontFamily: _familyRound, fontPackage: _package); + static const IconData underline_round = IconData(0xe11c, fontFamily: _familyRound, fontPackage: _package); + static const IconData barcode_bluetooth_round = IconData(0xe11d, fontFamily: _familyRound, fontPackage: _package); + static const IconData barcode_done_round = IconData(0xe11e, fontFamily: _familyRound, fontPackage: _package); + static const IconData barcode_image_scan_round = IconData(0xe11f, fontFamily: _familyRound, fontPackage: _package); + static const IconData barcode_qr_code_round = IconData(0xe120, fontFamily: _familyRound, fontPackage: _package); + static const IconData barcode_round = IconData(0xe121, fontFamily: _familyRound, fontPackage: _package); + static const IconData barcode_scanner_down_round = IconData(0xe122, fontFamily: _familyRound, fontPackage: _package); + static const IconData barcode_settings_round = IconData(0xe123, fontFamily: _familyRound, fontPackage: _package); + static const IconData calculator_round = IconData(0xe124, fontFamily: _familyRound, fontPackage: _package); + static const IconData card_orientation_round = IconData(0xe125, fontFamily: _familyRound, fontPackage: _package); + static const IconData card_with_chip_round = IconData(0xe126, fontFamily: _familyRound, fontPackage: _package); + static const IconData certificate_round = IconData(0xe127, fontFamily: _familyRound, fontPackage: _package); + static const IconData choices_round = IconData(0xe128, fontFamily: _familyRound, fontPackage: _package); + static const IconData contactless_pay_round = IconData(0xe129, fontFamily: _familyRound, fontPackage: _package); + static const IconData credit_card_swipe_round = IconData(0xe12a, fontFamily: _familyRound, fontPackage: _package); + static const IconData eas_round = IconData(0xe12b, fontFamily: _familyRound, fontPackage: _package); + static const IconData enterprise_diagnostics_round = + IconData(0xe12c, fontFamily: _familyRound, fontPackage: _package); + static const IconData environmental_round = IconData(0xe12d, fontFamily: _familyRound, fontPackage: _package); + static const IconData factory_round = IconData(0xe12e, fontFamily: _familyRound, fontPackage: _package); + static const IconData freezer_round = IconData(0xe12f, fontFamily: _familyRound, fontPackage: _package); + static const IconData issue_audit_round = IconData(0xe130, fontFamily: _familyRound, fontPackage: _package); + static const IconData performance_round = IconData(0xe131, fontFamily: _familyRound, fontPackage: _package); + static const IconData planogram_round = IconData(0xe132, fontFamily: _familyRound, fontPackage: _package); + static const IconData productivity_apps_round = IconData(0xe133, fontFamily: _familyRound, fontPackage: _package); + static const IconData receipt_round = IconData(0xe134, fontFamily: _familyRound, fontPackage: _package); + static const IconData retail_round = IconData(0xe135, fontFamily: _familyRound, fontPackage: _package); + static const IconData road_map_round = IconData(0xe136, fontFamily: _familyRound, fontPackage: _package); + static const IconData rules_round = IconData(0xe137, fontFamily: _familyRound, fontPackage: _package); + static const IconData scan_rate_round = IconData(0xe138, fontFamily: _familyRound, fontPackage: _package); + static const IconData shape_recognition_round = IconData(0xe139, fontFamily: _familyRound, fontPackage: _package); + static const IconData solutions_round = IconData(0xe13a, fontFamily: _familyRound, fontPackage: _package); + static const IconData steps_round = IconData(0xe13b, fontFamily: _familyRound, fontPackage: _package); + static const IconData strategy_round = IconData(0xe13c, fontFamily: _familyRound, fontPackage: _package); + static const IconData tap_to_pay_round = IconData(0xe13d, fontFamily: _familyRound, fontPackage: _package); + static const IconData zero_scale_round = IconData(0xe13e, fontFamily: _familyRound, fontPackage: _package); + static const IconData attachment_round = IconData(0xe13f, fontFamily: _familyRound, fontPackage: _package); + static const IconData cloud_done_round = IconData(0xe140, fontFamily: _familyRound, fontPackage: _package); + static const IconData cloud_download_round = IconData(0xe141, fontFamily: _familyRound, fontPackage: _package); + static const IconData cloud_off_round = IconData(0xe142, fontFamily: _familyRound, fontPackage: _package); + static const IconData cloud_outline_round = IconData(0xe143, fontFamily: _familyRound, fontPackage: _package); + static const IconData cloud_round = IconData(0xe144, fontFamily: _familyRound, fontPackage: _package); + static const IconData cloud_upload_round = IconData(0xe145, fontFamily: _familyRound, fontPackage: _package); + static const IconData create_new_folder_round = IconData(0xe146, fontFamily: _familyRound, fontPackage: _package); + static const IconData doc_attach_round = IconData(0xe147, fontFamily: _familyRound, fontPackage: _package); + static const IconData downloading_round = IconData(0xe148, fontFamily: _familyRound, fontPackage: _package); + static const IconData file_download_round = IconData(0xe149, fontFamily: _familyRound, fontPackage: _package); + static const IconData file_upload_round = IconData(0xe14a, fontFamily: _familyRound, fontPackage: _package); + static const IconData finished_download_round = IconData(0xe14b, fontFamily: _familyRound, fontPackage: _package); + static const IconData folder_outline_round = IconData(0xe14c, fontFamily: _familyRound, fontPackage: _package); + static const IconData folder_round = IconData(0xe14d, fontFamily: _familyRound, fontPackage: _package); + static const IconData grid_view_round = IconData(0xe14e, fontFamily: _familyRound, fontPackage: _package); + static const IconData jpg_attach_round = IconData(0xe14f, fontFamily: _familyRound, fontPackage: _package); + static const IconData pdf_attach_round = IconData(0xe150, fontFamily: _familyRound, fontPackage: _package); + static const IconData png_attach_round = IconData(0xe151, fontFamily: _familyRound, fontPackage: _package); + static const IconData ppt_attach_round = IconData(0xe152, fontFamily: _familyRound, fontPackage: _package); + static const IconData shared_folder_round = IconData(0xe153, fontFamily: _familyRound, fontPackage: _package); + static const IconData upload_file_round = IconData(0xe154, fontFamily: _familyRound, fontPackage: _package); + static const IconData cast_connected_round = IconData(0xe155, fontFamily: _familyRound, fontPackage: _package); + static const IconData cast_round = IconData(0xe156, fontFamily: _familyRound, fontPackage: _package); + static const IconData desktop_round = IconData(0xe157, fontFamily: _familyRound, fontPackage: _package); + static const IconData device_settings_round = IconData(0xe158, fontFamily: _familyRound, fontPackage: _package); + static const IconData devices_ecosystem_round = IconData(0xe159, fontFamily: _familyRound, fontPackage: _package); + static const IconData headphones_round = IconData(0xe15a, fontFamily: _familyRound, fontPackage: _package); + static const IconData keyboard_round = IconData(0xe15b, fontFamily: _familyRound, fontPackage: _package); + static const IconData laptop_round = IconData(0xe15c, fontFamily: _familyRound, fontPackage: _package); + static const IconData memory_round = IconData(0xe15d, fontFamily: _familyRound, fontPackage: _package); + static const IconData monitor_round = IconData(0xe15e, fontFamily: _familyRound, fontPackage: _package); + static const IconData phone_android_round = IconData(0xe15f, fontFamily: _familyRound, fontPackage: _package); + static const IconData phone_iphone_round = IconData(0xe160, fontFamily: _familyRound, fontPackage: _package); + static const IconData phonelink_round = IconData(0xe161, fontFamily: _familyRound, fontPackage: _package); + static const IconData printer_round = IconData(0xe162, fontFamily: _familyRound, fontPackage: _package); + static const IconData scanner_round = IconData(0xe163, fontFamily: _familyRound, fontPackage: _package); + static const IconData security_round = IconData(0xe164, fontFamily: _familyRound, fontPackage: _package); + static const IconData smart_phone_round = IconData(0xe165, fontFamily: _familyRound, fontPackage: _package); + static const IconData speaker_round = IconData(0xe166, fontFamily: _familyRound, fontPackage: _package); + static const IconData tablet_mac_round = IconData(0xe167, fontFamily: _familyRound, fontPackage: _package); + static const IconData tablet_round = IconData(0xe168, fontFamily: _familyRound, fontPackage: _package); + static const IconData tv_round = IconData(0xe169, fontFamily: _familyRound, fontPackage: _package); + static const IconData video_play_round = IconData(0xe16a, fontFamily: _familyRound, fontPackage: _package); + static const IconData watch_round = IconData(0xe16b, fontFamily: _familyRound, fontPackage: _package); + static const IconData adjustments_round = IconData(0xe16c, fontFamily: _familyRound, fontPackage: _package); + static const IconData auto_round = IconData(0xe16d, fontFamily: _familyRound, fontPackage: _package); + static const IconData awb_round = IconData(0xe16e, fontFamily: _familyRound, fontPackage: _package); + static const IconData camera_round = IconData(0xe16f, fontFamily: _familyRound, fontPackage: _package); + static const IconData camera_shutter_round = IconData(0xe170, fontFamily: _familyRound, fontPackage: _package); + static const IconData contrast_image_round = IconData(0xe171, fontFamily: _familyRound, fontPackage: _package); + static const IconData crop_round = IconData(0xe172, fontFamily: _familyRound, fontPackage: _package); + static const IconData eye_dropper_round = IconData(0xe173, fontFamily: _familyRound, fontPackage: _package); + static const IconData flip_camera_round = IconData(0xe174, fontFamily: _familyRound, fontPackage: _package); + static const IconData grid_off_round = IconData(0xe175, fontFamily: _familyRound, fontPackage: _package); + static const IconData grid_on_round = IconData(0xe176, fontFamily: _familyRound, fontPackage: _package); + static const IconData hdr_round = IconData(0xe177, fontFamily: _familyRound, fontPackage: _package); + static const IconData image_library_round = IconData(0xe178, fontFamily: _familyRound, fontPackage: _package); + static const IconData image_round = IconData(0xe179, fontFamily: _familyRound, fontPackage: _package); + static const IconData iso_round = IconData(0xe17a, fontFamily: _familyRound, fontPackage: _package); + static const IconData portrait_round = IconData(0xe17b, fontFamily: _familyRound, fontPackage: _package); + static const IconData pro_round = IconData(0xe17c, fontFamily: _familyRound, fontPackage: _package); + static const IconData rotate_left_round = IconData(0xe17d, fontFamily: _familyRound, fontPackage: _package); + static const IconData rotate_right_round = IconData(0xe17e, fontFamily: _familyRound, fontPackage: _package); + static const IconData slide_show_round = IconData(0xe17f, fontFamily: _familyRound, fontPackage: _package); + static const IconData straighten_round = IconData(0xe180, fontFamily: _familyRound, fontPackage: _package); + static const IconData timer_round = IconData(0xe181, fontFamily: _familyRound, fontPackage: _package); + static const IconData visibility_image_round = IconData(0xe182, fontFamily: _familyRound, fontPackage: _package); + static const IconData visibility_off_image_round = IconData(0xe183, fontFamily: _familyRound, fontPackage: _package); + static const IconData wb_image_round = IconData(0xe184, fontFamily: _familyRound, fontPackage: _package); + static const IconData wb_round = IconData(0xe185, fontFamily: _familyRound, fontPackage: _package); + static const IconData bus_round = IconData(0xe186, fontFamily: _familyRound, fontPackage: _package); + static const IconData cafe_round = IconData(0xe187, fontFamily: _familyRound, fontPackage: _package); + static const IconData car_round = IconData(0xe188, fontFamily: _familyRound, fontPackage: _package); + static const IconData flight_round = IconData(0xe189, fontFamily: _familyRound, fontPackage: _package); + static const IconData layers_round = IconData(0xe18a, fontFamily: _familyRound, fontPackage: _package); + static const IconData light_rail_train_round = IconData(0xe18b, fontFamily: _familyRound, fontPackage: _package); + static const IconData local_shipping_round = IconData(0xe18c, fontFamily: _familyRound, fontPackage: _package); + static const IconData map_round = IconData(0xe18d, fontFamily: _familyRound, fontPackage: _package); + static const IconData my_location_round = IconData(0xe18e, fontFamily: _familyRound, fontPackage: _package); + static const IconData navigation_round = IconData(0xe18f, fontFamily: _familyRound, fontPackage: _package); + static const IconData near_me_round = IconData(0xe190, fontFamily: _familyRound, fontPackage: _package); + static const IconData offer_round = IconData(0xe191, fontFamily: _familyRound, fontPackage: _package); + static const IconData place_round = IconData(0xe192, fontFamily: _familyRound, fontPackage: _package); + static const IconData ship_round = IconData(0xe193, fontFamily: _familyRound, fontPackage: _package); + static const IconData taxi_round = IconData(0xe194, fontFamily: _familyRound, fontPackage: _package); + static const IconData train_round = IconData(0xe195, fontFamily: _familyRound, fontPackage: _package); + static const IconData world_round = IconData(0xe196, fontFamily: _familyRound, fontPackage: _package); + static const IconData zoom_in_map_round = IconData(0xe197, fontFamily: _familyRound, fontPackage: _package); + static const IconData zoom_out_map_round = IconData(0xe198, fontFamily: _familyRound, fontPackage: _package); + static const IconData apps_round = IconData(0xe199, fontFamily: _familyRound, fontPackage: _package); + static const IconData arrow_back_round = IconData(0xe19a, fontFamily: _familyRound, fontPackage: _package); + static const IconData arrow_down_round = IconData(0xe19b, fontFamily: _familyRound, fontPackage: _package); + static const IconData arrow_forward_round = IconData(0xe19c, fontFamily: _familyRound, fontPackage: _package); + static const IconData arrow_up_round = IconData(0xe19d, fontFamily: _familyRound, fontPackage: _package); + static const IconData cancel_outline_round = IconData(0xe19e, fontFamily: _familyRound, fontPackage: _package); + static const IconData cancel_round = IconData(0xe19f, fontFamily: _familyRound, fontPackage: _package); + static const IconData caret_down_round = IconData(0xe1a0, fontFamily: _familyRound, fontPackage: _package); + static const IconData caret_left_round = IconData(0xe1a1, fontFamily: _familyRound, fontPackage: _package); + static const IconData caret_right_round = IconData(0xe1a2, fontFamily: _familyRound, fontPackage: _package); + static const IconData caret_sort_round = IconData(0xe1a3, fontFamily: _familyRound, fontPackage: _package); + static const IconData caret_up_round = IconData(0xe1a4, fontFamily: _familyRound, fontPackage: _package); + static const IconData check_round = IconData(0xe1a5, fontFamily: _familyRound, fontPackage: _package); + static const IconData chevron_left_round = IconData(0xe1a6, fontFamily: _familyRound, fontPackage: _package); + static const IconData chevron_right_round = IconData(0xe1a7, fontFamily: _familyRound, fontPackage: _package); + static const IconData close_round = IconData(0xe1a8, fontFamily: _familyRound, fontPackage: _package); + static const IconData columns_round = IconData(0xe1a9, fontFamily: _familyRound, fontPackage: _package); + static const IconData dashboard_round = IconData(0xe1aa, fontFamily: _familyRound, fontPackage: _package); + static const IconData drop_down_circle_round = IconData(0xe1ab, fontFamily: _familyRound, fontPackage: _package); + static const IconData expand_less_round = IconData(0xe1ac, fontFamily: _familyRound, fontPackage: _package); + static const IconData expand_more_round = IconData(0xe1ad, fontFamily: _familyRound, fontPackage: _package); + static const IconData first_page_round = IconData(0xe1ae, fontFamily: _familyRound, fontPackage: _package); + static const IconData full_screen_exit_round = IconData(0xe1af, fontFamily: _familyRound, fontPackage: _package); + static const IconData full_screen_round = IconData(0xe1b0, fontFamily: _familyRound, fontPackage: _package); + static const IconData hamburger_menu_navigation_rail_round = + IconData(0xe1b1, fontFamily: _familyRound, fontPackage: _package); + static const IconData hamburger_menu_round = IconData(0xe1b2, fontFamily: _familyRound, fontPackage: _package); + static const IconData hamburger_menu_thick_round = IconData(0xe1b3, fontFamily: _familyRound, fontPackage: _package); + static const IconData help_outline_round = IconData(0xe1b4, fontFamily: _familyRound, fontPackage: _package); + static const IconData help_round = IconData(0xe1b5, fontFamily: _familyRound, fontPackage: _package); + static const IconData last_page_round = IconData(0xe1b6, fontFamily: _familyRound, fontPackage: _package); + static const IconData list_alt_round = IconData(0xe1b7, fontFamily: _familyRound, fontPackage: _package); + static const IconData list_round = IconData(0xe1b8, fontFamily: _familyRound, fontPackage: _package); + static const IconData more_horizontal_round = IconData(0xe1b9, fontFamily: _familyRound, fontPackage: _package); + static const IconData more_vertical_round = IconData(0xe1ba, fontFamily: _familyRound, fontPackage: _package); + static const IconData refresh_round = IconData(0xe1bb, fontFamily: _familyRound, fontPackage: _package); + static const IconData unfold_less_round = IconData(0xe1bc, fontFamily: _familyRound, fontPackage: _package); + static const IconData unfold_more_round = IconData(0xe1bd, fontFamily: _familyRound, fontPackage: _package); + static const IconData add_group_round = IconData(0xe1be, fontFamily: _familyRound, fontPackage: _package); + static const IconData add_person_round = IconData(0xe1bf, fontFamily: _familyRound, fontPackage: _package); + static const IconData bad_mood_round = IconData(0xe1c0, fontFamily: _familyRound, fontPackage: _package); + static const IconData blog_round = IconData(0xe1c1, fontFamily: _familyRound, fontPackage: _package); + static const IconData dislike_round = IconData(0xe1c2, fontFamily: _familyRound, fontPackage: _package); + static const IconData facebook_round = IconData(0xe1c3, fontFamily: _familyRound, fontPackage: _package); + static const IconData group_round = IconData(0xe1c4, fontFamily: _familyRound, fontPackage: _package); + static const IconData groups_round = IconData(0xe1c5, fontFamily: _familyRound, fontPackage: _package); + static const IconData happy_round = IconData(0xe1c6, fontFamily: _familyRound, fontPackage: _package); + static const IconData instagram_round = IconData(0xe1c7, fontFamily: _familyRound, fontPackage: _package); + static const IconData ios_share_round = IconData(0xe1c8, fontFamily: _familyRound, fontPackage: _package); + static const IconData like_round = IconData(0xe1c9, fontFamily: _familyRound, fontPackage: _package); + static const IconData linkedin_round = IconData(0xe1ca, fontFamily: _familyRound, fontPackage: _package); + static const IconData medium_round = IconData(0xe1cb, fontFamily: _familyRound, fontPackage: _package); + static const IconData notifications_active_round = IconData(0xe1cc, fontFamily: _familyRound, fontPackage: _package); + static const IconData notifications_outline_round = IconData(0xe1cd, fontFamily: _familyRound, fontPackage: _package); + static const IconData notifications_round = IconData(0xe1ce, fontFamily: _familyRound, fontPackage: _package); + static const IconData person_outline_round = IconData(0xe1cf, fontFamily: _familyRound, fontPackage: _package); + static const IconData person_round = IconData(0xe1d0, fontFamily: _familyRound, fontPackage: _package); + static const IconData remove_group_round = IconData(0xe1d1, fontFamily: _familyRound, fontPackage: _package); + static const IconData remove_person_round = IconData(0xe1d2, fontFamily: _familyRound, fontPackage: _package); + static const IconData sad_round = IconData(0xe1d3, fontFamily: _familyRound, fontPackage: _package); + static const IconData satisfied_round = IconData(0xe1d4, fontFamily: _familyRound, fontPackage: _package); + static const IconData share_round = IconData(0xe1d5, fontFamily: _familyRound, fontPackage: _package); + static const IconData switch_user_round = IconData(0xe1d6, fontFamily: _familyRound, fontPackage: _package); + static const IconData twitter_round = IconData(0xe1d7, fontFamily: _familyRound, fontPackage: _package); + static const IconData very_satisfied_round = IconData(0xe1d8, fontFamily: _familyRound, fontPackage: _package); + static const IconData world_map_round = IconData(0xe1d9, fontFamily: _familyRound, fontPackage: _package); + static const IconData youtube_round = IconData(0xe1da, fontFamily: _familyRound, fontPackage: _package); + static const IconData check_box_empty_round = IconData(0xe1db, fontFamily: _familyRound, fontPackage: _package); + static const IconData check_box_round = IconData(0xe1dc, fontFamily: _familyRound, fontPackage: _package); + static const IconData indeterminate_check_box_round = + IconData(0xe1dd, fontFamily: _familyRound, fontPackage: _package); + static const IconData radio_button_checked_round = IconData(0xe1de, fontFamily: _familyRound, fontPackage: _package); + static const IconData radio_button_unchecked_round = + IconData(0xe1df, fontFamily: _familyRound, fontPackage: _package); + static const IconData star_half_round = IconData(0xe1e0, fontFamily: _familyRound, fontPackage: _package); + static const IconData star_outline_round = IconData(0xe1e1, fontFamily: _familyRound, fontPackage: _package); + static const IconData star_round = IconData(0xe1e2, fontFamily: _familyRound, fontPackage: _package); + static const IconData toggle_off_round = IconData(0xe1e3, fontFamily: _familyRound, fontPackage: _package); + static const IconData toggle_on_round = IconData(0xe1e4, fontFamily: _familyRound, fontPackage: _package); + + // sharp + static const IconData alarm_sharp = IconData(0xe001, fontFamily: _familySharp, fontPackage: _package); + static const IconData ar_sharp = IconData(0xe002, fontFamily: _familySharp, fontPackage: _package); + static const IconData bookmark_outline_sharp = IconData(0xe003, fontFamily: _familySharp, fontPackage: _package); + static const IconData bookmark_sharp = IconData(0xe004, fontFamily: _familySharp, fontPackage: _package); + static const IconData build_sharp = IconData(0xe005, fontFamily: _familySharp, fontPackage: _package); + static const IconData cached_sharp = IconData(0xe006, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_3_day_sharp = IconData(0xe007, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_alt_1_sharp = IconData(0xe008, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_alt_2_sharp = IconData(0xe009, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_available_sharp = IconData(0xe00a, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_cancel_sharp = IconData(0xe00b, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_day_sharp = IconData(0xe00c, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_edit_sharp = IconData(0xe00d, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_monthly_alt_sharp = IconData(0xe00e, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_monthly_sharp = IconData(0xe00f, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_range_sharp = IconData(0xe010, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_sharp = IconData(0xe011, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_weekly_alt_sharp = IconData(0xe012, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_weekly_sharp = IconData(0xe013, fontFamily: _familySharp, fontPackage: _package); + static const IconData calendar_yearly_sharp = IconData(0xe014, fontFamily: _familySharp, fontPackage: _package); + static const IconData check_circle_outline_alt_sharp = + IconData(0xe015, fontFamily: _familySharp, fontPackage: _package); + static const IconData check_circle_outline_sharp = IconData(0xe016, fontFamily: _familySharp, fontPackage: _package); + static const IconData check_circle_sharp = IconData(0xe017, fontFamily: _familySharp, fontPackage: _package); + static const IconData check_mark_sharp = IconData(0xe018, fontFamily: _familySharp, fontPackage: _package); + static const IconData clipboard_sharp = IconData(0xe019, fontFamily: _familySharp, fontPackage: _package); + static const IconData clock_outline_sharp = IconData(0xe01a, fontFamily: _familySharp, fontPackage: _package); + static const IconData clock_sharp = IconData(0xe01b, fontFamily: _familySharp, fontPackage: _package); + static const IconData credit_card_sharp = IconData(0xe01c, fontFamily: _familySharp, fontPackage: _package); + static const IconData delete_forever_sharp = IconData(0xe01d, fontFamily: _familySharp, fontPackage: _package); + static const IconData delete_outline_sharp = IconData(0xe01e, fontFamily: _familySharp, fontPackage: _package); + static const IconData delete_sharp = IconData(0xe01f, fontFamily: _familySharp, fontPackage: _package); + static const IconData dislike_action_sharp = IconData(0xe020, fontFamily: _familySharp, fontPackage: _package); + static const IconData document_sharp = IconData(0xe021, fontFamily: _familySharp, fontPackage: _package); + static const IconData download_sharp = IconData(0xe022, fontFamily: _familySharp, fontPackage: _package); + static const IconData filter_alt_sharp = IconData(0xe023, fontFamily: _familySharp, fontPackage: _package); + static const IconData filter_sharp = IconData(0xe024, fontFamily: _familySharp, fontPackage: _package); + static const IconData hand_sharp = IconData(0xe025, fontFamily: _familySharp, fontPackage: _package); + static const IconData history_sharp = IconData(0xe026, fontFamily: _familySharp, fontPackage: _package); + static const IconData home_sharp = IconData(0xe027, fontFamily: _familySharp, fontPackage: _package); + static const IconData info_sharp = IconData(0xe028, fontFamily: _familySharp, fontPackage: _package); + static const IconData label_sharp = IconData(0xe029, fontFamily: _familySharp, fontPackage: _package); + static const IconData like_action_sharp = IconData(0xe02a, fontFamily: _familySharp, fontPackage: _package); + static const IconData lock_alt_sharp = IconData(0xe02b, fontFamily: _familySharp, fontPackage: _package); + static const IconData lock_sharp = IconData(0xe02c, fontFamily: _familySharp, fontPackage: _package); + static const IconData log_in_sharp = IconData(0xe02d, fontFamily: _familySharp, fontPackage: _package); + static const IconData log_out_sharp = IconData(0xe02e, fontFamily: _familySharp, fontPackage: _package); + static const IconData love_outline_sharp = IconData(0xe02f, fontFamily: _familySharp, fontPackage: _package); + static const IconData love_sharp = IconData(0xe030, fontFamily: _familySharp, fontPackage: _package); + static const IconData open_in_full_sharp = IconData(0xe031, fontFamily: _familySharp, fontPackage: _package); + static const IconData open_in_new_window_sharp = IconData(0xe032, fontFamily: _familySharp, fontPackage: _package); + static const IconData pending_sharp = IconData(0xe033, fontFamily: _familySharp, fontPackage: _package); + static const IconData pin_sharp = IconData(0xe034, fontFamily: _familySharp, fontPackage: _package); + static const IconData price_sharp = IconData(0xe035, fontFamily: _familySharp, fontPackage: _package); + static const IconData renew_sharp = IconData(0xe036, fontFamily: _familySharp, fontPackage: _package); + static const IconData search_sharp = IconData(0xe037, fontFamily: _familySharp, fontPackage: _package); + static const IconData security_check_sharp = IconData(0xe038, fontFamily: _familySharp, fontPackage: _package); + static const IconData settings_sharp = IconData(0xe039, fontFamily: _familySharp, fontPackage: _package); + static const IconData sync_action_sharp = IconData(0xe03a, fontFamily: _familySharp, fontPackage: _package); + static const IconData touch_sharp = IconData(0xe03b, fontFamily: _familySharp, fontPackage: _package); + static const IconData trending_down_sharp = IconData(0xe03c, fontFamily: _familySharp, fontPackage: _package); + static const IconData trending_up_sharp = IconData(0xe03d, fontFamily: _familySharp, fontPackage: _package); + static const IconData unlock_alt_sharp = IconData(0xe03e, fontFamily: _familySharp, fontPackage: _package); + static const IconData unlock_sharp = IconData(0xe03f, fontFamily: _familySharp, fontPackage: _package); + static const IconData update_sharp = IconData(0xe040, fontFamily: _familySharp, fontPackage: _package); + static const IconData upload_sharp = IconData(0xe041, fontFamily: _familySharp, fontPackage: _package); + static const IconData user_circle_sharp = IconData(0xe042, fontFamily: _familySharp, fontPackage: _package); + static const IconData user_sharp = IconData(0xe043, fontFamily: _familySharp, fontPackage: _package); + static const IconData user_settings_sharp = IconData(0xe044, fontFamily: _familySharp, fontPackage: _package); + static const IconData verified_sharp = IconData(0xe045, fontFamily: _familySharp, fontPackage: _package); + static const IconData visibility_off_sharp = IconData(0xe046, fontFamily: _familySharp, fontPackage: _package); + static const IconData visibility_sharp = IconData(0xe047, fontFamily: _familySharp, fontPackage: _package); + static const IconData world_action_sharp = IconData(0xe048, fontFamily: _familySharp, fontPackage: _package); + static const IconData zoom_in_sharp = IconData(0xe049, fontFamily: _familySharp, fontPackage: _package); + static const IconData zoom_out_sharp = IconData(0xe04a, fontFamily: _familySharp, fontPackage: _package); + static const IconData add_alert_sharp = IconData(0xe04b, fontFamily: _familySharp, fontPackage: _package); + static const IconData alert_sharp = IconData(0xe04c, fontFamily: _familySharp, fontPackage: _package); + static const IconData auto_delete_sharp = IconData(0xe04d, fontFamily: _familySharp, fontPackage: _package); + static const IconData error_outline_sharp = IconData(0xe04e, fontFamily: _familySharp, fontPackage: _package); + static const IconData error_sharp = IconData(0xe04f, fontFamily: _familySharp, fontPackage: _package); + static const IconData important_notification_sharp = + IconData(0xe050, fontFamily: _familySharp, fontPackage: _package); + static const IconData warning_outline_sharp = IconData(0xe051, fontFamily: _familySharp, fontPackage: _package); + static const IconData warning_sharp = IconData(0xe052, fontFamily: _familySharp, fontPackage: _package); + static const IconData block_sharp = IconData(0xe053, fontFamily: _familySharp, fontPackage: _package); + static const IconData closed_caption_sharp = IconData(0xe054, fontFamily: _familySharp, fontPackage: _package); + static const IconData fast_forward_sharp = IconData(0xe055, fontFamily: _familySharp, fontPackage: _package); + static const IconData fast_rewind_sharp = IconData(0xe056, fontFamily: _familySharp, fontPackage: _package); + static const IconData loop_sharp = IconData(0xe057, fontFamily: _familySharp, fontPackage: _package); + static const IconData microphone_off_sharp = IconData(0xe058, fontFamily: _familySharp, fontPackage: _package); + static const IconData microphone_outline_sharp = IconData(0xe059, fontFamily: _familySharp, fontPackage: _package); + static const IconData microphone_sharp = IconData(0xe05a, fontFamily: _familySharp, fontPackage: _package); + static const IconData pause_circle_sharp = IconData(0xe05b, fontFamily: _familySharp, fontPackage: _package); + static const IconData pause_sharp = IconData(0xe05c, fontFamily: _familySharp, fontPackage: _package); + static const IconData play_circle_sharp = IconData(0xe05d, fontFamily: _familySharp, fontPackage: _package); + static const IconData play_outline_sharp = IconData(0xe05e, fontFamily: _familySharp, fontPackage: _package); + static const IconData play_sharp = IconData(0xe05f, fontFamily: _familySharp, fontPackage: _package); + static const IconData replay_sharp = IconData(0xe060, fontFamily: _familySharp, fontPackage: _package); + static const IconData skip_next_sharp = IconData(0xe061, fontFamily: _familySharp, fontPackage: _package); + static const IconData skip_previous_sharp = IconData(0xe062, fontFamily: _familySharp, fontPackage: _package); + static const IconData stop_circle_sharp = IconData(0xe063, fontFamily: _familySharp, fontPackage: _package); + static const IconData stop_sharp = IconData(0xe064, fontFamily: _familySharp, fontPackage: _package); + static const IconData video_camera_sharp = IconData(0xe065, fontFamily: _familySharp, fontPackage: _package); + static const IconData volume_down_sharp = IconData(0xe066, fontFamily: _familySharp, fontPackage: _package); + static const IconData volume_mute_sharp = IconData(0xe067, fontFamily: _familySharp, fontPackage: _package); + static const IconData volume_off_sharp = IconData(0xe068, fontFamily: _familySharp, fontPackage: _package); + static const IconData volume_up_sharp = IconData(0xe069, fontFamily: _familySharp, fontPackage: _package); + static const IconData add_call_sharp = IconData(0xe06a, fontFamily: _familySharp, fontPackage: _package); + static const IconData chat_bubble_outline_sharp = IconData(0xe06b, fontFamily: _familySharp, fontPackage: _package); + static const IconData chat_bubble_sharp = IconData(0xe06c, fontFamily: _familySharp, fontPackage: _package); + static const IconData conversation_sharp = IconData(0xe06d, fontFamily: _familySharp, fontPackage: _package); + static const IconData dialpad_sharp = IconData(0xe06e, fontFamily: _familySharp, fontPackage: _package); + static const IconData do_not_disturb_sharp = IconData(0xe06f, fontFamily: _familySharp, fontPackage: _package); + static const IconData dollar_sharp = IconData(0xe070, fontFamily: _familySharp, fontPackage: _package); + static const IconData email_alt_sharp = IconData(0xe071, fontFamily: _familySharp, fontPackage: _package); + static const IconData email_outline_sharp = IconData(0xe072, fontFamily: _familySharp, fontPackage: _package); + static const IconData email_sharp = IconData(0xe073, fontFamily: _familySharp, fontPackage: _package); + static const IconData end_call_sharp = IconData(0xe074, fontFamily: _familySharp, fontPackage: _package); + static const IconData message_sharp = IconData(0xe075, fontFamily: _familySharp, fontPackage: _package); + static const IconData person_search_sharp = IconData(0xe076, fontFamily: _familySharp, fontPackage: _package); + static const IconData phone_bluetooth_speaker_sharp = + IconData(0xe077, fontFamily: _familySharp, fontPackage: _package); + static const IconData phone_in_talk_sharp = IconData(0xe078, fontFamily: _familySharp, fontPackage: _package); + static const IconData phone_sharp = IconData(0xe079, fontFamily: _familySharp, fontPackage: _package); + static const IconData priority_sharp = IconData(0xe07a, fontFamily: _familySharp, fontPackage: _package); + static const IconData qr_code_sharp = IconData(0xe07b, fontFamily: _familySharp, fontPackage: _package); + static const IconData qr_code_scan_sharp = IconData(0xe07c, fontFamily: _familySharp, fontPackage: _package); + static const IconData rss_feed_sharp = IconData(0xe07d, fontFamily: _familySharp, fontPackage: _package); + static const IconData sd_card_sharp = IconData(0xe07e, fontFamily: _familySharp, fontPackage: _package); + static const IconData sim_card_sharp = IconData(0xe07f, fontFamily: _familySharp, fontPackage: _package); + static const IconData sms_sharp = IconData(0xe080, fontFamily: _familySharp, fontPackage: _package); + static const IconData sync_disabled_sharp = IconData(0xe081, fontFamily: _familySharp, fontPackage: _package); + static const IconData sync_sharp = IconData(0xe082, fontFamily: _familySharp, fontPackage: _package); + static const IconData add_box_sharp = IconData(0xe083, fontFamily: _familySharp, fontPackage: _package); + static const IconData add_circle_outline_sharp = IconData(0xe084, fontFamily: _familySharp, fontPackage: _package); + static const IconData add_circle_sharp = IconData(0xe085, fontFamily: _familySharp, fontPackage: _package); + static const IconData add_sharp = IconData(0xe086, fontFamily: _familySharp, fontPackage: _package); + static const IconData analysis_sharp = IconData(0xe087, fontFamily: _familySharp, fontPackage: _package); + static const IconData android_sharp = IconData(0xe088, fontFamily: _familySharp, fontPackage: _package); + static const IconData backspace_sharp = IconData(0xe089, fontFamily: _familySharp, fontPackage: _package); + static const IconData block_content_sharp = IconData(0xe08a, fontFamily: _familySharp, fontPackage: _package); + static const IconData clear_sharp = IconData(0xe08b, fontFamily: _familySharp, fontPackage: _package); + static const IconData content_sharp = IconData(0xe08c, fontFamily: _familySharp, fontPackage: _package); + static const IconData copy_file_sharp = IconData(0xe08d, fontFamily: _familySharp, fontPackage: _package); + static const IconData create_sharp = IconData(0xe08e, fontFamily: _familySharp, fontPackage: _package); + static const IconData filter_list_sharp = IconData(0xe08f, fontFamily: _familySharp, fontPackage: _package); + static const IconData flag_sharp = IconData(0xe090, fontFamily: _familySharp, fontPackage: _package); + static const IconData link_content_sharp = IconData(0xe091, fontFamily: _familySharp, fontPackage: _package); + static const IconData mail_sharp = IconData(0xe092, fontFamily: _familySharp, fontPackage: _package); + static const IconData push_pin_sharp = IconData(0xe093, fontFamily: _familySharp, fontPackage: _package); + static const IconData redo_sharp = IconData(0xe094, fontFamily: _familySharp, fontPackage: _package); + static const IconData remove_box_sharp = IconData(0xe095, fontFamily: _familySharp, fontPackage: _package); + static const IconData remove_circle_outline_sharp = IconData(0xe096, fontFamily: _familySharp, fontPackage: _package); + static const IconData remove_circle_sharp = IconData(0xe097, fontFamily: _familySharp, fontPackage: _package); + static const IconData remove_sharp = IconData(0xe098, fontFamily: _familySharp, fontPackage: _package); + static const IconData reply_sharp = IconData(0xe099, fontFamily: _familySharp, fontPackage: _package); + static const IconData save_alt_sharp = IconData(0xe09a, fontFamily: _familySharp, fontPackage: _package); + static const IconData save_sharp = IconData(0xe09b, fontFamily: _familySharp, fontPackage: _package); + static const IconData send_sharp = IconData(0xe09c, fontFamily: _familySharp, fontPackage: _package); + static const IconData sort_sharp = IconData(0xe09d, fontFamily: _familySharp, fontPackage: _package); + static const IconData undo_sharp = IconData(0xe09e, fontFamily: _familySharp, fontPackage: _package); + static const IconData antenna_sharp = IconData(0xe09f, fontFamily: _familySharp, fontPackage: _package); + static const IconData battery_alert_sharp = IconData(0xe0a0, fontFamily: _familySharp, fontPackage: _package); + static const IconData battery_charging_sharp = IconData(0xe0a1, fontFamily: _familySharp, fontPackage: _package); + static const IconData battery_sharp = IconData(0xe0a2, fontFamily: _familySharp, fontPackage: _package); + static const IconData bluetooth_disabled_sharp = IconData(0xe0a3, fontFamily: _familySharp, fontPackage: _package); + static const IconData bluetooth_sharp = IconData(0xe0a4, fontFamily: _familySharp, fontPackage: _package); + static const IconData bluetooth_searching_sharp = IconData(0xe0a5, fontFamily: _familySharp, fontPackage: _package); + static const IconData brightness_sharp = IconData(0xe0a6, fontFamily: _familySharp, fontPackage: _package); + static const IconData cellular_signal_sharp = IconData(0xe0a7, fontFamily: _familySharp, fontPackage: _package); + static const IconData chain_sharp = IconData(0xe0a8, fontFamily: _familySharp, fontPackage: _package); + static const IconData contrast_sharp = IconData(0xe0a9, fontFamily: _familySharp, fontPackage: _package); + static const IconData dark_mode_sharp = IconData(0xe0aa, fontFamily: _familySharp, fontPackage: _package); + static const IconData devices_sharp = IconData(0xe0ab, fontFamily: _familySharp, fontPackage: _package); + static const IconData ethernet_sharp = IconData(0xe0ac, fontFamily: _familySharp, fontPackage: _package); + static const IconData flight_mode_sharp = IconData(0xe0ad, fontFamily: _familySharp, fontPackage: _package); + static const IconData hdmi_sharp = IconData(0xe0ae, fontFamily: _familySharp, fontPackage: _package); + static const IconData light_mode_sharp = IconData(0xe0af, fontFamily: _familySharp, fontPackage: _package); + static const IconData location_point_sharp = IconData(0xe0b0, fontFamily: _familySharp, fontPackage: _package); + static const IconData location_sharp = IconData(0xe0b1, fontFamily: _familySharp, fontPackage: _package); + static const IconData mobile_friendly_sharp = IconData(0xe0b2, fontFamily: _familySharp, fontPackage: _package); + static const IconData network_signal_sharp = IconData(0xe0b3, fontFamily: _familySharp, fontPackage: _package); + static const IconData nfc_sharp = IconData(0xe0b4, fontFamily: _familySharp, fontPackage: _package); + static const IconData night_sharp = IconData(0xe0b5, fontFamily: _familySharp, fontPackage: _package); + static const IconData restart_alt_sharp = IconData(0xe0b6, fontFamily: _familySharp, fontPackage: _package); + static const IconData screen_rotation_sharp = IconData(0xe0b7, fontFamily: _familySharp, fontPackage: _package); + static const IconData uhf_rfid_sharp = IconData(0xe0b8, fontFamily: _familySharp, fontPackage: _package); + static const IconData usb_alt_device_sharp = IconData(0xe0b9, fontFamily: _familySharp, fontPackage: _package); + static const IconData usb_alt_sharp = IconData(0xe0ba, fontFamily: _familySharp, fontPackage: _package); + static const IconData usb_sharp = IconData(0xe0bb, fontFamily: _familySharp, fontPackage: _package); + static const IconData volte_sharp = IconData(0xe0bc, fontFamily: _familySharp, fontPackage: _package); + static const IconData appgallery_sharp = IconData(0xe0bd, fontFamily: _familySharp, fontPackage: _package); + static const IconData application_analytics_sharp = IconData(0xe0be, fontFamily: _familySharp, fontPackage: _package); + static const IconData asset_tracker_lite_sharp = IconData(0xe0bf, fontFamily: _familySharp, fontPackage: _package); + static const IconData blood_bag_plus_sharp = IconData(0xe0c0, fontFamily: _familySharp, fontPackage: _package); + static const IconData bluetooth_management_sharp = IconData(0xe0c1, fontFamily: _familySharp, fontPackage: _package); + static const IconData browser_print_sharp = IconData(0xe0c2, fontFamily: _familySharp, fontPackage: _package); + static const IconData cloud_connect_sharp = IconData(0xe0c3, fontFamily: _familySharp, fontPackage: _package); + static const IconData data_wedge_sharp = IconData(0xe0c4, fontFamily: _familySharp, fontPackage: _package); + static const IconData design_tools_sharp = IconData(0xe0c5, fontFamily: _familySharp, fontPackage: _package); + static const IconData device_tracker_sharp = IconData(0xe0c6, fontFamily: _familySharp, fontPackage: _package); + static const IconData direct_connect_sharp = IconData(0xe0c7, fontFamily: _familySharp, fontPackage: _package); + static const IconData emdk_sharp = IconData(0xe0c8, fontFamily: _familySharp, fontPackage: _package); + static const IconData enterprise_browser_sharp = IconData(0xe0c9, fontFamily: _familySharp, fontPackage: _package); + static const IconData enterprise_connectors_sharp = IconData(0xe0ca, fontFamily: _familySharp, fontPackage: _package); + static const IconData enterprise_keyboard_sharp = IconData(0xe0cb, fontFamily: _familySharp, fontPackage: _package); + static const IconData gms_restricted_mode_sharp = IconData(0xe0cc, fontFamily: _familySharp, fontPackage: _package); + static const IconData intelligent_document_capture_sharp = + IconData(0xe0cd, fontFamily: _familySharp, fontPackage: _package); + static const IconData label_plus_sharp = IconData(0xe0ce, fontFamily: _familySharp, fontPackage: _package); + static const IconData life_guard_sharp = IconData(0xe0cf, fontFamily: _familySharp, fontPackage: _package); + static const IconData link_os_sharp = IconData(0xe0d0, fontFamily: _familySharp, fontPackage: _package); + static const IconData mdm_connectors_sharp = IconData(0xe0d1, fontFamily: _familySharp, fontPackage: _package); + static const IconData mdm_toolkit_sharp = IconData(0xe0d2, fontFamily: _familySharp, fontPackage: _package); + static const IconData mobility_dna_sharp = IconData(0xe0d3, fontFamily: _familySharp, fontPackage: _package); + static const IconData mobility_security_sharp = IconData(0xe0d4, fontFamily: _familySharp, fontPackage: _package); + static const IconData multi_code_data_formatting_sharp = + IconData(0xe0d5, fontFamily: _familySharp, fontPackage: _package); + static const IconData mx_sharp = IconData(0xe0d6, fontFamily: _familySharp, fontPackage: _package); + static const IconData ocr_sharp = IconData(0xe0d7, fontFamily: _familySharp, fontPackage: _package); + static const IconData oem_config_sharp = IconData(0xe0d8, fontFamily: _familySharp, fontPackage: _package); + static const IconData pairing_solutions_sharp = IconData(0xe0d9, fontFamily: _familySharp, fontPackage: _package); + static const IconData pdf_direct_sharp = IconData(0xe0da, fontFamily: _familySharp, fontPackage: _package); + static const IconData power_precision_sharp = IconData(0xe0db, fontFamily: _familySharp, fontPackage: _package); + static const IconData preferred_symbol_sharp = IconData(0xe0dc, fontFamily: _familySharp, fontPackage: _package); + static const IconData print_secure_sharp = IconData(0xe0dd, fontFamily: _familySharp, fontPackage: _package); + static const IconData print_station_sharp = IconData(0xe0de, fontFamily: _familySharp, fontPackage: _package); + static const IconData printer_profile_manager_sharp = + IconData(0xe0df, fontFamily: _familySharp, fontPackage: _package); + static const IconData przm_sharp = IconData(0xe0e0, fontFamily: _familySharp, fontPackage: _package); + static const IconData remote_control_sharp = IconData(0xe0e1, fontFamily: _familySharp, fontPackage: _package); + static const IconData remote_diagnostics_sharp = IconData(0xe0e2, fontFamily: _familySharp, fontPackage: _package); + static const IconData remote_management_sharp = IconData(0xe0e3, fontFamily: _familySharp, fontPackage: _package); + static const IconData rx_sharp = IconData(0xe0e4, fontFamily: _familySharp, fontPackage: _package); + static const IconData scan_and_pair_sharp = IconData(0xe0e5, fontFamily: _familySharp, fontPackage: _package); + static const IconData scan_speed_analytics_sharp = IconData(0xe0e6, fontFamily: _familySharp, fontPackage: _package); + static const IconData scan_to_connect_sharp = IconData(0xe0e7, fontFamily: _familySharp, fontPackage: _package); + static const IconData scanner_control_application_sharp = + IconData(0xe0e8, fontFamily: _familySharp, fontPackage: _package); + static const IconData setting_tool_sharp = IconData(0xe0e9, fontFamily: _familySharp, fontPackage: _package); + static const IconData simulscan_sharp = IconData(0xe0ea, fontFamily: _familySharp, fontPackage: _package); + static const IconData smart_te_lite_sharp = IconData(0xe0eb, fontFamily: _familySharp, fontPackage: _package); + static const IconData smart_te_sharp = IconData(0xe0ec, fontFamily: _familySharp, fontPackage: _package); + static const IconData smart_tek_sharp = IconData(0xe0ed, fontFamily: _familySharp, fontPackage: _package); + static const IconData smartdex_sharp = IconData(0xe0ee, fontFamily: _familySharp, fontPackage: _package); + static const IconData stagenow_sharp = IconData(0xe0ef, fontFamily: _familySharp, fontPackage: _package); + static const IconData swipe_assist_sharp = IconData(0xe0f0, fontFamily: _familySharp, fontPackage: _package); + static const IconData tekspeech_pro_sharp = IconData(0xe0f1, fontFamily: _familySharp, fontPackage: _package); + static const IconData virtual_devices_sharp = IconData(0xe0f2, fontFamily: _familySharp, fontPackage: _package); + static const IconData virtual_tether_sharp = IconData(0xe0f3, fontFamily: _familySharp, fontPackage: _package); + static const IconData visibility_services_sharp = IconData(0xe0f4, fontFamily: _familySharp, fontPackage: _package); + static const IconData voice_wedge_sharp = IconData(0xe0f5, fontFamily: _familySharp, fontPackage: _package); + static const IconData workforce_connect_sharp = IconData(0xe0f6, fontFamily: _familySharp, fontPackage: _package); + static const IconData workstation_connect_sharp = IconData(0xe0f7, fontFamily: _familySharp, fontPackage: _package); + static const IconData zebra_designer_sharp = IconData(0xe0f8, fontFamily: _familySharp, fontPackage: _package); + static const IconData zebra_onecare_sharp = IconData(0xe0f9, fontFamily: _familySharp, fontPackage: _package); + static const IconData zebra_setup_utility_sharp = IconData(0xe0fa, fontFamily: _familySharp, fontPackage: _package); + static const IconData zero_touch_sharp = IconData(0xe0fb, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_center_sharp = IconData(0xe0fc, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_horizontal_center_sharp = + IconData(0xe0fd, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_horizontal_left_sharp = IconData(0xe0fe, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_horizontal_right_sharp = + IconData(0xe0ff, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_left_sharp = IconData(0xe100, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_right_sharp = IconData(0xe101, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_vertical_bottom_sharp = IconData(0xe102, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_vertical_center_sharp = IconData(0xe103, fontFamily: _familySharp, fontPackage: _package); + static const IconData align_vertical_top_sharp = IconData(0xe104, fontFamily: _familySharp, fontPackage: _package); + static const IconData attach_sharp = IconData(0xe105, fontFamily: _familySharp, fontPackage: _package); + static const IconData bold_sharp = IconData(0xe106, fontFamily: _familySharp, fontPackage: _package); + static const IconData bullet_list_sharp = IconData(0xe107, fontFamily: _familySharp, fontPackage: _package); + static const IconData checklist_sharp = IconData(0xe108, fontFamily: _familySharp, fontPackage: _package); + static const IconData color_fill_sharp = IconData(0xe109, fontFamily: _familySharp, fontPackage: _package); + static const IconData distribute_horizontal_sharp = IconData(0xe10a, fontFamily: _familySharp, fontPackage: _package); + static const IconData distribute_vertical_sharp = IconData(0xe10b, fontFamily: _familySharp, fontPackage: _package); + static const IconData edit_border_sharp = IconData(0xe10c, fontFamily: _familySharp, fontPackage: _package); + static const IconData edit_sharp = IconData(0xe10d, fontFamily: _familySharp, fontPackage: _package); + static const IconData font_size_decrease_sharp = IconData(0xe10e, fontFamily: _familySharp, fontPackage: _package); + static const IconData font_size_increase_sharp = IconData(0xe10f, fontFamily: _familySharp, fontPackage: _package); + static const IconData format_shapes_sharp = IconData(0xe110, fontFamily: _familySharp, fontPackage: _package); + static const IconData indent_decrease_sharp = IconData(0xe111, fontFamily: _familySharp, fontPackage: _package); + static const IconData indent_increase_sharp = IconData(0xe112, fontFamily: _familySharp, fontPackage: _package); + static const IconData italic_sharp = IconData(0xe113, fontFamily: _familySharp, fontPackage: _package); + static const IconData justify_sharp = IconData(0xe114, fontFamily: _familySharp, fontPackage: _package); + static const IconData line_spacing_sharp = IconData(0xe115, fontFamily: _familySharp, fontPackage: _package); + static const IconData link_sharp = IconData(0xe116, fontFamily: _familySharp, fontPackage: _package); + static const IconData no_color_sharp = IconData(0xe117, fontFamily: _familySharp, fontPackage: _package); + static const IconData numbered_list_sharp = IconData(0xe118, fontFamily: _familySharp, fontPackage: _package); + static const IconData strikethrough_sharp = IconData(0xe119, fontFamily: _familySharp, fontPackage: _package); + static const IconData text_color_sharp = IconData(0xe11a, fontFamily: _familySharp, fontPackage: _package); + static const IconData type_sharp = IconData(0xe11b, fontFamily: _familySharp, fontPackage: _package); + static const IconData underline_sharp = IconData(0xe11c, fontFamily: _familySharp, fontPackage: _package); + static const IconData barcode_bluetooth_sharp = IconData(0xe11d, fontFamily: _familySharp, fontPackage: _package); + static const IconData barcode_done_sharp = IconData(0xe11e, fontFamily: _familySharp, fontPackage: _package); + static const IconData barcode_image_scan_sharp = IconData(0xe11f, fontFamily: _familySharp, fontPackage: _package); + static const IconData barcode_qr_code_sharp = IconData(0xe120, fontFamily: _familySharp, fontPackage: _package); + static const IconData barcode_sharp = IconData(0xe121, fontFamily: _familySharp, fontPackage: _package); + static const IconData barcode_scanner_down_sharp = IconData(0xe122, fontFamily: _familySharp, fontPackage: _package); + static const IconData barcode_settings_sharp = IconData(0xe123, fontFamily: _familySharp, fontPackage: _package); + static const IconData calculator_sharp = IconData(0xe124, fontFamily: _familySharp, fontPackage: _package); + static const IconData card_orientation_sharp = IconData(0xe125, fontFamily: _familySharp, fontPackage: _package); + static const IconData card_with_chip_sharp = IconData(0xe126, fontFamily: _familySharp, fontPackage: _package); + static const IconData certificate_sharp = IconData(0xe127, fontFamily: _familySharp, fontPackage: _package); + static const IconData choices_sharp = IconData(0xe128, fontFamily: _familySharp, fontPackage: _package); + static const IconData contactless_pay_sharp = IconData(0xe129, fontFamily: _familySharp, fontPackage: _package); + static const IconData credit_card_swipe_sharp = IconData(0xe12a, fontFamily: _familySharp, fontPackage: _package); + static const IconData eas_sharp = IconData(0xe12b, fontFamily: _familySharp, fontPackage: _package); + static const IconData enterprise_diagnostics_sharp = + IconData(0xe12c, fontFamily: _familySharp, fontPackage: _package); + static const IconData environmental_sharp = IconData(0xe12d, fontFamily: _familySharp, fontPackage: _package); + static const IconData factory_sharp = IconData(0xe12e, fontFamily: _familySharp, fontPackage: _package); + static const IconData freezer_sharp = IconData(0xe12f, fontFamily: _familySharp, fontPackage: _package); + static const IconData issue_audit_sharp = IconData(0xe130, fontFamily: _familySharp, fontPackage: _package); + static const IconData performance_sharp = IconData(0xe131, fontFamily: _familySharp, fontPackage: _package); + static const IconData planogram_sharp = IconData(0xe132, fontFamily: _familySharp, fontPackage: _package); + static const IconData productivity_apps_sharp = IconData(0xe133, fontFamily: _familySharp, fontPackage: _package); + static const IconData receipt_sharp = IconData(0xe134, fontFamily: _familySharp, fontPackage: _package); + static const IconData retail_sharp = IconData(0xe135, fontFamily: _familySharp, fontPackage: _package); + static const IconData road_map_sharp = IconData(0xe136, fontFamily: _familySharp, fontPackage: _package); + static const IconData rules_sharp = IconData(0xe137, fontFamily: _familySharp, fontPackage: _package); + static const IconData scan_rate_sharp = IconData(0xe138, fontFamily: _familySharp, fontPackage: _package); + static const IconData shape_recognition_sharp = IconData(0xe139, fontFamily: _familySharp, fontPackage: _package); + static const IconData solutions_sharp = IconData(0xe13a, fontFamily: _familySharp, fontPackage: _package); + static const IconData steps_sharp = IconData(0xe13b, fontFamily: _familySharp, fontPackage: _package); + static const IconData strategy_sharp = IconData(0xe13c, fontFamily: _familySharp, fontPackage: _package); + static const IconData tap_to_pay_sharp = IconData(0xe13d, fontFamily: _familySharp, fontPackage: _package); + static const IconData zero_scale_sharp = IconData(0xe13e, fontFamily: _familySharp, fontPackage: _package); + static const IconData attachment_sharp = IconData(0xe13f, fontFamily: _familySharp, fontPackage: _package); + static const IconData cloud_done_sharp = IconData(0xe140, fontFamily: _familySharp, fontPackage: _package); + static const IconData cloud_download_sharp = IconData(0xe141, fontFamily: _familySharp, fontPackage: _package); + static const IconData cloud_off_sharp = IconData(0xe142, fontFamily: _familySharp, fontPackage: _package); + static const IconData cloud_outline_sharp = IconData(0xe143, fontFamily: _familySharp, fontPackage: _package); + static const IconData cloud_sharp = IconData(0xe144, fontFamily: _familySharp, fontPackage: _package); + static const IconData cloud_upload_sharp = IconData(0xe145, fontFamily: _familySharp, fontPackage: _package); + static const IconData create_new_folder_sharp = IconData(0xe146, fontFamily: _familySharp, fontPackage: _package); + static const IconData doc_attach_sharp = IconData(0xe147, fontFamily: _familySharp, fontPackage: _package); + static const IconData downloading_sharp = IconData(0xe148, fontFamily: _familySharp, fontPackage: _package); + static const IconData file_download_sharp = IconData(0xe149, fontFamily: _familySharp, fontPackage: _package); + static const IconData file_upload_sharp = IconData(0xe14a, fontFamily: _familySharp, fontPackage: _package); + static const IconData finished_download_sharp = IconData(0xe14b, fontFamily: _familySharp, fontPackage: _package); + static const IconData folder_outline_sharp = IconData(0xe14c, fontFamily: _familySharp, fontPackage: _package); + static const IconData folder_sharp = IconData(0xe14d, fontFamily: _familySharp, fontPackage: _package); + static const IconData grid_view_sharp = IconData(0xe14e, fontFamily: _familySharp, fontPackage: _package); + static const IconData jpg_attach_sharp = IconData(0xe14f, fontFamily: _familySharp, fontPackage: _package); + static const IconData pdf_attach_sharp = IconData(0xe150, fontFamily: _familySharp, fontPackage: _package); + static const IconData png_attach_sharp = IconData(0xe151, fontFamily: _familySharp, fontPackage: _package); + static const IconData ppt_attach_sharp = IconData(0xe152, fontFamily: _familySharp, fontPackage: _package); + static const IconData shared_folder_sharp = IconData(0xe153, fontFamily: _familySharp, fontPackage: _package); + static const IconData upload_file_sharp = IconData(0xe154, fontFamily: _familySharp, fontPackage: _package); + static const IconData cast_connected_sharp = IconData(0xe155, fontFamily: _familySharp, fontPackage: _package); + static const IconData cast_sharp = IconData(0xe156, fontFamily: _familySharp, fontPackage: _package); + static const IconData desktop_sharp = IconData(0xe157, fontFamily: _familySharp, fontPackage: _package); + static const IconData device_settings_sharp = IconData(0xe158, fontFamily: _familySharp, fontPackage: _package); + static const IconData devices_ecosystem_sharp = IconData(0xe159, fontFamily: _familySharp, fontPackage: _package); + static const IconData headphones_sharp = IconData(0xe15a, fontFamily: _familySharp, fontPackage: _package); + static const IconData keyboard_sharp = IconData(0xe15b, fontFamily: _familySharp, fontPackage: _package); + static const IconData laptop_sharp = IconData(0xe15c, fontFamily: _familySharp, fontPackage: _package); + static const IconData memory_sharp = IconData(0xe15d, fontFamily: _familySharp, fontPackage: _package); + static const IconData monitor_sharp = IconData(0xe15e, fontFamily: _familySharp, fontPackage: _package); + static const IconData phone_android_sharp = IconData(0xe15f, fontFamily: _familySharp, fontPackage: _package); + static const IconData phone_iphone_sharp = IconData(0xe160, fontFamily: _familySharp, fontPackage: _package); + static const IconData phonelink_sharp = IconData(0xe161, fontFamily: _familySharp, fontPackage: _package); + static const IconData printer_sharp = IconData(0xe162, fontFamily: _familySharp, fontPackage: _package); + static const IconData scanner_sharp = IconData(0xe163, fontFamily: _familySharp, fontPackage: _package); + static const IconData security_sharp = IconData(0xe164, fontFamily: _familySharp, fontPackage: _package); + static const IconData smart_phone_sharp = IconData(0xe165, fontFamily: _familySharp, fontPackage: _package); + static const IconData speaker_sharp = IconData(0xe166, fontFamily: _familySharp, fontPackage: _package); + static const IconData tablet_mac_sharp = IconData(0xe167, fontFamily: _familySharp, fontPackage: _package); + static const IconData tablet_sharp = IconData(0xe168, fontFamily: _familySharp, fontPackage: _package); + static const IconData tv_sharp = IconData(0xe169, fontFamily: _familySharp, fontPackage: _package); + static const IconData video_play_sharp = IconData(0xe16a, fontFamily: _familySharp, fontPackage: _package); + static const IconData watch_sharp = IconData(0xe16b, fontFamily: _familySharp, fontPackage: _package); + static const IconData adjustments_sharp = IconData(0xe16c, fontFamily: _familySharp, fontPackage: _package); + static const IconData auto_sharp = IconData(0xe16d, fontFamily: _familySharp, fontPackage: _package); + static const IconData awb_sharp = IconData(0xe16e, fontFamily: _familySharp, fontPackage: _package); + static const IconData camera_sharp = IconData(0xe16f, fontFamily: _familySharp, fontPackage: _package); + static const IconData camera_shutter_sharp = IconData(0xe170, fontFamily: _familySharp, fontPackage: _package); + static const IconData contrast_image_sharp = IconData(0xe171, fontFamily: _familySharp, fontPackage: _package); + static const IconData crop_sharp = IconData(0xe172, fontFamily: _familySharp, fontPackage: _package); + static const IconData eye_dropper_sharp = IconData(0xe173, fontFamily: _familySharp, fontPackage: _package); + static const IconData flip_camera_sharp = IconData(0xe174, fontFamily: _familySharp, fontPackage: _package); + static const IconData grid_off_sharp = IconData(0xe175, fontFamily: _familySharp, fontPackage: _package); + static const IconData grid_on_sharp = IconData(0xe176, fontFamily: _familySharp, fontPackage: _package); + static const IconData hdr_sharp = IconData(0xe177, fontFamily: _familySharp, fontPackage: _package); + static const IconData image_library_sharp = IconData(0xe178, fontFamily: _familySharp, fontPackage: _package); + static const IconData image_sharp = IconData(0xe179, fontFamily: _familySharp, fontPackage: _package); + static const IconData iso_sharp = IconData(0xe17a, fontFamily: _familySharp, fontPackage: _package); + static const IconData portrait_sharp = IconData(0xe17b, fontFamily: _familySharp, fontPackage: _package); + static const IconData pro_sharp = IconData(0xe17c, fontFamily: _familySharp, fontPackage: _package); + static const IconData rotate_left_sharp = IconData(0xe17d, fontFamily: _familySharp, fontPackage: _package); + static const IconData rotate_right_sharp = IconData(0xe17e, fontFamily: _familySharp, fontPackage: _package); + static const IconData slide_show_sharp = IconData(0xe17f, fontFamily: _familySharp, fontPackage: _package); + static const IconData straighten_sharp = IconData(0xe180, fontFamily: _familySharp, fontPackage: _package); + static const IconData timer_sharp = IconData(0xe181, fontFamily: _familySharp, fontPackage: _package); + static const IconData visibility_image_sharp = IconData(0xe182, fontFamily: _familySharp, fontPackage: _package); + static const IconData visibility_off_image_sharp = IconData(0xe183, fontFamily: _familySharp, fontPackage: _package); + static const IconData wb_image_sharp = IconData(0xe184, fontFamily: _familySharp, fontPackage: _package); + static const IconData wb_sharp = IconData(0xe185, fontFamily: _familySharp, fontPackage: _package); + static const IconData bus_sharp = IconData(0xe186, fontFamily: _familySharp, fontPackage: _package); + static const IconData cafe_sharp = IconData(0xe187, fontFamily: _familySharp, fontPackage: _package); + static const IconData car_sharp = IconData(0xe188, fontFamily: _familySharp, fontPackage: _package); + static const IconData flight_sharp = IconData(0xe189, fontFamily: _familySharp, fontPackage: _package); + static const IconData layers_sharp = IconData(0xe18a, fontFamily: _familySharp, fontPackage: _package); + static const IconData light_rail_train_sharp = IconData(0xe18b, fontFamily: _familySharp, fontPackage: _package); + static const IconData local_shipping_sharp = IconData(0xe18c, fontFamily: _familySharp, fontPackage: _package); + static const IconData map_sharp = IconData(0xe18d, fontFamily: _familySharp, fontPackage: _package); + static const IconData my_location_sharp = IconData(0xe18e, fontFamily: _familySharp, fontPackage: _package); + static const IconData navigation_sharp = IconData(0xe18f, fontFamily: _familySharp, fontPackage: _package); + static const IconData near_me_sharp = IconData(0xe190, fontFamily: _familySharp, fontPackage: _package); + static const IconData offer_sharp = IconData(0xe191, fontFamily: _familySharp, fontPackage: _package); + static const IconData place_sharp = IconData(0xe192, fontFamily: _familySharp, fontPackage: _package); + static const IconData ship_sharp = IconData(0xe193, fontFamily: _familySharp, fontPackage: _package); + static const IconData taxi_sharp = IconData(0xe194, fontFamily: _familySharp, fontPackage: _package); + static const IconData train_sharp = IconData(0xe195, fontFamily: _familySharp, fontPackage: _package); + static const IconData world_sharp = IconData(0xe196, fontFamily: _familySharp, fontPackage: _package); + static const IconData zoom_in_map_sharp = IconData(0xe197, fontFamily: _familySharp, fontPackage: _package); + static const IconData zoom_out_map_sharp = IconData(0xe198, fontFamily: _familySharp, fontPackage: _package); + static const IconData apps_sharp = IconData(0xe199, fontFamily: _familySharp, fontPackage: _package); + static const IconData arrow_back_sharp = IconData(0xe19a, fontFamily: _familySharp, fontPackage: _package); + static const IconData arrow_down_sharp = IconData(0xe19b, fontFamily: _familySharp, fontPackage: _package); + static const IconData arrow_forward_sharp = IconData(0xe19c, fontFamily: _familySharp, fontPackage: _package); + static const IconData arrow_up_sharp = IconData(0xe19d, fontFamily: _familySharp, fontPackage: _package); + static const IconData cancel_outline_sharp = IconData(0xe19e, fontFamily: _familySharp, fontPackage: _package); + static const IconData cancel_sharp = IconData(0xe19f, fontFamily: _familySharp, fontPackage: _package); + static const IconData caret_down_sharp = IconData(0xe1a0, fontFamily: _familySharp, fontPackage: _package); + static const IconData caret_left_sharp = IconData(0xe1a1, fontFamily: _familySharp, fontPackage: _package); + static const IconData caret_right_sharp = IconData(0xe1a2, fontFamily: _familySharp, fontPackage: _package); + static const IconData caret_sort_sharp = IconData(0xe1a3, fontFamily: _familySharp, fontPackage: _package); + static const IconData caret_up_sharp = IconData(0xe1a4, fontFamily: _familySharp, fontPackage: _package); + static const IconData check_sharp = IconData(0xe1a5, fontFamily: _familySharp, fontPackage: _package); + static const IconData chevron_left_sharp = IconData(0xe1a6, fontFamily: _familySharp, fontPackage: _package); + static const IconData chevron_right_sharp = IconData(0xe1a7, fontFamily: _familySharp, fontPackage: _package); + static const IconData close_sharp = IconData(0xe1a8, fontFamily: _familySharp, fontPackage: _package); + static const IconData columns_sharp = IconData(0xe1a9, fontFamily: _familySharp, fontPackage: _package); + static const IconData dashboard_sharp = IconData(0xe1aa, fontFamily: _familySharp, fontPackage: _package); + static const IconData drop_down_circle_sharp = IconData(0xe1ab, fontFamily: _familySharp, fontPackage: _package); + static const IconData expand_less_sharp = IconData(0xe1ac, fontFamily: _familySharp, fontPackage: _package); + static const IconData expand_more_sharp = IconData(0xe1ad, fontFamily: _familySharp, fontPackage: _package); + static const IconData first_page_sharp = IconData(0xe1ae, fontFamily: _familySharp, fontPackage: _package); + static const IconData full_screen_exit_sharp = IconData(0xe1af, fontFamily: _familySharp, fontPackage: _package); + static const IconData full_screen_sharp = IconData(0xe1b0, fontFamily: _familySharp, fontPackage: _package); + static const IconData hamburger_menu_navigation_rail_sharp = + IconData(0xe1b1, fontFamily: _familySharp, fontPackage: _package); + static const IconData hamburger_menu_sharp = IconData(0xe1b2, fontFamily: _familySharp, fontPackage: _package); + static const IconData hamburger_menu_thick_sharp = IconData(0xe1b3, fontFamily: _familySharp, fontPackage: _package); + static const IconData help_outline_sharp = IconData(0xe1b4, fontFamily: _familySharp, fontPackage: _package); + static const IconData help_sharp = IconData(0xe1b5, fontFamily: _familySharp, fontPackage: _package); + static const IconData last_page_sharp = IconData(0xe1b6, fontFamily: _familySharp, fontPackage: _package); + static const IconData list_alt_sharp = IconData(0xe1b7, fontFamily: _familySharp, fontPackage: _package); + static const IconData list_sharp = IconData(0xe1b8, fontFamily: _familySharp, fontPackage: _package); + static const IconData more_horizontal_sharp = IconData(0xe1b9, fontFamily: _familySharp, fontPackage: _package); + static const IconData more_vertical_sharp = IconData(0xe1ba, fontFamily: _familySharp, fontPackage: _package); + static const IconData refresh_sharp = IconData(0xe1bb, fontFamily: _familySharp, fontPackage: _package); + static const IconData unfold_less_sharp = IconData(0xe1bc, fontFamily: _familySharp, fontPackage: _package); + static const IconData unfold_more_sharp = IconData(0xe1bd, fontFamily: _familySharp, fontPackage: _package); + static const IconData add_group_sharp = IconData(0xe1be, fontFamily: _familySharp, fontPackage: _package); + static const IconData add_person_sharp = IconData(0xe1bf, fontFamily: _familySharp, fontPackage: _package); + static const IconData bad_mood_sharp = IconData(0xe1c0, fontFamily: _familySharp, fontPackage: _package); + static const IconData blog_sharp = IconData(0xe1c1, fontFamily: _familySharp, fontPackage: _package); + static const IconData dislike_sharp = IconData(0xe1c2, fontFamily: _familySharp, fontPackage: _package); + static const IconData facebook_sharp = IconData(0xe1c3, fontFamily: _familySharp, fontPackage: _package); + static const IconData group_sharp = IconData(0xe1c4, fontFamily: _familySharp, fontPackage: _package); + static const IconData groups_sharp = IconData(0xe1c5, fontFamily: _familySharp, fontPackage: _package); + static const IconData happy_sharp = IconData(0xe1c6, fontFamily: _familySharp, fontPackage: _package); + static const IconData instagram_sharp = IconData(0xe1c7, fontFamily: _familySharp, fontPackage: _package); + static const IconData ios_share_sharp = IconData(0xe1c8, fontFamily: _familySharp, fontPackage: _package); + static const IconData like_sharp = IconData(0xe1c9, fontFamily: _familySharp, fontPackage: _package); + static const IconData linkedin_sharp = IconData(0xe1ca, fontFamily: _familySharp, fontPackage: _package); + static const IconData medium_sharp = IconData(0xe1cb, fontFamily: _familySharp, fontPackage: _package); + static const IconData notifications_active_sharp = IconData(0xe1cc, fontFamily: _familySharp, fontPackage: _package); + static const IconData notifications_outline_sharp = IconData(0xe1cd, fontFamily: _familySharp, fontPackage: _package); + static const IconData notifications_sharp = IconData(0xe1ce, fontFamily: _familySharp, fontPackage: _package); + static const IconData person_outline_sharp = IconData(0xe1cf, fontFamily: _familySharp, fontPackage: _package); + static const IconData person_sharp = IconData(0xe1d0, fontFamily: _familySharp, fontPackage: _package); + static const IconData remove_group_sharp = IconData(0xe1d1, fontFamily: _familySharp, fontPackage: _package); + static const IconData remove_person_sharp = IconData(0xe1d2, fontFamily: _familySharp, fontPackage: _package); + static const IconData sad_sharp = IconData(0xe1d3, fontFamily: _familySharp, fontPackage: _package); + static const IconData satisfied_sharp = IconData(0xe1d4, fontFamily: _familySharp, fontPackage: _package); + static const IconData share_sharp = IconData(0xe1d5, fontFamily: _familySharp, fontPackage: _package); + static const IconData switch_user_sharp = IconData(0xe1d6, fontFamily: _familySharp, fontPackage: _package); + static const IconData twitter_sharp = IconData(0xe1d7, fontFamily: _familySharp, fontPackage: _package); + static const IconData very_satisfied_sharp = IconData(0xe1d8, fontFamily: _familySharp, fontPackage: _package); + static const IconData world_map_sharp = IconData(0xe1d9, fontFamily: _familySharp, fontPackage: _package); + static const IconData youtube_sharp = IconData(0xe1da, fontFamily: _familySharp, fontPackage: _package); + static const IconData check_box_empty_sharp = IconData(0xe1db, fontFamily: _familySharp, fontPackage: _package); + static const IconData check_box_sharp = IconData(0xe1dc, fontFamily: _familySharp, fontPackage: _package); + static const IconData indeterminate_check_box_sharp = + IconData(0xe1dd, fontFamily: _familySharp, fontPackage: _package); + static const IconData radio_button_checked_sharp = IconData(0xe1de, fontFamily: _familySharp, fontPackage: _package); + static const IconData radio_button_unchecked_sharp = + IconData(0xe1df, fontFamily: _familySharp, fontPackage: _package); + static const IconData star_half_sharp = IconData(0xe1e0, fontFamily: _familySharp, fontPackage: _package); + static const IconData star_outline_sharp = IconData(0xe1e1, fontFamily: _familySharp, fontPackage: _package); + static const IconData star_sharp = IconData(0xe1e2, fontFamily: _familySharp, fontPackage: _package); + static const IconData toggle_off_sharp = IconData(0xe1e3, fontFamily: _familySharp, fontPackage: _package); + static const IconData toggle_on_sharp = IconData(0xe1e4, fontFamily: _familySharp, fontPackage: _package); +} diff --git a/lib/src/components/accordion/accordion.dart b/lib/src/components/accordion/accordion.dart new file mode 100644 index 00000000..6b2966f8 --- /dev/null +++ b/lib/src/components/accordion/accordion.dart @@ -0,0 +1,185 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import '../../../zeta_flutter.dart'; + +/// Zeta Accordion component. +/// +/// The accordion is a control element comprising a vertically stacked list of items, +/// such as labels or thumbnails. Each item can be "expanded" or "collapsed" to reveal +/// the content associated with that item. There can be zero expanded items, exactly one, +/// or more than one item expanded at a time, depending on the configuration. +class ZetaAccordion extends StatefulWidget { + /// The constructor of the component [ZetaAccordion]. + const ZetaAccordion({ + super.key, + required this.title, + this.child, + this.rounded = true, + this.contained = false, + this.isOpen = false, + }); + + /// Children displayed when component is opened. + /// + /// If null, component will render as disabled. + final Widget? child; + + /// {@template zeta-component-rounded} + /// Sets rounded or sharp border of the containing box and the icon style. + /// + /// Defaults to `true`. + /// {@endtemplate} + final bool rounded; + + /// Determines if the [ZetaAccordion]s should be in a box. + /// + /// Defaults to `false`. + final bool contained; + + /// Title of Accordion. + final String title; + + /// Whether the accordion is open or closed. + /// + /// Defaults to false(closed). + final bool isOpen; + @override + State createState() => _ZetaAccordionState(); + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(DiagnosticsProperty('contained', contained)) + ..add(StringProperty('title', title)) + ..add(DiagnosticsProperty('isOpen', isOpen)); + } +} + +class _ZetaAccordionState extends State with TickerProviderStateMixin { + late bool _isOpen; + late bool _disabled; + late final AnimationController _controller; + late final Animation _animation; + + @override + void initState() { + super.initState(); + _controller = AnimationController( + duration: const Duration(milliseconds: 300), + reverseDuration: const Duration(milliseconds: 200), + vsync: this, + ); + _animation = CurvedAnimation( + parent: _controller, + curve: Curves.fastOutSlowIn, + ); + init(); + } + + @override + void didUpdateWidget(ZetaAccordion oldWidget) { + init(); + super.didUpdateWidget(oldWidget); + } + + void init() { + _isOpen = widget.isOpen; + _disabled = widget.child == null; + } + + @override + void dispose() { + _controller.dispose(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + final zetaColors = Zeta.of(context).colors; + final borderColor = _disabled ? zetaColors.borderDisabled : zetaColors.borderSubtle; + return DecoratedBox( + decoration: BoxDecoration( + border: widget.contained ? Border.all(color: borderColor) : Border(top: BorderSide(color: borderColor)), + borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, + ), + child: Padding( + padding: const EdgeInsets.all(1), + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + TextButton( + style: ButtonStyle( + shape: MaterialStatePropertyAll( + RoundedRectangleBorder(borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none), + ), + overlayColor: MaterialStateProperty.resolveWith((states) { + if (states.contains(MaterialState.hovered)) { + return zetaColors.cool.shade20; + } + if (states.contains(MaterialState.pressed)) { + return zetaColors.cool.shade30; + } + + if (states.contains(MaterialState.focused)) { + return Colors.transparent; + } + + return null; + }), + side: MaterialStateProperty.resolveWith((states) { + if (states.contains(MaterialState.focused)) { + return BorderSide(color: zetaColors.blue.shade50, width: 2); + } + return null; + }), + ), + onPressed: _disabled + ? null + : () => setState(() { + if (_isOpen) { + _controller.reverse(); + _isOpen = false; + } else { + _isOpen = true; + _controller.forward(); + } + }), + child: Padding( + padding: const EdgeInsets.all(16), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + DefaultTextStyle( + style: ZetaTextStyles.titleMedium.apply( + color: _disabled ? zetaColors.textDisabled : zetaColors.textDefault, + ), + child: Flexible(child: Text(widget.title)), + ), + Padding( + padding: const EdgeInsets.only(left: ZetaSpacing.x4), + child: Icon( + _isOpen + ? (widget.rounded ? ZetaIcons.remove_round : ZetaIcons.remove_sharp) + : (widget.rounded ? ZetaIcons.add_round : ZetaIcons.add_sharp), + color: _disabled ? zetaColors.iconDisabled : zetaColors.iconDefault, + ), + ), + ], + ), + ), + ), + SizeTransition( + sizeFactor: _animation, + axisAlignment: -1, + child: Padding( + padding: const EdgeInsets.fromLTRB(ZetaSpacing.x4, 0, ZetaSpacing.x4, ZetaSpacing.x4), + child: DefaultTextStyle(style: ZetaTextStyles.titleSmall, child: widget.child ?? const SizedBox()), + ), + ), + ], + ), + ), + ); + } +} diff --git a/lib/src/components/avatars/avatar.dart b/lib/src/components/avatars/avatar.dart new file mode 100644 index 00000000..376c9f28 --- /dev/null +++ b/lib/src/components/avatars/avatar.dart @@ -0,0 +1,235 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import '../../../zeta_flutter.dart'; + +/// [ZetaAvatar] size +enum ZetaAvatarSize { + /// [xl] 64 pixels + xl, + + /// [l] 48 pixels + l, + + /// [m] 40 pixels + m, + + /// [s] 32 pixels + s, + + /// [xs] 24 pixels + xs, +} + +/// ZetaAvatar component +class ZetaAvatar extends StatelessWidget { + /// Constructor for [ZetaAvatar] + const ZetaAvatar({ + super.key, + this.size = ZetaAvatarSize.xl, + this.image, + this.initials, + this.backgroundColor, + this.lowerBadge, + this.upperBadge, + this.borderColor, + }); + + /// Constructor for [ZetaAvatar] with image. + const ZetaAvatar.image({ + super.key, + this.size = ZetaAvatarSize.xl, + this.image, + this.lowerBadge, + this.upperBadge, + this.borderColor, + }) : backgroundColor = null, + initials = null; + + /// Constructor for [ZetaAvatar] with initials. + const ZetaAvatar.initials({ + super.key, + required this.initials, + this.size = ZetaAvatarSize.xl, + this.lowerBadge, + this.upperBadge, + this.borderColor, + this.backgroundColor, + }) : image = null; + + /// Constructor for [ZetaAvatar] with initials from a full name. + ZetaAvatar.fromName({ + super.key, + required String name, + this.size = ZetaAvatarSize.xl, + this.lowerBadge, + this.upperBadge, + this.borderColor, + this.backgroundColor, + }) : image = null, + initials = name.initials; + + /// The size of the [ZetaAvatar] + final ZetaAvatarSize size; + + /// Image to display for avatar. + /// + /// [image] takes priority over [initials]. + final Widget? image; + + /// String to display initials. + final String? initials; + + /// Background color. + final Color? backgroundColor; + + /// Shows border around the avatar + final Color? borderColor; + + /// Status badge shown at lower right corner of avatar. + final ZetaIndicator? lowerBadge; + + /// Notification Badge shown at top right corner of avatar. + final ZetaIndicator? upperBadge; + + bool get _showPlaceholder => image == null && (initials == null || initials!.isEmpty); + + @override + Widget build(BuildContext context) { + final zetaColors = Zeta.of(context).colors; + + final borderSize = size.borderSize; + final sizePixels = size.pixelSize; + final contentSizePixels = size.pixelSize - (borderColor != null ? size.borderSize * 2 : 0); + + final innerContent = ClipRRect( + borderRadius: BorderRadius.circular(64), + clipBehavior: Clip.hardEdge, + child: image ?? + (_showPlaceholder + ? Container( + transform: Matrix4.translationValues(-contentSizePixels * 0.2, -contentSizePixels * 0.1, 0), + child: IconTheme( + data: IconThemeData( + color: Zeta.of(context).colors.cool, + size: contentSizePixels * 1.4, + ), + child: const Icon(ZetaIcons.user_round), + ), + ) + : Center( + child: Text( + size == ZetaAvatarSize.xs ? initials!.substring(0, 1) : initials!, + style: TextStyle(fontSize: size.fontSize, letterSpacing: -0.5), + ), + )), + ); + + return Stack( + children: [ + Container( + margin: EdgeInsets.all(upperBadge == null && lowerBadge == null ? 0 : 3), + width: sizePixels, + height: sizePixels, + decoration: BoxDecoration( + border: borderColor != null ? Border.all(color: borderColor!, width: borderSize / ZetaSpacing.x0_5) : null, + borderRadius: ZetaRadius.full, + color: backgroundColor ?? (_showPlaceholder ? zetaColors.surfacePrimary : zetaColors.cool.shade20), + ), + child: borderColor != null + ? Container( + width: contentSizePixels, + height: contentSizePixels, + decoration: BoxDecoration( + color: _showPlaceholder ? backgroundColor ?? zetaColors.surfaceHovered : null, + border: Border.all(color: zetaColors.surfacePrimary, width: borderSize / ZetaSpacing.x0_5), + borderRadius: ZetaRadius.full, + ), + child: ClipRRect(borderRadius: ZetaRadius.full, clipBehavior: Clip.hardEdge, child: innerContent), + ) + : innerContent, + ), + if (upperBadge != null) + Positioned( + right: 1, + child: upperBadge!.copyWith(size: size.indicatorSize), + ), + if (lowerBadge != null) + Positioned( + right: 1, + bottom: 1, + child: lowerBadge!.copyWith(size: size.indicatorSize), + ), + ], + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('size', size)) + ..add(DiagnosticsProperty('name', initials)) + ..add(DiagnosticsProperty('specialStatus', lowerBadge)) + ..add(DiagnosticsProperty('badge', upperBadge)) + ..add(DiagnosticsProperty('backgroundColor', backgroundColor)) + ..add(ColorProperty('statusColor', borderColor)); + } +} + +extension on ZetaAvatarSize { + double get pixelSize { + switch (this) { + case ZetaAvatarSize.xl: + return ZetaSpacing.x16; + case ZetaAvatarSize.l: + return ZetaSpacing.x12; + case ZetaAvatarSize.m: + return ZetaSpacing.x10; + case ZetaAvatarSize.s: + return ZetaSpacing.x8; + case ZetaAvatarSize.xs: + return ZetaSpacing.x6; + } + } + + ZetaWidgetSize get indicatorSize { + switch (this) { + case ZetaAvatarSize.xl: + case ZetaAvatarSize.l: + case ZetaAvatarSize.m: + return ZetaWidgetSize.large; + case ZetaAvatarSize.s: + return ZetaWidgetSize.medium; + + case ZetaAvatarSize.xs: + return ZetaWidgetSize.small; + } + } + + double get borderSize { + switch (this) { + case ZetaAvatarSize.xl: + case ZetaAvatarSize.l: + case ZetaAvatarSize.m: + return ZetaSpacing.x1; + + case ZetaAvatarSize.s: + case ZetaAvatarSize.xs: + return ZetaSpacing.x0_5; + } + } + + double get fontSize { + switch (this) { + case ZetaAvatarSize.xl: + return ZetaSpacing.x5; + case ZetaAvatarSize.l: + return ZetaSpacing.x4; + case ZetaAvatarSize.m: + return ZetaSpacing.x3_5; + case ZetaAvatarSize.s: + case ZetaAvatarSize.xs: + return ZetaSpacing.x3; + } + } +} diff --git a/lib/src/components/badges/badge.dart b/lib/src/components/badges/badge.dart new file mode 100644 index 00000000..b4fa87d8 --- /dev/null +++ b/lib/src/components/badges/badge.dart @@ -0,0 +1,57 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +/// Zeta Badge. +/// +/// Text badges notify users of line items that need attention. +class ZetaBadge extends StatelessWidget { + ///Constructs [ZetaBadge]. + const ZetaBadge({ + required this.label, + this.status = ZetaWidgetStatus.info, + this.rounded = true, + super.key, + }); + + /// {@macro zeta-component-rounded} + final bool rounded; + + /// {@template zeta-component-badge-status} + /// Indicates the status of the badge. + /// + /// Defaults to "info" + /// {@endtemplate} + final ZetaWidgetStatus status; + + /// Label of the badge. + final String label; + + @override + Widget build(BuildContext context) { + final Color backgroundColor = status.colorSwatch(context); + + return Container( + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x1, vertical: ZetaSpacing.x0_5), + decoration: BoxDecoration( + color: backgroundColor, + borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.minimal, + ), + child: Text( + label, + style: ZetaTextStyles.labelSmall.apply(color: backgroundColor.onColor), + overflow: TextOverflow.ellipsis, + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(StringProperty('label', label)) + ..add(EnumProperty('status', status)) + ..add(DiagnosticsProperty('rounded', rounded)); + } +} diff --git a/lib/src/components/badges/indicator.dart b/lib/src/components/badges/indicator.dart new file mode 100644 index 00000000..52785236 --- /dev/null +++ b/lib/src/components/badges/indicator.dart @@ -0,0 +1,161 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import '../../../zeta_flutter.dart'; + +/// [ZetaIndicator] type. +enum ZetaIndicatorType { + /// Shows an icon on [ZetaIndicator]. Defaults to [ZetaIcons.star_round]. + icon, + + /// Shows a number on [ZetaIndicator] from provided [ZetaIndicator.value]. + notification, +} + +/// ZetaIndicator. +/// +/// Indicators are used to show the status of a user or any messages/notifications they might have. +class ZetaIndicator extends StatelessWidget { + /// Constructor for [ZetaIndicator]. + const ZetaIndicator({ + super.key, + required this.type, + this.size = ZetaWidgetSize.large, + this.icon, + this.value, + this.inverse = false, + }); + + /// Constructor for [ZetaIndicator] of type [ZetaIndicatorType.icon]. + const ZetaIndicator.icon({ + super.key, + this.size = ZetaWidgetSize.large, + this.inverse = false, + this.icon, + }) : type = ZetaIndicatorType.icon, + value = null; + + /// Constructor for [ZetaIndicator] of type [ZetaIndicatorType.notification]. + const ZetaIndicator.notification({ + super.key, + this.size = ZetaWidgetSize.large, + this.inverse = false, + this.icon, + this.value, + }) : type = ZetaIndicatorType.notification; + + /// The type of the [ZetaIndicator] - icon or notification. + final ZetaIndicatorType type; + + /// The size of the [ZetaIndicator]. Default is [ZetaWidgetSize.large] + final ZetaWidgetSize size; + + /// Inverse the border color. + final bool inverse; + + /// Indicator icon, default: `ZetaIcons.star_round`. + final Icon? icon; + + /// Value for the type `notification`. + final int? value; + + /// Creates a clone. + ZetaIndicator copyWith({ + ZetaIndicatorType? type, + ZetaWidgetSize? size, + Icon? icon, + int? value, + bool? inverse, + }) { + return ZetaIndicator( + type: type ?? this.type, + size: size ?? this.size, + icon: icon ?? this.icon, + value: value ?? this.value, + inverse: inverse ?? this.inverse, + ); + } + + @override + Widget build(BuildContext context) { + final zetaColors = Zeta.of(context).colors; + final Color backgroundColor = (type == ZetaIndicatorType.icon ? zetaColors.blue : zetaColors.negative); + final Color foregroundColor = backgroundColor.onColor; + final sizePixels = _getSizePixels(size, type); + + return Container( + width: sizePixels + ZetaSpacing.x1, + height: sizePixels + ZetaSpacing.x1, + decoration: BoxDecoration( + color: (inverse ? foregroundColor : Colors.transparent), + borderRadius: ZetaRadius.full, + ), + child: Center( + child: Container( + width: sizePixels, + height: sizePixels, + decoration: BoxDecoration(color: backgroundColor, borderRadius: BorderRadius.circular(ZetaSpacing.x4)), + child: ClipRRect( + borderRadius: BorderRadius.circular(ZetaSpacing.x4), + clipBehavior: Clip.hardEdge, + child: size == ZetaWidgetSize.small ? null : _buildContent(foregroundColor), + ), + ), + ), + ); + } + + Widget _buildContent(Color foregroundColor) { + switch (type) { + case ZetaIndicatorType.icon: + final iconSize = _getIconSize(size); + return Center( + child: IconTheme( + data: IconThemeData(color: foregroundColor, size: iconSize), + child: icon ?? const Icon(ZetaIcons.star_round), + ), + ); + case ZetaIndicatorType.notification: + return Center( + child: Text( + value.formatMaxChars(), + style: (size == ZetaWidgetSize.large ? ZetaTextStyles.labelIndicator : ZetaTextStyles.labelTiny) + .apply(color: foregroundColor), + ), + ); + } + } + + /// Returns the size of [ZetaWidgetSize] in pixels. + double _getSizePixels(ZetaWidgetSize size, ZetaIndicatorType type) { + switch (size) { + case ZetaWidgetSize.large: + return ZetaSpacing.x4; + case ZetaWidgetSize.medium: + return type == ZetaIndicatorType.icon ? ZetaSpacing.x3 : ZetaSpacing.x3_5; + case ZetaWidgetSize.small: + return ZetaSpacing.x2; + } + } + + double _getIconSize(ZetaWidgetSize size) { + switch (size) { + case ZetaWidgetSize.large: + return ZetaSpacing.x3; + case ZetaWidgetSize.medium: + return ZetaSpacing.x2; + case ZetaWidgetSize.small: + return 0; + } + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('type', type)) + ..add(DiagnosticsProperty('size', size)) + ..add(DiagnosticsProperty('value', value)) + ..add(DiagnosticsProperty('icon', icon)) + ..add(DiagnosticsProperty('inverseBorder', inverse)); + } +} diff --git a/lib/src/components/badges/priority_pill.dart b/lib/src/components/badges/priority_pill.dart new file mode 100644 index 00000000..a95002c0 --- /dev/null +++ b/lib/src/components/badges/priority_pill.dart @@ -0,0 +1,72 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +///Zeta Priority Pill. +/// +/// This badge is used to indicate the order of importance. +class ZetaPriorityPill extends StatelessWidget { + ///Constructs [ZetaPriorityPill] + const ZetaPriorityPill({ + required this.index, + required this.priority, + this.rounded = true, + super.key, + }); + + /// {@macro zeta-component-rounded} + final bool rounded; + + /// Leading number in component. + final int index; + + /// Text in main part of component. + final String priority; + + @override + Widget build(BuildContext context) { + final theme = Zeta.of(context); + final backgroundColor = theme.colors.primary; + final Color foregroundColor = backgroundColor.onColor; + + return DecoratedBox( + decoration: BoxDecoration( + borderRadius: rounded ? ZetaRadius.full : ZetaRadius.none, + color: backgroundColor.shade10, + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Container( + alignment: Alignment.center, + height: ZetaSpacing.x7, + width: ZetaSpacing.x7, + decoration: BoxDecoration( + shape: rounded ? BoxShape.circle : BoxShape.rectangle, + color: backgroundColor, + ), + child: Text(index.formatMaxChars(), style: ZetaTextStyles.bodyMedium.apply(color: foregroundColor)), + ), + Padding( + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2, vertical: ZetaSpacing.x1), + child: Text( + priority, + style: ZetaTextStyles.bodyMedium, + overflow: TextOverflow.ellipsis, + ), + ), + ], + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(IntProperty('index', index)) + ..add(StringProperty('priority', priority)) + ..add(DiagnosticsProperty('rounded', rounded)); + } +} diff --git a/lib/src/components/badges/status_label.dart b/lib/src/components/badges/status_label.dart new file mode 100644 index 00000000..e403d0a2 --- /dev/null +++ b/lib/src/components/badges/status_label.dart @@ -0,0 +1,68 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import '../../../zeta_flutter.dart'; + +/// Zeta Status Label. +/// +/// To help some information, labels, or errors stand out, we present them with badges. +/// They can look like buttons, but users can’t select them. They just guide users to things they should pay attention to. +class ZetaStatusLabel extends StatelessWidget { + ///Constructs [ZetaStatusLabel]. + const ZetaStatusLabel({ + super.key, + required this.label, + this.rounded = true, + this.status = ZetaWidgetStatus.info, + this.customIcon, + }); + + /// {@macro zeta-component-rounded} + final bool rounded; + + /// {@macro zeta-component-badge-status} + final ZetaWidgetStatus status; + + /// Text displayed on label. + final String label; + + /// Optional custom icon. If null, default circle icon is used. + final IconData? customIcon; + + @override + Widget build(BuildContext context) { + final ZetaColorSwatch colors = status.colorSwatch(context); + + return DecoratedBox( + decoration: BoxDecoration( + color: colors.shade10, + border: Border.all(color: colors.border), + borderRadius: rounded ? ZetaRadius.full : ZetaRadius.minimal, + ), + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2, vertical: ZetaSpacing.x0_5), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(customIcon ?? Icons.circle, size: ZetaSpacing.x2, color: colors.icon), + const SizedBox(width: ZetaSpacing.xs), + Text( + label, + style: ZetaTextStyles.bodyMedium.apply(color: colors.shade10.onColor), + overflow: TextOverflow.ellipsis, + ), + ], + ), + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(StringProperty('label', label)) + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(DiagnosticsProperty('customIcon', customIcon)) + ..add(EnumProperty('severity', status)); + } +} diff --git a/lib/src/components/badges/tag.dart b/lib/src/components/badges/tag.dart new file mode 100644 index 00000000..877141ab --- /dev/null +++ b/lib/src/components/badges/tag.dart @@ -0,0 +1,171 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +///Tag Direction options for [ZetaTag]. +enum ZetaTagDirection { + ///Tag facing left. + left, + + ///Tag facing right. + right +} + +///Zeta Tag +class ZetaTag extends StatelessWidget { + ///Constructs [ZetaTag]. + const ZetaTag({ + super.key, + this.direction = ZetaTagDirection.left, + required this.label, + this.rounded = true, + }); + + /// Constructs left facing [ZetaTag]. + const ZetaTag.left({super.key, required this.label, this.rounded = true}) : direction = ZetaTagDirection.left; + + ///Constructs right facing [ZetaTag]. + const ZetaTag.right({super.key, required this.label, this.rounded = true}) : direction = ZetaTagDirection.right; + + ///Determines the direction of the tag + /// + /// Defaults to left + final ZetaTagDirection direction; + + /// {@zeta-component-rounded} + final bool rounded; + + ///tag label + final String label; + + /// Fixed container size + static const Size _containerSize = Size(ZetaSpacing.x9, ZetaSpacing.x7); + + @override + Widget build(BuildContext context) { + return Row( + children: [ + if (direction == ZetaTagDirection.right) _buildCustomPaint(context), + Container( + decoration: BoxDecoration( + color: Zeta.of(context).colors.surfaceHovered, + borderRadius: _getBorderRadius(), + ), + height: _containerSize.height, + constraints: BoxConstraints(minWidth: _containerSize.width), + child: Center( + child: FittedBox( + child: Padding( + padding: const EdgeInsets.fromLTRB(ZetaSpacing.x2, 1, ZetaSpacing.x2, 1), + child: Text( + label, + style: ZetaTextStyles.bodyMedium, + overflow: TextOverflow.ellipsis, + ), + ), + ), + ), + ), + if (direction == ZetaTagDirection.left) _buildCustomPaint(context), + ], + ); + } + + BorderRadius? _getBorderRadius() { + if (!rounded) return null; + if (direction == ZetaTagDirection.right) { + return const BorderRadius.only( + topRight: Radius.circular(ZetaSpacing.x0_5), + bottomRight: Radius.circular(ZetaSpacing.x0_5), + ); + } else { + return const BorderRadius.only( + topLeft: Radius.circular(ZetaSpacing.x0_5), + bottomLeft: Radius.circular(ZetaSpacing.x0_5), + ); + } + } + + Widget _buildCustomPaint(BuildContext context) { + return CustomPaint( + size: const Size(ZetaSpacing.x3, ZetaSpacing.x7), + painter: _TagPainter( + color: Zeta.of(context).colors.surfaceHovered, + direction: direction, + rounded: rounded, + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(EnumProperty('direction', direction)) + ..add(StringProperty('label', label)) + ..add(DiagnosticsProperty('rounded', rounded)); + } +} + +class _TagPainter extends CustomPainter { + const _TagPainter({ + required this.color, + required this.direction, + required this.rounded, + }); + + final Color color; + final ZetaTagDirection direction; + final bool rounded; + + @override + void paint(Canvas canvas, Size size) { + final Paint paint = Paint() + ..color = color + ..style = PaintingStyle.fill; + final path = _drawPath(size, rounded, direction == ZetaTagDirection.right); + + canvas.drawPath(path, paint); + } + + Path _drawPath(Size size, bool rounded, bool isRight) { + /// Const points of path + const double a = 0.1; + const double b = 0.04; + const double c = 0.48; + const double d = 0.55; + + // Dynamic points on path + final double e = isRight ? size.width : 0; + final double f = isRight ? 1 : -1; + + final path = Path() + ..moveTo(e + f, 0) + ..lineTo(e, 0); + if (rounded) { + path + ..lineTo(size.width * (isRight ? a : 1 - a), size.height * (1 - d)) + ..cubicTo( + size.width * (isRight ? b : 1 - b), + size.height * c, + size.width * (isRight ? b : 1 - b), + size.height * (1 - c), + size.width * (isRight ? a : 1 - a), + size.height * d, + ); + } else { + path.lineTo(isRight ? 0 : size.width, size.height / 2); + } + + path + ..lineTo(e, size.height) + ..lineTo(e + f, size.height) + ..close(); + + return path; + } + + @override + bool shouldRepaint(covariant CustomPainter oldDelegate) => false; +} diff --git a/lib/src/components/badges/workcloud_indicator.dart b/lib/src/components/badges/workcloud_indicator.dart new file mode 100644 index 00000000..3a79c04a --- /dev/null +++ b/lib/src/components/badges/workcloud_indicator.dart @@ -0,0 +1,164 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +///Indicator Type +enum ZetaWorkcloudIndicatorType { + /// Red. + one, + + /// Orange + two, + + /// Blue. + three, + + /// Green. + four, + + /// Purple. + five, + + /// Pink. + six, + + /// Yellow. + seven, + + /// Teal + eight, + + /// Cool grey. + nine, + + /// Warn grey. + ten, +} + +extension on ZetaWorkcloudIndicatorType { + ZetaColorSwatch color(BuildContext context) { + final colors = Zeta.of(context).colors; + switch (this) { + case ZetaWorkcloudIndicatorType.one: + return colors.red; + case ZetaWorkcloudIndicatorType.two: + return colors.orange; + case ZetaWorkcloudIndicatorType.three: + return colors.blue; + case ZetaWorkcloudIndicatorType.four: + return colors.green; + case ZetaWorkcloudIndicatorType.five: + return colors.purple; + case ZetaWorkcloudIndicatorType.six: + return colors.pink; + case ZetaWorkcloudIndicatorType.seven: + return colors.yellow; + case ZetaWorkcloudIndicatorType.eight: + return colors.teal; + case ZetaWorkcloudIndicatorType.nine: + return colors.cool; + case ZetaWorkcloudIndicatorType.ten: + return colors.warm; + } + } +} + +/// Zeta Workcloud Indicator. +/// +/// There are 10 available levels in which ether the values 1 through 10 can be used, +/// or icons can be passed. +class ZetaWorkcloudIndicator extends StatelessWidget { + ///Constructs [ZetaWorkcloudIndicator] + const ZetaWorkcloudIndicator({ + super.key, + this.priorityType = ZetaWorkcloudIndicatorType.one, + this.prioritySize = ZetaWidgetSize.small, + this.label, + this.index, + this.icon, + }); + + /// The type of priority. + final ZetaWorkcloudIndicatorType priorityType; + + /// The size of Priority Pill. + /// + /// Defaults to 'small'. + final ZetaWidgetSize prioritySize; + + /// Text label. Not shown when [prioritySize] is [ZetaWidgetSize.small] + final String? label; + + /// Index value. Typically a number. + /// + /// If null, and no icon is provided, the index will match the [priorityType]. + /// + /// It is recommended to not exceed 2 characters here. + final String? index; + + /// Custom icon. If not null, this will replace the index text. + final IconData? icon; + + @override + Widget build(BuildContext context) { + final ZetaColorSwatch color = priorityType.color(context); + final textStyle = prioritySize == ZetaWidgetSize.large ? ZetaTextStyles.labelMedium : ZetaTextStyles.labelTiny; + + return DecoratedBox( + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(ZetaSpacing.l), + color: color.shade20, + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + SizedBox.square( + dimension: prioritySize == ZetaWidgetSize.large ? ZetaSpacing.x6 : ZetaSpacing.x5, + child: Container( + alignment: Alignment.center, + decoration: BoxDecoration( + shape: BoxShape.circle, + color: priorityType == ZetaWorkcloudIndicatorType.nine ? color.shade80 : color, + ), + child: Center( + child: icon != null + ? Icon( + icon, + size: prioritySize == ZetaWidgetSize.large ? ZetaSpacing.x4 : ZetaSpacing.x3_5, + color: color.onColor, + ) + : Text( + index ?? (priorityType.index + 1).toString(), + style: textStyle.apply(color: color.onColor), + textAlign: TextAlign.center, + ), + ), + ), + ), + if (prioritySize != ZetaWidgetSize.small) + Container( + constraints: const BoxConstraints(minWidth: ZetaSpacing.x9), + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.xs), + child: Text(label ?? '', style: textStyle, overflow: TextOverflow.ellipsis), + ), + ], + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add( + EnumProperty('priorityType', priorityType), + ) + ..add( + EnumProperty('prioritySize', prioritySize), + ) + ..add(StringProperty('label', label)) + ..add(StringProperty('index', index)) + ..add(DiagnosticsProperty('icon', icon)); + } +} diff --git a/lib/src/components/banners/in_page_banner.dart b/lib/src/components/banners/in_page_banner.dart new file mode 100644 index 00000000..227703be --- /dev/null +++ b/lib/src/components/banners/in_page_banner.dart @@ -0,0 +1,140 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +///Zeta In Page Banner +class ZetaInPageBanner extends StatelessWidget { + ///Constructs [ZetaInPageBanner] + const ZetaInPageBanner({ + super.key, + required this.content, + this.rounded = true, + this.status = ZetaWidgetStatus.info, + this.onClose, + this.title, + this.customIcon, + this.actions = const [], + }); + + ///The content of the banner. Typically [Text]. + final Widget content; + + /// {@macro zeta-component-rounded} + final bool rounded; + + ///Determines the color of the banner. + /// + ///Defaults to [ZetaWidgetStatus.info]. + final ZetaWidgetStatus status; + + ///Title of the banner. + final String? title; + + /// Leading icon on top left of banner. + final IconData? customIcon; + + /// Action buttons to show at the bottom of the banner. + final List actions; + + /// Called when the button 'Close' is tapped. + /// + /// If null, close icon will not appear. + final VoidCallback? onClose; + + @override + Widget build(BuildContext context) { + final theme = Zeta.of(context); + final colors = status.colorSwatch(context); + final hasTitle = title != null; + + return DecoratedBox( + decoration: BoxDecoration( + color: colors.surface, + border: Border.all(color: colors.border), + borderRadius: rounded ? ZetaRadius.minimal : ZetaRadius.none, + ), + child: Padding( + padding: const EdgeInsets.all(ZetaSpacing.x0_5), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Padding( + padding: const EdgeInsetsDirectional.only(top: ZetaSpacing.x3, start: ZetaSpacing.x2_5), + child: Icon( + status.icon(rounded: rounded), + size: ZetaSpacing.x5, + color: status == ZetaWidgetStatus.neutral ? theme.colors.textDefault : colors.icon, + ), + ), + Expanded( + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + const SizedBox(height: ZetaSpacing.x2_5), + if (hasTitle) + Text( + title!, + style: ZetaTextStyles.titleSmall, + ).paddingBottom(ZetaSpacing.xxs), + DefaultTextStyle( + style: ZetaTextStyles.bodyMedium.apply(color: theme.colors.textDefault), + child: content, + ), + if (actions.isNotEmpty) + Row( + children: actions + .map((e) => e.copyWith(size: ZetaWidgetSize.medium, type: ZetaButtonType.outlineSubtle)) + .divide(const SizedBox.square(dimension: ZetaSpacing.x2)) + .toList(), + ).paddingTop(ZetaSpacing.x4), + const SizedBox(height: ZetaSpacing.x2_5), + ], + ), + ), + if (onClose != null) + IconButton( + onPressed: onClose, + icon: Icon( + !rounded ? ZetaIcons.close_sharp : ZetaIcons.close_round, + size: ZetaSpacing.x5, + ), + ), + ].divide(const SizedBox.square(dimension: ZetaSpacing.x2)).toList(), + ), + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add( + ObjectFlagProperty.has( + 'onCloseFunction', + onClose, + ), + ) + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(EnumProperty('severity', status)) + ..add(StringProperty('title', title)) + ..add(DiagnosticsProperty('customIcon', customIcon)); + } +} + +extension on ZetaWidgetStatus { + IconData icon({required bool rounded}) { + switch (this) { + case ZetaWidgetStatus.positive: + return rounded ? ZetaIcons.check_circle_round : ZetaIcons.check_circle_sharp; + case ZetaWidgetStatus.warning: + return rounded ? ZetaIcons.warning_round : ZetaIcons.warning_sharp; + case ZetaWidgetStatus.negative: + return rounded ? ZetaIcons.error_round : ZetaIcons.error_sharp; + case ZetaWidgetStatus.neutral: + case ZetaWidgetStatus.info: + return rounded ? ZetaIcons.info_round : ZetaIcons.info_sharp; + } + } +} diff --git a/lib/src/components/banners/system_banner.dart b/lib/src/components/banners/system_banner.dart new file mode 100644 index 00000000..deccf34a --- /dev/null +++ b/lib/src/components/banners/system_banner.dart @@ -0,0 +1,101 @@ +import 'dart:io'; + +import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; +import '../../../zeta_flutter.dart'; + +/// [ZetaSystemBanner] type +enum ZetaSystemBannerStatus { + /// Primary background. + primary, + + /// Green background. + positive, + + /// Yellow background. + warning, + + /// Red background. + negative, +} + +/// ZetaSystemBanner. Extends [MaterialBanner]. +/// +/// A banner displays an important, succinct message, and provides action for users to address. +/// It draws the attention to the message by displaying it at the top in various colors. +class ZetaSystemBanner extends MaterialBanner { + /// Constructor for [ZetaSystemBanner]. See [MaterialBanner] for more information. + ZetaSystemBanner({ + required BuildContext context, + required String title, + super.key, + IconData? leadingIcon, + ZetaSystemBannerStatus type = ZetaSystemBannerStatus.primary, + bool titleStart = false, + Widget? trailing, + }) : super( + content: Builder( + builder: (context) { + final backgroundColor = _backgroundColorFromType(context, type); + final foregroundColor = backgroundColor.onColor; + if (context.mounted) { + // ignore: invalid_use_of_visible_for_testing_member + final statusBarColor = SystemChrome.latestStyle?.statusBarColor; + if (Platform.isAndroid && statusBarColor != backgroundColor) { + SystemChrome.setSystemUIOverlayStyle( + SystemUiOverlayStyle( + statusBarColor: backgroundColor, + systemNavigationBarIconBrightness: backgroundColor.isDark ? Brightness.light : Brightness.dark, + ), + ); + } + } + + return DefaultTextStyle( + style: ZetaTextStyles.titleSmall.copyWith( + color: foregroundColor, + overflow: TextOverflow.ellipsis, + height: 1, + ), + child: Row( + mainAxisAlignment: titleStart ? MainAxisAlignment.center : MainAxisAlignment.start, + children: [ + if (leadingIcon != null) + Padding( + padding: const EdgeInsets.only(right: ZetaSpacing.x2), + child: Icon( + leadingIcon, + color: foregroundColor, + size: ZetaSpacing.x6, + ), + ), + Flexible(child: Text(title)), + ], + ), + ); + }, + ), + backgroundColor: _backgroundColorFromType(context, type), + actions: [ + IconTheme( + data: IconThemeData(color: _backgroundColorFromType(context, type).onColor), + child: trailing ?? const SizedBox(), + ), + ], + ); + + static ZetaColorSwatch _backgroundColorFromType(BuildContext context, ZetaSystemBannerStatus type) { + final zeta = Zeta.of(context); + + switch (type) { + case ZetaSystemBannerStatus.primary: + return zeta.colors.primary; + case ZetaSystemBannerStatus.positive: + return zeta.colors.positive; + case ZetaSystemBannerStatus.warning: + return zeta.colors.orange; + case ZetaSystemBannerStatus.negative: + return zeta.colors.negative; + } + } +} diff --git a/lib/src/components/bottom sheets/bottom_sheet.dart b/lib/src/components/bottom sheets/bottom_sheet.dart new file mode 100644 index 00000000..db1447c2 --- /dev/null +++ b/lib/src/components/bottom sheets/bottom_sheet.dart @@ -0,0 +1,108 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +/// Component [ZetaBottomSheet] +class ZetaBottomSheet extends StatelessWidget { + /// Constructor for [ZetaBottomSheet]. + const ZetaBottomSheet({ + super.key, + this.title, + this.body, + this.centerTitle = true, + }); + + /// The title of [ZetaBottomSheet]. + final String? title; + + /// Whether title should be center or left aligned. + /// + /// Defaults to true (center aligned). + final bool centerTitle; + + /// The content of [ZetaBottomSheet]. + final Widget? body; + + @override + Widget build(BuildContext context) { + final colors = Zeta.of(context).colors; + + return Container( + padding: const EdgeInsets.fromLTRB( + ZetaSpacing.x5, + 0, + ZetaSpacing.x5, + ZetaSpacing.x5, + ), + decoration: BoxDecoration( + color: colors.surfaceSecondary, + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(ZetaSpacing.x6), + topRight: Radius.circular(ZetaSpacing.x6), + ), + ), + child: Column( + mainAxisSize: MainAxisSize.min, + children: [ + Align( + child: SizedBox( + height: ZetaSpacing.x9, + child: Padding( + padding: const EdgeInsets.only(top: ZetaSpacing.x2), + child: Icon( + Icons.maximize_rounded, + size: ZetaSpacing.x16, + color: colors.surfaceDisabled, + ), + ), + ), + ), + if (title != null) + Align( + alignment: centerTitle ? Alignment.center : Alignment.centerLeft, + child: Text( + title!, + style: ZetaTextStyles.titleMedium, + ), + ), + Material( + color: colors.surfaceSecondary, + child: body ?? const SizedBox(), + ), + ], + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('title', title)) + ..add(DiagnosticsProperty('centerTitle', centerTitle)); + } +} + +/// Function to show [ZetaBottomSheet]. +/// +/// Uses [showModalBottomSheet] for functionality, but with Zeta styling and simplified functionality. +Future showZetaBottomSheet({ + required BuildContext context, + String? title, + Widget? body, + bool centerTitle = true, + bool isDismissible = true, + bool enableDrag = true, +}) { + return showModalBottomSheet( + context: context, + isDismissible: isDismissible, + enableDrag: enableDrag, + builder: (BuildContext context) => ZetaBottomSheet( + title: title, + body: body, + centerTitle: centerTitle, + ), + ); +} diff --git a/lib/src/components/bottom sheets/menu_items.dart b/lib/src/components/bottom sheets/menu_items.dart new file mode 100644 index 00000000..750c3ed7 --- /dev/null +++ b/lib/src/components/bottom sheets/menu_items.dart @@ -0,0 +1,150 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import '../../../zeta_flutter.dart'; + +/// The type of the [ZetaMenuItem] +enum ZetaMenuItemType { + /// [ZetaMenuItem] with icon and text in a row + horizontal, + + /// [ZetaMenuItem] with icon and text in a column + vertical, +} + +/// Zeta Menu Item component. +/// +/// Typically used as body of [ZetaBottomSheet]. +class ZetaMenuItem extends StatelessWidget { + /// Constructor for the component [ZetaMenuItem]. + /// + /// Typically, [ZetaMenuItem.horizontal] or [ZetaMenuItem.vertical] constructors should be used. + const ZetaMenuItem({ + super.key, + required this.type, + required this.label, + this.onTap, + this.leading, + this.trailing, + }); + + /// Creates horizontal menu item + const ZetaMenuItem.horizontal({ + super.key, + required this.label, + this.onTap, + this.leading, + this.trailing, + }) : type = ZetaMenuItemType.horizontal; + + /// Creates horizontal menu item + const ZetaMenuItem.vertical({ + super.key, + required this.label, + Widget? icon, + this.onTap, + }) : type = ZetaMenuItemType.vertical, + leading = icon, + trailing = null; + + /// The type of the [ZetaMenuItem] - horizontal or vertical. + final ZetaMenuItemType type; + + /// What to do when [ZetaMenuItem] is pressed. + final VoidCallback? onTap; + + /// The label of the [ZetaMenuItem]. + final Widget label; + + /// The leading widget of the [ZetaMenuItem]. + /// + /// Icon is at leading edge for [ZetaMenuItem.horizontal], and center aligned for [ZetaMenuItem.vertical]. + /// + /// Typically an [Icon]. + final Widget? leading; + + /// The trailing widget of the [ZetaMenuItem]. + /// + /// Only used for [ZetaMenuItem.horizontal]. + /// + /// Typically an icon. + final Widget? trailing; + + bool get _enabled => onTap != null; + + VoidCallback? get _onTap => _enabled ? onTap : null; + + @override + Widget build(BuildContext context) { + final colors = Zeta.of(context).colors; + + final Widget text = DefaultTextStyle( + style: ZetaTextStyles.labelLarge.apply(color: _enabled ? colors.textDefault : colors.textDisabled), + child: label, + ); + + switch (type) { + case ZetaMenuItemType.horizontal: + return ConstrainedBox( + constraints: const BoxConstraints(minHeight: ZetaSpacing.x12), + child: InkWell( + onTap: _onTap, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x4, vertical: ZetaSpacing.x3), + child: Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Expanded( + child: Row( + children: [ + if (leading != null) + Padding(padding: const EdgeInsets.only(right: ZetaSpacing.x2), child: leading), + Expanded(child: text), + ], + ), + ), + if (trailing != null) + IconTheme( + data: _iconThemeData(colors, _enabled, ZetaSpacing.x6), + child: trailing ?? const Icon(Icons.keyboard_arrow_right), + ), + ], + ), + ), + ), + ); + case ZetaMenuItemType.vertical: + return InkWell( + onTap: _onTap, + child: Padding( + padding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x4, vertical: ZetaSpacing.x3), + child: Column( + children: [ + if (leading != null) + Padding( + padding: const EdgeInsets.only(bottom: ZetaSpacing.x3), + child: IconTheme( + data: _iconThemeData(colors, _enabled, ZetaSpacing.x8), + child: leading!, + ), + ), + text, + ], + ), + ), + ); + } + } + + static IconThemeData _iconThemeData(ZetaColors colors, bool enabled, double size) => IconThemeData( + color: enabled ? colors.iconSubtle : colors.iconDisabled, + size: size, + ); + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('type', type)) + ..add(DiagnosticsProperty('onTap', onTap)); + } +} diff --git a/lib/src/components/buttons/button.dart b/lib/src/components/buttons/button.dart new file mode 100644 index 00000000..70ae5644 --- /dev/null +++ b/lib/src/components/buttons/button.dart @@ -0,0 +1,300 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +///Button types +enum ZetaButtonType { + /// Background: Primary color; defaults to blue. + /// Border: None. + primary, + + /// Background: Secondary color; defaults to yellow. + /// Border: None. + secondary, + + /// Background: Positive color; defaults to green. + /// Border: None. + positive, + + /// Background: Negative color; defaults to red. + /// Border: None. + negative, + + /// Background: None. + /// Border: Primary color; defaults to blue. + outline, + + /// Background: None. + /// Border: Subtle color; defaults to cool grey. + outlineSubtle, + + /// Background: None. + /// Border: None. + /// Foreground color: Primary; defaults to blue. + text, +} + +extension on ZetaButtonType { + ZetaColorSwatch color(ZetaColors colors) { + switch (this) { + case ZetaButtonType.secondary: + return colors.secondary; + case ZetaButtonType.positive: + return colors.positive; + case ZetaButtonType.negative: + return colors.negative; + case ZetaButtonType.outline: + case ZetaButtonType.primary: + return colors.primary; + case ZetaButtonType.outlineSubtle: + case ZetaButtonType.text: + return colors.cool; + } + } + + bool get border => this == ZetaButtonType.outline || this == ZetaButtonType.outlineSubtle; + bool get solid => index < 4; +} + +extension on ZetaWidgetBorder { + BorderRadius get radius { + switch (this) { + case ZetaWidgetBorder.sharp: + return ZetaRadius.none; + case ZetaWidgetBorder.rounded: + return ZetaRadius.minimal; + case ZetaWidgetBorder.full: + return ZetaRadius.full; + } + } +} + +///Zeta Button +class ZetaButton extends StatelessWidget { + ///Constructs [ZetaButton] + const ZetaButton({ + required this.label, + this.onPressed, + this.type = ZetaButtonType.primary, + this.size = ZetaWidgetSize.medium, + this.borderType = ZetaWidgetBorder.rounded, + super.key, + }); + + /// Constructs [ZetaButton] with Primary theme. + const ZetaButton.primary({ + required this.label, + this.onPressed, + this.size = ZetaWidgetSize.medium, + this.borderType = ZetaWidgetBorder.rounded, + super.key, + }) : type = ZetaButtonType.primary; + + /// Constructs [ZetaButton] with Secondary theme. + const ZetaButton.secondary({ + required this.label, + this.onPressed, + this.size = ZetaWidgetSize.medium, + this.borderType = ZetaWidgetBorder.rounded, + super.key, + }) : type = ZetaButtonType.secondary; + + /// Constructs [ZetaButton] with Positive theme. + const ZetaButton.positive({ + required this.label, + this.onPressed, + this.size = ZetaWidgetSize.medium, + this.borderType = ZetaWidgetBorder.rounded, + super.key, + }) : type = ZetaButtonType.positive; + + /// Constructs [ZetaButton] with Negative theme. + const ZetaButton.negative({ + required this.label, + this.onPressed, + this.size = ZetaWidgetSize.medium, + this.borderType = ZetaWidgetBorder.rounded, + super.key, + }) : type = ZetaButtonType.negative; + + /// Constructs [ZetaButton] with Outline theme. + const ZetaButton.outline({ + required this.label, + this.onPressed, + this.size = ZetaWidgetSize.medium, + this.borderType = ZetaWidgetBorder.rounded, + super.key, + }) : type = ZetaButtonType.outline; + + /// Constructs [ZetaButton] with Outline Subtle theme. + const ZetaButton.outlineSubtle({ + required this.label, + this.onPressed, + this.size = ZetaWidgetSize.medium, + this.borderType = ZetaWidgetBorder.rounded, + super.key, + }) : type = ZetaButtonType.outlineSubtle; + + /// Constructs [ZetaButton] with text theme. + const ZetaButton.text({ + required this.label, + this.onPressed, + this.size = ZetaWidgetSize.medium, + this.borderType = ZetaWidgetBorder.rounded, + super.key, + }) : type = ZetaButtonType.text; + + ///Button label + final String label; + + ///Called when the button is tapped or otherwise activated. + final VoidCallback? onPressed; + + ///The coloring type of the button + final ZetaButtonType type; + + ///Whether or not the button is sharp or rounded + ///Defaults to rounded + final ZetaWidgetBorder borderType; + + /// Size of the button. Defaults to large. + final ZetaWidgetSize size; + + /// Creates a clone. + ZetaButton copyWith({ + String? label, + VoidCallback? onPressed, + ZetaButtonType? type, + ZetaWidgetSize? size, + ZetaWidgetBorder? borderType, + Key? key, + }) { + return ZetaButton( + label: label ?? this.label, + onPressed: onPressed ?? this.onPressed, + type: type ?? this.type, + size: size ?? this.size, + borderType: borderType ?? this.borderType, + key: key ?? this.key, + ); + } + + @override + Widget build(BuildContext context) { + final colors = Zeta.of(context).colors; + return ConstrainedBox( + constraints: BoxConstraints(minHeight: _minConstraints, minWidth: _minConstraints), + child: FilledButton( + onPressed: onPressed, + style: _buttonStyle(colors), + child: SelectionContainer.disabled( + child: label.isEmpty + ? const SizedBox() + : Text( + label, + style: _textStyle, + ).paddingHorizontal(_textPadding), + ), + ), + ); + } + + ButtonStyle _buttonStyle(ZetaColors colors) { + return ButtonStyle( + minimumSize: MaterialStateProperty.all(const Size.square(32)), + shape: MaterialStateProperty.all(RoundedRectangleBorder(borderRadius: borderType.radius)), + backgroundColor: MaterialStateProperty.resolveWith( + (states) { + if (states.contains(MaterialState.disabled)) { + return colors.surfaceDisabled; + } + if (states.contains(MaterialState.pressed)) { + return type.solid ? type.color(colors).shade70 : colors.primary.shade10; + } + if (states.contains(MaterialState.hovered)) { + return type.solid ? type.color(colors).shade50 : colors.cool.shade20; + } + return type.solid ? type.color(colors) : Colors.transparent; + }, + ), + foregroundColor: MaterialStateProperty.resolveWith( + (states) { + if (states.contains(MaterialState.disabled)) { + return colors.textDisabled; + } + switch (type) { + case ZetaButtonType.outline: + case ZetaButtonType.text: + return colors.primary; + case ZetaButtonType.outlineSubtle: + return colors.textDefault; + case ZetaButtonType.primary: + case ZetaButtonType.secondary: + case ZetaButtonType.positive: + case ZetaButtonType.negative: + return type.color(colors).onColor; + } + }, + ), + overlayColor: MaterialStateProperty.resolveWith((Set states) { + return null; + }), + side: MaterialStateProperty.resolveWith((Set states) { + if (type.border && states.contains(MaterialState.disabled)) { + return BorderSide(color: colors.cool.shade40); + } + // TODO(thelukewalton): This removes a defualt border when focused, rather than adding a second border when focused. + if (states.contains(MaterialState.focused)) { + return BorderSide(color: colors.blue, width: ZetaSpacing.x0_5); + } + if (type.border) { + return BorderSide(color: type == ZetaButtonType.outline ? colors.primary.border : colors.borderDefault); + } + + return null; + }), + elevation: const MaterialStatePropertyAll(0), + padding: MaterialStateProperty.all(EdgeInsets.zero), + ); + } + + TextStyle get _textStyle => size == ZetaWidgetSize.small ? ZetaTextStyles.labelMedium : ZetaTextStyles.labelLarge; + + double get _minConstraints { + switch (size) { + case ZetaWidgetSize.large: + return ZetaSpacing.x12; + + case ZetaWidgetSize.medium: + return ZetaSpacing.x10; + + case ZetaWidgetSize.small: + return ZetaSpacing.x8; + } + } + + double get _textPadding { + switch (size) { + case ZetaWidgetSize.large: + return ZetaSpacing.m; + + case ZetaWidgetSize.medium: + return ZetaSpacing.x3_5; + + case ZetaWidgetSize.small: + return ZetaSpacing.x2_5; + } + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(StringProperty('label', label)) + ..add(ObjectFlagProperty.has('onPressed', onPressed)) + ..add(EnumProperty('type', type)) + ..add(EnumProperty('borderType', borderType)) + ..add(EnumProperty('size', size)); + } +} diff --git a/lib/src/components/buttons/fab.dart b/lib/src/components/buttons/fab.dart new file mode 100644 index 00000000..2d7eb2b7 --- /dev/null +++ b/lib/src/components/buttons/fab.dart @@ -0,0 +1,211 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter/rendering.dart'; + +import '../../../zeta_flutter.dart'; + +/// Color type for [ZetaFAB]. +enum ZetaFabType { + /// Primary color scheme. Defaults to blue. + primary, + + /// Secondary color scheme. Defaults to yellow. + secondary, + + /// Inverse color scheme. Defaults to dark grey. + inverse +} + +///Defines the size of the floating action button +enum ZetaFabSize { + /// [small] 56 pixels + small, + + /// [large] 96 pixels + large, +} + +///Zeta Floating Action Button Component. +class ZetaFAB extends StatefulWidget { + ///Constructs [ZetaFAB]. + const ZetaFAB({ + required this.scrollController, + required this.label, + this.type = ZetaFabType.primary, + this.size = ZetaFabSize.small, + this.shape = ZetaWidgetBorder.full, + this.icon = ZetaIcons.add_round, + this.onPressed, + super.key, + }); + + /// Defines the color of the button. + /// + /// Defaults to [ZetaFabType.primary] + final ZetaFabType type; + + /// The Size of the button. + /// + /// Defaults to [ZetaFabSize.small]. + final ZetaFabSize size; + + /// The shape for the button. + /// + /// Defaults to [ZetaWidgetBorder.full]. + final ZetaWidgetBorder shape; + + /// Called when the button is tapped or otherwise activated. + final VoidCallback? onPressed; + + /// The [ZetaFAB] uses this controller to react to scroll change + /// and shrink/expand itself + final ScrollController scrollController; + + ///The label of the button + final String label; + + /// Icon for the button + /// + /// Defaults to [ZetaIcons.add_round]. + final IconData icon; + + @override + State createState() => _ZetaFABState(); + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(EnumProperty('buttonType', type)) + ..add(EnumProperty('buttonSize', size)) + ..add(EnumProperty('buttonShape', shape)) + ..add(ObjectFlagProperty.has('onPressed', onPressed)) + ..add( + DiagnosticsProperty( + 'scrollController', + scrollController, + ), + ) + ..add(StringProperty('buttonLabel', label)) + ..add(DiagnosticsProperty('buttonIcon', icon)); + } +} + +class _ZetaFABState extends State { + bool _isExpanded = false; + + @override + void initState() { + super.initState(); + _isExpanded = false; + widget.scrollController.addListener(_scrollListener); + } + + void _scrollListener() { + final expanded = widget.scrollController.position.userScrollDirection == ScrollDirection.reverse; + if (_isExpanded != expanded) { + setState(() => _isExpanded = expanded); + } + } + + @override + void dispose() { + widget.scrollController.removeListener(_scrollListener); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + final colors = widget.type.colors(context); + final backgroundColor = widget.type == ZetaFabType.inverse ? colors.shade80 : colors.shade60; + + return ElevatedButton( + onPressed: widget.onPressed, + style: ElevatedButton.styleFrom( + padding: EdgeInsets.zero, + shape: widget.shape.buttonShape(isExpanded: _isExpanded, size: widget.size), + backgroundColor: backgroundColor, + foregroundColor: backgroundColor.onColor, + ).copyWith( + overlayColor: MaterialStateProperty.resolveWith((Set states) { + if (states.contains(MaterialState.hovered)) return colors.hover; + if (states.contains(MaterialState.pressed)) return colors.selected; + return null; + }), + side: MaterialStateProperty.resolveWith( + (Set states) { + if (states.contains(MaterialState.focused)) { + // TODO(thelukewalton): This removes a defualt border when focused, rather than adding a second border when focused. + return BorderSide(color: Zeta.of(context).colors.blue.shade50, width: ZetaSpacing.x0_5); + } + return null; + }, + ), + ), + child: AnimatedContainer( + duration: const Duration(milliseconds: 300), + child: Padding( + padding: _isExpanded + ? const EdgeInsets.symmetric(horizontal: ZetaSpacing.x3_5, vertical: ZetaSpacing.x3) + : EdgeInsets.all(widget.size.padding), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + Icon(widget.icon, size: widget.size.iconSize), + if (_isExpanded) + Row( + mainAxisSize: MainAxisSize.min, + children: [ + Text(widget.label, style: ZetaTextStyles.labelLarge), + ], + ), + ].divide(const SizedBox(width: ZetaSpacing.x2)).toList(), + ), + ), + ), + ); + } +} + +extension on ZetaFabType { + ZetaColorSwatch colors(BuildContext context) { + final zetaColors = Zeta.of(context).colors; + switch (this) { + case ZetaFabType.primary: + return zetaColors.primary; + case ZetaFabType.secondary: + return zetaColors.secondary; + case ZetaFabType.inverse: + return zetaColors.cool; + } + } +} + +extension on ZetaWidgetBorder { + OutlinedBorder buttonShape({required bool isExpanded, required ZetaFabSize size}) { + if (this == ZetaWidgetBorder.full && !isExpanded) { + return const CircleBorder(); + } + if (this == ZetaWidgetBorder.sharp) { + return const RoundedRectangleBorder(); + } + return RoundedRectangleBorder( + borderRadius: BorderRadius.circular( + isExpanded + ? this == ZetaWidgetBorder.full + ? size == ZetaFabSize.small + ? ZetaSpacing.x7 + : ZetaSpacing.x12 + : ZetaSpacing.x2 + : size == ZetaFabSize.small + ? ZetaSpacing.x2 + : ZetaSpacing.x4, + ), + ); + } +} + +extension on ZetaFabSize { + double get iconSize => this == ZetaFabSize.small ? ZetaSpacing.x6 : ZetaSpacing.x9; + double get padding => this == ZetaFabSize.small ? ZetaSpacing.x4 : ZetaSpacing.x7_5; +} diff --git a/lib/src/components/checkbox.dart b/lib/src/components/checkbox.dart deleted file mode 100644 index 10a4c92b..00000000 --- a/lib/src/components/checkbox.dart +++ /dev/null @@ -1,201 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; -import '../../zeta_flutter.dart'; - -/// Zeta Checkbox border type -enum BorderType { - ///sharp border - sharp, - - ///rounded border - rounded, -} - -///Zeta Checkbox -class ZetaCheckbox extends StatelessWidget { - /// Constructs a [ZetaCheckbox]. - const ZetaCheckbox({ - required this.value, - required this.onChanged, - this.borderType = BorderType.sharp, - this.label, - this.labelStyle, - this.checkboxSize = const Size(25, 25), - this.selectedColor, - this.unselectedColor, - this.unselectedBorderColor, - this.unselectedBorderWidth = 2.5, - this.disabledColor, - this.isEnabled = true, - this.iconSize = 18.0, - super.key, - }) : assert(iconSize > 0, 'Icon size must be greater than 0'); - - /// Whether the checkbox is selected, unselected or null (indeterminate) - final bool? value; - - /// Called when the value of the checkbox should change. - final ValueChanged onChanged; - - /// The type of border to display - /// - /// defaults to sharp - final BorderType borderType; - - /// The label displayed next to the checkbox - final String? label; - - /// Style to use on the label - final TextStyle? labelStyle; - - ///Size of the checkbox - final Size checkboxSize; - - /// The color to use when this checkbox is checked. - final Color? selectedColor; - - ///Color of the checkbox when it's not selected - final Color? unselectedColor; - - ///Color of the border when the checkbox not selected - final Color? unselectedBorderColor; - - ///Width of the border when the checkbox is not selected - /// - /// Defaults to 2.5 - final double unselectedBorderWidth; - - ///Size of the icon displayed inside the checkbox - final double iconSize; - - ///If checkbox is enabled - /// - ///defaults to true - final bool isEnabled; - - ///Color of the checkbox when it's disabled - final Color? disabledColor; - - @override - Widget build(BuildContext context) { - final theme = Zeta.of(context); - final ValueNotifier isFocused = ValueNotifier(false); - - return FocusableActionDetector( - onFocusChange: (bool focus) => isFocused.value = focus, - child: GestureDetector( - onTap: _handleOnTap, - child: _buildCheckboxRow(theme, isFocused), - ), - ); - } - - void _handleOnTap() { - if (isEnabled) { - onChanged( - value == null - ? true - : value! - ? false - : null, - ); - } - } - - Widget _buildCheckboxRow( - Zeta theme, - ValueNotifier isFocused, - ) { - return Flex( - direction: Axis.horizontal, - mainAxisSize: MainAxisSize.min, - children: [ - _buildCheckboxContainer(theme, isFocused), - if (label != null) ...[ - Flexible( - child: Padding( - padding: const EdgeInsets.only(left: Dimensions.s), - child: Text( - label!, - style: labelStyle ?? ZetaText.zetaTitleMedium, - ), - ), - ), - ], - ], - ); - } - - Widget _buildCheckboxContainer(Zeta theme, ValueNotifier isFocused) { - return ValueListenableBuilder( - valueListenable: isFocused, - builder: (context, focused, child) { - return Container( - decoration: BoxDecoration( - boxShadow: _getBoxShadow(theme, focused), - color: _getCheckboxBackgroundColor(theme), - border: Border.all( - color: _getCheckboxBorderColor(theme), - width: unselectedBorderWidth, - ), - borderRadius: BorderRadius.circular( - borderType == BorderType.rounded ? 4.0 : 0.0, - ), - ), - width: checkboxSize.width, - height: checkboxSize.height, - child: _getCheckboxIcon(theme), - ); - }, - ); - } - - List _getBoxShadow(Zeta theme, bool focused) { - if (!focused) return []; - return [ - BoxShadow( - spreadRadius: 3, - color: theme.colors.surfaceSelectedHovered, - ), - ]; - } - - Widget _getCheckboxIcon(Zeta theme) { - if (value == null) return const SizedBox.shrink(); - return Icon( - value! ? Icons.check : Icons.remove, - color: isEnabled ? theme.colors.white : theme.colors.textDisabled, - size: iconSize, - ); - } - - Color _getCheckboxBackgroundColor(Zeta theme) { - if (!isEnabled) return disabledColor ?? theme.colors.surfaceDisabled; - if (value == null) return unselectedColor ?? theme.colors.surfaceSecondary; - return selectedColor ?? theme.colors.primary; - } - - Color _getCheckboxBorderColor(Zeta theme) { - if (!isEnabled || value != null) return Colors.transparent; - return unselectedBorderColor ?? theme.colors.borderDefault; - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty('value', value)) - ..add(ObjectFlagProperty>.has('onChanged', onChanged)) - ..add(EnumProperty('borderType', borderType)) - ..add(StringProperty('label', label)) - ..add(DiagnosticsProperty('labelStyle', labelStyle)) - ..add(DiagnosticsProperty('checkboxSize', checkboxSize)) - ..add(ColorProperty('selectedColor', selectedColor)) - ..add(ColorProperty('unselectedColor', unselectedColor)) - ..add(ColorProperty('unselectedBorderColor', unselectedBorderColor)) - ..add(DoubleProperty('unselectedBorderWidth', unselectedBorderWidth)) - ..add(ColorProperty('disabledColor', disabledColor)) - ..add(DiagnosticsProperty('isEnabled', isEnabled)) - ..add(DoubleProperty('iconSize', iconSize)); - } -} diff --git a/lib/src/components/checkbox/checkbox.dart b/lib/src/components/checkbox/checkbox.dart new file mode 100644 index 00000000..22a42060 --- /dev/null +++ b/lib/src/components/checkbox/checkbox.dart @@ -0,0 +1,243 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; +import '../../../zeta_flutter.dart'; + +/// Zeta Checkbox. +/// +/// Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off. +class ZetaCheckbox extends FormField { + /// Constructs a [ZetaCheckbox]. + ZetaCheckbox({ + super.key, + this.value = false, + this.label, + this.onChanged, + this.rounded = true, + this.useIndeterminate = false, + super.validator, + super.autovalidateMode, + super.restorationId, + }) : super( + initialValue: value, + enabled: onChanged != null, + builder: (field) { + return _Checkbox( + label: label, + onChanged: (changedValue) { + field.didChange(changedValue); + onChanged?.call(changedValue); + }, + rounded: rounded, + useIndeterminate: useIndeterminate, + value: value, + error: !field.isValid, + ); + }, + ); + + /// {@macro zeta-component-rounded} + final bool rounded; + + /// Whether the indeterminate state should be supported. + /// + /// Defaults to false. + final bool useIndeterminate; + + /// Whether the checkbox is selected, unselected or null (indeterminate) + final bool? value; + + /// Called when the value of the checkbox should change. + final ValueChanged? onChanged; + + /// The label displayed next to the checkbox + final String? label; + + @override + ZetaCheckboxFormFieldState createState() => ZetaCheckboxFormFieldState(); + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('isChecked', value)) + ..add(StringProperty('label', label)) + ..add(DiagnosticsProperty('useIndeterminate', useIndeterminate)) + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(ObjectFlagProperty?>.has('onChanged', onChanged)); + } +} + +/// [FormFieldState] for [ZetaCheckbox]. +class ZetaCheckboxFormFieldState extends FormFieldState { + @override + ZetaCheckbox get widget => super.widget as ZetaCheckbox; +} + +class _Checkbox extends StatefulWidget { + const _Checkbox({ + this.value = false, + this.onChanged, + this.label, + this.rounded = true, + this.useIndeterminate = false, + this.error = false, + }); + + /// Whether the checkbox is selected, unselected or null (indeterminate) + final bool? value; + + /// Called when the value of the checkbox should change. + final ValueChanged? onChanged; + + /// The label displayed next to the checkbox + final String? label; + + /// {@macro zeta-component-rounded} + final bool rounded; + + /// Whether the indeterminate state should be supported. + /// + /// Defaults to false. + final bool useIndeterminate; + + final bool error; + + @override + State<_Checkbox> createState() => _CheckboxState(); + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('value', value)) + ..add(ObjectFlagProperty?>.has('onChanged', onChanged)) + ..add(StringProperty('label', label)) + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(DiagnosticsProperty('useIndeterminate', useIndeterminate)) + ..add(DiagnosticsProperty('error', error)); + } +} + +class _CheckboxState extends State<_Checkbox> { + bool get _enabled => widget.onChanged != null; + + bool? get _value => widget.useIndeterminate ? widget.value : (widget.value ?? false); + + bool? get _updatedValue { + if (widget.useIndeterminate) { + if (widget.value == null) { + return false; + } else if (widget.value!) { + return null; + } else { + return true; + } + } else { + return !_value!; + } + } + + bool _isFocused = false; + bool _isHovered = false; + + @override + Widget build(BuildContext context) { + return Semantics( + checked: _value ?? false, + mixed: widget.useIndeterminate, + enabled: _enabled, + child: MouseRegion( + cursor: _enabled ? SystemMouseCursors.click : SystemMouseCursors.forbidden, + onEnter: (event) => setState(() => _isHovered = true), + onExit: (event) => setState(() => _isHovered = false), + child: _enabled + ? FocusableActionDetector( + onFocusChange: (bool focus) => setState(() => _isFocused = focus), + child: GestureDetector( + onTap: _enabled ? () => widget.onChanged?.call(_updatedValue) : null, + child: _buildContent(context), + ), + ) + : _buildContent(context), + ), + ); + } + + Flex _buildContent(BuildContext context) { + final theme = Zeta.of(context); + + final icon = _value != null && !_value! + ? const SizedBox.shrink() + : Icon( + _value != null + ? widget.rounded + ? ZetaIcons.check_round + : ZetaIcons.check_sharp + : widget.rounded + ? ZetaIcons.remove_round + : ZetaIcons.remove_sharp, + color: _enabled ? theme.colors.white : theme.colors.textDisabled, + size: ZetaSpacing.x3_5, + ); + + return Flex( + direction: Axis.horizontal, + mainAxisSize: MainAxisSize.min, + children: [ + AnimatedContainer( + duration: const Duration(milliseconds: 200), + decoration: BoxDecoration( + boxShadow: [ + if (_isFocused && _enabled) + BoxShadow( + spreadRadius: 2, + blurStyle: BlurStyle.solid, + color: theme.colors.blue.shade50, + ), + ], + color: _getBackground(theme), + border: _enabled ? Border.all(color: _getBorderColor(theme), width: ZetaSpacing.x0_5) : null, + borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, + ), + width: ZetaSpacing.x5, + height: ZetaSpacing.x5, + child: icon, + ), + if (widget.label != null) ...[ + Flexible( + child: Padding( + padding: const EdgeInsets.only(left: ZetaSpacing.s), + child: Text(widget.label!, style: ZetaTextStyles.bodyLarge), + ), + ), + ], + ], + ); + } + + Color _getBackground(Zeta theme) { + final ZetaColorSwatch color = widget.error ? theme.colors.error : theme.colors.primary; + + if (!_enabled || (_value != null && !_value!)) return theme.colors.surfacePrimary; + if (_isHovered) return color.hover; + + return color; + } + + Color _getBorderColor(Zeta theme) { + final ZetaColorSwatch color = widget.error ? theme.colors.error : theme.colors.cool; + + if (_isHovered) return color.shade90; + + return color; + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('value', widget.value)) + ..add(ObjectFlagProperty>.has('onChanged', widget.onChanged)) + ..add(DiagnosticsProperty('rounded', widget.rounded)) + ..add(StringProperty('label', widget.label)) + ..add(DiagnosticsProperty('useIndeterminate', widget.useIndeterminate)); + } +} diff --git a/lib/src/components/chips/assist_chip.dart b/lib/src/components/chips/assist_chip.dart new file mode 100644 index 00000000..4dc7658d --- /dev/null +++ b/lib/src/components/chips/assist_chip.dart @@ -0,0 +1,14 @@ +import 'chip.dart'; + +/// Zeta Assist Chip. +/// +/// Extends [ZetaChip]. +class ZetaAssistChip extends ZetaChip { + /// Creates a [ZetaAssistChip]. + const ZetaAssistChip({ + super.key, + required super.label, + super.leading, + super.rounded, + }) : super(type: ZetaChipType.assist); +} diff --git a/lib/src/components/chips/chip.dart b/lib/src/components/chips/chip.dart new file mode 100644 index 00000000..26a006c9 --- /dev/null +++ b/lib/src/components/chips/chip.dart @@ -0,0 +1,177 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +export './assist_chip.dart'; +export './filter_chip.dart'; +export './input_chip.dart'; + +/// The type of [ZetaChip] +enum ZetaChipType { + /// Input Chip + input, + + /// Filter Chip + filter, + + /// Assist Chip + assist, +} + +/// Zeta Chip component. +/// +/// This covers the board functionality of [ZetaAssistChip], [ZetaFilterChip] and [ZetaInputChip]. +class ZetaChip extends StatefulWidget { + /// Constructs a [ZetaChip]. + const ZetaChip({ + super.key, + required this.label, + required this.type, + this.leading, + this.rounded = true, + this.trailing, + this.selected, + this.onTap, + }); + + /// Type of [Chip]. + final ZetaChipType type; + + /// The label on the [ZetaChip] + final String label; + + /// Leading component. Typically an [Icon]. + final Widget? leading; + + /// {@macro zeta-component-rounded} + final bool rounded; + + /// Trailing component. Typically an [Icon]. + final Widget? trailing; + + /// Whether the [ZetaFilterChip] is selected. + final bool? selected; + + /// Callback when chip is tapped. + final VoidCallback? onTap; + + @override + State createState() => _ZetaChipState(); + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(EnumProperty('type', type)) + ..add(StringProperty('label', label)) + ..add(DiagnosticsProperty('rounded', rounded)) + ..add(DiagnosticsProperty('selected', selected)) + ..add(ObjectFlagProperty.has('onTap', onTap)); + } +} + +class _ZetaChipState extends State { + bool selected = false; + + Widget? get leading => + widget.leading ?? (selected ? Icon(widget.rounded ? ZetaIcons.check_round : ZetaIcons.check_sharp) : null); + + @override + void initState() { + super.initState(); + selected = widget.selected ?? false; + } + + @override + Widget build(BuildContext context) { + final colors = Zeta.of(context).colors; + final foregroundColor = selected ? colors.textInverse : colors.textDefault; + return FilledButton( + onPressed: () { + if (widget.type == ZetaChipType.filter) { + setState(() => selected = !selected); + } + }, + style: ButtonStyle( + shape: MaterialStateProperty.all( + RoundedRectangleBorder(borderRadius: widget.rounded ? ZetaRadius.full : ZetaRadius.none), + ), + textStyle: MaterialStateProperty.all(ZetaTextStyles.bodyMedium), + backgroundColor: MaterialStateProperty.resolveWith((states) { + if (states.contains(MaterialState.disabled)) { + return colors.surfaceDisabled; + } + if (selected) { + return colors.cool.shade90; + } + if (states.contains(MaterialState.pressed) || states.contains(MaterialState.dragged)) { + return colors.surfaceSelected; + } + + if (states.contains(MaterialState.hovered)) { + return colors.surfaceHovered; + } + + return colors.surfacePrimary; + }), + foregroundColor: MaterialStateProperty.all(foregroundColor), + mouseCursor: MaterialStateProperty.resolveWith((states) { + if (states.contains(MaterialState.disabled)) { + return SystemMouseCursors.forbidden; + } + if (states.contains(MaterialState.dragged)) { + return SystemMouseCursors.grabbing; + } + return SystemMouseCursors.click; + }), + elevation: MaterialStateProperty.all(0), + side: MaterialStateProperty.resolveWith((states) { + if (states.contains(MaterialState.focused)) { + return BorderSide(width: ZetaSpacing.x0_5, color: colors.blue.shade50); + } + return BorderSide(color: colors.borderDefault); + }), + padding: MaterialStateProperty.all( + EdgeInsets.fromLTRB( + widget.leading != null ? ZetaSpacing.x2_5 : ZetaSpacing.x3, + 0, + widget.trailing != null ? ZetaSpacing.x2_5 : ZetaSpacing.x3, + 0, + ), + ), + ), + child: Row( + mainAxisSize: MainAxisSize.min, + children: [ + if (leading != null) + IconTheme( + data: IconThemeData( + color: foregroundColor, + size: ZetaSpacing.x5, + ), + child: leading!, + ), + Text(widget.label), + if (widget.trailing != null) + IconTheme( + data: IconThemeData( + color: foregroundColor, + size: ZetaSpacing.x5, + ), + child: widget.trailing!, + ), + ].divide(const SizedBox.square(dimension: ZetaSpacing.x2)).toList(), + ), + ); + } + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add(DiagnosticsProperty('rounded', widget.rounded)) + ..add(StringProperty('label', widget.label)) + ..add(EnumProperty('type', widget.type)) + ..add(DiagnosticsProperty('selected', widget.selected)); + } +} diff --git a/lib/src/components/chips/filter_chip.dart b/lib/src/components/chips/filter_chip.dart new file mode 100644 index 00000000..bcb08f4e --- /dev/null +++ b/lib/src/components/chips/filter_chip.dart @@ -0,0 +1,14 @@ +import 'chip.dart'; + +/// Zeta Filter Chip. +/// +/// Extends [ZetaChip]. +class ZetaFilterChip extends ZetaChip { + /// Creates a [ZetaInputChip]. + const ZetaFilterChip({ + super.key, + required super.label, + super.rounded, + super.selected, + }) : super(type: ZetaChipType.filter); +} diff --git a/lib/src/components/chips/input_chip.dart b/lib/src/components/chips/input_chip.dart new file mode 100644 index 00000000..896af5b3 --- /dev/null +++ b/lib/src/components/chips/input_chip.dart @@ -0,0 +1,15 @@ +import 'chip.dart'; + +/// Zeta Input Chip. +/// +/// Extends [ZetaChip]. +class ZetaInputChip extends ZetaChip { + /// Creates a [ZetaInputChip]. + const ZetaInputChip({ + super.key, + required super.label, + super.leading, + super.rounded, + super.trailing, + }) : super(type: ZetaChipType.input); +} diff --git a/lib/src/components/grid.dart b/lib/src/components/grid.dart deleted file mode 100644 index d41cce71..00000000 --- a/lib/src/components/grid.dart +++ /dev/null @@ -1,156 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import '../theme/breakpoints.dart'; -import '../tokens.dart' as tokens; - -import '../utils/extensions.dart'; - -extension _Spacing on DeviceType { - num maxCrossAxisCount(num col) { - switch (this) { - case DeviceType.mobilePortrait: - return tokens.Grid.mobilePortraitCount; - case DeviceType.mobileLandscape: - return tokens.Grid.mobileLandscapeCount; - case DeviceType.tablet: - return col == tokens.Grid.maxCols ? tokens.Grid.tabletCount : col; - case DeviceType.desktop: - case DeviceType.desktopL: - case DeviceType.desktopXL: - return col; - } - } - - double axisSpacing(double col) { - switch (this) { - case DeviceType.mobilePortrait: - case DeviceType.mobileLandscape: - return tokens.Dimensions.x2; - case DeviceType.tablet: - case DeviceType.desktop: - case DeviceType.desktopL: - case DeviceType.desktopXL: - return col == tokens.Grid.maxCols ? tokens.Dimensions.x3 : tokens.Dimensions.x4; - } - } -} - -/// Zeta Grid. -class ZetaGrid extends StatelessWidget { - /// Constructs a [ZetaGrid]. - const ZetaGrid({ - required this.children, - this.col = tokens.Grid.defaultCols, - this.noGaps = false, - this.asymmetricWeight, - this.hybrid = false, - super.key, - }) : assert( - asymmetricWeight == null || (asymmetricWeight > 0 && asymmetricWeight < tokens.Grid.defaultCols), - 'If defined, asymmetricWeight should be in the range 1-11', - ); - - /// Number of columns in grid. Should be an even number between 2 and 16, although values above 12 should be used sparingly. - /// - /// Defaults to 12. - final double col; - - /// Removes gutters (gaps) from between children. - /// - /// Defaults to false. - final bool noGaps; - - /// `Required` list of children to be placed into the grid. - final List children; - - /// If not null, creates a 2 column asymmetric grid, where the first item has this weight. - /// - /// Example: `asymmetricWeight: 1` will create a grid with 2 columns, where the first has a width of 1/12 and the second has a width of 11/12. - final int? asymmetricWeight; - - /// If the Grid should allow custom child widths. - /// - /// Custom sized widgets can be mixed with Flexible wrapped widgets. - /// - /// This is potentially dangerous as children could exceed screen width, causing overflow errors. - /// - /// Defaults to false. - final bool hybrid; - - /// Util to return the smaller of 2 values. - num returnSmaller(num in1, num in2) { - return in1 > in2 ? in2 : in1; - } - - @override - Widget build(BuildContext context) { - return LayoutBuilder( - builder: (context, constraints) { - final DeviceType deviceType = constraints.deviceType; - final crossAxisCount = returnSmaller(deviceType.maxCrossAxisCount(col), col); - final divider = (children.length / crossAxisCount).ceil(); - final List rows = []; - final double gutterSize = noGaps ? tokens.Dimensions.x0 : deviceType.axisSpacing(col); - final Widget gutter = SizedBox(width: gutterSize, height: gutterSize); - final Widget widget; - List children2 = [...children]; - - if (hybrid) { - if (children.length < col) { - children2 = [...children, ...List.generate((col - children.length).toInt(), (index) => const SizedBox())]; - } else if (children.length > col) { - children2 = children.getRange(0, col.toInt()).toList(); - } else { - children2 = children; - } - widget = Row( - children: [ - Expanded(child: Row(children: children2.divide(gutter).toList())), - ], - ); - } else if (asymmetricWeight != null) { - widget = Row( - children: [ - Flexible(flex: asymmetricWeight ?? 1, fit: FlexFit.tight, child: children.first), - gutter, - Flexible( - flex: (tokens.Grid.defaultCols - (asymmetricWeight ?? 1)).toInt(), - fit: FlexFit.tight, - child: children[1], - ), - ], - ); - } else { - if (children2.length % col != 0) { - children2.addAll(List.generate((col - (children.length % col)).toInt(), (index) => const SizedBox())); - } - for (int i = 0; i < divider; i++) { - rows.add( - Row( - children: children2 - .sublist((i * crossAxisCount).toInt(), ((children2.length / divider) * (i + 1)).round()) - .map((e) => Expanded(child: e)) - .divide(gutter) - .toList(), - ), - ); - } - widget = Column(children: rows.divide(gutter).toList()); - } - - return Padding(padding: const EdgeInsets.all(tokens.Grid.gridMargin), child: widget); - }, - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(DiagnosticsProperty('hybrid', hybrid)) - ..add(DoubleProperty('col', col)) - ..add(DiagnosticsProperty('noGaps', noGaps)) - ..add(IntProperty('asymmetricWeight', asymmetricWeight)); - } -} diff --git a/lib/src/components/password/password_input.dart b/lib/src/components/password/password_input.dart new file mode 100644 index 00000000..59f508a7 --- /dev/null +++ b/lib/src/components/password/password_input.dart @@ -0,0 +1,244 @@ +import 'package:flutter/foundation.dart'; +import 'package:flutter/material.dart'; + +import '../../../zeta_flutter.dart'; + +///Extension for password visibility state handling +extension on ValueNotifier { + void toggle() => value = !value; +} + +///Zeta Password Input +class ZetaPasswordInput extends StatefulWidget { + ///Constructs [ZetaPasswordInput] + const ZetaPasswordInput({ + this.size = ZetaWidgetSize.large, + this.validator, + this.onChanged, + this.obscureText = true, + this.enabled = true, + this.controller, + this.hintText, + this.label, + this.footerText, + this.footerIcon, + this.rounded = false, + super.key, + }); + + /// Controls the text being edited. + final TextEditingController? controller; + + /// Whether the text is obscured. Useful for passwords. Defaults to true. + final bool obscureText; + + /// Text that suggests what sort of input the field accepts. + final String? hintText; + + /// Whether the input field is enabled or disabled. Defaults to true. + final bool enabled; + + /// Optional label text to display above the input field. + final String? label; + + /// Optional footer text to display below the input field. + final String? footerText; + + /// Optional icon to display beside the footer text. + final IconData? footerIcon; + + /// {@macro zeta-component-rounded} + final bool rounded; + + /// Defines the size of the input field. Can be [ZetaWidgetSize.small], [ZetaWidgetSize.medium], or [ZetaWidgetSize.large]. + /// Defaults to [ZetaWidgetSize.large]. + final ZetaWidgetSize size; + + /// An optional method that validates an input. Returns an error string to + /// display if the input is invalid, or null otherwise. + final String? Function(String?)? validator; + + /// Called when the user initiates a change to the [ZetaPasswordInput] + final void Function(String)? onChanged; + + @override + State createState() => _ZetaPasswordInputState(); + + @override + void debugFillProperties(DiagnosticPropertiesBuilder properties) { + super.debugFillProperties(properties); + properties + ..add( + DiagnosticsProperty('controller', controller), + ) + ..add(DiagnosticsProperty('obscureText', obscureText)) + ..add(StringProperty('hintText', hintText)) + ..add(DiagnosticsProperty('enabled', enabled)) + ..add(StringProperty('label', label)) + ..add(StringProperty('footerText', footerText)) + ..add(DiagnosticsProperty('footerIcon', footerIcon)) + ..add( + ObjectFlagProperty.has( + 'validator', + validator, + ), + ) + ..add( + ObjectFlagProperty.has( + 'onChanged', + onChanged, + ), + ) + ..add(EnumProperty('size', size)) + ..add(DiagnosticsProperty('rounded', rounded)); + } +} + +class _ZetaPasswordInputState extends State { + late final ValueNotifier _obscureTextNotifier; + String? _errorMessage; + + @override + void initState() { + super.initState(); + _obscureTextNotifier = ValueNotifier(widget.obscureText); + widget.controller?.addListener(_validate); + } + + void _validate() { + if (widget.validator != null && widget.controller != null) { + setState(() => _errorMessage = widget.validator!(widget.controller!.text)); + } + } + + @override + void dispose() { + _obscureTextNotifier.dispose(); + widget.controller?.removeListener(_validate); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + final theme = Zeta.of(context); + final defaultBorderColor = _errorMessage != null ? theme.colors.error.border : theme.colors.borderDefault; + + return Column( + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + if (widget.label != null) + Padding( + padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.x1), + child: Text(widget.label!, style: ZetaTextStyles.bodyMedium), + ), + SizedBox( + height: _inputHeight, + child: ValueListenableBuilder( + valueListenable: _obscureTextNotifier, + builder: (context, obscureValue, child) { + return TextFormField( + controller: widget.controller, + obscureText: obscureValue, + onChanged: widget.onChanged, + style: _textStyle, + decoration: InputDecoration( + contentPadding: const EdgeInsets.symmetric(horizontal: ZetaSpacing.x2), + filled: true, + fillColor: _getBackgroundColor(theme.colors), + enabledBorder: _getBorder(defaultBorderColor), + focusedBorder: _getBorder( + _errorMessage != null ? theme.colors.error.border : theme.colors.primary.border, + width: ZetaSpacing.x0_5, + ), + disabledBorder: _getBorder(theme.colors.borderDefault), + border: _getBorder(defaultBorderColor), + enabled: widget.enabled, + hintText: widget.hintText, + hintStyle: _textStyle, + suffixIcon: ValueListenableBuilder( + valueListenable: _obscureTextNotifier, + builder: (context, value, child) { + return IconButton( + padding: const EdgeInsets.symmetric(vertical: ZetaSpacing.x1), + icon: Icon( + value ? ZetaIcons.visibility_off_sharp : ZetaIcons.visibility_sharp, + size: widget.size == ZetaWidgetSize.small ? ZetaSpacing.x4 : ZetaSpacing.x5, + ), + color: widget.enabled ? theme.colors.iconDefault : theme.colors.iconDisabled, + onPressed: () => _obscureTextNotifier.toggle(), + ); + }, + ), + ), + ); + }, + ), + ), + if (widget.footerText != null || widget.footerIcon != null || _errorMessage != null) + Padding( + padding: const EdgeInsets.only(top: ZetaSpacing.x1), + child: Row( + children: [ + if (_errorMessage != null) ...[ + Icon( + ZetaIcons.error_round, + size: ZetaSpacing.x4, + color: theme.colors.error.border, + ), + const SizedBox(width: ZetaSpacing.x1), + Text( + _errorMessage!, + style: ZetaTextStyles.bodySmall.apply(color: theme.colors.error.border), + ), + ], + if (_errorMessage == null && widget.footerIcon != null) ...[ + Icon( + widget.footerIcon, + size: ZetaSpacing.x4, + color: widget.enabled ? theme.colors.iconDefault : theme.colors.iconDisabled, + ), + const SizedBox(width: ZetaSpacing.x1), + ], + if (_errorMessage == null && widget.footerText != null) ...[ + Text( + widget.footerText!, + style: ZetaTextStyles.bodySmall.apply( + color: widget.enabled ? theme.colors.textSubtle : theme.colors.textDefault, + ), + ), + ], + ], + ), + ), + ], + ); + } + + OutlineInputBorder _getBorder(Color color, {double width = 1}) { + return OutlineInputBorder( + borderSide: BorderSide(color: color, width: width), + borderRadius: widget.rounded ? ZetaRadius.minimal : ZetaRadius.none, + ); + } + + Color _getBackgroundColor(ZetaColors zetaColors) { + if (!widget.enabled) return zetaColors.surfaceDisabled; + if (_errorMessage != null) return zetaColors.error.surface; + return zetaColors.surfacePrimary; + } + + double get _inputHeight { + switch (widget.size) { + case ZetaWidgetSize.small: + return ZetaSpacing.x8; + case ZetaWidgetSize.medium: + return ZetaSpacing.x10; + case ZetaWidgetSize.large: + return ZetaSpacing.x12; + } + } + + TextStyle get _textStyle => + (widget.size == ZetaWidgetSize.small ? ZetaTextStyles.bodyMedium : ZetaTextStyles.bodyLarge) + .copyWith(height: 1.2); +} diff --git a/lib/src/components/spacing.dart b/lib/src/components/spacing.dart deleted file mode 100644 index f58138d6..00000000 --- a/lib/src/components/spacing.dart +++ /dev/null @@ -1,191 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/widgets.dart'; - -import '../tokens.dart'; - -/// Spacing types for [ZetaSpacing]. - -enum ZetaSpacingType { - /// {@template zeta-spacing-square} - /// Identical spacing on all four sides. - /// - /// It’s use is widespread, across many components at varying sizes. - /// {@endtemplate} - square, - - /// {@template zeta-spacing-squish} - /// Identical padding on top and bottom, nothing on sides. - /// - /// While less common than its squared counterpart, a squish occurred frequently in elements (like a button) and cell-like containers like a data table or list item. - /// {@endtemplate} - squish, - - /// {@template zeta-spacing-stack} - /// Padding on bottom only. - /// - /// With all due respect to horizontally scrolled UI, the overwhelming majority scroll vertically. And that means one thing, we stack things. We stack message on heading on data table. We stack modules in rails. We stack copy, pills & toolbars, all in a card, each in a grid. Heck, infinite scroll means infinite stack! We stack, stack, stack. - /// {@endtemplate} - stack, - - /// {@template zeta-spacing-inline-only} - /// Padding on start and end only. - /// {@endtemplate} - /// {@template zeta-spacing-inline} - /// We arrange objects inline, wrapping as they flow like text from the left or right. Such objects — pills, tags, breadcrumbs, and more — may stand alone or stack and mingle with other objects. - /// {@endtemplate} - inline, - - /// {@template zeta-spacing-inline-start} - /// Padding on start only. - /// - /// {@macro zeta-spacing-inline} - /// - /// {@endtemplate} - inlineStart, - - /// {@template zeta-spacing-inline-end} - /// Padding on end only. - /// {@endtemplate} - inlineEnd, -} - -/// Zeta Spacing widget. -class ZetaSpacing extends StatelessWidget { - /// Constructs [ZetaSpacing]. - const ZetaSpacing( - this.child, { - this.type = ZetaSpacingType.square, - this.size = Dimensions.x0, - super.key, - }) : assert( - size % _mod == 0 && size >= 0 && size <= Dimensions.x24, - 'Size should be a whole, even number, and be no larger than [x24]', - ); - - /// Constructs a [ZetaSpacing] widget with [ZetaSpacingType.square] insets. - /// - /// {@macro zeta-spacing-square} - const ZetaSpacing.square(this.child, {this.size = Dimensions.x0, super.key}) : type = ZetaSpacingType.square; - - /// Constructs a [ZetaSpacing] widget with [ZetaSpacingType.squish] insets. - /// - /// {@macro zeta-spacing-squish} - const ZetaSpacing.squish(this.child, {this.size = Dimensions.x0, super.key}) : type = ZetaSpacingType.squish; - - /// Constructs a [ZetaSpacing] widget with [ZetaSpacingType.stack] insets. - /// - /// {@macro zeta-spacing-stack} - const ZetaSpacing.stack(this.child, {this.size = Dimensions.x0, super.key}) : type = ZetaSpacingType.stack; - - /// Constructs a [ZetaSpacing] widget with [ZetaSpacingType.inline] insets. - /// - /// {@macro zeta-spacing-inline-only} - /// - /// {@macro zeta-spacing-inline} - const ZetaSpacing.inline(this.child, {this.size = Dimensions.x0, super.key}) : type = ZetaSpacingType.inline; - - /// Constructs a [ZetaSpacing] widget with [ZetaSpacingType.inlineStart] insets. - /// - /// {@macro zeta-spacing-inline-start} - /// - /// {@macro zeta-spacing-inline} - const ZetaSpacing.inlineStart(this.child, {this.size = Dimensions.x0, super.key}) - : type = ZetaSpacingType.inlineStart; - - /// Constructs a [ZetaSpacing] widget with [ZetaSpacingType.inlineEnd] insets. - /// - /// {@macro zeta-spacing-inline-end} - /// - /// {@macro zeta-spacing-inline} - const ZetaSpacing.inlineEnd(this.child, {this.size = Dimensions.x0, super.key}) : type = ZetaSpacingType.inlineEnd; - static const double _mod = 2; - - /// Child to be wrapped with spacing insets. - final Widget child; - - /// [ZetaSpacingType] insets applied to [child]. - /// - /// Defaults to [ZetaSpacingType.square]. - final ZetaSpacingType? type; - - /// Size of insets to be applied around [child]. - /// - /// Should be an even number, and be no larger than [Dimensions.x24]. - /// - /// Defaults to [Dimensions.x0]. - final double size; - - @override - Widget build(BuildContext context) { - switch (type ?? ZetaSpacingType.square) { - case ZetaSpacingType.square: - return child.square(size); - case ZetaSpacingType.squish: - return child.squish(size); - case ZetaSpacingType.stack: - return child.stack(size); - case ZetaSpacingType.inline: - return child.inline(size); - case ZetaSpacingType.inlineStart: - return child.inlineStart(size); - case ZetaSpacingType.inlineEnd: - return child.inlineEnd(size); - } - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(EnumProperty('type', type)) - ..add(DoubleProperty('size', size)); - } -} - -/// Extension to get Spacing type as [EdgeInsets] from a double. -extension SpacingSize on double { - /// {@macro zeta-spacing-square} - EdgeInsets get square => EdgeInsets.all(this); - - /// {@macro zeta-spacing-squish} - EdgeInsets get squish => EdgeInsets.symmetric(vertical: this); - - /// {@macro zeta-spacing-stack} - EdgeInsets get stack => EdgeInsets.only(bottom: this); - - /// {@macro zeta-spacing-inline} - EdgeInsetsDirectional get inline => EdgeInsetsDirectional.only(start: this, end: this); - - /// {@macro zeta-spacing-inline-start} - EdgeInsetsDirectional get inlineStart => EdgeInsetsDirectional.only(start: this); - - /// {@macro zeta-spacing-inline-end} - EdgeInsetsDirectional get inlineEnd => EdgeInsetsDirectional.only(end: this); -} - -/// Extension to add spacing to any [Widget]. -extension SpacingWidget on Widget { - /// {@macro zeta-spacing-square} - Widget square(double space) => Padding(padding: space.square, child: this); - - /// {@macro zeta-spacing-squish} - Widget squish(double space) => Padding(padding: space.squish, child: this); - - /// {@macro zeta-spacing-stack} - Widget stack(double space) => Padding(padding: space.stack, child: this); - - /// {@macro zeta-spacing-inline-only} - /// - /// {@macro zeta-spacing-inline} - Widget inline(double space) => Padding(padding: space.inline, child: this); - - /// {@macro zeta-spacing-inline-end} - /// - /// {@macro zeta-spacing-inline} - Widget inlineStart(double space) => Padding(padding: space.inlineStart, child: this); - - /// {@macro zeta-spacing-inline-end} - /// - /// {@macro zeta-spacing-inline} - Widget inlineEnd(double space) => Padding(padding: space.inlineEnd, child: this); -} diff --git a/lib/src/components/text.dart b/lib/src/components/text.dart deleted file mode 100644 index 4132446e..00000000 --- a/lib/src/components/text.dart +++ /dev/null @@ -1,772 +0,0 @@ -import 'package:flutter/foundation.dart'; -import 'package:flutter/material.dart'; - -import '../../zeta_flutter.dart'; -import '../tokens.dart' as tokens; - -/// {@template zeta-component-text} -/// ZetaText component. -/// -/// Applies Zeta style to text, including fontFamily, size, lineHeight, spacing and other modifiers. -/// -/// {@endtemplate} -/// See also: -/// * [Text]. -class ZetaText extends StatelessWidget { - /// Constructor for [ZetaText]. - const ZetaText( - this.data, { - this.style, - this.resetHeight = false, - this.textColor, - this.fontSize, - this.maxWidth, - this.fontWeight, - this.fontStyle, - this.upperCase = false, - this.decoration, - this.textDirection = TextDirection.ltr, - this.first = false, - this.last = false, - super.key, - }); - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-body-xs} - ZetaText.bodyXSmall( - this.data, { - this.resetHeight = false, - this.maxWidth, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - super.key, - }) : style = zetaBodyXSmall; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-body-s} - ZetaText.bodySmall( - this.data, { - this.resetHeight = false, - this.maxWidth, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - super.key, - }) : style = zetaBodySmall; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-body-m} - ZetaText.bodyMedium( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaBodyMedium; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-body-l} - ZetaText.bodyLarge( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaBodyLarge; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-label-s} - ZetaText.labelSmall( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - super.key, - this.maxWidth, - }) : style = zetaLabelSmall; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-label-m} - ZetaText.labelMedium( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaLabelMedium; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-label-l} - ZetaText.labelLarge( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaLabelLarge; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-title-s} - ZetaText.titleSmall( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaTitleSmall; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-title-m} - ZetaText.titleMedium( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaTitleMedium; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-title-l} - ZetaText.titleLarge( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaTitleLarge; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-heading-s} - ZetaText.headingSmall( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaHeadingSmall; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-heading-m} - ZetaText.headingMedium( - this.data, { - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.resetHeight = false, - this.maxWidth, - super.key, - }) : style = zetaHeadingMedium; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-heading-l} - ZetaText.headingLarge( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaHeadingLarge; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-display-s} - ZetaText.displaySmall( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaDisplaySmall; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-display-m} - ZetaText.displayMedium( - this.data, { - this.resetHeight = false, - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.maxWidth, - super.key, - }) : style = zetaDisplayMedium; - - /// {@macro zeta-component-text} - /// - /// {@macro zeta-type-display-l} - ZetaText.displayLarge( - this.data, { - this.decoration, - this.fontSize, - this.fontStyle, - this.fontWeight, - this.first = false, - this.last = false, - this.textColor, - this.textDirection = TextDirection.ltr, - this.upperCase = false, - this.resetHeight = false, - this.maxWidth, - super.key, - }) : style = zetaDisplayLarge; - static const double _defaultChMultiplier = 66; - - /// Text styles for Zeta. - /// - /// {@macro zeta-theme} - static TextTheme textTheme = TextTheme( - displayLarge: zetaDisplayLarge, - displayMedium: zetaDisplayMedium, - displaySmall: zetaDisplaySmall, - headlineLarge: zetaHeadingLarge, - headlineMedium: zetaHeadingMedium, - headlineSmall: zetaHeadingSmall, - titleLarge: zetaTitleLarge, - titleMedium: zetaTitleMedium, - titleSmall: zetaTitleSmall, - bodyLarge: zetaBodyLarge, - bodyMedium: zetaBodyMedium, - bodySmall: zetaBodySmall, - labelLarge: zetaLabelLarge, - labelMedium: zetaLabelMedium, - labelSmall: zetaLabelSmall, - ); - - /// Builds text theme for app based on an instance of [ZetaColors]. - static TextTheme themeWithColor(Color color) { - return TextTheme( - displayLarge: zetaDisplayLarge.copyWith(color: color), - displayMedium: zetaDisplayMedium.copyWith(color: color), - displaySmall: zetaDisplaySmall.copyWith(color: color), - headlineLarge: zetaHeadingLarge.copyWith(color: color), - headlineMedium: zetaHeadingMedium.copyWith(color: color), - headlineSmall: zetaHeadingSmall.copyWith(color: color), - titleLarge: zetaTitleLarge.copyWith(color: color), - titleMedium: zetaTitleMedium.copyWith(color: color), - titleSmall: zetaTitleSmall.copyWith(color: color), - bodyLarge: zetaBodyLarge.copyWith(color: color), - bodyMedium: zetaBodyMedium.copyWith(color: color), - bodySmall: zetaBodySmall.copyWith(color: color), - labelLarge: zetaLabelLarge.copyWith(color: color), - labelMedium: zetaLabelMedium.copyWith(color: color), - labelSmall: zetaLabelSmall.copyWith(color: color), - ); - } - - /// {@template zeta-type-body-xs} - /// Smallest body text. - /// - /// Used for UI components and UI content design. - /// - /// {@endtemplate} - static TextStyle zetaBodyXSmall = const TextStyle( - fontSize: tokens.Dimensions.x3, - fontWeight: FontWeight.w400, - height: tokens.Dimensions.x3 / tokens.Dimensions.x4, - ); - - /// {@template zeta-type-body-s} - /// Small body text. - /// - /// Used for UI components and UI content design. - /// - /// See also: - /// * [TextTheme.bodySmall]. - /// {@endtemplate} - static TextStyle zetaBodySmall = const TextStyle( - fontSize: tokens.Dimensions.x3_5, - fontWeight: FontWeight.w400, - height: 18 / 14, - ); - - /// {@template zeta-type-body-m} - /// Medium body text. - /// - /// Used for overall content. - /// - /// See also: - /// * [TextTheme.bodyMedium]. - /// {@endtemplate} - static TextStyle zetaBodyMedium = const TextStyle( - fontSize: tokens.Dimensions.x4, - fontWeight: FontWeight.w400, - height: tokens.Dimensions.x6 / tokens.Dimensions.x4, - ); - - /// {@template zeta-type-body-l} - /// Large body text. - /// - /// Used for UI components and UI content design. - /// - /// See also: - /// * [TextTheme.bodyLarge]. - /// {@endtemplate} - static TextStyle zetaBodyLarge = const TextStyle( - fontSize: tokens.Dimensions.x5, - fontWeight: FontWeight.w400, - height: tokens.Dimensions.x6 / tokens.Dimensions.x5, - ); - - /// {@template zeta-type-label-s} - /// Small label text. - /// - /// Used for UI components and UI content. - /// - /// See also: - /// * [TextTheme.labelSmall]. - /// {@endtemplate} - static TextStyle zetaLabelSmall = const TextStyle( - fontSize: tokens.Dimensions.x3, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x4 / tokens.Dimensions.x3, - ); - - /// {@template zeta-type-label-m} - /// Medium label text. - /// - /// Used for UI components and UI content. - /// - /// See also: - /// * [TextTheme.labelMedium]. - /// {@endtemplate} - static TextStyle zetaLabelMedium = const TextStyle( - fontSize: tokens.Dimensions.x3_5, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x3_5 / tokens.Dimensions.x5, - ); - - /// {@template zeta-type-label-l} - /// Large label text. - /// - /// Used for UI components and UI content. - /// - /// See also: - /// * [TextTheme.labelLarge]. - /// {@endtemplate} - static TextStyle zetaLabelLarge = const TextStyle( - fontSize: tokens.Dimensions.x4, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x4 / tokens.Dimensions.x6, - ); - - /// {@template zeta-type-title-s} - /// Heading 6 / Small title text. - /// - /// Used for UI components and UI content design. - /// - /// See also: - /// * [TextTheme.titleSmall]. - /// {@endtemplate} - static TextStyle zetaTitleSmall = const TextStyle( - fontSize: tokens.Dimensions.x3, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x4 / tokens.Dimensions.x3, - ); - - /// {@template zeta-type-title-m} - /// Heading 5 / Medium title text. - /// - /// Used for UI components and UI content design. - /// - /// See also: - /// * [TextTheme.titleMedium]. - /// {@endtemplate} - static TextStyle zetaTitleMedium = const TextStyle( - fontSize: tokens.Dimensions.x4, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x5 / tokens.Dimensions.x4, - ); - -// TODO(tokens): How to add color and font family here? -// Both can be changed at runtime so can;t be const. -// But also how do we access them without state? - - /// {@template zeta-type-title-l} - /// Heading 4 / Large title text. - /// - /// Used for UI sections and landing pages. - /// - /// See also: - /// * [TextTheme.titleLarge]. - /// {@endtemplate} - static TextStyle zetaTitleLarge = const TextStyle( - fontSize: tokens.Dimensions.x5, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x4 / tokens.Dimensions.x5, - ); - - /// {@template zeta-type-heading-s} - /// Heading 3 text. - /// - /// Used for UI sections and landing pages. - /// - /// See also: - /// * [TextTheme.headlineSmall]. - /// {@endtemplate} - static TextStyle zetaHeadingSmall = const TextStyle( - fontSize: tokens.Dimensions.x6, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x7 / tokens.Dimensions.x6, - ); - - /// {@template zeta-type-heading-m} - /// Heading 2 text. - /// - /// Used for UI sections and landing pages. - /// - /// See also: - /// * [TextTheme.headlineMedium]. - /// {@endtemplate} - static TextStyle zetaHeadingMedium = const TextStyle( - fontSize: tokens.Dimensions.x7, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x8 / tokens.Dimensions.x7, - ); - - /// {@template zeta-type-heading-l} - /// Heading 1 text. - /// - /// Used for UI sections and landing pages. - /// See also: - /// * [TextTheme.headlineLarge]. - /// {@endtemplate} - static TextStyle zetaHeadingLarge = const TextStyle( - fontSize: tokens.Dimensions.x8, - fontWeight: FontWeight.w500, - height: tokens.Dimensions.x9 / tokens.Dimensions.x8, - ); - - /// {@template zeta-type-display-s} - /// Small display text. - /// - /// Used for landing page intros and sections. - /// - /// See also: - /// * [TextTheme.displaySmall]. - /// {@endtemplate} - static TextStyle zetaDisplaySmall = zetaHeadingSmall; - - /// {@template zeta-type-display-m} - /// Medium display text. - /// - /// Used for landing page intros and sections. - /// - /// See also: - /// * [TextTheme.displayMedium]. - /// {@endtemplate} - static TextStyle zetaDisplayMedium = zetaHeadingMedium; - - /// {@template zeta-type-display-l} - /// Large display text. - /// - /// Used for landing page intros. - /// See also: - /// * [TextTheme.displayLarge]. - /// {@endtemplate} - static TextStyle zetaDisplayLarge = zetaHeadingLarge; - - /// Gets approximate char width based on width of O in IBM Plex Sans - /// - /// Only works for IBM Plex. - static double _ch({double multiplier = _defaultChMultiplier, TextStyle? style}) { - final setStyle = style ?? zetaBodyMedium; - const plexCh = 0.6; - - return multiplier * plexCh * (setStyle.fontSize ?? tokens.Dimensions.x3); - } - - /// The text to be displayed. - /// - /// See also: - /// * [Text.data]. - final String? data; - - /// The style applied to the text. - /// - /// Defaults to [zetaBodyMedium]. - /// - /// See also: - /// * [Text.style]. - final TextStyle? style; - - /// Sets text color. - /// - /// See also: - /// * [TextStyle.color]. - final Color? textColor; - - /// Max width of Text box using [_ch]. Not measured in dp / px. - /// - /// [_ch] approximates width of a character using O as basis, so a maxWidth of 60 theoretically returns a max width containing 60 characters. - /// - /// Only works with 'IBM Plex Sans'. - final double? maxWidth; - - /// Font size override. - /// - /// {@template zeta-text-override} - /// Optional as this should be set using [style]. - /// {@endtemplate} - /// See also: - /// * [TextStyle.fontSize]. - final double? fontSize; - - /// Font weight override. - /// - /// {@macro zeta-text-override} - /// - /// See also: - /// * [TextStyle.fontWeight]. - final FontWeight? fontWeight; - - /// Font style override, used to set text to _italic_. - /// - /// - /// - /// See also: - /// * [TextStyle.fontStyle]. - /// * [FontStyle.italic]. - final FontStyle? fontStyle; - - /// Sets all text to uppercase. - /// - /// See also: - /// * [String.toUpperCase]. - final bool upperCase; - - /// Decoration override, used to apply decorations such as underline. - /// - /// See also: - /// * [TextDecoration.underline]. - /// * [TextDecoration]. - final TextDecoration? decoration; - - /// Text direction, used to set text to either Left to Right or Right to Left. - /// - /// See also: - /// * [TextDirection.values]. - final TextDirection textDirection; - - /// Sets padding top to 0. - /// - /// Set to true when this text is first in a list. - final bool first; - - /// Sets padding bottom to 0. - /// - /// Set to true when this text is last in a list. - final bool last; - - /// Sets the line height to 1 and spacing to 0. - /// - /// Defaults to false. - final bool resetHeight; - - EdgeInsets get _padding { - if (resetHeight || (first && last)) return tokens.Dimensions.x0.squish; - - return EdgeInsets.only( - top: first ? tokens.Dimensions.x0 : tokens.Dimensions.x2, - bottom: last ? tokens.Dimensions.x0 : tokens.Dimensions.x2, - ); - } - - double? get _fontSize { - if (fontSize == null) return null; - if (fontSize == tokens.Dimensions.x3_5) { - return tokens.Dimensions.x4 / tokens.Dimensions.x3_5; - } - - return ((fontSize ?? 1) + tokens.Dimensions.x1) / (fontSize ?? 1); - } - - @override - Widget build(BuildContext context) { - TextStyle thisStyle = (style ?? ZetaText.zetaBodyMedium).copyWith( - fontSize: style?.fontSize, - fontWeight: style?.fontWeight, - height: style?.height, - ); - - String data = this.data ?? ''; - final Color color = textColor ?? Zeta.of(context).colors.textDefault; - - thisStyle = thisStyle.copyWith( - fontSize: (fontSize ?? thisStyle.fontSize ?? tokens.Typography.defaultTextSize) * - MediaQuery.of(context).textScaleFactor, - height: _fontSize, - fontWeight: fontWeight, - decoration: decoration ?? TextDecoration.none, - fontStyle: fontStyle, - color: color, - ); - - if (resetHeight) thisStyle = thisStyle.copyWith(height: 1); - if (upperCase) data = data.toUpperCase(); - - return Padding( - padding: _padding, - child: maxWidth == null - ? Text(data, style: thisStyle, textDirection: textDirection) - : Align( - alignment: textDirection == TextDirection.rtl ? Alignment.centerRight : Alignment.centerLeft, - child: SizedBox( - width: maxWidth == null ? null : _ch(multiplier: maxWidth ?? 0, style: thisStyle), - child: Text(data, style: thisStyle, textDirection: textDirection), - ), - ), - ); - } - - @override - void debugFillProperties(DiagnosticPropertiesBuilder properties) { - super.debugFillProperties(properties); - properties - ..add(StringProperty('data', data)) - ..add(DiagnosticsProperty('style', style)) - ..add(ColorProperty('textColor', textColor)) - ..add(DoubleProperty('maxWidth', maxWidth)) - ..add(DoubleProperty('fontSize', fontSize)) - ..add(DiagnosticsProperty('fontWeight', fontWeight)) - ..add(EnumProperty('fontStyle', fontStyle)) - ..add(DiagnosticsProperty('upperCase', upperCase)) - ..add(DiagnosticsProperty('decoration', decoration)) - ..add(EnumProperty('textDirection', textDirection)) - ..add(DiagnosticsProperty('first', first)) - ..add(DiagnosticsProperty('last', last)) - ..add(DiagnosticsProperty('resetHeight', resetHeight)); - } -} - -/// Extension to add Zeta's extra small text size. -extension XSmall on TextTheme { - /// Smallest body text size. - TextStyle? get bodyXSmall { - return ZetaText.zetaBodyXSmall; - } -} diff --git a/lib/src/theme/colors.dart b/lib/src/theme/colors.dart index 9abdc4f3..1e54689e 100644 --- a/lib/src/theme/colors.dart +++ b/lib/src/theme/colors.dart @@ -30,7 +30,7 @@ class ZetaColors { Color? surfaceTertiary, bool adjust = true, }) : primary = _adjustedValue(primary, ZetaColorBase.blue, adjust, brightness, contrast), - secondary = _adjustedValue(secondary, primary ?? ZetaColorBase.blue, adjust, brightness, contrast), + secondary = _adjustedValue(secondary, primary ?? ZetaColorBase.yellow, adjust, brightness, contrast), error = _adjustedValue(error, ZetaColorBase.red, adjust, brightness, contrast), cool = _adjustedValue(cool, ZetaColorBase.greyCool, adjust, brightness, ZetaContrast.aa), warm = _adjustedValue(warm, ZetaColorBase.greyWarm, adjust, brightness, ZetaContrast.aa), @@ -169,7 +169,7 @@ class ZetaColors { /// Secondary color used in app. /// - /// Defaults to `ZetaColors.cool.90`. + /// Defaults to [ZetaColorBase.yellow] /// /// Maps to [ColorScheme.secondary]. final ZetaColorSwatch secondary; @@ -316,6 +316,9 @@ class ZetaColors { /// {@macro zeta-color-dark} Color get borderSelected => cool.shade90; + /// True if current [ZetaColors] object uses dark mode colors. + bool get isDarkMode => brightness == Brightness.dark; + // Links /// Link color. @@ -340,7 +343,6 @@ class ZetaColors { /// Secondary surface color. /// - /// /// * `ZetaColors.cool.10`. final Color surfaceSecondary; diff --git a/lib/src/tokens.dart b/lib/src/theme/tokens.dart similarity index 60% rename from lib/src/tokens.dart rename to lib/src/theme/tokens.dart index fdfe7837..5a31e659 100644 --- a/lib/src/tokens.dart +++ b/lib/src/theme/tokens.dart @@ -1,14 +1,16 @@ -import '../../zeta_flutter.dart'; +import 'package:flutter/material.dart'; -/// Tokens that are used for [ZetaSpacing]. +/// Tokens that are used for spacing. /// /// Values are doubles, and can be used for padding, margins and other spacings. -class Dimensions { +/// +// TODO(thelukewalton): Refactor to match latest designs. +class ZetaSpacing { /// Base multiplier used to calculate spacing values. static const double spacingBaseMultiplier = 4; - /// 0dp space. - static const double x0 = spacingBaseMultiplier * 0; + /// 2dp space. + static const double x0_5 = spacingBaseMultiplier * 0.5; /// 4dp space. static const double x1 = spacingBaseMultiplier; @@ -22,6 +24,9 @@ class Dimensions { /// 8dp space. static const double xs = spacingBaseMultiplier * 2; + /// 10dp space. + static const double x2_5 = spacingBaseMultiplier * 2.5; + /// 12dp space. static const double x3 = spacingBaseMultiplier * 3; @@ -49,6 +54,9 @@ class Dimensions { /// 28dp space. static const double x7 = spacingBaseMultiplier * 7; + /// 30dp space. + static const double x7_5 = spacingBaseMultiplier * 7.5; + /// 32dp space. static const double x8 = spacingBaseMultiplier * 8; @@ -92,42 +100,20 @@ class Dimensions { static const double xxxl = spacingBaseMultiplier * 24; } -/// Tokens that are used for [ZetaText]. -class Typography { - /// Font family used across Zeta. - /// - /// Zeta library contains IBM Plex Sans with latin script. - /// In the case of non-latin languages, this can be overridden: - /// - /// Default text size. - /// - /// Defaults to [Dimensions.s]. - static const double defaultTextSize = Dimensions.s; - - /// Base text color. - // static const Color text = Color(0xFF1D1E23); - /// Subtle text color. - // static const Color subtleText = Color(0xFF545963); - // TODO(tokens): Work out how to do tokens properly -} - -/// Tokens that are used for [ZetaGrid]. -class Grid { - /// Maximum number of cols that can be displayed. - static const double maxCols = 16; - - /// Default number of cols. - static const double defaultCols = 12; +/// Tokens used for Border Radius. +class ZetaRadius { + /// No border radius; 0px radius. + static const BorderRadius none = BorderRadius.zero; - /// Default margin for grid component. - static const double gridMargin = Dimensions.x6; + /// Smallest amount of border radius; 4px radius. + static const BorderRadius minimal = BorderRadius.all(Radius.circular(ZetaSpacing.xxs)); - /// Number of columns to show on a portrait mobile, as defined in [DeviceType.mobilePortrait]. - static const mobilePortraitCount = 2; + /// Border radius used when rounded parameter is true; 8px radius. + static const BorderRadius rounded = BorderRadius.all(Radius.circular(ZetaSpacing.xs)); - /// Number of columns to show on a landscape mobile, as defined in [DeviceType.mobileLandscape]. - static const mobileLandscapeCount = 4; + /// Wide border radius; 24px radius. + static const BorderRadius wide = BorderRadius.all(Radius.circular(ZetaSpacing.m)); - /// Number of columns to show on a tablet, as defined in [DeviceType.tablet]. - static const tabletCount = 8; + /// Largest amount of border radius; 360px radius. + static const BorderRadius full = BorderRadius.all(Radius.circular(360)); } diff --git a/lib/src/theme/typography.dart b/lib/src/theme/typography.dart new file mode 100644 index 00000000..62857bbe --- /dev/null +++ b/lib/src/theme/typography.dart @@ -0,0 +1,132 @@ +import 'package:flutter/material.dart'; +import '../../zeta_flutter.dart'; + +/// Typography in Zeta style. +/// +/// We have decided to adopt IBM Plex Sans typeface for our digital solutions. +/// This new typeface is clean, distinctive and designed for digital world use cases. +/// The typeface is free and available in multiple languages, making it ideal for localization. +/// More info can be found at: www.ibm.com/plex +class ZetaTextStyles { + /// Largest of the display styles. + /// + /// {@template zeta-text-display} + /// As the largest text on the screen, display styles are reserved for short, + /// important text or numerals. They work best on large screens. + /// {@endtemplate} + static const TextStyle displayLarge = TextStyle(fontSize: 52, fontWeight: FontWeight.w300, height: 64 / 52); + + /// Middle size of the display styles. + /// + /// {@macro zeta-text-display} + static const TextStyle displayMedium = TextStyle(fontSize: 42, fontWeight: FontWeight.w300, height: 56 / 42); + + /// Smallest of the display styles. + /// + /// {@macro zeta-text-display} + static const TextStyle displaySmall = TextStyle(fontSize: 36, fontWeight: FontWeight.w300, height: 48 / 36); + + /// Largest of the headline styles. + /// + ///{@template zeta-text-headline} + /// Headline styles are smaller than display styles. They're best-suited for + /// short, high-emphasis text on smaller screens. + /// {@endtemplate} + static const TextStyle heading1 = TextStyle(fontSize: 32, fontWeight: FontWeight.w500, height: 40 / 32); + + /// Middle size of the headline styles. + /// + /// {@macro zeta-text-headline} + static const TextStyle heading2 = TextStyle(fontSize: 28, fontWeight: FontWeight.w500, height: 32 / 28); + + /// Smallest of the headline styles. + /// + /// {@macro zeta-text-headline} + static const TextStyle heading3 = TextStyle(fontSize: 24, fontWeight: FontWeight.w500, height: 32 / 24); + + /// Largest of the title styles. + /// + /// {@template zeta-text-title} + /// Titles are smaller than headline styles and should be used for shorter, + /// medium-emphasis text. + /// {@endtemplate} + static const TextStyle titleLarge = TextStyle(fontSize: 32, fontWeight: FontWeight.w500, height: 20 / 28); + + /// Middle size of the title styles. + /// + /// {@macro zeta-text-title} + static const TextStyle titleMedium = TextStyle(fontSize: 18, fontWeight: FontWeight.w500, height: 24 / 18); + + /// Smallest of the title styles. + /// + /// {@macro zeta-text-title} + static const TextStyle titleSmall = TextStyle(fontSize: 16, fontWeight: FontWeight.w500, height: 24 / 16); + + /// Largest of the body styles. + /// + /// {@template zeta-text-body} + /// Body styles are used for longer passages of text. + /// {@endtemplate} + static const TextStyle bodyLarge = TextStyle(fontSize: 16, fontWeight: FontWeight.w400, height: 16 / 24); + + /// Middle size of the body styles. + /// + /// {@macro zeta-text-body} + /// + /// The default Text style for [Zeta]. + static const TextStyle bodyMedium = TextStyle(fontSize: 14, fontWeight: FontWeight.w400, height: 20 / 14); + + /// Smallest of the body styles. + /// + /// {@macro zeta-text-body} + static const TextStyle bodySmall = TextStyle(fontSize: 12, fontWeight: FontWeight.w400, height: 16 / 12); + + /// Largest of the label styles. + /// + /// {@template zeta-text-label} + /// Label styles are smaller, utilitarian styles, used for areas of the UI + /// such as text inside of components or very small supporting text in the + /// content body, like captions. + /// {@endtemplate} + /// + /// Used for text on [ZetaButton]. + static const TextStyle labelLarge = TextStyle(fontSize: 16, fontWeight: FontWeight.w500, height: 24 / 16); + + /// Middle size of the label styles. + /// + /// {@macro zeta-text-label} + static const TextStyle labelMedium = TextStyle(fontSize: 14, fontWeight: FontWeight.w500, height: 20 / 14); + + /// Small size of the label styles. + /// + /// {@macro zeta-text-label} + static const TextStyle labelSmall = TextStyle(fontSize: 12, fontWeight: FontWeight.w500, height: 16 / 12); + + /// Label text style used specifically for Indicator. + /// {@macro zeta-text-label} + static const TextStyle labelIndicator = TextStyle(fontSize: 12, fontWeight: FontWeight.w500, height: 14 / 12); + + /// Smallest of the label styles. + /// + /// {@macro zeta-text-label} + static const TextStyle labelTiny = TextStyle(fontSize: 11, fontWeight: FontWeight.w500, height: 14 / 11); +} + +/// [ZetaTextStyles] combined into a [TextTheme]. +const TextTheme zetaTextTheme = TextTheme( + displayLarge: ZetaTextStyles.displayLarge, + displayMedium: ZetaTextStyles.displayMedium, + displaySmall: ZetaTextStyles.displaySmall, + headlineLarge: ZetaTextStyles.heading1, + headlineMedium: ZetaTextStyles.heading2, + headlineSmall: ZetaTextStyles.heading3, + titleLarge: ZetaTextStyles.titleLarge, + titleMedium: ZetaTextStyles.titleMedium, + titleSmall: ZetaTextStyles.titleSmall, + bodyLarge: ZetaTextStyles.bodyLarge, + bodyMedium: ZetaTextStyles.bodyMedium, + bodySmall: ZetaTextStyles.bodySmall, + labelLarge: ZetaTextStyles.labelLarge, + labelMedium: ZetaTextStyles.labelMedium, + labelSmall: ZetaTextStyles.labelSmall, +); diff --git a/lib/src/utils/enums.dart b/lib/src/utils/enums.dart new file mode 100644 index 00000000..787a4f24 --- /dev/null +++ b/lib/src/utils/enums.dart @@ -0,0 +1,43 @@ +import '../../zeta_flutter.dart'; + +/// Border options for [ZetaButton]. +enum ZetaWidgetBorder { + /// Sharp border + sharp, + + /// Slightly rounded border. + rounded, + + /// Fully rounded border. + full, +} + +/// Size options for [ZetaIndicator], [ZetaWorkcloudIndicator], [ZetaButton], [ZetaPasswordInput]. +enum ZetaWidgetSize { + /// large + large, + + /// medium + medium, + + /// small + small, +} + +/// Status options for [ZetaBadge], [ZetaStatusLabel], [ZetaInPageBanner]. +enum ZetaWidgetStatus { + /// Information widget; defaults to purple color scheme. + info, + + /// Positive widget; defaults to green color scheme. + positive, + + /// Warning widget; defaults to yellow color scheme. + warning, + + /// Negative widget; defaults to red color scheme. + negative, + + /// Neutral widget; defaults to grey color scheme. + neutral, +} diff --git a/lib/src/utils/extensions.dart b/lib/src/utils/extensions.dart index 59eb32cc..a7347b6f 100644 --- a/lib/src/utils/extensions.dart +++ b/lib/src/utils/extensions.dart @@ -1,5 +1,7 @@ import 'package:flutter/material.dart'; +import '../../zeta_flutter.dart'; + /// Extension to add dividers to any view that can take an iterable. /// /// Iterable can be converted to a list with [toList]. @@ -16,3 +18,80 @@ extension ListDivider on Iterable { } } } + +/// Extension to add spacing to any [Widget]. +extension SpacingWidget on Widget { + /// Equal padding on all sides. + Widget paddingAll(double space) => Padding(padding: EdgeInsets.all(space), child: this); + + /// Padding on start edge only. Is affected by whether the device is LTR or RTL: + /// + /// LTR: Left edge + /// RTL: Right edge + Widget paddingStart(double space) => Padding(padding: EdgeInsetsDirectional.only(start: space), child: this); + + /// Padding on start edge only. Is affected by whether the device is LTR or RTL: + /// + /// LTR: Right edge + /// RTL: Left edge + Widget paddingEnd(double space) => Padding(padding: EdgeInsetsDirectional.only(end: space), child: this); + + /// Padding on bottom only. + Widget paddingBottom(double space) => Padding(padding: EdgeInsets.only(bottom: space), child: this); + + /// Padding on top only. + Widget paddingTop(double space) => Padding(padding: EdgeInsets.only(top: space), child: this); + + /// Equal padding on top and bottom. + Widget paddingVertical(double space) => Padding(padding: EdgeInsets.symmetric(vertical: space), child: this); + + /// Equal padding on start and end. + Widget paddingHorizontal(double space) => Padding(padding: EdgeInsets.symmetric(horizontal: space), child: this); +} + +/// Extensions on [num]. +extension NumExtensions on num? { + /// Returns input as a formatted string with a maximum amount of characters. + /// + /// [maxChars] defaults to one. + String formatMaxChars([int maxChars = 1]) { + final strVal = this == null ? '' : this!.abs().toString(); + return strVal.length > maxChars ? '${'9' * maxChars}+' : strVal; + } +} + +/// Extensions on [ZetaWidgetStatus]. +extension ColorSwatches on ZetaWidgetStatus { + /// Gets color swatch from [ZetaWidgetStatus] + ZetaColorSwatch colorSwatch(BuildContext context) { + final colors = Zeta.of(context).colors; + switch (this) { + case ZetaWidgetStatus.info: + return colors.info; + case ZetaWidgetStatus.positive: + return colors.positive; + case ZetaWidgetStatus.warning: + return colors.warning; + case ZetaWidgetStatus.negative: + return colors.negative; + case ZetaWidgetStatus.neutral: + return colors.cool; + } + } +} + +/// Extensions on [String]. +extension StringExtensions on String? { + /// Returns initials from a name. + String get initials { + if (this == null) return ''; + final List nameParts = this!.split(RegExp(r'\W+'))..removeWhere((item) => item.isEmpty); + if (nameParts.isEmpty) return ''; + return (nameParts.length > 1 + ? nameParts[0].substring(0, 1) + nameParts[1].substring(0, 1) + : nameParts[0].length > 1 + ? nameParts[0].substring(0, 2) + : nameParts[0]) + .toUpperCase(); + } +} diff --git a/lib/zeta_flutter.dart b/lib/zeta_flutter.dart index f4babe3b..eb763dca 100644 --- a/lib/zeta_flutter.dart +++ b/lib/zeta_flutter.dart @@ -1,10 +1,24 @@ /// Zebra Design System (Zeta) - Flutter Component Library library zeta_flutter; -export 'src/components/checkbox.dart'; -export 'src/components/grid.dart'; -export 'src/components/spacing.dart'; -export 'src/components/text.dart'; +export 'src/assets/icons.dart'; +export 'src/components/accordion/accordion.dart'; +export 'src/components/avatars/avatar.dart'; +export 'src/components/badges/badge.dart'; +export 'src/components/badges/indicator.dart'; +export 'src/components/badges/priority_pill.dart'; +export 'src/components/badges/status_label.dart'; +export 'src/components/badges/tag.dart'; +export 'src/components/badges/workcloud_indicator.dart'; +export 'src/components/banners/in_page_banner.dart'; +export 'src/components/banners/system_banner.dart'; +export 'src/components/bottom sheets/bottom_sheet.dart'; +export 'src/components/bottom sheets/menu_items.dart'; +export 'src/components/buttons/button.dart'; +export 'src/components/buttons/fab.dart'; +export 'src/components/checkbox/checkbox.dart'; +export 'src/components/chips/chip.dart'; +export 'src/components/password/password_input.dart'; export 'src/theme/color_extensions.dart'; export 'src/theme/color_scheme.dart'; export 'src/theme/color_swatch.dart'; @@ -12,6 +26,8 @@ export 'src/theme/constants.dart'; export 'src/theme/contrast.dart'; export 'src/theme/theme_data.dart'; export 'src/theme/theme_service.dart'; -export 'src/tokens.dart'; +export 'src/theme/tokens.dart'; +export 'src/theme/typography.dart'; +export 'src/utils/enums.dart'; export 'src/utils/extensions.dart'; export 'src/zeta.dart'; diff --git a/pubspec.yaml b/pubspec.yaml index 4a8e8fba..d6920c2b 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,6 +1,8 @@ name: zeta_flutter -version: 0.1.1+1 -description: Zeta is the new, formal, standardized Zebra Design System based off the successes of ZDS (Zebra Design System). This package is in pre-release, and so many aspects are incomplete. +version: 0.2.0 +description: Zeta is the new, formal, standardized Zebra Design System based off + the successes of ZDS (Zebra Design System). This package is in pre-release, + and so many aspects are incomplete. homepage: https://github.com/zebradevs/zeta_flutter repository: https://github.com/zebradevs/zeta_flutter issue_tracker: https://github.com/zebradevs/zeta_flutter/issues @@ -23,8 +25,6 @@ dependencies: sdk: flutter dev_dependencies: - flutter_test: - sdk: flutter zds_analysis: ^1.0.0 flutter: @@ -37,4 +37,10 @@ flutter: weight: 400 - asset: lib/src/assets/fonts/IBMPlexSans-Medium.otf weight: 500 + - family: zeta-icons-round + fonts: + - asset: lib/src/assets/fonts/zeta-icons-round.ttf + - family: zeta-icons-sharp + fonts: + - asset: lib/src/assets/fonts/zeta-icons-sharp.ttf uses-material-design: true diff --git a/release-please-config.json b/release-please-config.json new file mode 100644 index 00000000..61d4398e --- /dev/null +++ b/release-please-config.json @@ -0,0 +1,7 @@ +{ + "packages": { + ".": { + "release-type": "dart" + } + } +} \ No newline at end of file