Line data Source code
1 : import 'package:basf_flutter_components/src/theme/dimens.dart';
2 : import 'package:flutter/material.dart';
3 :
4 : /// [VerticalSpacer] creates a vertical separation between Widgets
5 : /// the same way you would use a SizedBox, but with predefined values
6 : /// from [Dimens]
7 : ///
8 : /// Example:
9 : /// ```dart
10 : /// VerticalSpacer.xSmall(),
11 : /// VerticalSpacer.small(),
12 : /// VerticalSpacer.normal(),
13 : /// VerticalSpacer.semi(),
14 : /// VerticalSpacer.mediumSmall(),
15 : /// VerticalSpacer.medium(),
16 : /// VerticalSpacer.medium20(),
17 : /// VerticalSpacer.mediumLarge(),
18 : /// VerticalSpacer.large(),
19 : /// VerticalSpacer.xLarge(),
20 : /// VerticalSpacer.xxLarge(),
21 : /// VerticalSpacer.xxxLarge(),
22 : /// ```
23 : ///
24 : /// See also:
25 : ///
26 : /// * [Dimens]
27 : /// * [HorizontalSpacer]
28 : /// * [HorizontalSpacerWithText]
29 : class VerticalSpacer extends SizedBox {
30 : /// [VerticalSpacer] with custom paddings
31 1 : const VerticalSpacer({super.key, required double super.height});
32 :
33 : /// [VerticalSpacer] with [2.0] as padding
34 1 : factory VerticalSpacer.xSmall() =>
35 : const VerticalSpacer(height: Dimens.paddingXSmall);
36 :
37 : /// [VerticalSpacer] with [4.0] as padding
38 1 : factory VerticalSpacer.small() =>
39 : const VerticalSpacer(height: Dimens.paddingSmall);
40 :
41 : /// [VerticalSpacer] with [8.0] as padding
42 1 : factory VerticalSpacer.normal() =>
43 : const VerticalSpacer(height: Dimens.paddingDefault);
44 :
45 : /// [VerticalSpacer] with [10.0] as padding
46 1 : factory VerticalSpacer.semi() =>
47 : const VerticalSpacer(height: Dimens.paddingSemi);
48 :
49 : /// [VerticalSpacer] with [12.0] as padding
50 1 : factory VerticalSpacer.mediumSmall() =>
51 : const VerticalSpacer(height: Dimens.paddingMediumSmall);
52 :
53 : /// [VerticalSpacer] with [16.0] as padding
54 1 : factory VerticalSpacer.medium() =>
55 : const VerticalSpacer(height: Dimens.paddingMedium);
56 :
57 : /// [VerticalSpacer] with [20.0] as padding
58 1 : factory VerticalSpacer.medium20() =>
59 : const VerticalSpacer(height: Dimens.paddingMedium20);
60 :
61 : /// [VerticalSpacer] with [24.0] as padding
62 1 : factory VerticalSpacer.mediumLarge() =>
63 : const VerticalSpacer(height: Dimens.paddingMediumLarge);
64 :
65 : /// [VerticalSpacer] with [32.0] as padding
66 1 : factory VerticalSpacer.large() =>
67 : const VerticalSpacer(height: Dimens.paddingLarge);
68 :
69 : /// [VerticalSpacer] with [36.0] as padding
70 1 : factory VerticalSpacer.xLarge() =>
71 : const VerticalSpacer(height: Dimens.paddingXLarge);
72 :
73 : /// [VerticalSpacer] with [48.0] as padding
74 1 : factory VerticalSpacer.xxLarge() =>
75 : const VerticalSpacer(height: Dimens.paddingXXLarge);
76 :
77 : /// [VerticalSpacer] with [64.0] as padding
78 1 : factory VerticalSpacer.xxxLarge() =>
79 : const VerticalSpacer(height: Dimens.paddingXXXLarge);
80 : }
81 :
82 : /// [HorizontalSpacer] creates a horizontal separation between Widgets
83 : /// the same way you would use a SizedBox, but with predefined values
84 : /// from [Dimens]
85 : ///
86 : /// Example:
87 : /// ```dart
88 : /// HorizontalSpacer.small()
89 : /// HorizontalSpacer.normal()
90 : /// HorizontalSpacer.semi()
91 : /// HorizontalSpacer.mediumSmall()
92 : /// HorizontalSpacer.medium()
93 : /// HorizontalSpacer.medium20()
94 : /// HorizontalSpacer.mediumLarge()
95 : /// HorizontalSpacer.large()
96 : /// HorizontalSpacer.xLarge()
97 : /// HorizontalSpacer.xxLarge()
98 : /// ```
99 : ///
100 : /// See also:
101 : ///
102 : /// * [Dimens]
103 : /// * [VerticalSpacer]
104 : /// * [HorizontalSpacerWithText]
105 : class HorizontalSpacer extends SizedBox {
106 : /// [HorizontalSpacer] with custom paddings
107 1 : const HorizontalSpacer({super.key, required double super.width});
108 :
109 : /// [HorizontalSpacer] with [2.0] as padding
110 1 : factory HorizontalSpacer.xSmall() =>
111 : const HorizontalSpacer(width: Dimens.paddingXSmall);
112 :
113 : /// [HorizontalSpacer] with [4.0] as padding
114 1 : factory HorizontalSpacer.small() =>
115 : const HorizontalSpacer(width: Dimens.paddingSmall);
116 :
117 : /// [HorizontalSpacer] with [8.0] as padding
118 1 : factory HorizontalSpacer.normal() =>
119 : const HorizontalSpacer(width: Dimens.paddingDefault);
120 :
121 : /// [HorizontalSpacer] with [10.0] as padding
122 1 : factory HorizontalSpacer.semi() =>
123 : const HorizontalSpacer(width: Dimens.paddingSemi);
124 :
125 : /// [HorizontalSpacer] with [12.0] as padding
126 1 : factory HorizontalSpacer.mediumSmall() =>
127 : const HorizontalSpacer(width: Dimens.paddingMediumSmall);
128 :
129 : /// [HorizontalSpacer] with [16.0] as padding
130 1 : factory HorizontalSpacer.medium() =>
131 : const HorizontalSpacer(width: Dimens.paddingMedium);
132 :
133 : /// [HorizontalSpacer] with [20.0] as padding
134 1 : factory HorizontalSpacer.medium20() =>
135 : const HorizontalSpacer(width: Dimens.paddingMedium20);
136 :
137 : /// [HorizontalSpacer] with [24.0] as padding
138 1 : factory HorizontalSpacer.mediumLarge() =>
139 : const HorizontalSpacer(width: Dimens.paddingMediumLarge);
140 :
141 : /// [HorizontalSpacer] with [32.0] as padding
142 1 : factory HorizontalSpacer.large() =>
143 : const HorizontalSpacer(width: Dimens.paddingLarge);
144 :
145 : /// [HorizontalSpacer] with [36.0] as padding
146 1 : factory HorizontalSpacer.xLarge() =>
147 : const HorizontalSpacer(width: Dimens.paddingXLarge);
148 :
149 : /// [HorizontalSpacer] with [48.0] as padding
150 1 : factory HorizontalSpacer.xxLarge() =>
151 : const HorizontalSpacer(width: Dimens.paddingXXLarge);
152 :
153 : /// [HorizontalSpacer] with [64.0] as padding
154 1 : factory HorizontalSpacer.xxxLarge() =>
155 : const HorizontalSpacer(width: Dimens.paddingXXXLarge);
156 : }
157 :
158 : /// [HorizontalSpacerWithText] creates a horizontal separation between Widgets
159 : /// with a text in between
160 : ///
161 : /// Example:
162 : /// ```dart
163 : /// HorizontalSpacerWithText(
164 : /// text: 'example text',
165 : /// color: Colors.green,
166 : /// );
167 : /// ```
168 : ///
169 : /// See also:
170 : ///
171 : /// * [Dimens]
172 : /// * [VerticalSpacer]
173 : /// * [HorizontalSpacerWithText]
174 : class HorizontalSpacerWithText extends StatelessWidget {
175 : /// [HorizontalSpacer] with custom attributes
176 1 : const HorizontalSpacerWithText({
177 : super.key,
178 : required this.text,
179 : this.textStyle,
180 : required this.color,
181 : this.height = 36,
182 : this.thickness = 1.0,
183 : });
184 :
185 : /// Text that will be displayed in between widgets
186 : final String text;
187 :
188 : /// Style of the text in between dividers
189 : final TextStyle? textStyle;
190 :
191 : /// Color of the separation in between widgets
192 : final Color color;
193 :
194 : /// Height of the divider
195 : final double? height;
196 :
197 : /// Thickness of the divider
198 : final double? thickness;
199 :
200 1 : @override
201 : Widget build(BuildContext context) {
202 1 : return Row(
203 1 : children: [
204 1 : Expanded(
205 1 : child: Container(
206 : margin: const EdgeInsets.all(20),
207 1 : child: Divider(
208 1 : thickness: thickness,
209 1 : color: color,
210 1 : height: height,
211 : ),
212 : ),
213 : ),
214 1 : VerticalSpacer.small(),
215 1 : Text(
216 1 : text,
217 1 : style: textStyle,
218 : ),
219 1 : VerticalSpacer.small(),
220 1 : Expanded(
221 1 : child: Container(
222 : margin: const EdgeInsets.all(20),
223 1 : child: Divider(
224 1 : thickness: thickness,
225 1 : color: color,
226 1 : height: height,
227 : ),
228 : ),
229 : ),
230 : ],
231 : );
232 : }
233 : }
|