Version 0.0.12

CHANGELOG.md

@@ -1,3 +1,30 @@
+v0.0.12 / 2023-01-03
+===================
+Widgets:
+ * Rebuilt Checkbox, RadioButton, Switch and Slider based on CustomPainter
+ * Added a ContextMenu widget
+ * Added new Animations to some components
+ * Simplified ZenitIconButton
+ * Added ZenitCheckboxListTile and ZenitRadioButtonListTile and improved ZenitSwitchListTile
+ * Add hover effect to components
+ * New naming scheme for buttons (Primary, Secondary, Text and "Button" - made to be customized)
+ * Added ZenitSection (should be used instead of Card)
+ * Added Zenit(Window)Toolbar and ZenitWindowButtons
+ * Added ZenitDialog widget
+
+Theme:
+ * Adjusted the theme colours
+ * Added copyWith to every theme class of zenit widgets
+ * new extension on Color to add some features
+ * Changed the default font to Inter
+ * Added a custom text theme more suited for desktop applications
+ * Changed FAB to be Rectangular and reduced it's size
+ * Add slight outline to most components
+
+Windowing:
+ * Added HandyWindow and YaruWindow
+ * Added basic window management functionality
+
 v0.0.11 / 2023-07-19
 ===================
 

example/lib/main.dart

@@ -1,24 +1,25 @@
-import 'package:flutter/material.dart';
 import 'package:zenit_ui/zenit_ui.dart';
 import 'package:zenit_ui_example/pages.dart';
 
 void main() async {
   // Check for repainting
   //debugRepaintRainbowEnabled = true;
-
-  runApp(const MyApp());
+  await ZenitWindowTitlebar.ensureInitialized();
+  WidgetsFlutterBinding.ensureInitialized();
+  runApp(const ExampleApp());
 }
 
