fix: Added a lot of new components & bugfixes

CHANGELOG.md

@@ -1,3 +1,28 @@
+# 0.0.20
+
+## Feat
+
+- Readme added pub.dev badge
+- Example better icons & assets
+- Added ImpaktfullCard
+- Added ImpaktfullDialog
+- Added ImpaktfullFab
+- Added ImpaktfullPagination
+- Added ImpaktfullScreen
+- ImpaktfullBottomNavigationItem supports selected icon assets
+- ImpaktfullListView refresh action & loading state
+- ImpaktfullListView pull to refresh
+- ImpaktfullRefreshIndicator
+- ImpaktfullApp now supports showing or hiding the debugFlag
+- ImpaktfullButton can have a loading state with `onAsyncTap`
+- ImpaktfullTouchFeedback now has actual feedback based on the platform
+- ImpaktfullTheme now has more shadow options (`card`, `selectedCard`, `bottomNavigation`, `button`)
+- ImpaktfullTheme now has border options (`card`, `selectedCard`)
+
+## Fix
+- ImpaktfullDatePicker now uses the borderRadius from the theme
+- Small disposed errors in ImpaktfullListItem
+
 # 0.0.18 - 0.0.19
 
 ## Fix

README.md

@@ -11,6 +11,8 @@ This UI library was built to have a simple way to build UIs for Impaktfull. This
 
 # Usage
 
