yaru.dart

KO | EN

gitlite — search

#javascript #ai #llm #golang #machine-learning #linux #docker #windows #awesome #kubernetes #pytorch #ios #mcp #openai

(★ 390)

Ubuntu Yaru Flutter widgets and themes for building desktop and web applications

File Explorer

Download Latest Version (.zip)

- - icons.png
  - screenshot.png
  - theme.png
- - bug_report.yml
  - config.yml
  - feature_request.yml
- - ci.yml
  - nightly.yml
  - pr.yaml
  - publish.yaml
  - release.yaml
- dependabot.yaml
- PULL_REQUEST_TEMPLATE.md
- - CONTRIBUTING.txt
  - copyright.txt
  - FONTLOG.txt
  - LICENCE-FAQ.txt
  - LICENCE.txt
  - README.txt
  - TRADEMARKS.txt
  - Ubuntu-B.ttf
  - Ubuntu-BI.ttf
  - Ubuntu-L.ttf
  - Ubuntu-LI.ttf
  - Ubuntu-M.ttf
  - Ubuntu-MI.ttf
  - Ubuntu-R.ttf
  - Ubuntu-RI.ttf
  - UbuntuMono-Regular.ttf
  - UFL.txt
- - aircraft-filled.svg
  - aircraft.svg
  - app-grid.svg
  - apple-filled.svg
  - apple.svg
  - appliance-filled.svg
  - appliance.svg
  - audio-card-filled.svg
  - audio-card.svg
  - basketball-filled.svg
  - basketball.svg
  - beaker-filled.svg
  - beaker.svg
  - bell-filled.svg
  - bell.svg
  - bluetooth.svg
  - bold.svg
  - book-filled.svg
  - book.svg
  - bookmark-filled.svg
  - bookmark.svg
  - calculator.svg
  - character-map.svg
  - check-spelling.svg
  - checkmark.svg
  - chip-filled.svg
  - chip.svg
  - clear-night-filled.svg
  - clear-night.svg
  - clock-filled.svg
  - clock.svg
  - cloud-filled.svg
  - cloud.svg
  - code.svg
  - color-select.svg
  - colors-filled.svg
  - colors.svg
  - compass-filled.svg
  - compass.svg
  - computer-filled.svg
  - computer-legacy-filled.svg
  - computer-legacy.svg
  - computer.svg
  - copy-filled.svg
  - copy.svg
  - cursor-filled.svg
  - cursor.svg
  - cut.svg
  - debian.svg
  - dialpad-filled.svg
  - dialpad.svg
  - dictionary-filled.svg
  - dictionary.svg
  - disk-filled.svg
  - disk.svg
  - display-layout-filled.svg
  - display-layout.svg
  - drag-handle.svg
  - droplets.svg
  - edit-clear-all.svg
  - edit-clear-filled.svg
  - edit-clear.svg
  - education-filled.svg
  - education.svg
  - eject.svg
  - error-filled.svg
  - error.svg
  - external-link-filled.svg
  - external-link.svg
  - eye-filled.svg
  - eye.svg
  - familly.svg
  - fast-backward.svg
  - fast-forward.svg
  - few-clouds-filled.svg
  - few-clouds-night-filled.svg
  - few-clouds-night.svg
  - few-clouds.svg
  - find-replace-filled.svg
  - find-replace.svg
  - fingerprint-filled.svg
  - fingerprint.svg
  - flag-filled.svg
  - flag.svg
  - flash-card-filled.svg
  - flash-card.svg
  - flatpak.svg
  - flip-horizontal.svg
  - flip-vertical.svg
  - floppy-filled.svg
  - floppy.svg
  - fog-filled.svg
  - fog.svg
  - font.svg
  - format-remove.svg
  - forward.svg
  - game-controller-filled.svg
  - game-controller.svg
  - games-filled.svg
  - games.svg
  - gear-dots-filled.svg
  - gear-dots.svg
  - gear-filled.svg
  - gear.svg
  - gears-filled.svg
  - gears.svg
  - globe-filled.svg
  - globe.svg
  - gnome-logo.svg
  - graphic-tablet-filled.svg
  - graphic-tablet.svg
  - headphones.svg
  - headset.svg
  - health-filled.svg
  - health.svg
  - hearing-filled.svg
  - hearing.svg
  - heart-filled.svg
  - heart.svg
  - hide-filled.svg
  - hide.svg
  - history-filled.svg
  - history.svg
  - home-filled.svg
  - home.svg
  - hourglass-filled.svg
  - hourglass.svg
  - html-filled.svg
  - html.svg
  - human.svg
  - important-filled.svg
  - important.svg
  - inbox-filled.svg
  - inbox.svg
  - indent-less.svg
  - indent-more.svg
  - information-filled.svg
  - information.svg
  - italic.svg
  - kde-logo.svg
  - key-filled.svg
  - key.svg
  - keyboard-filled.svg
  - keyboard.svg
  - light-bulb-off-filled.svg
  - light-bulb-off.svg
  - light-bulb-on-filled.svg
  - light-bulb-on.svg
  - localization-filled.svg
  - localization.svg
  - location.svg
  - lock-filled.svg
  - lock.svg
  - magnifying-glass-filled.svg
  - magnifying-glass.svg
  - menu.svg
  - minus.svg
  - modem-filled.svg
  - modem.svg
  - monitor-filled.svg
  - monitor.svg
  - mouse-filled.svg
  - mouse.svg
  - multimedia-filled.svg
  - multimedia-player-filled.svg
  - multimedia-player.svg
  - multimedia.svg
  - ok-filled.svg
  - ok-simple.svg
  - ok.svg
  - outbox-filled.svg
  - outbox.svg
  - overcast-filled.svg
  - overcast.svg
  - panel-look-filled.svg
  - panel-look.svg
  - paper-clip.svg
  - paste-filled.svg
  - paste.svg
  - pda-filled.svg
  - pda.svg
  - pen.svg
  - pin.svg
  - placeholder-icon-filled.svg
  - placeholder-icon.svg
  - plus.svg
  - podcast-filled.svg
  - podcast.svg
  - power-filled.svg
  - power.svg
  - private-mask-filled.svg
  - private-mask.svg
  - puzzle_piece.svg
  - puzzle_piece_filled.svg
  - question-filled.svg
  - question.svg
  - radio-filled.svg
  - radio.svg
  - rain-filled.svg
  - rain.svg
  - reboot.svg
  - redo.svg
  - refresh.svg
  - reply-all.svg
  - reply.svg
  - revert.svg
  - rotate-left.svg
  - rotate-right.svg
  - rss.svg
  - rule-and-pen-filled.svg
  - rule-and-pen.svg
  - scanner-filled.svg
  - scanner.svg
  - screensaver-filled.svg
  - screensaver.svg
  - script-filled.svg
  - script.svg
  - search-history-filled.svg
  - search-history.svg
  - selection.svg
  - send-filled.svg
  - send-receive.svg
  - send.svg
  - server-filled.svg
  - server.svg
  - share-filled.svg
  - share.svg
  - showers-filled.svg
  - showers-night-filled.svg
  - showers-night.svg
  - showers.svg
  - shuffle.svg
  - shutdown.svg
  - skip-backward.svg
  - skip-forward.svg
  - smartphone-filled.svg
  - smartphone.svg
  - snow-filled.svg
  - snow.svg
  - star-filled.svg
  - star-semi-filled.svg
  - star.svg
  - stop.svg
  - stopwatch-filled.svg
  - stopwatch.svg
  - storm-filled.svg
  - storm.svg
  - strikethrough.svg
  - subtitles-filled.svg
  - subtitles.svg
  - sun-filled.svg
  - sun.svg
  - swiss-knife-filled.svg
  - swiss-knife.svg
  - symbols-filled.svg
  - symbols.svg
  - tab-new-filled.svg
  - tab-new.svg
  - tablet-filled.svg
  - tablet.svg
  - tag-filled.svg
  - tag.svg
  - tape-filled.svg
  - tape.svg
  - target-filled.svg
  - target.svg
  - television-filled.svg
  - television.svg
  - terminal-filled.svg
  - terminal.svg
  - text-direction-ltr.svg
  - text-direction-rtl.svg
  - text-editor-filled.svg
  - text-editor.svg
  - thunderbolt.svg
  - tornado.svg
  - touchpad-filled.svg
  - touchpad.svg
  - trowel-filled.svg
  - trowel.svg
  - underline.svg
  - undo.svg
  - usb-stick-filled.svg
  - usb-stick.svg
  - users-filled.svg
  - users.svg
  - wallpaper-filled.svg
  - wallpaper.svg
  - warning-filled.svg
  - warning.svg
  - weather-alert-filled.svg
  - weather-alert.svg
  - weather-filled.svg
  - weather.svg
  - wind.svg
  - windows-filled.svg
  - windows.svg
  - wrench-filled.svg
  - wrench.svg
  - xfce-logo.svg
