Merge pull request #69 from gluestack/development

geekruchika · web-flow · commit 9f7f62651f75 · 2023-12-01T18:11:14.000+05:30
Development
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,8 @@
 ## 0.0.1-alpha.1
 
 - Initial alpha release.
+
+## 0.0.1-alpha.2
+
+- Remove provider dependency from package.
+- Update example to manage light and dark theme.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ _Package is in development. APIs may change in the future._
 
 You can try the example app demo on this link: https://gluestack-flutter.web.app/
 
-We are referring gluestack-ui to create gluestack-ui-flutter. Flutter documantation is in progress. You can find detailed documentation for each component, including a list of props and examples, in https://gluestack.io/ui/docs website.
+We are referring gluestack-ui to create gluestack-ui-flutter. Flutter documentation is in progress. You can find the detailed documentation for each component, including a list of props and examples, in https://gluestack.io/ui/docs website.
 
 ## Features
 
@@ -30,7 +30,7 @@ Add the package to your dependencies:
 
 ```yaml
 dependencies:
-  gluestack_ui: 0.0.1-alpha.1
+  gluestack_ui: 0.0.1-alpha.2
 ```
 
 OR
@@ -71,6 +71,8 @@ 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.
+
 ## 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.
diff --git a/example/lib/example/KitchenSink/components/header.dart b/example/lib/example/KitchenSink/components/header.dart
@@ -2,10 +2,9 @@ import 'package:flutter/material.dart';
 import 'package:gluestack_ui/gluestack_ui.dart';
 
 class KSHeader extends StatelessWidget {
-  final Function themeCallback;
-  final ThemeProvider themeProvider;
-  const KSHeader(
-      {super.key, required this.themeCallback, required this.themeProvider});
+  final VoidCallback themeCallback;
+
+  const KSHeader({super.key, required this.themeCallback});
 
   @override
   Widget build(BuildContext context) {
@@ -70,7 +69,7 @@ class KSHeader extends StatelessWidget {
                           child: GSIcon(
                             size: GSSizes.$xl,
                             icon:
-                                themeProvider.currentTheme == GSThemeMode.light
+                                Theme.of(context).brightness == Brightness.light
                                     ? Icons.nightlight_rounded
                                     : Icons.light_mode,
                             style: GSStyle(
diff --git a/example/lib/example/KitchenSink/components/list_your_place_modal/modal.dart b/example/lib/example/KitchenSink/components/list_your_place_modal/modal.dart
@@ -4,8 +4,6 @@ import 'package:gluestack_ui_example/example/KitchenSink/components/list_your_pl
 import 'package:gluestack_ui_example/example/KitchenSink/components/list_your_place_modal/content2.dart';
 import 'package:gluestack_ui_example/example/KitchenSink/components/list_your_place_modal/content3.dart';
 
-import 'package:provider/provider.dart';
-
 class ListYourPlaceModal extends StatefulWidget {
   const ListYourPlaceModal({super.key});
 
diff --git a/example/lib/example/KitchenSink/main_page.dart b/example/lib/example/KitchenSink/main_page.dart
@@ -1,63 +1,59 @@
 import 'package:flutter/material.dart';
 import 'package:gluestack_ui/gluestack_ui.dart';
-import 'package:provider/provider.dart';
 
 import 'components/banner.dart';
 import 'components/header.dart';
 import 'components/main_component.dart';
 import 'components/sidebar/sidebar.dart';
 
 class LayoutExample extends StatelessWidget {
-  const LayoutExample({super.key});
+  final VoidCallback toggleTheme;
+
+  const LayoutExample({super.key, required this.toggleTheme});
 
   @override
   Widget build(BuildContext context) {
-    return Consumer<ThemeProvider>(builder: (context, themeProvider, child) {
-      return Scaffold(
-        body: SafeArea(
-          child: GSVStack(
-            crossAxisAlignment: CrossAxisAlignment.stretch,
-            children: [
-              const KSBanner(),
-              KSHeader(
-                themeProvider: themeProvider,
-                themeCallback: () {
-                  themeProvider.toggleTheme();
-                },
-              ),
-              Expanded(
-                child: GSBox(
-                  style: GSStyle(
-                    padding: const EdgeInsets.symmetric(
-                        horizontal: 30, vertical: 21),
-                  ),
-                  child: const GSHStack(
-                    crossAxisAlignment: CrossAxisAlignment.stretch,
-                    mainAxisAlignment: MainAxisAlignment.center,
-                    children: [
-                      Flexible(
-                        flex: 1,
-                        child: Padding(
-                          padding: EdgeInsets.only(right: 30),
-                          child: SingleChildScrollView(
-                            child: KSSideBar(),
-                          ),
-                        ),
-                      ),
-                      Flexible(
-                        flex: 3,
+    return Scaffold(
+      body: SafeArea(
+        child: GSVStack(
+          crossAxisAlignment: CrossAxisAlignment.stretch,
+          children: [
+            const KSBanner(),
+            KSHeader(
+              themeCallback: toggleTheme,
+            ),
+            Expanded(
+              child: GSBox(
+                style: GSStyle(
+                  padding:
+                      const EdgeInsets.symmetric(horizontal: 30, vertical: 21),
+                ),
+                child: const GSHStack(
+                  crossAxisAlignment: CrossAxisAlignment.stretch,
+                  mainAxisAlignment: MainAxisAlignment.center,
+                  children: [
+                    Flexible(
+                      flex: 1,
+                      child: Padding(
+                        padding: EdgeInsets.only(right: 30),
                         child: SingleChildScrollView(
-                          child: KSMainComponent(),
+                          child: KSSideBar(),
                         ),
                       ),
-                    ],
-                  ),
+                    ),
+                    Flexible(
+                      flex: 3,
+                      child: SingleChildScrollView(
+                        child: KSMainComponent(),
+                      ),
+                    ),
+                  ],
                 ),
               ),
-            ],
-          ),
+            ),
+          ],
         ),
-      );
-    });
+      ),
+    );
   }
 }
diff --git a/example/lib/example/alert_example.dart b/example/lib/example/alert_example.dart
@@ -36,7 +36,9 @@ class AlertExample extends StatelessWidget {
               )
 ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Alert"),
+      ),
       body: BaseLayout(
         code: code,
         component: Center(
diff --git a/example/lib/example/avatar_example.dart b/example/lib/example/avatar_example.dart
@@ -59,7 +59,9 @@ class _AvatarExampleState extends State<AvatarExample> {
           )
 ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Avatar"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSAvatar(
diff --git a/example/lib/example/badge_example.dart b/example/lib/example/badge_example.dart
@@ -82,7 +82,9 @@ class _BadgeExampleState extends State<BadgeExample> {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Badge"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSBadge(
diff --git a/example/lib/example/button_example.dart b/example/lib/example/button_example.dart
@@ -86,7 +86,9 @@ class _ButtonExampleState extends State<ButtonExample> {
               )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Button"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSButton(
@@ -95,6 +97,11 @@ class _ButtonExampleState extends State<ButtonExample> {
           size: selectedSizeOption,
           isDisabled: isDisabled,
           isFocusVisible: isFocusVisible,
+          style: GSStyle(
+            dark: GSStyle(
+              bg: $GSColors.red400,
+            ),
+          ),
           onPressed: () {},
           child: const Row(
             children: [
diff --git a/example/lib/example/center_example.dart b/example/lib/example/center_example.dart
@@ -19,7 +19,9 @@ class CenterExample extends StatelessWidget {
         )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Center"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSCenter(
diff --git a/example/lib/example/checkbox_example.dart b/example/lib/example/checkbox_example.dart
@@ -51,7 +51,9 @@ class _CheckBoxExampleState extends State<CheckBoxExample> {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Checkbox"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSCheckBox(
diff --git a/example/lib/example/divider_example.dart b/example/lib/example/divider_example.dart
@@ -7,7 +7,9 @@ class DividerExample extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Divider"),
+      ),
       body: Center(
         child: Column(
           children: [
diff --git a/example/lib/example/heading_example.dart b/example/lib/example/heading_example.dart
@@ -13,7 +13,9 @@ class HeadingExample extends StatelessWidget {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Heading"),
+      ),
       body: Center(
         child: BaseLayout(
           code: code,
diff --git a/example/lib/example/hstack_example.dart b/example/lib/example/hstack_example.dart
@@ -60,7 +60,9 @@ class _HStackExampleState extends State<HStackExample> {
         )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("HStack"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSHStack(
diff --git a/example/lib/example/icon_example.dart b/example/lib/example/icon_example.dart
@@ -34,7 +34,9 @@ class _IconExampleState extends State<IconExample> {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Icon"),
+      ),
       body: Center(
         child: BaseLayout(
           code: code,
diff --git a/example/lib/example/image_example.dart b/example/lib/example/image_example.dart
@@ -55,7 +55,9 @@ class _ImageExampleState extends State<ImageExample> {
               imageType: GSImageType.network)
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Image"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSImage(
diff --git a/example/lib/example/input_example.dart b/example/lib/example/input_example.dart
@@ -76,7 +76,9 @@ class _InputExampleState extends State<InputExample> {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Input"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSInput(
diff --git a/example/lib/example/link_example.dart b/example/lib/example/link_example.dart
@@ -14,7 +14,9 @@ class LinkExample extends StatelessWidget {
           ),
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Link"),
+      ),
       body: Center(
         child: BaseLayout(
           code: code,
diff --git a/example/lib/example/pressable_example.dart b/example/lib/example/pressable_example.dart
@@ -39,7 +39,9 @@ class PressableExample extends StatelessWidget {
             )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Pressable"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSPressable(
diff --git a/example/lib/example/progress_example.dart b/example/lib/example/progress_example.dart
@@ -35,7 +35,9 @@ class _ProgressExampleState extends State<ProgressExample> {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Progress"),
+      ),
       body: Center(
         child: BaseLayout(
           code: code,
diff --git a/example/lib/example/radio_button_example.dart b/example/lib/example/radio_button_example.dart
@@ -58,7 +58,9 @@ class _RadioButtonExampleState extends State<RadioButtonExample> {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Radio Button"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSRadio<Value>(
diff --git a/example/lib/example/spinner_example.dart b/example/lib/example/spinner_example.dart
@@ -17,7 +17,9 @@ class SpinnerExample extends StatelessWidget {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Spinner"),
+      ),
       body: Center(
         child: BaseLayout(
           code: code,
diff --git a/example/lib/example/switch_example.dart b/example/lib/example/switch_example.dart
@@ -49,7 +49,9 @@ class _SwitchExampleState extends State<SwitchExample> {
             )
 ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Switch"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSSwitch(
diff --git a/example/lib/example/text_area_example.dart b/example/lib/example/text_area_example.dart
@@ -62,7 +62,9 @@ class _TextAreaExampleState extends State<TextAreaExample> {
           )
   ''';
     return Scaffold(
-      appBar: AppBar(),
+      appBar: AppBar(
+        title: const Text("Text Area"),
+      ),
       body: BaseLayout(
         code: code,
         component: GSTextArea(
diff --git a/example/lib/example/text_example.dart b/example/lib/example/text_example.dart
diff --git a/example/lib/example/toast_example.dart b/example/lib/example/toast_example.dart
diff --git a/example/lib/example/vstack_example.dart b/example/lib/example/vstack_example.dart
diff --git a/example/lib/main.dart b/example/lib/main.dart
diff --git a/example/lib/utils/drop_down.dart b/example/lib/utils/drop_down.dart
diff --git a/example/pubspec.lock b/example/pubspec.lock
diff --git a/example/pubspec.yaml b/example/pubspec.yaml
diff --git a/lib/gluestack_ui.dart b/lib/gluestack_ui.dart
diff --git a/lib/src/provider/theme_provider.dart b/lib/src/provider/theme_provider.dart
diff --git a/lib/src/style/style_resolver.dart b/lib/src/style/style_resolver.dart
diff --git a/lib/src/widgets/gs_input/gs_input_attributes.dart b/lib/src/widgets/gs_input/gs_input_attributes.dart
diff --git a/pubspec.yaml b/pubspec.yaml
