fix: Added extra components & a more complete UI library

CHANGELOG.md

@@ -1,3 +1,29 @@
+# 0.0.3
+
+## Feat
+
+- Added a couple new components:
+
+```
+    ImpaktfullListItem
+    ImpaktfullListItemTitle
+    ImpaktfullSelectableListItem
+    ImpaktfullSeparatedColumn
+```
+
+- Added a couple new default icons:
+
+```
+    assets/icons/check.svg
+    assets/icons/chevron_right.svg
+```
+
+- Added support for custom durations 
+
+## Refactor
+
+- Some onCard is now onCardPrimary and we added onCardSecondary
+
 # 0.0.2
 
 ## Feat

README.md

@@ -29,9 +29,21 @@ Components are always prefixed with `Impaktfull` to avoid conflicts with other l
 - ImpaktfullScreen
 - ImpaktfullSeparator
 - ImpaktfullTouchFeedback
+- ImpaktfullListItem
+- ImpaktfullListItemTitle
+- ImpaktfullSelectableListItem
+- ImpaktfullSeparatedColumn
 
 Many more to come in the future, always with the focus on minimizing maintenance and maximizing a recognizable UI/brand for Impaktfull
 
+## Default Icons
+
+These icons should be added to your assets folder to use the default icons. (in your own project)
+
+- assets/icons/arrow_left.svg
+- assets/icons/check.svg
+- assets/icons/chevron_right.svg
+
 ## License
 
 You are free to use this library as long as you give credit to Impaktfull. You can use it for commercial and non-commercial projects.  See the [LICENSE](LICENSE) file for more information.

example/lib/main.dart

@@ -1,7 +1,9 @@
 import 'package:impaktfull_ui/impaktfull_ui.dart';
 import 'package:impaktfull_ui_example/src/screen/home_screen.dart';
 
-void main() => runApp(const ImpaktfullApp(
-      title: 'Impaktfull UI Example',
-      home: HomeScreen(),
-    ));
+void main() => runApp(
+      const ImpaktfullApp(
+        title: 'Impaktfull UI Example',
+        home: HomeScreen(),
+      ),
+    );

example/lib/src/screen/components/buttons_screen.dart

