Skip to content

Commit 455c8ad

Browse files
VijayakumarMariappanVijayakumarMariappan
authored
Merge pull request #1293 from syncfusion-content/FLUT-965289-UG-barcode-hotfix
FLUT-965289 - [Feature] Updated ug pages for barcode widget in hotfix branch.
2 parents 8d55ec2 + b51e93c commit 455c8ad

File tree

5 files changed

+377
-342
lines changed

5 files changed

+377
-342
lines changed

‎Flutter/barcode/accessibility.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,13 +11,13 @@ documentation: ug
1111

1212
## Sufficient contrast
1313

14-
The `SfBarcodeGenerator` [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to customize colors for all UI elements.
14+
The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) [theming](https://help.syncfusion.com/flutter/themes) support offers a consistent and standardized look, as well as the ability to customize colors for all UI elements.
1515

1616
You can customize colors for the following elements:
1717
* [Bar color](https://help.syncfusion.com/flutter/barcode/barcode-customization)
1818
* [Background color](https://help.syncfusion.com/flutter/barcode/barcode-customization)
1919

2020
## Large fonts
2121

22-
The `SfBarcodeGenerator` automatically adjusts font size based on device settings and scales according to the `MediaQueryData.textScaleFactor`. It also allows you to change the font size of all text elements in the barcode generator.
22+
The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) automatically adjusts font size based on device settings and scales according to the [`MediaQueryData.textScaleFactor`](https://api.flutter.dev/flutter/widgets/MediaQueryData/textScaleFactor.html). It also allows you to change the font size of all text elements in the barcode generator.
2323
* [Input value of barcode](https://help.syncfusion.com/flutter/barcode/barcode-customization#text-customization)

‎Flutter/barcode/barcode-customization.md

Lines changed: 147 additions & 140 deletions
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,19 @@ To display the input value of the barcode, enable its [`showValue`](https://pub.
1818

1919
{% highlight dart %}
2020

21-
@override
22-
Widget build(BuildContext context) {
23-
return Scaffold(
24-
backgroundColor: Colors.white,
25-
body: Center(
26-
child: Container(
27-
height: 150,
28-
width: 300,
29-
child: SfBarcodeGenerator(
30-
value: '12634388927',
31-
showValue: true)
32-
)
33-
)
34-
);
35-
}
21+
@override
22+
Widget build(BuildContext context) {
23+
return Scaffold(
24+
backgroundColor: Colors.white,
25+
body: Center(
26+
child: Container(
27+
height: 150,
28+
width: 300,
29+
child: SfBarcodeGenerator(value: '12634388927', showValue: true),
30+
),
31+
),
32+
);
33+
}
3634

3735
{% endhighlight %}
3836

@@ -44,24 +42,27 @@ The text style can be customized using the [`textStyle`](https://pub.dev/documen
4442

4543
{% highlight dart %}
4644

47-
@override
48-
Widget build(BuildContext context) {
45+
@override
46+
Widget build(BuildContext context) {
4947
return Scaffold(
50-
backgroundColor: Colors.white,
51-
body: Center(
52-
child: Container(
53-
height: 150,
54-
width: 300,
55-
child: SfBarcodeGenerator(
56-
value: '12634388927',
57-
58-
textStyle: TextStyle(fontFamily: 'Times',
59-
fontSize: 16, fontStyle: FontStyle.italic,
60-
fontWeight: FontWeight.bold,
61-
color: Colors.red),
62-
showValue: true)
63-
)
64-
)
48+
backgroundColor: Colors.white,
49+
body: Center(
50+
child: Container(
51+
height: 150,
52+
width: 300,
53+
child: SfBarcodeGenerator(
54+
value: '12634388927',
55+
textStyle: TextStyle(
56+
fontFamily: 'Times',
57+
fontSize: 16,
58+
fontStyle: FontStyle.italic,
59+
fontWeight: FontWeight.bold,
60+
color: Colors.red,
61+
),
62+
showValue: true,
63+
),
64+
),
65+
),
6566
);
6667
}
6768

@@ -75,20 +76,21 @@ Control the space between the text and the barcode with the [`textSpacing`](http
7576

7677
{% highlight dart %}
7778

78-
@override
79-
Widget build(BuildContext context) {
79+
@override
80+
Widget build(BuildContext context) {
8081
return Scaffold(
81-
backgroundColor: Colors.white,
82-
body: Center(
83-
child: Container(
84-
height: 150,
85-
width: 300,
86-
child: SfBarcodeGenerator(
87-
value: '12634388927',
88-
textSpacing: 25,
89-
showValue: true)
90-
)
91-
)
82+
backgroundColor: Colors.white,
83+
body: Center(
84+
child: Container(
85+
height: 150,
86+
width: 300,
87+
child: SfBarcodeGenerator(
88+
value: '12634388927',
89+
textSpacing: 25,
90+
showValue: true,
91+
),
92+
),
93+
),
9294
);
9395
}
9496

@@ -98,26 +100,27 @@ Control the space between the text and the barcode with the [`textSpacing`](http
98100

99101
**Horizontal text alignment**
100102

101-
The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of barcode generator. Position the displayed text at the `start`, `center` or `end` of the control. The default value of [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property is center.
103+
The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of barcode generator. Position the displayed text at the [`start`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#start), [`center`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#center) or [`end`](https://api.flutter.dev/flutter/dart-ui/TextAlign.html#end) of the control. The default value of [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property is center.
102104

103105
{% highlight dart %}
104106

105-
@override
106-
Widget build(BuildContext context) {
107+
@override
108+
Widget build(BuildContext context) {
107109
return Scaffold(
108-
backgroundColor: Colors.white,
109-
body: Center(
110-
child: Container(
111-
height: 150,
112-
width: 240,
113-
child: SfBarcodeGenerator(
114-
value: '12634',
115-
textAlign: TextAlign.end,
116-
showValue: true)
117-
)
118-
)
119-
);
120-
}
110+
backgroundColor: Colors.white,
111+
body: Center(
112+
child: Container(
113+
height: 150,
114+
width: 240,
115+
child: SfBarcodeGenerator(
116+
value: '12634',
117+
textAlign: TextAlign.end,
118+
showValue: true,
119+
),
120+
),
121+
),
122+
);
123+
}
121124

122125
{% endhighlight %}
123126

@@ -135,23 +138,24 @@ The following code snippet shows the one dimensional barcode with [`module`](htt
135138

136139
{% highlight dart %}
137140

138-
@override
139-
Widget build(BuildContext context) {
141+
@override
142+
Widget build(BuildContext context) {
140143
return Scaffold(
141144
backgroundColor: Colors.white,
142145
body: Center(
143-
child: Container(
144-
height: 150,
145-
width: 230,
146-
child: SfBarcodeGenerator(
147-
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
148-
value: '123456789',
149-
showValue: true,
150-
symbology: Codabar(module: 1)),
151-
)
146+
child: Container(
147+
height: 150,
148+
width: 230,
149+
child: SfBarcodeGenerator(
150+
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
151+
value: '123456789',
152+
showValue: true,
153+
symbology: Codabar(module: 1),
154+
),
152155
),
153-
);
154-
}
156+
),
157+
);
158+
}
155159

156160
{% endhighlight %}
157161

@@ -163,20 +167,21 @@ Below code snippet shows the one dimensional barcode without the [`module`](http
163167

164168
{% highlight dart %}
165169

166-
@override
167-
Widget build(BuildContext context) {
170+
@override
171+
Widget build(BuildContext context) {
168172
return Scaffold(
169173
backgroundColor: Colors.white,
170174
body: Center(
171-
child: Container(
172-
height: 150,
173-
width: 230,
174-
child: SfBarcodeGenerator(
175-
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
176-
value: '123456789',
177-
showValue: true,
178-
symbology: Codabar()),
179-
)
175+
child: Container(
176+
height: 150,
177+
width: 230,
178+
child: SfBarcodeGenerator(
179+
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
180+
value: '123456789',
181+
showValue: true,
182+
symbology: Codabar(),
183+
),
184+
),
180185
),
181186
);
182187
}
@@ -191,22 +196,23 @@ The following code snippet shows the two dimensional barcode with [`module`](htt
191196

192197
{% highlight dart %}
193198

194-
@override
195-
Widget build(BuildContext context) {
199+
@override
200+
Widget build(BuildContext context) {
196201
return Scaffold(
197202
backgroundColor: Colors.white,
198203
body: Center(
199-
child: Container(
200-
height: 150,
201-
width: 230,
202-
child: SfBarcodeGenerator(
203-
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
204-
value: '123456789',
205-
symbology: QRCode(module: 2),),
206-
)
204+
child: Container(
205+
height: 150,
206+
width: 230,
207+
child: SfBarcodeGenerator(
208+
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
209+
value: '123456789',
210+
symbology: QRCode(module: 2),
211+
),
207212
),
208-
);
209-
}
213+
),
214+
);
215+
}
210216

211217
{% endhighlight %}
212218

@@ -216,22 +222,23 @@ The following code snippet shows the two dimensional barcode with [`module`](htt
216222

217223
{% highlight dart %}
218224

219-
@override
220-
Widget build(BuildContext context) {
225+
@override
226+
Widget build(BuildContext context) {
221227
return Scaffold(
222228
backgroundColor: Colors.white,
223229
body: Center(
224-
child: Container(
225-
height: 150,
226-
width: 230,
227-
child: SfBarcodeGenerator(
228-
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
229-
value: '123456789',
230-
symbology: QRCode(),),
231-
)
230+
child: Container(
231+
height: 150,
232+
width: 230,
233+
child: SfBarcodeGenerator(
234+
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
235+
value: '123456789',
236+
symbology: QRCode(),
237+
),
232238
),
233-
);
234-
}
239+
),
240+
);
241+
}
235242

236243
{% endhighlight %}
237244

@@ -243,22 +250,22 @@ Customize the barcode's bar color using the [`barColor`](https://pub.dev/documen
243250

244251
{% highlight dart %}
245252

246-
@override
247-
Widget build(BuildContext context) {
253+
@override
254+
Widget build(BuildContext context) {
248255
return Scaffold(
249-
backgroundColor: Colors.white,
250-
body: Center(
251-
child: Container(
252-
height: 150,
253-
width: 240,
254-
child: SfBarcodeGenerator(
255-
value: '12634',
256-
barColor: Colors.deepPurple,
257-
)
258-
)
259-
)
260-
);
261-
}
256+
backgroundColor: Colors.white,
257+
body: Center(
258+
child: Container(
259+
height: 150,
260+
width: 240,
261+
child: SfBarcodeGenerator(
262+
value: '12634',
263+
barColor: Colors.deepPurple,
264+
),
265+
),
266+
),
267+
);
268+
}
262269

263270
{% endhighlight %}
264271

@@ -270,24 +277,24 @@ You can customize the barcode's background color with the [`backgroundColor`](ht
270277

271278
{% highlight dart %}
272279

273-
@override
274-
Widget build(BuildContext context) {
280+
@override
281+
Widget build(BuildContext context) {
275282
return Scaffold(
276283
backgroundColor: Colors.white,
277284
body: Center(
278-
child: Container(
279-
height: 150,
280-
width: 230,
281-
child: SfBarcodeGenerator(
282-
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
283-
value: '123456789',
284-
symbology: Codabar(),),
285-
)
286-
),
287-
);
288-
}
289-
290-
{% endhighlight %}
285+
child: Container(
286+
height: 150,
287+
width: 230,
288+
child: SfBarcodeGenerator(
289+
backgroundColor: Color.fromRGBO(193, 250, 250, 1),
290+
value: '123456789',
291+
symbology: Codabar(),
292+
),
293+
),
294+
),
295+
);
296+
}
291297

292-
![background color](images/text-customization/background-color.jpg)
298+
{% endhighlight %}
293299

300+
![background color](images/text-customization/background-color.jpg)

0 commit comments

Comments
 (0)