Add YaruColorDisk

example/lib/example_page_items.dart

@@ -3,6 +3,7 @@ import 'package:yaru_icons/yaru_icons.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
 import 'package:yaru_widgets_example/pages/carousel_page.dart';
 import 'package:yaru_widgets_example/pages/check_box_row_page.dart';
+import 'package:yaru_widgets_example/pages/color_disk_page.dart';
 import 'package:yaru_widgets_example/pages/color_picker_page.dart';
 import 'package:yaru_widgets_example/pages/extra_option_row_page.dart';
 import 'package:yaru_widgets_example/pages/section_page.dart';
@@ -117,5 +118,10 @@ final examplePageItems = <YaruPageItem>[
   YaruPageItem(
       titleBuilder: (context) => Text('YaruCarousel'),
       builder: (_) => CarouselPage(),
-      iconData: YaruIcons.refresh)
+      iconData: YaruIcons.refresh),
+  YaruPageItem(
+    titleBuilder: (context) => Text('YaruColorDisk'),
+    builder: (context) => ColorDiskPage(),
+    iconData: YaruIcons.color_select,
+  )
 ];

example/lib/main.dart

@@ -1,12 +1,20 @@
 import 'package:flutter/gestures.dart';
 import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
 import 'package:yaru/yaru.dart';
 import 'package:yaru_icons/yaru_icons.dart';
 import 'package:yaru_widgets/yaru_widgets.dart';
 import 'package:yaru_widgets_example/example_page_items.dart';