- - compass.shapeshifter
  - compass_filled.shapeshifter
  - heart.shapeshifter
  - heart_filled.shapeshifter
  - no_network.shapeshifter
  - ok.shapeshifter
  - ok_filled.shapeshifter
  - star.shapeshifter
  - star_filled.shapeshifter
  - star_half_filled.shapeshifter
  - thumb_up.shapeshifter
  - thumb_up_filled.shapeshifter
- LICENSE.CCBYSA
- symlinks.json
- yaru_icons.otf
- - yaru_master_detail_page-landscape.png
  - yaru_master_detail_page-portrait.png
  - yaru_window_title_bar-banner.png
  - yaru_window_title_bar-builder.png
  - yaru_window_title_bar-debug.png
  - yaru_window_title_bar-home.png
  - yaru_window_title_bar.png
- - ubuntuhero.jpg
- - code_snippet_button.dart
  - example.dart
  - example_dark_light_toggle_button.dart
  - example_high_contrast_button.dart
  - example_home.dart
  - example_model.dart
  - example_page_items.dart
  - example_theme_button.dart
  - main.dart
  - utils.dart
- - .gitignore
  - CMakeLists.txt
  - main.cc
  - my_application.cc
  - my_application.h
- - .gitignore
  - Podfile
- - favicon.ico
  - index.html
  - manifest.json
