diff --git a/README.md b/README.md
index ed8e4f1b..c0b8a79e 100644
--- a/README.md
+++ b/README.md
@@ -1,109 +1,16 @@
+# flutter_examples
-# Syncfusion Flutter Examples
+This project contains the Syncfusion Flutter UI widgets examples.
-This repository contains the demos of Syncfusion Flutter UI widgets. This is the best place to check our widgets to get more insight about the usage of APIs. You can also check our widgets by installing the [sample browser application](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en) from Google Play Store, in which you can browse the demos for all the available widgets and view the source code of each example within the app itself.
+## Getting Started
-DATA VISUALIZATION |
-| [Cartesian Charts](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts) | [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) | Plot over 30 chart types ranging from line charts to financial charts. |
-| [Circular Charts](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/circular_charts) | [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) | Visualize the data using pie, doughnut, and radial bar charts. |
-| [Pyramid Chart](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/pyramid_charts) | [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) | Visualize the organized data using pyramid chart. |
-| [Funnel Chart](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/funnel_charts) | [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) | Visualize the sequential data using funnel chart. |
-| [Radial Gauge](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge) | [syncfusion_flutter_gauges](https://pub.dev/packages/syncfusion_flutter_gauges) | Visualize one or multiple measures on a circular scale with pointers and ranges. |
-| [Barcodes](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes) | [syncfusion_flutter_barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) | Generate and display data in machine-readable 1D and 2D barcodes. |
-| [Maps](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps) | [syncfusion_flutter_maps](https://pub.dev/packages/syncfusion_flutter_maps) | Easily visualize data over a geographical area. |
-| [Circular ProgressBar](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar) | [syncfusion_flutter_gauges](https://pub.dev/packages/syncfusion_flutter_gauges) | Designed using Radial Gauge widget. Indicates the progress of a task with customizable visuals. |
-| GRIDS |
-| [DataGrid](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/datagrid) | [syncfusion_flutter_datagrid](https://pub.dev/packages/syncfusion_flutter_datagrid) | Displays large amounts of data with different data types in a tabular view |
-| CALENDARVIEWER |
-| [PDF Viewer](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/pdf_viewer) | [syncfusion_flutter_pdfviewer](https://pub.dev/packages/syncfusion_flutter_pdfviewer) | View the PDF document seamlessly and efficiently |
-| FILE FORMATS |
-| [PDF](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/pdf) | [syncfusion_flutter_pdf](https://pub.dev/packages/syncfusion_flutter_pdf) | Create PDF document with text, images and tables. |
-| [XlsIO](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/xlsio) | [syncfusion_flutter_xlsio](https://pub.dev/packages/syncfusion_flutter_xlsio) | Create Excel documents with text, numbers, cell formatting, formulas, charts, images, and more. |
-| SLIDERS |
-| [Slider](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider) | [syncfusion_flutter_sliders](https://pub.dev/packages/syncfusion_flutter_sliders) | Select a date or numeric value. |
-| [Range Slider](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_slider) | [syncfusion_flutter_sliders](https://pub.dev/packages/syncfusion_flutter_sliders) | Select a date or numeric range. |
-| [Range Selector](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector) | [syncfusion_flutter_sliders](https://pub.dev/packages/syncfusion_flutter_sliders) | Visualize data and select a date or numeric range. |
-| SIGNATURE PAD |
-| [Signature Pad](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/signature_pad) | [syncfusion_flutter_signaturepad](https://pub.dev/packages/syncfusion_flutter_signaturepad) | Captures the signature and save it as an image to sync across devices and documents. |
-
-##
-
-
-
-
-##
-
- Axis types
- Created with Sketch.
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/images/back.png b/images/back.png
deleted file mode 100644
index ed3e8d73..00000000
Binary files a/images/back.png and /dev/null differ
diff --git a/images/ball.png b/images/ball.png
index 22adafd7..4ee38ad9 100644
Binary files a/images/ball.png and b/images/ball.png differ
diff --git a/images/ball_progressbar.png b/images/ball_progressbar.png
new file mode 100644
index 00000000..22adafd7
Binary files /dev/null and b/images/ball_progressbar.png differ
diff --git a/images/bike.png b/images/bike.png
deleted file mode 100644
index 2165945d..00000000
Binary files a/images/bike.png and /dev/null differ
diff --git a/images/cancer_day.png b/images/cancer_day.png
new file mode 100644
index 00000000..e5676673
Binary files /dev/null and b/images/cancer_day.png differ
diff --git a/images/car.png b/images/car.png
deleted file mode 100644
index 90bcd2f2..00000000
Binary files a/images/car.png and /dev/null differ
diff --git a/images/close.png b/images/close.png
deleted file mode 100644
index ba1339be..00000000
Binary files a/images/close.png and /dev/null differ
diff --git a/images/environment_day.png b/images/environment_day.png
new file mode 100644
index 00000000..4839119c
Binary files /dev/null and b/images/environment_day.png differ
diff --git a/images/external.png b/images/external.png
deleted file mode 100644
index f50238b0..00000000
Binary files a/images/external.png and /dev/null differ
diff --git a/images/golfball.png b/images/golfball.png
deleted file mode 100644
index 1abcfeb8..00000000
Binary files a/images/golfball.png and /dev/null differ
diff --git a/images/golfball2.png b/images/golfball2.png
deleted file mode 100644
index 8c8b7b6a..00000000
Binary files a/images/golfball2.png and /dev/null differ
diff --git a/images/golfball3.png b/images/golfball3.png
deleted file mode 100644
index edf9b7ab..00000000
Binary files a/images/golfball3.png and /dev/null differ
diff --git a/images/grouping_dark.png b/images/grouping_dark.png
new file mode 100644
index 00000000..fbffec0e
Binary files /dev/null and b/images/grouping_dark.png differ
diff --git a/images/grouping_light.png b/images/grouping_light.png
new file mode 100644
index 00000000..1ca3177c
Binary files /dev/null and b/images/grouping_light.png differ
diff --git a/images/happiness_day.png b/images/happiness_day.png
new file mode 100644
index 00000000..5c1a6a97
Binary files /dev/null and b/images/happiness_day.png differ
diff --git a/images/health_day.png b/images/health_day.png
new file mode 100644
index 00000000..54faf93e
Binary files /dev/null and b/images/health_day.png differ
diff --git a/images/info.png b/images/info.png
deleted file mode 100644
index 037db7a9..00000000
Binary files a/images/info.png and /dev/null differ
diff --git a/images/information.svg b/images/information.svg
deleted file mode 100644
index d2c68dfc..00000000
--- a/images/information.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
- Information
- Created with Sketch.
-
-
-
\ No newline at end of file
diff --git a/images/jpg.png b/images/jpg.png
deleted file mode 100644
index 7b5e5168..00000000
Binary files a/images/jpg.png and /dev/null differ
diff --git a/images/legend.png b/images/legend.png
deleted file mode 100644
index 2cc5d247..00000000
Binary files a/images/legend.png and /dev/null differ
diff --git a/images/legend.svg b/images/legend.svg
deleted file mode 100644
index f7f721c0..00000000
--- a/images/legend.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-
-
-
- Legend
- Created with Sketch.
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/images/live_update.png b/images/live_update.png
deleted file mode 100644
index cf654fd2..00000000
Binary files a/images/live_update.png and /dev/null differ
diff --git a/images/live_update.svg b/images/live_update.svg
deleted file mode 100644
index 6f1bb4f4..00000000
--- a/images/live_update.svg
+++ /dev/null
@@ -1,17 +0,0 @@
-
-
-
- Live Update
- Created with Sketch.
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/images/man1.png b/images/man1.png
deleted file mode 100644
index 41a43b6d..00000000
Binary files a/images/man1.png and /dev/null differ
diff --git a/images/man2.png b/images/man2.png
deleted file mode 100644
index 9f57e4c5..00000000
Binary files a/images/man2.png and /dev/null differ
diff --git a/images/man3.png b/images/man3.png
deleted file mode 100644
index b66040d8..00000000
Binary files a/images/man3.png and /dev/null differ
diff --git a/images/maps-chichen-itza.jpg b/images/maps-chichen-itza.jpg
new file mode 100644
index 00000000..d2e253e2
Binary files /dev/null and b/images/maps-chichen-itza.jpg differ
diff --git a/images/maps-christ-the-redeemer.jpg b/images/maps-christ-the-redeemer.jpg
new file mode 100644
index 00000000..c98fa872
Binary files /dev/null and b/images/maps-christ-the-redeemer.jpg differ
diff --git a/images/maps-colosseum.jpg b/images/maps-colosseum.jpg
new file mode 100644
index 00000000..f02ba0a7
Binary files /dev/null and b/images/maps-colosseum.jpg differ
diff --git a/images/maps-great-wall-of-china.png b/images/maps-great-wall-of-china.png
new file mode 100644
index 00000000..440a3507
Binary files /dev/null and b/images/maps-great-wall-of-china.png differ
diff --git a/images/maps-machu-picchu.jpg b/images/maps-machu-picchu.jpg
new file mode 100644
index 00000000..e83902dc
Binary files /dev/null and b/images/maps-machu-picchu.jpg differ
diff --git a/images/maps-petra.jpg b/images/maps-petra.jpg
new file mode 100644
index 00000000..6405b64a
Binary files /dev/null and b/images/maps-petra.jpg differ
diff --git a/images/maps-tajmahal.jpg b/images/maps-tajmahal.jpg
new file mode 100644
index 00000000..03714277
Binary files /dev/null and b/images/maps-tajmahal.jpg differ
diff --git a/images/menu.png b/images/menu.png
deleted file mode 100644
index d8d8abe8..00000000
Binary files a/images/menu.png and /dev/null differ
diff --git a/images/open_arrow.png b/images/open_arrow.png
deleted file mode 100644
index dccc6ab5..00000000
Binary files a/images/open_arrow.png and /dev/null differ
diff --git a/images/other_features.png b/images/other_features.png
deleted file mode 100644
index 44b8af72..00000000
Binary files a/images/other_features.png and /dev/null differ
diff --git a/images/other_features.svg b/images/other_features.svg
deleted file mode 100644
index da4424b8..00000000
--- a/images/other_features.svg
+++ /dev/null
@@ -1,22 +0,0 @@
-
-
-
- Other Features
- Created with Sketch.
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/images/pdficon.png b/images/pdficon.png
deleted file mode 100644
index 600f5470..00000000
Binary files a/images/pdficon.png and /dev/null differ
diff --git a/images/png.png b/images/png.png
deleted file mode 100644
index 5ff9e6c6..00000000
Binary files a/images/png.png and /dev/null differ
diff --git a/images/radial_range_slider.png b/images/radial_range_slider.png
new file mode 100644
index 00000000..78a6e366
Binary files /dev/null and b/images/radial_range_slider.png differ
diff --git a/images/radial_slider.png b/images/radial_slider.png
new file mode 100644
index 00000000..fa0d7a72
Binary files /dev/null and b/images/radial_slider.png differ
diff --git a/images/settings.png b/images/settings.png
deleted file mode 100644
index 491c9ab1..00000000
Binary files a/images/settings.png and /dev/null differ
diff --git a/images/settings.svg b/images/settings.svg
deleted file mode 100644
index c34147a6..00000000
--- a/images/settings.svg
+++ /dev/null
@@ -1,9 +0,0 @@
-
-
-
- Settings
- Created with Sketch.
-
-
-
\ No newline at end of file
diff --git a/images/sparkline_winloss.png b/images/sparkline_winloss.png
new file mode 100644
index 00000000..11ab1cbf
Binary files /dev/null and b/images/sparkline_winloss.png differ
diff --git a/images/tourism_day.png b/images/tourism_day.png
new file mode 100644
index 00000000..74c461e8
Binary files /dev/null and b/images/tourism_day.png differ
diff --git a/images/user_interaction.png b/images/user_interaction.png
deleted file mode 100644
index b7e08c02..00000000
Binary files a/images/user_interaction.png and /dev/null differ
diff --git a/images/user_interaction.svg b/images/user_interaction.svg
deleted file mode 100644
index fe75543f..00000000
--- a/images/user_interaction.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-
-
-
- User Interaction
- Created with Sketch.
-
-
-
-
-
-
-
-
-
-
-
\ No newline at end of file
diff --git a/images/whatsnew.png b/images/whatsnew.png
deleted file mode 100644
index a3dbab39..00000000
Binary files a/images/whatsnew.png and /dev/null differ
diff --git a/images/xlsio/assets.png b/images/xlsio/assets.png
new file mode 100644
index 00000000..22607b09
Binary files /dev/null and b/images/xlsio/assets.png differ
diff --git a/images/xlsio/categories.png b/images/xlsio/categories.png
new file mode 100644
index 00000000..09548587
Binary files /dev/null and b/images/xlsio/categories.png differ
diff --git a/images/xlsio/liabilities.png b/images/xlsio/liabilities.png
new file mode 100644
index 00000000..b50a7043
Binary files /dev/null and b/images/xlsio/liabilities.png differ
diff --git a/ios/Runner/AppDelegate.m b/ios/Runner/AppDelegate.m
index cca4eb62..65354c17 100644
--- a/ios/Runner/AppDelegate.m
+++ b/ios/Runner/AppDelegate.m
@@ -7,7 +7,7 @@ - (BOOL)application:(UIApplication *)application
didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
FlutterViewController* controller =(FlutterViewController*) self.window.rootViewController;
- FlutterMethodChannel* viewPdfFileChannel = [FlutterMethodChannel methodChannelWithName:@"launchFile" binaryMessenger: controller];
+ FlutterMethodChannel* viewPdfFileChannel = [FlutterMethodChannel methodChannelWithName:@"launchFile" binaryMessenger: controller.binaryMessenger];
[viewPdfFileChannel setMethodCallHandler:^(FlutterMethodCall* call, FlutterResult result) {
if ([@"viewPdf" isEqualToString:call.method] || [@"viewExcel" isEqualToString:call.method]) {
@@ -17,7 +17,7 @@ - (BOOL)application:(UIApplication *)application
if(fileExist){
NSString* fileExtension = [filePath pathExtension];
_uiController = [UIDocumentInteractionController interactionControllerWithURL:[NSURL fileURLWithPath:filePath]];
- _uiController.delegate = self;
+ _uiController.delegate = (id)self;
if([fileExtension isEqualToString:@"pdf"]){
_uiController.UTI = @"com.adobe.pdf";
}
diff --git a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png
index cb3f7ce9..b86f2dfb 100644
Binary files a/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png and b/ios/Runner/Assets.xcassets/AppIcon.appiconset/Icon-App-1024x1024@1x.png differ
diff --git a/lib/model/helper.dart b/lib/model/helper.dart
index 4b892160..09e0964b 100644
--- a/lib/model/helper.dart
+++ b/lib/model/helper.dart
@@ -8,8 +8,6 @@ import 'package:url_launcher/url_launcher.dart';
/// Local imports
import '../widgets/bottom_sheet.dart';
import '../widgets/flutter_backdrop.dart';
-import '../widgets/shared/mobile.dart'
- if (dart.library.html) '../widgets/shared/web.dart';
import 'mobile_view.dart';
import 'model.dart';
import 'sample_view.dart';
@@ -170,14 +168,12 @@ class _FullViewSampleLayout extends StatelessWidget {
child: Container(
height: 40,
width: 40,
- child: HandCursor(
- child: IconButton(
- icon: Image.asset('images/code.png',
- color: Colors.white),
- onPressed: () {
- launch(sample.codeLink);
- },
- ),
+ child: IconButton(
+ icon: Image.asset('images/code.png',
+ color: Colors.white),
+ onPressed: () {
+ launch(sample.codeLink);
+ },
),
),
)
@@ -187,15 +183,13 @@ class _FullViewSampleLayout extends StatelessWidget {
child: Container(
height: 40,
width: 40,
- child: HandCursor(
- child: IconButton(
- icon: Image.asset('images/info.png',
- color: Colors.white),
- onPressed: () {
- frontPanelVisible.value =
- !frontPanelVisible.value;
- },
- ),
+ child: IconButton(
+ icon: Icon(Icons.info_outline,
+ color: Colors.white),
+ onPressed: () {
+ frontPanelVisible.value =
+ !frontPanelVisible.value;
+ },
),
),
),
@@ -208,14 +202,12 @@ class _FullViewSampleLayout extends StatelessWidget {
child: Container(
height: 40,
width: 40,
- child: HandCursor(
- child: IconButton(
- icon: Image.asset('images/code.png',
- color: Colors.white),
- onPressed: () {
- launch(sample.codeLink);
- },
- ),
+ child: IconButton(
+ icon: Image.asset('images/code.png',
+ color: Colors.white),
+ onPressed: () {
+ launch(sample.codeLink);
+ },
),
),
),
@@ -652,7 +644,7 @@ Widget getLeftSideDrawer(SampleModel _model) {
)),
Align(
alignment: Alignment.bottomCenter,
- child: Text('Version 18.3.35',
+ child: Text('Version 18.4.30',
style: TextStyle(
color: _model.drawerTextIconColor,
fontSize: 12,
@@ -696,46 +688,37 @@ Widget getFooter(BuildContext context, SampleModel model) {
children: [
Row(
children: [
- HandCursor(
- child: InkWell(
- child: const Text('Documentation',
- style: TextStyle(color: Colors.blue, fontSize: 12)),
- onTap: () => launch(
- 'https://help.syncfusion.com/flutter/introduction/overview'),
- ),
+ InkWell(
+ child: const Text('Documentation',
+ style: TextStyle(color: Colors.blue, fontSize: 12)),
+ onTap: () => launch(
+ 'https://help.syncfusion.com/flutter/introduction/overview'),
),
Text(' | ',
style: TextStyle(
fontSize: 12, color: model.textColor.withOpacity(0.7))),
- HandCursor(
- child: InkWell(
- child: const Text('Forum',
- style: TextStyle(color: Colors.blue, fontSize: 12)),
- onTap: () =>
- launch('https://www.syncfusion.com/forums/flutter'),
- ),
+ InkWell(
+ child: const Text('Forum',
+ style: TextStyle(color: Colors.blue, fontSize: 12)),
+ onTap: () =>
+ launch('https://www.syncfusion.com/forums/flutter'),
),
Text(' | ',
style: TextStyle(
fontSize: 12, color: model.textColor.withOpacity(0.7))),
- HandCursor(
- child: InkWell(
- child: const Text('Blog',
- style: TextStyle(color: Colors.blue, fontSize: 12)),
- onTap: () =>
- launch('https://www.syncfusion.com/blogs/?s=flutter'),
- ),
+ InkWell(
+ child: const Text('Blog',
+ style: TextStyle(color: Colors.blue, fontSize: 12)),
+ onTap: () =>
+ launch('https://www.syncfusion.com/blogs/?s=flutter'),
),
Text(' | ',
style: TextStyle(
fontSize: 12, color: model.textColor.withOpacity(0.7))),
- HandCursor(
- child: InkWell(
- child: const Text('Knowledge base',
- style: TextStyle(color: Colors.blue, fontSize: 12)),
- onTap: () =>
- launch('https://www.syncfusion.com/kb/flutter'),
- ),
+ InkWell(
+ child: const Text('Knowledge base',
+ style: TextStyle(color: Colors.blue, fontSize: 12)),
+ onTap: () => launch('https://www.syncfusion.com/kb/flutter'),
)
],
),
@@ -748,18 +731,16 @@ Widget getFooter(BuildContext context, SampleModel model) {
letterSpacing: 0.23)))
],
)),
- HandCursor(
- child: InkWell(
- onTap: () => launch('https://www.syncfusion.com'),
- child: Image.asset(
- model.themeData.brightness == Brightness.dark
- ? 'images/syncfusion_dark.png'
- : 'images/syncfusion.png',
- fit: BoxFit.contain,
- height: 25,
- width: model.isMobileResolution ? 80 : 120),
- ),
- )
+ InkWell(
+ onTap: () => launch('https://www.syncfusion.com'),
+ child: Image.asset(
+ model.themeData.brightness == Brightness.dark
+ ? 'images/syncfusion_dark.png'
+ : 'images/syncfusion.png',
+ fit: BoxFit.contain,
+ height: 25,
+ width: model.isMobileResolution ? 80 : 120),
+ ),
],
),
);
@@ -790,13 +771,11 @@ Widget showWebThemeSettings(SampleModel model) {
fontSize: 16,
fontWeight: FontWeight.bold,
fontFamily: 'Roboto-Medium')),
- HandCursor(
- child: IconButton(
- icon: Icon(Icons.close, color: model.webIconColor),
- onPressed: () {
- Navigator.pop(context);
- }),
- )
+ IconButton(
+ icon: Icon(Icons.close, color: model.webIconColor),
+ onPressed: () {
+ Navigator.pop(context);
+ }),
],
),
Expanded(
@@ -879,17 +858,15 @@ Widget showWebThemeSettings(SampleModel model) {
Container(
height: 44,
padding: const EdgeInsets.fromLTRB(15, 0, 15, 0),
- child: HandCursor(
- child: RaisedButton(
- color: model.paletteColor,
- onPressed: () => _applyThemeAndPaletteColor(
- model, context, _selectedValue),
- child: const Text('APPLY',
- style: TextStyle(
- fontSize: 16,
- fontFamily: 'Roboto-Bold',
- color: Colors.white))),
- ),
+ child: RaisedButton(
+ color: model.paletteColor,
+ onPressed: () => _applyThemeAndPaletteColor(
+ model, context, _selectedValue),
+ child: const Text('APPLY',
+ style: TextStyle(
+ fontSize: 16,
+ fontFamily: 'Roboto-Bold',
+ color: Colors.white))),
)
],
),
@@ -925,14 +902,12 @@ List _addColorPalettes(SampleModel model, [StateSetter setState]) {
border: Border.all(color: model.paletteBorderColors[i], width: 2.0),
shape: BoxShape.circle,
),
- child: HandCursor(
- child: InkWell(
- onTap: () => _changeColorPalette(model, i, setState),
- child: Icon(
- Icons.brightness_1,
- size: 40.0,
- color: model.paletteColors[i],
- ),
+ child: InkWell(
+ onTap: () => _changeColorPalette(model, i, setState),
+ child: Icon(
+ Icons.brightness_1,
+ size: 40.0,
+ color: model.paletteColors[i],
),
),
)));
@@ -994,7 +969,9 @@ String getStatusTag(SubItem item) {
}
status = (newCount != 0 && newCount == item.subItems.length)
? (_isWeb ? 'New' : 'N')
- : (newCount != 0 || updateCount != 0) ? (_isWeb ? 'Updated' : 'U') : '';
+ : (newCount != 0 || updateCount != 0)
+ ? (_isWeb ? 'Updated' : 'U')
+ : '';
}
return status;
}
@@ -1009,9 +986,7 @@ void showBottomSettingsPanel(SampleModel model, BuildContext context) {
? const Color.fromRGBO(84, 84, 84, 1)
: const Color.fromRGBO(218, 218, 218, 1);
showRoundedModalBottomSheet(
- dismissOnTap: false,
context: context,
- radius: 12.0,
color: model.bottomSheetBackgroundColor,
builder: (BuildContext context) => Container(
height: 250,
@@ -1183,12 +1158,9 @@ void showBottomSettingsPanel(SampleModel model, BuildContext context) {
void showBottomSheetSettingsPanel(BuildContext context, Widget propertyWidget) {
final SampleModel _model = SampleModel.instance;
showRoundedModalBottomSheet(
- dismissOnTap: false,
context: context,
- radius: 12.0,
color: _model.bottomSheetBackgroundColor,
builder: (BuildContext context) => Container(
- height: MediaQuery.of(context).size.height * 0.22,
padding: const EdgeInsets.fromLTRB(15, 0, 0, 5),
child: Stack(children: [
Row(
diff --git a/lib/model/mobile_view.dart b/lib/model/mobile_view.dart
index 8646c6b7..f10b13bf 100644
--- a/lib/model/mobile_view.dart
+++ b/lib/model/mobile_view.dart
@@ -26,6 +26,7 @@ class LayoutPage extends StatefulWidget {
class _LayoutPageState extends State {
SampleModel _model;
WidgetCategory _category;
+ StateSetter refreshSetState;
@override
void initState() {
@@ -37,137 +38,206 @@ class _LayoutPageState extends State {
int _primaryTabIndex = 0;
int _secondaryTabIndex = 0;
+ bool _showCodeIcon = false;
+
@override
Widget build(BuildContext context) {
+ _showCodeIcon =
+ _category.controlList[_category.selectedIndex].subItems[0].type ==
+ 'sample' ||
+ (_category.controlList[_category.selectedIndex].subItems[0].type !=
+ 'parent' &&
+ _category.controlList[_category.selectedIndex].subItems[0]
+ .displayType !=
+ 'card');
return Theme(
data: ThemeData(
brightness: _model.themeData.brightness,
primaryColor: _model.backgroundColor),
- child: SafeArea(
- child: DefaultTabController(
- length:
- _category.controlList[_category.selectedIndex].subItems.length,
- child: Scaffold(
- appBar: AppBar(
- leading: IconButton(
- icon: const Icon(Icons.arrow_back, color: Colors.white),
- onPressed: () => Navigator.maybePop(context, false),
- ),
- backgroundColor: _model.paletteColor,
- bottom: ((_category.controlList[_category.selectedIndex]
- .sampleList !=
- null &&
- _category.controlList[_category.selectedIndex]
- .displayType ==
- 'card')) ||
- _category.controlList[_category.selectedIndex]
- .subItems.length ==
- 1
- ? null
- : TabBar(
- onTap: (int index) {
- _primaryTabIndex = index;
- },
- indicator: const UnderlineTabIndicator(
- borderSide: BorderSide(
- width: 5.0,
- color: Color.fromRGBO(252, 220, 0, 1)),
- ),
- isScrollable: true,
- tabs: _getTabs(
- _category.controlList[_category.selectedIndex]
- .subItems,
- 'parent'),
- ),
- title: Text(
- _category.controlList[_category.selectedIndex].title
- .toString(),
- style: const TextStyle(
- fontWeight: FontWeight.bold,
- fontSize: 16.0,
- color: Colors.white,
- letterSpacing: 0.3)),
- actions: ((_category.controlList[_category.selectedIndex]
- .sampleList !=
- null &&
- _category.controlList[_category.selectedIndex]
- .displayType !=
- 'card' &&
- _category.controlList[_category.selectedIndex]
- .sampleList[_primaryTabIndex].codeLink !=
- null &&
- _category.controlList[_category.selectedIndex]
- .sampleList[_primaryTabIndex].codeLink !=
- '') ||
- (_category.controlList[_category.selectedIndex]
- .childList !=
- null &&
- _category
- .controlList[_category.selectedIndex]
- .childList[_primaryTabIndex]
- .displayType !=
- 'card'))
- ? [
- Padding(
- padding: const EdgeInsets.fromLTRB(0, 0, 10, 0),
- child: Container(
- height: 40,
- width: 40,
- child: IconButton(
- icon: Image.asset('images/code.png',
- color: Colors.white),
- onPressed: () {
- launch(_category
+ child: StatefulBuilder(
+ builder: (BuildContext buildContext, StateSetter setState) {
+ refreshSetState = setState;
+ return SafeArea(
+ child: DefaultTabController(
+ length: _category
+ .controlList[_category.selectedIndex].subItems.length,
+ child: Scaffold(
+ appBar: AppBar(
+ leading: IconButton(
+ icon: const Icon(Icons.arrow_back, color: Colors.white),
+ onPressed: () => Navigator.maybePop(context, false),
+ ),
+ backgroundColor: _model.paletteColor,
+ bottom: ((_category.controlList[_category.selectedIndex]
+ .sampleList !=
+ null &&
+ _category.controlList[_category.selectedIndex]
+ .displayType ==
+ 'card')) ||
+ _category.controlList[_category.selectedIndex]
+ .subItems.length ==
+ 1
+ ? null
+ : TabBar(
+ onTap: (int index) {
+ if (index != _primaryTabIndex) {
+ _primaryTabIndex = index;
+ refreshSetState(() {
+ _showCodeIcon = _category
.controlList[
_category.selectedIndex]
- .sampleList ==
- null
- ? _category
- .controlList[_category.selectedIndex]
- .childList[_primaryTabIndex]
- .subItems[_secondaryTabIndex]
- .codeLink
- : _category
- .controlList[_category.selectedIndex]
- .sampleList[_primaryTabIndex]
- .codeLink);
- },
- ),
+ .subItems[index]
+ .type ==
+ 'sample' ||
+ (_category
+ .controlList[
+ _category.selectedIndex]
+ .subItems[index]
+ .type !=
+ 'parent' &&
+ _category
+ .controlList[
+ _category.selectedIndex]
+ .subItems[index]
+ .displayType !=
+ 'card');
+ });
+ }
+ },
+ indicator: const UnderlineTabIndicator(
+ borderSide: BorderSide(
+ width: 5.0,
+ color: Color.fromRGBO(252, 220, 0, 1)),
),
+ isScrollable: true,
+ tabs: _getTabs(
+ _category.controlList[_category.selectedIndex]
+ .subItems,
+ 'parent'),
),
- ]
- : null,
- ),
- body: TabBarView(
- physics: const NeverScrollableScrollPhysics(),
- children: (_category.controlList[_category.selectedIndex]
- .sampleList !=
- null) ||
- _category.controlList[_category.selectedIndex]
- .subItems.length ==
- 1
- ? _getSamples(
- _model,
- _category.controlList[_category.selectedIndex]
- .sampleList,
- _category.controlList[_category.selectedIndex]
- .displayType)
- : (_category.controlList[_category.selectedIndex]
- .childList !=
+ title: Text(
+ _category.controlList[_category.selectedIndex].title
+ .toString(),
+ style: const TextStyle(
+ fontWeight: FontWeight.bold,
+ fontSize: 16.0,
+ color: Colors.white,
+ letterSpacing: 0.3)),
+ actions: ((_category.controlList[_category.selectedIndex]
+ .sampleList !=
null &&
- _checkSubItemsType(_category
- .controlList[_category.selectedIndex]
- .subItems))
- ? _getChildTabViewChildren(
- _model,
- _category.controlList[_category.selectedIndex]
- .childList)
- : _getParentTabViewChildren(
- _model,
_category.controlList[_category.selectedIndex]
- .subItems))),
- ),
- ));
+ .displayType !=
+ 'card' &&
+ _category
+ .controlList[_category.selectedIndex]
+ .sampleList[_primaryTabIndex]
+ .codeLink !=
+ null &&
+ _category
+ .controlList[_category.selectedIndex]
+ .sampleList[_primaryTabIndex]
+ .codeLink !=
+ '') ||
+ (_category.controlList[_category.selectedIndex]
+ .childList !=
+ null &&
+ _category
+ .controlList[_category.selectedIndex]
+ .childList[_primaryTabIndex]
+ .displayType !=
+ 'card'))
+ ? [
+ Visibility(
+ visible: _showCodeIcon,
+ child: Padding(
+ padding:
+ const EdgeInsets.fromLTRB(0, 0, 10, 0),
+ child: Container(
+ height: 40,
+ width: 40,
+ child: IconButton(
+ icon: Image.asset('images/code.png',
+ color: Colors.white),
+ onPressed: () {
+ launch(_category.controlList[_category.selectedIndex].sampleList == null
+ ? (_category.controlList[_category.selectedIndex].childList[_primaryTabIndex].subItems[_secondaryTabIndex].codeLink == null &&
+ _category
+ .controlList[_category
+ .selectedIndex]
+ .childList[
+ _primaryTabIndex]
+ .subItems[
+ _secondaryTabIndex]
+ .subItems
+ .length ==
+ 1 &&
+ _category
+ .controlList[_category
+ .selectedIndex]
+ .childList[
+ _primaryTabIndex]
+ .subItems[
+ _secondaryTabIndex]
+ .displayType !=
+ 'card'
+ ? _category
+ .controlList[
+ _category.selectedIndex]
+ .childList[_primaryTabIndex]
+ .subItems[
+ _secondaryTabIndex]
+ .subItems[0]
+ .codeLink
+ : _category
+ .controlList[
+ _category.selectedIndex]
+ .childList[_primaryTabIndex]
+ .subItems[
+ _secondaryTabIndex]
+ .codeLink)
+ : _category
+ .controlList[_category.selectedIndex]
+ .sampleList[_primaryTabIndex]
+ .codeLink);
+ },
+ ),
+ ),
+ )),
+ ]
+ : null,
+ ),
+ body: TabBarView(
+ physics: const NeverScrollableScrollPhysics(),
+ children: (_category.controlList[_category.selectedIndex]
+ .sampleList !=
+ null) ||
+ _category.controlList[_category.selectedIndex]
+ .subItems.length ==
+ 1
+ ? _getSamples(
+ _model,
+ _category.controlList[_category.selectedIndex]
+ .sampleList,
+ _category.controlList[_category.selectedIndex]
+ .displayType)
+ : (_category.controlList[_category.selectedIndex]
+ .childList !=
+ null &&
+ _checkSubItemsType(_category
+ .controlList[_category.selectedIndex]
+ .subItems))
+ ? _getChildTabViewChildren(
+ _model,
+ _category.controlList[_category.selectedIndex]
+ .childList)
+ : _getParentTabViewChildren(
+ _model,
+ _category.controlList[_category.selectedIndex]
+ .subItems))),
+ ),
+ );
+ }));
}
/// Returns true, if the list doesn't contain any child type.
@@ -365,22 +435,26 @@ class _LayoutPageState extends State {
Container(
decoration: BoxDecoration(
color: (_status != null && _status != '')
- ? (_status == 'New' || _status == 'new'
+ ? (_status == 'New' ||
+ _status == 'new'
? const Color.fromRGBO(
55, 153, 30, 1)
: const Color.fromRGBO(
246, 117, 0, 1))
: Colors.transparent,
shape: BoxShape.rectangle,
- borderRadius:
- const BorderRadius.all(
- Radius.circular(10.0))),
+ borderRadius: const BorderRadius.all(
+ Radius.circular(10.0))),
padding: const EdgeInsets.fromLTRB(
5, 2.7, 5, 2.7),
child: Text(
- (_status == 'New' || _status == 'new')
+ (_status == 'New' ||
+ _status == 'new')
? 'New'
- : (_status == 'Updated' || _status == 'updated') ? 'Updated' : '',
+ : (_status == 'Updated' ||
+ _status == 'updated')
+ ? 'Updated'
+ : '',
style: const TextStyle(fontSize: 12, color: Colors.white))),
const Padding(
padding: EdgeInsets.only(left: 15),
@@ -489,6 +563,21 @@ class _LayoutPageState extends State {
backgroundColor:
const Color.fromRGBO(241, 241, 241, 1),
bottom: TabBar(
+ onTap: (int index) {
+ if (_secondaryTabIndex != index) {
+ _secondaryTabIndex = index;
+ refreshSetState(() {
+ _showCodeIcon =
+ (list[i].subItems[index].displayType !=
+ 'card' ||
+ list[i]
+ .subItems[index]
+ .subItems
+ .length ==
+ 1);
+ });
+ }
+ },
unselectedLabelColor: Colors.black,
labelColor: Colors.blue,
indicatorColor: Colors.transparent,
diff --git a/lib/model/model.dart b/lib/model/model.dart
index 9175eb36..dae9b976 100644
--- a/lib/model/model.dart
+++ b/lib/model/model.dart
@@ -8,15 +8,38 @@ import 'package:flutter/foundation.dart';
/// Local import
import '../sample_list.dart';
-import 'sample_view.dart';
/// WidgetCategory of the each control as Data Visualization, Editors,etc.,
class WidgetCategory {
+ /// Contructor holds the name, id, control collection of the [WidgetCategory]
+ WidgetCategory(
+ [this.categoryName,
+ this.controlList,
+ this.mobileCategoryId,
+ this.webCategoryId,
+ this.showInWeb]);
+
+ /// Getting the control details from the json file
+ factory WidgetCategory.fromJson(Map json) {
+ return WidgetCategory(json['categoryName'], json['controlList'],
+ json['mobileCategoryId'], json['webCategoryId'], json['showInWeb']);
+ }
+
/// Name of the category
String categoryName;
/// Control collection under the particular category
- List controlList;
+ List controlList;
+
+ /// Sorting the categories based on this id in mobile.
+ final int mobileCategoryId;
+
+ /// Sorting the categories based on this id in web.
+ final int webCategoryId;
+
+ /// Specify false if the category need not to show in web
+ /// (as Viewer - not supported in web).
+ final bool showInWeb;
/// Selected control in the controllist under the particular category
int selectedIndex = 0;
@@ -25,16 +48,8 @@ class WidgetCategory {
/// Defines the control class.
class Control {
/// Contructor holds the tile, description, status etc., of the [Control]
- Control(
- this.title,
- this.description,
- this.image,
- this.status,
- this.displayType,
- this.subItems,
- this.category,
- this.controlId,
- this.showInWeb);
+ Control(this.title, this.description, this.image, this.status,
+ this.displayType, this.subItems, this.controlId, this.showInWeb);
/// Getting the control details from the json file
factory Control.fromJson(Map json) {
@@ -45,7 +60,6 @@ class Control {
json['status'],
json['displayType'],
json['subItems'],
- json['category'],
json['controlId'],
json['showInWeb']);
}
@@ -65,10 +79,6 @@ class Control {
/// Display the controls based on this order.
final int controlId;
- /// Specify the category of the control as
- /// Data Visualization, Editors, Calendar, File format
- final String category;
-
/// Need to mention this when samples directly given without any sub category
/// Mention as card/fullView, by default it will taken as "fullView".
final String displayType;
@@ -319,7 +329,7 @@ class SampleModel extends Listenable {
List routes;
/// Holds the current visible sample, only for web
- SampleView currentRenderSample;
+ dynamic currentRenderSample;
/// Holds the current rendered sample's key, only for web
String currentSampleKey;
@@ -356,6 +366,15 @@ class SampleModel extends Listenable {
/// Editing controller which used in the search text field
TextEditingController editingController = TextEditingController();
+ /// Key of the property panel widget
+ GlobalKey propertyPanelKey;
+
+ /// Holds the information of to be maximize or not
+ bool needToMaximize = false;
+
+ ///Storing state of current output container
+ dynamic outputContainerState;
+
/// Switching between light, dark, system themes
void changeTheme(ThemeData _themeData) {
themeData = _themeData;
@@ -423,188 +442,200 @@ Future updateControlItems() async {
const bool _isWeb = kIsWeb;
final String _jsonText =
await rootBundle.loadString('lib/sample_details.json');
- final List _controlList = json.decode(_jsonText);
List _firstLevelSubItems = [];
List _secondLevelSubItems = [];
List _thirdLevelSubItems = [];
final List sampleRoutes = [];
- for (int i = 0; i < _controlList.length; i++) {
- SampleModel._controlList.add(Control.fromJson(_controlList[i]));
- if (!_isWeb || SampleModel._controlList[i].showInWeb != false) {
- for (int j = 0; j < SampleModel._controlList[i].subItems.length; j++) {
- _firstLevelSubItems
- .add(SubItem.fromJson(SampleModel._controlList[i].subItems[j]));
- if (_firstLevelSubItems[j].type == 'parent') {
- for (int k = 0; k < _firstLevelSubItems[j].subItems.length; k++) {
- if (!_isWeb ||
- SubItem.fromJson(_firstLevelSubItems[j].subItems[k])
- .showInWeb !=
- false) {
- _secondLevelSubItems
- .add(SubItem.fromJson(_firstLevelSubItems[j].subItems[k]));
- for (int l = 0;
- l <
- _secondLevelSubItems[_secondLevelSubItems.length - 1]
- .subItems
- .length;
- l++) {
+
+ final List categoryList = json.decode(_jsonText);
+ for (int index = 0; index < categoryList.length; index++) {
+ SampleModel._categoryList.add(WidgetCategory.fromJson(categoryList[index]));
+ List controlList = [];
+ if (!_isWeb || SampleModel._categoryList[index].showInWeb != false) {
+ for (int i = 0;
+ i < SampleModel._categoryList[index].controlList.length;
+ i++) {
+ controlList.add(
+ Control.fromJson(SampleModel._categoryList[index].controlList[i]));
+ if (!_isWeb || controlList[i].showInWeb != false) {
+ for (int j = 0; j < controlList[i].subItems.length; j++) {
+ _firstLevelSubItems
+ .add(SubItem.fromJson(controlList[i].subItems[j]));
+ if (_firstLevelSubItems[j].type == 'parent') {
+ for (int k = 0; k < _firstLevelSubItems[j].subItems.length; k++) {
if (!_isWeb ||
- SubItem.fromJson(_secondLevelSubItems[
- _secondLevelSubItems.length - 1]
- .subItems[l])
+ SubItem.fromJson(_firstLevelSubItems[j].subItems[k])
.showInWeb !=
false) {
- _thirdLevelSubItems.add(SubItem.fromJson(
- _secondLevelSubItems[_secondLevelSubItems.length - 1]
- .subItems[l]));
+ _secondLevelSubItems.add(
+ SubItem.fromJson(_firstLevelSubItems[j].subItems[k]));
+ for (int l = 0;
+ l <
+ _secondLevelSubItems[_secondLevelSubItems.length - 1]
+ .subItems
+ .length;
+ l++) {
+ if (!_isWeb ||
+ SubItem.fromJson(_secondLevelSubItems[
+ _secondLevelSubItems.length - 1]
+ .subItems[l])
+ .showInWeb !=
+ false) {
+ _thirdLevelSubItems.add(SubItem.fromJson(
+ _secondLevelSubItems[_secondLevelSubItems.length - 1]
+ .subItems[l]));
+ }
+ _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
+ .parentIndex = j;
+ _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
+ .childIndex = k;
+ _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
+ .sampleIndex ??= _thirdLevelSubItems.length - 1;
+ _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
+ .control = controlList[i];
+ final String breadCrumbText = ('/' +
+ controlList[i].title +
+ '/' +
+ _firstLevelSubItems[j].title +
+ '/' +
+ _secondLevelSubItems[
+ _secondLevelSubItems.length - 1]
+ .title +
+ '/' +
+ _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
+ .title)
+ .replaceAll(' ', '-')
+ .toLowerCase();
+ _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
+ .breadCrumbText = breadCrumbText;
+ _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
+ .categoryName =
+ SampleModel._categoryList[index].categoryName;
+ sampleRoutes.add(SampleRoute(
+ routeName: breadCrumbText,
+ subItem: _thirdLevelSubItems[
+ _thirdLevelSubItems.length - 1]));
+ }
+ _secondLevelSubItems[_secondLevelSubItems.length - 1]
+ .subItems = _thirdLevelSubItems;
+ _thirdLevelSubItems = [];
}
- _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
- .parentIndex = j;
- _thirdLevelSubItems[_thirdLevelSubItems.length - 1].childIndex =
- k;
- _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
- .sampleIndex ??= _thirdLevelSubItems.length - 1;
- _thirdLevelSubItems[_thirdLevelSubItems.length - 1].control =
- SampleModel._controlList[i];
- final String _breadCrumbText = ('/' +
- SampleModel._controlList[i].title +
- '/' +
- _firstLevelSubItems[j].title +
- '/' +
- _secondLevelSubItems[_secondLevelSubItems.length - 1]
- .title +
- '/' +
- _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
- .title)
- .replaceAll(' ', '-')
- .toLowerCase();
- _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
- .breadCrumbText = _breadCrumbText;
- _thirdLevelSubItems[_thirdLevelSubItems.length - 1]
- .categoryName = SampleModel._controlList[i].category;
- sampleRoutes.add(SampleRoute(
- routeName: _breadCrumbText,
- subItem:
- _thirdLevelSubItems[_thirdLevelSubItems.length - 1]));
}
- _secondLevelSubItems[_secondLevelSubItems.length - 1].subItems =
- _thirdLevelSubItems;
- _thirdLevelSubItems = [];
- }
- }
- _firstLevelSubItems[j].subItems = _secondLevelSubItems;
- _secondLevelSubItems = [];
- } else if (_firstLevelSubItems[j].type == 'child') {
- if (!_isWeb || _firstLevelSubItems[j].showInWeb != false) {
- _isChild = true;
- for (int k = 0; k < _firstLevelSubItems[j].subItems.length; k++) {
- if (!_isWeb ||
- SubItem.fromJson(_firstLevelSubItems[j].subItems[k])
- .showInWeb !=
- false) {
- _secondLevelSubItems
- .add(SubItem.fromJson(_firstLevelSubItems[j].subItems[k]));
- _secondLevelSubItems[_secondLevelSubItems.length - 1]
- .childIndex = j;
- _secondLevelSubItems[_secondLevelSubItems.length - 1]
- .sampleIndex ??= k;
- _secondLevelSubItems[_secondLevelSubItems.length - 1].control =
- SampleModel._controlList[i];
- final String _breadCrumbText = ('/' +
- SampleModel._controlList[i].title +
- '/' +
- _firstLevelSubItems[j].title +
+ _firstLevelSubItems[j].subItems = _secondLevelSubItems;
+ _secondLevelSubItems = [];
+ } else if (_firstLevelSubItems[j].type == 'child') {
+ if (!_isWeb || _firstLevelSubItems[j].showInWeb != false) {
+ _isChild = true;
+ for (int k = 0;
+ k < _firstLevelSubItems[j].subItems.length;
+ k++) {
+ if (!_isWeb ||
+ SubItem.fromJson(_firstLevelSubItems[j].subItems[k])
+ .showInWeb !=
+ false) {
+ _secondLevelSubItems.add(
+ SubItem.fromJson(_firstLevelSubItems[j].subItems[k]));
+ _secondLevelSubItems[_secondLevelSubItems.length - 1]
+ .childIndex = j;
+ _secondLevelSubItems[_secondLevelSubItems.length - 1]
+ .sampleIndex ??= k;
+ _secondLevelSubItems[_secondLevelSubItems.length - 1]
+ .control = controlList[i];
+ final String breadCrumbText = ('/' +
+ controlList[i].title +
+ '/' +
+ _firstLevelSubItems[j].title +
+ '/' +
+ _secondLevelSubItems[
+ _secondLevelSubItems.length - 1]
+ .title)
+ .replaceAll(' ', '-')
+ .toLowerCase();
+ _secondLevelSubItems[_secondLevelSubItems.length - 1]
+ .breadCrumbText = breadCrumbText;
+ _secondLevelSubItems[_secondLevelSubItems.length - 1]
+ .categoryName =
+ SampleModel._categoryList[index].categoryName;
+ sampleRoutes.add(SampleRoute(
+ routeName: breadCrumbText,
+ subItem: _secondLevelSubItems[
+ _secondLevelSubItems.length - 1]));
+ }
+ }
+ _firstLevelSubItems[j].subItems = _secondLevelSubItems;
+ _secondLevelSubItems = [];
+ } else {
+ _firstLevelSubItems.removeAt(j);
+ controlList[i].subItems.removeAt(j);
+ j--;
+ }
+ } else {
+ _isSample = true;
+ _firstLevelSubItems[j].sampleIndex ??= j;
+ if (!_isWeb || _firstLevelSubItems[j].showInWeb != false) {
+ final String breadCrumbText = ('/' +
+ controlList[i].title +
'/' +
- _secondLevelSubItems[_secondLevelSubItems.length - 1]
- .title)
+ _firstLevelSubItems[j].title)
.replaceAll(' ', '-')
.toLowerCase();
- _secondLevelSubItems[_secondLevelSubItems.length - 1]
- .breadCrumbText = _breadCrumbText;
- _secondLevelSubItems[_secondLevelSubItems.length - 1]
- .categoryName = SampleModel._controlList[i].category;
+ _firstLevelSubItems[j].breadCrumbText = breadCrumbText;
+ _firstLevelSubItems[j].control = controlList[i];
+ _firstLevelSubItems[j].categoryName =
+ SampleModel._categoryList[index].categoryName;
sampleRoutes.add(SampleRoute(
- routeName: _breadCrumbText,
- subItem:
- _secondLevelSubItems[_secondLevelSubItems.length - 1]));
+ routeName: breadCrumbText,
+ subItem: _firstLevelSubItems[j]));
+ _secondLevelSubItems.add(_firstLevelSubItems[j]);
}
}
- _firstLevelSubItems[j].subItems = _secondLevelSubItems;
+ }
+ if (_isSample) {
+ controlList[i].sampleList = _secondLevelSubItems;
+ controlList[i].subItems = _secondLevelSubItems;
+ _secondLevelSubItems = [];
+ } else if (_isChild) {
+ controlList[i].childList = _firstLevelSubItems;
_secondLevelSubItems = [];
- } else {
- _firstLevelSubItems.removeAt(j);
- SampleModel._controlList[i].subItems.removeAt(j);
- j--;
+ _isChild = false;
}
+ (!_isSample)
+ ? controlList[i].subItems = _firstLevelSubItems
+ : _isSample = false;
+
+ _firstLevelSubItems = [];
} else {
- _isSample = true;
- _firstLevelSubItems[j].sampleIndex ??= j;
- if (!_isWeb || _firstLevelSubItems[j].showInWeb != false) {
- final String _breadCrumbText = ('/' +
- SampleModel._controlList[i].title +
- '/' +
- _firstLevelSubItems[j].title)
- .replaceAll(' ', '-')
- .toLowerCase();
- _firstLevelSubItems[j].breadCrumbText = _breadCrumbText;
- _firstLevelSubItems[j].control = SampleModel._controlList[i];
- _firstLevelSubItems[j].categoryName =
- SampleModel._controlList[i].category;
- sampleRoutes.add(SampleRoute(
- routeName: _breadCrumbText, subItem: _firstLevelSubItems[j]));
- _secondLevelSubItems.add(_firstLevelSubItems[j]);
- }
+ controlList.removeAt(i);
+ SampleModel._categoryList[index].controlList.removeAt(i);
+ i--;
}
}
- if (_isSample) {
- SampleModel._controlList[i].sampleList = _secondLevelSubItems;
- SampleModel._controlList[i].subItems = _secondLevelSubItems;
- _secondLevelSubItems = [];
- } else if (_isChild) {
- SampleModel._controlList[i].childList = _firstLevelSubItems;
- _secondLevelSubItems = [];
- _isChild = false;
- }
- (!_isSample)
- ? SampleModel._controlList[i].subItems = _firstLevelSubItems
- : _isSample = false;
- _firstLevelSubItems = [];
+ SampleModel._categoryList[index].controlList = controlList;
+ SampleModel._controlList.addAll(controlList);
} else {
- SampleModel._controlList.removeAt(i);
- _controlList.removeAt(i);
- i--;
+ categoryList.removeAt(index);
+ SampleModel._categoryList.removeAt(index);
+ index--;
}
}
SampleModel._routes = sampleRoutes;
- /// Sorting the controls based on control id.
- SampleModel._controlList
- .sort((Control a, Control b) => a.controlId.compareTo(b.controlId));
-
- /// Setting control's category.
- final List _categoryNames = [];
- String _controlCategory;
- for (int i = 0; i < SampleModel._controlList.length; i++) {
- _controlCategory = SampleModel._controlList[i].category.toUpperCase();
- if (!_categoryNames.contains(_controlCategory)) {
- _categoryNames.add(_controlCategory);
- SampleModel._categoryList.add(WidgetCategory());
- SampleModel._categoryList[SampleModel._categoryList.length - 1]
- .categoryName = _controlCategory;
- }
+ /// Sorting the controls based on control id category wise.
+ for (int i = 0; i < SampleModel._categoryList.length; i++) {
+ SampleModel._categoryList[i].controlList
+ .sort((dynamic a, dynamic b) => a.controlId.compareTo(b.controlId));
}
- WidgetCategory _category;
- for (int j = 0; j < SampleModel._categoryList.length; j++) {
- _category = SampleModel._categoryList[j];
- _category.controlList = [];
- for (int i = 0; i < SampleModel._controlList.length; i++) {
- final Control control = SampleModel._controlList[i];
- if (control.category.toUpperCase() == _category.categoryName) {
- _category.controlList.add(control);
- }
- }
+
+ if (_isWeb) {
+ /// Sorting categories based on [webCategoryId]
+ SampleModel._categoryList.sort((WidgetCategory a, WidgetCategory b) =>
+ a.webCategoryId.compareTo(b.webCategoryId));
+ } else {
+ /// Sorting categories based on [mobileCategoryId]
+ SampleModel._categoryList.sort((WidgetCategory a, WidgetCategory b) =>
+ a.mobileCategoryId.compareTo(b.mobileCategoryId));
}
}
diff --git a/lib/model/web_view.dart b/lib/model/web_view.dart
index c23770b0..26b7a723 100644
--- a/lib/model/web_view.dart
+++ b/lib/model/web_view.dart
@@ -1,13 +1,12 @@
/// package imports
import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
+import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';
///Local imports
import '../widgets/expansion_tile.dart';
import '../widgets/search_bar.dart';
-import '../widgets/shared/mobile.dart'
- if (dart.library.html) '../widgets/shared/web.dart';
import 'helper.dart';
import 'model.dart';
import 'sample_view.dart';
@@ -43,6 +42,8 @@ class _WebLayoutPageState extends State {
String selectSample;
+ _Popup popup;
+
SampleModel model;
WidgetCategory category;
SubItem sample;
@@ -90,6 +91,8 @@ class _WebLayoutPageState extends State {
super.dispose();
}
+ GlobalKey popUpKey = GlobalKey();
+
@override
Widget build(BuildContext context) {
///Checking the download button is currently hovered
@@ -125,23 +128,30 @@ class _WebLayoutPageState extends State {
child: AppBar(
leading: (MediaQuery.of(context).size.width > 768)
? Container()
- : HandCursor(
- child: IconButton(
- icon: const Icon(Icons.menu, color: Colors.white),
- onPressed: () {
- if (outputContainer != null) {
- final GlobalKey globalKey = outputContainer.key;
- final _SampleOutputContainerState
- _outputContainerState =
- globalKey.currentState;
- if (_outputContainerState.outputScaffoldKey
- .currentState.isEndDrawerOpen) {
- Navigator.pop(context);
- }
+ : IconButton(
+ icon: const Icon(Icons.menu, color: Colors.white),
+ onPressed: () {
+ if (outputContainer != null) {
+ final GlobalKey globalKey = outputContainer.key;
+ final _SampleOutputContainerState
+ _outputContainerState = globalKey.currentState;
+ if (_outputContainerState.outputScaffoldKey
+ .currentState.isEndDrawerOpen) {
+ Navigator.pop(context);
+ }
+ }
+ if (popup != null) {
+ final GlobalKey globalkey = popup.key;
+ final _PopupState popupState =
+ globalkey.currentState;
+ if (popupState.scaffoldKey.currentState != null &&
+ popupState
+ .scaffoldKey.currentState.isEndDrawerOpen) {
+ Navigator.pop(context);
}
- scaffoldKey.currentState.openDrawer();
- },
- ),
+ }
+ scaffoldKey.currentState.openDrawer();
+ },
),
automaticallyImplyLeading:
MediaQuery.of(context).size.width <= 768,
@@ -179,10 +189,8 @@ class _WebLayoutPageState extends State {
width: MediaQuery.of(context).size.width * 0.215,
height:
MediaQuery.of(context).size.height * 0.0445,
- child: HandCursor(
- child: SearchBar(
- sampleListModel: model,
- ),
+ child: SearchBar(
+ sampleListModel: model,
))),
///download option
@@ -228,49 +236,59 @@ class _WebLayoutPageState extends State {
Container(
height: 60,
width: 60,
- child: HandCursor(
- child: IconButton(
- icon: const Icon(Icons.settings, color: Colors.white),
- onPressed: () {
- if (outputContainer != null) {
- final GlobalKey globalKey = outputContainer.key;
- final _SampleOutputContainerState
- _outputContainerState = globalKey.currentState;
- if (_outputContainerState.outputScaffoldKey
- .currentState.isEndDrawerOpen) {
- Navigator.pop(context);
- }
+ child: IconButton(
+ icon: const Icon(Icons.settings, color: Colors.white),
+ onPressed: () {
+ if (outputContainer != null) {
+ final GlobalKey globalKey = outputContainer.key;
+ final _SampleOutputContainerState
+ _outputContainerState = globalKey.currentState;
+ if (_outputContainerState
+ .outputScaffoldKey.currentState.isEndDrawerOpen) {
+ Navigator.pop(context);
}
- scaffoldKey.currentState.openEndDrawer();
- },
- ),
+ }
+ if (popup != null) {
+ final GlobalKey globalkey = popup.key;
+ final _PopupState popupState = globalkey.currentState;
+ if (popupState.scaffoldKey.currentState != null &&
+ popupState
+ .scaffoldKey.currentState.isEndDrawerOpen) {
+ Navigator.pop(context);
+ }
+ }
+ scaffoldKey.currentState.openEndDrawer();
+ },
),
),
],
),
)),
body: Material(
- child: Row(
- children: [
- (MediaQuery.of(context).size.width <= 768)
- ? Container()
- : SizedBox(
- width: MediaQuery.of(context).size.width * 0.17,
- child: inputContainer = _SampleInputContainer(
- sampleModel: model,
- category: category,
- key: sampleInputKey,
- webLayoutPageState: this)),
- outputContainer = _SampleOutputContainer(
- sampleModel: model,
- category: category,
- initialSample: sample,
- orginText: orginText,
- initialSubItems: subItems,
- key: sampleOutputKey,
- webLayoutPageState: this)
- ],
- )));
+ child: Stack(children: [
+ Row(
+ children: [
+ (MediaQuery.of(context).size.width <= 768)
+ ? Container()
+ : SizedBox(
+ width: MediaQuery.of(context).size.width * 0.17,
+ child: inputContainer = _SampleInputContainer(
+ sampleModel: model,
+ category: category,
+ key: sampleInputKey,
+ webLayoutPageState: this)),
+ outputContainer = _SampleOutputContainer(
+ sampleModel: model,
+ category: category,
+ initialSample: sample,
+ orginText: orginText,
+ initialSubItems: subItems,
+ key: sampleOutputKey,
+ webLayoutPageState: this)
+ ],
+ ),
+ popup = _Popup(key: popUpKey, show: false)
+ ])));
}
}
@@ -360,40 +378,39 @@ class _SampleInputContainerState extends State<_SampleInputContainer> {
item: item)
: Material(
color: model.webBackgroundColor,
- child: HandCursor(
- child: InkWell(
- hoverColor: Colors.grey.withOpacity(0.2),
- onTap: () {
- final GlobalKey globalKey =
- widget.webLayoutPageState.outputContainer.key;
- final _SampleOutputContainerState _outputContainerState =
- globalKey.currentState;
- if (_outputContainerState
- .outputScaffoldKey.currentState.isEndDrawerOpen ||
- widget.webLayoutPageState.scaffoldKey.currentState
- .isDrawerOpen) {
- Navigator.pop(context);
- }
- _outputContainerState.sample = item;
- _outputContainerState.needTabs = false;
- _outputContainerState.orginText =
- widget.webLayoutPageState.sample.control.title +
- ' > ' +
- item.title;
- if (model.currentSampleKey == null ||
- model.currentSampleKey != item.key) {
- _outputContainerState.refresh();
- }
- },
- child: Container(
- color: Colors.transparent,
- padding: const EdgeInsets.fromLTRB(20, 10, 10, 10),
- alignment: Alignment.centerLeft,
- child: Text(item.title,
- style: TextStyle(
- color: model.textColor,
- fontSize: 13,
- fontFamily: 'Roboto-Regular'))))));
+ child: InkWell(
+ hoverColor: Colors.grey.withOpacity(0.2),
+ onTap: () {
+ final GlobalKey globalKey =
+ widget.webLayoutPageState.outputContainer.key;
+ final _SampleOutputContainerState _outputContainerState =
+ globalKey.currentState;
+ if (_outputContainerState
+ .outputScaffoldKey.currentState.isEndDrawerOpen ||
+ widget.webLayoutPageState.scaffoldKey.currentState
+ .isDrawerOpen) {
+ Navigator.pop(context);
+ }
+ _outputContainerState.sample = item;
+ _outputContainerState.needTabs = false;
+ _outputContainerState.orginText =
+ widget.webLayoutPageState.sample.control.title +
+ ' > ' +
+ item.title;
+ if (model.currentSampleKey == null ||
+ model.currentSampleKey != item.key) {
+ _outputContainerState.refresh();
+ }
+ },
+ child: Container(
+ color: Colors.transparent,
+ padding: const EdgeInsets.fromLTRB(20, 10, 10, 10),
+ alignment: Alignment.centerLeft,
+ child: Text(item.title,
+ style: TextStyle(
+ color: model.textColor,
+ fontSize: 13,
+ fontFamily: 'Roboto-Regular')))));
}
List _getSampleList(SampleModel model, WidgetCategory category) {
@@ -408,8 +425,7 @@ class _SampleInputContainerState extends State<_SampleInputContainer> {
_children.add(Material(
color: model.webBackgroundColor,
child: _list[i].type != 'parent' && _list[i].type != 'child'
- ? HandCursor(
- child: InkWell(
+ ? InkWell(
hoverColor: Colors.grey.withOpacity(0.2),
child: Container(
color: _isNeedSelect
@@ -491,7 +507,7 @@ class _SampleInputContainerState extends State<_SampleInputContainer> {
_outputContainerState.refresh();
}
},
- ))
+ )
: _expandedChildren(model, _list[i], category, i)));
}
@@ -511,8 +527,7 @@ class _SampleInputContainerState extends State<_SampleInputContainer> {
Container(
padding: const EdgeInsets.only(top: 5),
height: 40,
- child: HandCursor(
- child: InkWell(
+ child: InkWell(
child: Row(
children: [
const Padding(
@@ -535,13 +550,12 @@ class _SampleInputContainerState extends State<_SampleInputContainer> {
],
),
onTap: () {
- changeCursorStyleOnNavigation();
Navigator.pop(context);
if (MediaQuery.of(context).size.width <= 768) {
Navigator.pop(context);
}
},
- )),
+ ),
),
Expanded(
child:
@@ -592,9 +606,9 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
int tabIndex;
GlobalKey outputScaffoldKey = GlobalKey();
final GlobalKey _propertiesPanelKey = GlobalKey();
- GlobalKey outputKey = GlobalKey();
_PropertiesPanel _propertiesPanel;
bool _initialRender;
+ GlobalKey _outputKey;
@override
void initState() {
@@ -622,15 +636,14 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
@override
Widget build(BuildContext context) {
final SampleModel _model = widget.sampleModel;
+ final double width = MediaQuery.of(context).size.width;
if (_initialRender && widget.initialSubItems != null) {
needTabs = true;
subItems = widget.initialSubItems;
}
final SubItem _sample = _initialRender ? widget.initialSample : sample;
- _propertiesPanel = _PropertiesPanel(
- sampleModel: _model,
- key: _propertiesPanelKey,
- webLayoutPageState: widget.webLayoutPageState);
+ _propertiesPanel =
+ _PropertiesPanel(sampleModel: _model, key: _propertiesPanelKey);
return Theme(
data: ThemeData(
brightness: _model.themeData.brightness,
@@ -659,7 +672,6 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
: orginText,
style: TextStyle(
color: _model.textColor.withOpacity(0.65),
- fontSize: 14,
letterSpacing: 0.3,
fontFamily: 'Roboto-Regular'))),
const Padding(padding: EdgeInsets.only(top: 20)),
@@ -699,10 +711,7 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
_model.dividerColor,
width: 0.8)),
),
- padding: MediaQuery.of(context)
- .size
- .width <
- 500
+ padding: width < 500
? const EdgeInsets.fromLTRB(
2, 5, 2, 0)
: const EdgeInsets.fromLTRB(
@@ -713,19 +722,16 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
.spaceBetween,
children: [
Container(
- width: MediaQuery.of(context)
- .size
- .width *
- ((MediaQuery.of(context)
- .size
- .width <=
- 768 &&
- MediaQuery.of(context)
- .size
- .width >
- 500)
- ? 0.82
- : 0.67),
+ width: width *
+ ((_model.isMobileResolution &&
+ width > 600)
+ ? 0.75
+ : (width <= 500
+ ? 0.585
+ : width <
+ 890
+ ? 0.58
+ : 0.65)),
child:
SingleChildScrollView(
key: PageStorageKey<
@@ -736,33 +742,35 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
: '') +
'tabscroll'),
scrollDirection:
- Axis.horizontal,
- child: HandCursor(
- child: Material(
- color: _model.webInputColor,
- child: InkWell(
- hoverColor: _model.paletteColor.withOpacity(0.3),
- child: subItems.length == 1
- ? Container()
- : TabBar(
- indicatorPadding: EdgeInsets.zero,
- indicatorColor: _model.backgroundColor,
- onTap: (int value) {
- final GlobalKey globalKey = widget.webLayoutPageState.outputContainer.key;
- final _SampleOutputContainerState _outputContainerState = globalKey.currentState;
- _outputContainerState.sample = subItems[value];
- _outputContainerState.needTabs = true;
- _outputContainerState.subItems = subItems;
- _outputContainerState.tabIndex = value;
- if (_model.currentSampleKey == null || _model.currentSampleKey != _outputContainerState.sample.key) {
- _outputContainerState.refresh();
- }
- },
- labelColor: _model.backgroundColor,
- unselectedLabelColor: _model.themeData.brightness == Brightness.dark ? Colors.white : const Color.fromRGBO(89, 89, 89, 1),
- isScrollable: true,
- tabs: _getTabs(subItems),
- )))))),
+ Axis
+ .horizontal,
+ child: Material(
+ color: _model
+ .webInputColor,
+ child: InkWell(
+ hoverColor: _model.paletteColor.withOpacity(0.3),
+ child: subItems.length == 1
+ ? Container()
+ : TabBar(
+ indicatorPadding: EdgeInsets.zero,
+ indicatorColor: _model.backgroundColor,
+ onTap: (int value) {
+ widget.sampleModel.needToMaximize = false;
+ final GlobalKey globalKey = widget.webLayoutPageState.outputContainer.key;
+ final _SampleOutputContainerState _outputContainerState = globalKey.currentState;
+ _outputContainerState.sample = subItems[value];
+ _outputContainerState.needTabs = true;
+ _outputContainerState.subItems = subItems;
+ _outputContainerState.tabIndex = value;
+ if (_model.currentSampleKey == null || _model.currentSampleKey != _outputContainerState.sample.key) {
+ _outputContainerState.refresh();
+ }
+ },
+ labelColor: _model.backgroundColor,
+ unselectedLabelColor: _model.themeData.brightness == Brightness.dark ? Colors.white : const Color.fromRGBO(89, 89, 89, 1),
+ isScrollable: true,
+ tabs: _getTabs(subItems),
+ ))))),
Container(
child: Row(
children: [
@@ -774,19 +782,37 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
Container(
height: 24,
width: 24,
- child: HandCursor(
- child: InkWell(
- child: Icon(
- Icons.code,
- color: _model
- .webIconColor),
- onTap: () {
- launch(_sample
- .codeLink);
- },
- ),
+ child: InkWell(
+ child: Icon(
+ Icons.code,
+ color: _model
+ .webIconColor),
+ onTap: () {
+ launch(_sample
+ .codeLink);
+ },
),
),
+ const Padding(
+ padding:
+ EdgeInsets.only(
+ left: 13),
+ ),
+ InkWell(
+ child: Container(
+ child: Transform.scale(
+ scale: 0.85,
+ child: Icon(
+ Icons
+ .open_in_full,
+ color: _model
+ .webIconColor))),
+ onTap: () {
+ performMaximize(
+ _model,
+ _sample);
+ },
+ ),
const Padding(
padding:
EdgeInsets.only(
@@ -798,21 +824,17 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
height: 24,
width: 24,
child:
- HandCursor(
- child:
- InkWell(
- child: Icon(
- Icons
- .menu,
- color:
- _model.webIconColor),
- onTap:
- () {
- outputScaffoldKey
- .currentState
- .openEndDrawer();
- },
- ),
+ InkWell(
+ child: Icon(
+ Icons
+ .menu,
+ color: _model
+ .webIconColor),
+ onTap: () {
+ outputScaffoldKey
+ .currentState
+ .openEndDrawer();
+ },
),
)
: Container(),
@@ -869,8 +891,7 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
Container(
height: 24,
width: 24,
- child: HandCursor(
- child: InkWell(
+ child: InkWell(
child: Icon(Icons.code,
color: _model
.webIconColor),
@@ -878,7 +899,25 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
launch(
_sample.codeLink);
},
- )),
+ ),
+ ),
+ const Padding(
+ padding: EdgeInsets.only(
+ left: 15),
+ ),
+ InkWell(
+ child: Container(
+ child: Transform.scale(
+ scale: 0.85,
+ child: Icon(
+ Icons
+ .open_in_full,
+ color: _model
+ .webIconColor))),
+ onTap: () {
+ performMaximize(
+ _model, _sample);
+ },
),
const Padding(
padding: EdgeInsets.only(
@@ -889,8 +928,7 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
? Container(
height: 24,
width: 24,
- child: HandCursor(
- child: InkWell(
+ child: InkWell(
child: Icon(
Icons.menu,
color: _model
@@ -900,7 +938,7 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
.currentState
.openEndDrawer();
},
- )),
+ ),
)
: Container(),
],
@@ -915,6 +953,8 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
color: _model.cardThemeColor,
child: _OutputContainer(
key: GlobalKey(),
+ sampleOutputContainerState:
+ this,
subItem: _sample,
sampleView: _model
.sampleWidget[_sample.key],
@@ -970,7 +1010,6 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
textAlign: TextAlign.justify,
style: TextStyle(
color: _model.textColor,
- fontSize: 14,
fontFamily: 'Roboto-Regular',
letterSpacing: 0.3)))
: Container(),
@@ -979,6 +1018,16 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
);
}
+ void performMaximize(SampleModel model, SubItem sample) {
+ model.needToMaximize = true;
+ _PopupState state = widget.webLayoutPageState.popUpKey.currentState;
+ state._sampleDetails = sample;
+ state._currentWidgetKey = model.currentRenderSample.key;
+ _OutputContainerState _outputContainerState = _outputKey.currentState;
+ _outputContainerState.setState(() {});
+ state.refresh(true);
+ }
+
/// Get tabs which length is equal to list length
List _getTabs(List list) {
final List _tabs = [];
@@ -990,9 +1039,7 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
children: [
Text(list[i].title.toString() + (_status != '' ? ' ' : ''),
style: const TextStyle(
- letterSpacing: 0.5,
- fontSize: 14,
- fontFamily: 'Roboto-Medium')),
+ letterSpacing: 0.5, fontFamily: 'Roboto-Medium')),
_status == ''
? Container()
: Container(
@@ -1008,7 +1055,11 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
),
alignment: Alignment.center,
child: Text(
- _status == 'New' ? 'N' : _status == 'Updated' ? 'U' : '',
+ _status == 'New'
+ ? 'N'
+ : _status == 'Updated'
+ ? 'U'
+ : '',
style: const TextStyle(fontSize: 11, color: Colors.white),
),
),
@@ -1032,6 +1083,7 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
padding: const EdgeInsets.fromLTRB(5, 5, 5, 5),
child: _OutputContainer(
key: GlobalKey(),
+ sampleOutputContainerState: this,
sampleModel: model,
subItem: list[i],
sampleView: model.sampleWidget[list[i].key]))),
@@ -1069,7 +1121,12 @@ class _SampleOutputContainerState extends State<_SampleOutputContainer> {
/// Output sample renders inside of this widget
class _OutputContainer extends StatefulWidget {
- _OutputContainer({this.sampleModel, this.key, this.subItem, this.sampleView})
+ _OutputContainer(
+ {this.sampleModel,
+ this.key,
+ this.subItem,
+ this.sampleView,
+ this.sampleOutputContainerState})
: super(key: key);
final SampleModel sampleModel;
@@ -1081,6 +1138,8 @@ class _OutputContainer extends StatefulWidget {
final Function sampleView;
+ final _SampleOutputContainerState sampleOutputContainerState;
+
@override
State createState() {
return _OutputContainerState();
@@ -1088,8 +1147,20 @@ class _OutputContainer extends StatefulWidget {
}
class _OutputContainerState extends State<_OutputContainer> {
+ _OutputContainerState();
+ GlobalKey renderOutputKey;
+
+ Widget renderWidget;
+
+ void initState() {
+ renderOutputKey = GlobalKey();
+ super.initState();
+ }
+
@override
Widget build(BuildContext context) {
+ widget.sampleModel.outputContainerState = this;
+ widget.sampleOutputContainerState._outputKey = widget.key;
widget.sampleModel.oldWindowSize = widget.sampleModel.oldWindowSize == null
? MediaQuery.of(context).size
: widget.sampleModel.currentWindowSize;
@@ -1100,10 +1171,16 @@ class _OutputContainerState extends State<_OutputContainer> {
widget.sampleModel.oldWindowSize.height !=
widget.sampleModel.currentWindowSize.height) {
widget.sampleModel.currentSampleKey = widget.subItem.key;
- return Container(child: widget.sampleModel.currentRenderSample);
+ return widget.sampleModel.needToMaximize
+ ? Container()
+ : Container(child: widget.sampleModel.currentRenderSample);
} else {
- widget.sampleModel.currentRenderSample =
- widget.sampleView(GlobalKey());
+ widget.sampleModel.currentRenderSample = renderWidget != null
+ ? renderWidget
+ : widget.sampleView(GlobalKey());
+ renderWidget = null;
+ widget.sampleModel.propertyPanelKey =
+ widget.sampleModel.currentRenderSample.key;
widget.sampleModel.currentSampleKey = widget.subItem.key;
return MaterialApp(
debugShowCheckedModeBanner: false,
@@ -1114,28 +1191,22 @@ class _OutputContainerState extends State<_OutputContainer> {
routes: {
widget.subItem.breadCrumbText: (BuildContext cotext) => Scaffold(
backgroundColor: widget.sampleModel.cardThemeColor,
- body: widget.sampleModel.currentRenderSample)
- },
- home: Builder(builder: (BuildContext context) {
- return Scaffold(
- backgroundColor: widget.sampleModel.cardThemeColor,
- body: widget.sampleView(GlobalKey()));
- }));
+ body: widget.sampleModel.needToMaximize
+ ? Container()
+ : widget.sampleModel.currentRenderSample)
+ });
}
}
}
/// Get the Proeprty panel widget in the drawer
class _PropertiesPanel extends StatefulWidget {
- _PropertiesPanel({this.sampleModel, this.webLayoutPageState, this.key})
- : super(key: key);
+ _PropertiesPanel({this.sampleModel, this.key}) : super(key: key);
final SampleModel sampleModel;
@override
final Key key;
- final _WebLayoutPageState webLayoutPageState;
-
@override
State createState() {
return _PropertiesPanelState();
@@ -1143,11 +1214,20 @@ class _PropertiesPanel extends StatefulWidget {
}
class _PropertiesPanelState extends State<_PropertiesPanel> {
+ GlobalKey _sampleKey;
+
+ @override
+ void initState() {
+ super.initState();
+ }
+
@override
Widget build(BuildContext context) {
- final GlobalKey _sampleKey = widget.sampleModel.currentRenderSample.key;
+ final SampleModel model = widget.sampleModel;
+ _sampleKey = model.propertyPanelKey;
final SampleViewState _sampleViewState = _sampleKey.currentState;
final Widget _settingPanelContent = _sampleViewState.buildSettings(context);
+
return Theme(
data: ThemeData(
brightness: widget.sampleModel.themeData.brightness,
@@ -1176,19 +1256,19 @@ class _PropertiesPanelState extends State<_PropertiesPanel> {
fontWeight: FontWeight.bold,
fontSize: 16),
),
- HandCursor(
- child: IconButton(
+ IconButton(
icon: Icon(Icons.close,
color: widget.sampleModel.webIconColor),
onPressed: () {
Navigator.pop(context);
},
- ))
+ )
]),
Container(
padding: const EdgeInsets.only(right: 5),
height: 600,
width: 238,
+ alignment: Alignment.topCenter,
child: _settingPanelContent)
],
))))),
@@ -1225,8 +1305,7 @@ class _TileContainerState extends State<_TileContainer> {
@override
Widget build(BuildContext context) {
final SampleModel _model = widget.sampleModel;
- return HandCursor(
- child: CustomExpansionTile(
+ return CustomExpansionTile(
headerBackgroundColor: _model.webBackgroundColor,
onExpansionChanged: (bool value) {
final _SampleInputContainerState _sampleInputContainerState =
@@ -1251,7 +1330,7 @@ class _TileContainerState extends State<_TileContainer> {
key: PageStorageKey(widget.item.title),
children: _getNextLevelChildren(
_model, widget.item.subItems, widget.item.title),
- ));
+ );
}
/// Get expanded children
@@ -1279,99 +1358,93 @@ class _TileContainerState extends State<_TileContainer> {
_nextLevelChildren.add(list[i].type == 'sample'
? Material(
color: model.webBackgroundColor,
- child: HandCursor(
- child: InkWell(
- hoverColor: Colors.grey.withOpacity(0.2),
- onTap: () {
- final _SampleInputContainerState
- _sampleInputContainerState = widget
- .webLayoutPageState
- .sampleInputKey
- .currentState;
- final GlobalKey _globalKey =
- widget.webLayoutPageState.outputContainer.key;
- final _SampleOutputContainerState
- _outputContainerState = _globalKey.currentState;
- if (_outputContainerState.outputScaffoldKey
- .currentState.isEndDrawerOpen ||
- widget.webLayoutPageState.scaffoldKey.currentState
- .isDrawerOpen) {
- Navigator.pop(context);
- }
- _outputContainerState.sample = list[i];
- _outputContainerState.needTabs = false;
- _outputContainerState.orginText =
- widget.webLayoutPageState.sample.control.title +
- ' > ' +
- text +
- ' > ' +
- list[i].title;
-
- widget.webLayoutPageState.selectSample = widget
- .webLayoutPageState.selectSample = list[i].title;
- widget.webLayoutPageState.sample =
- list[i].subItems != null
- ? list[i].subItems[0]
- : list[i];
- if (model.currentSampleKey == null ||
- (list[i].key != null
- ? model.currentSampleKey != list[i].key
- : model.currentSampleKey !=
- list[i].subItems[0].key)) {
- _sampleInputContainerState.refresh();
- _outputContainerState.refresh();
- }
- },
- child: Container(
- color: _isNeedSelect
- ? Colors.grey.withOpacity(0.2)
- : Colors.transparent,
- child: Row(children: [
- Container(
- width: 5,
+ child: InkWell(
+ hoverColor: Colors.grey.withOpacity(0.2),
+ onTap: () {
+ final _SampleInputContainerState
+ _sampleInputContainerState =
+ widget.webLayoutPageState.sampleInputKey.currentState;
+ final GlobalKey _globalKey =
+ widget.webLayoutPageState.outputContainer.key;
+ final _SampleOutputContainerState _outputContainerState =
+ _globalKey.currentState;
+ if (_outputContainerState
+ .outputScaffoldKey.currentState.isEndDrawerOpen ||
+ widget.webLayoutPageState.scaffoldKey.currentState
+ .isDrawerOpen) {
+ Navigator.pop(context);
+ }
+ _outputContainerState.sample = list[i];
+ _outputContainerState.needTabs = false;
+ _outputContainerState.orginText =
+ widget.webLayoutPageState.sample.control.title +
+ ' > ' +
+ text +
+ ' > ' +
+ list[i].title;
+
+ widget.webLayoutPageState.selectSample = widget
+ .webLayoutPageState.selectSample = list[i].title;
+ widget.webLayoutPageState.sample =
+ list[i].subItems != null
+ ? list[i].subItems[0]
+ : list[i];
+ if (model.currentSampleKey == null ||
+ (list[i].key != null
+ ? model.currentSampleKey != list[i].key
+ : model.currentSampleKey !=
+ list[i].subItems[0].key)) {
+ _sampleInputContainerState.refresh();
+ _outputContainerState.refresh();
+ }
+ },
+ child: Container(
+ color: _isNeedSelect
+ ? Colors.grey.withOpacity(0.2)
+ : Colors.transparent,
+ child: Row(children: [
+ Container(
+ width: 5,
+ alignment: Alignment.centerLeft,
+ padding: const EdgeInsets.fromLTRB(1, 10, 10, 10),
+ color: _isNeedSelect
+ ? model.backgroundColor
+ : Colors.transparent,
+ child: const Opacity(
+ opacity: 0.0, child: Text('1'))),
+ Expanded(
+ child: Container(
alignment: Alignment.centerLeft,
padding:
- const EdgeInsets.fromLTRB(1, 10, 10, 10),
- color: _isNeedSelect
- ? model.backgroundColor
+ const EdgeInsets.fromLTRB(20, 10, 10, 10),
+ child: Text(list[i].title,
+ style: TextStyle(
+ fontSize: 13,
+ fontFamily: 'Roboto-Regular',
+ color: _isNeedSelect
+ ? model.backgroundColor
+ : model.textColor)))),
+ Container(
+ decoration: BoxDecoration(
+ color: (_status != null && _status != '')
+ ? (_status == 'New'
+ ? const Color.fromRGBO(55, 153, 30, 1)
+ : const Color.fromRGBO(
+ 246, 117, 0, 1))
: Colors.transparent,
- child: const Opacity(
- opacity: 0.0, child: Text('1'))),
- Expanded(
- child: Container(
- alignment: Alignment.centerLeft,
- padding: const EdgeInsets.fromLTRB(
- 20, 10, 10, 10),
- child: Text(list[i].title,
- style: TextStyle(
- fontSize: 13,
- fontFamily: 'Roboto-Regular',
- color: _isNeedSelect
- ? model.backgroundColor
- : model.textColor)))),
- Container(
- decoration: BoxDecoration(
- color: (_status != null && _status != '')
- ? (_status == 'New'
- ? const Color.fromRGBO(
- 55, 153, 30, 1)
- : const Color.fromRGBO(
- 246, 117, 0, 1))
- : Colors.transparent,
- shape: BoxShape.rectangle,
- borderRadius: const BorderRadius.all(
- Radius.circular(10.0))),
- padding:
- const EdgeInsets.fromLTRB(5, 2.7, 5, 2.7),
- child: Text(_status,
- style: const TextStyle(
- fontSize: 10.5,
- color: Colors.white))),
- _status != null && _status != ''
- ? const Padding(
- padding: EdgeInsets.only(right: 5))
- : Container(),
- ])))))
+ shape: BoxShape.rectangle,
+ borderRadius: const BorderRadius.all(
+ Radius.circular(10.0))),
+ padding:
+ const EdgeInsets.fromLTRB(5, 2.7, 5, 2.7),
+ child: Text(_status,
+ style: const TextStyle(
+ fontSize: 10.5, color: Colors.white))),
+ _status != null && _status != ''
+ ? const Padding(
+ padding: EdgeInsets.only(right: 5))
+ : Container(),
+ ]))))
: Material(
color: model.webBackgroundColor,
child: InkWell(
@@ -1472,3 +1545,150 @@ class _TileContainerState extends State<_TileContainer> {
return _nextLevelChildren;
}
}
+
+/// Showing the expanded sample in a pop-up widget
+class _Popup extends StatefulWidget {
+ _Popup({this.key, this.show}) : super(key: key);
+ final Key key;
+ final bool show;
+ @override
+ _PopupState createState() => _PopupState(show);
+}
+
+class _PopupState extends State<_Popup> {
+ _PopupState(this.show);
+
+ bool show;
+ SubItem _sampleDetails;
+
+ GlobalKey _currentWidgetKey;
+
+ @override
+ void initState() {
+ super.initState();
+ }
+
+ void refresh(popupShow) {
+ setState(() {
+ show = popupShow;
+ });
+ }
+
+ @override
+ void dispose() {
+ SampleModel.instance.needToMaximize = false;
+ super.dispose();
+ }
+
+ GlobalKey scaffoldKey = GlobalKey();
+ _PropertiesPanel _propertiesPanel;
+ GlobalKey _propertiesPanelKey = GlobalKey();
+
+ SampleModel model;
+ @override
+ Widget build(BuildContext context) {
+ model = SampleModel.instance;
+ _propertiesPanel =
+ _PropertiesPanel(sampleModel: model, key: _propertiesPanelKey);
+ return IgnorePointer(
+ ignoring: !show,
+ child: Container(
+ color: show ? Colors.black54 : Colors.transparent,
+ height: MediaQuery.of(context).size.height,
+ width: MediaQuery.of(context).size.width,
+ child: Container(
+ child: Opacity(
+ opacity: show ? 1.0 : 0.0,
+ child: _sampleDetails != null
+ ? Theme(
+ data: ThemeData(
+ brightness: model.themeData.brightness,
+ primaryColor: model.backgroundColor),
+ child: Scaffold(
+ key: scaffoldKey,
+ endDrawer: _propertiesPanel,
+ appBar: PreferredSize(
+ preferredSize: Size.fromHeight(40),
+ child: AppBar(
+ title: Text(_sampleDetails.title,
+ style: TextStyle(
+ fontFamily: 'Roboto-Medium',
+ fontSize: 16,
+ color: model.textColor)),
+ automaticallyImplyLeading: false,
+ backgroundColor:
+ model.webBackgroundColor,
+ actions: [
+ _sampleDetails.needsPropertyPanel ==
+ true
+ ? Container(
+ height: 40,
+ width: 40,
+ child: IconButton(
+ icon: Icon(Icons.menu,
+ color:
+ model.webIconColor),
+ onPressed: () {
+ model.propertyPanelKey =
+ _currentWidgetKey;
+ scaffoldKey.currentState
+ .openEndDrawer();
+ },
+ ))
+ : Container(),
+ Container(
+ height: 40,
+ width: 40,
+ child: IconButton(
+ icon: Icon(Icons.close,
+ color: model.webIconColor),
+ onPressed: () {
+ model.needToMaximize = false;
+ _OutputContainerState
+ _outputContainerState =
+ model.outputContainerState;
+ _outputContainerState
+ .setState(() {
+ _outputContainerState
+ .renderWidget =
+ _currentWidgetKey
+ ?.currentWidget;
+ });
+ _sampleDetails = null;
+ refresh(false);
+ },
+ ),
+ )
+ ])),
+ backgroundColor: model.themeData.brightness ==
+ Brightness.dark
+ ? const Color.fromRGBO(33, 33, 33, 1)
+ : Colors.white,
+ body: _currentWidgetKey?.currentWidget))
+ : Container()))));
+ }
+}
+
+/// Holds current render sample
+class _RenderOutput extends StatefulWidget {
+ _RenderOutput({this.renderWidget, this.key}) : super(key: key);
+
+ @override
+ final Key key;
+
+ final Widget renderWidget;
+
+ @override
+ State createState() {
+ return _RenderOutputState(renderWidget);
+ }
+}
+
+class _RenderOutputState extends State<_RenderOutput> {
+ _RenderOutputState(this.renderWidget);
+ Widget renderWidget;
+ @override
+ Widget build(BuildContext context) {
+ return renderWidget;
+ }
+}
diff --git a/lib/sample_browser.dart b/lib/sample_browser.dart
index 9b0d3f1d..337c88f2 100644
--- a/lib/sample_browser.dart
+++ b/lib/sample_browser.dart
@@ -1,25 +1,18 @@
/// dart imports
-import 'dart:async';
import 'dart:io' show Platform;
-import 'dart:typed_data';
-import 'dart:ui' as ui;
/// package imports
import 'package:flutter/foundation.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
-import 'package:flutter/services.dart';
import 'package:url_launcher/url_launcher.dart';
/// local imports
import 'model/helper.dart';
import 'model/model.dart';
import 'model/web_view.dart';
-import 'samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart';
import 'widgets/animate_opacity_widget.dart';
import 'widgets/search_bar.dart';
-import 'widgets/shared/mobile.dart'
- if (dart.library.html) 'widgets/shared/web.dart';
/// Root widget of the sample browser
/// Contains the Homepage wrapped with a MaterialApp widget
@@ -50,7 +43,7 @@ class _SampleBrowserState extends State {
final SampleRoute sampleRoute = _sampleListModel.routes[i];
WidgetCategory category;
for (int j = 0; j < _sampleListModel.categoryList.length; j++) {
- if (sampleRoute.subItem.categoryName.toUpperCase() ==
+ if (sampleRoute.subItem.categoryName ==
_sampleListModel.categoryList[j].categoryName) {
category = _sampleListModel.categoryList[j];
break;
@@ -109,15 +102,11 @@ class HomePage extends StatefulWidget {
class _HomePageState extends State {
SampleModel sampleListModel;
GlobalKey scaffoldKey = GlobalKey();
- int columnCount;
- double _cardWidth;
- double _sidePadding;
final ScrollController controller = ScrollController();
@override
void initState() {
sampleListModel = SampleModel.instance;
_addColors();
- _init();
sampleListModel.addListener(_handleChange);
super.initState();
}
@@ -131,22 +120,6 @@ class _HomePageState extends State {
}
}
- Future _init() async {
- final ByteData data = await rootBundle.load('images/dashline.png');
- image = await _loadImage(Uint8List.view(data.buffer));
- }
-
- Future _loadImage(List img) async {
- final Completer completer = Completer();
- ui.decodeImageFromList(img, (ui.Image img) {
- setState(() {
- isImageloaded = true;
- });
- return completer.complete(img);
- });
- return completer.future;
- }
-
@override
Widget build(BuildContext context) {
///Checking the download button is currently hovered
@@ -155,191 +128,192 @@ class _HomePageState extends State {
model.isMobileResolution = (MediaQuery.of(context).size.width) < 768;
return Container(
child: SafeArea(
- child: model.isMobileResolution
- ? Scaffold(
- resizeToAvoidBottomPadding: true,
- drawer: getLeftSideDrawer(model),
- key: scaffoldKey,
- backgroundColor: model.webBackgroundColor,
- endDrawer: model.isWeb ? showWebThemeSettings(model) : null,
- appBar: PreferredSize(
- preferredSize: const Size.fromHeight(46.0),
- child: AppBar(
- elevation: 0.0,
- backgroundColor: model.paletteColor,
- title: AnimateOpacityWidget(
- controller: controller,
- opacity: 0,
- child: const Text('Flutter UI Widgets',
- style: TextStyle(
- fontSize: 18, fontFamily: 'HeeboMedium'))),
- actions: [
- Container(
- height: 40,
- width: 40,
- child: IconButton(
- icon:
- const Icon(Icons.settings, color: Colors.white),
- onPressed: () {
- model.isWeb
- ? scaffoldKey.currentState.openEndDrawer()
- : showBottomSettingsPanel(model, context);
- },
+ child: model.isMobileResolution
+ ? Scaffold(
+ resizeToAvoidBottomPadding: true,
+ drawer: (!model.isWeb && Platform.isIOS)
+ ? null //Avoiding drawer in iOS platform
+ : getLeftSideDrawer(model),
+ key: scaffoldKey,
+ backgroundColor: model.webBackgroundColor,
+ endDrawer: model.isWeb ? showWebThemeSettings(model) : null,
+ appBar: PreferredSize(
+ preferredSize: const Size.fromHeight(46.0),
+ child: AppBar(
+ elevation: 0.0,
+ backgroundColor: model.paletteColor,
+ title: AnimateOpacityWidget(
+ controller: controller,
+ opacity: 0,
+ child: const Text('Flutter UI Widgets',
+ style: TextStyle(
+ fontSize: 18, fontFamily: 'HeeboMedium'))),
+ actions: [
+ Container(
+ height: 40,
+ width: 40,
+ child: IconButton(
+ icon: const Icon(Icons.settings,
+ color: Colors.white),
+ onPressed: () {
+ model.isWeb
+ ? scaffoldKey.currentState.openEndDrawer()
+ : showBottomSettingsPanel(model, context);
+ },
+ ),
),
- ),
- ],
- )),
- body: Container(
- transform: Matrix4.translationValues(0, -1, 0),
- child: _getScrollableWidget(model)))
- : Scaffold(
- bottomNavigationBar: getFooter(context, model),
- key: scaffoldKey,
- backgroundColor: model.webBackgroundColor,
- endDrawer: showWebThemeSettings(model),
- resizeToAvoidBottomPadding: true,
- appBar: PreferredSize(
- preferredSize: const Size.fromHeight(90.0),
- child: AppBar(
- leading: Container(),
- elevation: 0.0,
- backgroundColor: model.paletteColor,
- flexibleSpace: Container(
- transform: Matrix4.translationValues(0, 4, 0),
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Padding(
- padding:
- const EdgeInsets.fromLTRB(24, 10, 0, 0),
- child: Row(children: [
- const Text('Flutter UI Widgets ',
+ ],
+ )),
+ body: Container(
+ transform: Matrix4.translationValues(0, -1, 0),
+ child: _getScrollableWidget(model)))
+ : Scaffold(
+ bottomNavigationBar: getFooter(context, model),
+ key: scaffoldKey,
+ backgroundColor: model.webBackgroundColor,
+ endDrawer: showWebThemeSettings(model),
+ resizeToAvoidBottomPadding: true,
+ appBar: PreferredSize(
+ preferredSize: const Size.fromHeight(90.0),
+ child: AppBar(
+ leading: Container(),
+ elevation: 0.0,
+ backgroundColor: model.paletteColor,
+ flexibleSpace: Container(
+ transform: Matrix4.translationValues(0, 4, 0),
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Padding(
+ padding:
+ const EdgeInsets.fromLTRB(24, 10, 0, 0),
+ child: Row(children: [
+ const Text('Flutter UI Widgets ',
+ style: TextStyle(
+ color: Colors.white,
+ fontSize: 28,
+ letterSpacing: 0.53,
+ fontFamily: 'Roboto-Bold')),
+ model.isWeb
+ ? Container(
+ padding:
+ const EdgeInsets.fromLTRB(
+ 3, 0, 3, 0),
+ decoration: const BoxDecoration(
+ shape: BoxShape.rectangle,
+ color: Color.fromRGBO(
+ 245, 188, 14, 1)),
+ child: const Text(
+ 'BETA',
+ style: TextStyle(
+ fontSize: 14,
+ letterSpacing: 0.26,
+ fontFamily: 'Roboto-Medium',
+ color: Colors.black),
+ ))
+ : Container()
+ ])),
+ const Padding(
+ padding: EdgeInsets.fromLTRB(24, 0, 0, 0),
+ child: Text('Fast . Fluid . Flexible',
style: TextStyle(
color: Colors.white,
- fontSize: 28,
- letterSpacing: 0.53,
- fontFamily: 'Roboto-Bold')),
- model.isWeb
- ? Container(
- padding: const EdgeInsets.fromLTRB(
- 3, 0, 3, 0),
- decoration: const BoxDecoration(
- shape: BoxShape.rectangle,
- color: Color.fromRGBO(
- 245, 188, 14, 1)),
- child: const Text(
- 'BETA',
- style: TextStyle(
- fontSize: 14,
- letterSpacing: 0.26,
- fontFamily: 'Roboto-Medium',
- color: Colors.black),
- ))
- : Container()
- ])),
- const Padding(
- padding: EdgeInsets.fromLTRB(24, 0, 0, 0),
- child: Text('Fast . Fluid . Flexible',
- style: TextStyle(
- color: Colors.white,
- fontSize: 14,
- fontFamily: 'Roboto-Regular',
- letterSpacing: 0.26,
- fontWeight: FontWeight.normal))),
- const Padding(
- padding: EdgeInsets.only(top: 15),
- ),
- Container(
- alignment: Alignment.bottomCenter,
- width: double.infinity,
- height: 16,
- decoration: BoxDecoration(
- color: model.webBackgroundColor,
- borderRadius: const BorderRadius.only(
- topLeft: Radius.circular(12.0),
- topRight: Radius.circular(12.0)),
- boxShadow: [
- BoxShadow(
- color: model.webBackgroundColor,
- offset: const Offset(0, 2.0),
- blurRadius: 0.25,
- )
- ]))
- ],
- )),
- actions: [
- MediaQuery.of(context).size.width < 500
- ? Container(height: 0, width: 9)
- : Container(
- child: Container(
- padding: const EdgeInsets.only(
- top: 10, right: 10),
- width: MediaQuery.of(context).size.width >=
- 900
- ? 400
- : MediaQuery.of(context).size.width / 3,
- height: MediaQuery.of(context).size.height *
- 0.0445,
- child: HandCursor(
- child: SearchBar(
- sampleListModel: model,
- ),
- ))),
-
- ///download option
- model.isMobileResolution
- ? Container()
- : Container(
- alignment: Alignment.center,
- padding: EdgeInsets.only(top: 10),
- child: Container(
- width: 115,
- height: 32,
+ fontSize: 14,
+ fontFamily: 'Roboto-Regular',
+ letterSpacing: 0.26,
+ fontWeight: FontWeight.normal))),
+ const Padding(
+ padding: EdgeInsets.only(top: 15),
+ ),
+ Container(
+ alignment: Alignment.bottomCenter,
+ width: double.infinity,
+ height: 16,
decoration: BoxDecoration(
- border:
- Border.all(color: Colors.white)),
- child: StatefulBuilder(builder:
- (BuildContext context,
- StateSetter setState) {
- return MouseRegion(
- child: InkWell(
- hoverColor: Colors.white,
- child: Padding(
- padding:
- const EdgeInsets.fromLTRB(
- 8, 9, 8, 9),
- child: Text('DOWNLOAD NOW',
- style: TextStyle(
- color:
- isHoveringDownloadButton
- ? model
- .paletteColor
- : Colors.white,
- fontSize: 12,
- fontFamily:
- 'Roboto-Medium')),
+ color: model.webBackgroundColor,
+ borderRadius: const BorderRadius.only(
+ topLeft: Radius.circular(12.0),
+ topRight: Radius.circular(12.0)),
+ boxShadow: [
+ BoxShadow(
+ color: model.webBackgroundColor,
+ offset: const Offset(0, 2.0),
+ blurRadius: 0.25,
+ )
+ ]))
+ ],
+ )),
+ actions: [
+ MediaQuery.of(context).size.width < 500
+ ? Container(height: 0, width: 9)
+ : Container(
+ child: Container(
+ padding:
+ const EdgeInsets.only(top: 10, right: 10),
+ width: MediaQuery.of(context).size.width >=
+ 900
+ ? 400
+ : MediaQuery.of(context).size.width / 3,
+ height: MediaQuery.of(context).size.height *
+ 0.0445,
+ child: SearchBar(
+ sampleListModel: model,
+ ),
+ )),
+
+ ///download option
+ model.isMobileResolution
+ ? Container()
+ : Container(
+ alignment: Alignment.center,
+ padding: EdgeInsets.only(top: 10),
+ child: Container(
+ width: 115,
+ height: 32,
+ decoration: BoxDecoration(
+ border:
+ Border.all(color: Colors.white)),
+ child: StatefulBuilder(builder:
+ (BuildContext context,
+ StateSetter setState) {
+ return MouseRegion(
+ child: InkWell(
+ hoverColor: Colors.white,
+ child: Padding(
+ padding:
+ const EdgeInsets.fromLTRB(
+ 8, 9, 8, 9),
+ child: Text('DOWNLOAD NOW',
+ style: TextStyle(
+ color:
+ isHoveringDownloadButton
+ ? model
+ .paletteColor
+ : Colors.white,
+ fontSize: 12,
+ fontFamily:
+ 'Roboto-Medium')),
+ ),
+ onTap: () {
+ launch(
+ 'https://www.syncfusion.com/downloads/flutter/confirm');
+ },
),
- onTap: () {
- launch(
- 'https://www.syncfusion.com/downloads/flutter/confirm');
+ onHover: (PointerHoverEvent event) {
+ isHoveringDownloadButton = true;
+ setState(() {});
},
- ),
- onHover: (PointerHoverEvent event) {
- isHoveringDownloadButton = true;
- setState(() {});
- },
- onExit: (PointerExitEvent event) {
- isHoveringDownloadButton = false;
- setState(() {});
- });
- }))),
- Container(
- padding: MediaQuery.of(context).size.width < 500
- ? const EdgeInsets.only(top: 20, left: 5)
- : const EdgeInsets.only(top: 10, right: 20),
- height: 60,
- width: 60,
- child: HandCursor(
+ onExit: (PointerExitEvent event) {
+ isHoveringDownloadButton = false;
+ setState(() {});
+ });
+ }))),
+ Container(
+ padding: MediaQuery.of(context).size.width < 500
+ ? const EdgeInsets.only(top: 20, left: 5)
+ : const EdgeInsets.only(top: 10, right: 20),
+ height: 60,
+ width: 60,
child: IconButton(
icon: const Icon(Icons.settings,
color: Colors.white),
@@ -348,11 +322,9 @@ class _HomePageState extends State {
},
),
),
- ),
- ],
- )),
- body: _getWebBodyWidget(model)),
- ),
+ ],
+ )),
+ body: _CategorizedCards())),
);
}
@@ -406,9 +378,7 @@ class _HomePageState extends State {
? Container(
height: MediaQuery.of(context).size.height,
child: ListView(children: searchResults))
- : Row(
- crossAxisAlignment: CrossAxisAlignment.start,
- children: _getControls(model, context))),
+ : _CategorizedCards()),
]),
)
],
@@ -440,272 +410,6 @@ class _HomePageState extends State {
];
}
- /// get the home page body contents in the web
- Widget _getWebBodyWidget(SampleModel model) {
- final double deviceWidth = MediaQuery.of(context).size.width;
- _sidePadding = deviceWidth > 1060
- ? deviceWidth * 0.038
- : deviceWidth >= 768 ? deviceWidth * 0.041 : deviceWidth * 0.05;
- final Widget _controlWidget = Container(
- padding: EdgeInsets.only(top: deviceWidth > 1060 ? 15 : 10),
- width: MediaQuery.of(context).size.width,
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceAround,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: _getControls(model, context),
- ));
- return SingleChildScrollView(child: _controlWidget);
- }
-
- /// get category wise control list resolution base
- List _getControls(SampleModel model, BuildContext context) {
- final double deviceWidth = MediaQuery.of(context).size.width;
- num padding;
- if (deviceWidth > 1060) {
- padding = deviceWidth * 0.011;
- _cardWidth = (deviceWidth * 0.9) / 3;
-
- ///setting max cardwidth, spcing between cards in higher resolutions
- if (deviceWidth > 3000) {
- _cardWidth = 2800 / 3;
- _sidePadding = (deviceWidth - 2740) * 0.5;
- padding = 30;
- }
- columnCount = 3;
- return [
- Padding(padding: EdgeInsets.only(left: _sidePadding)),
- Column(
- mainAxisAlignment: MainAxisAlignment.start,
- children: [
- _getCategoryWidget(model, model.categoryList[1]),
- Padding(padding: EdgeInsets.only(top: padding)),
- ],
- ),
- Padding(padding: EdgeInsets.only(left: padding)),
- Column(mainAxisAlignment: MainAxisAlignment.start, children: [
- _getCategoryWidget(model, model.categoryList[0]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[2]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[3]),
- ]),
- Padding(padding: EdgeInsets.only(left: padding)),
- Column(mainAxisAlignment: MainAxisAlignment.start, children: [
- _getCategoryWidget(model, model.categoryList[4]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[5]),
- Padding(padding: EdgeInsets.only(top: padding)),
- model.isWeb
- ? Container()
- : _getCategoryWidget(model, model.categoryList[6]),
- ]),
- Padding(padding: EdgeInsets.only(left: _sidePadding))
- ];
- } else if (deviceWidth >= 768) {
- padding = deviceWidth * 0.018;
- _cardWidth = (deviceWidth * 0.9) / 2;
- columnCount = 2;
- return [
- Padding(padding: EdgeInsets.only(left: _sidePadding)),
- Column(mainAxisAlignment: MainAxisAlignment.start, children: [
- _getCategoryWidget(model, model.categoryList[0]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[1]),
- Padding(padding: EdgeInsets.only(top: padding)),
- model.isWeb
- ? Container()
- : _getCategoryWidget(model, model.categoryList[6]),
- ]),
- Padding(padding: EdgeInsets.only(left: padding)),
- Column(
- mainAxisAlignment: MainAxisAlignment.start,
- children: [
- _getCategoryWidget(model, model.categoryList[2]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[3]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[4]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[5]),
- Padding(padding: EdgeInsets.only(top: padding)),
- ],
- ),
- Padding(padding: EdgeInsets.only(left: _sidePadding)),
- ];
- } else {
- columnCount = 1;
- _cardWidth = deviceWidth * 0.9;
- padding = deviceWidth * 0.035;
- _sidePadding = (deviceWidth * 0.1) / 2;
- return [
- Padding(padding: EdgeInsets.only(left: _sidePadding)),
- Column(children: [
- Padding(padding: EdgeInsets.only(top: (_sidePadding - 16).abs())),
- _getCategoryWidget(model, model.categoryList[0]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[1]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[2]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[3]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[4]),
- Padding(padding: EdgeInsets.only(top: padding)),
- _getCategoryWidget(model, model.categoryList[5]),
- Padding(padding: EdgeInsets.only(top: _sidePadding)),
- model.isWeb
- ? Container()
- : _getCategoryWidget(model, model.categoryList[6]),
- Padding(
- padding: EdgeInsets.only(top: model.isWeb ? 0 : _sidePadding)),
- ]),
- Padding(padding: EdgeInsets.only(left: _sidePadding)),
- ];
- }
- }
-
- /// get the rounded corner layout for given category
- Widget _getCategoryWidget(SampleModel model, WidgetCategory category) {
- final double width = _cardWidth;
- return Container(
- padding: const EdgeInsets.only(bottom: 10),
- decoration: BoxDecoration(
- color: model.cardColor,
- border: Border.all(
- color: const Color.fromRGBO(0, 0, 0, 0.12), width: 1.1),
- borderRadius: const BorderRadius.all(Radius.circular(12))),
- width: width,
- child: Column(children: [
- Container(
- padding: const EdgeInsets.only(top: 15, bottom: 2),
- child: Text(
- category.categoryName,
- style: TextStyle(
- color: model.backgroundColor,
- fontSize: 16,
- fontFamily: 'Roboto-Bold'),
- ),
- ),
- Divider(
- color: model.themeData.brightness == Brightness.dark
- ? const Color.fromRGBO(61, 61, 61, 1)
- : const Color.fromRGBO(238, 238, 238, 1),
- thickness: 1,
- ),
- Column(children: _getControlListView(category, model))
- ]));
- }
-
- /// get the list view of the controls in the specified category
- List _getControlListView(WidgetCategory category, SampleModel model) {
- final List items = [];
- String status;
- for (int i = 0; i < category.controlList.length; i++) {
- final Control control = category.controlList[i];
- status = (control.status == 'preview' || control.status == 'Preview') &&
- !model.isWeb &&
- Platform.isIOS
- ? 'New'
- : (control.title == 'Radial Gauge' && model.isWeb)
- ? null
- : control.status;
- items.add(HandCursor(
- child: Container(
- color: model.cardColor,
- child: Material(
- color: model.cardColor,
- elevation: 0.0,
- child: InkWell(
- splashFactory: InkRipple.splashFactory,
- hoverColor: Colors.grey.withOpacity(0.2),
- onTap: () {
- !model.isWeb
- ? onTapControlInMobile(context, model, category, i)
- : onTapControlInWeb(context, model, category, i);
- model.searchResults.clear();
- },
- child: Container(
- child: ListTile(
- contentPadding: EdgeInsets.fromLTRB(
- 12, 2, 0, category.controlList.length > 3 ? 6 : 0),
- leading: Image.asset(control.image, fit: BoxFit.cover),
- title: Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- RichText(
- text: TextSpan(children: [
- TextSpan(
- text: control.title,
- style: TextStyle(
- fontSize: 12,
- letterSpacing: 0.1,
- color: model.textColor,
- fontFamily: 'Roboto-Bold'),
- ),
- TextSpan(
- text: control.title ==
- 'Circular ProgressBar'
- ? '' //' designed using Radial Gauge'
- : '',
- style: TextStyle(
- fontSize: 8,
- letterSpacing: 0.1,
- color: model.textColor,
- fontStyle: FontStyle.italic),
- )
- ]),
- ),
- status != null
- ? Container(
- decoration: BoxDecoration(
- shape: BoxShape.rectangle,
- color: status.toLowerCase() == 'new'
- ? const Color.fromRGBO(
- 55, 153, 30, 1)
- : status.toLowerCase() == 'updated'
- ? const Color.fromRGBO(
- 246, 117, 0, 1)
- : status.toLowerCase() ==
- 'preview'
- ? const Color.fromRGBO(
- 74, 90, 231, 1)
- : Colors.transparent,
- borderRadius: const BorderRadius.only(
- topLeft: Radius.circular(10),
- bottomLeft: Radius.circular(10))),
- padding: const EdgeInsets.fromLTRB(
- 6, 2.7, 4, 2.7),
- child: Text(status,
- style: const TextStyle(
- fontFamily: 'Roboto-Medium',
- color: Colors.white,
- fontSize: 10.5)))
- : Container()
- ]),
- subtitle: Container(
- child: Padding(
- padding:
- const EdgeInsets.fromLTRB(0.0, 7.0, 12.0, 0.0),
- child: Text(
- control.description,
- textAlign: TextAlign.left,
- softWrap: true,
- textScaleFactor: 1,
- overflow: TextOverflow.fade,
- style: const TextStyle(
- fontWeight: FontWeight.normal,
- fontSize: 12,
- color: Color.fromRGBO(128, 128, 128, 1),
- ),
- ),
- )),
- ),
- )))),
- ));
- }
- return items;
- }
-
/// returns searched result
List _getSearchedItems(SampleModel model) {
final List items = [];
@@ -814,3 +518,263 @@ class _PersistentHeaderDelegate extends SliverPersistentHeaderDelegate {
return true;
}
}
+
+/// Positioning/aligning the categories as cards
+/// based on the screen width
+class _CategorizedCards extends StatefulWidget {
+ @override
+ _CategorizedCardsState createState() => _CategorizedCardsState();
+}
+
+class _CategorizedCardsState extends State<_CategorizedCards> {
+ SampleModel model = SampleModel.instance;
+ double _cardWidth;
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(child: _getCategorizedCards());
+ }
+
+ Widget _getCategorizedCards() {
+ final double deviceWidth = MediaQuery.of(context).size.width;
+ double padding;
+ double _sidePadding = deviceWidth > 1060
+ ? deviceWidth * 0.038
+ : deviceWidth >= 768
+ ? deviceWidth * 0.041
+ : deviceWidth * 0.05;
+
+ Widget organizedCardWidget;
+
+ if (deviceWidth > 1060) {
+ padding = deviceWidth * 0.011;
+ _cardWidth = (deviceWidth * 0.9) / 3;
+
+ ///setting max cardwidth, spacing between cards in higher resolutions
+ if (deviceWidth > 3000) {
+ _cardWidth = 2800 / 3;
+ _sidePadding = (deviceWidth - 2740) * 0.5;
+ padding = 30;
+ }
+ List firstColumnWidgets = [];
+ List secondColumnWidgets = [];
+ List thirdColumnWidgets = [];
+ int firstColumnControlCount = 0;
+ int secondColumnControlCount = 0;
+ for (int i = 0; i < model.categoryList.length; i++) {
+ if (firstColumnControlCount < model.controlList.length / 3) {
+ firstColumnWidgets.add(_getCategoryWidget(model.categoryList[i]));
+ firstColumnWidgets
+ .add(Padding(padding: EdgeInsets.only(top: padding)));
+ firstColumnControlCount += model.categoryList[i].controlList.length;
+ } else if (secondColumnControlCount < model.controlList.length / 3 &&
+ (secondColumnControlCount +
+ model.categoryList[i].controlList.length <
+ model.controlList.length / 3)) {
+ secondColumnWidgets.add(_getCategoryWidget(model.categoryList[i]));
+ secondColumnWidgets
+ .add(Padding(padding: EdgeInsets.only(top: padding)));
+ secondColumnControlCount += model.categoryList[i].controlList.length;
+ } else {
+ thirdColumnWidgets.add(_getCategoryWidget(model.categoryList[i]));
+ thirdColumnWidgets
+ .add(Padding(padding: EdgeInsets.only(top: padding)));
+ }
+ organizedCardWidget = Row(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Padding(padding: EdgeInsets.only(left: _sidePadding)),
+ Column(children: firstColumnWidgets),
+ Padding(padding: EdgeInsets.only(left: padding)),
+ Column(children: secondColumnWidgets),
+ Padding(padding: EdgeInsets.only(left: padding)),
+ Column(children: thirdColumnWidgets),
+ Padding(
+ padding: EdgeInsets.only(left: _sidePadding),
+ )
+ ],
+ );
+ }
+ } else if (deviceWidth >= 768) {
+ padding = deviceWidth * 0.018;
+ _cardWidth = (deviceWidth * 0.9) / 2;
+ List firstColumnWidgets = [];
+ List secondColumnWidgets = [];
+ int firstColumnControlCount = 0;
+ for (int i = 0; i < model.categoryList.length; i++) {
+ if (firstColumnControlCount < model.controlList.length / 2) {
+ firstColumnWidgets.add(_getCategoryWidget(model.categoryList[i]));
+ firstColumnWidgets
+ .add(Padding(padding: EdgeInsets.only(top: padding)));
+ firstColumnControlCount += model.categoryList[i].controlList.length;
+ } else {
+ secondColumnWidgets.add(_getCategoryWidget(model.categoryList[i]));
+ secondColumnWidgets
+ .add(Padding(padding: EdgeInsets.only(top: padding)));
+ }
+ organizedCardWidget = Row(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Padding(padding: EdgeInsets.only(left: _sidePadding)),
+ Column(children: firstColumnWidgets),
+ Padding(padding: EdgeInsets.only(left: padding)),
+ Column(children: secondColumnWidgets),
+ Padding(
+ padding: EdgeInsets.only(left: _sidePadding),
+ )
+ ],
+ );
+ }
+ } else {
+ _cardWidth = deviceWidth * 0.9;
+ padding = deviceWidth * 0.035;
+ _sidePadding = (deviceWidth * 0.1) / 2;
+ List verticalOrderedWidgets = [];
+ for (int i = 0; i < model.categoryList.length; i++) {
+ verticalOrderedWidgets.add(_getCategoryWidget(model.categoryList[i]));
+ verticalOrderedWidgets
+ .add(Padding(padding: EdgeInsets.only(top: padding)));
+ }
+ organizedCardWidget = Row(
+ children: [
+ Padding(padding: EdgeInsets.only(left: _sidePadding)),
+ Column(children: verticalOrderedWidgets),
+ Padding(
+ padding: EdgeInsets.only(left: _sidePadding),
+ )
+ ],
+ );
+ }
+ return SingleChildScrollView(
+ child: Container(
+ padding: EdgeInsets.only(top: deviceWidth > 1060 ? 15 : 10),
+ child: organizedCardWidget));
+ }
+
+ /// get the rounded corner layout for given category
+ Widget _getCategoryWidget(WidgetCategory category) {
+ return Container(
+ padding: const EdgeInsets.only(bottom: 10),
+ decoration: BoxDecoration(
+ color: model.cardColor,
+ border: Border.all(
+ color: const Color.fromRGBO(0, 0, 0, 0.12), width: 1.1),
+ borderRadius: const BorderRadius.all(Radius.circular(12))),
+ width: _cardWidth,
+ child: Column(children: [
+ Container(
+ padding: const EdgeInsets.only(top: 15, bottom: 2),
+ child: Text(
+ category.categoryName.toUpperCase(),
+ style: TextStyle(
+ color: model.backgroundColor,
+ fontSize: 16,
+ fontFamily: 'Roboto-Bold'),
+ ),
+ ),
+ Divider(
+ color: model.themeData.brightness == Brightness.dark
+ ? const Color.fromRGBO(61, 61, 61, 1)
+ : const Color.fromRGBO(238, 238, 238, 1),
+ thickness: 1,
+ ),
+ Column(children: _getControlListView(category))
+ ]));
+ }
+
+ /// get the list view of the controls in the specified category
+ List _getControlListView(WidgetCategory category) {
+ final List items = [];
+ String status;
+ for (int i = 0; i < category.controlList.length; i++) {
+ final Control control = category.controlList[i];
+ status = (control.status == 'preview' || control.status == 'Preview') &&
+ !model.isWeb &&
+ Platform.isIOS
+ ? 'New'
+ : (control.title == 'Radial Gauge' && model.isWeb)
+ ? null
+ : control.status;
+ items.add(Container(
+ color: model.cardColor,
+ child: Material(
+ color: model.cardColor,
+ elevation: 0.0,
+ child: InkWell(
+ splashFactory: InkRipple.splashFactory,
+ hoverColor: Colors.grey.withOpacity(0.2),
+ onTap: () {
+ !model.isWeb
+ ? onTapControlInMobile(context, model, category, i)
+ : onTapControlInWeb(context, model, category, i);
+ model.searchResults.clear();
+ },
+ child: Container(
+ child: ListTile(
+ contentPadding: EdgeInsets.fromLTRB(
+ 12, 2, 0, category.controlList.length > 3 ? 6 : 0),
+ leading: Image.asset(control.image, fit: BoxFit.cover),
+ title: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ Text(
+ control.title,
+ textAlign: TextAlign.left,
+ softWrap: true,
+ textScaleFactor: 1,
+ overflow: TextOverflow.fade,
+ style: TextStyle(
+ fontSize: 12,
+ letterSpacing: 0.1,
+ color: model.textColor,
+ fontFamily: 'Roboto-Bold'),
+ ),
+ status != null
+ ? Container(
+ decoration: BoxDecoration(
+ shape: BoxShape.rectangle,
+ color: status.toLowerCase() == 'new'
+ ? const Color.fromRGBO(55, 153, 30, 1)
+ : status.toLowerCase() == 'updated'
+ ? const Color.fromRGBO(
+ 246, 117, 0, 1)
+ : status.toLowerCase() ==
+ 'preview'
+ ? const Color.fromRGBO(
+ 74, 90, 231, 1)
+ : Colors.transparent,
+ borderRadius: const BorderRadius.only(
+ topLeft: Radius.circular(10),
+ bottomLeft: Radius.circular(10))),
+ padding:
+ const EdgeInsets.fromLTRB(6, 2.7, 4, 2.7),
+ child: Text(status,
+ style: const TextStyle(
+ fontFamily: 'Roboto-Medium',
+ color: Colors.white,
+ fontSize: 10.5)))
+ : Container()
+ ]),
+ subtitle: Container(
+ child: Padding(
+ padding: const EdgeInsets.fromLTRB(0.0, 7.0, 12.0, 0.0),
+ child: Text(
+ control.description,
+ textAlign: TextAlign.left,
+ softWrap: true,
+ textScaleFactor: 1,
+ overflow: TextOverflow.fade,
+ style: const TextStyle(
+ fontWeight: FontWeight.normal,
+ fontSize: 12,
+ color: Color.fromRGBO(128, 128, 128, 1),
+ ),
+ ),
+ )),
+ ),
+ ))),
+ ));
+ }
+ return items;
+ }
+}
diff --git a/lib/sample_details.json b/lib/sample_details.json
index 9f656410..7647d695 100644
--- a/lib/sample_details.json
+++ b/lib/sample_details.json
@@ -1,2543 +1,2867 @@
[
{
- "title": "Date Range Picker",
- "description": "Allows to easily select dates or range of dates",
- "image": "images/Date_range_picker.png",
- "status": "Preview",
- "displayType": "tab",
- "category": "Calendar",
- "controlId": 8,
- "subItems": [
- {
- "type": "sample",
- "title": "Getting Started",
- "key": "getting_started_date_picker",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/getting_started/datePicker_getting_started.dart",
- "needsPropertyPanel": true
- },
- {
- "type": "sample",
- "title": "Flight Booking",
- "key": "popup_picker",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/popup_picker/popup_picker.dart"
- },
- {
- "type": "sample",
- "title": "Blackout Dates",
- "key": "blackout_picker",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/blackout_dates/blackout_date_picker.dart"
- },
- {
- "type": "sample",
- "title": "Customization",
- "key": "customized_picker",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/customization_picker/customized_date_picker.dart"
- }
- ]
- },
- {
- "title": "Slider",
- "description": "Select a date or numeric value",
- "image": "images/slider.png",
- "category": "Sliders",
- "status": "Updated",
- "displayType": "tab",
- "controlId": 11,
- "subItems": [
- {
- "type": "child",
- "title": "Basic features",
- "status": "New",
- "displayType": "tab",
- "subItems": [
- {
- "type": "sample",
- "title": "Default",
- "key": "default_slider",
- "status": "Updated",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/default_slider.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Divisors, labels, and ticks",
- "key": "slider_divisor_label_tick",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/slider_divisor_label_tick.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Date interval",
- "key": "slider_date_interval",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/slider_date_interval.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Tooltip types",
- "key": "slider_tooltip_type",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/slider_tooltip_type.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Step",
- "key": "slider_step",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/slider_step.dart",
- "description": ""
- }
- ]
- },
- {
- "type": "child",
- "status": "New",
- "title": "Customization",
- "displayType": "tab",
- "subItems": [
- {
- "type": "sample",
- "title": "Thumb icon customization",
- "key": "thumb_icon_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/customization/thumb_customization/thumb_icon_customization.dart"
- },
- {
- "type": "sample",
- "title": "Size customization",
- "key": "slider_size_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/customization/size_customization/slider_size_customization.dart"
- },
- {
- "type": "sample",
- "title": "Color customization",
- "key": "slider_color_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/customization/color_customization/slider_color_customization.dart"
- },
- {
- "type": "sample",
- "title": "Shape customization",
- "key": "slider_shape_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/customization/shape_customization/slider_shape_customization.dart"
- }
- ]
- }
- ]
- },
- {
- "title": "Range Slider",
- "description": "Select a date or numeric range",
- "image": "images/range_slider.png",
- "category": "Sliders",
- "status": "Updated",
- "controlId": 12,
- "subItems": [
- {
- "type": "child",
- "title": "Basic features",
+ "categoryName": "Data Visualization",
+ "webCategoryId": 1,
+ "mobileCategoryId": 2,
+ "controlList": [
+ {
+ "title": "Barcodes",
+ "description": "Generate and display data in machine-readable 1D and 2D barcodes",
+ "image": "images/barcode.png",
"displayType": "tab",
+ "controlId": 6,
"subItems": [
{
"type": "sample",
- "title": "Default",
- "key": "range_slider_default_appearance",
- "status": "Updated",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_slider/default_appearance/range_slider_default_appearance.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Divisors, labels, and ticks",
- "key": "range_slider_divisor_label_tick",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_divisor_label_tick.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Date interval",
- "key": "range_slider_date_time_label",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_date_time_label.dart",
- "description": ""
+ "title": "One dimensional",
+ "key": "one_dimensional_types",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes/one_dimensional/one_dimensional.dart"
},
{
"type": "sample",
- "title": "Tooltip types",
- "key": "range_slider_tooltip_type",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_tooltip_type.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Step",
- "key": "range_slider_step",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_step.dart",
- "description": ""
+ "title": "QR Code",
+ "key": "qr_code_generator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes/two_dimensional/qr_code.dart",
+ "needsPropertyPanel": true
},
{
"type": "sample",
- "title": "Interval selection",
- "key": "range_slider_interval_selection",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_interval_selection.dart",
- "description": ""
+ "title": "Data Matrix",
+ "key": "data_matrix_generator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes/data_matrix/data_matrix.dart",
+ "needsPropertyPanel": true
}
]
},
{
- "type": "child",
- "title": "Customization",
- "displayType": "tab",
+ "title": "Cartesian Charts",
+ "description": "Plot over 30 chart types ranging from line charts to financial charts",
+ "image": "images/cartesian_types.png",
+ "status": "Updated",
+ "controlId": 1,
"subItems": [
{
- "type": "sample",
- "title": "Thumb icon customization",
- "key": "range_slider_thumb_icon_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/customization/thumb_customization/range_slider_thumb_icon_customization.dart"
- },
- {
- "type": "sample",
- "title": "Size customization",
- "key": "size_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/customization/size_customization/size_customization.dart"
- },
- {
- "type": "sample",
- "title": "Color customization",
- "key": "color_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/customization/color_customization/color_customization.dart"
+ "type": "parent",
+ "title": "Chart Types",
+ "subItems": [
+ {
+ "type": "child",
+ "title": "Line",
+ "displayType": "card",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Default line chart",
+ "key": "default_line_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/line/default_line_chart.dart",
+ "description": "This sample demonstrates the default line chart. Marker, tooltip and legend are enabled in this sample. Tap the marker to view information about that data point in a tooltip."
+ },
+ {
+ "type": "sample",
+ "title": "Line with dashes",
+ "key": "line_with_dashes",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/line/line_with_dashes.dart",
+ "description": "Line chart is rendered with dashes in this sample."
+ },
+ {
+ "type": "sample",
+ "title": "Multi-colored line",
+ "key": "multi_colored_line",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/line/multi_colored_line.dart",
+ "description": "This sample demonstrates the rendering of a line chart with multiple colors. Colors for each data point is mapped from the data source."
+ },
+ {
+ "type": "sample",
+ "title": "Customized line chart",
+ "key": "customized_line_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/line/customized_line_chart.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Dynamic update animation",
+ "key": "animation_line_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/line/animation_line_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Column",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default Column chart",
+ "key": "default_column_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/default_column_chart.dart"
+ },
+ {
+ "title": "Modified axis base",
+ "key": "column_axis_crossing",
+ "description": "This sample is achieved using the axis crossing feature. X-axis 'crossAt' value is set to -2 and hence the data points are rendering from -2. Default axis base value is 0 and on that case, positive points will render upwards and negative points will render downwards.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/column_with_axis_base.dart",
+ "sourceLink": "https://www.indexmundi.com/g/r.aspx?v=24",
+ "sourceText": "www.indexmundi.com",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Column with rounded corners",
+ "key": "column_with_rounded_corners",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/column_with_rounded_corners.dart",
+ "sourceLink": "https://www.worldatlas.com/articles/largest-cities-in-the-world-by-land-area.html",
+ "sourceText": "www.worldatlas.com"
+ },
+ {
+ "title": "Back to back column",
+ "key": "back_to_back_column",
+ "description": "By default, the columns of various series are placed side by side. In this sample, it is changed to render back to back",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/back_to_back_column.dart"
+ },
+ {
+ "title": "Column with track",
+ "key": "column_with_track",
+ "description": "This sample renders the column chart with track. Track is a rectangular bar drawn from minimum to maximum values of an axis.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/column_with_track.dart"
+ },
+ {
+ "title": "Column width and spacing",
+ "key": "column_width_and_spacing",
+ "description": "You can change the width and spacing of columns by using the options in the properties panel.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/column_width_and_spacing.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Customized column chart",
+ "key": "customized_column_chart",
+ "description": "This sample demonstrates the rendering of custom columns. Here, the top edges of the columns are changed to form a triangle.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/customized_column_chart.dart",
+ "sourceLink": "https://www.statista.com/statistics/263393/global-pc-shipments-since-1st-quarter-2009-by-vendor/",
+ "sourceText": "www.statista.com"
+ },
+ {
+ "title": "Dynamic update animation",
+ "key": "animation_column_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/animation_column_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Spline",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default spline chart",
+ "key": "default_spline_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline/default_spline_chart.dart",
+ "sourceLink": "https://www.holiday-weather.com/london/averages/",
+ "sourceText": "www.holiday-weather.com"
+ },
+ {
+ "title": "Spline with dashes",
+ "key": "spline_with_dashes",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline/spline_with_dashes.dart",
+ "sourceLink": "https://tcdata360.worldbank.org/indicators/inv.all.pct?country=BRA&indicator=345&countries=GRC,SWE&viz=line_chart&years=1997,2004",
+ "sourceText": "tcdata360.worldbank.org"
+ },
+ {
+ "title": "Spline types",
+ "key": "spline_types",
+ "description": "This sample demonstrates various types of splines. Type can be changed by modifying the options in the properties panel.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline/spline_types.dart",
+ "sourceLink": "https://tcdata360.worldbank.org/indicators/ex.grw?country=BRA&indicator=401&viz=line_chart&years=2010Q3,2016Q2",
+ "sourceText": "tcdata360.worldbank.org",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Vertical spline chart",
+ "key": "vertical_spline_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline/vertical_spline_chart.dart"
+ },
+ {
+ "title": "Customized spline chart",
+ "key": "customized_spline_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline/customized_spline_chart.dart"
+ },
+ {
+ "title": "Dynamic update animation",
+ "key": "animation_spline_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline/animation_spline_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Area",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default area chart",
+ "key": "default_area_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/area/default_area_chart.dart"
+ },
+ {
+ "title": "Vertical area chart",
+ "key": "vertical_area_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/area/vertical_area_chart.dart"
+ },
+ {
+ "title": "Modified axis base",
+ "key": "area_axis_crossing",
+ "description": "This sample is achieved using the axis crossing feature. X-axis 'crossAt' value is set to -2 and hence the data points are rendering from -2. Default axis base value is 0 and on that case, positive points will render upwards and negative points will render downwards.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/area/area_with_axis_base.dart",
+ "sourceLink": "https://www.indexmundi.com/g/r.aspx?v=24",
+ "sourceText": "www.indexmundi.com",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Area with empty points",
+ "key": "area_with_emptypoints",
+ "description": "This area chart sample renders with gap for null values (empty data points).",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/area/area_with_emptypoints.dart"
+ },
+ {
+ "title": "Dynamic update animation",
+ "key": "animation_area_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/area/animation_area_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Bar",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default bar chart",
+ "key": "default_bar_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bar/default_bar_chart.dart"
+ },
+ {
+ "title": "Bar with rounded corners",
+ "key": "bar_with_rounded_corners",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bar/bar_with_rounded_corners.dart",
+ "sourceLink": "https://www.indexmundi.com/g/r.aspx?v=24",
+ "sourceText": "www.indexmundi.com"
+ },
+ {
+ "title": "Bar width and spacing",
+ "key": "bar_width_and_spacing",
+ "description": "You can change the width and spacing of the bars by using the options in the properties panel.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bar/bar_width_and_spacing.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Bar with track",
+ "key": "bar_with_track",
+ "description": "This sample renders the bar chart with track. Track is a rectangular bar drawn from minimum to maximum values of an axis.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bar/bar_with_track.dart"
+ },
+ {
+ "title": "Customized bar chart",
+ "key": "customized_bar_chart",
+ "showInWeb": false,
+ "description": "This sample demonstrates the rendering of custom bars. Here, the bars are filled with images, to look like pattern fill.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bar/customized_bar_chart.dart",
+ "sourceLink": "https://www.makeuseof.com/tag/most-popular-android-apps/",
+ "sourceText": "www.makeuseof.com"
+ },
+ {
+ "title": "Dynamic update animation",
+ "key": "animation_bar_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bar/animation_bar_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Bubble",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default bubble chart",
+ "key": "default_bubble_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bubble/default_bubble_chart.dart"
+ },
+ {
+ "title": "Bubble with various colors",
+ "key": "bubble_with_various_colors",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bubble/bubble_with_various_colors.dart"
+ },
+ {
+ "title": "Bubble filled with gradient",
+ "key": "bubble_filled_with_gradient",
+ "description": "This sample depicts the bubble chart filled with gradient colors.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bubble/bubble_filled_with_gradient.dart"
+ },
+ {
+ "title": "Bubble with multiple series",
+ "key": "bubble_with_multiple_series",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bubble/bubble_with_multiple_series.dart"
+ },
+ {
+ "title": "Dynamic update animation",
+ "key": "animation_bubble_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bubble/animation_bubble_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Scatter",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default scatter",
+ "key": "default_scatter_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/scatter/default_scatter_chart.dart",
+ "sourceLink": "https://tcdata360.worldbank.org/indicators/ex.grw?country=BRA&indicator=401&countries=IND,CAN&viz=line_chart&years=2013Q2,2016Q2",
+ "sourceText": "tcdata360.worldbank.org"
+ },
+ {
+ "title": "Scatter with various shapes",
+ "key": "scatter_with_various_shapes",
+ "description": "This sample demonstrates the rendering of a scatter chart with various shapes.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/scatter/scatter_with_various_shapes.dart"
+ },
+ {
+ "title": "Dynamic update animation",
+ "key": "animation_scatter_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/scatter/animation_scatter_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Step Line",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default Step line chart",
+ "key": "default_stepline_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/step_line/default_step_line_chart.dart"
+ },
+ {
+ "title": "Step line with dashes",
+ "key": "stepline_with_dashes",
+ "description": "A step line chart is rendered with dashes in this sample.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/step_line/step_line_with_dashes.dart"
+ },
+ {
+ "title": "Vertical step line chart",
+ "key": "vertical_stepline_chart",
+ "description": "The axes in this sample are transposed to form a vertical step line chart.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/step_line/vertical_step_line_chart.dart"
+ },
+ {
+ "title": "Dynamic update animation",
+ "key": "animation_stepline_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/step_line/animation_step_line_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Range Column",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default range column chart",
+ "key": "default_rangecolumn_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/range_column/default_range_column_chart.dart",
+ "sourceLink": "https://www.holiday-weather.com/london/averages/",
+ "sourceText": "www.holiday-weather.com"
+ },
+ {
+ "title": "Transposed range column",
+ "key": "vertical_rangecolumn_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/range_column/vertical_range_column_chart.dart",
+ "sourceLink": "https://www.holiday-weather.com/sydney/averages/",
+ "sourceText": "www.holiday-weather.com"
+ },
+ {
+ "title": "Range column with track",
+ "key": "rangecolumn_with_track",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/range_column/range_column_with_track.dart"
+ },
+ {
+ "title": "Dynamic update animation",
+ "key": "animation_rangecolumn_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/range_column/animation_range_column_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Stacked Charts",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Stacked line chart",
+ "key": "stacked_line_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_line_chart.dart"
+ },
+ {
+ "title": "Stacked area chart",
+ "key": "stacked_area_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_area_chart.dart"
+ },
+ {
+ "title": "Stacked column chart",
+ "key": "stacked_column_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_column_chart.dart"
+ },
+ {
+ "title": "Stacked bar chart",
+ "key": "stacked_bar_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_bar_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "100% Stacked Charts",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "100% stacked line chart",
+ "key": "stacked_line_100_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/chart_types/100%_stacked_charts/stacked_line_100_chart.dart"
+ },
+ {
+ "title": "100% stacked area chart",
+ "key": "stacked_area_100_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/chart_types/100%_stacked_charts/stacked_area_100_chart.dart"
+ },
+ {
+ "title": "100% stacked column chart",
+ "key": "stacked_column_100_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/chart_types/100%_stacked_charts/stacked_column_100_chart.dart"
+ },
+ {
+ "title": "100% stacked bar chart",
+ "key": "stacked_bar_100_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/chart_types/100%_stacked_charts/stacked_bar_100_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Financial Charts",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "High low chart",
+ "key": "hilo_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/chart_types/financial_charts/hilo_chart.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Open high low close chart",
+ "key": "hilo_open_close_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/chart_types/financial_charts/hilo_open_close_chart.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Candle chart",
+ "key": "candle_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/chart_types/financial_charts/candle_chart.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Spline Area",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Spline area chart",
+ "key": "spline_area",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline_area.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Step Area",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Step area chart",
+ "key": "step_area",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/step_area.dart",
+ "sourceLink": "https://www.accuweather.com/en/fr/paris/623/march-weather/623?year=2019",
+ "sourceText": "www.accuweather.com"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Range Area",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Range area chart",
+ "key": "range_area",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/range_area.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Spline Range Area",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Spline range area chart",
+ "key": "spline_range_area",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline_range_area.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Histogram",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Histogram chart",
+ "key": "histogram_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/histogram.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Box and Whisker",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Box and Whisker chart",
+ "key": "box_whisker",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/box_whisker.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Waterfall",
+ "displayType": "card",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Default waterfall chart",
+ "key": "water_fall",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/waterfall/waterfall.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Vertical waterfall chart",
+ "key": "vertical_water_fall",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/waterfall/vertical_waterfall.dart"
+ }
+ ]
+ }
+ ]
},
- {
- "type": "sample",
- "title": "Shape customization",
- "key": "shape_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/customization/shape_customization/shape_customization.dart"
- }
- ]
- }
- ]
- },
- {
- "title": "Range Selector",
- "description": "Visualize data and select a date or numeric range",
- "image": "images/range_selector.png",
- "status": "Updated",
- "category": "Sliders",
- "displayType": "tab",
- "controlId": 14,
- "subItems": [
- {
- "type": "sample",
- "title": "Default",
- "status": "Updated",
- "key": "range_selector_default_appearance",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_default_appearance.dart"
- },
- {
- "type": "sample",
- "title": "Selection",
- "key": "range_selector_with_selection",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_with_selection.dart"
- },
- {
- "type": "sample",
- "title": "Zooming",
- "key": "range_selector_with_zooming",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_with_zooming.dart",
- "needsPropertyPanel": true
- },
- {
- "type": "sample",
- "title": "Histogram Chart",
- "status": "New",
- "key": "range_selector_with_histogram_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_with_histogram_chart.dart"
- },
- {
- "type": "sample",
- "title": "Bar Chart",
- "status": "New",
- "key": "range_selector_with_bar_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_with_bar_chart.dart"
- }
- ]
- },
- {
- "title": "Barcodes",
- "description": "Generate and display data in machine-readable 1D and 2D barcodes",
- "image": "images/barcode.png",
- "category": "Data Visualization",
- "displayType": "tab",
- "controlId": 6,
- "subItems": [
- {
- "type": "sample",
- "title": "One dimensional",
- "key": "one_dimensional_types",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes/one_dimensional/one_dimensional.dart"
- },
- {
- "type": "sample",
- "title": "QR Code",
- "key": "qr_code_generator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes/two_dimensional/qr_code.dart",
- "needsPropertyPanel": true
- },
- {
- "type": "sample",
- "title": "Data Matrix",
- "key": "data_matrix_generator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes/data_matrix/data_matrix.dart",
- "needsPropertyPanel": true
- }
- ]
- },
- {
- "title": "PDF",
- "description": "Create PDF document with text, images and tables",
- "image": "images/pdf.png",
- "status": "Preview",
- "category": "File Formats",
- "displayType": "tab",
- "controlId": 10,
- "subItems": [
- {
- "type": "sample",
- "title": "Invoice",
- "key": "invoice",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/invoice/invoice.dart"
- },
- {
- "type": "sample",
- "title": "Course Completion Certificate",
- "key": "certificate",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/certificate/certificate.dart"
- },
- {
- "type": "sample",
- "title": "Headers and Footers",
- "key": "header_and_footer",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/header_and_footer/header_and_footer.dart"
- },
- {
- "type": "sample",
- "title": "Annotations",
- "key": "annotations",
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/annotations/annotations.dart"
- },
- {
- "type": "sample",
- "title": "Text Extraction",
- "key": "text_extraction",
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/text_extraction/text_extraction.dart"
- },
- {
- "type": "sample",
- "title": "Find Text",
- "key": "find_text",
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/find_text/find_text.dart"
- }
- ]
- },
- {
- "title": "Cartesian Charts",
- "description": "Plot over 30 chart types ranging from line charts to financial charts",
- "image": "images/cartesian_types.png",
- "status": "Updated",
- "category": "Data Visualization",
- "controlId": 1,
- "subItems": [
- {
- "type": "parent",
- "title": "Chart Types",
- "subItems": [
{
"type": "child",
- "title": "Line",
+ "title": "Data Source",
"displayType": "card",
"subItems": [
{
- "type": "sample",
- "title": "Default line chart",
- "key": "default_line_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/default_line_chart.dart",
- "description": "This sample demonstrates the default line chart. Marker, tooltip and legend are enabled in this sample. Tap the marker to view information about that data point in a tooltip."
- },
- {
- "type": "sample",
- "title": "Line with dashes",
- "key": "line_with_dashes",
- "showInWeb": false,
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/line_with_dashes.dart",
- "description": "Line chart is rendered with dashes in this sample."
- },
- {
- "type": "sample",
- "title": "Multi-colored line",
- "key": "multi_colored_line",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/multi_colored_line.dart",
- "description": "This sample demonstrates the rendering of a line chart with multiple colors. Colors for each data point is mapped from the data source."
+ "title": "List",
+ "key": "local_list_data",
+ "description": "This sample demonstrates plotting the data which is stored as a list.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/data_source/list.dart"
},
{
- "type": "sample",
- "title": "Customized line chart",
- "showInWeb": false,
- "key": "customized_line_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/customized_line_chart.dart",
- "description": ""
- },
+ "title": "JSON",
+ "key": "local_json_data",
+ "description": "This same demonstrates binding of JSON data to the chart. We saved the JSON data in the file 'chart_data.json' in the assets folder.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/data_source/json.dart"
+ }
+ ]
+ },
+ {
+ "type": "parent",
+ "title": "Axis Types",
+ "subItems": [
{
- "type": "sample",
- "title": "Dynamic update animation",
- "key": "animation_line_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/animation_line_chart.dart"
+ "type": "child",
+ "title": "Numeric",
+ "displayType": "card",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Default numeric axis",
+ "key": "default_numeric_axis",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/numeric/default_numeric_axis.dart",
+ "description": "",
+ "sourceLink": "https://www.google.com/search?q=india+vs+australia+odi+result+2019&oq=indian+vs+australia+odi+res&aqs=chrome.2.69i57j0l5.11336j1j4&sourceid=chrome&ie=UTF-8",
+ "sourceText": "www.google.com"
+ },
+ {
+ "type": "sample",
+ "title": "Numeric axis with label format",
+ "key": "numeric_axis_with_label_format",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/numeric/numeric_axis_with_label_format.dart",
+ "description": ""
+ },
+ {
+ "title": "Inversed numeric axis",
+ "key": "inversed_numeric_axis",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/numeric/inversed_numeric_axis.dart",
+ "description": "",
+ "sourceLink": "https://www.indexmundi.com/g/g.aspx?c=us&v=121",
+ "sourceText": "www.indexmundi.com",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Category",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default category axis",
+ "key": "default_category_axis",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/category/default_category_axis.dart",
+ "description": "",
+ "status": ""
+ },
+ {
+ "title": "Arranged by index",
+ "key": "category_arranged_by_index",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/category/indexed_category_axis.dart",
+ "description": "By default, category data points will be arranged based on the x values. In this sample, you can arrange the data points based on the index value.",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Label placement",
+ "key": "category_label_placement",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/category/label_placement.dart",
+ "description": "",
+ "status": "",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Date Time",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default Date time axis",
+ "key": "default_datetime_axis",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/date_time/default_date_time_axis.dart",
+ "description": "",
+ "status": "",
+ "sourceLink": "https://www.x-rates.com/graph/?from=USD&to=INR&amount=1",
+ "sourceText": "www.x-rates.com"
+ },
+ {
+ "title": "Date time axis with label format",
+ "key": "datetime_axis_with_label_format",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/date_time/date_time_axis_with_label_format.dart",
+ "description": "",
+ "status": "",
+ "sourceLink": "https://en.wikipedia.org/wiki/List_of_earthquakes_in_Indonesia",
+ "sourceText": "en.wikipedia.org"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Logarithmic",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default logarithmic axis",
+ "key": "default_logarithmic_axis",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/logarithmic/default_logarithmic_axis.dart",
+ "description": ""
+ },
+ {
+ "title": "Inversed logarithmic axis",
+ "key": "inversed_logarithmic_axis",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_types/logarithmic/inversed_logarithmic_axis.dart",
+ "description": "",
+ "sourceLink": "https://www.worldometers.info/world-population/population-by-country/",
+ "sourceText": "www.worldometers.info"
+ }
+ ]
}
]
},
{
"type": "child",
- "title": "Column",
+ "title": "Axis Features",
"displayType": "card",
"subItems": [
{
- "title": "Default Column chart",
- "key": "default_column_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/default_column_chart.dart"
+ "title": "Opposed axes",
+ "key": "opposed_axes",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/opposed_axes.dart",
+ "sourceLink": "https://www.statista.com/statistics/199983/us-vehicle-sales-since-1951/",
+ "sourceText": "www.statista.com"
+ },
+ {
+ "title": "Handling labels collision",
+ "key": "handling_label_collision",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/handling_label_collision.dart",
+ "sourceLink": "https://en.wikipedia.org/wiki/List_of_men%27s_footballers_with_500_or_more_goals",
+ "sourceText": "en.wikipedia.org",
+ "needsPropertyPanel": true
},
{
- "title": "Modified axis base",
+ "title": "Edge label placement",
+ "key": "edgelabel_placement",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/edgelabel_placement.dart",
+ "sourceLink": "https://www.mycarhelpline.com/index.php?option=com_easyblog&view=entry&id=808&Itemid=91",
+ "sourceText": "www.mycarhelpline.com",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Maximum width for labels",
+ "key": "chart_maximum_label_width",
"status": "New",
- "key": "column_axis_crossing",
- "description": "This sample is achieved using the axis crossing feature. X-axis 'crossAt' value is set to -2 and hence the data points are rendering from -2. Default axis base value is 0 and on that case, positive points will render upwards and negative points will render downwards.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/column_with_axis_base.dart",
- "sourceLink": "https://www.indexmundi.com/g/r.aspx?v=24",
- "sourceText": "www.indexmundi.com",
+ "description": "Maximum width for axis labels can be specified using the maximumLabelWidth property. The maximum space occupied by the axis labels can be changed using the labelsExtent property. A tooltip will be shown on clicking/tapping the trimmed axis label in both cases.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/maximum_label_width.dart",
+ "sourceLink": "https://www.emporis.com/statistics/worlds-tallest-buildings",
+ "sourceText": "www.emporis.com",
"needsPropertyPanel": true
},
{
- "title": "Column with rounded corners",
- "key": "column_with_rounded_corners",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart",
- "sourceLink": "https://www.worldatlas.com/articles/largest-cities-in-the-world-by-land-area.html",
- "sourceText": "www.worldatlas.com"
+ "title": "Multiple axis chart",
+ "key": "multiple_axis_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/multiple_axis_chart.dart",
+ "sourceLink": "https://www.accuweather.com/en/us/new-york-ny/10007/month/349727?monyr=5/01/2019",
+ "sourceText": "www.accuweather.com"
},
{
- "title": "Back to back column",
- "key": "back_to_back_column",
- "description": "By default, the columns of various series are placed side by side. In this sample, it is changed to render back to back",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/back_to_back_column.dart"
+ "title": "Axis crossing",
+ "key": "axis_crossing",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/axis_crossing.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Column with track",
- "key": "column_with_track",
- "description": "This sample renders the column chart with track. Track is a rectangular bar drawn from minimum to maximum values of an axis.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/column_with_track.dart"
+ "title": "Plot band",
+ "key": "plot_band",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/plot_band.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Column width and spacing",
- "key": "column_width_and_spacing",
- "description": "You can change the width and spacing of columns by using the options in the properties panel.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart",
+ "title": "Plot band recurrence",
+ "key": "plot_band_recurrence",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/plot_band_recurrence.dart",
"needsPropertyPanel": true
},
{
- "title": "Customized column chart",
- "key": "customized_column_chart",
- "description": "This sample demonstrates the rendering of custom columns. Here, the top edges of the columns are changed to form a triangle.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/customized_column_chart.dart",
- "sourceLink": "https://www.statista.com/statistics/263393/global-pc-shipments-since-1st-quarter-2009-by-vendor/",
- "sourceText": "www.statista.com"
+ "title": "Positioning axis labels",
+ "key": "positioning_axis_labels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/positioning_axis_label.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Dynamic update animation",
- "key": "animation_column_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/animation_column_chart.dart"
+ "title": "Axis animation",
+ "key": "axis_animation",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/axis_animation.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "parent",
+ "title": "Series Features",
+ "subItems": [
+ {
+ "type": "child",
+ "title": "Gradient",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Horizontal gradient",
+ "key": "horizantal_gradient",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/gradients/horizantal_gradient.dart"
+ },
+ {
+ "title": "Vertical gradient",
+ "key": "vertical_gradient",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/gradients/vertical_gradient.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Animation",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Series animation",
+ "key": "series_animation",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/animation/series_animation.dart"
+ },
+ {
+ "title": "Line",
+ "key": "animation_line_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/line/animation_line_chart.dart"
+ },
+ {
+ "title": "Column",
+ "key": "animation_column_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/column/animation_column_chart.dart"
+ },
+ {
+ "title": "Spline",
+ "key": "animation_spline_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/spline/animation_spline_chart.dart"
+ },
+ {
+ "title": "Area",
+ "key": "animation_area_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/area/animation_area_chart.dart"
+ },
+ {
+ "title": "Bar",
+ "key": "animation_bar_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bar/animation_bar_chart.dart"
+ },
+ {
+ "title": "Bubble",
+ "key": "animation_bubble_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/bubble/animation_bubble_chart.dart"
+ },
+ {
+ "title": "Scatter",
+ "key": "animation_scatter_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/scatter/animation_scatter_chart.dart"
+ },
+ {
+ "title": "Step line",
+ "key": "animation_stepline_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/step_line/animation_step_line_chart.dart"
+ },
+ {
+ "title": "Range column",
+ "key": "animation_rangecolumn_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/chart_types/range_column/animation_range_column_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Marker",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "title": "Various marker shapes",
+ "key": "various_marker_shapes",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/marker.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Data Label",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default data labels",
+ "key": "default_datalabels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/data_label/default_data_labels.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Data label template",
+ "key": "datalabel_template",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/data_label/data_label_template.dart",
+ "sourceLink": "https://www.broadbandsearch.net/blog/social-media-facts-statistics",
+ "sourceText": "www.broadbandsearch.net"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Annotation",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Chart with annotation",
+ "key": "chart_with_annotation",
+ "description": "This sample renders the cartesian chart with annotation. A pie chart is rendered as an annotation here.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/annotation/chart_with_annotation.dart"
+ },
+ {
+ "title": "Chart with watermark",
+ "key": "chart_with_watermark",
+ "description": "In this sample, annotation is placed at the center of the chart with reduced opacity to form a watermark",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/annotation/chart_with_watermark.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Sorting",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "title": "Sorting options",
+ "key": "sorting_options",
+ "description": "This sample depicts the sorting feature in a chart. The data points can be sorted in the ascending or descending order based on the x or y value.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/sorting.dart",
+ "sourceLink": "https://www.emporis.com/statistics/worlds-tallest-buildings",
+ "sourceText": "www.emporis.com",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Empty Points",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "title": "Chart with empty points",
+ "key": "chart_with_empty_points",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/series_features/empty_points.dart",
+ "needsPropertyPanel": true
+ }
+ ]
}
]
},
{
"type": "child",
- "title": "Spline",
+ "title": "Legend",
"displayType": "card",
"subItems": [
{
- "title": "Default spline chart",
- "key": "default_spline_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/default_spline_chart.dart",
- "sourceLink": "https://www.holiday-weather.com/london/averages/",
- "sourceText": "www.holiday-weather.com"
+ "title": "Chart with customized legend",
+ "key": "chart_with_customized_legend",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/legend/chart_with_customized_legend.dart"
},
{
- "title": "Spline with dashes",
- "showInWeb": false,
- "key": "spline_with_dashes",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart",
- "sourceLink": "https://tcdata360.worldbank.org/indicators/inv.all.pct?country=BRA&indicator=345&countries=GRC,SWE&viz=line_chart&years=1997,2004",
- "sourceText": "tcdata360.worldbank.org"
- },
- {
- "title": "Spline types",
- "key": "spline_types",
- "description": "This sample demonstrates various types of splines. Type can be changed by modifying the options in the properties panel.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/spline_types.dart",
- "sourceLink": "https://tcdata360.worldbank.org/indicators/ex.grw?country=BRA&indicator=401&viz=line_chart&years=2010Q3,2016Q2",
- "sourceText": "tcdata360.worldbank.org",
+ "title": "Legend with various options",
+ "key": "cartesian_legend_various_options",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/legend/legend_various_options.dart",
"needsPropertyPanel": true
- },
- {
- "title": "Vertical spline chart",
- "key": "vertical_spline_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart"
- },
- {
- "title": "Customized spline chart",
- "key": "customized_spline_chart",
- "showInWeb": false,
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart"
- },
+ }
+ ]
+ },
+ {
+ "type": "parent",
+ "title": "User Interactions",
+ "subItems": [
{
- "title": "Dynamic update animation",
- "key": "animation_spline_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/animation_spline_chart.dart"
+ "type": "child",
+ "title": "Tooltip",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default tooltip",
+ "key": "default_tooltip",
+ "description": "Tooltip is enabled in this sample and to see the tooltip in action, tap the data points in mobile and hover the data points in the web.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/tooltip/default_tooltip.dart",
+ "sourceLink": "https://www.indexmundi.com/g/g.aspx?v=72&c=gm&c=mx&l=en",
+ "sourceText": "www.indexmundi.com"
+ },
+ {
+ "title": "Tooltip position",
+ "description": "By changing the options, the tooltip can be made to display in the fixed location or at the pointer location itself.",
+ "key": "tooltip_position",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/tooltip/tooltip_position.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Tooltip template",
+ "description": "This example displays a custom widget as the tooltip. To see the tooltip template, tap the data points in mobile and hover the data points in the web.",
+ "key": "tooltip_template",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/tooltip/tooltip_template.dart",
+ "sourceLink": "https://www.broadbandsearch.net/blog/social-media-facts-statistics",
+ "sourceText": "www.broadbandsearch.net"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Zooming and Panning",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Pinch zooming",
+ "key": "pinch_zooming",
+ "description": "Pinch zooming and panning is enabled in this sample. Pinch the chart to zoom in and swipe the zoomed chart to pan it. In the web, mouse wheel zooming is also enabled.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/zooming_and_panning/pinch_zooming.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Selection zooming",
+ "key": "selection_zooming",
+ "description": "This sample depicts the working of selection zooming. Long press and drag on the chart to select the region for zooming.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/zooming_and_panning/selection_zooming.dart"
+ },
+ {
+ "title": "Zooming with custom buttons",
+ "key": "zooming_with_custom_buttons",
+ "description": "This sample demonstrates zooming and panning with custom buttons.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/zooming_and_panning/zooming_with_custom_buttons.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Crosshair",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "title": "Chart with crosshair",
+ "key": "chart_with_crosshair",
+ "description": "The crosshair is enabled in this sample. Tap the chart to show the crosshair and drag the chart to constantly change the crosshair position. On the web, you can move the cursor over the chart area to display the crosshair.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/crosshair.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Trackball",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Chart with trackball",
+ "key": "chart_with_trackball",
+ "description": "The trackball is enabled in this sample. Tap the chart to show the trackball and drag the chart to change the position of the trackball continuously. On the web, you can move the cursor over the chart area to display the trackball.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/trackball.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Customized trackball",
+ "key": "chart_with_trackball_template",
+ "status": "New",
+ "description": "This example displays a custom widget as the trackball. To see the customized trackball, tap the chart area in mobile and hover the chart area on the web.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/trackball_template.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Selection",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Selection modes",
+ "key": "selection_modes",
+ "description": "This sample depicts the selection feature in the chart. Tap the data point to select or unselect in mobile and web click the data points.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/selection/selection_modes.dart",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Dynamic selection",
+ "key": "selection_index",
+ "description": "This sample depicts the dynamic selection feature achieved using the 'selectDataPoints' public method. Choose the series and point index from the dropdown to select or unselect the data points.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/selection/dynamic_selection.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Events",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Events",
+ "key": "events",
+ "description": "Various chart callbacks are enabled in this example. It displays the event trace details while rendering and on performing various interactions.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/events.dart"
+ },
+ {
+ "title": "Navigation with events",
+ "key": "navigate_with_events",
+ "status": "New",
+ "description": "Tap/click on the axis labels, data points or on the data labels for navigating to an external link.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/axis_features/maximum_label_width.dart",
+ "sourceLink": "https://www.emporis.com/statistics/worlds-tallest-buildings",
+ "sourceText": "www.emporis.com"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Add a point on click",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "title": "Add a point on click",
+ "status": "New",
+ "description": "This example depicts the pixel to data point conversion feature. Tap/click on the chart area to add a data point dynamically on that location.",
+ "key": "chart_interactivity",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/tooltip/tooltip_template.dart"
+ }
+ ]
}
]
},
{
"type": "child",
- "title": "Area",
+ "title": "Trendlines",
"displayType": "card",
"subItems": [
{
- "title": "Default area chart",
- "key": "default_area_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/default_area_chart.dart"
- },
- {
- "title": "Vertical area chart",
- "key": "vertical_area_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/vertical_area_chart.dart"
- },
- {
- "title": "Modified axis base",
- "status": "New",
- "key": "area_axis_crossing",
- "description": "This sample is achieved using the axis crossing feature. X-axis 'crossAt' value is set to -2 and hence the data points are rendering from -2. Default axis base value is 0 and on that case, positive points will render upwards and negative points will render downwards.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/area_with_axis_base.dart",
- "sourceLink": "https://www.indexmundi.com/g/r.aspx?v=24",
- "sourceText": "www.indexmundi.com",
+ "title": "Default rendering",
+ "key": "default_trendlines_with_options",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/trendline/default_trendline.dart",
"needsPropertyPanel": true
},
{
- "title": "Area with empty points",
- "key": "area_with_emptypoints",
- "description": "This area chart sample renders with gap for null values (empty data points).",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart"
- },
- {
- "title": "Dynamic update animation",
- "key": "animation_area_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/animation_area_chart.dart"
+ "title": "Trendline forecast",
+ "key": "trendline_forecast_with_options",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/trendline/trendline_forecast.dart",
+ "sourceLink": "https://www.ofx.com/en-au/forex-news/historical-exchange-rates/yearly-average-rates/",
+ "sourceText": "www.ofx.com",
+ "needsPropertyPanel": true
}
]
},
{
"type": "child",
- "title": "Bar",
+ "title": "Technical Indicators",
"displayType": "card",
"subItems": [
{
- "title": "Default bar chart",
- "key": "default_bar_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/default_bar_chart.dart"
+ "title": "Accumulation Distribution",
+ "key": "accumulation_distribution",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/accumulation_distribution.dart"
},
{
- "title": "Bar with rounded corners",
- "key": "bar_with_rounded_corners",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart",
- "sourceLink": "https://www.indexmundi.com/g/r.aspx?v=24",
- "sourceText": "www.indexmundi.com"
+ "title": "ATR Indicator",
+ "key": "atr_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/atr_indicator.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Bar width and spacing",
- "key": "bar_width_and_spacing",
- "description": "You can change the width and spacing of the bars by using the options in the properties panel.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart",
+ "title": "Bollinger Indicator",
+ "key": "bollinger_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/bollinger_indicator.dart",
"needsPropertyPanel": true
},
{
- "title": "Bar with track",
- "key": "bar_with_track",
- "description": "This sample renders the bar chart with track. Track is a rectangular bar drawn from minimum to maximum values of an axis.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/bar_with_track.dart"
+ "title": "EMA Indicator",
+ "key": "ema_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/ema_indicator.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Customized bar chart",
- "key": "customized_bar_chart",
- "showInWeb": false,
- "description": "This sample demonstrates the rendering of custom bars. Here, the bars are filled with images, to look like pattern fill.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart",
- "sourceLink": "https://www.makeuseof.com/tag/most-popular-android-apps/",
- "sourceText": "www.makeuseof.com"
+ "title": "Momentum Indicator",
+ "key": "momentum_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/momentum_indicator.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Dynamic update animation",
- "key": "animation_bar_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/animation_bar_chart.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Bubble",
- "displayType": "card",
- "subItems": [
- {
- "title": "Default bubble chart",
- "key": "default_bubble_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart"
+ "title": "RSI Indicator",
+ "key": "rsi_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/rsi_indicator.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Bubble with various colors",
- "key": "bubble_with_various_colors",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart"
+ "title": "SMA Indicator",
+ "key": "sma_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/sma_indicator.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Bubble filled with gradient",
- "key": "bubble_filled_with_gradient",
- "description": "This sample depicts the bubble chart filled with gradient colors.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart"
+ "title": "Stochastic Indicator",
+ "key": "stochastic_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/stochastic_indicator.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Bubble with multiple series",
- "key": "bubble_with_multiple_series",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart"
+ "title": "TMA Indicator",
+ "key": "tma_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/tma_indicator.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Dynamic update animation",
- "key": "animation_bubble_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/animation_bubble_chart.dart"
+ "title": "MACD Indicator",
+ "key": "macd_indicator",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/technical_indicators/macd_indicator.dart",
+ "needsPropertyPanel": true
}
]
},
{
- "type": "child",
- "title": "Scatter",
- "displayType": "card",
+ "type": "parent",
+ "title": "Real-time Charts",
"subItems": [
{
- "title": "Default scatter",
- "key": "default_scatter_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart",
- "sourceLink": "https://tcdata360.worldbank.org/indicators/ex.grw?country=BRA&indicator=401&countries=IND,CAN&viz=line_chart&years=2013Q2,2016Q2",
- "sourceText": "tcdata360.worldbank.org"
- },
- {
- "title": "Scatter with various shapes",
- "key": "scatter_with_various_shapes",
- "description": "This sample demonstrates the rendering of a scatter chart with various shapes.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart"
- },
- {
- "title": "Dynamic update animation",
- "key": "animation_scatter_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/scatter_series/animation_scatter_chart.dart"
+ "type": "child",
+ "title": "Live Updates",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Real-time spline chart",
+ "key": "real_time_spline_chart",
+ "description": "This sample demonstrates the live chart. A new data point is added at the end and a point is removed at the start in certain time interval continuously.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/real_time_charts/live_update/real_time_spline_chart.dart"
+ },
+ {
+ "title": "Real-time line chart",
+ "key": "real_time_line_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/real_time_charts/live_update/real_time_line_chart.dart"
+ },
+ {
+ "title": "Vertical live chart",
+ "key": "vertical_live_chart",
+ "description": "This sample demonstrates the live chart. A new data point is added at the end in certain time interval continuously.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/real_time_charts/live_update/vertical_live_chart.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Add Data Points",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Programmatic",
+ "key": "add_remove_points",
+ "description": "Add or remove the data points from a chart using the buttons placed in the sample.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/real_time_charts/add_remove_data/add_remove_points.dart"
+ },
+ {
+ "title": "Interaction",
+ "status": "New",
+ "description": "This example depicts the pixel to data point conversion feature. Tap/click on the chart area to add a data point dynamically on that location.",
+ "key": "chart_interactivity",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/user_interactions/tooltip/tooltip_template.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Add/Remove Series",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "title": "Add/remove series",
+ "key": "add_remove_series",
+ "description": "Add or remove series from the chart using the buttons placed in the sample.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/real_time_charts/add_remove_data/add_remove_series.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Update Data Source",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "title": "Update data source",
+ "key": "update_data_source",
+ "description": "The data source bound to this chart can be changed with random values dynamically, by tapping the button placed in this sample.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/real_time_charts/update_data_source.dart"
+ }
+ ]
}
]
},
{
"type": "child",
- "title": "Step Line",
- "displayType": "card",
+ "title": "Exporting",
+ "displayType": "tab",
+ "showInWeb": false,
"subItems": [
{
- "title": "Default Step line chart",
- "key": "default_stepline_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart"
- },
- {
- "title": "Step line with dashes",
- "key": "stepline_with_dashes",
+ "title": "Export",
+ "key": "exporting_chart",
"showInWeb": false,
- "description": "A step line chart is rendered with dashes in this sample.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart"
- },
- {
- "title": "Vertical step line chart",
- "key": "vertical_stepline_chart",
- "description": "The axes in this sample are transposed to form a vertical step line chart.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart"
- },
- {
- "title": "Dynamic update animation",
- "key": "animation_stepline_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stepLine_series/animation_stepline_chart.dart"
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/export.dart"
}
]
- },
+ }
+ ]
+ },
+ {
+ "title": "Circular Charts",
+ "description": "Visualize the data using pie, doughnut, and radial bar charts",
+ "image": "images/circle_series.png",
+ "status": "",
+ "controlId": 2,
+ "subItems": [
{
- "type": "child",
- "title": "Range Column",
- "displayType": "card",
+ "type": "parent",
+ "title": "Chart Types",
"subItems": [
{
- "title": "Default range column chart",
- "key": "default_rangecolumn_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart",
- "sourceLink": "https://www.holiday-weather.com/london/averages/",
- "sourceText": "www.holiday-weather.com"
- },
- {
- "title": "Transposed range column",
- "key": "vertical_rangecolumn_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart",
- "sourceLink": "https://www.holiday-weather.com/sydney/averages/",
- "sourceText": "www.holiday-weather.com"
- },
- {
- "title": "Range column with track",
- "key": "rangecolumn_with_track",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart"
- },
- {
- "title": "Dynamic update animation",
- "key": "animation_rangecolumn_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/rangecolumn_series/animation_rangecolumn_chart.dart"
+ "type": "child",
+ "title": "Pie",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default pie chart",
+ "key": "default_pie_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/pie/default_pie_chart.dart"
+ },
+ {
+ "title": "Pie with various radius",
+ "key": "pie_with_various_radius",
+ "description": "This sample demonstrates the pie chart with different radius for all the slices. The radius of a slice is based on a numeric value.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/pie/pie_with_various_radius.dart"
+ },
+ {
+ "title": "Semi-pie chart",
+ "key": "semi_pie_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/pie/semi_pie_chart.dart",
+ "sourceLink": "https://data.worldbank.org/indicator/sp.rur.totl.zs",
+ "sourceText": "data.worldbank.org",
+ "needsPropertyPanel": true
+ },
+ {
+ "title": "Pie with grouping",
+ "key": "pie_with_grouping",
+ "description": "This sample demonstrates the grouping functionality in a pie chart. Data points’ values less than the specified value can be grouped together.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/pie/pie_with_grouping.dart"
+ },
+ {
+ "title": "Pie with smart labels",
+ "key": "pie_with_smart_labels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/pie/pie_with_smart_labels.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Doughnut",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default doughnut chart",
+ "key": "default_doughnut_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/doughnut/default_doughnut_chart.dart",
+ "sourceLink": "https://www.pngkit.com/view/u2q8y3w7r5y3t4o0_composition-of-ocean-water-earths-oceans-elements-percentage/",
+ "sourceText": "www.pngkit.com"
+ },
+ {
+ "title": "Doughnut with center elevation",
+ "key": "doughnut_with_center_elevation",
+ "description": "The doughnut chart is rendered with elevated circle at the center using annotations feature in this sample.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/doughnut/doughnut_with_center_elevation.dart"
+ },
+ {
+ "title": "Doughnut with rounded corners",
+ "key": "doughnut_with_rounded_corners",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/doughnut/doughnut_with_rounded_corners.dart"
+ },
+ {
+ "title": "Doughnut with color mapping",
+ "key": "doughnut_with_color_mapping",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/doughnut/doughnut_with_color_mapping.dart"
+ },
+ {
+ "title": "Semi-doughnut chart",
+ "key": "semi_doughnut_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/doughnut/semi_doughnut_chart.dart",
+ "needsPropertyPanel": true
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Radial Bar",
+ "displayType": "card",
+ "subItems": [
+ {
+ "title": "Default radial bar chart",
+ "key": "default_radialbar_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/radial_bar/default_radial_bar_chart.dart"
+ },
+ {
+ "title": "Radial bar with legend",
+ "key": "radialbar_with_legend",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/radial_bar/radial_bar_with_legend.dart"
+ },
+ {
+ "title": "Customized radial bar chart",
+ "key": "customized_radialbar_chart",
+ "description": "This sample renders the radial bar chart with annotation at the center and templated legend.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/chart_types/radial_bar/customized_radial_bar_chart.dart"
+ }
+ ]
}
]
},
{
"type": "child",
- "title": "Stacked Charts",
+ "title": "Legend",
"displayType": "card",
"subItems": [
{
- "title": "Stacked line chart",
- "key": "stacked_line_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart"
- },
- {
- "title": "Stacked area chart",
- "key": "stacked_area_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart"
+ "title": "Chart with legend",
+ "key": "chart_with_legend",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/legend/chart_with_legend.dart"
},
{
- "title": "Stacked column chart",
- "key": "stacked_column_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart"
- },
- {
- "title": "Stacked bar chart",
- "key": "stacked_bar_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart"
+ "title": "Legend with various options",
+ "key": "legend_with_various_options",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/legend/legend_with_various_options.dart",
+ "needsPropertyPanel": true
}
]
},
{
"type": "child",
- "title": "100% Stacked Charts",
+ "title": "User Interactions",
"displayType": "card",
"subItems": [
{
- "title": "100% stacked line chart",
- "key": "stacked_line_100_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_line_100_chart.dart"
- },
- {
- "title": "100% stacked area chart",
- "key": "stacked_area_100_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_area_100_chart.dart"
- },
- {
- "title": "100% stacked column chart",
- "key": "stacked_column_100_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_column_100_chart.dart"
- },
- {
- "title": "100% stacked bar chart",
- "key": "stacked_bar_100_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_bar_100_chart.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Financial Charts",
- "displayType": "card",
- "subItems": [
- {
- "title": "High low chart",
- "key": "hilo_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/financial_series/hilo_chart.dart",
+ "title": "Tooltip",
+ "key": "pie_tooltip_position",
+ "description": "By changing the options, the tooltip can be made to display in the fixed location or at the pointer location itself.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/user_interactions/tooltip.dart",
"needsPropertyPanel": true
},
{
- "title": "Open high low close chart",
- "key": "hilo_open_close_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/financial_series/hilo_open_close_chart.dart",
+ "title": "Selection",
+ "key": "circular_selection",
+ "description": "This sample depicts the selection feature in the chart. Tap the data point to select or unselect in mobile and web click the data points.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/user_interactions/selection.dart",
"needsPropertyPanel": true
},
{
- "title": "Candle chart",
- "key": "candle_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/financial_series/candle_chart.dart",
+ "title": "Dynamic selection",
+ "key": "circular_dynamic_selection",
+ "description": "This sample depicts the dynamic selection feature achieved using the 'selectDataPoints' public method. Choose the point index from the dropdown to select or unselect the data points.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/user_interactions/dynamic_selection.dart",
"needsPropertyPanel": true
}
]
},
{
"type": "child",
- "title": "Spline Area",
+ "title": "Exporting",
+ "displayType": "tab",
+ "showInWeb": false,
"subItems": [
{
- "type": "sample",
- "title": "Spline area chart",
- "key": "spline_area",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/other_series/spline_area.dart"
+ "title": "Export",
+ "key": "export_circular_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/export.dart",
+ "showInWeb": false
}
]
- },
+ }
+ ]
+ },
+ {
+ "title": "Radial Gauge",
+ "description": "Visualize one or multiple measures on a circular scale with pointers and ranges",
+ "image": "images/circle_gauge.png",
+ "controlId": 3,
+ "subItems": [
{
"type": "child",
- "title": "Step Area",
+ "title": "Showcase",
+ "displayType": "card",
"subItems": [
{
"type": "sample",
- "title": "Step area chart",
- "key": "step_area",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/other_series/step_area.dart",
- "sourceLink": "https://www.accuweather.com/en/fr/paris/623/march-weather/623?year=2019",
- "sourceText": "www.accuweather.com"
- }
- ]
- },
- {
- "type": "child",
- "title": "Range Area",
- "subItems": [
+ "title": "Gauge compass",
+ "key": "gauge_compass",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge/showcase/gauge_compass.dart",
+ "description": ""
+ },
{
"type": "sample",
- "title": "Range area chart",
- "key": "range_area",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/other_series/range_area.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Spline Range Area",
- "subItems": [
+ "title": "Clock",
+ "key": "clock_sample",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge/showcase/clock_sample.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Temparature monitor",
+ "key": "gauge_overview",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge/showcase/gauge_overview.dart",
+ "description": ""
+ },
{
"type": "sample",
- "title": "Spline range area chart",
- "key": "spline_range_area",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/other_series/spline_range_area.dart"
+ "title": "Distance tracker",
+ "key": "distance_tracker",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge/showcase/distance_tracker.dart",
+ "description": ""
}
]
},
{
"type": "child",
- "title": "Histogram",
+ "title": "Axis",
+ "displayType": "card",
"subItems": [
{
"type": "sample",
- "title": "Histogram chart",
- "key": "histogram_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/other_series/histogram_chart.dart",
- "needsPropertyPanel": true
+ "title": "Default view",
+ "key": "default_gauge_view",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/default_gauge_view.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Multiple axis",
+ "key": "multiple_axis",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/multiple_axis.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Label customization",
+ "key": "radiallabel_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/radiallabel_customization.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Tick customization",
+ "key": "tick_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/tick_customization.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Custom scale",
+ "key": "non_linearable",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/non_linearable.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Custom labels",
+ "key": "custom_labels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/custom_labels.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Range colors for axis",
+ "key": "range_colors",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/range_colors.dart",
+ "description": ""
}
]
},
{
"type": "child",
- "title": "Box and Whisker",
+ "title": "Pointers",
+ "displayType": "card",
"subItems": [
{
"type": "sample",
- "title": "Box and Whisker chart",
- "key": "box_whisker",
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/other_series/box_whisker.dart",
- "needsPropertyPanel": true
+ "title": "Range pointer",
+ "key": "range_pointer",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/multiple_ranges.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Multiple needle",
+ "key": "multiple_needle",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/multiple_needle.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Marker pointer",
+ "key": "radial_marker",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/radial_marker.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Text pointer",
+ "key": "text_pointer",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/text_pointer.dart",
+ "description": ""
}
]
},
{
"type": "child",
- "title": "Waterfall",
+ "title": "Range",
"displayType": "card",
"subItems": [
{
"type": "sample",
- "title": "Default waterfall chart",
- "key": "water_fall",
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/other_series/waterFall.dart"
+ "title": "Multiple ranges",
+ "key": "multiple_ranges",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/multiple_ranges.dart",
+ "description": ""
},
{
"type": "sample",
- "title": "Vertical waterfall chart",
- "key": "vertical_water_fall",
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/other_series/vertical_waterfall.dart"
+ "title": "Range thickness",
+ "key": "range_thickness",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/range_thickness.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Range label",
+ "key": "range_datalabels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/range_datalabels.dart",
+ "description": ""
}
]
- }
- ]
- },
- {
- "type": "child",
- "title": "Data Source",
- "displayType": "card",
- "subItems": [
- {
- "title": "List",
- "key": "local_list_data",
- "status": "New",
- "description": "This sample demonstrates plotting the data which is stored as a list.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/data_binding/local_data.dart"
},
- {
- "title": "JSON",
- "key": "local_json_data",
- "status": "New",
- "description": "This same demonstrates binding of JSON data to the chart. We saved the JSON data in the file 'chart_data.json' in the assets folder.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/data_binding/json_data.dart"
- }
- ]
- },
- {
- "type": "parent",
- "title": "Axis Types",
- "subItems": [
{
"type": "child",
- "title": "Numeric",
+ "title": "Gauge Annotation",
"displayType": "card",
"subItems": [
{
"type": "sample",
- "title": "Default numeric axis",
- "key": "default_numeric_axis",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/numeric_types/default_numeric_axis.dart",
- "description": "",
- "status": "",
- "sourceLink": "https://www.google.com/search?q=india+vs+australia+odi+result+2019&oq=indian+vs+australia+odi+res&aqs=chrome.2.69i57j0l5.11336j1j4&sourceid=chrome&ie=UTF-8",
- "sourceText": "www.google.com"
+ "title": "Direction compass",
+ "key": "direct_compass",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/direct_compass.dart",
+ "description": ""
},
{
"type": "sample",
- "title": "Numeric axis with label format",
- "key": "numeric_axis_with_label_format",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart",
- "description": "",
- "status": ""
+ "title": "Text annotation",
+ "key": "text_annotation",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/text_annotation.dart",
+ "description": ""
},
{
- "title": "Inversed numeric axis",
- "key": "inversed_numeric_axis",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart",
- "description": "",
- "status": "",
- "sourceLink": "https://www.indexmundi.com/g/g.aspx?c=us&v=121",
- "sourceText": "www.indexmundi.com",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Temparature tracker",
+ "key": "image_annotation",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/image_annotation.dart",
+ "description": ""
}
]
},
{
"type": "child",
- "title": "Category",
+ "title": "Pointer Interaction",
"displayType": "card",
"subItems": [
{
- "title": "Default category axis",
- "key": "default_category_axis",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/category_types/default_category_axis.dart",
- "description": "",
- "status": ""
- },
- {
- "title": "Arranged by index",
- "key": "category_arranged_by_index",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/category_types/indexed_category_axis.dart",
- "description": "By default, category data points will be arranged based on the x values. In this sample, you can arrange the data points based on the index value.",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Radial slider",
+ "key": "radial_pointerdragging",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointer_interaction/radial_pointer_dragging.dart",
+ "description": ""
},
{
- "title": "Label placement",
- "key": "category_label_placement",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/category_types/label_placement.dart",
- "description": "",
- "status": "",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Radial range slider",
+ "key": "radial_slider",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointer_interaction/radial_slider.dart",
+ "description": ""
}
]
},
{
"type": "child",
- "title": "Date Time",
+ "title": "Pointer Animation",
"displayType": "card",
"subItems": [
{
- "title": "Default Date time axis",
- "key": "default_datetime_axis",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/date_time_types/default_date_time_axis.dart",
- "description": "",
- "status": "",
- "sourceLink": "https://www.x-rates.com/graph/?from=USD&to=INR&amount=1",
- "sourceText": "www.x-rates.com"
+ "type": "sample",
+ "title": "Bounce out",
+ "key": "radial_bounce",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_bounce.dart",
+ "description": ""
},
{
- "title": "Date time axis with label format",
- "key": "datetime_axis_with_label_format",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart",
- "description": "",
- "status": "",
- "sourceLink": "https://en.wikipedia.org/wiki/List_of_earthquakes_in_Indonesia",
- "sourceText": "en.wikipedia.org"
+ "type": "sample",
+ "title": "Ease",
+ "key": "radial_easeanimation",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_ease_animation.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Linear",
+ "key": "radial_linearanimation",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_linear_animation.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Ease in cric",
+ "key": "radial_easeincric",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_ease_incric.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Elastic out",
+ "key": "radial_elasticout",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_elastic_out.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Slow middle",
+ "key": "radial_slowmiddle",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_slow_middle.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Ease out back",
+ "key": "radial_easeout",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_ease_out.dart",
+ "description": ""
}
]
},
{
"type": "child",
- "title": "Logarithmic",
- "displayType": "card",
+ "title": "Exporting",
+ "displayType": "tab",
+ "showInWeb": false,
"subItems": [
{
- "title": "Default logarithmic axis",
- "key": "default_logarithmic_axis",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart",
- "description": "",
- "status": ""
- },
- {
- "title": "Inversed logarithmic axis",
- "key": "inversed_logarithmic_axis",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart",
- "description": "",
- "status": "",
- "sourceLink": "https://www.worldometers.info/world-population/population-by-country/",
- "sourceText": "www.worldometers.info"
+ "type": "sample",
+ "title": "Export",
+ "key": "export_gauge",
+ "showInWeb": false,
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/export/export.dart"
}
]
}
]
},
{
- "type": "child",
- "title": "Axis Features",
+ "title": "Funnel Chart",
+ "description": "Visualize the sequential data using funnel chart",
+ "image": "images/funnel.png",
+ "status": "",
"displayType": "card",
+ "controlId": 5,
"subItems": [
{
- "title": "Opposed axes",
- "key": "opposed_axes",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/opposed_axes/opposed_axes.dart",
- "sourceLink": "https://www.statista.com/statistics/199983/us-vehicle-sales-since-1951/",
- "sourceText": "www.statista.com"
- },
- {
- "title": "Handling labels collision",
- "key": "handling_label_collision",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/handling_label_collision/handling_label_collision.dart",
- "sourceLink": "https://en.wikipedia.org/wiki/List_of_men%27s_footballers_with_500_or_more_goals",
- "sourceText": "en.wikipedia.org",
- "needsPropertyPanel": true
- },
- {
- "title": "Edge label placement",
- "key": "edgelabel_placement",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart",
- "sourceLink": "https://www.mycarhelpline.com/index.php?option=com_easyblog&view=entry&id=808&Itemid=91",
- "sourceText": "www.mycarhelpline.com",
- "needsPropertyPanel": true
- },
- {
- "title": "Multiple axis chart",
- "key": "multiple_axis_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart",
- "sourceLink": "https://www.accuweather.com/en/us/new-york-ny/10007/month/349727?monyr=5/01/2019",
- "sourceText": "www.accuweather.com"
+ "title": "Default funnel chart",
+ "key": "default_funnel_chart",
+ "needsPropertyPanel": true,
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/default_funnel_chart.dart"
},
{
- "title": "Axis crossing",
- "key": "axis_crossing",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/axis_crossing/axis_crossing.dart",
+ "title": "Funnel with smart labels",
+ "key": "funnel_with_smart_labels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/funnel_with_smart_labels.dart",
"needsPropertyPanel": true
},
{
- "title": "Plot band",
- "key": "plot_band",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/plot_band/plot_band.dart",
- "needsPropertyPanel": true
- },
+ "title": "Funnel with legend",
+ "key": "funnel_with_legend",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/funnel_with_legend.dart"
+ }
+ ]
+ },
+ {
+ "title": "Pyramid Chart",
+ "description": "Visualize the organized data using pyramid chart",
+ "image": "images/pyramid.png",
+ "status": "",
+ "displayType": "card",
+ "controlId": 4,
+ "subItems": [
{
- "title": "Plot band recurrence",
- "key": "plot_band_recurrence",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/plot_band/plot_band_recurrence.dart",
- "needsPropertyPanel": true
+ "title": "Default pyramid chart",
+ "key": "default_pyramid_chart",
+ "needsPropertyPanel": true,
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/default_pyramid_chart.dart"
},
{
- "title": "Positioning axis labels",
- "key": "positioning_axis_labels",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/positioning_axis_label/positioning_axis_label.dart",
+ "title": "Pyramid with smart labels",
+ "key": "pyramid_with_smart_labels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart",
+ "sourceLink": "https://www.worldometers.info/world-population/population-by-country/",
+ "sourceText": "www.worldometers.info",
"needsPropertyPanel": true
},
{
- "title": "Axis animation",
- "key": "axis_animation",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/axis_animation/axis_animation.dart",
- "needsPropertyPanel": true
+ "title": "Pyramid with legend",
+ "key": "pyramid_with_legend",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/pyramid_with_legend.dart"
}
]
},
{
- "type": "parent",
- "title": "Series Features",
+ "title": "Maps",
+ "description": "Easily visualize data over a geographical area",
+ "image": "images/map.png",
+ "displayType": "tab",
+ "controlId": 7,
+ "status": "Updated",
"subItems": [
{
"type": "child",
- "title": "Gradient",
- "displayType": "card",
- "subItems": [
- {
- "title": "Horizontal gradient",
- "key": "horizantal_gradient",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/gradients/horizantal_gradient.dart"
- },
- {
- "title": "Vertical gradient",
- "key": "vertical_gradient",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/gradients/vertical_gradient.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Animation",
- "displayType": "card",
+ "title": "Shape Layer",
+ "status": "Updated",
+ "displayType": "tab",
"subItems": [
{
- "title": "Series animation",
- "key": "series_animation",
+ "type": "sample",
+ "title": "Range color mapping",
"status": "Updated",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/animation/series_animation.dart"
- },
- {
- "title": "Line",
- "key": "animation_line_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/animation_line_chart.dart"
+ "key": "range_color_mapping",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/range_color_mapping/range_color_mapping.dart"
},
{
- "title": "Column",
- "key": "animation_column_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/animation_column_chart.dart"
+ "type": "sample",
+ "title": "Equal color mapping",
+ "status": "Updated",
+ "key": "equal_color_mapping",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/equal_color_mapping/equal_color_mapping.dart"
},
{
- "title": "Spline",
- "key": "animation_spline_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/animation_spline_chart.dart"
+ "type": "sample",
+ "title": "Bubble",
+ "key": "bubble",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/bubble/bubble.dart"
},
{
- "title": "Area",
- "key": "animation_area_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/animation_area_chart.dart"
+ "type": "sample",
+ "title": "Selection",
+ "key": "selection",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/selection/selection.dart"
},
{
- "title": "Bar",
- "key": "animation_bar_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/animation_bar_chart.dart"
+ "type": "sample",
+ "title": "Marker",
+ "key": "marker",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/marker/marker.dart"
},
{
- "title": "Bubble",
- "key": "animation_bubble_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/animation_bubble_chart.dart"
+ "type": "sample",
+ "title": "Legend",
+ "status": "Updated",
+ "key": "legend",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/legend/legend.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Scatter",
- "key": "animation_scatter_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/scatter_series/animation_scatter_chart.dart"
+ "type": "sample",
+ "title": "Tooltip",
+ "key": "tooltip",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/tooltip/tooltip.dart"
},
{
- "title": "Step line",
- "key": "animation_stepline_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stepLine_series/animation_stepline_chart.dart"
+ "type": "sample",
+ "title": "Zooming",
+ "status": "Updated",
+ "key": "zooming",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/zooming/zooming.dart"
},
{
- "title": "Range column",
- "key": "animation_rangecolumn_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/rangecolumn_series/animation_rangecolumn_chart.dart"
+ "type": "sample",
+ "title": "Sublayer",
+ "status": "new",
+ "key": "sublayer",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/sublayer/sublayer.dart"
}
]
},
{
"type": "child",
- "title": "Marker",
+ "title": "Tile Layer",
+ "status": "New",
"displayType": "tab",
"subItems": [
{
- "title": "Various marker shapes",
- "key": "various_marker_shapes",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/marker/various_marker_shapes.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Data Label",
- "displayType": "card",
- "subItems": [
- {
- "title": "Default data labels",
- "key": "default_datalabels",
+ "type": "sample",
+ "title": "OSM",
"status": "Updated",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/data_label/default_datalabels.dart",
- "needsPropertyPanel": true
+ "key": "osm",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/tile_layer/osm/osm.dart"
},
{
- "title": "Data label template",
- "status": "New",
- "key": "datalabel_template",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/data_label/datalabel_template.dart",
- "sourceLink": "https://www.broadbandsearch.net/blog/social-media-facts-statistics",
- "sourceText": "www.broadbandsearch.net"
- }
- ]
- },
- {
- "type": "child",
- "title": "Annotation",
- "displayType": "card",
- "subItems": [
+ "type": "sample",
+ "title": "Bing Maps",
+ "key": "bing_map",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/tile_layer/bing_map/bing_map.dart"
+ },
{
- "title": "Chart with annotation",
- "key": "chart_with_annotation",
- "description": "This sample renders the cartesian chart with annotation. A pie chart is rendered as an annotation here.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/annotation/chart_with_annotation.dart"
+ "type": "sample",
+ "title": "Arcs and Lines",
+ "status": "New",
+ "key": "arcs",
+ "description": "This sample demonstrates how the arc layer and the line layer can be used for denoting the air routes between different locations.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/tile_layer/vector_layer/arcs.dart",
+ "needsPropertyPanel": true
},
{
- "title": "Chart with watermark",
- "key": "chart_with_watermark",
- "description": "In this sample, annotation is placed at the center of the chart with reduced opacity to form a watermark",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/annotation/chart_with_watermark.dart"
+ "type": "sample",
+ "title": "Polylines",
+ "status": "New",
+ "key": "polylines",
+ "description": "This sample demonstrates how the polyline layer can be used for denoting the road routes between two locations.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/tile_layer/vector_layer/polylines.dart"
}
]
- },
+ }
+ ]
+ },
+ {
+ "title": "Circular ProgressBar",
+ "description": "Indicates the progress of a task with customizable visuals. Designed using Radial Gauge widget.",
+ "image": "images/circular_progress_bar.png",
+ "displayType": "tab",
+ "controlId": 8,
+ "subItems": [
{
- "type": "child",
- "title": "Sorting",
- "displayType": "tab",
- "subItems": [
- {
- "title": "Sorting options",
- "key": "sorting_options",
- "description": "This sample depicts the sorting feature in a chart. The data points can be sorted in the ascending or descending order based on the x or y value.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/sorting/sorting_options.dart",
- "sourceLink": "https://www.emporis.com/statistics/worlds-tallest-buildings",
- "sourceText": "www.emporis.com",
- "needsPropertyPanel": true
- }
- ]
+ "type": "sample",
+ "title": "Types",
+ "key": "progress_bar_types",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/types/types.dart"
},
{
- "type": "child",
- "title": "Empty Points",
- "displayType": "tab",
- "subItems": [
- {
- "title": "Chart with empty points",
- "key": "chart_with_empty_points",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/empty_point/chart_with_empty_points.dart",
- "needsPropertyPanel": true
- }
- ]
+ "type": "sample",
+ "title": "Determinate styles",
+ "key": "progress_bar_determinate_styles",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/determinate_styles/determinate_styles.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Segment styles",
+ "showInWeb": false,
+ "key": "progress_bar_segment_styles",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/segment_styles/segment_styles.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Track with marker",
+ "key": "progress_bar_track_with_markers",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/track_with_marker/track_with_marker.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Custom content",
+ "key": "progress_bar_custom_labels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/custom_labels/custom_labels.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Angles",
+ "key": "progress_bar_angles",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/angles/angles.dart"
}
]
},
{
- "type": "child",
- "title": "Legend",
- "displayType": "card",
+ "title": "Spark/Micro Charts",
+ "description": "Light-weight line, area, column and win-loss charts which fits in a very small area.",
+ "image": "images/sparkline_winloss.png",
+ "displayType": "tab",
+ "status": "New",
+ "controlId": 9,
"subItems": [
{
- "title": "Chart with customized legend",
- "key": "chart_with_customized_legend",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/legend/chart_with_customized_legend.dart"
+ "type": "sample",
+ "title": "Chart Types",
+ "key": "sparkline_series",
+ "codeLink": ""
+ },
+ {
+ "type": "sample",
+ "title": "Axis Types",
+ "key": "sparkline_axis",
+ "codeLink": ""
},
{
- "title": "Legend with various options",
- "key": "cartesian_legend_various_options",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/legend/cartesian_legend_various_options.dart",
+ "type": "sample",
+ "title": "Customization",
+ "key": "sparkline_customization",
+ "description" : "This example depicts various useful features available in Spark charts. Enable the marker, data label, trackball, range band and also change the axis value with the options in the properties panel.",
"needsPropertyPanel": true
+ },
+ {
+ "type": "sample",
+ "title": "Sparkline in Grid",
+ "key": "sparkline_grid",
+ "description" : "This example depicts the rendering of Syncfusion Flutter Spark Charts in the cells of the Syncfusion Flutter Data Grid widget.",
+ "codeLink": ""
+ },
+ {
+ "type": "sample",
+ "title": "Live Update",
+ "key": "sparkline_live_update",
+ "codeLink": ""
}
]
- },
- {
- "type": "parent",
- "title": "User Interactions",
+ }
+ ]
+ },
+ {
+ "categoryName": "Grids",
+ "mobileCategoryId": 1,
+ "webCategoryId": 2,
+ "controlList": [
+ {
+ "title": "DataGrid",
+ "description": "Displays large amounts of data with different data types in a tabular view",
+ "image": "images/Datagrid.png",
+ "status": "Preview",
+ "displayType": "tab",
+ "controlId": 1,
"subItems": [
{
"type": "child",
- "title": "Tooltip",
- "displayType": "card",
+ "title": "Getting Started",
"subItems": [
{
- "title": "Default tooltip",
- "key": "default_tooltip",
- "description": "Tooltip is enabled in this sample and to see the tooltip in action, tap the data points in mobile and hover the data points in the web.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/tooltip/default_tooltip.dart",
- "sourceLink": "https://www.indexmundi.com/g/g.aspx?v=72&c=gm&c=mx&l=en",
- "sourceText": "www.indexmundi.com"
- },
+ "type": "sample",
+ "title": "Getting Started",
+ "key": "getting_started_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/getting_started/datagrid_getting_started.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Data Source",
+ "subItems": [
{
- "title": "Tooltip position",
- "description": "By changing the options, the tooltip can be made to display in the fixed location or at the pointer location itself.",
- "key": "tooltip_position",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/tooltip/tooltip_position.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "List",
+ "key": "list_data_source_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/data_source/datagrid_list_data_source.dart"
},
{
- "title": "Tooltip template",
- "description": "This example displays a custom widget as the tooltip. To see the tooltip template, tap the data points in mobile and hover the data points in the web.",
- "status": "New",
- "key": "tooltip_template",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/tooltip/tooltip_template.dart",
- "sourceLink": "https://www.broadbandsearch.net/blog/social-media-facts-statistics",
- "sourceText": "www.broadbandsearch.net"
+ "type": "sample",
+ "title": "JSON",
+ "key": "json_data_source_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/data_source/datagrid_json_data_source.dart"
}
]
},
{
"type": "child",
- "title": "Zooming and Panning",
- "displayType": "card",
+ "title": "Columns",
"subItems": [
{
- "title": "Pinch zooming",
- "key": "pinch_zooming",
- "status": "Updated",
- "description": "Pinch zooming and panning is enabled in this sample. Pinch the chart to zoom in and swipe the zoomed chart to pan it. In the web, mouse wheel zooming is also enabled.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming/pinch_zooming.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Column Types",
+ "key": "column_types_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/columns/datagrid_column_types.dart"
},
{
- "title": "Selection zooming",
- "key": "selection_zooming",
- "showInWeb": false,
- "description": "This sample depicts the working of selection zooming. Long press and drag on the chart to select the region for zooming.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/zooming_panning/selection_zooming/selection_zooming.dart"
+ "type": "sample",
+ "title": "Custom Header",
+ "key": "custom_header_datagrid",
+ "description": "This sample showcases how to load a widget to a header cell using the headerCellBuilder property. In this sample, the dropdown icon is loaded along with the text to the header cell. If you click the header cell, the popup menu options will be shown. You can sort that specific column or freeze it.",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/columns/datagrid_custom_header.dart"
},
{
- "title": "Zooming with custom buttons",
- "key": "zooming_with_custom_buttons",
- "showInWeb": true,
- "description": "This sample demonstrates zooming and panning with custom buttons.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/zooming_panning/zooming_with_custom_button/zooming_with_custom_buttons.dart"
+ "type": "sample",
+ "title": "Stacked Header",
+ "key": "stacked_header_datagrid",
+ "status": "New",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/columns/datagrid_stacked_header.dart"
}
]
},
{
"type": "child",
- "title": "Crosshair",
- "displayType": "tab",
+ "title": "Sorting",
"subItems": [
{
- "title": "Chart with crosshair",
- "key": "chart_with_crosshair",
- "description": "The crosshair is enabled in this sample. Tap the chart to show the crosshair and drag the chart to constantly change the crosshair position. On the web, you can move the cursor over the chart area to display the crosshair.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart",
+ "type": "sample",
+ "title": "Sorting",
+ "description": "This sample demonstrates how to sort one or more columns. In the Web platform, you can sort multiple columns by tapping the column header with the CTRL key where as in a mobile platform you can tap the column headers. It also provides some additional functionalities like Tri-state sorting and displaying sort numbers that indicate the sort order.",
+ "key": "sorting_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/sorting/datagrid_sorting.dart",
"needsPropertyPanel": true
}
]
},
{
"type": "child",
- "title": "Trackball",
- "displayType": "tab",
+ "title": "Selection",
"subItems": [
{
- "title": "Chart with trackball",
- "key": "chart_with_trackball",
- "status": "Updated",
- "description": "The trackball is enabled in this sample. Tap the chart to show the trackball and drag the chart to change the position of the trackball continuously. On the web, you can move the cursor over the chart area to display the trackball.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/trackball/chart_with_trackball.dart",
+ "type": "sample",
+ "title": "Selection",
+ "key": "selection_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/selection/datagrid_selection.dart",
"needsPropertyPanel": true
}
]
},
{
"type": "child",
- "title": "Selection",
- "displayType": "card",
+ "title": "Freeze Panes",
"subItems": [
{
- "title": "Selection modes",
- "key": "selection_modes",
- "description": "This sample depicts the selection feature in the chart. Tap the data point to select or unselect in mobile and web click the data points.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/selection/selection_modes.dart",
+ "type": "sample",
+ "title": "Freeze Panes",
+ "key": "freeze_panes_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/freeze_panes/datagrid_freeze_panes.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Auto Row Height",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Auto Row Height",
+ "description": "This sample showcases the auto row height feature of the DataGrid that improves readability of the content. DataGrid provides support to change the height of the row based on its content that changes at run time for all columns or certain columns.",
+ "key": "auto_row_height_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/auto_row_height/datagrid_auto_row_height.dart"
+ }
+ ]
+ },
+ {
+ "type": "child",
+ "title": "Appearance",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Styling",
+ "key": "styling_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/apperance/styling/datagrid_styling.dart",
"needsPropertyPanel": true
},
{
- "title": "Dynamic selection",
- "key": "selection_index",
- "status": "New",
- "description": "This sample depicts the dynamic selection feature achieved using the 'selectDataPoints' public method. Choose the series and point index from the dropdown to select or unselect the data points.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/selection/selection_index.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Conditional Styling",
+ "key": "conditional_styling_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/apperance/conditional_styling/datagrid_conditional_styling.dart"
}
]
},
{
"type": "child",
- "title": "Events",
- "status": "New",
- "displayType": "tab",
+ "title": "Load More Behavior",
"subItems": [
{
- "title": "Events",
- "key": "events",
+ "type": "sample",
+ "title": "Infinite Scrolling",
+ "key": "load_more_infinite_scrolling_datagrid",
+ "status": "New",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/loadmore/datagrid_infinite_scrolling.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Load More",
+ "key": "load_more_datagrid",
"status": "New",
- "description": "Various chart callbacks are enabled in this example. It displays the event trace details while rendering and on performing various interactions.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/events.dart"
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/loadmore/datagrid_load_more.dart"
}
]
- }
- ]
- },
- {
- "type": "child",
- "title": "Trendlines",
- "displayType": "card",
- "subItems": [
+ },
{
- "title": "Default rendering",
- "key": "default_trendlines_with_options",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/trendline/default_trendline.dart",
- "needsPropertyPanel": true
+ "type": "child",
+ "title": "Paging",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Paging",
+ "key": "paging_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/paging/datagrid_paging.dart"
+ }
+ ]
},
{
- "title": "Trendline forecast",
- "key": "trendline_forecast_with_options",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/trendline/trendline_forecast_options.dart",
- "sourceLink": "https://www.ofx.com/en-au/forex-news/historical-exchange-rates/yearly-average-rates/",
- "sourceText": "www.ofx.com",
- "needsPropertyPanel": true
+ "type": "child",
+ "title": "Real-Time Update",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Real-Time Update",
+ "key": "real_time_update_datagrid",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/real_time_update/datagrid_real_time_update.dart"
+ }
+ ]
}
]
- },
- {
- "type": "child",
- "title": "Technical Indicators",
- "displayType": "card",
+ }
+ ]
+ },
+ {
+ "categoryName": "Calendar",
+ "mobileCategoryId": 3,
+ "webCategoryId": 3,
+ "controlList": [
+ {
+ "title": "Event Calendar",
+ "description": "Allows you to easily visualize and schedule appointments",
+ "image": "images/calendar.png",
+ "status": "Updated",
+ "displayType": "tab",
+ "controlId": 1,
"subItems": [
{
- "title": "Accumulation Distribution",
- "key": "accumulation_distribution",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/ad_indicator.dart"
+ "type": "sample",
+ "title": "Getting Started",
+ "status": "Updated",
+ "key": "getting_started_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/getting_started/getting_started.dart",
+ "needsPropertyPanel": true
},
{
- "title": "ATR Indicator",
- "key": "atr_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/atr_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Scheduling",
+ "key": "appointment_editor_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/appointment_editor/appointment_editor.dart"
},
{
- "title": "Bollinger Indicator",
- "key": "bollinger_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/bollinger_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Recurrence",
+ "key": "recurrence_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/recurrence/recurrence.dart"
},
{
- "title": "EMA Indicator",
- "key": "ema_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/ema_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Special Regions",
+ "status": "Updated",
+ "key": "special_regions_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/special_regions/special_regions.dart"
},
{
- "title": "Momentum Indicator",
- "key": "momentum_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/momentum_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Timeline views",
+ "key": "timeline_views_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/timeline_views/timeline_views.dart"
},
{
- "title": "RSI Indicator",
- "key": "rsi_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/rsi_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Event Customization",
+ "status": "New",
+ "key": "customization_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/customization.dart"
},
{
- "title": "SMA Indicator",
- "key": "sma_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/sma_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Schedule View",
+ "key": "schedule_view_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/schedule_view/schedule_view.dart"
},
{
- "title": "Stochastic Indicator",
- "key": "stochastic_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/stochastic_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Resource View",
+ "key": "shift_scheduler",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/shift_scheduler/shift_scheduler.dart"
},
{
- "title": "TMA Indicator",
- "key": "tma_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/tma_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Month Agenda View",
+ "key": "agenda_view_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/agenda_view/agenda_view.dart"
},
{
- "title": "MACD Indicator",
- "key": "macd_indicator",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/technical_indicators/macd_indicator.dart",
- "needsPropertyPanel": true
+ "type": "sample",
+ "title": "Fare Calendar",
+ "key": "air_fare_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/airfare/airfare.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Heat Map",
+ "key": "heat_map_calendar",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/heatmap/heatmap.dart"
}
]
},
{
- "type": "parent",
- "title": "Real-time Charts",
+ "title": "Date Range Picker",
+ "description": "Allows to easily select dates or range of dates",
+ "image": "images/Date_range_picker.png",
+ "status": "Preview",
+ "displayType": "tab",
+ "controlId": 2,
"subItems": [
{
- "type": "child",
- "title": "Live Updates",
- "displayType": "card",
- "subItems": [
- {
- "title": "Real-time spline chart",
- "key": "real_time_spline_chart",
- "description": "This sample demonstrates the live chart. A new data point is added at the end and a point is removed at the start in certain time interval continuously.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/live_update/real_time_spline_chart.dart"
- },
- {
- "title": "Real-time line chart",
- "key": "real_time_line_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/live_update/real_time_line_chart.dart"
- },
- {
- "title": "Vertical live chart",
- "key": "vertical_live_chart",
- "description": "This sample demonstrates the live chart. A new data point is added at the end in certain time interval continuously.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/live_update/vertical_live_chart.dart"
- }
- ]
+ "type": "sample",
+ "title": "Getting Started",
+ "key": "getting_started_date_picker",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/getting_started/date_picker_getting_started.dart",
+ "needsPropertyPanel": true
},
{
- "type": "child",
- "title": "Add/Remove Data",
- "displayType": "card",
- "subItems": [
- {
- "title": "Add/remove points",
- "key": "add_remove_points",
- "description": "Add or remove the data points from a chart using the buttons placed in the sample.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart"
- },
- {
- "title": "Add/remove series",
- "key": "add_remove_series",
- "description": "Add or remove series from the chart using the buttons placed in the sample.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart"
- }
- ]
+ "type": "sample",
+ "title": "Hijri Calendar",
+ "key": "hijri_calendar_date_picker",
+ "status": "New",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/hijri_calendar/hijri_calendar.dart",
+ "needsPropertyPanel": true
},
{
- "type": "child",
- "title": "Update Data Source",
- "showInWeb": true,
- "displayType": "tab",
- "subItems": [
- {
- "title": "Update data source",
- "key": "update_data_source",
- "showInWeb": true,
- "description": "The data source bound to this chart can be changed with random values dynamically, by tapping the button placed in this sample.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/update_data_source/update_data_source.dart"
- }
- ]
+ "type": "sample",
+ "title": "Flight Booking",
+ "key": "popup_picker",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/popup_picker/popup_picker.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Blackout Dates",
+ "key": "blackout_picker",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/blackout_dates/blackout_date_picker.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Cell Customization",
+ "key": "customized_picker",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/customization_picker/customized_date_picker.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Vertical Calendar",
+ "key": "vertical_calendar",
+ "status": "New",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker/vertical_calendar/vertical_calendar.dart"
}
]
- },
+ }
+ ]
+ },
+ {
+ "categoryName": "Viewer",
+ "mobileCategoryId": 4,
+ "webCategoryId": 4,
+ "showInWeb": false,
+ "controlList": [
{
- "type": "child",
- "title": "Exporting",
+ "title": "PDF Viewer",
+ "description": "View the PDF document seamlessly and efficiently",
+ "image": "images/pdf_viewer.png",
"displayType": "tab",
"showInWeb": false,
+ "status": "Preview",
+ "controlId": 1,
"subItems": [
{
- "title": "Export",
- "key": "exporting_chart",
+ "type": "sample",
+ "title": "Getting Started",
+ "key": "pdf_viewer_getting_started",
+ "status": "Updated",
"showInWeb": false,
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/export/export.dart"
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf_viewer/getting_started/pdf_viewer_getting_started.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Custom Toolbar",
+ "key": "pdf_viewer_custom_toolbar",
+ "status": "Updated",
+ "showInWeb": false,
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf_viewer/custom_toolbar/pdf_viewer_custom_toolbar.dart"
}
]
}
]
},
{
- "title": "Circular Charts",
- "description": "Visualize the data using pie, doughnut, and radial bar charts",
- "image": "images/circle_series.png",
- "status": "Updated",
- "category": "Data Visualization",
- "controlId": 2,
- "subItems": [
- {
- "type": "parent",
- "title": "Chart Types",
+ "categoryName": "File Formats",
+ "mobileCategoryId": 5,
+ "webCategoryId": 5,
+ "controlList": [
+ {
+ "title": "PDF",
+ "description": "Create PDF document with text, images and tables",
+ "image": "images/pdf.png",
+ "status": "Preview",
+ "displayType": "tab",
+ "controlId": 1,
"subItems": [
{
- "type": "child",
- "title": "Pie",
- "displayType": "card",
- "subItems": [
- {
- "title": "Default pie chart",
- "key": "default_pie_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/default_pie_chart.dart"
- },
- {
- "title": "Pie with various radius",
- "key": "pie_with_various_radius",
- "description": "This sample demonstrates the pie chart with different radius for all the slices. The radius of a slice is based on a numeric value.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/pie_with_various_radius.dart"
- },
- {
- "title": "Semi-pie chart",
- "key": "semi_pie_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/semi_pie_chart.dart",
- "sourceLink": "https://data.worldbank.org/indicator/sp.rur.totl.zs",
- "sourceText": "data.worldbank.org",
- "needsPropertyPanel": true
- },
- {
- "title": "Pie with grouping",
- "key": "pie_with_grouping",
- "description": "This sample demonstrates the grouping functionality in a pie chart. Data points’ values less than the specified value can be grouped together.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/pie_with_grouping.dart"
- },
- {
- "title": "Pie with smart labels",
- "key": "pie_with_smart_labels",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart",
- "needsPropertyPanel": true
- }
- ]
+ "type": "sample",
+ "title": "Invoice",
+ "key": "invoice",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/invoice.dart"
},
- {
- "type": "child",
- "title": "Doughnut",
- "displayType": "card",
- "subItems": [
- {
- "title": "Default doughnut chart",
- "key": "default_doughnut_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart",
- "sourceLink": "https://www.pngkit.com/view/u2q8y3w7r5y3t4o0_composition-of-ocean-water-earths-oceans-elements-percentage/",
- "sourceText": "www.pngkit.com"
- },
- {
- "title": "Doughnut with center elevation",
- "key": "doughnut_with_center_elevation",
- "description": "The doughnut chart is rendered with elevated circle at the center using annotations feature in this sample.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart"
- },
- {
- "title": "Doughnut with rounded corners",
- "key": "doughnut_with_rounded_corners",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart"
- },
- {
- "title": "Doughnut with color mapping",
- "key": "doughnut_with_color_mapping",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart"
- },
- {
- "title": "Semi-doughnut chart",
- "key": "semi_doughnut_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart",
- "needsPropertyPanel": true
- }
- ]
- },
- {
- "type": "child",
- "title": "Radial Bar",
- "displayType": "card",
- "subItems": [
- {
- "title": "Default radial bar chart",
- "key": "default_radialbar_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart"
- },
- {
- "title": "Radial bar with legend",
- "key": "radialbar_with_legend",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart"
- },
- {
- "title": "Customized radial bar chart",
- "key": "customized_radialbar_chart",
- "description": "This sample renders the radial bar chart with annotation at the center and templated legend.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/radialbar_series/customized_radialbar_chart.dart"
- }
- ]
- }
- ]
- },
- {
- "type": "child",
- "title": "Legend",
- "displayType": "card",
- "subItems": [
- {
- "title": "Chart with legend",
- "key": "chart_with_legend",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/legend/chart_with_legend.dart"
- },
- {
- "title": "Legend with various options",
- "key": "legend_with_various_options",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/legend/legend_with_various_options.dart",
- "needsPropertyPanel": true
- }
- ]
- },
- {
- "type": "child",
- "title": "User Interactions",
- "displayType": "card",
- "subItems": [
- {
- "title": "Tooltip",
- "key": "pie_tooltip_position",
- "description": "By changing the options, the tooltip can be made to display in the fixed location or at the pointer location itself.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/user_interactions/tooltip/pie_tooltip_position.dart",
- "needsPropertyPanel": true
- },
- {
- "title": "Selection",
- "key": "circular_selection",
- "description": "This sample depicts the selection feature in the chart. Tap the data point to select or unselect in mobile and web click the data points.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/user_interactions/selection/circular_selection.dart",
- "needsPropertyPanel": true
- },
- {
- "title": "Dynamic selection",
- "key": "circular_dynamic_selection",
- "status": "New",
- "description": "This sample depicts the dynamic selection feature achieved using the 'selectDataPoints' public method. Choose the point index from the dropdown to select or unselect the data points.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/user_interactions/selection/dynamic_circular_selection.dart",
- "needsPropertyPanel": true
- }
- ]
- },
- {
- "type": "child",
- "title": "Exporting",
- "displayType": "tab",
- "showInWeb": false,
- "subItems": [
- {
- "title": "Export",
- "key": "export_circular_chart",
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/export/export.dart",
- "showInWeb": false
- }
- ]
- }
- ]
- },
- {
- "title": "Event Calendar",
- "description": "Allows you to easily visualize and schedule appointments",
- "image": "images/calendar.png",
- "status": "Updated",
- "category": "Calendar",
- "displayType": "tab",
- "controlId": 7,
- "subItems": [
- {
- "type": "sample",
- "title": "Getting Started",
- "status": "Updated",
- "key": "getting_started_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/getting_started/getting_started.dart",
- "needsPropertyPanel": true
- },
- {
- "type": "sample",
- "title": "Scheduling",
- "key": "appointment_editor_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/appointment_editor/appointment_editor.dart"
- },
- {
- "type": "sample",
- "title": "Recurrence",
- "key": "recurrence_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/recurrence/recurrence.dart"
- },
- {
- "type": "sample",
- "title": "Special Regions",
- "key": "special_regions_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/special_regions/special_regions.dart"
- },
- {
- "type": "sample",
- "title": "Timeline views",
- "status": "Updated",
- "key": "timeline_views_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/timeline_views/timeline_views.dart"
- },
- {
- "type": "sample",
- "title": "Schedule View",
- "status": "Updated",
- "key": "schedule_view_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/schedule_view/schedule_view.dart"
- },
- {
- "type": "sample",
- "title": "Resource View",
- "status": "New",
- "key": "shift_scheduler",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/shift_scheduler/shift_scheduler.dart"
- },
- {
- "type": "sample",
- "title": "Month Agenda View",
- "key": "agenda_view_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/agenda_view/agenda_view.dart"
- },
- {
- "type": "sample",
- "title": "Fare Calendar",
- "status": "New",
- "key": "air_fare_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/airfare/airfare.dart"
- },
- {
- "type": "sample",
- "title": "Heat Map",
- "status": "New",
- "key": "heat_map_calendar",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/heatmap/heatmap.dart"
- }
- ]
- },
- {
- "title": "Radial Gauge",
- "status": "Updated",
- "description": "Visualize one or multiple measures on a circular scale with pointers and ranges",
- "image": "images/circle_gauge.png",
- "category": "Data Visualization",
- "controlId": 3,
- "subItems": [
- {
- "type": "child",
- "title": "Showcase",
- "displayType": "card",
- "subItems": [
- {
- "type": "sample",
- "title": "Gauge compass",
- "key": "gauge_compass",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge/showcase/gauge_compass.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Clock",
- "key": "clock_sample",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge/showcase/clock_sample.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Temparature monitor",
- "key": "gauge_overview",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge/showcase/gauge_overview.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Distance tracker",
- "key": "distance_tracker",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge/showcase/distance_tracker.dart",
- "description": ""
- }
- ]
- },
- {
- "type": "child",
- "title": "Axis",
- "displayType": "card",
- "subItems": [
{
"type": "sample",
- "title": "Default view",
- "key": "default_gauge_view",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/default_gauge_view.dart",
- "description": ""
+ "title": "Course Completion Certificate",
+ "key": "certificate",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/certificate.dart"
},
{
"type": "sample",
- "title": "Multiple axis",
- "key": "multiple_axis",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/multiple_axis.dart",
- "description": ""
+ "title": "Headers and Footers",
+ "key": "header_and_footer",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/header_and_footer.dart"
},
{
"type": "sample",
- "title": "Label customization",
- "key": "radiallabel_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/radiallabel_customization.dart",
- "description": ""
+ "title": "Annotations",
+ "key": "annotations",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/annotations.dart"
},
{
"type": "sample",
- "title": "Tick customization",
- "key": "tick_customization",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/tick_customization.dart",
- "description": ""
+ "title": "Text Extraction",
+ "key": "text_extraction",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/text_extraction.dart"
},
{
"type": "sample",
- "title": "Custom scale",
- "key": "non_linearable",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/non_linearable.dart",
- "description": ""
+ "title": "Find Text",
+ "key": "find_text",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/find_text.dart"
},
- {
+ {
"type": "sample",
- "title": "Custom labels",
- "key": "custom_labels",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/custom_labels.dart",
- "description": ""
+ "title": "Encryption",
+ "key": "encryption",
+ "status": "New",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/encryption.dart"
},
{
"type": "sample",
- "title": "Range colors for axis",
- "key": "range_colors",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/range_colors.dart",
- "description": ""
+ "title": "Conformance",
+ "key": "conformance",
+ "status": "New",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf/conformance.dart"
}
]
},
{
- "type": "child",
- "title": "Pointers",
- "displayType": "card",
+ "title": "XlsIO",
+ "description": "Create Excel documents with text, numbers, cell formatting, formulas, charts, images, and more",
+ "image": "images/xlsio.png",
+ "status": "Preview",
+ "displayType": "tab",
+ "controlId": 2,
"subItems": [
{
"type": "sample",
- "title": "Range pointer",
- "key": "range_pointer",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/multiple_ranges.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Multiple needle",
- "key": "multiple_needle",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/multiple_needle.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Marker pointer",
- "key": "radial_marker",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/radial_marker.dart",
- "description": ""
+ "title": "Expenses Report",
+ "key": "expenses_report",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/xlsio/expenses_report/expenses_report.dart"
},
{
"type": "sample",
- "title": "Text pointer",
- "key": "text_pointer",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/text_pointer.dart",
- "description": ""
- }
- ]
- },
- {
- "type": "child",
- "title": "Range",
- "displayType": "card",
- "subItems": [
- {
- "type": "sample",
- "title": "Multiple ranges",
- "key": "multiple_ranges",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/multiple_ranges.dart",
- "description": ""
+ "title": "Invoice",
+ "key": "invoice_excel",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/xlsio/invoice/invoice.dart"
},
{
"type": "sample",
- "title": "Range thickness",
- "key": "range_thickness",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/range_thickness.dart",
- "description": ""
+ "title": "Yearly Sales",
+ "key": "yearly_sales",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/xlsio/yearly_sales/yearly_sales.dart"
},
{
"type": "sample",
- "title": "Range label",
- "key": "range_datalabels",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/range_datalabels.dart",
- "description": ""
+ "title": "Balance Sheet",
+ "key": "balance_sheet",
+ "status": "New",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/xlsio/balance_sheet/balance_sheet.dart"
}
]
- },
- {
- "type": "child",
- "title": "Gauge Annotation",
- "displayType": "card",
+ }
+ ]
+ },
+ {
+ "categoryName": "Sliders",
+ "mobileCategoryId": 6,
+ "webCategoryId": 6,
+ "controlList": [
+ {
+ "title": "Slider",
+ "description": "Select a date or numeric value",
+ "image": "images/slider.png",
+ "displayType": "tab",
+ "controlId": 1,
"subItems": [
{
- "type": "sample",
- "title": "Direction compass",
- "key": "direct_compass",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/direct_compass.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Text annotation",
- "key": "text_annotation",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/text_annotation.dart",
- "description": ""
+ "type": "child",
+ "title": "Basic features",
+ "status": "New",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Default",
+ "key": "default_slider",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/default_slider.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Divisors, labels, and ticks",
+ "key": "slider_divisor_label_tick",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/slider_divisor_label_tick.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Date interval",
+ "key": "slider_date_interval",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/slider_date_interval.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Tooltip types",
+ "key": "slider_tooltip_type",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/slider_tooltip_type.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Step",
+ "key": "slider_step",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider/basic_features/slider_step.dart",
+ "description": ""
+ }
+ ]
},
{
- "type": "sample",
- "title": "Temparature tracker",
- "key": "image_annotation",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/image_annotation.dart",
- "description": ""
+ "type": "child",
+ "status": "New",
+ "title": "Customization",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Thumb icon customization",
+ "key": "thumb_icon_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/customization/thumb_customization/thumb_icon_customization.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Size customization",
+ "key": "slider_size_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/customization/size_customization/slider_size_customization.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Color customization",
+ "key": "slider_color_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/customization/color_customization/slider_color_customization.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Shape customization",
+ "key": "slider_shape_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/slider/customization/shape_customization/slider_shape_customization.dart"
+ }
+ ]
}
]
},
{
- "type": "child",
- "title": "Pointer Interaction",
- "displayType": "card",
+ "title": "Range Slider",
+ "description": "Select a date or numeric range",
+ "image": "images/range_slider.png",
+ "controlId": 2,
"subItems": [
{
- "type": "sample",
- "title": "Radial slider",
- "key": "radial_pointerdragging",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointer_interaction/radial_pointerdragging.dart",
- "description": ""
+ "type": "child",
+ "title": "Basic features",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Default",
+ "key": "range_slider_default_appearance",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_slider/default_appearance/range_slider_default_appearance.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Divisors, labels, and ticks",
+ "key": "range_slider_divisor_label_tick",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_divisor_label_tick.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Date interval",
+ "key": "range_slider_date_time_label",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_date_time_label.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Tooltip types",
+ "key": "range_slider_tooltip_type",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_tooltip_type.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Step",
+ "key": "range_slider_step",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_step.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Interval selection",
+ "key": "range_slider_interval_selection",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/default_appearance/range_slider_interval_selection.dart",
+ "description": ""
+ }
+ ]
},
{
- "type": "sample",
- "title": "Radial range slider",
- "key": "radial_slider",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointer_interaction/radial_slider.dart",
- "description": ""
+ "type": "child",
+ "title": "Customization",
+ "displayType": "tab",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Thumb icon customization",
+ "key": "range_slider_thumb_icon_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/customization/thumb_customization/range_slider_thumb_icon_customization.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Size customization",
+ "key": "size_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/customization/size_customization/size_customization.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Color customization",
+ "key": "color_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/customization/color_customization/color_customization.dart"
+ },
+ {
+ "type": "sample",
+ "title": "Shape customization",
+ "key": "shape_customization",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/sliders/range_slider/customization/shape_customization/shape_customization.dart"
+ }
+ ]
}
]
},
{
- "type": "child",
- "title": "Pointer Animation",
- "displayType": "card",
+ "title": "Range Selector",
+ "description": "Visualize data and select a date or numeric range",
+ "image": "images/range_selector.png",
+ "displayType": "tab",
+ "controlId": 3,
"subItems": [
{
"type": "sample",
- "title": "Bounce out",
- "key": "radial_bounce",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_bounce.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Ease",
- "key": "radial_easeanimation",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_easeanimation.dart",
- "description": ""
- },
- {
- "type": "sample",
- "title": "Linear",
- "key": "radial_linearanimation",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_linearanimation.dart",
- "description": ""
+ "title": "Default",
+ "key": "range_selector_default_appearance",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_default_appearance.dart"
},
{
"type": "sample",
- "title": "Ease in cric",
- "key": "radial_easeincric",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_easeincric.dart",
- "description": ""
+ "title": "Selection",
+ "key": "range_selector_with_selection",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_with_selection.dart"
},
{
"type": "sample",
- "title": "Elastic out",
- "key": "radial_elasticout",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_elasticout.dart",
- "description": ""
+ "title": "Zooming",
+ "key": "range_selector_with_zooming",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_with_zooming.dart",
+ "needsPropertyPanel": true
},
{
"type": "sample",
- "title": "Slow middle",
- "key": "radial_slowmiddle",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_slowmiddle.dart",
- "description": ""
+ "title": "Histogram Chart",
+ "key": "range_selector_with_histogram_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_with_histogram_chart.dart"
},
{
"type": "sample",
- "title": "Ease out back",
- "key": "radial_easeout",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_easeout.dart",
- "description": ""
+ "title": "Bar Chart",
+ "key": "range_selector_with_bar_chart",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector/range_selector_with_bar_chart.dart"
}
]
},
{
- "type": "child",
- "title": "Exporting",
+ "title": "Radial Slider",
+ "description": "Selects a numeric value in a radial scale. Designed using Radial Gauge widget.",
+ "image": "images/radial_slider.png",
+ "status": "Updated",
+ "category": "Sliders",
"displayType": "tab",
- "showInWeb": false,
+ "controlId": 4,
"subItems": [
{
- "type": "sample",
- "title": "Export",
- "key": "export_gauge",
- "showInWeb": false,
+ "type": "child",
+ "title": "Basic Features",
"status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/export/export.dart"
- }
- ]
- }
- ]
- },
- {
- "title": "Funnel Chart",
- "description": "Visualize the sequential data using funnel chart",
- "image": "images/funnel.png",
- "status": "",
- "displayType": "card",
- "category": "Data Visualization",
- "controlId": 5,
- "subItems": [
- {
- "title": "Default funnel chart",
- "key": "default_funnel_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/default_funnel_chart.dart"
- },
- {
- "title": "Funnel with smart labels",
- "key": "funnel_with_smart_labels",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/funnel_with_smart_labels.dart",
- "needsPropertyPanel": true
- },
- {
- "title": "Funnel with legend",
- "key": "funnel_with_legend",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/funnel_with_legend.dart"
- }
- ]
- },
- {
- "title": "Pyramid Chart",
- "description": "Visualize the organized data using pyramid chart",
- "image": "images/pyramid.png",
- "status": "",
- "displayType": "card",
- "category": "Data Visualization",
- "controlId": 4,
- "subItems": [
- {
- "title": "Default pyramid chart",
- "key": "default_pyramid_chart",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/default_pyramid_chart.dart"
- },
- {
- "title": "Pyramid with smart labels",
- "key": "pyramid_with_smart_labels",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart",
- "sourceLink": "https://www.worldometers.info/world-population/population-by-country/",
- "sourceText": "www.worldometers.info",
- "needsPropertyPanel": true
- },
- {
- "title": "Pyramid with legend",
- "key": "pyramid_with_legend",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/pyramid_with_legend.dart"
- }
- ]
- },
- {
- "title": "DataGrid",
- "description": "Displays large amounts of data with different data types in a tabular view",
- "image": "images/Datagrid.png",
- "category": "Grids",
- "status": "Preview",
- "displayType": "tab",
- "controlId": 0,
- "subItems": [
- {
- "type": "child",
- "title": "Getting Started",
- "subItems": [
- {
- "type": "sample",
- "title": "Getting Started",
- "key": "getting_started_datagrid",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/getting_started/datagrid_getting_started.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Data Source",
- "subItems": [
- {
- "type": "sample",
- "title": "List",
- "status": "New",
- "key": "list_data_source_datagrid",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/data_source/datagrid_list_data_source.dart"
- },
- {
- "type": "sample",
- "title": "JSON",
- "status": "New",
- "key": "json_data_source_datagrid",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/data_source/datagrid_json_data_source.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Columns",
- "subItems": [
- {
- "type": "sample",
- "title": "Column Types",
- "key": "column_types_datagrid",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/columns/datagrid_column_types.dart"
+ "displayType": "tab",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "State",
+ "key": "radial_slider_state",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_slider/basic_features/state/radial_slider_state.dart",
+ "description": "",
+ "needsPropertyPanel": true
+ },
+ {
+ "type": "sample",
+ "title": "Labels and Ticks",
+ "key": "radial_slider_ticks_and_labels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_slider/basic_features/labels_and_ticks/radial_slider_labels_And_ticks.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Angles",
+ "key": "radial_slider_angles",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_slider/basic_features/angles/radial_slider_angles.dart",
+ "description": ""
+ }
+ ]
},
{
- "type": "sample",
- "title": "Custom Header",
- "key": "custom_header_datagrid",
- "status": "New",
- "description": "This sample showcases how to load a widget to a header cell using the headerCellBuilder property. In this sample, the dropdown icon is loaded along with the text to the header cell. If you click the header cell, the popup menu options will be shown. You can sort that specific column or freeze it.",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/columns/datagrid_custom_header.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Sorting",
- "subItems": [
- {
- "type": "sample",
- "title": "Sorting",
- "description": "This sample demonstrates how to sort one or more columns. In the Web platform, you can sort multiple columns by tapping the column header with the CTRL key where as in a mobile platform you can tap the column headers. It also provides some additional functionalities like Tri-state sorting and displaying sort numbers that indicate the sort order.",
- "key": "sorting_datagrid",
- "status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/sorting/datagrid_sorting.dart",
- "needsPropertyPanel": true
- }
- ]
- },
- {
- "type": "child",
- "title": "Selection",
- "subItems": [
- {
- "type": "sample",
- "title": "Selection",
- "key": "selection_datagrid",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/selection/datagrid_selection.dart",
- "needsPropertyPanel": true
- }
- ]
- },
- {
- "type": "child",
- "title": "Freeze Panes",
- "subItems": [
- {
- "type": "sample",
- "title": "Freeze Panes",
- "key": "freeze_panes_datagrid",
+ "type": "child",
+ "title": "Customization",
"status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/freeze_panes/datagrid_freeze_panes.dart"
+ "displayType": "tab",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Styles",
+ "key": "radial_slider_styles",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_slider/customization/styles/radial_slider_styles.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Thumb",
+ "key": "radial_slider_thumb",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_slider/customization/thumb/radial_slider_thumb.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Custom Text",
+ "key": "radial_slider_custom_text",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_slider/customization/custom_text/radial_slider_custom_text.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Gradient Fill",
+ "key": "radial_slider_gradient",
+ "showInWeb": false,
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_slider/customization/gradient/radial_slider_gradient.dart",
+ "description": ""
+ }
+ ]
}
]
},
{
- "type": "child",
- "title": "Auto Row Height",
+ "title": "Radial Range Slider",
+ "description": "Selects a numeric range in a radial scale. Designed using Radial Gauge widget.",
+ "image": "images/radial_range_slider.png",
+ "status": "Updated",
+ "category": "Sliders",
+ "displayType": "tab",
+ "controlId": 5,
"subItems": [
{
- "type": "sample",
- "title": "Auto Row Height",
- "description": "This sample showcases the auto row height feature of the DataGrid that improves readability of the content. DataGrid provides support to change the height of the row based on its content that changes at run time for all columns or certain columns.",
- "key": "auto_row_height_datagrid",
+ "type": "child",
+ "title": "Basic Features",
"status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/auto_row_height/datgrid_auto_row_height.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Appearance",
- "subItems": [
- {
- "type": "sample",
- "title": "Styling",
- "key": "styling_datagrid",
- "status": "Updated",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/apperance/styling/datagrid_styling.dart",
- "needsPropertyPanel": true
+ "displayType": "tab",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "State",
+ "key": "radial_range_slider_state",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_range_slider/basic_features/state/range_slider_state.dart",
+ "description": "",
+ "needsPropertyPanel": true
+ },
+ {
+ "type": "sample",
+ "title": "Labels and Ticks",
+ "key": "radial_range_slider_ticks_and_labels",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_range_slider/basic_features/labels_and_ticks/range_slider_labels_And_ticks.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Angles",
+ "key": "radial_range_slider_angles",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_range_slider/basic_features/angles/range_slider_angles.dart",
+ "description": ""
+ }
+ ]
},
{
- "type": "sample",
- "title": "Conditional Styling",
- "key": "conditional_styling_datagrid",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/apperance/conditional_styling/datagrid_conditional_styling.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Paging",
- "subItems": [
- {
- "type": "sample",
- "title": "Paging",
- "key": "paging_datagrid",
+ "type": "child",
+ "title": "Customization",
"status": "New",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/paging/datagrid_paging.dart"
- }
- ]
- },
- {
- "type": "child",
- "title": "Real-Time Update",
- "subItems": [
- {
- "type": "sample",
- "title": "Real-Time Update",
- "key": "real_time_update_datagrid",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/datagrid/real_time_update/datagrid_real_time_update.dart"
+ "displayType": "tab",
+ "subItems": [
+ {
+ "type": "sample",
+ "title": "Styles",
+ "key": "radial_range_slider_styles",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_range_slider/customization/styles/range_slider_styles.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Thumb",
+ "key": "radial_range_slider_thumb",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_range_slider/customization/thumb/range_slider_thumb.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Custom Text",
+ "key": "radial_range_slider_custom_text",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_range_slider/customization/custom_text/range_slider_custom_text.dart",
+ "description": ""
+ },
+ {
+ "type": "sample",
+ "title": "Gradient Fill",
+ "showInWeb": false,
+ "key": "radial_range_slider_gradient",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/radial_range_slider/customization/gradient/range_slider_gradient.dart",
+ "description": ""
+ }
+ ]
}
]
}
]
},
{
- "title": "Maps",
- "description": "Easily visualize data over a geographical area",
- "image": "images/map.png",
- "status": "Preview",
- "category": "Data Visualization",
- "displayType": "tab",
- "controlId": 7,
- "subItems": [
- {
- "type": "child",
- "title": "Shape Layer",
- "status": "Updated",
+ "categoryName": "Signature Pad",
+ "mobileCategoryId": 7,
+ "webCategoryId": 7,
+ "controlList": [
+ {
+ "title": "Signature Pad",
+ "description": "Captures the signature and save it as an image to sync across devices and documents",
+ "image": "images/SignaturePad.png",
"displayType": "tab",
+ "status": "Preview",
+ "controlId": 1,
"subItems": [
{
"type": "sample",
- "title": "Range color mapping",
- "key": "range_color_mapping",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/range_color_mapping/range_color_mapping.dart"
- },
- {
- "type": "sample",
- "title": "Equal color mapping",
- "key": "equal_color_mapping",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/equal_color_mapping/equal_color_mapping.dart"
- },
- {
- "type": "sample",
- "title": "Bubble",
- "key": "bubble",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/bubble/bubble.dart"
- },
- {
- "type": "sample",
- "title": "Selection",
- "key": "selection",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/selection/selection.dart"
- },
- {
- "type": "sample",
- "title": "Marker",
- "key": "marker",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/marker/marker.dart"
- },
- {
- "type": "sample",
- "title": "Legend",
- "status": "New",
- "key": "legend",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/legend/legend.dart",
+ "title": "Getting Started",
+ "key": "signature_pad_getting_started",
+ "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/signature_pad/getting_started/signature_pad_getting_started.dart",
"needsPropertyPanel": true
- },
- {
- "type": "sample",
- "title": "Tooltip",
- "status": "New",
- "key": "tooltip",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/tooltip/tooltip.dart"
- },
- {
- "type": "sample",
- "title": "Zooming",
- "status": "New",
- "key": "zooming",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/shape_layer/zooming/zooming.dart"
}
]
- },
- {
- "type": "child",
- "title": "Tile Layer",
- "status": "New",
- "displayType": "tab",
- "subItems": [
- {
- "type": "sample",
- "title": "OSM",
- "status": "New",
- "key": "osm",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/tile_layer/osm/osm.dart"
- },
- {
- "type": "sample",
- "title": "Bing Maps",
- "status": "New",
- "key": "bing_map",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps/tile_layer/bing_map/bing_map.dart"
- }
- ]
- }
- ]
- },
- {
- "title": "Signature Pad",
- "description": "Captures the signature and save it as an image to sync across devices and documents",
- "image": "images/SignaturePad.png",
- "displayType": "tab",
- "category": "Signature Pad",
- "status": "New",
- "controlId": 15,
- "subItems": [
- {
- "type": "sample",
- "title": "Getting Started",
- "key": "signature_pad_getting_started",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/signature_pad/getting_started/signature_pad_getting_started.dart",
- "needsPropertyPanel": true
- }
- ]
- },
- {
- "title": "PDF Viewer",
- "description": "View the PDF document seamlessly and efficiently",
- "image": "images/pdf_viewer.png",
- "displayType": "tab",
- "category": "Viewer",
- "showInWeb": false,
- "status": "New",
- "controlId": 9,
- "subItems": [
- {
- "type": "sample",
- "title": "Getting Started",
- "key": "pdf_viewer_getting_started",
- "showInWeb": false,
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf_viewer/getting_started/pdf_viewer_getting_started.dart"
- },
- {
- "type": "sample",
- "title": "Custom Toolbar",
- "key": "pdf_viewer_custom_toolbar",
- "showInWeb": false,
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/pdf_viewer/custom_toolbar/pdf_viewer_custom_toolbar.dart"
- }
- ]
- },
- {
- "title": "XlsIO",
- "description": "Create Excel documents with text, numbers, cell formatting, formulas, charts, images, and more",
- "image": "images/xlsio.png",
- "status": "New",
- "category": "File Formats",
- "displayType": "tab",
- "controlId": 16,
- "subItems": [
- {
- "type": "sample",
- "title": "Expenses Report",
- "key": "expenses_report",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/xlsio/expenses_report/expenses_report.dart"
- },
- {
- "type": "sample",
- "title": "Invoice",
- "key": "invoice_excel",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/xlsio/invoice/invoice.dart"
- },
- {
- "type": "sample",
- "title": "Yearly Sales",
- "key": "yearly_sales",
- "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/xlsio/yearly_sales/yearly_sales.dart"
- }
- ]
- },
- {
- "title": "Circular ProgressBar",
- "description": "Designed using Radial Gauge widget. Indicates the progress of a task with customizable visuals.",
- "image": "images/circular_progress_bar.png",
- "displayType": "tab",
- "status": "Updated",
- "category": "Data Visualization",
- "controlId": 17,
- "subItems": [
- {
- "type": "sample",
- "title": "Types",
- "key": "progress_bar_types",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/types/types.dart"
- },
- {
- "type": "sample",
- "title": "Determinate styles",
- "key": "progress_bar_determinate_styles",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/determinate_styles/determinate_styles.dart"
- },
- {
- "type": "sample",
- "title": "Segment styles",
- "showInWeb": false,
- "key": "progress_bar_segment_styles",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/segment_styles/segment_styles.dart"
- },
- {
- "type": "sample",
- "title": "Track with marker",
- "key": "progress_bar_track_with_markers",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/track_with_marker/track_with_marker.dart"
- },
- {
- "type": "sample",
- "title": "Custom content",
- "key": "progress_bar_custom_labels",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/custom_labels/custom_labels.dart"
- },
- {
- "type": "sample",
- "title": "Angles",
- "key": "progress_bar_angles",
- "codeLink": "https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar/angles/angles.dart"
}
]
}
diff --git a/lib/sample_list.dart b/lib/sample_list.dart
index 9b49e928..004373d0 100644
--- a/lib/sample_list.dart
+++ b/lib/sample_list.dart
@@ -1,195 +1,209 @@
import 'package:flutter/foundation.dart';
-import 'samples/barcodes/data_matrix/data_matrix.dart';
-import 'samples/barcodes/one_dimensional/one_dimensional.dart';
-import 'samples/barcodes/two_dimensional/qr_code.dart';
-import 'samples/calendar/agenda_view/agenda_view.dart';
-import 'samples/calendar/appointment_editor/appointment_editor.dart';
-import 'samples/calendar/getting_started/getting_started.dart';
-import 'samples/calendar/recurrence/recurrence.dart';
-import 'samples/calendar/schedule_view/schedule_view.dart';
-import 'samples/calendar/shift_scheduler/shift_scheduler.dart';
-import 'samples/calendar/heatmap/heatmap.dart';
-import 'samples/calendar/airfare/airfare.dart';
-import 'samples/calendar/timeline_views/timeline_views.dart';
-import 'samples/calendar/special_regions/special_regions.dart';
-import 'samples/chart/axis_features/axis_animation/axis_animation.dart';
-import 'samples/chart/axis_features/axis_crossing/axis_crossing.dart';
-import 'samples/chart/axis_features/axis_cross_base_value.dart';
-import 'samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart';
-import 'samples/chart/axis_features/handling_label_collision/handling_label_collision.dart';
-import 'samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart';
-import 'samples/chart/axis_features/opposed_axes/opposed_axes.dart';
-import 'samples/chart/axis_features/plot_band/plot_band.dart';
-import 'samples/chart/axis_features/plot_band/plot_band_recurrence.dart';
-import 'samples/chart/axis_features/positioning_axis_label/positioning_axis_label.dart';
-import 'samples/chart/axis_types/category_types/default_category_axis.dart';
-import 'samples/chart/axis_types/category_types/indexed_category_axis.dart';
-import 'samples/chart/axis_types/category_types/label_placement.dart';
-import 'samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart';
-import 'samples/chart/axis_types/date_time_types/default_date_time_axis.dart';
-import 'samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart';
-import 'samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart';
-import 'samples/chart/axis_types/numeric_types/default_numeric_axis.dart';
-import 'samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart';
-import 'samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart';
-import 'samples/chart/cartesian_charts/area_series/animation_area_chart.dart';
-import 'samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart';
-import 'samples/chart/cartesian_charts/area_series/default_area_chart.dart';
-import 'samples/chart/cartesian_charts/area_series/vertical_area_chart.dart';
-import 'samples/chart/cartesian_charts/area_series/area_with_axis_base.dart';
-import 'samples/chart/cartesian_charts/bar_series/animation_bar_chart.dart';
-import 'samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart';
-import 'samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart';
-import 'samples/chart/cartesian_charts/bar_series/bar_with_track.dart';
-import 'samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart';
-import 'samples/chart/cartesian_charts/bar_series/default_bar_chart.dart';
-import 'samples/chart/cartesian_charts/bubble_series/animation_bubble_chart.dart';
-import 'samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart';
-import 'samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart';
-import 'samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart';
-import 'samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart';
-import 'samples/chart/cartesian_charts/column_series/animation_column_chart.dart';
-import 'samples/chart/cartesian_charts/column_series/back_to_back_column.dart';
-import 'samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart';
-import 'samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart';
-import 'samples/chart/cartesian_charts/column_series/column_with_track.dart';
-import 'samples/chart/cartesian_charts/column_series/customized_column_chart.dart';
-import 'samples/chart/cartesian_charts/column_series/default_column_chart.dart';
-import 'samples/chart/cartesian_charts/column_series/column_with_axis_base.dart';
-import 'samples/chart/cartesian_charts/financial_series/candle_chart.dart';
-import 'samples/chart/cartesian_charts/financial_series/hilo_chart.dart';
-import 'samples/chart/cartesian_charts/financial_series/hilo_open_close_chart.dart';
-import 'samples/chart/cartesian_charts/line_series/animation_line_chart.dart';
-import 'samples/chart/cartesian_charts/line_series/customized_line_chart.dart';
-import 'samples/chart/cartesian_charts/line_series/default_line_chart.dart';
-import 'samples/chart/cartesian_charts/line_series/line_with_dashes.dart';
-import 'samples/chart/cartesian_charts/line_series/multi_colored_line.dart';
-import 'samples/chart/cartesian_charts/other_series/histogram_chart.dart';
-import 'samples/chart/cartesian_charts/other_series/range_area.dart';
-import 'samples/chart/cartesian_charts/other_series/spline_area.dart';
-import 'samples/chart/cartesian_charts/other_series/spline_range_area.dart';
-import 'samples/chart/cartesian_charts/other_series/step_area.dart';
-import 'samples/chart/cartesian_charts/other_series/box_whiser.dart';
-import 'samples/chart/cartesian_charts/other_series/waterFall.dart';
-import 'samples/chart/cartesian_charts/other_series/vertical_waterfall.dart';
-import 'samples/chart/cartesian_charts/rangecolumn_series/animation_rangecolumn_chart.dart';
-import 'samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart';
-import 'samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart';
-import 'samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart';
-import 'samples/chart/cartesian_charts/scatter_series/animation_scatter_chart.dart';
-import 'samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart';
-import 'samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart';
-import 'samples/chart/cartesian_charts/spline_series/animation_spline_chart.dart';
-import 'samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart';
-import 'samples/chart/cartesian_charts/spline_series/default_spline_chart.dart';
-import 'samples/chart/cartesian_charts/spline_series/spline_types.dart';
-import 'samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart';
-import 'samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart';
-import 'samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart';
-import 'samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart';
-import 'samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart';
-import 'samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart';
-import 'samples/chart/cartesian_charts/stacked_series_100/stacked_area_100_chart.dart';
-import 'samples/chart/cartesian_charts/stacked_series_100/stacked_bar_100_chart.dart';
-import 'samples/chart/cartesian_charts/stacked_series_100/stacked_column_100_chart.dart';
-import 'samples/chart/cartesian_charts/stacked_series_100/stacked_line_100_chart.dart';
-import 'samples/chart/cartesian_charts/stepLine_series/animation_stepline_chart.dart';
-import 'samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart';
-import 'samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart';
-import 'samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart';
-import 'samples/chart/data_binding/local_data.dart';
-import 'samples/chart/data_binding/json_data.dart';
-import 'samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart';
-import 'samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart';
-import 'samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart';
-import 'samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart';
-import 'samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart';
-import 'samples/chart/circular_charts/export/export.dart';
-import 'samples/chart/circular_charts/pie_series/default_pie_chart.dart';
-import 'samples/chart/circular_charts/pie_series/pie_with_grouping.dart';
-import 'samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart';
-import 'samples/chart/circular_charts/pie_series/pie_with_various_radius.dart';
-import 'samples/chart/circular_charts/pie_series/semi_pie_chart.dart';
-import 'samples/chart/circular_charts/radial_bar_series/customized_radialbar_chart.dart';
-import 'samples/chart/circular_charts/radial_bar_series/default_radialbar_chart.dart';
-import 'samples/chart/circular_charts/radial_bar_series/radialbar_with_legend.dart';
-import 'samples/chart/circular_charts/user_interactions/selection/circular_selection.dart';
-import 'samples/chart/circular_charts/user_interactions/selection/dynamic_circular_selection.dart';
-import 'samples/chart/circular_charts/user_interactions/tooltip/pie_tooltip_position.dart';
-import 'samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart';
-import 'samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart';
-import 'samples/chart/dynamic_updates/live_update/real_time_line_chart.dart';
-import 'samples/chart/dynamic_updates/live_update/real_time_spline_chart.dart';
-import 'samples/chart/dynamic_updates/live_update/vertical_live_chart.dart';
-import 'samples/chart/dynamic_updates/update_data_source/update_data_source.dart';
-import 'samples/chart/export/export.dart';
+import 'samples/barcodes/data_matrix.dart';
+import 'samples/barcodes/one_dimensional.dart';
+import 'samples/barcodes/qr_code.dart';
+import 'samples/calendar/agenda_view.dart';
+import 'samples/calendar/appointment_editor.dart';
+import 'samples/calendar/customization.dart';
+import 'samples/calendar/getting_started.dart';
+import 'samples/calendar/recurrence.dart';
+import 'samples/calendar/schedule_view.dart';
+import 'samples/calendar/shift_scheduler.dart';
+import 'samples/calendar/heatmap.dart';
+import 'samples/calendar/airfare.dart';
+import 'samples/calendar/timeline_views.dart';
+import 'samples/calendar/special_regions.dart';
+import 'samples/chart/cartesian_charts/axis_features/axis_animation.dart';
+import 'samples/chart/cartesian_charts/axis_features/axis_crossing.dart';
+import 'samples/chart/cartesian_charts/axis_features/edge_label_placement.dart';
+import 'samples/chart/cartesian_charts/axis_features/maximum_width_for_labels.dart';
+import 'samples/chart/cartesian_charts/axis_features/handling_label_collision.dart';
+import 'samples/chart/cartesian_charts/axis_features/multiple_axis_chart.dart';
+import 'samples/chart/cartesian_charts/axis_features/opposed_axes.dart';
+import 'samples/chart/cartesian_charts/axis_features/plot_band.dart';
+import 'samples/chart/cartesian_charts/axis_features/plot_band_recurrence.dart';
+import 'samples/chart/cartesian_charts/axis_features/positioning_axis_label.dart';
+import 'samples/chart/cartesian_charts/axis_types/category/default_category_axis.dart';
+import 'samples/chart/cartesian_charts/axis_types/category/indexed_category_axis.dart';
+import 'samples/chart/cartesian_charts/axis_types/category/label_placement.dart';
+import 'samples/chart/cartesian_charts/axis_types/date_time/date_time_axis_with_label_format.dart';
+import 'samples/chart/cartesian_charts/axis_types/date_time/default_date_time_axis.dart';
+import 'samples/chart/cartesian_charts/axis_types/logarithmic/default_logarithmic_axis.dart';
+import 'samples/chart/cartesian_charts/axis_types/logarithmic/inversed_logarithmic_axis.dart';
+import 'samples/chart/cartesian_charts/axis_types/numeric/default_numeric_axis.dart';
+import 'samples/chart/cartesian_charts/axis_types/numeric/inversed_numeric_axis.dart';
+import 'samples/chart/cartesian_charts/axis_types/numeric/numeric_axis_with_label_format.dart';
+import 'samples/chart/cartesian_charts/chart_types/area/animation_area_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/area/area_with_emptypoints.dart';
+import 'samples/chart/cartesian_charts/chart_types/area/default_area_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/area/vertical_area_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/area/area_with_axis_base.dart';
+import 'samples/chart/cartesian_charts/chart_types/bar/animation_bar_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/bar/bar_width_and_spacing.dart';
+import 'samples/chart/cartesian_charts/chart_types/bar/bar_with_rounded_corners.dart';
+import 'samples/chart/cartesian_charts/chart_types/bar/bar_with_track.dart';
+import 'samples/chart/cartesian_charts/chart_types/bar/customized_bar_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/bar/default_bar_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/box_whisker.dart';
+import 'samples/chart/cartesian_charts/chart_types/bubble/animation_bubble_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/bubble/bubble_filled_with_gradient.dart';
+import 'samples/chart/cartesian_charts/chart_types/bubble/bubble_with_multiple_series.dart';
+import 'samples/chart/cartesian_charts/chart_types/bubble/bubble_with_various_colors.dart';
+import 'samples/chart/cartesian_charts/chart_types/bubble/default_bubble_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/column/animation_column_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/column/back_to_back_column.dart';
+import 'samples/chart/cartesian_charts/chart_types/column/column_width_and_spacing.dart';
+import 'samples/chart/cartesian_charts/chart_types/column/column_with_rounded_corners.dart';
+import 'samples/chart/cartesian_charts/chart_types/column/column_with_track.dart';
+import 'samples/chart/cartesian_charts/chart_types/column/customized_column_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/column/default_column_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/column/column_with_axis_base.dart';
+import 'samples/chart/cartesian_charts/chart_types/financial_charts/candle_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/financial_charts/hilo_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/financial_charts/hilo_open_close_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/histogram.dart';
+import 'samples/chart/cartesian_charts/chart_types/line/animation_line_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/line/customized_line_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/line/default_line_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/line/line_with_dashes.dart';
+import 'samples/chart/cartesian_charts/chart_types/line/multi_colored_line.dart';
+import 'samples/chart/cartesian_charts/chart_types/range_area.dart';
+import 'samples/chart/cartesian_charts/chart_types/range_column/animation_range_column_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/range_column/default_range_column_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/range_column/range_column_with_track.dart';
+import 'samples/chart/cartesian_charts/chart_types/range_column/vertical_range_column_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/scatter/animation_scatter_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/scatter/default_scatter_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/scatter/scatter_with_various_shapes.dart';
+import 'samples/chart/cartesian_charts/chart_types/spline_area.dart';
+import 'samples/chart/cartesian_charts/chart_types/spline_range_area.dart';
+import 'samples/chart/cartesian_charts/chart_types/spline/animation_spline_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/spline/customized_spline_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/spline/default_spline_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/spline/spline_types.dart';
+import 'samples/chart/cartesian_charts/chart_types/spline/spline_with_dashes.dart';
+import 'samples/chart/cartesian_charts/chart_types/spline/vertical_spline_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_area_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_bar_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_column_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/stacked_charts/stacked_line_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/step_area.dart';
+import 'samples/chart/cartesian_charts/chart_types/step_line/animation_step_line_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/step_line/default_step_line_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/step_line/step_line_with_dashes.dart';
+import 'samples/chart/cartesian_charts/chart_types/step_line/vertical_step_line_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/waterfall/waterfall.dart';
+import 'samples/chart/cartesian_charts/chart_types/waterfall/vertical_waterfall.dart';
+import 'samples/chart/cartesian_charts/chart_types/100%_stacked_charts/stacked_area_100_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/100%_stacked_charts/stacked_bar_100_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/100%_stacked_charts/stacked_column_100_chart.dart';
+import 'samples/chart/cartesian_charts/chart_types/100%_stacked_charts/stacked_line_100_chart.dart';
+import 'samples/chart/cartesian_charts/data_source/list.dart';
+import 'samples/chart/cartesian_charts/data_source/json.dart';
+import 'samples/chart/cartesian_charts/export.dart';
+import 'samples/chart/cartesian_charts/legend/legend_various_options.dart';
+import 'samples/chart/cartesian_charts/legend/chart_with_customized_legend.dart';
+import 'samples/chart/cartesian_charts/real_time_charts/add_remove_data/add_remove_points.dart';
+import 'samples/chart/cartesian_charts/real_time_charts/add_remove_data/add_remove_series.dart';
+import 'samples/chart/cartesian_charts/real_time_charts/live_update/real_time_line_chart.dart';
+import 'samples/chart/cartesian_charts/real_time_charts/live_update/real_time_spline_chart.dart';
+import 'samples/chart/cartesian_charts/real_time_charts/live_update/vertical_live_chart.dart';
+import 'samples/chart/cartesian_charts/real_time_charts/update_data_source.dart';
+import 'samples/chart/cartesian_charts/series_features/animation/series_animation.dart';
+import 'samples/chart/cartesian_charts/series_features/annotation/chart_with_annotation.dart';
+import 'samples/chart/cartesian_charts/series_features/annotation/chart_with_watermark.dart';
+import 'samples/chart/cartesian_charts/series_features/data_label/default_data_labels.dart';
+import 'samples/chart/cartesian_charts/series_features/data_label/data_label_template.dart';
+import 'samples/chart/cartesian_charts/series_features/empty_points.dart';
+import 'samples/chart/cartesian_charts/series_features/gradients/horizantal_gradient.dart';
+import 'samples/chart/cartesian_charts/series_features/gradients/vertical_gradient.dart';
+import 'samples/chart/cartesian_charts/series_features/marker.dart';
+import 'samples/chart/cartesian_charts/series_features/sorting.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/accumulation_distribution.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/atr_indicator.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/bollinger_indicator.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/ema_indicator.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/macd_indicator.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/momentum_indicator.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/rsi_indicator.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/sma_indicator.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/stochastic_indicator.dart';
+import 'samples/chart/cartesian_charts/technical_indicators/tma_indicator.dart';
+import 'samples/chart/cartesian_charts/trendline/default_trendline.dart';
+import 'samples/chart/cartesian_charts/trendline/trendline_forecast.dart';
+import 'samples/chart/cartesian_charts/user_interactions/crosshair.dart';
+import 'samples/chart/cartesian_charts/user_interactions/trackball.dart';
+import 'samples/chart/cartesian_charts/user_interactions/customized_trackball.dart';
+import 'samples/chart/cartesian_charts/user_interactions/events.dart';
+import 'samples/chart/cartesian_charts/user_interactions/navigation_with_events.dart';
+import 'samples/chart/cartesian_charts/user_interactions/selection/dynamic_selection.dart';
+import 'samples/chart/cartesian_charts/user_interactions/selection/selection_modes.dart';
+import 'samples/chart/cartesian_charts/user_interactions/tooltip/default_tooltip.dart';
+import 'samples/chart/cartesian_charts/user_interactions/tooltip/tooltip_position.dart';
+import 'samples/chart/cartesian_charts/user_interactions/tooltip/tooltip_template.dart';
+import 'samples/chart/cartesian_charts/user_interactions/zooming_and_panning/pinch_zooming.dart';
+import 'samples/chart/cartesian_charts/user_interactions/zooming_and_panning/selection_zooming.dart';
+import 'samples/chart/cartesian_charts/user_interactions/add_point_on_click.dart';
+import 'samples/chart/cartesian_charts/user_interactions/zooming_and_panning/zooming_with_custom_buttons.dart';
+import 'samples/chart/circular_charts/chart_types/doughnut/default_doughnut_chart.dart';
+import 'samples/chart/circular_charts/chart_types/doughnut/doughnut_with_center_elevation.dart';
+import 'samples/chart/circular_charts/chart_types/doughnut/doughnut_with_color_mapping.dart';
+import 'samples/chart/circular_charts/chart_types/doughnut/doughnut_with_rounded_corners.dart';
+import 'samples/chart/circular_charts/chart_types/doughnut/semi_doughnut_chart.dart';
+import 'samples/chart/circular_charts/chart_types/pie/default_pie_chart.dart';
+import 'samples/chart/circular_charts/chart_types/pie/pie_with_grouping.dart';
+import 'samples/chart/circular_charts/chart_types/pie/pie_with_smart_labels.dart';
+import 'samples/chart/circular_charts/chart_types/pie/pie_with_various_radius.dart';
+import 'samples/chart/circular_charts/chart_types/pie/semi_pie_chart.dart';
+import 'samples/chart/circular_charts/chart_types/radial_bar/customized_radial_bar_chart.dart';
+import 'samples/chart/circular_charts/chart_types/radial_bar/default_radial_bar_chart.dart';
+import 'samples/chart/circular_charts/chart_types/radial_bar/radial_bar_with_legend.dart';
+import 'samples/chart/circular_charts/export.dart';
+import 'samples/chart/circular_charts/user_interactions/selection.dart';
+import 'samples/chart/circular_charts/user_interactions/dynamic_selection.dart';
+import 'samples/chart/circular_charts/user_interactions/tooltip.dart';
import 'samples/chart/funnel_charts/default_funnel_chart.dart';
import 'samples/chart/funnel_charts/funnel_with_legend.dart';
import 'samples/chart/funnel_charts/funnel_with_smart_labels.dart';
-import 'samples/chart/legend/cartesian_legend_various_options.dart';
-import 'samples/chart/legend/chart_with_customized_legend.dart';
-import 'samples/chart/legend/chart_with_legend.dart';
-import 'samples/chart/legend/legend_with_various_options.dart';
+import 'samples/chart/circular_charts/legend/chart_with_legend.dart';
+import 'samples/chart/circular_charts/legend/legend_with_various_options.dart';
import 'samples/chart/pyramid_charts/default_pyramid_chart.dart';
import 'samples/chart/pyramid_charts/pyramid_with_legend.dart';
import 'samples/chart/pyramid_charts/pyramid_with_smart_labels.dart';
-import 'samples/chart/series_features/animation/series_animation.dart';
-import 'samples/chart/series_features/annotation/chart_with_annotation.dart';
-import 'samples/chart/series_features/annotation/chart_with_watermark.dart';
-import 'samples/chart/series_features/data_label/default_datalabels.dart';
-import 'samples/chart/series_features/data_label/datalabel_template.dart';
-import 'samples/chart/series_features/empty_point/chart_with_empty_points.dart';
-import 'samples/chart/series_features/gradients/horizantal_gradient.dart';
-import 'samples/chart/series_features/gradients/vertical_gradient.dart';
-import 'samples/chart/series_features/marker/various_marker_shapes.dart';
-import 'samples/chart/series_features/sorting/sorting_options.dart';
-import 'samples/chart/technical_indicators/ad_indicator.dart';
-import 'samples/chart/technical_indicators/atr_indicator.dart';
-import 'samples/chart/technical_indicators/bollinger_indicator.dart';
-import 'samples/chart/technical_indicators/ema_indicator.dart';
-import 'samples/chart/technical_indicators/macd_indicator.dart';
-import 'samples/chart/technical_indicators/momentum_indicator.dart';
-import 'samples/chart/technical_indicators/rsi_indicator.dart';
-import 'samples/chart/technical_indicators/sma_indicator.dart';
-import 'samples/chart/technical_indicators/stochastic_indicator.dart';
-import 'samples/chart/technical_indicators/tma_indicator.dart';
-import 'samples/chart/trendline/default_trendline.dart';
-import 'samples/chart/trendline/trendline_forecast_options.dart';
-import 'samples/chart/user_interactions/crosshair/chart_with_crosshair.dart';
-import 'samples/chart/user_interactions/trackball/chart_with_trackball.dart';
-import 'samples/chart/user_interactions/events.dart';
-import 'samples/chart/user_interactions/selection/selection_index.dart';
-import 'samples/chart/user_interactions/selection/selection_modes.dart';
-import 'samples/chart/user_interactions/tooltip/default_tooltip.dart';
-import 'samples/chart/user_interactions/tooltip/tooltip_position.dart';
-import 'samples/chart/user_interactions/tooltip/tootip_template.dart';
-import 'samples/chart/user_interactions/zooming_panning/pinch_zooming/pinch_zooming.dart';
-import 'samples/chart/user_interactions/zooming_panning/selection_zooming.dart';
-import 'samples/chart/user_interactions/zooming_panning/zooming_with_custom_button/zooming_with_custom_buttons.dart';
-import 'samples/datagrid/auto_row_height/datgrid_auto_row_height.dart';
+import 'samples/sparkline/chart_types.dart';
+import 'samples/sparkline/axis_types.dart';
+import 'samples/sparkline/customization.dart';
+import 'samples/sparkline/sparkline_in_grid.dart';
+import 'samples/sparkline/live_update.dart';
+import 'samples/datagrid/auto_row_height/datagrid_auto_row_height.dart';
import 'samples/datagrid/columns/datagrid_column_types.dart';
import 'samples/datagrid/columns/datagrid_custom_header.dart';
import 'samples/datagrid/apperance/conditional_styling/datagrid_conditional_styling.dart';
import 'samples/datagrid/data_source/datagrid_json_data_source.dart';
import 'samples/datagrid/data_source/datagrid_list_data_source.dart';
import 'samples/datagrid/getting_started/datagrid_getting_started.dart';
-import 'samples/datagrid/freeze_panes/datagrid_freeze_panes.dart';
+import 'Samples/datagrid/freeze_panes/datagrid_freeze_panes.dart';
import 'samples/datagrid/real_time_update/datagrid_real_time_update.dart';
import 'samples/datagrid/selection/datagrid_selection.dart';
import 'samples/datagrid/apperance/styling/datagrid_styling.dart';
import 'samples/datagrid/paging/datagrid_paging.dart';
import 'samples/datagrid/sorting/datagrid_sorting.dart';
-import 'samples/date_picker/blackout_dates/blackout_date_picker.dart';
-import 'samples/date_picker/customization_picker/customized_date_picker.dart';
-import 'samples/date_picker/getting_started/datePicker_getting_started.dart';
-import 'samples/date_picker/popup_picker/popup_picker.dart';
+import 'samples/datagrid/columns/datagrid_stacked_header.dart';
+import 'samples/datagrid/loadmore/datagrid_infinite_scrolling.dart';
+import 'samples/datagrid/loadmore/datagrid_load_more.dart';
+import 'samples/date_picker/blackout_date_picker.dart';
+import 'samples/date_picker/customized_date_picker.dart';
+import 'samples/date_picker/date_picker_getting_started.dart';
+import 'samples/date_picker/hijri_calendar.dart';
+import 'samples/date_picker/popup_picker.dart';
+import 'samples/date_picker/vertical_calendar.dart';
import 'samples/gauge/animation/radial_bounce.dart';
-import 'samples/gauge/animation/radial_easeanimation.dart';
-import 'samples/gauge/animation/radial_easeincric.dart';
-import 'samples/gauge/animation/radial_easeout.dart';
-import 'samples/gauge/animation/radial_elasticout.dart';
-import 'samples/gauge/animation/radial_linearanimation.dart';
-import 'samples/gauge/animation/radial_slowmiddle.dart';
+import 'samples/gauge/animation/radial_ease_animation.dart';
+import 'samples/gauge/animation/radial_ease_incric.dart';
+import 'samples/gauge/animation/radial_ease_out.dart';
+import 'samples/gauge/animation/radial_elastic_out.dart';
+import 'samples/gauge/animation/radial_linear_animation.dart';
+import 'samples/gauge/animation/radial_slow_middle.dart';
import 'samples/gauge/annotation/direct_compass.dart';
import 'samples/gauge/annotation/image_annotation.dart';
import 'samples/gauge/annotation/text_annotation.dart';
@@ -197,11 +211,11 @@ import 'samples/gauge/axis_feature/custom_labels.dart';
import 'samples/gauge/axis_feature/default_gauge_view.dart';
import 'samples/gauge/axis_feature/multiple_axis.dart';
import 'samples/gauge/axis_feature/non_linearable.dart';
-import 'samples/gauge/axis_feature/radiallabel_customization.dart';
+import 'samples/gauge/axis_feature/radial_label_customization.dart';
import 'samples/gauge/axis_feature/range_colors.dart';
import 'samples/gauge/axis_feature/tick_customization.dart';
import 'samples/gauge/export/export.dart';
-import 'samples/gauge/pointer_interaction/radial_pointerdragging.dart';
+import 'samples/gauge/pointer_interaction/radial_pointer_dragging.dart';
import 'samples/gauge/pointer_interaction/radial_slider.dart';
import 'samples/gauge/pointers/multiple_needle.dart';
import 'samples/gauge/pointers/multiple_ranges.dart';
@@ -221,20 +235,46 @@ import 'samples/maps/shape_layer/range_color_mapping/range_color_mapping.dart';
import 'samples/maps/shape_layer/selection/selection.dart';
import 'samples/maps/shape_layer/tooltip/tooltip.dart';
import 'samples/maps/shape_layer/zooming/zooming.dart';
+import 'samples/maps/shape_layer/sublayer/sublayer.dart';
import 'samples/maps/shape_layer/legend/legend.dart';
import 'samples/maps/tile_layer/osm/osm.dart';
import 'samples/maps/tile_layer/bing_map/bing_map.dart';
-import 'samples/pdf/certificate/certificate.dart';
-import 'samples/pdf/header_and_footer/header_and_footer.dart';
-import 'samples/pdf/invoice/invoice.dart';
-import 'samples/pdf/annotations/annotations.dart';
-import 'samples/pdf/text_extraction/text_extraction.dart';
-import 'samples/pdf/find_text/find_text.dart';
+import 'samples/maps/tile_layer/vector_layer/arcs.dart';
+import 'samples/maps/tile_layer/vector_layer/polylines.dart';
+import 'samples/pdf/annotations.dart';
+import 'samples/pdf/certificate.dart';
+import 'samples/pdf/conformance.dart';
+import 'samples/pdf/encryption.dart';
+import 'samples/pdf/find_text.dart';
+import 'samples/pdf/header_and_footer.dart';
+import 'samples/pdf/invoice.dart';
+import 'samples/pdf/text_extraction.dart';
import 'samples/xlsio/expenses_report/expenses_report.dart';
import 'samples/xlsio/invoice/invoice.dart';
import 'samples/xlsio/yearly_sales/yearly_sales.dart';
-import 'samples/pdf_viewer/getting_started/pdf_viewer_getting_started.dart';
-import 'samples/pdf_viewer/custom_toolbar/pdf_viewer_custom_toolbar.dart';
+import 'samples/xlsio/balance_sheet/balance_sheet.dart';
+import 'samples/pdf_viewer/pdf_viewer_getting_started.dart';
+import 'samples/pdf_viewer/pdf_viewer_custom_toolbar.dart';
+import 'samples/progress_bar/angles.dart';
+import 'samples/progress_bar/custom_labels.dart';
+import 'samples/progress_bar/determinate_styles.dart';
+import 'samples/progress_bar/segment_styles.dart';
+import 'samples/progress_bar/track_with_marker.dart';
+import 'samples/progress_bar/types.dart';
+import 'samples/radial_slider/basic_features/angles/radial_slider_angles.dart';
+import 'samples/radial_slider/basic_features/labels_and_ticks/radial_slider_labels_and_ticks.dart';
+import 'samples/radial_slider/basic_features/state/radial_slider_state.dart';
+import 'samples/radial_slider/customization/custom_text/radial_slider_custom_text.dart';
+import 'samples/radial_slider/customization/gradient/radial_slider_gradient.dart';
+import 'samples/radial_slider/customization/styles/radial_slider_styles.dart';
+import 'samples/radial_slider/customization/thumb/radial_slider_thumb.dart';
+import 'samples/radial_range_slider/basic_features/angles/range_slider_angles.dart';
+import 'samples/radial_range_slider/basic_features/labels_and_ticks/range_slider_labels_and_ticks.dart';
+import 'samples/radial_range_slider/basic_features/state/range_slider_state.dart';
+import 'samples/radial_range_slider/customization/custom_text/range_slider_custom_text.dart';
+import 'samples/radial_range_slider/customization/gradient/range_slider_gradient.dart';
+import 'samples/radial_range_slider/customization/styles/range_slider_styles.dart';
+import 'samples/radial_range_slider/customization/thumb/range_slider_thumb.dart';
import 'samples/sliders/range_selector/range_selector_default_appearance.dart';
import 'samples/sliders/range_selector/range_selector_with_selection.dart';
import 'samples/sliders/range_selector/range_selector_with_zooming.dart';
@@ -260,18 +300,12 @@ import 'samples/sliders/slider/customization/shape_customization/slider_shape_cu
import 'samples/sliders/slider/customization/size_customization/slider_size_customization.dart';
import 'samples/sliders/slider/customization/thumb_customization/thumb_icon_customization.dart';
import 'samples/signature_pad/getting_started/signature_pad_getting_started.dart';
-import 'samples/progress_bar/angles/angles.dart';
-import 'samples/progress_bar/custom_labels/custom_labels.dart';
-import 'samples/progress_bar/determinate_styles/determinate_styles.dart';
-import 'samples/progress_bar/segment_styles/segment_styles.dart';
-import 'samples/progress_bar/track_with_marker/track_with_marker.dart';
-import 'samples/progress_bar/types/types.dart';
/// Contains the output widget of sample
/// appropriate key and output widget mapped
Map getSampleWidget() {
return {
- //cartesian charts
+ // cartesian charts
'default_line_chart': (Key key) => LineDefault(key),
'line_with_dashes': (Key key) => LineDashed(key),
'multi_colored_line': (Key key) => LineMultiColor(key),
@@ -346,10 +380,10 @@ Map getSampleWidget() {
'hilo_open_close_chart': (Key key) => HiloOpenCloseChart(key),
'candle_chart': (Key key) => CandleChart(key),
'axis_crossing': (Key key) => AxisCrossing(key),
- 'axis_cross_base_value': (Key key) => AxisCrossingBaseValue(key),
'positioning_axis_labels': (Key key) => LabelCustomization(key),
'axis_animation': (Key key) => AxisAnimationDefault(key),
'edgelabel_placement': (Key key) => EdgeLabel(key),
+ 'chart_maximum_label_width': (Key key) => ChartMaximumLabelWidth(key),
'handling_label_collision': (Key key) => LabelAction(key),
'multiple_axis_chart': (Key key) => MultipleAxis(key),
'opposed_axes': (Key key) => NumericOpposed(key),
@@ -398,6 +432,7 @@ Map getSampleWidget() {
'selection_index': (Key key) => SelectionIndex(key),
'default_tooltip': (Key key) => DefaultTooltip(key),
'chart_with_trackball': (Key key) => DefaultTrackball(key),
+ 'chart_with_trackball_template': (Key key) => TrackballTemplate(key),
'pinch_zooming': (Key key) => DefaultPanning(key),
'selection_zooming': (Key key) => DefaultZooming(key),
'zooming_with_custom_buttons': (Key key) => ButtonZooming(key),
@@ -407,6 +442,8 @@ Map getSampleWidget() {
'circular_dynamic_selection': (Key key) => DynamicCircularSelection(key),
'pie_tooltip_position': (Key key) => PieTooltipPosition(key),
'events': (Key key) => Events(key),
+ 'navigate_with_events': (Key key) => NavigationWithEvents(key),
+ 'chart_interactivity': (Key key) => InteractiveChart(key),
//Dynamic updates
'add_remove_points': (Key key) => AddDataPoints(key),
@@ -430,13 +467,13 @@ Map getSampleWidget() {
'pie_with_grouping': (Key key) => PieGrouping(key),
'pie_with_smart_labels': (Key key) => PieSmartLabels(key),
'pie_with_various_radius': (Key key) => PieRadius(key),
- 'semi_pie_chart': (Key key) => PieSemi(key),
+ 'semi_pie_chart': (Key key) => SemiPieChart(key),
//Doughnut
'default_doughnut_chart': (Key key) => DoughnutDefault(key),
'doughnut_with_center_elevation': (Key key) => DoughnutElevation(key),
'doughnut_with_color_mapping': (Key key) => DoughnutCustomization(key),
'doughnut_with_rounded_corners': (Key key) => DoughnutRounded(key),
- 'semi_doughnut_chart': (Key key) => DoughnutSemi(key),
+ 'semi_doughnut_chart': (Key key) => SemiDoughnutChart(key),
//Radialbar
'customized_radialbar_chart': (Key key) => RadialBarCustomized(key),
@@ -453,11 +490,19 @@ Map getSampleWidget() {
'pyramid_with_legend': (Key key) => PyramidLegend(key),
'pyramid_with_smart_labels': (Key key) => PyramidSmartLabels(key),
+ //Sparkline
+ 'sparkline_series': (Key key) => SparklineSeriesTypes(key),
+ 'sparkline_axis': (Key key) => SparklineAxesTypes(key),
+ 'sparkline_customization': (Key key) => SparklineCustomization(key),
+ 'sparkline_grid': (Key key) => SparkLineGrid(key),
+ 'sparkline_live_update': (Key key) => SparklineLiveUpdate(key),
+
// Calendar Samples
'getting_started_calendar': (Key key) => GettingStartedCalendar(key),
'recurrence_calendar': (Key key) => RecurrenceCalendar(key),
'agenda_view_calendar': (Key key) => AgendaViewCalendar(key),
'appointment_editor_calendar': (Key key) => CalendarAppointmentEditor(key),
+ 'customization_calendar': (Key key) => CustomizationCalendar(key),
'special_regions_calendar': (Key key) => SpecialRegionsCalendar(key),
'schedule_view_calendar': (Key key) => ScheduleViewCalendar(key),
'shift_scheduler': (Key key) => ShiftScheduler(key),
@@ -467,9 +512,11 @@ Map getSampleWidget() {
// Date picker Samples
'getting_started_date_picker': (Key key) => GettingStartedDatePicker(key),
+ 'hijri_calendar_date_picker': (Key key) => HijriDatePicker(key),
'blackout_picker': (Key key) => BlackoutDatePicker(key),
'customized_picker': (Key key) => CustomizedDatePicker(key),
'popup_picker': (Key key) => PopUpDatePicker(key),
+ 'vertical_calendar': (Key key) => VerticalCalendar(key),
//Gauge
'radial_bounce': (Key key) => RadialBounceOutExample(key),
@@ -511,6 +558,8 @@ Map getSampleWidget() {
'annotations': (Key key) => AnnotationsPdf(key),
'text_extraction': (Key key) => TextExtractionPdf(key),
'find_text': (Key key) => FindTextPdf(key),
+ 'encryption': (Key key) => EncryptPdf(key),
+ 'conformance': (Key key) => ConformancePdf(key),
// PDF Viewer samples
'pdf_viewer_getting_started': (Key key) => GettingStartedPdfViewer(key),
@@ -520,6 +569,7 @@ Map getSampleWidget() {
'expenses_report': (Key key) => ExpensesReportXlsIO(key),
'invoice_excel': (Key key) => InvoiceXlsIO(key),
'yearly_sales': (Key key) => YearlySalesXlsIO(key),
+ 'balance_sheet': (Key key) => BalanceSheetXlsIO(key),
// Barcode samples
'one_dimensional_types': (Key key) => OneDimensionalBarcodes(key: key),
@@ -614,6 +664,13 @@ Map getSampleWidget() {
'sorting_datagrid': (Key key) => SortingDataGrid(key: key),
+ 'stacked_header_datagrid': (Key key) => StackedHeaderDataGrid(key: key),
+
+ 'load_more_infinite_scrolling_datagrid': (Key key) =>
+ LoadMoreInfiniteScrollingDataGrid(key: key),
+
+ 'load_more_datagrid': (Key key) => LoadMoreDataGrid(key: key),
+
//Maps: Shape Layer Samples
'range_color_mapping': (Key key) => MapRangeColorMappingPage(key),
@@ -631,11 +688,17 @@ Map getSampleWidget() {
'zooming': (Key key) => MapZoomingPage(key),
+ 'sublayer': (Key key) => MapSublayerPage(key),
+
//Maps: Tile Layer Samples
'osm': (Key key) => MapOSMPage(key),
'bing_map': (Key key) => MapBingPage(key),
+ 'arcs': (Key key) => MapArcsPage(key),
+
+ 'polylines': (Key key) => MapPolylinesPage(key),
+
//SignaturePad
'signature_pad_getting_started': (Key key) =>
GettingStartedSignaturePad(key),
@@ -649,5 +712,25 @@ Map getSampleWidget() {
ProgressBarTrackWithMarker(key),
'progress_bar_custom_labels': (Key key) => ProgressBarCustomLabels(key),
'progress_bar_angles': (Key key) => ProgressBarAngles(key),
+
+ //Radial Slider
+ 'radial_slider_angles': (Key key) => RadialSliderAngles(key),
+ 'radial_slider_ticks_and_labels': (Key key) => RadialSliderLabelsTicks(key),
+ 'radial_slider_state': (Key key) => RadialSliderStateTypes(key),
+ 'radial_slider_custom_text': (Key key) => RadialSliderCustomText(key),
+ 'radial_slider_gradient': (Key key) => RadialSliderGradient(key),
+ 'radial_slider_styles': (Key key) => RadialSliderStyles(key),
+ 'radial_slider_thumb': (Key key) => RadialSliderThumb(key),
+
+ //Radial Range Slider
+ 'radial_range_slider_angles': (Key key) => RadialRangeSliderAngles(key),
+ 'radial_range_slider_ticks_and_labels': (Key key) =>
+ RadialRangeSliderLabelsTicks(key),
+ 'radial_range_slider_state': (Key key) => RadialRangeSliderStateTypes(key),
+ 'radial_range_slider_custom_text': (Key key) =>
+ RadialRangeSliderCustomText(key),
+ 'radial_range_slider_gradient': (Key key) => RadialRangeSliderGradient(key),
+ 'radial_range_slider_styles': (Key key) => RadialRangeSliderStyles(key),
+ 'radial_range_slider_thumb': (Key key) => RadialRangeSliderThumb(key)
};
}
diff --git a/lib/samples/barcodes/data_matrix/data_matrix.dart b/lib/samples/barcodes/data_matrix.dart
similarity index 97%
rename from lib/samples/barcodes/data_matrix/data_matrix.dart
rename to lib/samples/barcodes/data_matrix.dart
index 32958526..56056274 100644
--- a/lib/samples/barcodes/data_matrix/data_matrix.dart
+++ b/lib/samples/barcodes/data_matrix.dart
@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';
/// Local imports
-import '../../../model/sample_view.dart';
+import '../../model/sample_view.dart';
/// Renders the Data Matrix barcode generator sample
class DataMatrixGenerator extends SampleView {
@@ -60,7 +60,7 @@ class _DataMatrixGeneratorState extends SampleViewState {
@override
Widget buildSettings(BuildContext context) {
- return ListView(children: [
+ return ListView(shrinkWrap: true, children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 10, 0, 10),
child: Container(
diff --git a/lib/samples/barcodes/one_dimensional/one_dimensional.dart b/lib/samples/barcodes/one_dimensional.dart
similarity index 93%
rename from lib/samples/barcodes/one_dimensional/one_dimensional.dart
rename to lib/samples/barcodes/one_dimensional.dart
index f44a31d7..e1edeac4 100644
--- a/lib/samples/barcodes/one_dimensional/one_dimensional.dart
+++ b/lib/samples/barcodes/one_dimensional.dart
@@ -5,7 +5,7 @@ import 'package:flutter/material.dart';
import 'package:syncfusion_flutter_barcodes/barcodes.dart';
/// Local imports
-import '../../../model/sample_view.dart';
+import '../../model/sample_view.dart';
/// Widget of the one dimensional barcodes.
class OneDimensionalBarcodes extends SampleView {
@@ -86,8 +86,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Codabar',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -130,8 +129,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code39',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -176,8 +174,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code39 Extended',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -222,8 +219,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code93',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -267,8 +263,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('UPC-A',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -312,8 +307,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('UPC-E',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -357,8 +351,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('EAN-8',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -402,8 +395,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('EAN-13',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -446,8 +438,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(25, 10, 1, 1),
child: Text('Code128',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(25, 2, 1, 10),
@@ -489,8 +480,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code128A',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -533,8 +523,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code128B',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -577,8 +566,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(25, 10, 1, 1),
child: Text('Code128C',
- style:
- TextStyle(fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(25, 2, 1, 10),
@@ -626,8 +614,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Codabar',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -668,8 +655,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code39',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -713,8 +699,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code39 Extended',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -756,8 +741,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code93',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -800,8 +784,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('UPC-A',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -844,8 +827,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('UPC-E',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -888,8 +870,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('EAN-8',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -932,8 +913,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('EAN-13',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -975,8 +955,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code128',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -1018,8 +997,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code128A',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -1061,8 +1039,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code128B',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
@@ -1104,8 +1081,7 @@ class _OneDimensionalBarcodesState extends SampleViewState {
Padding(
padding: EdgeInsets.fromLTRB(15, 10, 1, 1),
child: Text('Code128C',
- style: TextStyle(
- fontSize: 14, fontWeight: FontWeight.bold)),
+ style: TextStyle(fontWeight: FontWeight.bold)),
),
Padding(
padding: EdgeInsets.fromLTRB(15, 2, 1, 10),
diff --git a/lib/samples/barcodes/qr_code.dart b/lib/samples/barcodes/qr_code.dart
new file mode 100644
index 00000000..78617ec0
--- /dev/null
+++ b/lib/samples/barcodes/qr_code.dart
@@ -0,0 +1,290 @@
+/// Flutter package imports
+import 'package:flutter/material.dart';
+
+/// Barcode imports
+import 'package:syncfusion_flutter_barcodes/barcodes.dart';
+
+/// Local imports
+import '../../model/sample_view.dart';
+
+/// Renders the QR barcode generator sample
+class QRCodeGenerator extends SampleView {
+ /// Creates the QR barcode generator sample
+ const QRCodeGenerator(Key key) : super(key: key);
+ @override
+ _QRCodeGeneratorState createState() => _QRCodeGeneratorState();
+}
+
+class _QRCodeGeneratorState extends SampleViewState {
+ _QRCodeGeneratorState();
+
+ final List _encoding = [
+ 'Numeric',
+ 'AlphaNumeric',
+ 'Binary',
+ ];
+
+ final List _errorCorrectionLevels = [
+ 'High',
+ 'Quartile',
+ 'Medium',
+ 'Low'
+ ];
+
+ ErrorCorrectionLevel _errorCorrectionLevel;
+ String _selectedErrorCorrectionLevel;
+ QRInputMode _inputMode;
+ String _selectedInputMode;
+ String _inputValue;
+ TextEditingController _textEditingController;
+
+ @override
+ void initState() {
+ super.initState();
+ _selectedInputMode = 'Binary';
+ _inputValue = 'http://www.syncfusion.com';
+ _selectedErrorCorrectionLevel = 'Quartile';
+ _errorCorrectionLevel = ErrorCorrectionLevel.quartile;
+ _inputMode = QRInputMode.binary;
+ _textEditingController = TextEditingController.fromValue(
+ TextEditingValue(
+ text: model.isWeb ? 'http://www.syncfusion.com' : _inputValue,
+ ),
+ );
+ }
+
+ @override
+ void dispose() {
+ _textEditingController.dispose();
+ super.dispose();
+ }
+
+ @override
+ Widget build([BuildContext context]) {
+ EdgeInsets _padding = const EdgeInsets.all(0);
+ double _margin;
+ if (!model.isWeb) {
+ _margin = (MediaQuery.of(context).size.width -
+ MediaQuery.of(context).size.width * 0.6) /
+ 2;
+ _padding = EdgeInsets.fromLTRB(_margin, 0, _margin, 0);
+ }
+
+ return Scaffold(
+ backgroundColor: model.isWeb ? Colors.transparent : model.cardThemeColor,
+ body: Padding(
+ padding: const EdgeInsets.fromLTRB(5, 5, 5, 5),
+ child: Container(
+ child: _getQRCodeGenerator(
+ _inputValue, _errorCorrectionLevel, _inputMode, _padding)),
+ ),
+ );
+ }
+
+ @override
+ Widget buildSettings(BuildContext context) {
+ return StatefulBuilder(
+ builder: (BuildContext context, StateSetter stateSetter) {
+ return ListView(
+ shrinkWrap: true,
+ padding: const EdgeInsets.fromLTRB(10, 10, 0, 10),
+ children: [
+ Padding(
+ padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
+ child: Container(
+ height: 100,
+ child: Column(
+ crossAxisAlignment: CrossAxisAlignment.start,
+ mainAxisAlignment: MainAxisAlignment.start,
+ children: [
+ Text('Input value: ',
+ style: TextStyle(
+ fontSize: 16.0,
+ fontWeight: FontWeight.bold,
+ color: model.textColor)),
+ Container(
+ padding: const EdgeInsets.fromLTRB(0, 5, 0, 0),
+ height: 50,
+ child: Align(
+ alignment: Alignment.bottomLeft,
+ child: Theme(
+ data: Theme.of(context).copyWith(
+ canvasColor: model.bottomSheetBackgroundColor),
+ child: TextField(
+ style: TextStyle(color: model.textColor),
+ decoration: InputDecoration(
+ enabledBorder: UnderlineInputBorder(
+ borderSide: BorderSide(
+ color: model.textColor))),
+ autofocus: false,
+ keyboardType: TextInputType.text,
+ maxLines: null,
+ onChanged: (String _text) {
+ setState(() {
+ _inputValue = _text;
+ });
+ },
+ controller: _textEditingController),
+ ),
+ ))
+ ],
+ ),
+ ),
+ ),
+ Padding(
+ padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
+ child: Container(
+ height: 50,
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Expanded(
+ child: Text(
+ 'Input mode:',
+ style: TextStyle(
+ fontSize: 16.0,
+ fontWeight: FontWeight.bold,
+ color: model.textColor),
+ ),
+ ),
+ Expanded(
+ child: Container(
+ height: 50,
+ alignment: Alignment.bottomLeft,
+ child: DropdownButton(
+ underline:
+ Container(color: Color(0xFFBDBDBD), height: 1),
+ value: _selectedInputMode,
+ items: _encoding.map((String value) {
+ return DropdownMenuItem(
+ value: (value != null) ? value : 'Binary',
+ child: Text('$value',
+ textAlign: TextAlign.center,
+ style:
+ TextStyle(color: model.textColor)));
+ }).toList(),
+ onChanged: (String value) {
+ _onInputModeChanged(value.toString());
+ stateSetter(() {});
+ }),
+ ),
+ )
+ ],
+ ),
+ ),
+ ),
+ Padding(
+ padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
+ child: Container(
+ height: 70,
+ child: Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ Expanded(
+ child: Text(
+ 'Error level: ',
+ style: TextStyle(
+ fontSize: 16.0,
+ fontWeight: FontWeight.bold,
+ color: model.textColor),
+ ),
+ ),
+ Expanded(
+ child: Container(
+ height: 50,
+ alignment: Alignment.bottomLeft,
+ child: DropdownButton(
+ underline:
+ Container(color: Color(0xFFBDBDBD), height: 1),
+ value: _selectedErrorCorrectionLevel,
+ items: _errorCorrectionLevels.map((String value) {
+ return DropdownMenuItem(
+ value: (value != null) ? value : 'Quartile',
+ child: Text('$value',
+ textAlign: TextAlign.center,
+ style:
+ TextStyle(color: model.textColor)));
+ }).toList(),
+ onChanged: (String value) {
+ _onErrorCorrectionLevelChanged(value.toString());
+ stateSetter(() {});
+ }),
+ ),
+ ),
+ ],
+ ),
+ ),
+ ),
+ ]);
+ });
+ }
+
+ /// Updating the input mode in QR barcode
+ void _onInputModeChanged(String item) {
+ _selectedInputMode = item;
+ switch (_selectedInputMode) {
+ case 'Numeric':
+ _inputMode = QRInputMode.numeric;
+ break;
+ case 'AlphaNumeric':
+ _inputMode = QRInputMode.alphaNumeric;
+ break;
+ case 'Binary':
+ _inputMode = QRInputMode.binary;
+ break;
+ }
+ setState(() {
+ /// update the QR input mode changes
+ });
+ }
+
+ /// Updating the error correction level in QR barcode
+ void _onErrorCorrectionLevelChanged(String item) {
+ _selectedErrorCorrectionLevel = item;
+ switch (_selectedErrorCorrectionLevel) {
+ case 'High':
+ _errorCorrectionLevel = ErrorCorrectionLevel.high;
+ break;
+ case 'Quartile':
+ _errorCorrectionLevel = ErrorCorrectionLevel.quartile;
+ break;
+ case 'Medium':
+ _errorCorrectionLevel = ErrorCorrectionLevel.medium;
+ break;
+ case 'Low':
+ _errorCorrectionLevel = ErrorCorrectionLevel.low;
+ break;
+ }
+ setState(() {
+ ///Updating the error correction level
+ });
+ }
+
+ /// Returns the QR barcode
+ Widget _getQRCodeGenerator(
+ [String _inputValue,
+ ErrorCorrectionLevel _correctionLevel,
+ QRInputMode _inputMode,
+ EdgeInsets _padding]) {
+ return Center(
+ child: Container(
+ height: model.isWeb ? 300 : double.infinity,
+ child: Padding(
+ padding: _padding ?? const EdgeInsets.all(30),
+ child: SfBarcodeGenerator(
+ value: _inputValue ?? 'http://www.syncfusion.com',
+ textAlign: TextAlign.justify,
+ textSpacing: 10,
+ showValue: false,
+ symbology: QRCode(
+ inputMode: _inputMode ?? QRInputMode.binary,
+ codeVersion: QRCodeVersion.auto,
+ errorCorrectionLevel:
+ _correctionLevel ?? ErrorCorrectionLevel.quartile),
+ ),
+ )),
+ );
+ }
+}
diff --git a/lib/samples/barcodes/two_dimensional/qr_code.dart b/lib/samples/barcodes/two_dimensional/qr_code.dart
deleted file mode 100644
index 486f2f32..00000000
--- a/lib/samples/barcodes/two_dimensional/qr_code.dart
+++ /dev/null
@@ -1,293 +0,0 @@
-/// Flutter package imports
-import 'package:flutter/material.dart';
-
-/// Barcode imports
-import 'package:syncfusion_flutter_barcodes/barcodes.dart';
-
-/// Local imports
-import '../../../model/sample_view.dart';
-import '../../../widgets/custom_dropdown.dart';
-
-/// Renders the QR barcode generator sample
-class QRCodeGenerator extends SampleView {
- /// Creates the QR barcode generator sample
- const QRCodeGenerator(Key key) : super(key: key);
- @override
- _QRCodeGeneratorState createState() => _QRCodeGeneratorState();
-}
-
-class _QRCodeGeneratorState extends SampleViewState {
- _QRCodeGeneratorState();
-
- final List _encoding = [
- 'Numeric',
- 'AlphaNumeric',
- 'Binary',
- ];
-
- final List _errorCorrectionLevels = [
- 'High',
- 'Quartile',
- 'Medium',
- 'Low'
- ];
-
- ErrorCorrectionLevel _errorCorrectionLevel;
- String _selectedErrorCorrectionLevel;
- QRInputMode _inputMode;
- String _selectedInputMode;
- String _inputValue;
- TextEditingController _textEditingController;
-
- @override
- void initState() {
- super.initState();
- _selectedInputMode = 'Binary';
- _inputValue = 'http://www.syncfusion.com';
- _selectedErrorCorrectionLevel = 'Quartile';
- _errorCorrectionLevel = ErrorCorrectionLevel.quartile;
- _inputMode = QRInputMode.binary;
- _textEditingController = TextEditingController.fromValue(
- TextEditingValue(
- text: model.isWeb ? 'http://www.syncfusion.com' : _inputValue,
- ),
- );
- }
-
- @override
- void dispose() {
- _textEditingController.dispose();
- super.dispose();
- }
-
- @override
- Widget build([BuildContext context]) {
- EdgeInsets _padding = const EdgeInsets.all(0);
- double _margin;
- if (!model.isWeb) {
- _margin = (MediaQuery.of(context).size.width -
- MediaQuery.of(context).size.width * 0.6) /
- 2;
- _padding = EdgeInsets.fromLTRB(_margin, 0, _margin, 0);
- }
-
- return Scaffold(
- backgroundColor: model.isWeb ? Colors.transparent : model.cardThemeColor,
- body: Padding(
- padding: const EdgeInsets.fromLTRB(5, 5, 5, 5),
- child: Container(
- child: _getQRCodeGenerator(
- _inputValue, _errorCorrectionLevel, _inputMode, _padding)),
- ),
- );
- }
-
- @override
- Widget buildSettings(BuildContext context) {
- return ListView(
- padding: const EdgeInsets.fromLTRB(10, 10, 0, 10),
- children: [
- Padding(
- padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
- child: Container(
- height: 100,
- child: Column(
- crossAxisAlignment: CrossAxisAlignment.start,
- mainAxisAlignment: MainAxisAlignment.start,
- children: [
- Text('Input value: ',
- style: TextStyle(
- fontSize: 16.0,
- fontWeight: FontWeight.bold,
- color: model.textColor)),
- Container(
- padding: const EdgeInsets.fromLTRB(0, 5, 0, 0),
- height: 50,
- child: Align(
- alignment: Alignment.bottomLeft,
- child: Theme(
- data: Theme.of(context).copyWith(
- canvasColor: model.bottomSheetBackgroundColor),
- child: TextField(
- style: TextStyle(color: model.textColor),
- decoration: InputDecoration(
- enabledBorder: UnderlineInputBorder(
- borderSide:
- BorderSide(color: model.textColor))),
- autofocus: false,
- keyboardType: TextInputType.text,
- maxLines: null,
- onChanged: (String _text) {
- setState(() {
- _inputValue = _text;
- });
- },
- controller: _textEditingController),
- ),
- ))
- ],
- ),
- ),
- ),
- Padding(
- padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
- child: Container(
- height: 50,
- child: Row(
- crossAxisAlignment: CrossAxisAlignment.center,
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Expanded(
- child: Text(
- 'Input mode:',
- style: TextStyle(
- fontSize: 16.0,
- fontWeight: FontWeight.bold,
- color: model.textColor),
- ),
- ),
- Expanded(
- child: Container(
- height: 50,
- child: Align(
- alignment: Alignment.bottomLeft,
- child: Theme(
- data: Theme.of(context).copyWith(
- canvasColor: model.bottomSheetBackgroundColor),
- child: DropDown(
- value: _selectedInputMode,
- item: _encoding.map((String value) {
- return DropdownMenuItem(
- value: (value != null) ? value : 'Binary',
- child: Text('$value',
- textAlign: TextAlign.center,
- style: TextStyle(
- color: model.textColor)));
- }).toList(),
- valueChanged: (dynamic value) {
- _onInputModeChanged(value);
- }),
- ),
- )),
- )
- ],
- ),
- ),
- ),
- Padding(
- padding: const EdgeInsets.fromLTRB(10, 10, 0, 0),
- child: Container(
- height: 70,
- child: Row(
- crossAxisAlignment: CrossAxisAlignment.center,
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- Expanded(
- child: Text(
- 'Error level: ',
- style: TextStyle(
- fontSize: 16.0,
- fontWeight: FontWeight.bold,
- color: model.textColor),
- ),
- ),
- Expanded(
- child: Container(
- height: 50,
- child: Align(
- alignment: Alignment.bottomLeft,
- child: Theme(
- data: Theme.of(context).copyWith(
- canvasColor: model.bottomSheetBackgroundColor),
- child: DropDown(
- value: _selectedErrorCorrectionLevel,
- item:
- _errorCorrectionLevels.map((String value) {
- return DropdownMenuItem(
- value:
- (value != null) ? value : 'Quartile',
- child: Text('$value',
- textAlign: TextAlign.center,
- style: TextStyle(
- color: model.textColor)));
- }).toList(),
- valueChanged: (dynamic value) {
- _onErrorCorrectionLevelChanged(value);
- }),
- ),
- )),
- )
- ],
- ),
- ),
- ),
- ]);
- }
-
- /// Updating the input mode in QR barcode
- void _onInputModeChanged(String item) {
- _selectedInputMode = item;
- switch (_selectedInputMode) {
- case 'Numeric':
- _inputMode = QRInputMode.numeric;
- break;
- case 'AlphaNumeric':
- _inputMode = QRInputMode.alphaNumeric;
- break;
- case 'Binary':
- _inputMode = QRInputMode.binary;
- break;
- }
- setState(() {
- /// update the QR input mode changes
- });
- }
-
- /// Updating the error correction level in QR barcode
- void _onErrorCorrectionLevelChanged(String item) {
- _selectedErrorCorrectionLevel = item;
- switch (_selectedErrorCorrectionLevel) {
- case 'High':
- _errorCorrectionLevel = ErrorCorrectionLevel.high;
- break;
- case 'Quartile':
- _errorCorrectionLevel = ErrorCorrectionLevel.quartile;
- break;
- case 'Medium':
- _errorCorrectionLevel = ErrorCorrectionLevel.medium;
- break;
- case 'Low':
- _errorCorrectionLevel = ErrorCorrectionLevel.low;
- break;
- }
- setState(() {
- ///Updating the error correction level
- });
- }
-
- /// Returns the QR barcode
- Widget _getQRCodeGenerator(
- [String _inputValue,
- ErrorCorrectionLevel _correctionLevel,
- QRInputMode _inputMode,
- EdgeInsets _padding]) {
- return Center(
- child: Container(
- height: model.isWeb ? 300 : double.infinity,
- child: Padding(
- padding: _padding ?? const EdgeInsets.all(30),
- child: SfBarcodeGenerator(
- value: _inputValue ?? 'http://www.syncfusion.com',
- textAlign: TextAlign.justify,
- textSpacing: 10,
- showValue: false,
- symbology: QRCode(
- inputMode: _inputMode ?? QRInputMode.binary,
- codeVersion: QRCodeVersion.auto,
- errorCorrectionLevel:
- _correctionLevel ?? ErrorCorrectionLevel.quartile),
- ),
- )),
- );
- }
-}
diff --git a/lib/samples/calendar/agenda_view/agenda_view.dart b/lib/samples/calendar/agenda_view.dart
similarity index 87%
rename from lib/samples/calendar/agenda_view/agenda_view.dart
rename to lib/samples/calendar/agenda_view.dart
index eb68f7d2..7c61d348 100644
--- a/lib/samples/calendar/agenda_view/agenda_view.dart
+++ b/lib/samples/calendar/agenda_view.dart
@@ -9,7 +9,7 @@ import 'package:flutter/scheduler.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
///Local import
-import '../../../model/sample_view.dart';
+import '../../model/sample_view.dart';
/// Widget of the AgendaView Calendar.
class AgendaViewCalendar extends SampleView {
@@ -23,21 +23,15 @@ class AgendaViewCalendar extends SampleView {
class _AgendaViewCalendarState extends SampleViewState {
_AgendaViewCalendarState();
- List subjectCollection;
- List colorCollection;
- List<_Meeting> meetings;
- _MeetingDataSource events;
- CalendarController calendarController;
+ _MeetingDataSource _events;
+ CalendarController _calendarController;
Orientation _deviceOrientation;
@override
void initState() {
- meetings = <_Meeting>[];
- calendarController = CalendarController();
- calendarController.selectedDate = DateTime.now();
- _addAppointmentDetails();
- _addAppointments();
- events = _MeetingDataSource(meetings);
+ _calendarController = CalendarController();
+ _calendarController.selectedDate = DateTime.now();
+ _events = _MeetingDataSource(_getAppointments());
super.initState();
}
@@ -51,8 +45,8 @@ class _AgendaViewCalendarState extends SampleViewState {
Widget build(BuildContext context) {
final Widget _calendar = Theme(
data: model.themeData.copyWith(accentColor: model.backgroundColor),
- child:
- _getAgendaViewCalendar(events, _onViewChanged, calendarController));
+ child: _getAgendaViewCalendar(
+ _events, _onViewChanged, _calendarController));
return model.isMobileResolution &&
_deviceOrientation == Orientation.landscape
? Scrollbar(
@@ -71,9 +65,11 @@ class _AgendaViewCalendarState extends SampleViewState {
);
}
- /// Creates the required appointment details as a list.
- void _addAppointmentDetails() {
- subjectCollection = [];
+ /// Method that creates the collection the data source for calendar, with
+ /// required information.
+ List<_Meeting> _getAppointments() {
+ /// Creates the required appointment subject details as a list.
+ List subjectCollection = [];
subjectCollection.add('General Meeting');
subjectCollection.add('Plan Execution');
subjectCollection.add('Project Plan');
@@ -85,7 +81,8 @@ class _AgendaViewCalendarState extends SampleViewState {
subjectCollection.add('Release updates');
subjectCollection.add('Performance Check');
- colorCollection = [];
+ /// Creates the required appointment color details as a list.
+ List colorCollection = [];
colorCollection.add(const Color(0xFF0F8644));
colorCollection.add(const Color(0xFF8B1FA9));
colorCollection.add(const Color(0xFFD20100));
@@ -96,11 +93,8 @@ class _AgendaViewCalendarState extends SampleViewState {
colorCollection.add(const Color(0xFFE47C73));
colorCollection.add(const Color(0xFF636363));
colorCollection.add(const Color(0xFF0A8043));
- }
- /// Method that creates the collection the data source for calendar, with
- /// required information.
- void _addAppointments() {
+ final List<_Meeting> meetings = <_Meeting>[];
final Random random = Random();
final DateTime rangeStartDate =
DateTime.now().add(const Duration(days: -(365 ~/ 2)));
@@ -141,6 +135,7 @@ class _AgendaViewCalendarState extends SampleViewState {
'',
'',
'FREQ=WEEKLY;BYDAY=FR;INTERVAL=1'));
+ return meetings;
}
/// Updated the selected date of calendar, when the months swiped, selects the
@@ -155,17 +150,17 @@ class _AgendaViewCalendarState extends SampleViewState {
.isAfter(visibleDatesChangedDetails.visibleDates[0]) &&
DateTime.now().isBefore(visibleDatesChangedDetails.visibleDates[
visibleDatesChangedDetails.visibleDates.length - 1])) {
- calendarController.selectedDate = DateTime.now();
+ _calendarController.selectedDate = DateTime.now();
} else {
- calendarController.selectedDate =
+ _calendarController.selectedDate =
visibleDatesChangedDetails.visibleDates[0];
}
} else {
if (currentViewDate.month == DateTime.now().month &&
currentViewDate.year == DateTime.now().year) {
- calendarController.selectedDate = DateTime.now();
+ _calendarController.selectedDate = DateTime.now();
} else {
- calendarController.selectedDate =
+ _calendarController.selectedDate =
DateTime(currentViewDate.year, currentViewDate.month, 01);
}
}
@@ -174,7 +169,7 @@ class _AgendaViewCalendarState extends SampleViewState {
/// Returns the calendar widget based on the properties passed.
SfCalendar _getAgendaViewCalendar(
- [CalendarDataSource _calendarDataSource,
+ [CalendarDataSource calendarDataSource,
ViewChangedCallback onViewChanged,
CalendarController controller]) {
return SfCalendar(
@@ -183,7 +178,7 @@ class _AgendaViewCalendarState extends SampleViewState {
showDatePickerButton: true,
showNavigationArrow: model.isWeb,
onViewChanged: onViewChanged,
- dataSource: _calendarDataSource,
+ dataSource: calendarDataSource,
monthViewSettings: MonthViewSettings(
showAgenda: true, numberOfWeeksInView: model.isWeb ? 2 : 6),
timeSlotViewSettings: TimeSlotViewSettings(
diff --git a/lib/samples/calendar/airfare/airfare.dart b/lib/samples/calendar/airfare.dart
similarity index 71%
rename from lib/samples/calendar/airfare/airfare.dart
rename to lib/samples/calendar/airfare.dart
index 19937390..836e4b31 100644
--- a/lib/samples/calendar/airfare/airfare.dart
+++ b/lib/samples/calendar/airfare.dart
@@ -11,7 +11,7 @@ import 'package:syncfusion_flutter_calendar/calendar.dart';
import 'package:syncfusion_flutter_core/core.dart';
///Local import
-import '../../../model/sample_view.dart';
+import '../../model/sample_view.dart';
/// Smallest fare value
const String _kBestPrice = "\$100.17";
@@ -29,11 +29,11 @@ class AirFareCalendar extends SampleView {
class _AirFareCalendarCalendarState extends SampleViewState {
_AirFareCalendarCalendarState();
- ScrollController controller;
- List airFareDataCollection;
- List airlineId;
- List fares;
- DateTime minDate;
+ ScrollController _controller;
+ List _airFareDataCollection;
+ List _airlineId;
+ List _fares;
+ DateTime _minDate;
/// Global key used to maintain the state, when we change the parent of the
/// widget
@@ -44,11 +44,11 @@ class _AirFareCalendarCalendarState extends SampleViewState {
@override
void initState() {
_globalKey = GlobalKey();
- controller = ScrollController();
- airFareDataCollection = [];
- airlineId = [];
- fares = [];
- minDate = DateTime.now();
+ _controller = ScrollController();
+ _airFareDataCollection = [];
+ _airlineId = [];
+ _fares = [];
+ _minDate = DateTime.now();
_addFareDataDetails();
_addAirFareData();
super.initState();
@@ -56,40 +56,40 @@ class _AirFareCalendarCalendarState extends SampleViewState {
/// Creates required data for the air fare data.
void _addFareDataDetails() {
- airlineId = [1, 2, 3, 4];
- fares.add("\$134.50");
- fares.add("\$305.00");
- fares.add("\$152.66");
- fares.add("\$267.09");
- fares.add("\$189.20");
- fares.add("\$212.10");
- fares.add("\$350.50");
- fares.add("\$222.39");
- fares.add("\$238.83");
- fares.add("\$147.27");
- fares.add("\$115.43");
- fares.add("\$198.06");
- fares.add("\$189.83");
- fares.add("\$110.71");
- fares.add("\$152.10");
- fares.add("\$199.62");
- fares.add("\$146.15");
- fares.add("\$237.04");
- fares.add("\$100.17");
- fares.add("\$101.72");
- fares.add("\$266.69");
- fares.add("\$332.48");
- fares.add("\$256.77");
- fares.add("\$449.68");
- fares.add("\$100.17");
- fares.add("\$153.31");
- fares.add("\$249.92");
- fares.add("\$254.59");
- fares.add("\$332.48");
- fares.add("\$256.77");
- fares.add("\$449.68");
- fares.add("\$107.18");
- fares.add("\$219.04");
+ _airlineId = [1, 2, 3, 4];
+ _fares.add("\$134.50");
+ _fares.add("\$305.00");
+ _fares.add("\$152.66");
+ _fares.add("\$267.09");
+ _fares.add("\$189.20");
+ _fares.add("\$212.10");
+ _fares.add("\$350.50");
+ _fares.add("\$222.39");
+ _fares.add("\$238.83");
+ _fares.add("\$147.27");
+ _fares.add("\$115.43");
+ _fares.add("\$198.06");
+ _fares.add("\$189.83");
+ _fares.add("\$110.71");
+ _fares.add("\$152.10");
+ _fares.add("\$199.62");
+ _fares.add("\$146.15");
+ _fares.add("\$237.04");
+ _fares.add("\$100.17");
+ _fares.add("\$101.72");
+ _fares.add("\$266.69");
+ _fares.add("\$332.48");
+ _fares.add("\$256.77");
+ _fares.add("\$449.68");
+ _fares.add("\$100.17");
+ _fares.add("\$153.31");
+ _fares.add("\$249.92");
+ _fares.add("\$254.59");
+ _fares.add("\$332.48");
+ _fares.add("\$256.77");
+ _fares.add("\$449.68");
+ _fares.add("\$107.18");
+ _fares.add("\$219.04");
}
/// Returns color for the airplane data.
@@ -105,17 +105,17 @@ class _AirFareCalendarCalendarState extends SampleViewState {
/// Creates the air fare data with required information
void _addAirFareData() {
- airFareDataCollection = [];
+ _airFareDataCollection = [];
for (int i = 0; i < 100; i++) {
- int id = i % airlineId.length;
+ int id = i % _airlineId.length;
if (id == 0) {
id = 1;
- } else if (id > airlineId.length) {
+ } else if (id > _airlineId.length) {
id -= 1;
}
- final String fare = fares[i % fares.length];
+ final String fare = _fares[i % _fares.length];
final Color color = _getAirPlaneColor(id);
- airFareDataCollection
+ _airFareDataCollection
.add(AirFare(fare, color, 'Airways ' + id.toString()));
}
}
@@ -129,7 +129,7 @@ class _AirFareCalendarCalendarState extends SampleViewState {
}
Widget build([BuildContext context]) {
- final Widget _calendar = Theme(
+ final Widget calendar = Theme(
/// The key set here to maintain the state,
/// when we change the parent of the widget
@@ -145,18 +145,18 @@ class _AirFareCalendarCalendarState extends SampleViewState {
_deviceOrientation == Orientation.landscape
? Scrollbar(
isAlwaysShown: true,
- controller: controller,
+ controller: _controller,
child: ListView(
- controller: controller,
+ controller: _controller,
children: [
Container(
color: model.cardThemeColor,
height: 600,
- child: _calendar,
+ child: calendar,
)
],
))
- : Container(color: model.cardThemeColor, child: _calendar),
+ : Container(color: model.cardThemeColor, child: calendar),
)
]),
);
@@ -169,7 +169,7 @@ class _AirFareCalendarCalendarState extends SampleViewState {
view: CalendarView.month,
monthCellBuilder: _monthCellBuilder,
showDatePickerButton: true,
- minDate: minDate,
+ minDate: _minDate,
);
}
@@ -178,27 +178,32 @@ class _AirFareCalendarCalendarState extends SampleViewState {
BuildContext buildContext, MonthCellDetails details) {
Random random = Random();
final bool isToday = isSameDate(details.date, DateTime.now());
- final AirFare airFare = airFareDataCollection[random.nextInt(100)];
+ final AirFare airFare = _airFareDataCollection[random.nextInt(100)];
final Color defaultColor =
model.themeData != null && model.themeData.brightness == Brightness.dark
? Colors.white
: Colors.black54;
final bool isBestPrice = airFare.fare == _kBestPrice;
final bool isDisabledDate =
- details.date.isBefore(minDate) && !isSameDate(details.date, minDate);
+ details.date.isBefore(_minDate) && !isSameDate(details.date, _minDate);
return Container(
decoration: BoxDecoration(
- border: Border.all(color: defaultColor, width: 0.1),
+ border: Border(
+ top: BorderSide(width: 0.1, color: defaultColor),
+ left: BorderSide(width: 0.1, color: defaultColor),
+ ),
color: isDisabledDate
? Colors.grey.withOpacity(0.1)
- : isBestPrice ? Colors.yellow.withOpacity(0.2) : null),
+ : isBestPrice
+ ? Colors.yellow.withOpacity(0.2)
+ : null),
child: Column(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Padding(
- padding: EdgeInsets.only(left: 10, right: 10),
+ padding: EdgeInsets.symmetric(horizontal: 10, vertical: 0),
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: model.isMobileResolution
@@ -213,7 +218,9 @@ class _AirFareCalendarCalendarState extends SampleViewState {
style: TextStyle(
color: isToday
? model.backgroundColor
- : isDisabledDate ? Colors.grey : null,
+ : isDisabledDate
+ ? Colors.grey
+ : null,
fontWeight: isToday ? FontWeight.bold : null),
),
!model.isMobileResolution && airFare.fare == _kBestPrice
diff --git a/lib/samples/calendar/appointment_editor/appointment_editor.dart b/lib/samples/calendar/appointment_editor.dart
similarity index 63%
rename from lib/samples/calendar/appointment_editor/appointment_editor.dart
rename to lib/samples/calendar/appointment_editor.dart
index 1797fe72..74d5bd40 100644
--- a/lib/samples/calendar/appointment_editor/appointment_editor.dart
+++ b/lib/samples/calendar/appointment_editor.dart
@@ -11,9 +11,9 @@ import 'package:intl/intl.dart';
import 'package:syncfusion_flutter_calendar/calendar.dart';
///Local import
-import '../../../model/model.dart';
-import '../../../model/sample_view.dart';
-import '../getting_started/getting_started.dart';
+import '../../model/model.dart';
+import '../../model/sample_view.dart';
+import 'getting_started.dart';
/// Render the widget of appointment editor calendar
class CalendarAppointmentEditor extends SampleView {
@@ -156,7 +156,8 @@ class _CalendarAppointmentEditorState extends SampleViewState {
void _onCalendarTapped(CalendarTapDetails calendarTapDetails) {
/// Condition added to open the editor, when the calendar elements tapped
/// other than the header.
- if (calendarTapDetails.targetElement == CalendarElement.header) {
+ if (calendarTapDetails.targetElement == CalendarElement.header ||
+ calendarTapDetails.targetElement == CalendarElement.resourceHeader) {
return;
}
@@ -231,8 +232,14 @@ class _CalendarAppointmentEditorState extends SampleViewState {
},
child: Center(
child: Container(
+ alignment: Alignment.center,
width: _isAppointmentTapped ? 400 : 500,
- height: _isAppointmentTapped ? 200 : 400,
+ height: _isAppointmentTapped
+ ? _selectedAppointment.location == null ||
+ _selectedAppointment.location.isEmpty
+ ? 150
+ : 200
+ : 390,
child: Theme(
data: model.themeData,
child: Card(
@@ -562,6 +569,7 @@ Widget displayAppointmentDetails(
ListTile(
trailing: Row(
mainAxisSize: MainAxisSize.min,
+ mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
IconButton(
@@ -722,29 +730,32 @@ class _CalendarColorPickerState extends State<_CalendarColorPicker> {
height: (widget.colorCollection.length * 50).toDouble(),
child: ListView.builder(
padding: const EdgeInsets.all(0),
- itemCount: widget.colorCollection.length - 1,
+ itemCount: widget.colorCollection.length,
itemBuilder: (BuildContext context, int index) {
- return ListTile(
- contentPadding: const EdgeInsets.all(0),
- leading: Icon(
- index == _selectedColorIndex
- ? Icons.lens
- : Icons.trip_origin,
- color: widget.colorCollection[index]),
- title: Text(widget.colorNames[index]),
- onTap: () {
- setState(() {
- _selectedColorIndex = index;
- widget.onChanged(_PickerChangedDetails(index: index));
- });
-
- // ignore: always_specify_types
- Future.delayed(const Duration(milliseconds: 200), () {
- // When task is over, close the dialog
- Navigator.pop(context);
- });
- },
- );
+ return Container(
+ height: 50,
+ child: ListTile(
+ contentPadding:
+ const EdgeInsets.symmetric(horizontal: 10),
+ leading: Icon(
+ index == _selectedColorIndex
+ ? Icons.lens
+ : Icons.trip_origin,
+ color: widget.colorCollection[index]),
+ title: Text(widget.colorNames[index]),
+ onTap: () {
+ setState(() {
+ _selectedColorIndex = index;
+ widget.onChanged(_PickerChangedDetails(index: index));
+ });
+
+ // ignore: always_specify_types
+ Future.delayed(const Duration(milliseconds: 200), () {
+ // When task is over, close the dialog
+ Navigator.pop(context);
+ });
+ },
+ ));
},
)),
),
@@ -782,29 +793,32 @@ class _ResourcePickerState extends State<_ResourcePicker> {
itemBuilder: (BuildContext context, int index) {
final CalendarResource resource =
widget.resourceCollection[index];
- return ListTile(
- contentPadding: const EdgeInsets.all(0),
- leading: CircleAvatar(
- backgroundColor: widget.model.backgroundColor,
- backgroundImage: resource.image,
- child: resource.image == null
- ? Text(resource.displayName[0])
- : null,
- ),
- title: Text(resource.displayName),
- onTap: () {
- setState(() {
- widget.onChanged(
- _PickerChangedDetails(resourceId: resource.id));
- });
-
- // ignore: always_specify_types
- Future.delayed(const Duration(milliseconds: 200), () {
- // When task is over, close the dialog
- Navigator.pop(context);
- });
- },
- );
+ return Container(
+ height: 50,
+ child: ListTile(
+ contentPadding:
+ const EdgeInsets.symmetric(horizontal: 10),
+ leading: CircleAvatar(
+ backgroundColor: widget.model.backgroundColor,
+ backgroundImage: resource.image,
+ child: resource.image == null
+ ? Text(resource.displayName[0])
+ : null,
+ ),
+ title: Text(resource.displayName),
+ onTap: () {
+ setState(() {
+ widget.onChanged(
+ _PickerChangedDetails(resourceId: resource.id));
+ });
+
+ // ignore: always_specify_types
+ Future.delayed(const Duration(milliseconds: 200), () {
+ // When task is over, close the dialog
+ Navigator.pop(context);
+ });
+ },
+ ));
},
)),
));
@@ -860,28 +874,32 @@ class _CalendarTimeZonePickerState extends State<_CalendarTimeZonePicker> {
padding: const EdgeInsets.all(0),
itemCount: widget.timeZoneCollection.length,
itemBuilder: (BuildContext context, int index) {
- return ListTile(
- contentPadding: const EdgeInsets.all(0),
- leading: Icon(
- index == _selectedTimeZoneIndex
- ? Icons.check_box
- : Icons.check_box_outline_blank,
- color: widget.backgroundColor,
- ),
- title: Text(widget.timeZoneCollection[index]),
- onTap: () {
- setState(() {
- _selectedTimeZoneIndex = index;
- widget.onChanged(_PickerChangedDetails(index: index));
- });
-
- // ignore: always_specify_types
- Future.delayed(const Duration(milliseconds: 200), () {
- // When task is over, close the dialog
- Navigator.pop(context);
- });
- },
- );
+ return Container(
+ height: 50,
+ child: ListTile(
+ contentPadding:
+ const EdgeInsets.symmetric(horizontal: 10),
+ leading: Icon(
+ index == _selectedTimeZoneIndex
+ ? Icons.check_box
+ : Icons.check_box_outline_blank,
+ color: widget.backgroundColor,
+ ),
+ title: Text(widget.timeZoneCollection[index]),
+ onTap: () {
+ setState(() {
+ _selectedTimeZoneIndex = index;
+ widget
+ .onChanged(_PickerChangedDetails(index: index));
+ });
+
+ // ignore: always_specify_types
+ Future.delayed(const Duration(milliseconds: 200), () {
+ // When task is over, close the dialog
+ Navigator.pop(context);
+ });
+ },
+ ));
},
)),
));
@@ -990,9 +1008,11 @@ class _PopUpAppointmentEditorState extends State {
? Colors.white
: Colors.black87;
- final Widget _startDatePicker = FlatButton(
- padding: const EdgeInsets.only(left: 0),
+ final Widget _startDatePicker = RawMaterialButton(
+ padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(DateFormat('MMM dd, yyyy').format(_startDate),
+ style:
+ TextStyle(fontWeight: FontWeight.w500, color: defaultTextColor),
textAlign: TextAlign.left),
onPressed: () async {
final DateTime date = await showDatePicker(
@@ -1028,9 +1048,11 @@ class _PopUpAppointmentEditorState extends State {
},
);
- final Widget _startTimePicker = FlatButton(
+ final Widget _startTimePicker = RawMaterialButton(
+ padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(
DateFormat('hh:mm a').format(_startDate),
+ style: TextStyle(fontWeight: FontWeight.w500, color: defaultTextColor),
textAlign: TextAlign.left,
),
onPressed: () async {
@@ -1067,9 +1089,11 @@ class _PopUpAppointmentEditorState extends State {
},
);
- final Widget _endTimePicker = FlatButton(
+ final Widget _endTimePicker = RawMaterialButton(
+ padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(
DateFormat('hh:mm a').format(_endDate),
+ style: TextStyle(fontWeight: FontWeight.w500, color: defaultTextColor),
textAlign: TextAlign.left,
),
onPressed: () async {
@@ -1109,8 +1133,11 @@ class _PopUpAppointmentEditorState extends State {
},
);
- final Widget _endDatePicker = FlatButton(
+ final Widget _endDatePicker = RawMaterialButton(
+ padding: const EdgeInsets.symmetric(horizontal: 5),
child: Text(DateFormat('MMM dd, yyyy').format(_endDate),
+ style:
+ TextStyle(fontWeight: FontWeight.w500, color: defaultTextColor),
textAlign: TextAlign.left),
onPressed: () async {
final DateTime date = await showDatePicker(
@@ -1150,342 +1177,378 @@ class _PopUpAppointmentEditorState extends State {
);
return ListView(padding: const EdgeInsets.all(0.0), children: [
- ListTile(
- trailing: IconButton(
- icon: Icon(Icons.close, color: defaultColor),
- onPressed: () {
- if (widget.newAppointment != null &&
- widget.events.appointments.contains(widget.newAppointment)) {
- /// To remove the created appointment, when the appointment editor
- /// closed without saving the appointment.
- widget.events.appointments.removeAt(
- widget.events.appointments.indexOf(widget.newAppointment));
- widget.events.notifyListeners(CalendarDataSourceAction.remove,
- []..add(widget.newAppointment));
- }
-
- Navigator.pop(context);
- },
- ),
- ),
- ListTile(
- leading: const Text(''),
- title: TextField(
- autofocus: true,
- cursorColor: widget.model.backgroundColor,
- controller: TextEditingController(text: _subject),
- onChanged: (String value) {
- _subject = value;
- },
- keyboardType: TextInputType.multiline,
- maxLines: null,
- style: TextStyle(
- fontSize: 20,
- color: defaultTextColor,
- fontWeight: FontWeight.w400),
- decoration: InputDecoration(
- focusColor: widget.model.backgroundColor,
- border: const UnderlineInputBorder(),
- focusedBorder: UnderlineInputBorder(
- borderSide: BorderSide(
- color: widget.model.backgroundColor,
- width: 2.0,
- style: BorderStyle.solid)),
- hintText: 'Add title and time',
- ),
- ),
- ),
- ListTile(
- leading: Container(
- width: 30,
- alignment: Alignment.centerRight,
- child: Icon(
- Icons.access_time,
- size: 20,
- color: defaultColor,
- )),
- title: _isAllDay
- ? Row(
- crossAxisAlignment: CrossAxisAlignment.center,
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- mainAxisSize: MainAxisSize.min,
- children: [
- _startDatePicker,
- const Text('-'),
- _endDatePicker,
- const Text(''),
- const Text(''),
- ])
- : Row(
- crossAxisAlignment: CrossAxisAlignment.center,
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- mainAxisSize: MainAxisSize.min,
- children: [
- _startDatePicker,
- _startTimePicker,
- const Text('-'),
- _endTimePicker,
- _endDatePicker,
- ]),
- ),
- ListTile(
- leading: Container(
- width: 30,
- alignment: Alignment.centerRight,
- child: Icon(
- Icons.location_on,
- color: defaultColor,
- size: 20,
- )),
- title: TextField(
- cursorColor: widget.model.backgroundColor,
- controller: TextEditingController(text: _location),
- onChanged: (String value) {
- _location = value;
- },
- keyboardType: TextInputType.multiline,
- maxLines: null,
- style: TextStyle(
- fontSize: 15,
- color: defaultTextColor,
- ),
- decoration: const InputDecoration(
- filled: true,
- isDense: true,
- contentPadding: EdgeInsets.fromLTRB(5, 10, 10, 10),
- fillColor: Colors.transparent,
- border: InputBorder.none,
- hintText: 'Add location',
- ),
- ),
- ),
- ListTile(
- leading: Container(
- width: 30,
- alignment: Alignment.centerRight,
- child: Icon(
- Icons.subject,
- size: 20,
- color: defaultColor,
- )),
- title: TextField(
- controller: TextEditingController(text: _notes),
- onChanged: (String value) {
- _notes = value;
- },
- keyboardType: TextInputType.multiline,
- maxLines: widget.model.isWeb ? 1 : null,
- style: TextStyle(
- fontSize: 15,
- color: defaultTextColor,
- ),
- decoration: const InputDecoration(
- filled: true,
- isDense: true,
- contentPadding: EdgeInsets.fromLTRB(5, 10, 10, 10),
- fillColor: Colors.transparent,
- border: InputBorder.none,
- hintText: 'Add description',
- ),
- ),
- ),
- widget.events.resources == null || widget.events.resources.isEmpty
- ? Container()
- : ListTile(
- leading: Container(
- width: 30,
- alignment: Alignment.centerRight,
- child: Icon(
- Icons.people,
- color: defaultColor,
- size: 20,
- )),
- title: FlatButton(
- padding: const EdgeInsets.only(left: 5),
- child: Container(
- alignment: Alignment.topLeft,
- child: _getResourceEditor(TextStyle(
- fontSize: 15,
- color: defaultColor,
- fontWeight: FontWeight.w300)),
- ),
- onPressed: () {
- showDialog(
- context: context,
- barrierDismissible: true,
- builder: (BuildContext context) {
- return _ResourcePicker(
- _unSelectedResources,
- widget.model,
- onChanged: (_PickerChangedDetails details) {
- _resourceIds == null
- ? _resourceIds = [details.resourceId]
- : _resourceIds.add(details.resourceId);
- _selectedResources = _getSelectedResources(
- _resourceIds, widget.events.resources);
- _unSelectedResources = _getUnSelectedResources(
- _selectedResources, widget.events.resources);
- },
- );
- },
- ).then((dynamic value) => setState(() {
- /// update the color picker changes
- }));
- },
+ Container(
+ height: 50,
+ child: ListTile(
+ trailing: IconButton(
+ icon: Icon(Icons.close, color: defaultColor),
+ onPressed: () {
+ if (widget.newAppointment != null &&
+ widget.events.appointments
+ .contains(widget.newAppointment)) {
+ /// To remove the created appointment, when the appointment editor
+ /// closed without saving the appointment.
+ widget.events.appointments.removeAt(widget.events.appointments
+ .indexOf(widget.newAppointment));
+ widget.events.notifyListeners(CalendarDataSourceAction.remove,
+ []..add(widget.newAppointment));
+ }
+
+ Navigator.pop(context);
+ },
+ ),
+ )),
+ Container(
+ margin: EdgeInsets.only(bottom: 5),
+ height: 50,
+ child: ListTile(
+ leading: const Text(''),
+ title: TextField(
+ autofocus: true,
+ cursorColor: widget.model.backgroundColor,
+ controller: TextEditingController(text: _subject),
+ onChanged: (String value) {
+ _subject = value;
+ },
+ keyboardType: TextInputType.multiline,
+ maxLines: null,
+ style: TextStyle(
+ fontSize: 20,
+ color: defaultTextColor,
+ fontWeight: FontWeight.w400),
+ decoration: InputDecoration(
+ focusColor: widget.model.backgroundColor,
+ border: const UnderlineInputBorder(),
+ focusedBorder: UnderlineInputBorder(
+ borderSide: BorderSide(
+ color: widget.model.backgroundColor,
+ width: 2.0,
+ style: BorderStyle.solid)),
+ hintText: 'Add title and time',
),
),
- ListTile(
- leading: Container(
- width: 30,
- alignment: Alignment.centerRight,
- child: Icon(Icons.lens,
- size: 20, color: widget.colorCollection[_selectedColorIndex])),
- title: FlatButton(
- padding: const EdgeInsets.only(left: 5),
- child: Container(
- alignment: Alignment.centerLeft,
- child: Text(
- widget.colorNames[_selectedColorIndex],
- textAlign: TextAlign.start,
+ )),
+ Container(
+ margin: EdgeInsets.only(bottom: 5),
+ height: 50,
+ child: ListTile(
+ leading: Container(
+ width: 30,
+ alignment: Alignment.centerRight,
+ child: Icon(
+ Icons.access_time,
+ size: 20,
+ color: defaultColor,
+ )),
+ title: _isAllDay
+ ? Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ _startDatePicker,
+ const Text(' - '),
+ _endDatePicker,
+ const Text(''),
+ const Text(''),
+ ])
+ : Row(
+ crossAxisAlignment: CrossAxisAlignment.center,
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ mainAxisSize: MainAxisSize.min,
+ children: [
+ _startDatePicker,
+ _startTimePicker,
+ const Text(' - '),
+ _endTimePicker,
+ _endDatePicker,
+ ]),
+ )),
+ Container(
+ margin: EdgeInsets.only(bottom: 5),
+ height: 50,
+ child: ListTile(
+ leading: Container(
+ width: 30,
+ alignment: Alignment.centerRight,
+ child: Icon(
+ Icons.location_on,
+ color: defaultColor,
+ size: 20,
+ )),
+ title: TextField(
+ cursorColor: widget.model.backgroundColor,
+ controller: TextEditingController(text: _location),
+ onChanged: (String value) {
+ _location = value;
+ },
+ keyboardType: TextInputType.multiline,
+ maxLines: null,
+ style: TextStyle(
+ fontSize: 15,
+ color: defaultTextColor,
+ ),
+ decoration: const InputDecoration(
+ filled: true,
+ contentPadding: EdgeInsets.fromLTRB(5, 10, 10, 10),
+ fillColor: Colors.transparent,
+ border: InputBorder.none,
+ hintText: 'Add location',
+ ),
),
- ),
- onPressed: () {
- showDialog(
- context: context,
- barrierDismissible: true,
- builder: (BuildContext context) {
- return _CalendarColorPicker(
- widget.colorCollection,
- _selectedColorIndex,
- widget.colorNames,
- widget.model,
- onChanged: (_PickerChangedDetails details) {
- _selectedColorIndex = details.index;
- },
- );
+ )),
+ Container(
+ margin: EdgeInsets.only(bottom: 5),
+ height: 50,
+ child: ListTile(
+ leading: Container(
+ width: 30,
+ alignment: Alignment.centerRight,
+ child: Icon(
+ Icons.subject,
+ size: 20,
+ color: defaultColor,
+ )),
+ title: TextField(
+ controller: TextEditingController(text: _notes),
+ onChanged: (String value) {
+ _notes = value;
},
- ).then((dynamic value) => setState(() {
- /// update the color picker changes
- }));
- },
- ),
- ),
- ListTile(
- title: Row(
- mainAxisAlignment: MainAxisAlignment.end,
- crossAxisAlignment: CrossAxisAlignment.center,
- children: [
- Padding(
- padding: EdgeInsets.only(right: 10),
- child: FlatButton(
- child: const Text('MORE OPTIONS'),
+ keyboardType: TextInputType.multiline,
+ maxLines: widget.model.isWeb ? 1 : null,
+ style: TextStyle(
+ fontSize: 15,
+ color: defaultTextColor,
+ ),
+ decoration: const InputDecoration(
+ filled: true,
+ contentPadding: EdgeInsets.fromLTRB(5, 10, 10, 10),
+ fillColor: Colors.transparent,
+ border: InputBorder.none,
+ hintText: 'Add description',
+ ),
+ ),
+ )),
+ widget.events.resources == null || widget.events.resources.isEmpty
+ ? Container()
+ : Container(
+ margin: EdgeInsets.only(bottom: 5),
+ height: 50,
+ child: ListTile(
+ leading: Container(
+ width: 30,
+ alignment: Alignment.centerRight,
+ child: Icon(
+ Icons.people,
+ color: defaultColor,
+ size: 20,
+ )),
+ title: RawMaterialButton(
+ padding: const EdgeInsets.only(left: 5),
+ child: Container(
+ alignment: Alignment.centerLeft,
+ child: _getResourceEditor(TextStyle(
+ fontSize: 15,
+ color: defaultColor,
+ fontWeight: FontWeight.w300)),
+ ),
onPressed: () {
- Navigator.pop(context);
showDialog(
- context: context,
- builder: (BuildContext context) {
- final Appointment selectedApp = Appointment(
- startTime: _startDate,
- endTime: _endDate,
- color: widget.colorCollection[_selectedColorIndex],
- startTimeZone: _selectedTimeZoneIndex == 0
- ? ''
- : widget
- .timeZoneCollection[_selectedTimeZoneIndex],
- endTimeZone: _selectedTimeZoneIndex == 0
- ? ''
- : widget
- .timeZoneCollection[_selectedTimeZoneIndex],
- notes: _notes,
- isAllDay: _isAllDay,
- location: _location,
- subject: _subject == '' ? '(No title)' : _subject,
- resourceIds: _resourceIds,
- );
- return WillPopScope(
- onWillPop: () async {
- if (widget.newAppointment != null) {
- widget.events.appointments.removeAt(widget
- .events.appointments
- .indexOf(widget.newAppointment));
- widget.events.notifyListeners(
- CalendarDataSourceAction.remove,
- []
- ..add(widget.newAppointment));
- }
- return true;
- },
- child: AppointmentEditorWeb(
- widget.model,
- selectedApp,
- widget.colorCollection,
- widget.colorNames,
- widget.events,
- widget.timeZoneCollection,
- widget.appointment,
- widget.newAppointment),
- );
- });
+ context: context,
+ barrierDismissible: true,
+ builder: (BuildContext context) {
+ return _ResourcePicker(
+ _unSelectedResources,
+ widget.model,
+ onChanged: (_PickerChangedDetails details) {
+ _resourceIds == null
+ ? _resourceIds = [details.resourceId]
+ : _resourceIds.add(details.resourceId);
+ _selectedResources = _getSelectedResources(
+ _resourceIds, widget.events.resources);
+ _unSelectedResources = _getUnSelectedResources(
+ _selectedResources, widget.events.resources);
+ },
+ );
+ },
+ ).then((dynamic value) => setState(() {
+ /// update the color picker changes
+ }));
},
- )),
- Padding(
- padding: EdgeInsets.only(left: 10),
- child: FlatButton(
- shape: const RoundedRectangleBorder(
- borderRadius: BorderRadius.all(Radius.circular(4)),
),
- color: widget.model.backgroundColor,
- textColor: Colors.white,
- child: const Text('SAVE'),
- onPressed: () {
- if (widget.selectedAppointment != null ||
- widget.newAppointment != null) {
- if (widget.events.appointments.isNotEmpty &&
- widget.events.appointments
- .contains(widget.selectedAppointment)) {
- widget.events.appointments.removeAt(widget
- .events.appointments
- .indexOf(widget.selectedAppointment));
- widget.events.notifyListeners(
- CalendarDataSourceAction.remove,
- []..add(widget.selectedAppointment));
- }
- if (widget.appointment.isNotEmpty &&
- widget.appointment.contains(widget.newAppointment)) {
- widget.appointment.removeAt(
- widget.appointment.indexOf(widget.newAppointment));
- }
- }
+ )),
+ Container(
+ margin: EdgeInsets.only(bottom: 5),
+ height: 50,
+ child: ListTile(
+ leading: Container(
+ width: 30,
+ alignment: Alignment.centerRight,
+ child: Icon(Icons.lens,
+ size: 20,
+ color: widget.colorCollection[_selectedColorIndex])),
+ title: RawMaterialButton(
+ padding: const EdgeInsets.only(left: 5),
+ child: Container(
+ alignment: Alignment.centerLeft,
+ child: Text(
+ widget.colorNames[_selectedColorIndex],
+ style: TextStyle(
+ fontWeight: FontWeight.w500, color: defaultTextColor),
+ textAlign: TextAlign.start,
+ ),
+ ),
+ onPressed: () {
+ showDialog(
+ context: context,
+ barrierDismissible: true,
+ builder: (BuildContext context) {
+ return _CalendarColorPicker(
+ widget.colorCollection,
+ _selectedColorIndex,
+ widget.colorNames,
+ widget.model,
+ onChanged: (_PickerChangedDetails details) {
+ _selectedColorIndex = details.index;
+ },
+ );
+ },
+ ).then((dynamic value) => setState(() {
+ /// update the color picker changes
+ }));
+ },
+ ),
+ )),
+ Container(
+ height: 50,
+ child: ListTile(
+ title: Row(
+ mainAxisAlignment: MainAxisAlignment.end,
+ crossAxisAlignment: CrossAxisAlignment.center,
+ children: [
+ Padding(
+ padding: EdgeInsets.only(right: 10),
+ child: RawMaterialButton(
+ padding: EdgeInsets.symmetric(horizontal: 5),
+ child: Text(
+ 'MORE OPTIONS',
+ style: TextStyle(
+ fontWeight: FontWeight.w500,
+ color: defaultTextColor),
+ ),
+ onPressed: () {
+ Navigator.pop(context);
+ showDialog(
+ context: context,
+ builder: (BuildContext context) {
+ final Appointment selectedApp = Appointment(
+ startTime: _startDate,
+ endTime: _endDate,
+ color:
+ widget.colorCollection[_selectedColorIndex],
+ startTimeZone: _selectedTimeZoneIndex == 0
+ ? ''
+ : widget.timeZoneCollection[
+ _selectedTimeZoneIndex],
+ endTimeZone: _selectedTimeZoneIndex == 0
+ ? ''
+ : widget.timeZoneCollection[
+ _selectedTimeZoneIndex],
+ notes: _notes,
+ isAllDay: _isAllDay,
+ location: _location,
+ subject:
+ _subject == '' ? '(No title)' : _subject,
+ resourceIds: _resourceIds,
+ );
+ return WillPopScope(
+ onWillPop: () async {
+ if (widget.newAppointment != null) {
+ widget.events.appointments.removeAt(widget
+ .events.appointments
+ .indexOf(widget.newAppointment));
+ widget.events.notifyListeners(
+ CalendarDataSourceAction.remove,
+ []
+ ..add(widget.newAppointment));
+ }
+ return true;
+ },
+ child: AppointmentEditorWeb(
+ widget.model,
+ selectedApp,
+ widget.colorCollection,
+ widget.colorNames,
+ widget.events,
+ widget.timeZoneCollection,
+ widget.appointment,
+ widget.newAppointment),
+ );
+ });
+ },
+ )),
+ Padding(
+ padding: EdgeInsets.only(left: 10),
+ child: RawMaterialButton(
+ shape: const RoundedRectangleBorder(
+ borderRadius: BorderRadius.all(Radius.circular(4)),
+ ),
+ fillColor: widget.model.backgroundColor,
+ child: const Text(
+ 'SAVE',
+ style: TextStyle(
+ color: Colors.white, fontWeight: FontWeight.w500),
+ ),
+ onPressed: () {
+ if (widget.selectedAppointment != null ||
+ widget.newAppointment != null) {
+ if (widget.events.appointments.isNotEmpty &&
+ widget.events.appointments
+ .contains(widget.selectedAppointment)) {
+ widget.events.appointments.removeAt(widget
+ .events.appointments
+ .indexOf(widget.selectedAppointment));
+ widget.events.notifyListeners(
+ CalendarDataSourceAction.remove,
+ []..add(widget.selectedAppointment));
+ }
+ if (widget.appointment.isNotEmpty &&
+ widget.appointment
+ .contains(widget.newAppointment)) {
+ widget.appointment.removeAt(widget.appointment
+ .indexOf(widget.newAppointment));
+ }
+ }
- widget.appointment.add(Appointment(
- startTime: _startDate,
- endTime: _endDate,
- color: widget.colorCollection[_selectedColorIndex],
- startTimeZone: _selectedTimeZoneIndex == 0
- ? ''
- : widget.timeZoneCollection[_selectedTimeZoneIndex],
- endTimeZone: _selectedTimeZoneIndex == 0
- ? ''
- : widget.timeZoneCollection[_selectedTimeZoneIndex],
- notes: _notes,
- isAllDay: _isAllDay,
- location: _location,
- subject: _subject == '' ? '(No title)' : _subject,
- resourceIds: _resourceIds,
- ));
-
- widget.events.appointments.add(widget.appointment[0]);
-
- widget.events.notifyListeners(
- CalendarDataSourceAction.add, widget.appointment);
+ widget.appointment.add(Appointment(
+ startTime: _startDate,
+ endTime: _endDate,
+ color: widget.colorCollection[_selectedColorIndex],
+ startTimeZone: _selectedTimeZoneIndex == 0
+ ? ''
+ : widget.timeZoneCollection[_selectedTimeZoneIndex],
+ endTimeZone: _selectedTimeZoneIndex == 0
+ ? ''
+ : widget.timeZoneCollection[_selectedTimeZoneIndex],
+ notes: _notes,
+ isAllDay: _isAllDay,
+ location: _location,
+ subject: _subject == '' ? '(No title)' : _subject,
+ resourceIds: _resourceIds,
+ ));
- Navigator.pop(context);
- },
- ),
+ widget.events.appointments.add(widget.appointment[0]);
+
+ widget.events.notifyListeners(
+ CalendarDataSourceAction.add, widget.appointment);
+
+ Navigator.pop(context);
+ },
+ ),
+ ),
+ ],
),
- ],
- ),
- ),
+ )),
]);
}
@@ -1676,318 +1739,260 @@ class _AppointmentEditorWebState extends State {
: Colors.black87;
return Dialog(
- shape: const RoundedRectangleBorder(
- borderRadius: BorderRadius.all(Radius.circular(4))),
+ insetPadding: EdgeInsets.all(20),
child: Container(
- color: widget.model.themeData != null &&
- widget.model.themeData.brightness == Brightness.dark
- ? Colors.grey[850]
- : Colors.white,
width: 600,
+ decoration: BoxDecoration(
+ shape: BoxShape.rectangle,
+ borderRadius: BorderRadius.all(Radius.circular(4)),
+ color: widget.model.themeData != null &&
+ widget.model.themeData.brightness == Brightness.dark
+ ? Colors.grey[850]
+ : Colors.white,
+ ),
height: widget.events.resources != null &&
widget.events.resources.isNotEmpty
- ? _isTimeZoneEnabled ? 560 : 500
- : _isTimeZoneEnabled ? 490 : 430,
+ ? _isTimeZoneEnabled
+ ? 560
+ : 500
+ : _isTimeZoneEnabled
+ ? 480
+ : 420,
+ alignment: Alignment.center,
child: ListView(
padding: const EdgeInsets.all(0.0),
children: [
- ListTile(
- title: Text(
- widget.selectedAppointment != null &&
- widget.newAppointment == null
- ? 'Edit appointment'
- : 'New appointment',
- style: TextStyle(
- fontSize: 18,
- fontWeight: FontWeight.w400,
- color: defaultTextColor),
- ),
- trailing: IconButton(
- icon: Icon(Icons.close, color: defaultColor),
- onPressed: () {
- if (widget.newAppointment != null &&
- widget.events.appointments
- .contains(widget.newAppointment)) {
- /// To remove the created appointment when the pop-up closed
- /// without saving the appointment.
- widget.events.appointments.removeAt(widget
- .events.appointments
- .indexOf(widget.newAppointment));
- widget.events.notifyListeners(
- CalendarDataSourceAction.remove,
- []..add(widget.newAppointment));
- }
+ Container(
+ margin: EdgeInsets.symmetric(vertical: 3),
+ child: ListTile(
+ title: Text(
+ widget.selectedAppointment != null &&
+ widget.newAppointment == null
+ ? 'Edit appointment'
+ : 'New appointment',
+ style: TextStyle(
+ fontSize: 18,
+ fontWeight: FontWeight.w400,
+ color: defaultTextColor),
+ ),
+ trailing: IconButton(
+ icon: Icon(Icons.close, color: defaultColor),
+ onPressed: () {
+ if (widget.newAppointment != null &&
+ widget.events.appointments
+ .contains(widget.newAppointment)) {
+ /// To remove the created appointment when the pop-up closed
+ /// without saving the appointment.
+ widget.events.appointments.removeAt(widget
+ .events.appointments
+ .indexOf(widget.newAppointment));
+ widget.events.notifyListeners(
+ CalendarDataSourceAction.remove,
+ []..add(widget.newAppointment));
+ }
- Navigator.pop(context);
- },
- ),
- ),
- ListTile(
- title: Row(
- mainAxisSize: MainAxisSize.max,
- mainAxisAlignment: MainAxisAlignment.spaceAround,
- crossAxisAlignment: CrossAxisAlignment.center,
- children: [
- Expanded(
- flex: 4,
- child: Padding(
- padding: const EdgeInsets.only(
- left: 5, right: 5, top: 2, bottom: 2),
- child: Column(
- mainAxisSize: MainAxisSize.min,
- mainAxisAlignment: MainAxisAlignment.start,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text(
- 'Title',
- style: TextStyle(
- fontSize: 12,
- color: defaultColor,
- fontWeight: FontWeight.w300),
- textAlign: TextAlign.start,
+ Navigator.pop(context);
+ },
+ ),
+ )),
+ Container(
+ margin: EdgeInsets.symmetric(vertical: 3),
+ child: ListTile(
+ title: Row(
+ mainAxisSize: MainAxisSize.max,
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ crossAxisAlignment: CrossAxisAlignment.center,
+ children: [
+ Expanded(
+ flex: 4,
+ child: Padding(
+ padding: const EdgeInsets.only(
+ left: 5, right: 5, top: 2, bottom: 2),
+ child: Column(
+ mainAxisSize: MainAxisSize.min,
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(
+ 'Title',
+ style: TextStyle(
+ fontSize: 12,
+ color: defaultColor,
+ fontWeight: FontWeight.w300),
+ textAlign: TextAlign.start,
+ ),
+ TextField(
+ autofocus: true,
+ cursorColor: widget.model.backgroundColor,
+ controller:
+ TextEditingController(text: _subject),
+ onChanged: (String value) {
+ _subject = value;
+ },
+ keyboardType: TextInputType.multiline,
+ maxLines: null,
+ style: TextStyle(
+ fontSize: 13,
+ color: defaultTextColor,
+ fontWeight: FontWeight.w400),
+ decoration: InputDecoration(
+ isDense: true,
+ focusColor: widget.model.backgroundColor,
+ border: const UnderlineInputBorder(),
+ focusedBorder: UnderlineInputBorder(
+ borderSide: BorderSide(
+ color: widget.model.backgroundColor,
+ width: 2.0,
+ style: BorderStyle.solid)),
+ ),
+ ),
+ ],
),
- TextField(
- autofocus: true,
- cursorColor: widget.model.backgroundColor,
- controller: TextEditingController(text: _subject),
- onChanged: (String value) {
- _subject = value;
- },
- keyboardType: TextInputType.multiline,
- maxLines: null,
- style: TextStyle(
- fontSize: 13,
- color: defaultTextColor,
- fontWeight: FontWeight.w400),
- decoration: InputDecoration(
- isDense: true,
- focusColor: widget.model.backgroundColor,
- border: const UnderlineInputBorder(),
- focusedBorder: UnderlineInputBorder(
- borderSide: BorderSide(
- color: widget.model.backgroundColor,
- width: 2.0,
- style: BorderStyle.solid)),
+ )),
+ Expanded(
+ flex: 4,
+ child: Padding(
+ padding: const EdgeInsets.only(
+ left: 5, right: 5, top: 2, bottom: 2),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(
+ 'Location',
+ style: TextStyle(
+ fontSize: 12,
+ color: defaultColor,
+ fontWeight: FontWeight.w300),
+ textAlign: TextAlign.start,
),
- ),
- ],
- ),
- )),
- Expanded(
- flex: 4,
- child: Padding(
- padding: const EdgeInsets.only(
- left: 5, right: 5, top: 2, bottom: 2),
- child: Column(
- mainAxisAlignment: MainAxisAlignment.start,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text(
- 'Location',
- style: TextStyle(
- fontSize: 12,
- color: defaultColor,
- fontWeight: FontWeight.w300),
- textAlign: TextAlign.start,
- ),
- TextField(
- controller: TextEditingController(text: _location),
- cursorColor: widget.model.backgroundColor,
- onChanged: (String value) {
- _location = value;
- },
- keyboardType: TextInputType.multiline,
- maxLines: null,
- style: TextStyle(
- fontSize: 13,
- color: defaultTextColor,
- fontWeight: FontWeight.w400),
- decoration: InputDecoration(
- focusColor: widget.model.backgroundColor,
- isDense: true,
- border: const UnderlineInputBorder(),
- focusedBorder: UnderlineInputBorder(
- borderSide: BorderSide(
- color: widget.model.backgroundColor,
- width: 2.0,
- style: BorderStyle.solid)),
- ),
- ),
- ],
- ),
- ),
- )
- ],
- )),
- ListTile(
- title: Row(
- mainAxisAlignment: MainAxisAlignment.spaceAround,
- mainAxisSize: MainAxisSize.max,
- crossAxisAlignment: CrossAxisAlignment.center,
- children: [
- Expanded(
- flex: 4,
- child: Padding(
- padding: const EdgeInsets.only(
- left: 5, right: 5, top: 5, bottom: 2),
- child: Column(
- mainAxisAlignment: MainAxisAlignment.start,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- Text(
- 'Start',
- style: TextStyle(
- fontSize: 12,
- color: defaultColor,
- fontWeight: FontWeight.w300),
- textAlign: TextAlign.start,
+ TextField(
+ controller:
+ TextEditingController(text: _location),
+ cursorColor: widget.model.backgroundColor,
+ onChanged: (String value) {
+ _location = value;
+ },
+ keyboardType: TextInputType.multiline,
+ maxLines: null,
+ style: TextStyle(
+ fontSize: 13,
+ color: defaultTextColor,
+ fontWeight: FontWeight.w400),
+ decoration: InputDecoration(
+ focusColor: widget.model.backgroundColor,
+ isDense: true,
+ border: const UnderlineInputBorder(),
+ focusedBorder: UnderlineInputBorder(
+ borderSide: BorderSide(
+ color: widget.model.backgroundColor,
+ width: 2.0,
+ style: BorderStyle.solid)),
+ ),
+ ),
+ ],
),
- TextField(
- readOnly: true,
- controller: TextEditingController(
- text: (_isAllDay
- ? DateFormat('dd/MM/yyyy')
- : DateFormat('dd/MM/yy h:mm a'))
- .format(_startDate)),
- onChanged: (String value) {
- _startDate = DateTime.parse(value);
- _startTime = TimeOfDay(
- hour: _startDate.hour,
- minute: _startDate.minute);
- },
- keyboardType: TextInputType.multiline,
- maxLines: null,
- style: TextStyle(
- fontSize: 13,
- color: defaultTextColor,
- fontWeight: FontWeight.w400),
- decoration: InputDecoration(
- isDense: true,
- suffix: Container(
- height: 20,
- child: Row(
- mainAxisSize: MainAxisSize.min,
- mainAxisAlignment: MainAxisAlignment.start,
- crossAxisAlignment: CrossAxisAlignment.end,
- children: [
- ButtonTheme(
- minWidth: 50.0,
- child: FlatButton(
- onPressed: () async {
- final DateTime date =
- await showDatePicker(
- context: context,
- initialDate: _startDate,
- firstDate: DateTime(1900),
- lastDate: DateTime(2100),
- builder:
- (BuildContext context,
- Widget child) {
- return Theme(
- data: ThemeData(
- brightness: widget
- .model
- .themeData
- .brightness,
- colorScheme:
- _getColorScheme(
- widget.model,
- true),
- accentColor: widget
- .model
- .backgroundColor,
- primaryColor: widget
- .model
- .backgroundColor),
- child: child,
- );
- });
-
- if (date != null &&
- date != _startDate) {
- setState(() {
- final Duration difference =
- _endDate
- .difference(_startDate);
- _startDate = DateTime(
- date.year,
- date.month,
- date.day,
- _startTime.hour,
- _startTime.minute,
- 0);
- _endDate =
- _startDate.add(difference);
- _endTime = TimeOfDay(
- hour: _endDate.hour,
- minute: _endDate.minute);
- });
- }
- },
- shape: const CircleBorder(),
- padding: const EdgeInsets.all(0.0),
- child: Icon(
- Icons.date_range,
- color: defaultColor,
- size: 20,
- ),
- )),
- _isAllDay
- ? Text('')
- : ButtonTheme(
+ ),
+ )
+ ],
+ ))),
+ Container(
+ margin: EdgeInsets.symmetric(vertical: 3),
+ child: ListTile(
+ title: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ mainAxisSize: MainAxisSize.max,
+ crossAxisAlignment: CrossAxisAlignment.center,
+ children: [
+ Expanded(
+ flex: 4,
+ child: Padding(
+ padding: const EdgeInsets.only(
+ left: 5, right: 5, top: 5, bottom: 2),
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ Text(
+ 'Start',
+ style: TextStyle(
+ fontSize: 12,
+ color: defaultColor,
+ fontWeight: FontWeight.w300),
+ textAlign: TextAlign.start,
+ ),
+ TextField(
+ readOnly: true,
+ controller: TextEditingController(
+ text: (_isAllDay
+ ? DateFormat('dd/MM/yyyy')
+ : DateFormat('dd/MM/yy h:mm a'))
+ .format(_startDate)),
+ onChanged: (String value) {
+ _startDate = DateTime.parse(value);
+ _startTime = TimeOfDay(
+ hour: _startDate.hour,
+ minute: _startDate.minute);
+ },
+ keyboardType: TextInputType.multiline,
+ maxLines: null,
+ style: TextStyle(
+ fontSize: 13,
+ color: defaultTextColor,
+ fontWeight: FontWeight.w400),
+ decoration: InputDecoration(
+ isDense: true,
+ suffix: Container(
+ height: 20,
+ child: Row(
+ mainAxisSize: MainAxisSize.min,
+ mainAxisAlignment: MainAxisAlignment.start,
+ crossAxisAlignment: CrossAxisAlignment.end,
+ children: [
+ ButtonTheme(
minWidth: 50.0,
child: FlatButton(
- child: Icon(
- Icons.access_time,
- color: defaultColor,
- size: 20,
- ),
- shape: const CircleBorder(),
- padding: const EdgeInsets.all(0),
onPressed: () async {
- final TimeOfDay time =
- await showTimePicker(
+ final DateTime date =
+ await showDatePicker(
context: context,
- initialTime: TimeOfDay(
- hour: _startTime.hour,
- minute: _startTime
- .minute),
+ initialDate: _startDate,
+ firstDate: DateTime(1900),
+ lastDate: DateTime(2100),
builder:
(BuildContext context,
Widget child) {
return Theme(
data: ThemeData(
- brightness: widget
- .model
- .themeData
- .brightness,
- colorScheme:
- _getColorScheme(
- widget
- .model,
- false),
- accentColor: widget
- .model
- .backgroundColor,
- primaryColor: widget
- .model
- .backgroundColor,
- ),
+ brightness: widget
+ .model
+ .themeData
+ .brightness,
+ colorScheme:
+ _getColorScheme(
+ widget
+ .model,
+ true),
+ accentColor: widget
+ .model
+ .backgroundColor,
+ primaryColor: widget
+ .model
+ .backgroundColor),
child: child,
);
});
- if (time != null &&
- time != _startTime) {
+ if (date != null &&
+ date != _startDate) {
setState(() {
- _startTime = time;
final Duration difference =
_endDate.difference(
_startDate);
_startDate = DateTime(
- _startDate.year,
- _startDate.month,
- _startDate.day,
+ date.year,
+ date.month,
+ date.day,
_startTime.hour,
_startTime.minute,
0);
@@ -1999,149 +2004,160 @@ class _AppointmentEditorWebState extends State {
});
}
},
- ))
- ],
+ shape: const CircleBorder(),
+ padding: const EdgeInsets.all(0.0),
+ child: Icon(
+ Icons.date_range,
+ color: defaultColor,
+ size: 20,
+ ),
+ )),
+ _isAllDay
+ ? Text('')
+ : ButtonTheme(
+ minWidth: 50.0,
+ child: FlatButton(
+ child: Icon(
+ Icons.access_time,
+ color: defaultColor,
+ size: 20,
+ ),
+ shape: const CircleBorder(),
+ padding:
+ const EdgeInsets.all(0),
+ onPressed: () async {
+ final TimeOfDay time =
+ await showTimePicker(
+ context: context,
+ initialTime: TimeOfDay(
+ hour: _startTime
+ .hour,
+ minute: _startTime
+ .minute),
+ builder: (BuildContext
+ context,
+ Widget child) {
+ return Theme(
+ data: ThemeData(
+ brightness: widget
+ .model
+ .themeData
+ .brightness,
+ colorScheme:
+ _getColorScheme(
+ widget
+ .model,
+ false),
+ accentColor: widget
+ .model
+ .backgroundColor,
+ primaryColor: widget
+ .model
+ .backgroundColor,
+ ),
+ child: child,
+ );
+ });
+
+ if (time != null &&
+ time != _startTime) {
+ setState(() {
+ _startTime = time;
+ final Duration
+ difference =
+ _endDate.difference(
+ _startDate);
+ _startDate = DateTime(
+ _startDate.year,
+ _startDate.month,
+ _startDate.day,
+ _startTime.hour,
+ _startTime.minute,
+ 0);
+ _endDate = _startDate
+ .add(difference);
+ _endTime = TimeOfDay(
+ hour: _endDate.hour,
+ minute:
+ _endDate.minute);
+ });
+ }
+ },
+ ))
+ ],
+ ),
+ ),
+ focusColor: widget.model.backgroundColor,
+ border: const UnderlineInputBorder(),
+ focusedBorder: UnderlineInputBorder(
+ borderSide: BorderSide(
+ color: widget.model.backgroundColor,
+ width: 2.0,
+ style: BorderStyle.solid)),
),
),
- focusColor: widget.model.backgroundColor,
- border: const UnderlineInputBorder(),
- focusedBorder: UnderlineInputBorder(
- borderSide: BorderSide(
- color: widget.model.backgroundColor,
- width: 2.0,
- style: BorderStyle.solid)),
- ),
+ ],
),
- ],
+ ),
),
- ),
- ),
- Expanded(
- flex: 4,
- child: Padding(
- padding: const EdgeInsets.only(
- left: 5, right: 5, top: 5, bottom: 2),
- child: Column(
- mainAxisAlignment: MainAxisAlignment.start,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: 
- 
- 
+This project is a starting point for a Flutter application.
+A few resources to get you started if this is your first Flutter project:
-## Table of contents
-- [Requirements to run the demo](#requirements-to-run-the-demo)
-- [Repository structure](#repository-structure)
-- [Widgets catalog](#widgets-catalog)
-- [How to run this project](#how-to-run-this-project)
-- [Get the demo application](#get-the-demo-application)
-- [Useful links](#useful-links)
-- [Support and feedback](#support-and-feedback)
-- [About Syncfusion](#about-syncfusion)
+- [Lab: Write your first Flutter app](https://flutter.dev/docs/get-started/codelab)
+- [Cookbook: Useful Flutter samples](https://flutter.dev/docs/cookbook)
-
-## Requirements to run the demo ##
-
-* [Flutter SDK](https://flutter.dev/docs/get-started/install)
-* [Android studio](https://developer.android.com/studio/install) or [Visual studio code](https://code.visualstudio.com/download)
-* Install Flutter extension in Android studio or in [VS code](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)
-
-## Repository structure ##
-
-This repository contains sample browser project. Each widgets sample will be found inside the lib/samples folder. Run this project to see the demo samples of all the Flutter widgets in single application.
-
-## Widgets catalog ##
-
-| Samples | Package | Description |
-|---------|----------|-------------|
-| DATA VISUALIZATION |
-| [Cartesian Charts](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts) | [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) | Plot over 30 chart types ranging from line charts to financial charts. |
-| [Circular Charts](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/circular_charts) | [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) | Visualize the data using pie, doughnut, and radial bar charts. |
-| [Pyramid Chart](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/pyramid_charts) | [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) | Visualize the organized data using pyramid chart. |
-| [Funnel Chart](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/funnel_charts) | [syncfusion_flutter_charts](https://pub.dev/packages/syncfusion_flutter_charts) | Visualize the sequential data using funnel chart. |
-| [Radial Gauge](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/gauge) | [syncfusion_flutter_gauges](https://pub.dev/packages/syncfusion_flutter_gauges) | Visualize one or multiple measures on a circular scale with pointers and ranges. |
-| [Barcodes](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/barcodes) | [syncfusion_flutter_barcodes](https://pub.dev/packages/syncfusion_flutter_barcodes) | Generate and display data in machine-readable 1D and 2D barcodes. |
-| [Maps](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/maps) | [syncfusion_flutter_maps](https://pub.dev/packages/syncfusion_flutter_maps) | Easily visualize data over a geographical area. |
-| [Circular ProgressBar](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/progress_bar) | [syncfusion_flutter_gauges](https://pub.dev/packages/syncfusion_flutter_gauges) | Designed using Radial Gauge widget. Indicates the progress of a task with customizable visuals. |
-| GRIDS |
-| [DataGrid](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/datagrid) | [syncfusion_flutter_datagrid](https://pub.dev/packages/syncfusion_flutter_datagrid) | Displays large amounts of data with different data types in a tabular view |
-| CALENDAR |
-| [Event Calendar](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar) | [syncfusion_flutter_calendar](https://pub.dev/packages/syncfusion_flutter_calendar) | Allows you to easily visualize and schedule appointments. |
-| [Date Range Picker](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/date_picker) | [syncfusion_flutter_datepicker](https://pub.dev/packages/syncfusion_flutter_datepicker) | Allows to easily select dates or range of dates. |
-| VIEWER |
-| [PDF Viewer](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/pdf_viewer) | [syncfusion_flutter_pdfviewer](https://pub.dev/packages/syncfusion_flutter_pdfviewer) | View the PDF document seamlessly and efficiently |
-| FILE FORMATS |
-| [PDF](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/pdf) | [syncfusion_flutter_pdf](https://pub.dev/packages/syncfusion_flutter_pdf) | Create PDF document with text, images and tables. |
-| [XlsIO](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/xlsio) | [syncfusion_flutter_xlsio](https://pub.dev/packages/syncfusion_flutter_xlsio) | Create Excel documents with text, numbers, cell formatting, formulas, charts, images, and more. |
-| SLIDERS |
-| [Slider](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/slider) | [syncfusion_flutter_sliders](https://pub.dev/packages/syncfusion_flutter_sliders) | Select a date or numeric value. |
-| [Range Slider](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_slider) | [syncfusion_flutter_sliders](https://pub.dev/packages/syncfusion_flutter_sliders) | Select a date or numeric range. |
-| [Range Selector](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/sliders/range_selector) | [syncfusion_flutter_sliders](https://pub.dev/packages/syncfusion_flutter_sliders) | Visualize data and select a date or numeric range. |
-| SIGNATURE PAD |
-| [Signature Pad](https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/signature_pad) | [syncfusion_flutter_signaturepad](https://pub.dev/packages/syncfusion_flutter_signaturepad) | Captures the signature and save it as an image to sync across devices and documents. |
-
-## How to run this project ##
-
-**Step 1**
-
-Download or clone the [flutter-examples](https://github.com/syncfusion/flutter-examples) repository into your machine.
-
-**Step 2**
-
-Run the following command to get the required packages.
-
-```dart
-$ flutter pub get
-```
-
-**Step 3**
-
-Run your application either using `F5` or `Run > Start Debugging`.
-
-## Get the demo application ##
-
-Explore the full capabilities of our Flutter widgets on your device by installing our sample browser applications from the below app stores, and view samples code in GitHub.
-
-
-