+import 'package:yaru_widgets_example/theme.dart';
 
 void main() {
-  runApp(Home());
+  runApp(MultiProvider(
+    providers: [
+      ChangeNotifierProvider(create: (_) => LightTheme(yaruLight)),
+      ChangeNotifierProvider(create: (_) => DarkTheme(yaruDark)),
+    ],
+    child: Home(),
+  ));
 }
 
 class Home extends StatefulWidget {
@@ -39,8 +47,8 @@ class _HomeState extends State<Home> {
     return MaterialApp(
       scrollBehavior: TouchMouseStylusScrollBehavior(),
       debugShowCheckedModeBanner: false,
-      theme: yaruLight,
-      darkTheme: yaruDark,
+      theme: context.watch<LightTheme>().value,
+      darkTheme: context.watch<DarkTheme>().value,
       home: YaruMasterDetailPage(
         leftPaneWidth: 280,
         previousIconData: YaruIcons.go_previous,

example/lib/pages/color_disk_page.dart

@@ -0,0 +1,105 @@
+import 'package:flutter/material.dart';
+import 'package:provider/provider.dart';
+import 'package:yaru/yaru.dart';
+import 'package:yaru_widgets/yaru_widgets.dart';
+import 'package:yaru_widgets_example/theme.dart';
+
+class ColorDiskPage extends StatefulWidget {
+  const ColorDiskPage({Key? key}) : super(key: key);
+
+  @override
+  State<ColorDiskPage> createState() => _ColorDiskPageState();
+}
+
+class _ColorDiskPageState extends State<ColorDiskPage> {
+  @override
+  Widget build(BuildContext context) {
+    final lightTheme = context.read<LightTheme>();
+    final darkTheme = context.read<DarkTheme>();
+    return YaruPage(children: [
+      SingleChildScrollView(
+        scrollDirection: Axis.horizontal,
+        child: Row(
+          mainAxisAlignment: MainAxisAlignment.spaceBetween,
+          children: [
+            for (var globalTheme in globalThemeList)
+              YaruColorDisk(
+                onPressed: () {
+                  lightTheme.value = globalTheme.lightTheme;
+                  darkTheme.value = globalTheme.darkTheme;
+                },
+                color: globalTheme.primaryColor,
+                selected:
+                    Theme.of(context).primaryColor == globalTheme.primaryColor,
+              ),
+          ],
+        ),
+      )
+    ]);
+  }
+}
+
+final List<GlobalTheme> globalThemeList = [
+  GlobalTheme(
+    lightTheme: yaruLight,
+    darkTheme: yaruDark,
+    primaryColor: YaruColors.ubuntuOrange,
+  ),
+  GlobalTheme(
+    lightTheme: yaruSageLight,
+    darkTheme: yaruSageDark,
+    primaryColor: sageMaterialColor,
+  ),
+  GlobalTheme(
+    lightTheme: yaruBarkLight,
+    darkTheme: yaruBarkDark,
+    primaryColor: barkMaterialColor,
+  ),
+  GlobalTheme(
+    lightTheme: yaruOliveLight,
+    darkTheme: yaruOliveDark,
+    primaryColor: oliveMaterialColor,
+  ),
+  GlobalTheme(
+    lightTheme: yaruViridianLight,
+    darkTheme: yaruViridianDark,
+    primaryColor: viridianMaterialColor,
+  ),
+  GlobalTheme(
+    lightTheme: yaruPrussianGreenLight,
+    darkTheme: yaruPrussianGreenDark,
+    primaryColor: prussianGreenMaterialColor,
+  ),
+  GlobalTheme(
+    lightTheme: yaruBlueLight,
+    darkTheme: yaruBlueDark,
+    primaryColor: blueMaterialColor,
+  ),
+  GlobalTheme(
+    lightTheme: yaruPurpleLight,
+    darkTheme: yaruPurpleDark,
+    primaryColor: purpleMaterialColor,
+  ),
+  GlobalTheme(
+    lightTheme: yarMagentaLight,
+    darkTheme: yaruMagentaDark,
+    primaryColor: magentaMaterialColor,
+  ),
+  GlobalTheme(
+    lightTheme: yaruRedLight,
+    darkTheme: yaruRedDark,
+    primaryColor: lightRedMaterialColor,
+  ),
+];
+
+class GlobalTheme {
+  final ThemeData lightTheme;
+  final ThemeData darkTheme;
+  final MaterialColor primaryColor;
+
+  GlobalTheme({
+    required this.lightTheme,
+    required this.darkTheme,
+    required this.primaryColor,
+  });
+}

example/lib/theme.dart

@@ -0,0 +1,9 @@
+import 'package:flutter/material.dart';
+
+class LightTheme extends ValueNotifier<ThemeData> {
+  LightTheme(ThemeData value) : super(value);
+}
+
+class DarkTheme extends ValueNotifier<ThemeData> {
+  DarkTheme(ThemeData value) : super(value);
+}

example/pubspec.yaml

@@ -9,9 +9,10 @@ environment:
 dependencies:
   flutter:
     sdk: flutter
+  provider: ^6.0.2
   yaru:
     git: http://github.com/ubuntu/yaru.dart
-  yaru_icons: ^0.1.2
+  yaru_icons: ^0.2.0
   yaru_widgets:
     path: ../
 

lib/src/yaru_color_disk.dart

@@ -0,0 +1,43 @@
+import 'package:flutter/material.dart';
+
+class YaruColorDisk extends StatelessWidget {
+  const YaruColorDisk(
+      {Key? key,
+      required this.onPressed,
+      required this.color,
+      required this.selected})
+      : super(key: key);
+
+  final VoidCallback onPressed;
+  final Color color;
+  final bool selected;
+
+  @override
+  Widget build(BuildContext context) {
+    return SizedBox(
+      width: 42,
+      child: Padding(
+        padding: const EdgeInsets.all(8.0),
+        child: TextButton(
+          style: TextButton.styleFrom(
+            padding: const EdgeInsets.all(0),
+            shape: CircleBorder(
+                side: BorderSide(
+                    color: selected
+                        ? Theme.of(context).primaryColor
+                        : Colors.transparent)),
+          ),
+          onPressed: onPressed,
+          child: SizedBox(
+            height: 20,
+            width: 20,
+            child: DecoratedBox(
+              decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(100), color: color),
+            ),
+          ),
+        ),
+      ),
+    );
+  }
+}

lib/yaru_widgets.dart

@@ -4,6 +4,7 @@ export 'src/ubuntu_logo.dart';
 export 'src/yaru_alert_dialog.dart';
 export 'src/yaru_carousel.dart';
 export 'src/yaru_checkbox_row.dart';
+export 'src/yaru_color_disk.dart';
 export 'src/yaru_color_picker_button.dart';
 export 'src/yaru_dialog_title.dart';
 export 'src/yaru_expansion_panel_list.dart';