How do I add custom icons to Yaru.dart?

Place SVG files in the icons directory, use the forked icon_font_generator tool, and run the build script as per the contributing section. This generates the font and updates the Dart class file for use in Flutter apps.

Can Yaru.dart be used for Flutter mobile apps?

While technically possible, Yaru.dart is optimized for desktop and web with widgets designed for larger screens. For mobile-first projects, standard Material or Cupertino widgets might offer better performance and design consistency.

Yaru.dart vs Material Design for desktop Flutter apps?

Yaru.dart provides Ubuntu-specific themes and desktop-optimized widgets, while Material Design is more generic. Choose Yaru.dart for seamless Ubuntu integration; Material Design for broader platform-agnostic applications.

How to change the theme variant in a Yaru.dart app?

Modify the YaruVariant in your Flutter app's theme data, and ensure mappings are updated in inherited_theme.dart, as outlined in the README's contributing section for GTK theme mappings.

What are the licensing terms for Yaru icons?

Icons are under Creative Commons Attribution-ShareAlike 4.0, requiring attribution and share-alike for derivatives, while code is under MPL 2.0. Always check the copying section for compliance when reusing assets.

Is Yaru.dart compatible with Flutter web?

Yes, Yaru.dart supports Flutter web as mentioned in the description, and the live demo is available in-browser, but ensure your app handles web-specific considerations like responsive design.

Open-Awesome

Ubuntu Yaru

MPL-2.0Dartv10.2.0

Official Flutter widgets and themes implementing Ubuntu's Yaru design language for desktop and web apps.

Visit Website GitHub

393 stars55 forks0 contributors

What is Ubuntu Yaru?

Yaru.dart is an official Flutter package that provides widgets, themes, and icons implementing Ubuntu's Yaru design language. It enables developers to build desktop and web applications with a consistent, modern UI that integrates seamlessly with the Ubuntu desktop environment. The package includes a full theme, custom widgets optimized for desktop, and a comprehensive icon set.

Target Audience

Flutter developers building desktop or web applications, especially those targeting Ubuntu or seeking a polished, consistent design system. It's also valuable for developers creating cross-platform apps that need to feel native on Linux desktops.

Value Proposition

Developers choose Yaru.dart because it's the official, maintained implementation of Ubuntu's design system for Flutter, ensuring high-quality, consistent components that align with Ubuntu's visual identity. It provides desktop-optimized widgets and full theme support not found in standard Flutter Material libraries.

Overview

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

Use Cases

Best For

Building Flutter desktop applications for Ubuntu
Creating web applications with Ubuntu's Yaru design language
Developing cross-platform apps that need a consistent Linux-native UI
Implementing custom icon sets in Flutter applications
Theming Flutter apps to match GTK-based desktop environments
Extending Material Design with desktop-specific widgets

Not Ideal For

Mobile-first Flutter applications prioritizing phone and tablet interfaces over desktop
Projects requiring design systems other than Ubuntu's Yaru, like Material Design or Cupertino
Teams needing extensive third-party widget ecosystems not tied to Ubuntu
Applications targeting non-GTK desktop environments like Windows or macOS without Ubuntu integration

Pros & Cons

Pros

Official Canonical Support

Maintained by Ubuntu, ensuring long-term stability and alignment with Ubuntu's design updates, as stated in the GitHub description.

Desktop-First Widgets

Provides a suite of custom widgets optimized for desktop and web use, expanding beyond Flutter's Material library for better large-screen experiences, per the key features.

Comprehensive Icon Library

Includes hundreds of icons in a custom font following Yaru design, simplifying UI consistency without external dependencies, shown in the README's icons section.

GTK Theme Synchronization

Supports mapping GTK theme variants to Flutter, allowing apps to dynamically match the system theme on Ubuntu desktops, enhancing native feel.

Cons

Niche Design Language

Tied exclusively to Ubuntu's Yaru aesthetic, limiting customization for projects needing different visual identities or branding beyond this ecosystem.

Contribution Complexity

Adding new icons requires a forked version of icon_font_generator and manual build scripts, adding barriers for community contributions, as detailed in the contributing section.

Limited Cross-Platform Appeal

Focused on Ubuntu and GTK environments, making it less ideal for apps targeting Windows, macOS, or other Linux desktops without similar native integration.

Frequently Asked Questions

Related Projects

Desktop Embedding

Experimental plugins for Flutter for Desktop

Stars7,044

Forks610

Last commit2 years ago

Golang Desktop Embedder

Flutter on Windows, MacOS and Linux - based on Flutter Embedding, Go and GLFW.

Stars5,932

Forks278

Last commit5 days ago

Fluent UI

Microsoft's WinUI3 in Flutter.

Stars3,467

Forks507

Last commit9 days ago

MacOS UI

Flutter widgets and themes implementing the current macOS design language.

Stars2,140

Forks202

Last commit17 days ago

Community-curated · Updated weekly · 100% open source

Found a gem we're missing?

Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.

Submit a project Star on GitHub