feat: add AvailabilityEntryWIdget for showing a button to start the userstory

README.md

@@ -35,6 +35,15 @@ There is also a function for pushing the availability screen to the navigation s
 openAvailabilitiesForUser(context, "userIdOfTheUser", AvailabilityOptions());
 ```
 
+You can also use the AvailabilityEntryWidget to show a button with an icon and some styling options that starts the userstory:
+
+```dart
+AvailabilityEntryWidget(
+    userId: "userIdOfTheUser",
+    options: AvailabilityOptions(),
+),
+```
+
 ## Issues
 
 Please file any issues, bugs or feature request as an issue on our [GitHub](https://github.com/Iconica-Development/flutter_availability) page. Commercial support is available if you need help with integration with your app or services. You can contact us at [support@iconica.nl](mailto:support@iconica.nl).

apps/example/lib/main.dart

@@ -29,10 +29,7 @@ class App extends StatelessWidget {
         ],
         theme: ThemeData.light(),
         darkTheme: ThemeData.dark(),
-        home: AvailabilityUserStory(
-          userId: "",
-          options: AvailabilityOptions(),
-        ),
+        home: const Home(),
       );
 }
 
@@ -40,16 +37,10 @@ class Home extends StatelessWidget {
   const Home({super.key});
 
   @override
-  Widget build(BuildContext context) => Scaffold(
-        body: const Center(
-          child: Text("Hello World"),
-        ),
-        floatingActionButton: FloatingActionButton(
-          onPressed: () async {
-            debugPrint("starting availability user story");
-            await openAvailabilitiesForUser(context, "", null);
-            debugPrint("finishing availability user story");
-          },
+  Widget build(BuildContext context) => const Scaffold(
+        body: Center(
+          child: Text("Start the user story by tapping the button below"),
         ),
+        floatingActionButton: AvailabilityEntryWidget(),
       );
 }

packages/flutter_availability/lib/flutter_availability.dart

@@ -3,6 +3,7 @@ library flutter_availability;
 
 export "package:flutter_availability_data_interface/flutter_availability_data_interface.dart";
 
+export "src/availability_entry_widget.dart";
 export "src/config/availability_options.dart";
 export "src/config/availability_translations.dart";
 export "src/service/errors.dart";

packages/flutter_availability/lib/src/availability_entry_widget.dart

@@ -0,0 +1,61 @@
+import "package:flutter/material.dart";
+import "package:flutter_availability/src/config/availability_options.dart";
+import "package:flutter_availability/src/userstories.dart";
+
+/// A widget representing an entry point for the Availability user story.
+class AvailabilityEntryWidget extends StatelessWidget {
+  /// Constructs a [AvailabilityEntryWidget].
+  const AvailabilityEntryWidget({
+    this.options,
+    this.onTap,
+    this.userId = "",
+    this.widgetSize = 75,
+    this.backgroundColor = Colors.grey,
+    this.icon = Icons.event_available_outlined,
+    this.iconColor = Colors.black,
+    super.key,
+  });
+
+  /// The user id for which the availability should be displayed.
+  final String userId;
+
+  /// Options to configure the availability user story.
+  final AvailabilityOptions? options;
+
+  /// Background color of the widget.
+  final Color backgroundColor;
+
+  /// Size of the widget.
+  final double widgetSize;
+
+  /// Callback function triggered when the widget is tapped. If this is not null
+  /// the callback will be triggered otherwise the availability user story will
+  /// be opened
+  final VoidCallback? onTap;
+
+  /// Icon to be displayed.
+  final IconData icon;
+
+  /// Color of the icon.
+  final Color iconColor;
+
+  @override
+  Widget build(BuildContext context) => InkWell(
+        onTap: () async {
+          if (onTap != null) {
+            onTap?.call();
+          } else {
+            await openAvailabilitiesForUser(context, "", options);
+          }
+        },
+        highlightColor: Colors.transparent,
+        hoverColor: Colors.transparent,
+        child: Container(
+          width: widgetSize,
+          height: widgetSize,
+          decoration:
+              BoxDecoration(shape: BoxShape.circle, color: backgroundColor),
+          child: Icon(icon, color: iconColor, size: widgetSize / 1.5),
+        ),
+      );
+}