Merge pull request #13 from Nuxify/feature/provide-other-widgets

feat: provide other widgets

ios/Runner.xcodeproj/project.pbxproj

@@ -510,7 +510,7 @@
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				GENERATE_INFOPLIST_FILE = YES;
-				MARKETING_VERSION = 1.1.0;
+				MARKETING_VERSION = 1.2.0;
 				PRODUCT_BUNDLE_IDENTIFIER = com.example.nuxifyWidgetbook.RunnerTests;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
@@ -528,7 +528,7 @@
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				GENERATE_INFOPLIST_FILE = YES;
-				MARKETING_VERSION = 1.1.0;
+				MARKETING_VERSION = 1.2.0;
 				PRODUCT_BUNDLE_IDENTIFIER = com.example.nuxifyWidgetbook.RunnerTests;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_VERSION = 5.0;
@@ -544,7 +544,7 @@
 				CODE_SIGN_STYLE = Automatic;
 				CURRENT_PROJECT_VERSION = 1;
 				GENERATE_INFOPLIST_FILE = YES;
-				MARKETING_VERSION = 1.1.0;
+				MARKETING_VERSION = 1.2.0;
 				PRODUCT_BUNDLE_IDENTIFIER = com.example.nuxifyWidgetbook.RunnerTests;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SWIFT_VERSION = 5.0;

lib/indicators/widget_loader.dart

@@ -0,0 +1,67 @@
+import 'package:flutter/material.dart';
+import 'package:shimmer/shimmer.dart';
+
+/// These are the static widgets that we're gonna use as skeleton loaders.
+/// We use the Text Widget with dummy values to emulate the the exact dimensions of specific widgets
+/// The text values won't show up because they are overlapped by the shimmer effect. It's just for height and width purposes.
+
+const Duration fadeInDuration = Duration(milliseconds: 500);
+
+class CardExpandedLoader extends StatelessWidget {
+  const CardExpandedLoader({
+    required this.height,
+    this.baseColor = const Color(0xFF607D8B),
+    this.highlightColor = const Color(0xFFCFD8DC),
+    super.key,
+  });
+  final double height;
+  final Color baseColor;
+  final Color highlightColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Shimmer.fromColors(
+      baseColor: baseColor,
+      highlightColor: highlightColor,
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          color: baseColor.withOpacity(0.1),
+        ),
+        margin: const EdgeInsets.only(right: 8),
+        height: height,
+      ),
+    );
+  }
+}
+
+class CardLoader extends StatelessWidget {
+  const CardLoader({
+    required this.height,
+    required this.width,
+    this.baseColor = const Color(0xFF607D8B),
+    this.highlightColor = const Color(0xFFCFD8DC),
+    super.key,
+  });
+  final double height;
+  final double width;
+  final Color baseColor;
+  final Color highlightColor;
+
+  @override
+  Widget build(BuildContext context) {
+    return Shimmer.fromColors(
+      baseColor: baseColor,
+      highlightColor: highlightColor,
+      child: Container(
+        decoration: BoxDecoration(
+          borderRadius: BorderRadius.circular(8),
+          color: baseColor.withOpacity(0.1),
+        ),
+        margin: const EdgeInsets.only(right: 8),
+        height: height,
+        width: width,
+      ),
+    );
+  }
+}

lib/input/filled_textfield.dart

