Skip to content

Updated the Overview page of UG documentation #1463

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Harsha-SF4223 wants to merge 1 commit into
base: development
Choose a base branch
from
Open

Updated the Overview page of UG documentation #1463

Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
364 changes: 316 additions & 48 deletions Flutter/introduction/overview.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,71 +1,339 @@
---
layout: post
title: Overview of Syncfusion<sup>&reg;</sup> Flutter Widgets | Syncfusion
description: Step‑by‑step guide to Syncfusion Flutter widgets, covering key features, documentation structure, API references, code examples, demos, video tutorials, and support resources for building high‑quality cross‑platform applications.
platform: flutter
title: Overview of Syncfusion® Essential Studio® Flutter Products
description: Discover Syncfusion Flutter widgets, supported platforms, and resources to help you get started quickly.
platform: Flutter
control: Overview
documentation: ug
documentation: UG
---

# Overview of Syncfusion<sup>&reg;</sup> Flutter Widgets Documentation
# Welcome to Syncfusion® Essential Studio® for Flutter

The Syncfusion<sup>&reg;</sup> [Flutter Widgets](https://www.syncfusion.com/flutter-widgets) are a set of [advanced custom widgets and file formats packages](https://pub.dev/publishers/syncfusion.com/packages) needed to create rich and high-quality cross-platform applications in iOS, Android, and Web using a single code base. This article gives you a quick overview of how to read the Flutter widgets documentation and other help resources such as video tutorials, code examples, demos, and the knowledge base.
Syncfusion<sup>®</sup> Essential Studio<sup>®</sup> for Flutter is a comprehensive suite of Flutter widgets for building modern, cross-platform mobile, web, and desktop applications. It provides high-performance, feature-rich widgets like Charts, DataGrid, Calendar, and more to help developers create visually appealing and responsive applications with ease.

## How to best read this user guide
![Syncfusion Flutter banner preview.](../images/flutter-banner.png){:width="900" height="500" loading="lazy" class="right-section-image" }

* The best way to read the user guide is to start with the Getting Started section of the documentation for the [widget or library](https://help.syncfusion.com/flutter/introduction/widgets-catalog) that you need. The Getting Started guide provides the needed information to write the code. This is the only section recommended for end-to-end reading before writing the code. All other information can be referred when needed. The [widgets catalog](https://help.syncfusion.com/flutter/introduction/widgets-catalog) section helps you find the user guide link and its package in [pub.dev](https://pub.dev/publishers/syncfusion.com/packages).
* Once you are familiar with the basics of using the widget, the next step would be to start integrating the library into your application. It is very likely that you would find a code example that resembles your intended usage scenario.
* After you have integrated the component into your application, it is likely that you would need additional information on specific features and API. Search the specific topic using the search box available at the top of the user guide.
## Supported Platforms

## Additional help resources

The user guide itself has enough information to get you up and running. However, there are other valuable resources you must be aware of.

### API References

The [API reference](https://help.syncfusion.com/flutter/introduction/api-reference) is a valuable resource that provides detailed information on the classes and its members.

### Widget Examples

The [widgets examples section](https://help.syncfusion.com/flutter/introduction/widget-examples) contains the GitHub link for each widget’s codes examples. This is very useful when you want to learn by practice.

### Knowledge Base

The Knowledge Base section contains responses for some of the most common questions other customers had asked in the past. You can search for topics that are not covered in the user guide.
Similar to the Knowledge Base, the [Forum section](https://www.syncfusion.com/forums/flutter) also contains responses for questions asked in the past.
<table>
<thead>
<tr>
<th>Target Platform</th>
<th>Supported Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>Android</td>
<td>5.0 (API 21) or higher</td>
</tr>
<tr>
<td>iOS</td>
<td>11.0 or higher</td>
</tr>
<tr>
<td>Web</td>
<td>Latest Chrome, Firefox, Safari, Edge</td>
</tr>
<tr>
<td>Windows</td>
<td>Windows 10 (v1809+) or higher</td>
</tr>
<tr>
<td>macOS</td>
<td>macOS 10.14 or higher</td>
</tr>
<tr>
<td>Linux</td>
<td>Latest stable distributions</td>
</tr>
</tbody>
</table>

### Video Tutorials
## Flutter Controls List

Video tutorials of our widgets can be found [here](https://www.syncfusion.com/tutorial-videos).
<style>
#table
{
border:0 !important;
line-height: 160% !important;
}
tr
{
border:0 !important;
}
td
{
border:0 !important;
vertical-align: top;
}
.controlanchorlink {
font-size: 14px !important;
text-decoration: none !important;
text-align: left !important;
padding: 2px 0px;
}
.category-topics {
font-size: 14px !important;
font-weight: 500 !important;
border: 0 !important;
line-height: 20px;
margin-top: 20px;
margin-bottom: 0px;
}
.category {
font-size: 14px !important;
font-weight: 500 !important;
border: 0 !important;
text-align: left !important;
line-height: 20px;
padding-top: 20px;
}
[class^="sf-icon-"], [class*=" sf-icon-"] {
font-family: 'UI Control Icons' !important;
speak: none;
top:4px;
color: #3c78ef;
font-size: 20px;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
padding-right: 10px;
position: relative;
}
</style>

## Demos
<table id="table">
<tbody>
<colgroup>
<col style="width: 33%">
<col style="width: 33%">
<col style="width: 34%">
</colgroup>
<tr>
<td>
<!-- Data Visualization -->
<div>
<p class="category-topics">DATA VISUALIZATION</p>
</div>
<div class="controlanchorlink">
<a href="../cartesian-charts/overview.md">
<span class="sf-home-icon sf-icon-Cartesian-chart"></span>Cartesian Charts
</a>
</div>
<div class="controlanchorlink">
<a href="../circular-charts/overview.md">
<span class="sf-home-icon sf-icon-circular-chart"></span>Circular Charts
</a>
</div>
<div class="controlanchorlink">
<a href="../funnel-chart/overview.md">
<span class="sf-home-icon sf-icon-funnel-chart"></span>Funnel Chart
</a>
</div>
<div class="controlanchorlink">
<a href="../pyramid-chart/overview.md">
<span class="sf-home-icon sf-icon-pyramid-chart"></span>Pyramid Chart
</a>
</div>
<div class="controlanchorlink">
<a href="../sparkcharts/overview.md">
<span class="sf-home-icon sf-icon-spark-chart"></span>Spark Charts
</a>
</div>
<div class="controlanchorlink">
<a href="../maps/overview.md">
<span class="sf-home-icon sf-icon-maps"></span>Maps
</a>
</div>
<div class="controlanchorlink">
<a href="../treemap/overview.md">
<span class="sf-home-icon sf-icon-tree-map"></span>Treemap
</a>
</div>
<div class="controlanchorlink">
<a href="../linear-gauge/overview.md">
<span class="sf-home-icon sf-icon-linear-gauge"></span>Linear Gauge
</a>
</div>
<div class="controlanchorlink">
<a href="../radial-gauge/overview.md">
<span class="sf-home-icon sf-icon-radial-gauge"></span>Radial Gauge
</a>
</div>
</td>
<td>
<!-- Data Management -->
<div>
<p class="category-topics">DATA MANAGEMENT</p>
</div>
<div class="controlanchorlink">
<a href="../datagrid/overview.md">
<span class="sf-home-icon sf-icon-data-grid"></span>DataGrid
</a>
</div>
<div class="controlanchorlink">
<a href="../calendar/overview.md">
<span class="sf-home-icon sf-icon-calendars"></span>Calendar
</a>
</div>
<div class="controlanchorlink">
<a href="../DateRangePicker/overview.md">
<span class="sf-home-icon sf-icon-date-picker"></span>Date Range Picker
</a>
</div>
<div class="controlanchorlink">
<a href="../barcode/overview.md">
<span class="sf-home-icon sf-icon-barcode-generator"></span>Barcode Generator
</a>
</div>
<!-- Inputs & Editors -->
<div>
<p class="category-topics">INPUTS & EDITORS</p>
</div>
<div class="controlanchorlink">
<a href="../slider/overview.md">
<span class="sf-home-icon sf-icon-slider"></span>Slider
</a>
</div>
<div class="controlanchorlink">
<a href="../range-slider/overview.md">
<span class="sf-home-icon sf-icon-range-slider"></span>Range Slider
</a>
</div>
<div class="controlanchorlink">
<a href="../range-selector/overview.md">
<span class="sf-home-icon sf-icon-range-selector"></span>Range Selector
</a>
</div>
<div class="controlanchorlink">
<a href="../signaturepad/overview.md">
<span class="sf-home-icon sf-icon-signature-pad"></span>Signature Pad
</a>
</div>
</td>
<td>
<!-- Utilities -->
<div>
<p class="category-topics">UTILITIES</p>
</div>
<div class="controlanchorlink">
<a href="../chat/overview.md">
<span class="sf-home-icon sf-icon-chat"></span>Chat
</a>
</div>
<div class="controlanchorlink">
<a href="../ai-assistview/overview.md">
<span class="sf-home-icon sf-icon-ai-assistance"></span>AI AssistView
</a>
</div>
</td>
</tr>
</tbody>
</table>

Explore the full capabilities of our Flutter widgets on your device by installing our sample browser applications from the below app stores, and view code samples in GitHub.
## Additional Resources

<style>

tr, td, th
{
border: 0!important;
.form-card {
flex: 0 0 calc(33.33% - 14px);
border: 1px solid #ddd;
border-radius: 12px;
overflow: hidden;
background: white;
box-sizing: border-box;
transition: 0.3s ease;
}
.form-card:hover {
text-decoration: none;
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.form-content {
padding: 16px;
}
.form-title {
margin-top: 0px;
margin: 0 0 10px;
font-size: 20px;
font-weight: 600;
color: #000000;
}
.form-link {
color: #0078D4;
text-decoration: none;
}
.form-description {
margin-top: 14px;
font-size: 13px;
color: #000000;
line-height: 1.6;
}
</style>

<table>
<tr>
<div style="display:flex; flex-wrap:wrap; gap:20px; margin-top:20px;">
<!-- Card 1 -->
<a href="https://www.syncfusion.com/flutter-widgets" class="form-card" target="_blank">
<div class="form-content">
<h3 class="form-title">Feature Tour</h3>
<div class="form-description">
Walk through highlights and core capabilities.
</div>
</div>
</a>
<!-- Card 2 -->
<a href="https://github.com/syncfusion/flutter-examples" class="form-card" target="_blank">
<div class="form-content">
<h3 class="form-title">Showcase Samples</h3>
<div class="form-description">
Explore sample scenarios for real apps.
</div>
</div>
</a>
<!-- Card 3 -->
<a href="https://www.syncfusion.com/tutorial-videos/flutter" class="form-card" target="_blank">
<div class="form-content">
<h3 class="form-title">Tutorial Videos</h3>
<div class="form-description">
Step‑by‑step guidance through video tutorials.
</div>
</div>
</a>
<!-- Card 4 -->
<a href="https://support.syncfusion.com/kb/flutter" class="form-card" target="_blank">
<div class="form-content">
<h3 class="form-title">Explore KB's</h3>
<div class="form-description">
Find quick solutions and step‑by‑step guidance.
</div>
</div>
</a>
<!-- Card 5 -->
<a href="https://www.syncfusion.com/blogs/category/flutter" class="form-card" target="_blank">
<div class="form-content">
<h3 class="form-title">Explore Blogs</h3>
<div class="form-description">
Read insights, tutorials, and developer journeys.
</div>
</div>
</a>
</div>

<td> <a href="https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples"><img alt="Flutter Google Play Store" src="https://cdn.syncfusion.com/content/images/FTControl/google-play-store.png"/></a></td>
<td> <a href="https://flutter.syncfusion.com"><img alt="Flutter Web Sample Browser" src="https://cdn.syncfusion.com/content/images/FTControl/web-sample-browser.png"/></a> </td>
<td> <a href="https://www.microsoft.com/en-us/p/syncfusion-flutter-gallery/9nhnbwcsf85d?activetab=pivot:overviewtab"><img alt="Flutter Windows Store" src="https://cdn.syncfusion.com/content/images/FTControl/windows-store.png"/></a> </td>
</tr>

<tr>
<td> <a href="https://snapcraft.io/syncfusion-flutter-gallery"><img alt="Flutter Snap Store" src="https://cdn.syncfusion.com/content/images/FTControl/snap-store.png"/></a></td>
<td> <a href="https://github.com/syncfusion/flutter-examples"><img alt="Flutter GitHub Samples" src="https://cdn.syncfusion.com/content/images/FTControl/github-samples.png"/></a></td>
## Support and Feedback

</tr>
</table>
If you cannot find the information you are looking for in the self-help resources mentioned above, please contact us by creating a [support ticket](https://support.syncfusion.com/support/tickets/create).

If you do not find what you need, please make a request in our [feedback portal](https://www.syncfusion.com/feedback/flutter).

## See Also

## Create a support incident
In case, you are not able to find the information that you are looking for in the self-help resources mentioned above, please [contact](https://www.syncfusion.com/support/directtrac/incidents) us by creating a support ticket.
- [Getting Started with Syncfusion® Flutter DataGrid](../datagrid/getting-started.md)
- [Getting Started with Syncfusion® Flutter Cartesian Chart](../cartesian-charts/getting-started.md)
- [Getting Started with Syncfusion® Flutter Calendar](../calendar/getting-started.md)
- [Getting Started with Syncfusion® Flutter Maps](../maps/getting-started.md)

---

*Thank you for choosing Syncfusion Flutter controls. Happy coding!*