- - .gitignore
  - CMakeLists.txt
- .gitignore
- .metadata
- analysis_options.yaml
- devtools_options.yaml
- pubspec.yaml
- README.md
- constants.dart
- foundation.dart
- icons.dart
- settings.dart
- theme.dart
- widgets.dart
- yaru.dart
- - icon.svg
  - yaru-example.desktop
- snapcraft.yaml
- - yaru_border_radius_test.dart
  - yaru_text_theme_test.dart
- - yaru_back_button_test.dart
  - yaru_border_container_test.dart
  - yaru_check_button_test.dart
  - yaru_checkbox_list_tile_test.dart
  - yaru_checkbox_test.dart
  - yaru_circular_progress_indicator_test.dart
  - yaru_close_button_test.dart
  - yaru_date_time_entry_test.dart
  - yaru_edge_focus_interceptor_test.dart
  - yaru_expandable_test.dart
  - yaru_icon_button_test.dart
  - yaru_info_test.dart
  - yaru_linear_progress_indicator_test.dart
  - yaru_list_tile_test.dart
  - yaru_master_detail_page_test.dart
  - yaru_navigation_page_test.dart
  - yaru_option_button_test.dart
  - yaru_paned_view_test.dart
  - yaru_popup_menu_button_test.dart
  - yaru_popup_menu_item_test.dart
  - yaru_radio_button_test.dart
  - yaru_radio_list_tile_test.dart
  - yaru_radio_test.dart
  - yaru_segmented_entry_test.dart
  - yaru_selectable_container_test.dart
  - yaru_split_button_test.dart
  - yaru_switch_button_test.dart
  - yaru_switch_list_tile_test.dart
  - yaru_switch_test.dart
  - yaru_tile_test.dart
  - yaru_title_bar_test.dart
  - yaru_toggle_button_test.dart
  - yaru_window_control_test.dart
- flutter_test_config.dart
- yaru_golden_tester.dart
.fvmrc
.gitignore
.metadata
analysis_options.yaml
build-icons.sh
CHANGELOG.md
dart_test.yaml
LICENSE
pubspec.yaml
README.md

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# The official Flutter Yaru Theme and Widgets Suite

[![Pub Package](https://img.shields.io/pub/v/yaru.svg)](https://pub.dev/packages/yaru)

This repository and package contains:

- flutter widgets useful for building desktop and web applications, following but also expanding the yaru theme for the gnome desktop in Ubuntu 22.04+.
- a theme for widgets from material.dart and from this repository
- a complete icon set for flutter apps following the yaru design language

[LIVE DEMO IN YOUR BROWSER](https://ubuntu.github.io/yaru.dart/)

![screenshot](https://raw.githubusercontent.com/ubuntu/yaru.dart/main/.github/images/screenshot.png)
![screenshot](https://raw.githubusercontent.com/ubuntu/yaru.dart/main/.github/images/icons.png)
![screenshot](https://raw.githubusercontent.com/ubuntu/yaru.dart/main/.github/images/theme.png)

# Contributing

- for everything you need
  - flutter
      ```console
      sudo apt -y install git curl cmake meson make clang libgtk-3-dev pkg-config && mkdir -p ~/development && cd ~/development && git clone https://github.com/flutter/flutter.git -b stable && echo 'export PATH="$PATH:$HOME/development/flutter/bin"' >> ~/.bashrc && source ~/.bashrc
      ```
  - VsCode

```console
      sudo snap install code --classic
      ```
- to work on the icons and then build the font, you need to install the [icon_font_generator](https://github.com/rbcprolabs/icon_font_generator) tool:

```console
    dart pub global activate -sgit https://github.com/Jupi007/icon_font_generator.git --git-ref yaru
    ```

- Source SVGs files are located inside `./icons`. The final icon name is determined by **subfolder_name** + **icon_name** (Ex: `icons/mimetype/text-plain.svg` will be named `mimetype_text_plain`).

- After modifying or adding icons, you must run the build script, which will generate the icon font:

``` console
    ./build-icons.sh
    ```

or run

```bash
    yaru_icon_font_generator assets/icons assets/yaru_icons.otf --output-class-file=lib/src/yaru_icons.dart -r
    ```

## Contributing new gtk<->Flutter theme mappings

1. Add a new `YaruVariant` in `variant.dart`
2. Add a new mapping into the `resolveVariant` method inside `inherited_theme.dart`

# Copying or Reusing

The theme and widgets are licensed under Mozilla Public License Version 2.0.

The icons have mixed licencing. You are free to copy, redistribute and/or modify aspects of this work under the terms of each licence accordingly (unless otherwise specified).

The icon assets (any and all source .svg files or rendered .ttf font) are licensed under the terms of the Creative Commons Attribution-ShareAlike 4.0 License.

Included scripts are free software licensed under the terms of the GNU General Public License, version 3.

yaru.dart

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

yaru.dart

File Explorer

Today's picks

Was this content helpful?

Recent Feedback

Download README