Skip to content

Commit 54f9b47

Browse files
geekruchikageekruchika
authored
Merge pull request #62 from gluestack/feat/response-example
feat: make example app pages responsive
2 parents 1d09d34 + 8590b8a commit 54f9b47

28 files changed

+574
-601
lines changed

‎example/lib/example/KitchenSink/components/list_your_place_modal/modal.dart

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@ class _ListYourPlaceModalState extends State<ListYourPlaceModal> {
3535
Widget build(BuildContext context) {
3636
final themeProvider = Provider.of<ThemeProvider>(context);
3737
return AlertDialog(
38-
backgroundColor: themeProvider.getThemeData().canvasColor,
3938
title: GSHStack(
4039
mainAxisAlignment: MainAxisAlignment.spaceBetween,
4140
children: [

‎example/lib/example/KitchenSink/main_page.dart

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,6 @@ class LayoutExample extends StatelessWidget {
1414
Widget build(BuildContext context) {
1515
return Consumer<ThemeProvider>(builder: (context, themeProvider, child) {
1616
return Scaffold(
17-
backgroundColor: themeProvider.getThemeData().canvasColor,
1817
body: SafeArea(
1918
child: GSVStack(
2019
crossAxisAlignment: CrossAxisAlignment.stretch,

‎example/lib/example/alert_example.dart

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import 'package:flutter/material.dart';
22
import 'package:gluestack_ui/gluestack_ui.dart';
33
import 'package:gluestack_ui_example/utils/base_layout.dart';
4-
import 'package:provider/provider.dart';
54

65
class AlertExample extends StatelessWidget {
76
const AlertExample({super.key});
87

98
@override
109
Widget build(BuildContext context) {
11-
final themeProvider = Provider.of<ThemeProvider>(context);
1210
var code = '''GSButton(
1311
size: GSSizes.\$lg,
1412
child: const GSButtonText(text: "Click Me"),
@@ -38,7 +36,6 @@ class AlertExample extends StatelessWidget {
3836
)
3937
''';
4038
return Scaffold(
41-
backgroundColor: themeProvider.getThemeData().canvasColor,
4239
appBar: AppBar(),
4340
body: BaseLayout(
4441
code: code,

‎example/lib/example/avatar_example.dart

Lines changed: 28 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
22
import 'package:gluestack_ui/gluestack_ui.dart';
33
import 'package:gluestack_ui_example/utils/base_layout.dart';
44
import 'package:gluestack_ui_example/utils/drop_down.dart';
5-
import 'package:provider/provider.dart';
65

76
class AvatarExample extends StatefulWidget {
87
const AvatarExample({super.key});
@@ -47,7 +46,6 @@ class _AvatarExampleState extends State<AvatarExample> {
4746

4847
@override
4948
Widget build(BuildContext context) {
50-
final themeProvider = Provider.of<ThemeProvider>(context);
5149
var code = '''GSAvatar(
5250
radius: GSBorderRadius.\$full,
5351
size: GSSizes.\$md,
@@ -61,38 +59,36 @@ class _AvatarExampleState extends State<AvatarExample> {
6159
)
6260
''';
6361
return Scaffold(
64-
backgroundColor: themeProvider.getThemeData().canvasColor,
6562
appBar: AppBar(),
66-
body: Center(
67-
child: BaseLayout(
68-
code: code,
69-
component: GSAvatar(
70-
radius: selectedRadiusOption,
71-
size: selectedSizeOption,
72-
style: GSStyle(
73-
bg: Colors.orange,
74-
textStyle: const TextStyle(color: Colors.white),
75-
),
76-
fallBackText: const GSAvatarFallBackText('Geeky Stack'),
77-
),
78-
controls: Column(
79-
mainAxisAlignment: MainAxisAlignment.spaceAround,
80-
crossAxisAlignment: CrossAxisAlignment.start,
81-
children: [
82-
CustomDropDown(
83-
title: "size",
84-
dropdownOptions: dropdownSizeOptions,
85-
selectedOption: selectedSizeOption,
86-
onChanged: updateSizeSelectedOption,
87-
),
88-
CustomDropDown(
89-
title: "borderRadius",
90-
dropdownOptions: dropdownRadiusOptions,
91-
selectedOption: selectedRadiusOption,
92-
onChanged: updateRadiusSelectedOption,
93-
),
94-
],
63+
body: BaseLayout(
64+
code: code,
65+
component: GSAvatar(
66+
radius: selectedRadiusOption,
67+
size: selectedSizeOption,
68+
style: GSStyle(
69+
bg: Colors.orange,
70+
textStyle: const TextStyle(color: Colors.white),
9571
),
72+
fallBackText: const GSAvatarFallBackText('Geeky Stack'),
73+
),
74+
controls: Column(
75+
mainAxisAlignment: MainAxisAlignment.spaceAround,
76+
crossAxisAlignment: CrossAxisAlignment.start,
77+
children: [
78+
CustomDropDown(
79+
title: "size",
80+
dropdownOptions: dropdownSizeOptions,
81+
selectedOption: selectedSizeOption,
82+
onChanged: updateSizeSelectedOption,
83+
),
84+
const SizedBox(height: 20),
85+
CustomDropDown(
86+
title: "borderRadius",
87+
dropdownOptions: dropdownRadiusOptions,
88+
selectedOption: selectedRadiusOption,
89+
onChanged: updateRadiusSelectedOption,
90+
),
91+
],
9692
),
9793
),
9894
);

‎example/lib/example/badge_example.dart

Lines changed: 44 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import 'package:flutter/material.dart';
22
import 'package:gluestack_ui/gluestack_ui.dart';
33
import 'package:gluestack_ui_example/utils/base_layout.dart';
44
import 'package:gluestack_ui_example/utils/drop_down.dart';
5-
import 'package:provider/provider.dart';
65

76
/// Example widget demonstrating the usage of GSBadge, GSBadgeIcon, and GSBadgeText.
87
class BadgeExample extends StatefulWidget {
@@ -70,7 +69,6 @@ class _BadgeExampleState extends State<BadgeExample> {
7069

7170
@override
7271
Widget build(BuildContext context) {
73-
final themeProvider = Provider.of<ThemeProvider>(context);
7472
var code = '''GSBadge(
7573
action: GSActions.success,
7674
variant: GSVariants.solid,
@@ -84,54 +82,54 @@ class _BadgeExampleState extends State<BadgeExample> {
8482
)
8583
''';
8684
return Scaffold(
87-
backgroundColor: themeProvider.getThemeData().canvasColor,
8885
appBar: AppBar(),
89-
body: Center(
90-
child: BaseLayout(
91-
code: code,
92-
component: GSBadge(
93-
size: selectedSizeOption,
94-
action: selectedActionOption,
95-
variant: selectedVariantOption,
96-
borderRadius: selectedRadiusOption,
97-
icon: const GSBadgeIcon(
98-
iconData: Icons.info_outline,
99-
),
100-
text: const GSBadgeText(
101-
'information',
102-
),
86+
body: BaseLayout(
87+
code: code,
88+
component: GSBadge(
89+
size: selectedSizeOption,
90+
action: selectedActionOption,
91+
variant: selectedVariantOption,
92+
borderRadius: selectedRadiusOption,
93+
icon: const GSBadgeIcon(
94+
iconData: Icons.info_outline,
10395
),
104-
controls: Column(
105-
mainAxisAlignment: MainAxisAlignment.spaceAround,
106-
crossAxisAlignment: CrossAxisAlignment.start,
107-
children: [
108-
CustomDropDown(
109-
title: "size",
110-
dropdownOptions: dropdownSizeOptions,
111-
selectedOption: selectedSizeOption,
112-
onChanged: updateSizeSelectedOption,
113-
),
114-
CustomDropDown(
115-
title: "variant",
116-
dropdownOptions: dropdownVariantOptions,
117-
selectedOption: selectedVariantOption,
118-
onChanged: updateVariantSelectedOption,
119-
),
120-
CustomDropDown(
121-
title: "borderRadius",
122-
dropdownOptions: dropdownRadiusOptions,
123-
selectedOption: selectedRadiusOption,
124-
onChanged: updateRadiusSelectedOption,
125-
),
126-
CustomDropDown(
127-
title: "action",
128-
dropdownOptions: dropdownActionOptions,
129-
selectedOption: selectedActionOption,
130-
onChanged: updateActionSelectedOption,
131-
),
132-
],
96+
text: const GSBadgeText(
97+
'information',
13398
),
13499
),
100+
controls: Column(
101+
mainAxisAlignment: MainAxisAlignment.spaceAround,
102+
crossAxisAlignment: CrossAxisAlignment.start,
103+
children: [
104+
CustomDropDown(
105+
title: "size",
106+
dropdownOptions: dropdownSizeOptions,
107+
selectedOption: selectedSizeOption,
108+
onChanged: updateSizeSelectedOption,
109+
),
110+
const SizedBox(height: 20),
111+
CustomDropDown(
112+
title: "variant",
113+
dropdownOptions: dropdownVariantOptions,
114+
selectedOption: selectedVariantOption,
115+
onChanged: updateVariantSelectedOption,
116+
),
117+
const SizedBox(height: 20),
118+
CustomDropDown(
119+
title: "borderRadius",
120+
dropdownOptions: dropdownRadiusOptions,
121+
selectedOption: selectedRadiusOption,
122+
onChanged: updateRadiusSelectedOption,
123+
),
124+
const SizedBox(height: 20),
125+
CustomDropDown(
126+
title: "action",
127+
dropdownOptions: dropdownActionOptions,
128+
selectedOption: selectedActionOption,
129+
onChanged: updateActionSelectedOption,
130+
),
131+
],
132+
),
135133
),
136134
);
137135
}

‎example/lib/example/button_example.dart

Lines changed: 50 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import 'package:gluestack_ui/gluestack_ui.dart';
33
import 'package:gluestack_ui_example/utils/base_layout.dart';
44
import 'package:gluestack_ui_example/utils/drop_down.dart';
55
import 'package:gluestack_ui_example/utils/toggle.dart';
6-
import 'package:provider/provider.dart';
76

87
class ButtonExample extends StatefulWidget {
98
const ButtonExample({super.key});
@@ -71,7 +70,6 @@ class _ButtonExampleState extends State<ButtonExample> {
7170

7271
@override
7372
Widget build(BuildContext context) {
74-
final themeProvider = Provider.of<ThemeProvider>(context);
7573
var code = '''GSButton(
7674
action: GSActions.primary,
7775
variant: GSVariants.solid,
@@ -88,60 +86,61 @@ class _ButtonExampleState extends State<ButtonExample> {
8886
)
8987
''';
9088
return Scaffold(
91-
backgroundColor: themeProvider.getThemeData().canvasColor,
9289
appBar: AppBar(),
93-
body: Center(
94-
child: BaseLayout(
95-
code: code,
96-
component: GSButton(
97-
action: selectedActionOption,
98-
variant: selectedVariantOption,
99-
size: selectedSizeOption,
100-
isDisabled: isDisabled,
101-
isFocusVisible: isFocusVisible,
102-
onPressed: () {},
103-
child: const Row(
104-
children: [
105-
GSButtonText(text: "Add"),
106-
GSButtonIcon(icon: Icons.add)
107-
],
108-
),
109-
),
110-
controls: Column(
111-
mainAxisAlignment: MainAxisAlignment.spaceAround,
112-
crossAxisAlignment: CrossAxisAlignment.start,
90+
body: BaseLayout(
91+
code: code,
92+
component: GSButton(
93+
action: selectedActionOption,
94+
variant: selectedVariantOption,
95+
size: selectedSizeOption,
96+
isDisabled: isDisabled,
97+
isFocusVisible: isFocusVisible,
98+
onPressed: () {},
99+
child: const Row(
113100
children: [
114-
CustomDropDown(
115-
title: "size",
116-
dropdownOptions: dropdownSizeOptions,
117-
selectedOption: selectedSizeOption,
118-
onChanged: updateSizeSelectedOption,
119-
),
120-
CustomDropDown(
121-
title: "variant",
122-
dropdownOptions: dropdownVariantOptions,
123-
selectedOption: selectedVariantOption,
124-
onChanged: updateVariantSelectedOption,
125-
),
126-
CustomDropDown(
127-
title: "action",
128-
dropdownOptions: dropdownActionOptions,
129-
selectedOption: selectedActionOption,
130-
onChanged: updateActionSelectedOption,
131-
),
132-
CustomToggle(
133-
title: "isDisabled",
134-
value: isDisabled,
135-
onToggle: updateIsDisabled,
136-
),
137-
CustomToggle(
138-
title: "isFocusVisible",
139-
value: isFocusVisible,
140-
onToggle: updateIsFocusVisible,
141-
)
101+
GSButtonText(text: "Add"),
102+
GSButtonIcon(icon: Icons.add)
142103
],
143104
),
144105
),
106+
controls: Column(
107+
mainAxisAlignment: MainAxisAlignment.spaceAround,
108+
crossAxisAlignment: CrossAxisAlignment.start,
109+
children: [
110+
CustomDropDown(
111+
title: "size",
112+
dropdownOptions: dropdownSizeOptions,
113+
selectedOption: selectedSizeOption,
114+
onChanged: updateSizeSelectedOption,
115+
),
116+
const SizedBox(height: 20),
117+
CustomDropDown(
118+
title: "variant",
119+
dropdownOptions: dropdownVariantOptions,
120+
selectedOption: selectedVariantOption,
121+
onChanged: updateVariantSelectedOption,
122+
),
123+
const SizedBox(height: 20),
124+
CustomDropDown(
125+
title: "action",
126+
dropdownOptions: dropdownActionOptions,
127+
selectedOption: selectedActionOption,
128+
onChanged: updateActionSelectedOption,
129+
),
130+
const SizedBox(height: 20),
131+
CustomToggle(
132+
title: "isDisabled",
133+
value: isDisabled,
134+
onToggle: updateIsDisabled,
135+
),
136+
const SizedBox(height: 20),
137+
CustomToggle(
138+
title: "isFocusVisible",
139+
value: isFocusVisible,
140+
onToggle: updateIsFocusVisible,
141+
)
142+
],
143+
),
145144
),
146145
);
147146
}

‎example/lib/example/center_example.dart

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,12 @@
11
import 'package:flutter/material.dart';
22
import 'package:gluestack_ui/gluestack_ui.dart';
33
import 'package:gluestack_ui_example/utils/base_layout.dart';
4-
import 'package:provider/provider.dart';
54

65
class CenterExample extends StatelessWidget {
76
const CenterExample({super.key});
87

98
@override
109
Widget build(BuildContext context) {
11-
final themeProvider = Provider.of<ThemeProvider>(context);
1210
var code = '''GSCenter(
1311
style: GSStyle(
1412
alignItems: GSAlignments.end,
@@ -21,7 +19,6 @@ class CenterExample extends StatelessWidget {
2119
)
2220
''';
2321
return Scaffold(
24-
backgroundColor: themeProvider.getThemeData().canvasColor,
2522
appBar: AppBar(),
2623
body: BaseLayout(
2724
code: code,

0 commit comments

Comments
 (0)