+[![pub package](https://img.shields.io/pub/v/impaktfull_ui.svg)](https://pub.dartlang.org/packages/impaktfull_ui)
+
 ## Setup
 
 - Setup your theme (colors, textStyles, shadows, dimens, assets)

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

@@ -1,4 +1,5 @@
 import 'package:impaktfull_ui/impaktfull_ui.dart';
+import 'package:impaktfull_ui_example/src/util/example_assets.dart';
 
 class BottomNavigationScreen extends StatefulWidget {
   const BottomNavigationScreen({
@@ -19,24 +20,50 @@ class _BottomNavigationScreenState extends State<BottomNavigationScreen> {
         title: 'Components - BottomNavigation',
         onBackTapped: () => Navigator.of(context).pop(),
         child: ImpaktfullListView(
+          spacing: 8,
           children: [
             ImpaktfullBottomNavigation(
               items: [
                 ImpaktfullBottomNavigationItem(
-                  label: 'Label 1',
-                  svgIcon: theme.assets.icons.chevronRight,
+                  label: 'Home',
+                  svgIcon: ExampleAssets.home,
                   isSelected: _selectedIndex == 0,
                   onTap: () => setState(() => _selectedIndex = 0),
                 ),
                 ImpaktfullBottomNavigationItem(
-                  label: 'Label 2',
-                  svgIcon: theme.assets.icons.chevronRight,
+                  label: 'Search',
+                  svgIcon: ExampleAssets.search,
                   isSelected: _selectedIndex == 1,
                   onTap: () => setState(() => _selectedIndex = 1),
                 ),
                 ImpaktfullBottomNavigationItem(
-                  label: 'Label 3',
-                  svgIcon: theme.assets.icons.chevronRight,
+                  label: 'Settings',
+                  svgIcon: ExampleAssets.settings,
+                  isSelected: _selectedIndex == 2,
+                  onTap: () => setState(() => _selectedIndex = 2),
+                ),
+              ],
+            ),
+            ImpaktfullBottomNavigation(
+              items: [
+                ImpaktfullBottomNavigationItem(
+                  label: 'Home',
+                  svgIcon: ExampleAssets.home,
+                  svgIconSelected: ExampleAssets.homeSelected,
+                  isSelected: _selectedIndex == 0,
+                  onTap: () => setState(() => _selectedIndex = 0),
+                ),
+                ImpaktfullBottomNavigationItem(
+                  label: 'Search',
+                  svgIcon: ExampleAssets.search,
+                  svgIconSelected: ExampleAssets.searchSelected,
+                  isSelected: _selectedIndex == 1,
+                  onTap: () => setState(() => _selectedIndex = 1),
+                ),
+                ImpaktfullBottomNavigationItem(
+                  label: 'Settings',
+                  svgIcon: ExampleAssets.settings,
+                  svgIconSelected: ExampleAssets.settingsSelected,
                   isSelected: _selectedIndex == 2,
                   onTap: () => setState(() => _selectedIndex = 2),
                 ),

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

@@ -0,0 +1,53 @@
+import 'package:impaktfull_ui/impaktfull_ui.dart';
+
+class CardScreen extends StatelessWidget {
+  const CardScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - Card',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: ImpaktfullListView(
+          spacing: 8,
+          children: [
+            ImpaktfullCard(
+              child: ImpaktfullAutoLayout.vertical(
+                spacing: 8,
+                children: [
+                  Text(
+                    'Some normal title',
+                    style: theme.textStyles.onCardPrimary.title,
+                  ),
+                  Text(
+                    'And this will be some body text that is a bit longer than the title',
+                    style: theme.textStyles.onCardPrimary.body,
+                  ),
+                ],
+              ),
+            ),
+            ImpaktfullCard(
+              isSelected: true,
+              child: ImpaktfullAutoLayout.vertical(
+                spacing: 8,
+                children: [
+                  Text(
+                    'Some normal title (selected)',
+                    style: theme.textStyles.onCardPrimary.title,
+                  ),
+                  Text(
+                    'And this will be some body text that is a bit longer than the title',
+                    style: theme.textStyles.onCardPrimary.body,
+                  ),
+                ],
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,81 @@
+import 'package:impaktfull_ui/impaktfull_ui.dart';
+import 'package:impaktfull_ui_example/src/util/snacky_uitl.dart';
+
+class DialogScreen extends StatelessWidget {
+  const DialogScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - Dialog',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: ImpaktfullListView(
+          spacing: 8,
+          children: [
+            ImpaktfullButton.accent(
+              label: 'Show dialog',
+              onAsyncTap: () async {
+                showDialog(
+                  context: context,
+                  builder: (context) => ImpaktfullDialog(
+                    child: Text(
+                      'some body',
+                      style: theme.textStyles.onCardPrimary.body,
+                    ),
+                  ),
+                );
+              },
+            ),
+            ImpaktfullButton.accent(
+              label: 'Show dialog (with title & body)',
+              onAsyncTap: () async {
+                final result = await showDialog(
+                  context: context,
+                  builder: (context) => ImpaktfullDialog(
+                    title: 'Some title',
+                    body: 'Some body',
+                    onSecondaryTapped: () => Navigator.of(context).pop(false),
+                    onPrimaryTapped: () => Navigator.of(context).pop(true),
+                  ),
+                );
+                SnackyUtil.show('Result of dialog: `$result`');
+              },
+            ),
+            ImpaktfullButton.accent(
+              label: 'Show dialog (with result)',
+              onAsyncTap: () async {
+                final result = await showDialog(
+                  context: context,
+                  builder: (context) => ImpaktfullDialog(
+                    onSecondaryTapped: () => Navigator.of(context).pop(false),
+                    onPrimaryTapped: () => Navigator.of(context).pop(true),
+                    child: Text(
+                      'some body',
+                      style: theme.textStyles.onCardPrimary.body,
+                    ),
+                  ),
+                );
+                SnackyUtil.show('Result of dialog: `$result`');
+              },
+            ),
+            ImpaktfullButton.accent(
+              label: 'Show date time picker dialog',
+              onAsyncTap: () async {
+                final result = await showDialog(
+                  context: context,
+                  builder: (context) => ImpaktfullDateTimePickerDialog(
+                    selectedDateTime: DateTime.now(),
+                  ),
+                );
+                SnackyUtil.show('Result of date time picker dialog: `$result`');
+              },
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

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

@@ -0,0 +1,30 @@
+import 'package:impaktfull_ui/impaktfull_ui.dart';
+import 'package:impaktfull_ui_example/src/util/example_assets.dart';
+import 'package:impaktfull_ui_example/src/util/snacky_uitl.dart';
+
+class FabScreen extends StatelessWidget {
+  const FabScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ImpaktfullThemeLocalizer(
+      builder: (context, theme) => ImpaktfullScreen(
+        title: 'Components - Fab',
+        onBackTapped: () => Navigator.of(context).pop(),
+        child: ImpaktfullListView(
+          spacing: 8,
+          children: [
+            Center(
+              child: ImpaktfullFab(
+                asset: ExampleAssets.add,
+                onTap: () => SnackyUtil.show('OnTap'),
+              ),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}

example/lib/src/screen/components/listview/listview_childeren_screen.dart

@@ -1,7 +1,7 @@
 import 'package:impaktfull_ui/impaktfull_ui.dart';
 
-class ListViewChildren extends StatelessWidget {
-  const ListViewChildren({
+class ListViewChildrenScreen extends StatelessWidget {
+  const ListViewChildrenScreen({
     super.key,
   });
 
@@ -10,8 +10,9 @@ class ListViewChildren extends StatelessWidget {
     return ImpaktfullScreen(
       title: 'ListView - Children',
       onBackTapped: () => Navigator.of(context).pop(),
-      child: const ImpaktfullListView(
-        children: [
+      child: ImpaktfullListView(
+        onRefresh: () async => Future.delayed(const Duration(seconds: 2)),
+        children: const [
           Text('Child 1'),
           Text('Child 2'),
           Text('Child 3'),

example/lib/src/screen/components/listview/listview_empty_screen.dart

@@ -0,0 +1,22 @@
+import 'package:impaktfull_ui/impaktfull_ui.dart';
+
+class ListViewEmptyScreen extends StatelessWidget {
+  const ListViewEmptyScreen({
+    super.key,
+  });
+
+  @override
+  Widget build(BuildContext context) {
+    return ImpaktfullScreen(
+      title: 'ListView - Empty',
+      onBackTapped: () => Navigator.of(context).pop(),
+      child: ImpaktfullListView.builder(
+        onRefresh: () async => Future.delayed(const Duration(seconds: 2)),
+        items: const [],
+        itemBuilder: (context, item) => Container(),
+        noDataLabel: 'No data',
+        refreshBtnLabel: 'Probeer opnieuw',
+      ),
+    );
+  }
+}

example/lib/src/screen/components/listview/listview_item_builder_screen.dart

@@ -1,7 +1,7 @@
 import 'package:impaktfull_ui/impaktfull_ui.dart';
 
-class ListViewItemBuilder extends StatelessWidget {
-  const ListViewItemBuilder({
+class ListViewItemBuilderScreen extends StatelessWidget {
+  const ListViewItemBuilderScreen({
     super.key,
   });
 
@@ -11,6 +11,7 @@ class ListViewItemBuilder extends StatelessWidget {
       title: 'ListView - Item Builder',
       onBackTapped: () => Navigator.of(context).pop(),
       child: ImpaktfullListView.builder(
+        onRefresh: () async => Future.delayed(const Duration(seconds: 2)),
         items: List.generate(100, (index) => 'Child ${index + 1}'),
         itemBuilder: (context, item) => Text(item),
         noDataLabel: 'No Data found',

example/lib/src/screen/components/listview/listview_item_seperated_builder_screen.dart

@@ -1,7 +1,7 @@
 import 'package:impaktfull_ui/impaktfull_ui.dart';
 
-class ListViewItemSeparatedBuilder extends StatelessWidget {
-  const ListViewItemSeparatedBuilder({
+class ListViewItemSeparatedBuilderScreen extends StatelessWidget {
+  const ListViewItemSeparatedBuilderScreen({
     super.key,
   });
 
@@ -11,6 +11,7 @@ class ListViewItemSeparatedBuilder extends StatelessWidget {
       title: 'ListView - Item Separated Builder',
       onBackTapped: () => Navigator.of(context).pop(),
       child: ImpaktfullListView.separated(
+        onRefresh: () async => Future.delayed(const Duration(seconds: 2)),
         separatorType: ImpaktfullSeparatorType.canvas,
         items: List.generate(100, (index) => 'Child ${index + 1}'),
         itemBuilder: (context, item) => Text(item),