A String path property is problematic because it doesn't let apps specify the desired type of image widget. For example, the Ubuntu Desktop Installer needs to pass a FlavorImage widget for looking up flavor theme thumbnails in canonical/ubuntu-desktop-installer#656. Please consider changing the property to a usual Widget child as it is in 95% of cases in Flutter. This would give apps full control over the image.

Posted by @madsrh in https://github.com/ubuntu-flutter-community/software/issues/234

ATM active selections have both icon and label colored:

We should only add color to the "pill" background and change the text weight.

https://api.flutter.dev/flutter/material/NavigationBar-class.html

This is an issue in material.dart in the stable channel not being 100% material 3 compatible
I think, when they are done with the migration this issue should be resolved for us "automatically"

The default tab styling is a bit unsatisfying.

Created a tabbed view which makes sense for different layers on a page, like for example in the settings app in the connections page:

and the keyboard page:

• tab count
• list of titles
• list of icons
• list of view widgets
• and a better idea than hardcoded height "1000" 🙄 😆

class KeyboardPage extends StatefulWidget {
  const KeyboardPage({Key? key}) : super(key: key);

  static Widget create(BuildContext context) {
    return const KeyboardPage();
  }

  @override
  State<KeyboardPage> createState() => _KeyboardPageState();
}

class _KeyboardPageState extends State<KeyboardPage>
    with TickerProviderStateMixin {
  late TabController tabController;

  @override
  void initState() {
    tabController = TabController(length: 2, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Container(
          width: 516,
          height: 60,
          decoration: BoxDecoration(borderRadius: BorderRadius.circular(4)),
          child: TabBar(
              controller: tabController,
              indicator: BoxDecoration(
                  borderRadius: BorderRadius.circular(4),
                  color:
                      Theme.of(context).colorScheme.onSurface.withOpacity(0.1)),
              tabs: const [
                Tab(
                    icon: Icon(YaruIcons.input_keyboard),
                    child: Text("Keyboard Settings")),
                Tab(
                    icon: Icon(YaruIcons.font),
                    child: Text("Keyboard Shortcuts")),
              ]),
        ),
        Padding(
          padding: const EdgeInsets.only(top: 30),
          child: SizedBox(
            height: 1000,
            child: TabBarView(
              controller: tabController,
              children: const [KeyboardSettingsPage(), KeyboardShortcutsPage()],
            ),
          ),
        ),
      ],
    );
  }
}

• full control over master list tiles
  • replace "icon" & "title" with a "tile" builder?
  • tooltips, semantics, badges, animations, custom tiles, ...
• full control over detail page app bar
  • replace "title" with an "app bar" builder?
  • leading icon, trailing actions, bottom widget, ...
• themable constraints, padding, spacings, ...

TODO: update the docs when all the refactoring is done!

Once again thank you for creating this package :)

Are Radio Buttons planned? I'm not a regular ubuntu user, however AFAIK radio buttons are part of yaru design.

Sometimes if you change the page where the carousel sits (in software by navigating around) the carousel gets stuck somewhere in the animation and sits in an odd size and is unclickable. When the next image animated in the error is gone

@Jupi007 any idea how to fix this? or is this rather an issue for software?
(edit: sorry jp for tagging you... your names both start with J -.-)

Eventually we should just remove those dialogs from yaruwidgets as they do not bring anything really except complexity. What one wants is the close button the rest can be done by the content inside or the dialog theme in yaru.dart

WDYT @Jupi007 ?

The /src folder is becoming a bit messy with 37 class files.
I think it would be nice to organize all those into subfolder (layout, controls, dialog, ...).

I don't think it would break something in apps, as we rely on a root yaru_widgets.dart index file which export all files, but maybe I'm wrong.

Wdyt @Feichtmeier ?

Let users of this package decide how the search works.
This probably needs a reworked search bar for the master details page

It looks like the leaking splash effect bug has been fixed in flutter flutter/flutter#86661

Currently, the contentPadding property of the AlertDialog that is build by the YaruAlertDialog widget is set to EdgeInsets.zero. This results in dialogs with content that run right up to the left and right edges, as seen in the screenshot below.

