diff --git a/Flutter/images/flutter-banner.png b/Flutter/images/flutter-banner.png new file mode 100644 index 000000000..9a5ea2840 Binary files /dev/null and b/Flutter/images/flutter-banner.png differ diff --git a/Flutter/introduction/overview.md b/Flutter/introduction/overview.md index 4e8286c68..137e698bd 100644 --- a/Flutter/introduction/overview.md +++ b/Flutter/introduction/overview.md @@ -1,71 +1,520 @@ --- layout: post -title: Overview of Syncfusion® 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. +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® Flutter Widgets Documentation +# Welcome to Syncfusion® Essential Studio® for Flutter -The Syncfusion® [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® Essential Studio® 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 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Target PlatformSupported Version
Android24 or higher
iOS13.0 or higher
WebLatest Chrome, Firefox, Edge, and Safari (15.6 or later)
WindowsWindows 10 or higher
macOSmacOS 10.15 or higher
LinuxUbuntu 20.04 LTS to 24.04 LTS
+ +## Controls List -The user guide itself has enough information to get you up and running. However, there are other valuable resources you must be aware of. + -### Widget Examples + + +++++ + + + + + + +
+ +
+

DATA VISUALIZATION

+
+
+ + Cartesian Charts + +
+
+ + Circular Charts + +
+
+ + Funnel Chart + +
+
+ + Pyramid Chart + +
+
+ + Spark Charts + +
+
+ + Maps + +
+
+ + Barcode Generator + +
+
+ + Treemap + +
+
+ + Radial Gauge + +
+
+ + Linear Gauge + +
+		 + +
+

SLIDERS

+
+
+ + Slider + +
+
+ + Range Slider + +
+
+ + Range Selector + +
-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. +
+

EDITORS

+
+
+ + Signature Pad + +
+		 + +
+

DATA MANAGEMENT

+
+
+ + DataGrid + +
+
+ + Calendar + +
+
+ + Date Range Picker + +
-### Knowledge Base +
+

CONVERSATIONAL UI

+
+
+ + Chat + +
+
+ + AI AssistView + +
+
-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. +
-### Video Tutorials +## Resources -Video tutorials of our widgets can be found [here](https://www.syncfusion.com/tutorial-videos). + - - +.form-card:hover { + transform: translateY(-3px); + text-decoration: none; + box-shadow: 0 10px 25px rgba(0,0,0,0.08); +} - - - - - - - - +.form-content { + display: flex; + flex-direction: column; + gap: 6px; +} - -
Flutter Google Play Store Flutter Web Sample Browser Flutter Windows Store
Flutter Snap Store Flutter GitHub Samples
+.icon-circle { + width: 36px; + height: 36px; + border-radius: 50%; + background: #EAF3FF; + display: flex; + flex-shrink: 0; + align-items: center; + justify-content: center; +} + +.card-icon { + font-family: 'Toolkit Icons' !important; + font-size: 16px; + line-height: 1; + color: #0A76FF; +} + +.form-title { + font-size: 16px; + font-weight: 500; + margin: 0 !important; + color: #2d2d2d; +} + +.form-description { + font-size: 14px; + margin: 0; + min-height: 60px; + color: #50565F; + line-height: 1.5; +} + +.card-header { + display: flex; + align-items: center; + gap: 12px; +} + +.card-header .form-title { + margin-top: 0 !important; + line-height: 1.2; +} + +.explore-link { + margin-top: auto; + color: #0A76FF; + font-size: 12; + font-weight: 400; + display: flex; + align-items: center; + gap: 6px; +} + +.explore-link .card-icon { + font-size: 16px; +} + + + +
+ +
+
+
+
+ +
+

Feature Tour

+
+
Get a quick overview of key features and capabilities to kick start your journey.
+ +Explore Features + + +
+
+ +
+
+
+
+ +
+

Showcase Samples

+
+
Explore real-world sample apps to see components in action and learn by example.
+ + View Samples + + +
+
+ +
+
+
+
+ +
+

Tutorial Videos

+
+
+ Watch step‑by‑step video guides to quickly understand concepts and implementation. +
+ + Watch now + + +
+
+ +
+
+
+
+ +
+

Knowledge Base

+
+
+ Find practical solutions, troubleshooting tips and how‑to guides for common scenarios. +
+ +Search KB's + + +
+
+ +
+
+
+
+ +
+

Blogs

+
+
+ Discover in‑depth articles, use cases and expert insights from our developers. +
+ +Read Blogs + + +
+
+
-## 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. +## Support and feedback +
+
+
+
+
+ +
+

Support Ticket

+
+
+ Need assistance? Submit a support ticket and our team will help you resolve your issue quickly. +
+ Open ticket + + +
+
+
+
+
+
+ +
+

Feedback Portal

+
+
+ Have a suggestion or feature request? Share your ideas in our Feedback Portal to help us improve. +
+ Share Feedback + + +
+
+