@@ -8,26 +8,28 @@ class ButtonsScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ImpaktfullScreen(
-      title: 'Components - Buttons',
-      onBackTapped: () => Navigator.of(context).pop(),
-      child: ImpaktfullListView(
-        children: [
-          ImpaktfullButton.primary(
-            label: 'Primary Button',
-            onTap: () => SnackyUtil.show('On Primary tapped'),
-          ),
-          const SizedBox(height: 8),
-          ImpaktfullButton.secondary(
-            label: 'Secondary Button',
-            onTap: () => SnackyUtil.show('On Secondary tapped'),
-          ),
-          const SizedBox(height: 8),
-          ImpaktfullButton.accent(
-            label: 'Accent Button',
-            onTap: () => SnackyUtil.show('On Accent tapped'),
-          ),
-        ],
+    return ImpaktfullThemeLocalizer(
+      builder: (context, teme) => ImpaktfullScreen(
+        title: 'Components - Buttons',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: ImpaktfullListView(
+          children: [
+            ImpaktfullButton.primary(
+              label: 'Primary Button',
+              onTap: () => SnackyUtil.show('On Primary tapped'),
+            ),
+            const SizedBox(height: 8),
+            ImpaktfullButton.secondary(
+              label: 'Secondary Button',
+              onTap: () => SnackyUtil.show('On Secondary tapped'),
+            ),
+            const SizedBox(height: 8),
+            ImpaktfullButton.accent(
+              label: 'Accent Button',
+              onTap: () => SnackyUtil.show('On Accent tapped'),
+            ),
+          ],
+        ),
       ),
     );
   }

example/lib/src/screen/components/list_item_screen.dart

@@ -0,0 +1,44 @@
+import 'package:impaktfull_ui/impaktfull_ui.dart';
+import 'package:impaktfull_ui_example/src/util/snacky_uitl.dart';
+
+class ListItemScreen extends StatelessWidget {
+  const ListItemScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - List Item',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: ImpaktfullListView(
+          children: [
+            const ImpaktfullListItem(title: 'Some title'),
+            const ImpaktfullListItem(
+              title: 'Some title',
+              subTitle: 'Some subtitle',
+            ),
+            ImpaktfullListItem(
+              title: 'Some title',
+              subTitle: 'Some subtitle',
+              onTap: () => SnackyUtil.show('on tap'),
+            ),
+            ImpaktfullListItem(
+              title: 'Some title',
+              subTitle: 'Some subtitle',
+              onAsyncTap: () async {
+                await Future.delayed(const Duration(seconds: 2));
+              },
+            ),
+            ImpaktfullListItem(
+              title: 'Some title',
+              subTitle: 'Some subtitle',
+              leadingAsset: theme.assets.icons.check,
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/src/screen/components/list_item_title_screen.dart

@@ -0,0 +1,22 @@
+import 'package:impaktfull_ui/impaktfull_ui.dart';
+
+class ListItemTitleScreen extends StatelessWidget {
+  const ListItemTitleScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - List Item Title',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: const ImpaktfullListView(
+          children: [
+            ImpaktfullListItemTitle(title: 'Some title'),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/src/screen/components/listview_screen.dart

@@ -10,29 +10,31 @@ class ListViewScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ImpaktfullScreen(
-      title: 'Components - ListView',
-      onBackTapped: () => Navigator.of(context).pop(),
-      child: ImpaktfullListView(
-        children: [
-          ImpaktfullButton.primary(
-            label: 'Children',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(
-                builder: (context) => const ListViewChildren())),
-          ),
-          const SizedBox(height: 8),
-          ImpaktfullButton.primary(
-            label: 'Item Builder',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(
-                builder: (context) => const ListViewItemBuilder())),
-          ),
-          const SizedBox(height: 8),
-          ImpaktfullButton.primary(
-            label: 'Item Separated Builder',
-            onTap: () => Navigator.of(context).push(MaterialPageRoute(
-                builder: (context) => const ListViewItemSeparatedBuilder())),
-          ),
-        ],
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - ListView',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: ImpaktfullListView(
+          children: [
+            ImpaktfullButton.primary(
+              label: 'Children',
+              onTap: () => Navigator.of(context).push(MaterialPageRoute(
+                  builder: (context) => const ListViewChildren())),
+            ),
+            const SizedBox(height: 8),
+            ImpaktfullButton.primary(
+              label: 'Item Builder',
+              onTap: () => Navigator.of(context).push(MaterialPageRoute(
+                  builder: (context) => const ListViewItemBuilder())),
+            ),
+            const SizedBox(height: 8),
+            ImpaktfullButton.primary(
+              label: 'Item Separated Builder',
+              onTap: () => Navigator.of(context).push(MaterialPageRoute(
+                  builder: (context) => const ListViewItemSeparatedBuilder())),
+            ),
+          ],
+        ),
       ),
     );
   }

example/lib/src/screen/components/loading_indicator_screen.dart

@@ -7,13 +7,15 @@ class LoadingIndicatorScreen extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return ImpaktfullScreen(
-      title: 'Components - Loading Indicator',
-      onBackTapped: () => Navigator.of(context).pop(),
-      child: const ImpaktfullListView(
-        children: [
-          ImpaktfullLoadingIndicator(),
-        ],
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - Loading Indicator',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: const ImpaktfullListView(
+          children: [
+            ImpaktfullLoadingIndicator(),
+          ],
+        ),
       ),
     );
   }

example/lib/src/screen/components/selectable_list_item_screen.dart

@@ -0,0 +1,38 @@
+import 'package:impaktfull_ui/impaktfull_ui.dart';
+import 'package:impaktfull_ui_example/src/util/snacky_uitl.dart';
+
+class SelectableListItemScreen extends StatelessWidget {
+  const SelectableListItemScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - Selectable List Item',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: ImpaktfullListView(
+          children: [
+            ImpaktfullSelectableListItem(
+              title: 'Some title',
+              isSelected: true,
+              onTap: () => SnackyUtil.show('On tap'),
+            ),
+            ImpaktfullSelectableListItem(
+              title: 'Some title',
+              isSelected: false,
+              onTap: () => SnackyUtil.show('On tap'),
+            ),
+            ImpaktfullSelectableListItem(
+              title: 'Some title',
+              isSelected: true,
+              leadingAsset: theme.assets.icons.arrowLeft,
+              onTap: () => SnackyUtil.show('On tap'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/src/screen/components/separated_column_screen.dart

@@ -0,0 +1,41 @@
+import 'package:impaktfull_ui/impaktfull_ui.dart';
+
+class SeparatedColumnScreen extends StatelessWidget {
+  const SeparatedColumnScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - SeparatedColumn',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: const ImpaktfullListView(
+          children: [
+            ImpaktfullSeparatedColumn(
+              children: [
+                Text('Item 1'),
+                Text('Item 2'),
+                Text('Item 3'),
+                Text('Item 4'),
+                Text('Item 5'),
+              ],
+            ),
+            SizedBox(height: 8),
+            ImpaktfullSeparatedColumn(
+              type: ImpaktfullSeparatorType.card,
+              children: [
+                Text('Item 1'),
+                Text('Item 2'),
+                Text('Item 3'),
+                Text('Item 4'),
+                Text('Item 5'),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}