@@ -34,6 +34,8 @@ class FilledTextField extends StatelessWidget {
   /// [suffix] A widget to display after the text field.
   ///
   /// [prefix] A widget to display before the text field.
+  ///
+  /// [enabled] is an optional parameter that specifies whether the text field is enabled.
   const FilledTextField({
     this.controller,
     this.fillColor,
@@ -53,6 +55,7 @@ class FilledTextField extends StatelessWidget {
     this.floatingLabelBehavior = FloatingLabelBehavior.always,
     this.suffix,
     this.prefix,
+    this.enabled = true,
     super.key,
   });
   final Color? fillColor;
@@ -71,6 +74,7 @@ class FilledTextField extends StatelessWidget {
   final Widget? prefix;
   final Widget? suffix;
   final FloatingLabelBehavior floatingLabelBehavior;
+  final bool enabled;
 
   @override
   Widget build(BuildContext context) {
@@ -80,6 +84,7 @@ class FilledTextField extends StatelessWidget {
       style: textStyle,
       obscureText: obscureText,
       decoration: InputDecoration(
+        enabled: enabled,
         prefixIcon: prefix,
         suffixIcon: suffix,
         hintText: hintText,

lib/input/outlined_textfield.dart

@@ -38,6 +38,8 @@ class OutlinedTextField extends StatelessWidget {
   /// [prefix] A widget to display before the text field.
   ///
   /// [suffix] A widget to display after the text field.
+  ///
+  /// [enabled] is an optional parameter that specifies whether the text field is enabled.
   const OutlinedTextField({
     this.controller,
     this.borderRadius = 30,
@@ -59,6 +61,7 @@ class OutlinedTextField extends StatelessWidget {
     this.floatingLabelBehavior = FloatingLabelBehavior.always,
     this.prefix,
     this.suffix,
+    this.enabled = true,
     super.key,
   });
 
@@ -79,6 +82,7 @@ class OutlinedTextField extends StatelessWidget {
   final Widget? prefix;
   final Widget? suffix;
   final FloatingLabelBehavior floatingLabelBehavior;
+  final bool enabled;
 
   @override
   Widget build(BuildContext context) {
@@ -88,6 +92,7 @@ class OutlinedTextField extends StatelessWidget {
       style: textStyle,
       obscureText: obscureText,
       decoration: InputDecoration(
+        enabled: enabled,
         prefixIcon: prefix,
         suffixIcon: suffix,
         hintText: hintText,

lib/views/app_statusbar.dart

@@ -0,0 +1,42 @@
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart';
+
+/// A custom status bar widget with configurable colors and brightness for status and navigation bars.
+///
+/// [backgroundColor] sets the background color of the AppBar.
+///
+/// [statusBarColor] changes the color of the status bar.
+///
+/// [brightness] describes the contrast of a theme or color palette.
+class AppStatusBar extends StatelessWidget implements PreferredSizeWidget {
+  const AppStatusBar({
+    required this.brightness,
+    this.backgroundColor,
+    this.statusBarColor,
+    Key? key,
+  }) : super(key: key);
+  final Color? backgroundColor;
+  final Color? statusBarColor;
+  final Brightness brightness;
+
+  @override
+  Size get preferredSize => const Size.fromHeight(0);
+
+  @override
+  Widget build(BuildContext context) {
+    return PreferredSize(
+      preferredSize: const Size(double.infinity, 0),
+      child: AppBar(
+        toolbarHeight: 0,
+        elevation: 0,
+        backgroundColor: backgroundColor,
+        systemOverlayStyle: SystemUiOverlayStyle(
+          statusBarIconBrightness: brightness,
+          statusBarBrightness: brightness,
+          systemNavigationBarIconBrightness: brightness,
+          statusBarColor: statusBarColor,
+        ),
+      ),
+    );
+  }
+}

pubspec.lock

@@ -424,6 +424,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "1.0.4"
+  shimmer:
+    dependency: "direct main"
+    description:
+      name: shimmer
+      sha256: "5f88c883a22e9f9f299e5ba0e4f7e6054857224976a5d9f839d4ebdc94a14ac9"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.0.0"
   sky_engine:
     dependency: transitive
     description: flutter

pubspec.yaml

@@ -1,7 +1,7 @@
 name: nuxify_widgetbook
 description: "A new Flutter project."
 publish_to: "none"
-version: 1.1.0
+version: 1.2.0
 
 environment:
   sdk: ">=3.3.0 <4.0.0"
@@ -10,6 +10,7 @@ dependencies:
   flutter:
     sdk: flutter
   mobile_scanner: ^5.1.0
+  shimmer: ^3.0.0
 
 dev_dependencies:
   build_runner: ^2.4.9

widgetbook/lib/indicators/widget_loader.dart

@@ -0,0 +1,35 @@
+import 'package:flutter/material.dart';
+import 'package:nuxify_widgetbook/indicators/widget_loader.dart';
+import 'package:widgetbook/widgetbook.dart';
+import 'package:widgetbook_annotation/widgetbook_annotation.dart' as widgetbook;
+
+@widgetbook.UseCase(name: 'Default', type: CardExpandedLoader)
+Widget defaultUseCase(BuildContext context) {
+  final int itemCount =
+      context.knobs.int.slider(label: 'Loader Count', initialValue: 3, max: 10);
+
+  return Center(
+    child: Container(
+      color:
+          !context.knobs.boolean(label: 'Dark background.', initialValue: true)
+              ? const Color(0xFFF5F7F8)
+              : const Color(0xFF1E201E),
+      padding: const EdgeInsets.symmetric(horizontal: 50),
+      child: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: [
+            for (int j = 0; j < itemCount; j++)
+              Padding(
+                padding: const EdgeInsets.only(bottom: 10.0),
+                child: CardExpandedLoader(
+                  height: context.knobs.double
+                      .input(label: 'Card Loader Height', initialValue: 50),
+                ),
+              )
+          ],
+        ),
+      ),
+    ),
+  );
+}

widgetbook/lib/input/filled_textfield.dart

@@ -23,6 +23,7 @@ Widget defaultUseCase(BuildContext context) {
           isDense: context.knobs.boolean(label: 'TextField isDense'),
           obscureText: context.knobs.boolean(label: 'TextField obscureText'),
           fillColor: context.knobs.color(label: 'Fill Color'),
+          enabled: context.knobs.boolean(label: 'Enabled', initialValue: true),
           borderRadius: context.knobs.double.slider(
               label: 'Border Radius', initialValue: 30, max: 50, min: 1),
           contentPadding: EdgeInsets.symmetric(

widgetbook/lib/input/outlined_textfield.dart

@@ -25,6 +25,8 @@ Widget defaultUseCase(BuildContext context) {
             mainAxisSize: MainAxisSize.min,
             children: <Widget>[
               OutlinedTextField(
+                enabled:
+                    context.knobs.boolean(label: 'Enabled', initialValue: true),
                 borderColor: context.knobs.color(label: 'Border Color'),
                 errorBorderColor:
                     context.knobs.color(label: 'Error Border Color'),

widgetbook/pubspec.yaml

@@ -1,7 +1,7 @@
 name: widgetbook_workspace
 description: "A new Flutter project."
 publish_to: 'none'
-version: 1.1.0
+version: 1.2.0
 
 environment:
   sdk: '>=3.3.4 <4.0.0'