Merge pull request #87 from gluestack/development

Development

Author: geekruchika

.gitignore

@@ -29,3 +29,6 @@ migrate_working_dir/
 build/
 .flutter-plugins
 .flutter-plugins-dependencies
+android/local.properties
+ios/
+ 

CHANGELOG.md

@@ -6,3 +6,11 @@
 
 - Remove provider dependency from package.
 - Update example to manage light and dark theme.
+
+## 0.0.1-alpha.3
+
+- Add `GluestackProvider`
+- Add support to set custom values for design tokens through GluestackProvider.
+- New widget: added Forms
+- Add responsiveness to existing widgets.
+- Update example app with new widgets.

README.md

@@ -30,7 +30,7 @@ Add the package to your dependencies:
 
 ```yaml
 dependencies:
-  gluestack_ui: 0.0.1-alpha.2
+  gluestack_ui: 0.0.1-alpha.3
 ```
 
 OR
@@ -43,7 +43,16 @@ dependencies:
 
 ## Usage
 
-Here is how `GSButton` widget can be easily integrated into your flutter app. Here's an example of how to use it:
+Wrap the `MaterialApp` with `GluestackProvider`.
+
+```dart
+GluestackProvider(
+  child: MaterialApp.router(
+    ....
+)
+```
+
+Here's an example of how to use `GSButton` widget into your flutter app:
 
 ```dart
 import 'package:gluestack_ui/gluestack_ui.dart';
@@ -73,6 +82,29 @@ GSButton(
 
 All Gluestack widgets support dark theme. Package detects the current theme from Flutter's inbuilt `Theme.of(context).brightness`. Hence, you can manage the theme mode from MaterialApp itself using the state management of your choice.
 
+## Custom tokens
+
+You can customize the default tokens to provide your own design values.
+
+```dart
+GluestackProvider(
+  gluestackTokenConfig: GluestackTokenConfig(
+    gsColorsToken: const GSColorsToken(
+      primary600: Colors.pink,
+      primary700: Colors.pink,
+    ),
+    gsFontSizeToken: const GSFontSizeToken(
+      $sm: 12,
+      $md: 14,
+    ),
+    // More token configurations....
+  ),
+  child: MaterialApp.router(
+    ....
+  ),
+)
+```
+
 ## Contributing
 
 We welcome contributions from the community. If you'd like to contribute to `gluestack-ui-flutter`, please read our [contributing guide](./CONTRIBUTING.md) instructions on how to submit a pull request.

example/.gitignore

@@ -9,6 +9,7 @@
 .history
 .svn/
 migrate_working_dir/
+*.lock
 
 # IntelliJ related
 *.iml

example/lib/example/KitchenSink/components/banner.dart

@@ -58,7 +58,7 @@ class _CheckBoxExampleState extends State<CheckBoxExample> {
         code: code,
         component: GSCheckBox(
           icon: GSCheckBoxIndicator(
-            style: GSStyle(margin: const EdgeInsets.only(right: $GSSpace.$2)),
+            style: GSStyle(margin:  EdgeInsets.only(right: $GSSpace.$2)),
             child: const GSCheckBoxIcon(),
           ),
           value: "value 1",

example/lib/example/KitchenSink/main_page.dart

@@ -0,0 +1,133 @@
+import 'package:flutter/material.dart';
+import 'package:gluestack_ui/gluestack_ui.dart';
+import 'package:gluestack_ui_example/utils/base_layout.dart';
+import 'package:gluestack_ui_example/utils/drop_down.dart';
+import 'package:gluestack_ui_example/utils/toggle.dart';
+
+class FabExample extends StatefulWidget {
+  const FabExample({super.key});
+
+  @override
+  State<FabExample> createState() => _FabExampleState();
+}
+
+class _FabExampleState extends State<FabExample> {
+  final List dropdownSizeOptions = [GSSizes.$sm, GSSizes.$md, GSSizes.$lg];
+  final List dropdownPlacementOptions = [
+    GSPlacements.bottomCenter,
+    GSPlacements.bottomLeft,
+    GSPlacements.bottomRight,
+    GSPlacements.topCenter,
+    GSPlacements.topLeft,
+    GSPlacements.topRight
+  ];
+  GSSizes selectedSizeOption = GSSizes.$md;
+  GSPlacements selectedPlacementOption = GSPlacements.bottomRight;
+  bool isDisabled = false;
+  bool isHovered = false;
+  bool isPressed = false;
+  void updateSizeSelectedOption(dynamic newOption) {
+    setState(() {
+      selectedSizeOption = newOption;
+    });
+  }
+
+  void updatePlacementSelectedOption(dynamic newOption) {
+    setState(() {
+      selectedPlacementOption = newOption;
+    });
+  }
+
+  void updateIsDisabled(bool value) {
+    setState(() {
+      isDisabled = value;
+    });
+  }
+
+  void updateIsHovered(bool value) {
+    setState(() {
+      isHovered = value;
+    });
+  }
+
+  void updateIsPressed(bool value) {
+    setState(() {
+      isPressed = value;
+    });
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(),
+      body: BaseLayout(
+        component: Center(
+          child: Stack(
+            children: [
+              GSBox(
+                style: GSStyle(
+                    height: 360,
+                    width: 320,
+                    borderRadius: $GSRadii.$md,
+                    bg: $GSColors.backgroundLight50,
+                    dark: GSStyle(color: $GSColors.backgroundDark900)),
+              ),
+              GSFab(
+                size: selectedSizeOption,
+                placement: selectedPlacementOption,
+                onPressed: () {},
+                isDisabled: isDisabled,
+                isHovered: isHovered,
+                isPressed: isPressed,
+                icon: const GSFabIcon(icon: Icons.add),
+                label: const GSFabLabel(text: 'Quick Start'),
+              ),
+            ],
+          ),
+        ),
+        controls: Column(
+          mainAxisAlignment: MainAxisAlignment.spaceAround,
+          crossAxisAlignment: CrossAxisAlignment.start,
+          children: [
+            CustomDropDown(
+              title: "size",
+              dropdownOptions: dropdownSizeOptions,
+              selectedOption: selectedSizeOption,
+              onChanged: updateSizeSelectedOption,
+            ),
+            CustomDropDown(
+              title: "placement",
+              dropdownOptions: dropdownPlacementOptions,
+              selectedOption: selectedPlacementOption,
+              onChanged: updatePlacementSelectedOption,
+            ),
+
+            const SizedBox(height: 20),
+            CustomToggle(
+              title: "isDisabled",
+              value: isDisabled,
+              onToggle: updateIsDisabled,
+            ),
+            const SizedBox(height: 20),
+            CustomToggle(
+              title: "isHovered",
+              value: isHovered,
+              onToggle: updateIsHovered,
+            ),
+            const SizedBox(height: 20),
+            CustomToggle(
+              title: "isPressed",
+              value: isPressed,
+              onToggle: updateIsPressed,
+            ),
+            // CustomToggle(
+            //   title: "isInvalid",
+            //   value: isInvalid,
+            //   onToggle: updateIsInvalid,
+            // )
+          ],
+        ),
+      ),
+    );
+  }
+}