Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions chart-sdk/flutter/barcode-generator/accessibility.md
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
---
layout: post
title: Accessibility in Flutter Barcodes | Syncfusion®
title: Accessibility in Flutter Barcode Generator | Syncfusion®
description: Learn about accessibility support in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including screen readers, keyboard navigation, and more.
platform: chart-sdk
control: SfBarcodeGenerator
documentation: ug
---

# Accessibility in Flutter Barcodes (SfBarcodeGenerator)
# Accessibility in Flutter Barcode Generator (SfBarcodeGenerator)

## Sufficient contrast

Expand All @@ -19,9 +19,9 @@ You can customize colors for the following elements:

## Large fonts

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.
* [Input value of barcode](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/barcode-customization#text-customization)
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 Flutter Barcode Generator.
* [Input value of Barcode Generator](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/barcode-customization#text-customization)

## Screen reader support

The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) supports Flutter's built-in [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) framework, which provides voice-over and TalkBack screen reader support. You can wrap the barcode generator in a [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget and provide a descriptive label using the label property so that screen readers can announce the barcode's input value. Alternatively, the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget can be placed on the parent container holding the [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html). This improves accessibility for visually impaired users, especially since barcodes are inherently visual elements that cannot be interpreted by screen readers without a meaningful label.
The [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html) supports Flutter's built-in [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) framework, which provides voice-over and TalkBack screen reader support. You can wrap the Flutter Barcode Generator in a [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget and provide a descriptive label using the label property so that screen readers can announce the barcode's input value. Alternatively, the [`Semantics`](https://api.flutter.dev/flutter/widgets/Semantics-class.html) widget can be placed on the parent container holding the [`SfBarcodeGenerator`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator-class.html). This improves accessibility for visually impaired users, especially since barcodes are inherently visual elements that cannot be interpreted by screen readers without a meaningful label.
18 changes: 9 additions & 9 deletions chart-sdk/flutter/barcode-generator/barcode-customization.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,21 @@
---
layout: post
title: Customization in Flutter Barcodes | Syncfusion®
title: Customization in Flutter Barcode Generator | Syncfusion®
description: Learn about customization options in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including appearance, sizing, colors, and styling.
platform: chart-sdk
control: SfBarcodeGenerator
documentation: ug
---

# Customization in Flutter Barcodes (SfBarcodeGenerator)
# Customization in Flutter Barcode Generator (SfBarcodeGenerator)

To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation.
To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation.

## Text customization

**Displaying input value**

To display the input value of the barcode, enable its [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property. By default, it is set to false.
To display the input value of the Barcode Generator, enable its [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property. By default, it is set to false.

{% tabs %}

Expand Down Expand Up @@ -52,7 +52,7 @@ To display the input value of the barcode, enable its [`showValue`](https://pub.

**Text style customization**

The text style can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textStyle.html) property of the barcode generator.
The text style can be customized using the [`textStyle`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textStyle.html) property of the Flutter Barcode Generator.

{% tabs %}

Expand Down Expand Up @@ -99,7 +99,7 @@ The text style can be customized using the [`textStyle`](https://pub.dev/documen

**Text spacing**

Control the space between the text and the barcode with the [`textSpacing`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textSpacing.html) property of barcode generator. By default, it is set to 2.
Control the space between the text and the barcode with the [`textSpacing`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textSpacing.html) property of the Flutter Barcode Generator. By default, it is set to 2.

{% tabs %}

Expand Down Expand Up @@ -140,7 +140,7 @@ Control the space between the text and the barcode with the [`textSpacing`](http

**Horizontal text alignment**

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.
The horizontal text alignment can be managed with the [`textAlign`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/textAlign.html) property of the Flutter 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.

{% tabs %}

Expand Down Expand Up @@ -351,7 +351,7 @@ The following code snippet shows the two-dimensional barcode without the [`modul

**Bar color customization**

Customize the barcode's bar color using the [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) property as shown in the following code snippet.
Customize the bar color of the Barcode Generator using the [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) property as shown in the following code snippet.

{% tabs %}

Expand Down Expand Up @@ -391,7 +391,7 @@ Customize the barcode's bar color using the [`barColor`](https://pub.dev/documen

**Background color customization**

You can customize the barcode's background color with the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) property of barcode generator as shown in the following code snippet.
You can customize the background color of the Barcode Generator using the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) property, as shown in the following code snippet.

{% tabs %}

Expand Down
16 changes: 8 additions & 8 deletions chart-sdk/flutter/barcode-generator/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
---
layout: post
title: Getting Started with Flutter Barcodes | Syncfusion®
title: Getting Started with Flutter Barcode Generator | Syncfusion®
description: Learn how to get started with the Syncfusion® Flutter Barcodes (SfBarcodeGenerator). Explore setup, barcode generation, and customization options.
platform: chart-sdk
control: SfBarcodeGenerator
documentation: ug
---

# Getting Started with Flutter Barcodes (SfBarcodeGenerator)
# Getting Started with Flutter Barcode Generator (SfBarcodeGenerator)

This section explains the steps required to add the barcode and set its symbology. This section covers only basic features needed to get started with Syncfusion<sup>&reg;</sup> barcode generator widget.
This section explains the steps required to add the barcode and set its symbology. This section covers only basic features needed to get started with Syncfusion® Flutter Barcode Generator widget.


## Add Flutter Barcode to an application
## Add Flutter Barcode Generator to an application

Create a simple project using the instructions given in the [Getting Started with your first Flutter app](https://docs.flutter.dev/get-started/test-drive#choose-your-ide) documentation.

**Add dependency**

Add the Syncfusion<sup>&reg;</sup> Flutter Barcode dependency to your pubspec.yaml file.
Add the Syncfusion<sup>&reg;</sup> Flutter Barcodes dependency to your pubspec.yaml file.

{% tabs %}

Expand Down Expand Up @@ -99,11 +99,11 @@ Add the Barcode Generator widget as a child of any widget. Here, the widget is a

N> The default symbology of SfBarcodeGenerator is [`Code128`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code128-class.html).

![Initialize barcode generator](images/getting-started/getting_started1.jpg)
![Initialize Barcode Generator](images/getting-started/getting_started1.jpg)

## Initialize QR Code symbology

You can set the required symbology type to the barcode generator based on input value by initializing the [`symbology`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology-class.html) property. In the following code snippet, the QR code is set as the barcode symbology.
You can set the required symbology type to the Flutter Barcode Generator based on input value by initializing the [`symbology`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology-class.html) property. In the following code snippet, the QR code is set as the barcode symbology.

{% tabs %}

Expand Down Expand Up @@ -144,7 +144,7 @@ You can set the required symbology type to the barcode generator based on input

## Display input value

The provided input value can be displayed below the barcode by enabling the [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property of barcode as shown in the following code snippet.
The provided input value can be displayed below the barcode by enabling the [`showValue`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/showValue.html) property of Barcode Generator as shown in the following code snippet.

{% tabs %}

Expand Down
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
---
layout: post
title: How to Add Barcodes in FlutterFlow | Syncfusion®
title: How to Add Barcode Generator in FlutterFlow | Syncfusion®
description: Learn how to add and use Syncfusion® Flutter Barcodes (SfBarcodeGenerator) in FlutterFlow, including setup, integration, and configuration.
platform: chart-sdk
control: SfBarcodeGenerator
documentation: ug
---

# How to Add Barcodes in FlutterFlow (SfBarcodeGenerator)
# How to Add Barcode Generator in FlutterFlow (SfBarcodeGenerator)

## Overview

[FlutterFlow](https://app.flutterflow.io/dashboard) enables you to create native applications using its graphical interface, reducing the need to write extensive amounts of code. Additionally, it offers the capability to include custom widgets that are not included in the default [FlutterFlow](https://app.flutterflow.io/dashboard) widget collection. This article explains how to incorporate our `SfBarcodeGenerator` widget as a custom widget in [FlutterFlow](https://app.flutterflow.io/dashboard).

To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation.
To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation.

### Create a new project

Expand All @@ -30,7 +30,7 @@ Navigate to the [FlutterFlow dashboard](https://app.flutterflow.io/dashboard) an

![Custom Widget](how-to-section-images/custom-widget.png)

### Add the Barcodes widget as a dependency
### Add the Barcode Generator widget as a dependency

1. Click on `+ Add Dependency`; a text editor will appear.
2. Navigate to [Syncfusion<sup>&reg;</sup> Flutter Barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) in [pub.dev](https://pub.dev/) and copy the dependency name and version using the `Copy to Clipboard` option.
Expand Down
8 changes: 4 additions & 4 deletions chart-sdk/flutter/barcode-generator/one-dimensional.md
Original file line number Diff line number Diff line change
@@ -1,17 +1,17 @@
---
layout: post
title: One-Dimensional Symbology in Flutter Barcodes | Syncfusion®
title: One-Dimensional Symbology in Flutter Barcode Generator | Syncfusion®
description: Learn about one-dimensional symbology support in Syncfusion® Flutter Barcodes (SfBarcodeGenerator), including Code128, EAN, UPC, Codabar, and Code39.
platform: chart-sdk
control: SfBarcodeGenerator
documentation: ug
---

# One-Dimensional Symbology in Flutter Barcodes (SfBarcodeGenerator)
# One-Dimensional Symbology in Flutter Barcode (SfBarcodeGenerator)

To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation.
To get started with the Flutter Barcode Generator and set up the package, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation.

One-dimensional barcodes represent data by varying the widths and spacings of parallel lines. These barcode types are also known as linear barcodes. The Syncfusion<sup>&reg;</sup> flutter barcode generator supports the following one-dimensional barcode types:
One-dimensional barcodes represent data by varying the widths and spacings of parallel lines. These barcode types are also known as linear barcodes. The Syncfusion® Flutter Barcode Generator supports the following one-dimensional barcode types:

* [`Codabar`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Codabar-class.html)
* [`Code39`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Code39-class.html)
Expand Down
6 changes: 3 additions & 3 deletions chart-sdk/flutter/barcode-generator/overview.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,9 +11,9 @@ documentation: ug

The Syncfusion<sup>&reg;</sup> Flutter Barcode Generator is a data visualization widget designed to generate and display data in a machine-readable format. It offers an efficient way to encode text using supported symbology types.

To get started with the Flutter Barcode Generator, refer to the [Getting Started with Flutter Barcodes](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation.
To get started with the Flutter Barcode Generator, refer to the [Getting Started with Flutter Barcode Generator](https://help.syncfusion.com/chart-sdk/flutter/barcode-generator/getting-started) documentation.

![Overview flutter barcode](images/getting-started/overview1.jpg)
![Overview Flutter Barcode Generator](images/getting-started/overview1.jpg)

![Overview flutter QR Code](images/getting-started/getting_started3.jpg)

Expand All @@ -29,4 +29,4 @@ To quickly get started with our Flutter Barcode Generator widget, watch the tuto
* **Barcode customization** - Customize the visual appearance of barcodes using the [`backgroundColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/backgroundColor.html) and [`barColor`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/SfBarcodeGenerator/barColor.html) properties and adjust the size of smallest line or dot of the code using the [`module`](https://pub.dev/documentation/syncfusion_flutter_barcodes/latest/barcodes/Symbology/module.html) property.
* **Text customization** - Configure to display the barcode value and customize the position and style of the barcode text.

You can get the barcode sample in the following link: [`Flutter Barcode Examples`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes).
You can get the barcode sample in the following link: [`Flutter Barcode Generator Examples`](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes).
Loading