It would be great if you guys could update this property with some default padding. Alternatively, you could expose this property for developers to set themselves.

Either reduce the height or remove those custom styling

It is something not related to this PR, but the inkwell border radius looks a bit weird.

Originally posted by @Jupi007 in #185 (review)

The filter quality of the image child needs to be accessible via the ImageTile constructor.

They are basically only material rows with something inside. We should move them back to settings

I think the close button should be inside a "regular" 4px border radius button and stay inside the dialog
or just be a smaller circle with enough padding so the position of the X stays the same but the circle does not leave the frame

WDYT @Jupi007 ?

Flutter specifies "click" and "forbidden" mouse cursors for normal and disabled buttons, respectively.

Enabled	Disabled

While this is the appropriate behavior on the web, it feels somewhat awkward on the desktop where buttons normally don't change the mouse cursor.

Thus, I would like to propose that Yaru specifies SystemMouseCursors.basic for all button-like widgets.

Enabled	Disabled

When becoming too long, the YaruPageItem wrap the title text into a new line, which isn't looking good:

A potential "fix" for apps could be to set the exactly needed sidebar width, but with internationalization it is not possible to deal with so much line size.
IMO the best solution is to ellipse the text like in nautilus:

As the title is not a string but a free widget, I propose to locally change the max-line to 1 and the overflow to TextOverflow.ellipsis, with something like a YaruPageItemTitle widget, so this is optional.

I am using Ubuntu, I copied some text and then tried to paste in the Search Widget by right clicking on the Search widget to show me the context menu so that I can paste the text but it sometimes doesn't appear at all although Ctrl+V works fine.

First, the selected icon is using the accent color, while tabbed page isn't:

Secondly, the selection background isn't wrapping the label, and the hover background isn't fitting the full width, btw it also uses the accent with opacity on hover, but grey on click and this blends bad:

I tried to take a look into the code, but I think that the NavigationRail customization is very limited.

• add pictures
• add information what you can do with yaru_widgets and what not

Favicon works, just copied the new ubuntu CoF

But the other icons seem to have special formats and sizes

and they are needed for the PWA icon

All Yaru*Row widgets have pump hardcoded properties into the material row. This makes them hard to use outside of the settings app, where those values come from

We should forward everything a row has from the Yaru*Row widgets to the row. And also never force a child widget to be a text

Hi. Great Job! I was wondering if the library contains basic widgets like textbook, combobox, multiple selected combobox, tree widgets , etc.
Thank you.

Add Yaru controls

Todo list:

• #354
• #352
• #353
• #374
• #377
• ubuntu/archive_yaru_icons.dart#79
• #389

Hiding ListTile children was most of the time a lazy decision and limits further design ideas in apps.
To leave maximum freedom material.dart provides for ListTiles and still keep the build in navigation of the layout pages, we could to use iconBuilder, titleBuilder, trailingBuilder, subTileBuilder instead of hiding ListTile children.

This probably needs a refactoring in all layout pages, YaruPageItemList view and YaruPageItem

Post-work is inside Settings, Software and firmware-updater app to not change any looks

Alternatively to forward all children, we could use any ListTile as a title. Could become tricky with the onTap though

The difference between the active and deactivated arrows in the image carousel are too subtle IMHO. I think a better solution would be if the images could just loop ♾️ or alternatively, to hide the left arrow on the first image (and right arrow for the last ofc).

For accessibility the keyboard left/right arrows should work when I click the arrows, the dots and when the image is enlarged.

Just like how the Flutter Logo is. As soon as we get the new updated logo I'd like to do this :)

YaruSafeImage would be better moved back to the software app.

• It assumes a network image
• It exposes only a couple of Image's properties
• It masks some of Image's default values (filter quality low -> medium, fit null -> height)
• It uses an arbitrary default size of 65

All of these are fine assumptions for an application widget but problematic, limiting, and surprising for a framework widget.

As the example app already targets web, it could be published, for instance, as a GitHub page, similar to what macos_ui and fluent_ui do.

This would benefit developers who don't code on ubuntu but are targeting ubuntu as a desktop platform.