-class MyApp extends StatefulWidget {
-  const MyApp({Key? key}) : super(key: key);
+class ExampleApp extends StatefulWidget {
+  const ExampleApp({Key? key}) : super(key: key);
 
   @override
-  State<MyApp> createState() => _MyAppState();
+  State<ExampleApp> createState() => _ExampleAppState();
 }
 
-class _MyAppState extends State<MyApp> {
+class _ExampleAppState extends State<ExampleApp> {
   int themeMode = 0;
   Set<ThemeMode> themeModes = {ThemeMode.system, ThemeMode.light, ThemeMode.dark};
+
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
@@ -27,17 +28,28 @@ class _MyAppState extends State<MyApp> {
       theme: createZenitTheme(brightness: Brightness.light),
       darkTheme: createZenitTheme(brightness: Brightness.dark),
       home: ZenitNavigationLayout(
+        titlebar: const ZenitWindowTitlebar(),
+        sidebarWidth: 280,
+        sidebarToolbar: const ZenitToolbar(
+          title: ZenitWindowTitle(fallback: "ZenitUI Example"),
+          backgroundColor: Colors.transparent,
+        ),
+        pageToolbarBuilder: (context, index) => ZenitToolbar(
+          height: 48,
+          title: examplePages[index].titleBuilder(context),
+          backgroundColor: Colors.transparent,
+        ),
         length: examplePages.length,
         destinationBuilder: (context, index, selected) => ZenitLayoutTile(
           title: examplePages[index].titleBuilder(context),
           leading: examplePages[index].iconBuilder(context, selected),
           selected: selected,
         ),
         pageBuilder: (context, index) => examplePages[index].pageBuilder(context),
-        globalFloatingActionButton: FloatingActionButton.extended(
+        globalFloatingActionButton: FloatingActionButton(
           onPressed: () => setState(() => (themeMode < themeModes.length - 1) ? themeMode++ : themeMode = 0),
-          label: Text(resolveThemeName()),
-          icon: Icon(resolveThemeIcon()),
+          tooltip: resolveThemeName(),
+          child: Icon(resolveThemeIcon()),
         ),
       ),
     );

example/lib/pages.dart

@@ -1,46 +1,70 @@
-import 'package:flutter/material.dart';
 import 'package:zenit_ui/zenit_ui.dart';
+import 'package:zenit_ui_example/pages/button.dart';
 import 'package:zenit_ui_example/pages/checkbox.dart';
+import 'package:zenit_ui_example/pages/color_scheme.dart';
+import 'package:zenit_ui_example/pages/context_menu.dart';
+import 'package:zenit_ui_example/pages/dialog.dart';
 import 'package:zenit_ui_example/pages/icon_button.dart';
 import 'package:zenit_ui_example/pages/list_titles.dart';
 import 'package:zenit_ui_example/pages/radio_button.dart';
+import 'package:zenit_ui_example/pages/slider.dart';
+import 'package:zenit_ui_example/pages/sub_pages.dart';
 import 'package:zenit_ui_example/pages/switch.dart';
 import 'package:zenit_ui_example/pages/tab_view.dart';
 import 'package:zenit_ui_example/pages/text.dart';
-import 'package:zenit_ui_example/pages/zenit_components.dart';
+import 'package:zenit_ui_example/pages/text_field.dart';
+import 'package:zenit_ui_example/pages/welcome.dart';
 
 final examplePages = <ZenitLayoutItem>[
   ZenitLayoutItem(
     titleBuilder: (context) => const Text("Welcome"),
-    pageBuilder: (context) => const ZenitComponentsExample(),
+    pageBuilder: (context) => const ZenitWelcome(),
     iconBuilder: (context, selected) => Icon(selected ? Icons.info_rounded : Icons.info_outline_rounded),
   ),
   ZenitLayoutItem(
-    titleBuilder: (context) => const Text("ZenitSwitch"),
+    titleBuilder: (context) => const Text("Button"),
+    pageBuilder: (context) => const ZenitButtonExample(),
+    iconBuilder: (context, selected) => Icon(selected ? Icons.touch_app_rounded : Icons.touch_app_outlined),
+  ),
+  ZenitLayoutItem(
+    titleBuilder: (context) => const Text("Switch"),
     pageBuilder: (context) => const ZenitSwitchExample(),
     iconBuilder: (context, selected) => Icon(selected ? Icons.toggle_on_rounded : Icons.toggle_off_rounded),
   ),
   ZenitLayoutItem(
-    titleBuilder: (context) => const Text("ZenitCheckbox"),
+    titleBuilder: (context) => const Text("Checkbox"),
     pageBuilder: (context) => const ZenitCheckboxExample(),
     iconBuilder: (context, selected) => Icon(selected ? Icons.check_box_rounded : Icons.check_box_outlined),
   ),
   ZenitLayoutItem(
-    titleBuilder: (context) => const Text("ZenitRadioButton"),
+    titleBuilder: (context) => const Text("RadioButton"),
     pageBuilder: (context) => const ZenitRadioButtonExample(),
     iconBuilder: (context, selected) =>
         Icon(selected ? Icons.radio_button_checked_rounded : Icons.radio_button_off_rounded),
   ),
   ZenitLayoutItem(
-    titleBuilder: (context) => const Text("ZenitIconButton"),
+    titleBuilder: (context) => const Text("TextField"),
+    pageBuilder: (context) => const ZenitTextFieldExample(),
+    iconBuilder: (context, selected) => const Icon(Icons.text_format_rounded),
+  ),
+  ZenitLayoutItem(
+    titleBuilder: (context) => const Text("IconButton"),
     pageBuilder: (context) => const ZenitIconButtonExample(),
     iconBuilder: (context, selected) =>
         Icon(selected ? Icons.emoji_emotions_rounded : Icons.emoji_emotions_outlined),
   ),
   ZenitLayoutItem(
     titleBuilder: (context) => const Text("Tab View"),
     pageBuilder: (context) => const ZenitTabViewExample(),
-    iconBuilder: (context, selected) => Icon(selected ? Icons.tab_rounded : Icons.tab_unselected_rounded),
+    iconBuilder: (context, selected) => Transform.flip(
+      flipX: true,
+      child: Icon(selected ? Icons.tab_rounded : Icons.tab_unselected_rounded),
+    ),
+  ),
+  ZenitLayoutItem(
+    titleBuilder: (context) => const Text("Context Menu"),
+    pageBuilder: (context) => const ZenitContextMenuExample(),
+    iconBuilder: (context, selected) => Icon(selected ? Icons.menu_open_rounded : Icons.menu_rounded),
   ),
   ZenitLayoutItem(
     titleBuilder: (context) => const Text("List Tiles"),
@@ -53,4 +77,25 @@
     iconBuilder: (context, selected) =>
         Icon(selected ? Icons.text_fields_rounded : Icons.text_fields_outlined),
   ),
+  ZenitLayoutItem(
+    titleBuilder: (context) => const Text("Colors"),
+    pageBuilder: (context) => const ColorSchemeExamplePage(),
+    iconBuilder: (context, selected) => Icon(selected ? Icons.color_lens_rounded : Icons.color_lens_outlined),
+  ),
+  ZenitLayoutItem(
+    titleBuilder: (context) => const Text("Sub pages"),
+    pageBuilder: (context) => const SubPagesExample(),
+    iconBuilder: (context, selected) => const Icon(Icons.subtitles_rounded),
+  ),
+  ZenitLayoutItem(
+    titleBuilder: (context) => const Text("Dialog"),
+    pageBuilder: (context) => const DialogExample(),
+    iconBuilder: (context, selected) => const Icon(Icons.smart_display_outlined),
+  ),
+  ZenitLayoutItem(
+    titleBuilder: (context) => const Text("Slider"),
+    pageBuilder: (context) => const SliderExample(),
+    iconBuilder: (contex, selected) =>
+        Icon(selected ? Icons.linear_scale_rounded : Icons.linear_scale_outlined),
+  )
 ];

example/lib/pages/button.dart

@@ -0,0 +1,116 @@
+import 'package:gap/gap.dart';
+import 'package:zenit_ui/zenit_ui.dart';
+import 'package:zenit_ui_example/title.dart';
+
+class ZenitButtonExample extends StatefulWidget {
+  const ZenitButtonExample({super.key});
+
+  @override
+  State<ZenitButtonExample> createState() => _ZenitButtonExampleState();
+}
+
+bool val = true;
+
+class _ZenitButtonExampleState extends State<ZenitButtonExample> {
+  @override
+  Widget build(BuildContext context) {
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.center,
+      children: [
+        const Gap(8),
+        const ExampleTitle("ZenitButton"),
+        const Gap(24),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: 160,
+              child: ZenitPrimaryButton(
+                onPressed: () => print("PrimaryButton was clicked"),
+                child: const Text("PrimaryButton"),
+              ),
+            ),
+            const Gap(12),
+            SizedBox(
+              width: 160,
+              child: ZenitSecondaryButton(
+                onPressed: () => print("FilledButton was clicked"),
+                child: const Text("SecondaryButton"),
+              ),
+            ),
+          ],
+        ),
+        const Gap(12),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
+          children: [
+            SizedBox(
+              width: 160,
+              child: ZenitTextButton(
+                onPressed: () => print("FilledButton was clicked"),
+                child: const Text("TextButton"),
+              ),
+            ),
+          ],
+        ),
+        const Gap(24),
+        const ExampleSubtitle("Custom ListTiles with ZenitButtons"),
+        const Gap(8),
+        SizedBox(
+          width: MediaQuery.of(context).size.width * 0.4 + 256,
+          child: ZenitSection(
+            child: Column(
+              children: [
+                ListTile(
+                  title: const Text(
+                    "A ListTile with a ZenitPrimaryButton",
+                  ),
+                  subtitle: const Text(
+                    "This is the subtitle",
+                  ),
+                  trailing: SizedBox(
+                    width: 160,
+                    child: ZenitPrimaryButton(
+                      onPressed: () => print("Button pressed"),
+                      child: const Text("Primary Button"),
+                    ),
+                  ),
+                ),
+                ListTile(
+                  title: const Text(
+                    "A ListTile with a ZenitSecondaryButton",
+                  ),
+                  subtitle: const Text(
+                    "This is the subtitle",
+                  ),
+                  trailing: SizedBox(
+                    width: 160,
+                    child: ZenitSecondaryButton(
+                      onPressed: () => print("Button pressed"),
+                      child: const Text("Secondary Button"),
+                    ),
+                  ),
+                ),
+                ListTile(
+                  title: const Text(
+                    "A ListTile with a ZenitTextButton",
+                  ),
+                  subtitle: const Text(
+                    "This is the subtitle",
+                  ),
+                  trailing: SizedBox(
+                    width: 160,
+                    child: ZenitTextButton(
+                      onPressed: () => print("Button pressed"),
+                      child: const Text("Text Button"),
+                    ),
+                  ),
+                ),
+              ],
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+}

example/lib/pages/checkbox.dart

@@ -1,6 +1,6 @@
-import 'package:flutter/cupertino.dart';
 import 'package:gap/gap.dart';
 import 'package:zenit_ui/zenit_ui.dart';
+import 'package:zenit_ui_example/title.dart';
 
 class ZenitCheckboxExample extends StatefulWidget {
   const ZenitCheckboxExample({super.key});
@@ -15,9 +15,14 @@ class _ZenitCheckboxExampleState extends State<ZenitCheckboxExample> {
   final List<bool?> _checkboxValues = [true, null, false];
   @override
   Widget build(BuildContext context) {
-    return Row(
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.center,
       children: [
-        Column(
+        const Gap(8),
+        const ExampleTitle("ZenitCheckbox"),
+        const Gap(24),
+        Row(
+          mainAxisAlignment: MainAxisAlignment.center,
           children: [
             for (int i = 0; i < _checkboxValues.length; i++) ...[
               ZenitCheckbox(
@@ -29,7 +34,38 @@ class _ZenitCheckboxExampleState extends State<ZenitCheckboxExample> {
             ]
           ],
         ),
+        const Gap(24),
+        const ExampleSubtitle("ZenitCheckboxListTile"),
+        const Gap(8),
+        SizedBox(
+          width: MediaQuery.of(context).size.width * 0.4 + 256,
+          child: ZenitSection(
+            child: Column(
+              children: [
+                for (int i = 0; i < _checkboxValues.length; i++) ...[
+                  ZenitCheckboxListTile(
+                    title: const Text("ZenitCheckboxListTile"),
+                    subtitle: Text("ZenitCheckboxListTile is ${resolve(_checkboxValues[i])}"),
+                    value: _checkboxValues[i],
+                    onChanged: (value) => setState(() => _checkboxValues[i] = value),
+                    tristate: true,
+                  )
+                ],
+              ],
+            ),
+          ),
+        ),
       ],
     );
   }
+
+  String resolve(bool? val) {
+    if (val == null) {
+      return "intermedate";
+    } else if (val) {
+      return "checked";
+    } else {
+      return "unchecked";
+    }
+  }
 }