diff --git a/images/calendar.png b/images/calendar.png new file mode 100644 index 00000000..2f9e5872 Binary files /dev/null and b/images/calendar.png differ diff --git a/images/dark_theme_gauge.png b/images/dark_theme_gauge.png new file mode 100644 index 00000000..7c274616 Binary files /dev/null and b/images/dark_theme_gauge.png differ diff --git a/images/image_nav_banner_white.png b/images/image_nav_banner_white.png deleted file mode 100755 index 4bd3748c..00000000 Binary files a/images/image_nav_banner_white.png and /dev/null differ diff --git a/lib/main.dart b/lib/main.dart index a53adabe..c861c9d8 100755 --- a/lib/main.dart +++ b/lib/main.dart @@ -1,9 +1,12 @@ import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/sample_browser.dart'; import 'package:syncfusion_flutter_core/core.dart'; -void main() { - // Register your license here +Future main() async { + WidgetsFlutterBinding.ensureInitialized(); + await updateControl(); + // Register your license here SyncfusionLicense.registerLicense(null); - return runApp(SampleBrowser()); + runApp(SampleBrowser()); } diff --git a/lib/model/helper.dart b/lib/model/helper.dart index 247d22ef..dfb0d971 100755 --- a/lib/model/helper.dart +++ b/lib/model/helper.dart @@ -1,1282 +1,251 @@ import 'package:flutter/material.dart'; -import 'package:flutter_examples/samples/chart/axis_features/axis_crossing/axis_crossing.dart'; -import 'package:flutter_examples/samples/chart/axis_features/handling_label_collision/handling_label_collision.dart'; -import 'package:flutter_examples/samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart'; -import 'package:flutter_examples/samples/chart/axis_features/opposed_axes/opposed_axes.dart'; -import 'package:flutter_examples/samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart'; -import 'package:flutter_examples/samples/chart/axis_types/category_types/default_category_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/category_types/indexed_category_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/category_types/label_placement.dart'; -import 'package:flutter_examples/samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart'; -import 'package:flutter_examples/samples/chart/axis_types/date_time_types/default_date_time_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/numeric_types/default_numeric_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/area_series/area_with_gradient.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/area_series/default_area_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/area_series/vertical_area_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/bar_with_track.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/default_bar_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/back_to_back_column.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/column_with_track.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/customized_column_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/default_column_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/line_series/customized_line_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/line_series/default_line_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/line_series/line_with_dashes.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/line_series/multi_colored_line.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/default_spline_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/spline_types.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/default_pie_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/pie_with_grouping.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/pie_with_various_radius.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/semi_pie_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/radialbar_series/customized_radialbar_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/live_update/live_update.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/live_update/vertical_live_chart.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/update_data_source/update_data_source.dart'; -import 'package:flutter_examples/samples/chart/funnel_charts/default_funnel_chart.dart'; -import 'package:flutter_examples/samples/chart/funnel_charts/funnel_with_legend.dart'; -import 'package:flutter_examples/samples/chart/funnel_charts/funnel_with_smart_labels.dart'; -import 'package:flutter_examples/samples/chart/home/axes_features_home.dart'; -import 'package:flutter_examples/samples/chart/home/axis_types.dart'; -import 'package:flutter_examples/samples/chart/home/cartesian_types.dart'; -import 'package:flutter_examples/samples/chart/home/circular_types.dart'; -import 'package:flutter_examples/samples/chart/home/dynamic_updates.dart'; -import 'package:flutter_examples/samples/chart/home/funnel_chart.dart'; -import 'package:flutter_examples/samples/chart/home/legend_home.dart'; -import 'package:flutter_examples/samples/chart/home/other_features.dart'; -import 'package:flutter_examples/samples/chart/home/pyramid_chart.dart'; -import 'package:flutter_examples/samples/chart/home/user_interaction.dart'; -import 'package:flutter_examples/samples/chart/legend/chart_with_customized_legend.dart'; -import 'package:flutter_examples/samples/chart/legend/chart_with_legend.dart'; -import 'package:flutter_examples/samples/chart/legend/legend_with_various_options.dart'; -import 'package:flutter_examples/samples/chart/pyramid_charts/default_pyramid_chart.dart'; -import 'package:flutter_examples/samples/chart/pyramid_charts/pyramid_with_legend.dart'; -import 'package:flutter_examples/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart'; -import 'package:flutter_examples/samples/chart/series_features/animation/series_animation.dart'; -import 'package:flutter_examples/samples/chart/series_features/animation/dynamic_animation.dart'; -import 'package:flutter_examples/samples/chart/series_features/annotation/chart_with_annotation.dart'; -import 'package:flutter_examples/samples/chart/series_features/annotation/chart_with_watermark.dart'; -import 'package:flutter_examples/samples/chart/series_features/data_label/default_datalabels.dart'; -import 'package:flutter_examples/samples/chart/series_features/empty_point/chart_with_empty_points.dart'; -import 'package:flutter_examples/samples/chart/series_features/marker/various_marker_shapes.dart'; -import 'package:flutter_examples/samples/chart/axis_features/plot_band/Plot_band_recurrence.dart'; -import 'package:flutter_examples/samples/chart/axis_features/plot_band/plot_band.dart'; -import 'package:flutter_examples/samples/chart/series_features/sorting/sorting_options.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/selection/selection_modes.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/tooltip/default_tooltip.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/trackball/chart_with_trackball.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/zooming_panning/pinch_zooming.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/zooming_panning/selection_zooming.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/zooming_panning/zooming_with_custom_buttons.dart'; -import 'package:flutter_examples/samples/chart/home/radial_gauge.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/default_gauge_view.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/multiple_axis.dart'; -import 'package:flutter_examples/samples/gauge/ranges/range_thickness.dart'; -import 'package:flutter_examples/samples/gauge/ranges/range_dataLabel.dart'; -import 'package:flutter_examples/samples/gauge/pointers/multiple_ranges.dart'; -import 'package:flutter_examples/samples/gauge/showcase/gauge_overview.dart'; -import 'package:flutter_examples/samples/gauge/showcase/clock_sample.dart'; -import 'package:flutter_examples/samples/gauge/showcase/distance_tracker.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_bounceout.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_easeanimation.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_easeincirc.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_linearanimation.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_elasticout.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_slowmiddle.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_easeout.dart'; -import 'package:flutter_examples/samples/gauge/ranges/multiple_ranges.dart'; -import 'package:flutter_examples/samples/gauge/pointers/multiple_needle.dart'; -import 'package:flutter_examples/samples/gauge/pointers/radial_marker.dart'; -import 'package:flutter_examples/samples/gauge/pointers/text_pointer.dart'; -import 'package:flutter_examples/samples/gauge/annotation/image_annotation.dart'; -import 'package:flutter_examples/samples/gauge/annotation/text_annotation.dart'; -import 'package:flutter_examples/samples/gauge/annotation/direction_compass.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/radiallabel_customization.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/tick_customization.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/non_linearlabel.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/custom_labels.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/range_colors.dart'; -import 'package:flutter_examples/samples/gauge/pointer_interaction/radial_pointerdragging.dart'; +import 'package:flutter_examples/model/view.dart'; +import 'package:flutter_examples/widgets/flutter_backdrop.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:url_launcher/url_launcher.dart'; import 'model.dart'; -void onTapControlItem( - BuildContext context, SampleListModel model, int position) { - final SampleList sample = model.controlList[position]; +void onTapControlItem(BuildContext context, SampleModel model, int position) { model.selectedIndex = position; - if (sample.title == 'Cartesian Charts') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const CartesianTypes())); - } - if (sample.title == 'Axis Types') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const AxisTypes())); - } - if (sample.title == 'Axis Features') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const AxesFeatures())); - } - if (sample.title == 'Circular Charts') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const CircularTypes())); - } - if (sample.title == 'Radial Gauge') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const RadialGaugeExamples())); - } - if (sample.title == 'Pyramid Chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const PyramidFeatures())); - } - if (sample.title == 'Funnel Chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const FunnelCharts())); - } - if (sample.title == 'Series Features') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const SeriesFeatures())); - } - if (sample.title == 'Legend') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const LegendFeatures())); - } - if (sample.title == 'User Interactions') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const InteractionTypes())); - } - if (sample.title == 'Dynamic Updates') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => const DynamicUpdates())); - } + Navigator.push( + context, + MaterialPageRoute( + builder: (BuildContext context) => const LayoutPage())); } -class PyramidType { +void onTapSampleItem(BuildContext context, SubItem sample, + [SampleModel model]) { + model.sampleWidget[sample.key][1].sample = sample; + Navigator.push( + context, + MaterialPageRoute( + builder: (BuildContext context) => + model.sampleWidget[sample.key][1])); } -void onTapSampleItem(BuildContext context, SubItemList sample) { - //......................Cartesian Charts...............................// - if (sample.category == 'Line') { - if (sample.title == 'Default line chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => LineDefault(sample))); - } else if (sample.title == 'Line with dashes') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => LineDashed(sample))); - } else if (sample.title == 'Customized line chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => CustomizedLine(sample))); - } else if (sample.title == 'Multi-colored line') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => LineMultiColor(sample))); - } - } else if (sample.category == 'Column') { - if (sample.title == 'Default column chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ColumnDefault(sample))); - } else if (sample.title == 'Column with rounded corners') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ColumnRounded(sample))); - } else if (sample.title == 'Back to back column') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ColumnBack(sample))); - } else if (sample.title == 'Column with track') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ColumnTracker(sample))); - } else if (sample.title == 'Column width and spacing') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ColumnSpacing(sample))); - } else if (sample.title == 'Customized column chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ColumnVertical(sample))); - } - } else if (sample.category == 'Spline') { - if (sample.title == 'Default spline chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => SplineDefault(sample))); - } else if (sample.title == 'Spline with dashes') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => SplineDashed(sample))); - } else if (sample.title == 'Spline types') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => SplineTypes(sample))); - } else if (sample.title == 'Vertical spline chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => SplineVertical(sample))); - } else if (sample.title == 'Customized spline chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => SplineCustomization(sample))); - } - } else if (sample.category == 'Area') { - if (sample.title == 'Default area chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AreaDefault(sample))); - } else if (sample.title == 'Area with gradient') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AreaGradient(sample))); - } else if (sample.title == 'Area with empty points') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AreaEmpty(sample))); - } else if (sample.title == 'Vertical area chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AreaVertical(sample))); - } - } else if (sample.category == 'Bar') { - if (sample.title == 'Default bar chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BarDefault(sample))); - } else if (sample.title == 'Bar with rounded corners') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BarRounded(sample))); - } else if (sample.title == 'Bar width and spacing') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BarSpacing(sample))); - } else if (sample.title == 'Bar with track') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BarTracker(sample))); - } else if (sample.title == 'Customized bar chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BarCustomization(sample))); - } - } else if (sample.category == 'Bubble') { - if (sample.title == 'Default bubble chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BubbleDefault(sample))); - } else if (sample.title == 'Bubble with various colors') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BubblePointColor(sample))); - } else if (sample.title == 'Bubble filled with gradient') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BubbleGradient(sample))); - } else if (sample.title == 'Bubble with multiple series') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => BubbleMultiSeries(sample))); - } - } else if (sample.category == 'Scatter') { - if (sample.title == 'Default scatter chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ScatterDefault(sample))); - } else if (sample.title == 'Scatter with various shapes') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ScatterShapes(sample))); - } - } else if (sample.category == 'Step Line') { - if (sample.title == 'Default step line chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => StepLineDefault(sample))); - } else if (sample.title == 'Step line with dashes') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => StepLineDashed(sample))); - } else if (sample.title == 'Vertical step line chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => StepLineVertical(sample))); - } - } else if (sample.category == 'Range Column') { - if (sample.title == 'Default range column chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RangeColumnDefault(sample))); - } else if (sample.title == 'Transposed range column') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RangeBarChart(sample))); - } else if (sample.title == 'Range column with track') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RangeColumnWithTrack(sample))); - } - } - else if (sample.category == 'Stacked Charts') { - if (sample.title == 'Stacked bar chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => StackedBarChart(sample))); - } else if (sample.title == 'Stacked column chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => StackedColumnChart(sample))); - } - else if (sample.title == 'Stacked area chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => StackedAreaChart(sample))); - } else if (sample.title == 'Stacked line chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => StackedLineChart(sample))); - } - } - //......................Cartesian Charts End...............................// - - //......................Axis Types...............................// - - else if (sample.category == 'Numeric') { - if (sample.title == 'Default numeric axis') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => NumericDefault(sample))); - } else if (sample.title == 'Numeric axis with label format') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => NumericLabel(sample))); - } else if (sample.title == 'Inversed numeric axis') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => NumericInverse(sample))); - } - } else if (sample.category == 'Category') { - if (sample.title == 'Default category axis') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => CategoryDefault(sample))); - } else if (sample.title == 'Arranged by index') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => CategoryIndexed(sample))); - } else if (sample.title == 'Label placement') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => CategoryTicks(sample))); - } - } else if (sample.category == 'Date time') { - if (sample.title == 'Default Date time axis') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DateTimeDefault(sample))); - } else if (sample.title == 'Date time axis with label format') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DateTimeLabel(sample))); - } - } else if (sample.category == 'Logarithmic') { - if (sample.title == 'Default logarithmic axis') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - LogarithmicAxisDefault(sample))); - } - else if (sample.title == 'Inversed logarithmic axis') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - LogarithmicAxisInversed(sample))); - } - } else if (sample.category == 'Axis Features') { - if (sample.title == 'Opposed axes') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => NumericOpposed(sample))); - } else if (sample.title == 'Multiple axis chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => MultipleAxis(sample))); - } else if (sample.title == 'Handling labels collision') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => LabelAction(sample))); - } else if (sample.title == 'Edge label placement') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => EdgeLabel(sample))); - } else if (sample.title == 'Axis crossing') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AxisCrossing(sample))); - } - } - - //......................End Axis Types...............................// - - //......................Circular Types...............................// - - else if (sample.category == 'Pie') { - if (sample.title == 'Default pie chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PieDefault(sample))); - } else if (sample.title == 'Pie with various radius') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PieRadius(sample))); - } else if (sample.title == 'Semi-pie chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PieSemi(sample))); - } else if (sample.title == 'Pie with grouping') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PieGrouping(sample))); - } else if (sample.title == 'Pie with smart labels') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PieSmartLabels(sample))); - } - } else if (sample.category == 'Doughnut') { - if (sample.title == 'Default doughnut chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DoughnutDefault(sample))); - } else if (sample.title == 'Semi-doughnut chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DoughnutSemi(sample))); - } else if (sample.title == 'Doughnut with rounded corners') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DoughnutRounded(sample))); - } else if (sample.title == 'Doughnut with color mapping') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - DoughnutCustomization(sample))); - } else if (sample.title == 'Doughnut with center elevation') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DoughnutElevation(sample))); - } - } else if (sample.category == 'Radial Bar') { - if (sample.title == 'Default radial bar chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialBarDefault(sample))); - } else if (sample.title == 'Radial bar with legend') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialBarAngle(sample))); - } else if (sample.title == 'Customized radial bar chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialBarCustomized(sample))); - } - } - - //......................End Circular Types...............................// - - //......................Triangular Types...............................// - else if (sample.category == 'Pyramid') { - if (sample.title == 'Default pyramid chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PyramidDefault(sample))); - } else if (sample.title == 'Pyramid with smart labels') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PyramidSmartLabels(sample))); - } else if (sample.title == 'Pyramid with legend') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PyramidLegend(sample))); - } - } else if (sample.category == 'Funnel') { - if (sample.title == 'Default funnel chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => FunnelDefault(sample))); - } else if (sample.title == 'Funnel with smart labels') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => FunnelSmartLabels(sample))); - } else if (sample.title == 'Funnel with legend') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => FunnelLegend(sample))); - } - } - - //......................End Triangular Types..................................// - - //......................Dynamic Updates..................................// - - else if (sample.category == 'Live Update') { - if (sample.title == 'Live update') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => LiveUpdate(sample))); - } else if (sample.title == 'Vertical live chart') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - VerticalLineLiveUpdate(sample))); - } - } else if (sample.category == 'Add/Remove Data') { - if (sample.title == 'Add/remove points') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AddDataPoints(sample))); - } else if (sample.title == 'Add/remove series') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AddSeries(sample))); - } - } - if (sample.category == 'Update Data Source') { - if (sample.title == 'Update data source') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => UpdateDataSource(sample))); - } - } - - //......................End Dynamic Updates................................// - - //......................Series Features......................................// - - else if (sample.category == 'Legend') { - if (sample.title == 'Chart with legend') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => LegendDefault(sample))); - } else if (sample.title == 'Chart with customized legend') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => LegendCustomized(sample))); - } else if (sample.title == 'Legend with various options') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => LegendOptions(sample))); - } - } else if (sample.category == 'Marker') { - if (sample.title == 'Various marker shapes') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => MarkerDefault(sample))); - } - } else if (sample.category == 'Data Label') { - if (sample.title == 'Default data labels') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DataLabelDefault(sample))); - } - } else if (sample.category == 'Empty Points') { - if (sample.title == 'Chart with empty points') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => EmptyPoints(sample))); - } - } else if (sample.category == 'Annotation') { - if (sample.title == 'Chart with annotation') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AnnotationWatermark(sample))); - } - if (sample.title == 'Chart with watermark') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AnnotationDefault(sample))); - } - } else if (sample.category == 'Sorting') { - if (sample.title == 'Sorting options') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => SortingDefault(sample))); - } - } else if (sample.category == 'Axis Features') { - if (sample.title == 'Plot band') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PlotBandDefault(sample))); - } else if (sample.title == 'Plot band recurrence') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => PlotBandRecurrence(sample))); - } - } else if (sample.category == 'Animation') { - if (sample.title == 'Series animation') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => AnimationDefault(sample))); - } - if (sample.title == 'Dynamic update') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - CartesianDynamicAnimation(sample))); - } - } - - //......................End Series Features......................................// - - //......................User Interactions......................................// - - else if (sample.category == 'Tooltip') { - if (sample.title == 'Default tooltip') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DefaultTooltip(sample))); - } - } else if (sample.category == 'Zooming and Panning') { - if (sample.title == 'Pinch zooming') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DefaultPanning(sample))); - } else if (sample.title == 'Selection zooming') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DefaultZooming(sample))); - } else if (sample.title == 'Zooming with custom buttons') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ButtonZooming(sample))); - } - } else if (sample.category == 'Crosshair') { - if (sample.title == 'Chart with crosshair') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DefaultCrossHair(sample))); - } - } else if (sample.category == 'Trackball') { - if (sample.title == 'Chart with trackball') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DefaultTrackball(sample))); - } - } else if (sample.category == 'Selection') { - if (sample.title == 'Selection modes') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => DefaultSelection(sample))); - } - } +class BackPanel extends StatefulWidget { + //ignore:prefer_const_constructors_in_immutables + BackPanel(this.sample); + final SubItem sample; + @override + _BackPanelState createState() => _BackPanelState(sample); +} -//......................Radial Gauge...............................// - else if (sample.category == 'Showcase') { - if (sample.title == 'Clock') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => ClockExample(sample))); - } else if (sample.title == 'Temperature Monitor') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => GaugeOverviewExample(sample))); - } else if (sample.title == 'Distance Tracker') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - DistanceTrackerExample(sample))); - } - } else if (sample.category == 'Axis') { - if (sample.title == 'Default view') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialGaugeDefault(sample))); - } else if (sample.title == 'Multiple axis') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => MultipleAxisExample(sample))); - } else if (sample.title == 'Label Customization') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialLabelCustomization(sample))); - } else if (sample.title == 'Tick Customization') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialTickCustomization(sample))); - } else if (sample.title == 'Custom Scale') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialNonLinearLabel(sample))); - } else if (sample.title == 'Custom Labels') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => GaugeCustomLabels(sample))); - } else if (sample.title == 'Range colors for axis') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RangeColorForLabels(sample))); - } - } else if (sample.category == 'Pointers') { - if (sample.title == 'Range Pointer') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - MultipleRangePointerExample(sample))); - } else if (sample.title == 'Multiple Needle') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - MultipleNeedleExample(sample))); - } else if (sample.title == 'Marker Pointer') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialMarkerExample(sample))); - } else if (sample.title == 'Text Pointer') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialTextPointer(sample))); - } - } else if (sample.category == 'Range') { - if (sample.title == 'Multiple Ranges') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - MultipleRangesExample(sample))); - } else if (sample.title == 'Range Label') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RangeDataLabelExample(sample))); - } else if (sample.title == 'Range Thickness') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RangeThicknessExample(sample))); - } - } else if (sample.category == 'Gauge Annotation') { - if (sample.title == 'Temperature Tracker') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialImageAnnotation(sample))); - } else if (sample.title == 'Direction Compass') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialCompass(sample))); - } else if (sample.title == 'Text Annotation') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialTextAnnotation(sample))); - } - } else if (sample.category == 'Pointer Interaction') { - if (sample.title == 'Pointer Dragging') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialPointerDragging(sample))); - } - } else if (sample.category == 'Pointer Animation') { - if (sample.title == 'Bounce Out') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialBounceOutExample(sample))); - } else if (sample.title == 'Ease') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => RadialEaseExample(sample))); - } else if (sample.title == 'EaseInCirc') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialEaseInCircExample(sample))); - } else if (sample.title == 'Linear') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialLinearAnimation(sample))); - } else if (sample.title == 'ElasticOut') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialElasticOutAnimation(sample))); - } else if (sample.title == 'SlowMiddle') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialSlowMiddleAnimation(sample))); - } else if (sample.title == 'EaseOutBack') { - Navigator.push( - context, - MaterialPageRoute( - builder: (BuildContext context) => - RadialEaseOutAnimation(sample))); - } +class _BackPanelState extends State { + _BackPanelState(this.sample); + final SubItem sample; + final GlobalKey _globalKey = GlobalKey(); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + void _afterLayout(dynamic _) { + _getSizesAndPosition(); + } + + void _getSizesAndPosition() { + final RenderBox renderBoxRed = + _globalKey.currentContext?.findRenderObject(); + final Size size = renderBoxRed?.size; + final Offset position = renderBoxRed?.localToGlobal(Offset.zero); + const double appbarHeight = 60; + BackdropState.frontPanelHeight = position == null + ? 0 + : (position.dy + (size.height - appbarHeight) + 20); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Container( + color: model.backgroundColor, + child: Padding( + padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + sample.title, + textAlign: TextAlign.left, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 28.0, + color: Colors.white, + letterSpacing: 0.53), + ), + sample.description != null + ? Padding( + key: _globalKey, + padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), + child: Text( + sample.description, + style: const TextStyle( + fontWeight: FontWeight.normal, + fontSize: 15.0, + color: Colors.white, + letterSpacing: 0.3, + height: 1.5), + ), + ) + : Container(), + ], + ), + ), + ); + }, + ); } } -String getStatus(List model) { - int newCount = 0; - int updateCount = 0; - for (int i = 0; i < model.length; i++) { - if (model.isNotEmpty && model[i].status != null) { - if (model[i].status == 'New') { - newCount++; - } else if (model[i].status == 'Updated') { - updateCount++; - } - } - } - return (newCount == model.length) - ? 'N' - : (newCount != 0 || updateCount != 0) ? 'U' : ''; +class FrontPanel extends StatefulWidget { + //ignore:prefer_const_constructors_in_immutables + FrontPanel(this.sampleList, this.sample, this.sourceLink, this.source); + final SubItem sampleList; + final dynamic sample; + final String sourceLink; + final String source; + + @override + _FrontPanelState createState() => + _FrontPanelState(sampleList, sample, sourceLink, source); } -List getTabs(SampleListModel model) { - final List tabs = []; - for (int i = 0; - i < model.controlList[model.selectedIndex].subItemList.length; - i++) { - if (model.controlList[model.selectedIndex].subItemList[i].isNotEmpty) { - final String str = - getStatus(model.controlList[model.selectedIndex].subItemList[i]); - tabs.add(Tab( - child: Row( - children: [ - Text(model - .controlList[model.selectedIndex].subItemList[i][0]?.category - .toString() + - (str != '' ? ' ' : '')), - Container( - height: 20, - width: 20, - decoration: BoxDecoration( - color: str == 'N' - ? const Color.fromRGBO(101, 193, 0, 1) - : str == 'U' - ? const Color.fromRGBO(245, 166, 35, 1) - : Colors.transparent, - shape: BoxShape.circle, +class _FrontPanelState extends State { + _FrontPanelState(this.sampleList, this.sample, this.sourceLink, this.source); + final SubItem sampleList; + final dynamic sample; + final String sourceLink; + final String source; + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: sample), ), - alignment: Alignment.center, - child: Text( - str, - style: const TextStyle(fontSize: 12), - ), - ), - ], - ))); - } + floatingActionButton: sourceLink == null + ? null + : Stack(children: [ + Align( + alignment: Alignment.bottomLeft, + child: Padding( + padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), + child: Container( + height: 50, + child: InkWell( + onTap: () => launch(sourceLink), + child: Row( + children: [ + Text('Source: ', + style: TextStyle( + fontSize: 16, color: model.textColor)), + Text(source, + style: TextStyle( + fontSize: 14, color: Colors.blue)), + ], + ), + ), + ), + ), + ) + ]), + ); + }); } - return tabs; } -List getCardViewChildren(SampleListModel model) { - final List tabChildren = []; - for (int i = 0; - i < model.controlList[model.selectedIndex].subItemList.length; - i++) { - tabChildren.add(ListView.builder( - cacheExtent: model - .controlList[model.selectedIndex].subItemList[i].length - .toDouble(), - addAutomaticKeepAlives: true, - itemCount: model.controlList[model.selectedIndex].subItemList[i].length, - itemBuilder: (BuildContext context, int position) { - return Container( - color: model.slidingPanelColor, - child: Padding( - padding: const EdgeInsets.all(5.0), - child: Column( - children: [ - Container( - child: Column( - crossAxisAlignment: CrossAxisAlignment.stretch, - mainAxisAlignment: MainAxisAlignment.spaceEvenly, - children: [ - Card( - elevation: 2, - color: model.cardThemeColor, - shape: RoundedRectangleBorder( - borderRadius: BorderRadius.circular(3.0), - ), - child: Column( - children: [ - InkWell( - splashColor: Colors.grey.withOpacity(0.4), - onTap: () { - Feedback.forLongPress(context); - onTapSampleItem( - context, - model.controlList[model.selectedIndex] - .subItemList[i][position]); - }, - child: Padding( - padding: - const EdgeInsets.fromLTRB(10, 5, 10, 5), - child: Row( - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - Text( - '${model.controlList[model.selectedIndex].subItemList[i][position].title}', - textAlign: TextAlign.left, - softWrap: true, - textScaleFactor: 1, - overflow: TextOverflow.fade, - style: TextStyle( - fontFamily: 'MontserratMedium', - fontSize: 16.0, - color: model.textColor, - letterSpacing: 0.2), - ), - Container( - child: Row( - children: [ - Container( - decoration: BoxDecoration( - color: model.controlList[model.selectedIndex].subItemList[i][position].status != null - ? (model.controlList[model.selectedIndex].subItemList[i][position].status == 'New' - ? const Color.fromRGBO( - 101, 193, 0, 1) - : const Color.fromRGBO( - 245, 166, 35, 1)) - : Colors.transparent, - shape: BoxShape.rectangle, - borderRadius: const BorderRadius.all( - Radius.circular(10.0))), - padding: const EdgeInsets.fromLTRB( - 6, 3, 6, 3), - child: Text( - model.controlList[model.selectedIndex].subItemList[i][position].status != null - ? model.controlList[model.selectedIndex].subItemList[i][position].status - : '', - style: const TextStyle(color: Colors.white))), - const Padding( - padding: - EdgeInsets.only(left: 15), - ), - Container( - height: 24, - width: 24, - color: Colors.transparent, - child: Padding( - padding: - const EdgeInsets.fromLTRB( - 5, 0, 5, 5), - child: Image.asset( - 'images/fullscreen.png', - fit: BoxFit.contain, - height: 20, - width: 20, - color: model.listIconColor), - ), - ), - ], - )), - ]), - ), - ), - InkWell( - onTap: () {}, - splashColor: Colors.grey.withOpacity(0.4), - child: Padding( - padding: - const EdgeInsets.fromLTRB(5, 5, 5, 5), - child: SizedBox( - width: double.infinity, - height: 230, - child: model - .controlList[model.selectedIndex] - .subItemList[i][position] - .previewWidget, - ), +ScopedModelDescendant getScopedModel( + dynamic sampleWidget, SubItem sample, + [Widget settingPanel, String sourceLink, String source]) { + final ValueNotifier frontPanelVisible = ValueNotifier(true); + return ScopedModelDescendant( + builder: (BuildContext context, _, SampleModel model) => SafeArea( + child: Backdrop( + toggleFrontLayer: + sample.description != null && sample.description != '', + needCloseButton: false, + panelVisible: frontPanelVisible, + sampleListModel: model, + appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, + appBarActions: (sample.description != null && + sample.description != '') + ? [ + (sample.codeLink != null && sample.codeLink != '') + ? Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), + child: Container( + height: 40, + width: 40, + child: IconButton( + icon: Image.asset(model.codeViewerIcon, + color: Colors.white), + onPressed: () { + launch(sample.codeLink); + }, ), ), - ], + ) + : Container(), + Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), + child: Container( + height: 40, + width: 40, + child: IconButton( + icon: Image.asset(model.informationIcon, + color: Colors.white), + onPressed: () { + if (frontPanelVisible.value) + frontPanelVisible.value = false; + else + frontPanelVisible.value = true; + }, ), ), - ], - ), - ), - ], - ), - ), - ); - })); - } - return tabChildren; -} - -///Below methods for calendar control - (to show the samples in tabview instead of tileview) -List getSecondaryTabBar(SampleListModel model) { - final List tabs = []; - for (int i = 0; - i < model.controlList[model.selectedIndex].subItemList.length; - i++) { - if (model.controlList[model.selectedIndex].subItemList[i].isNotEmpty) { - tabs.add(Container( - alignment: Alignment.center, - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList[i].length, - child: Scaffold( - appBar: PreferredSize( - child: AppBar( - backgroundColor: model.backgroundColor, - bottom: TabBar( - indicator: const UnderlineTabIndicator( - borderSide: BorderSide( - width: 3.0, color: Color.fromRGBO(252, 220, 0, 1)), ), - isScrollable: true, - tabs: getSecondaryTabs(model, i), - ), - ), - preferredSize: const Size.fromHeight(48.0), - ), - body: TabBarView(children: getTabViewChildren(model, i)))), - )); - } - } - return tabs; -} - -List getSecondaryTabs(SampleListModel model, int i) { - final List tabs = []; - for (int j = 0; - j < model.controlList[model.selectedIndex].subItemList[i].length; - j++) { - final String str = - getStatus(model.controlList[model.selectedIndex].subItemList[i]); - tabs.add(Tab( - child: Row( - children: [ - Text( - model.controlList[model.selectedIndex].subItemList[i][j].title + - (str != '' ? ' ' : ''), - ), - Container( - height: 20, - width: 20, - decoration: BoxDecoration( - color: str == 'N' - ? const Color.fromRGBO(101, 193, 0, 1) - : str == 'U' - ? const Color.fromRGBO(245, 166, 35, 1) - : Colors.transparent, - shape: BoxShape.circle, - ), - alignment: Alignment.center, - child: Text( - str, - style: const TextStyle(fontSize: 12), - ), - ), - ], - ))); - } - return tabs; + ] + : (sample.codeLink != null && sample.codeLink != '') + ? ([ + Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), + child: Container( + height: 40, + width: 40, + child: IconButton( + icon: Image.asset(model.codeViewerIcon, + color: Colors.white), + onPressed: () { + launch(sample.codeLink); + }, + ), + ), + ), + ]) + : null, + appBarTitle: AnimatedSwitcher( + duration: const Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: settingPanel ?? + FrontPanel(sample, sampleWidget, sourceLink, source), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + color: model.cardThemeColor, + borderRadius: const BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); } - -List getTabViewChildren(SampleListModel model, int i) { - final List tabs = []; - for (int j = 0; - j < model.controlList[model.selectedIndex].subItemList[i].length; - j++) { - tabs.add(Container( - child: model - .controlList[model.selectedIndex].subItemList[i][j].previewWidget)); - } - return tabs; -} \ No newline at end of file diff --git a/lib/model/model.dart b/lib/model/model.dart index efd993c7..dcd988e9 100755 --- a/lib/model/model.dart +++ b/lib/model/model.dart @@ -1,1278 +1,126 @@ +import 'dart:convert'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/samples/chart/axis_features/axis_crossing/axis_crossing.dart'; -import 'package:flutter_examples/samples/chart/axis_features/handling_label_collision/handling_label_collision.dart'; -import 'package:flutter_examples/samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart'; -import 'package:flutter_examples/samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart'; -import 'package:flutter_examples/samples/chart/axis_features/opposed_axes/opposed_axes.dart'; -import 'package:flutter_examples/samples/chart/axis_types/category_types/default_category_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/category_types/indexed_category_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/category_types/label_placement.dart'; -import 'package:flutter_examples/samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart'; -import 'package:flutter_examples/samples/chart/axis_types/date_time_types/default_date_time_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/numeric_types/default_numeric_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart'; -import 'package:flutter_examples/samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/area_series/area_with_gradient.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/area_series/default_area_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/area_series/vertical_area_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/bar_with_track.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/default_bar_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/back_to_back_column.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/column_with_track.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/customized_column_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/column_series/default_column_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/line_series/customized_line_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/line_series/default_line_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/line_series/line_with_dashes.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/line_series/multi_colored_line.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/default_spline_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/spline_types.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/default_pie_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/pie_with_grouping.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/pie_with_various_radius.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/pie_series/semi_pie_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/radialbar_series/customized_radialbar_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart'; -import 'package:flutter_examples/samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/live_update/live_update.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/live_update/vertical_live_chart.dart'; -import 'package:flutter_examples/samples/chart/dynamic_updates/update_data_source/update_data_source.dart'; -import 'package:flutter_examples/samples/chart/funnel_charts/default_funnel_chart.dart'; -import 'package:flutter_examples/samples/chart/funnel_charts/funnel_with_legend.dart'; -import 'package:flutter_examples/samples/chart/funnel_charts/funnel_with_smart_labels.dart'; -import 'package:flutter_examples/samples/chart/legend/chart_with_customized_legend.dart'; -import 'package:flutter_examples/samples/chart/legend/chart_with_legend.dart'; -import 'package:flutter_examples/samples/chart/legend/legend_with_various_options.dart'; -import 'package:flutter_examples/samples/chart/pyramid_charts/default_pyramid_chart.dart'; -import 'package:flutter_examples/samples/chart/pyramid_charts/pyramid_with_legend.dart'; -import 'package:flutter_examples/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart'; -import 'package:flutter_examples/samples/chart/series_features/animation/series_animation.dart'; -import 'package:flutter_examples/samples/chart/series_features/animation/dynamic_animation.dart'; -import 'package:flutter_examples/samples/chart/series_features/annotation/chart_with_annotation.dart'; -import 'package:flutter_examples/samples/chart/series_features/annotation/chart_with_watermark.dart'; -import 'package:flutter_examples/samples/chart/series_features/data_label/default_datalabels.dart'; -import 'package:flutter_examples/samples/chart/series_features/empty_point/chart_with_empty_points.dart'; -import 'package:flutter_examples/samples/chart/series_features/marker/various_marker_shapes.dart'; -import 'package:flutter_examples/samples/chart/axis_features/plot_band/Plot_band_recurrence.dart'; -import 'package:flutter_examples/samples/chart/axis_features/plot_band/plot_band.dart'; -import 'package:flutter_examples/samples/chart/series_features/sorting/sorting_options.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/selection/selection_modes.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/tooltip/default_tooltip.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/trackball/chart_with_trackball.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/zooming_panning/pinch_zooming.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/zooming_panning/selection_zooming.dart'; -import 'package:flutter_examples/samples/chart/user_interactions/zooming_panning/zooming_with_custom_buttons.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/default_gauge_view.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/multiple_axis.dart'; -import 'package:flutter_examples/samples/gauge/ranges/range_thickness.dart'; -import 'package:flutter_examples/samples/gauge/ranges/range_dataLabel.dart'; -import 'package:flutter_examples/samples/gauge/pointers/multiple_ranges.dart'; -import 'package:flutter_examples/samples/gauge/showcase/gauge_overview.dart'; -import 'package:flutter_examples/samples/gauge/showcase/distance_tracker.dart'; -import 'package:flutter_examples/samples/gauge/showcase/clock_sample.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_bounceout.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_easeanimation.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_easeincirc.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_linearanimation.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_elasticout.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_slowmiddle.dart'; -import 'package:flutter_examples/samples/gauge/animation/radial_easeout.dart'; -import 'package:flutter_examples/samples/gauge/ranges/multiple_ranges.dart'; -import 'package:flutter_examples/samples/gauge/pointers/multiple_needle.dart'; -import 'package:flutter_examples/samples/gauge/pointers/radial_marker.dart'; -import 'package:flutter_examples/samples/gauge/pointers/text_pointer.dart'; -import 'package:flutter_examples/samples/gauge/annotation/image_annotation.dart'; -import 'package:flutter_examples/samples/gauge/annotation/text_annotation.dart'; -import 'package:flutter_examples/samples/gauge/annotation/direction_compass.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/radiallabel_customization.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/tick_customization.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/non_linearlabel.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/custom_labels.dart'; -import 'package:flutter_examples/samples/gauge/axis_feature/range_colors.dart'; -import 'package:flutter_examples/samples/gauge/pointer_interaction/radial_pointerdragging.dart'; +import 'package:flutter/services.dart'; import 'package:scoped_model/scoped_model.dart'; - -class SampleList { - SampleList(this.title, this.description, this.image, [this.subItemList, this.status]); - final String title; - final String description; - final String image; - final List> subItemList; - final String status; -} - -class SubItemList { - SubItemList(this.category, this.title, this.description, this.image, - [this.previewWidget, this.codeViewerLink, this.status]); - final String category; +import '../sample_list.dart'; + +class Control { + Control(this.title, this.description, this.image, + [this.status, this.displayType, this.subItems]); + factory Control.fromJson(Map json) { + return Control(json['title'], json['description'], json['image'], + json['status'], json['displayType'], json['subItems']); + } final String title; final String description; final String image; - final String codeViewerLink; - final Widget previewWidget; final String status; -} - -class SampleListModel extends Model { - - SampleListModel() { - controlList = []; - searchControlListItems = []; - sampleList = []; - searchSampleListItems = []; - - // For Axis Types - numericAxisSubItemList = []; - categoryAxisSubItemList = []; - dateTimeAxisSubItemList = []; - logarithmicAxisSubItemList = []; - axisFeaturesSubItemList = []; - multipleAxisSubItemList = []; - labelIntersectActionSubItemList = []; - edgeLabelPlacementSubItemList = []; - axisSubItemList = >[]; - axesFeaturesSubItemList = >[]; - - numericAxisSubItemList.add(SubItemList('Numeric', 'Default numeric axis', - '', 'images/axes.png', getDefaultNumericAxisChart(isTileView))); - numericAxisSubItemList.add(SubItemList( - 'Numeric', - 'Numeric axis with label format', - '', - 'images/axes.png', - getLabelNumericAxisChart(isTileView))); - numericAxisSubItemList.add(SubItemList('Numeric', 'Inversed numeric axis', - '', 'images/axes.png', getInversedNumericAxisChart(isTileView))); - categoryAxisSubItemList.add(SubItemList('Category', 'Default category axis', - '', 'images/axes.png', getDefaultCategoryAxisChart(isTileView))); - categoryAxisSubItemList.add(SubItemList( - 'Category', - 'Arranged by index', - '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.', - 'images/axes.png', - getIndexedCategoryAxisChart(isTileView))); - categoryAxisSubItemList.add(SubItemList('Category', 'Label placement', '', - 'images/axes.png', getTicksCategoryAxisChart(isTileView))); - axisFeaturesSubItemList.add(SubItemList('Axis Features', 'Opposed axes', '', - 'images/axes.png', getOpposedNumericAxisChart(isTileView))); - axisFeaturesSubItemList.add(SubItemList( - 'Axis Features', - 'Handling labels collision', - 'This sample demonstrates the chart with axis labels collision. This can be changed by using the options in the properties panel.', - 'images/axes.png', - getLabelIntersectActionChart(isTileView))); - axisFeaturesSubItemList.add(SubItemList( - 'Axis Features', - 'Edge label placement', - '', - 'images/axes.png', - getEdgeLabelPlacementChart(isTileView))); - axisFeaturesSubItemList.add(SubItemList( - 'Axis Features', - 'Multiple axis chart', - '', - 'images/axes.png', - getMultipleAxisLineChart(isTileView))); - axisFeaturesSubItemList.add(SubItemList( - 'Axis Features', - 'Axis crossing', - '', - 'images/axes.png', - getAxisCrossingSample(isTileView), '', - 'New')); - axisFeaturesSubItemList.add(SubItemList( - 'Axis Features', - 'Plot band', - '', - 'images/circular.png', - getPlotBandChart(isTileView), '', - 'New' - )); - axisFeaturesSubItemList.add(SubItemList( - 'Axis Features', - 'Plot band recurrence', - '', - 'images/circular.png', - getPlotBandRecurrenceChart(isTileView), '', - 'New' - )); - - - dateTimeAxisSubItemList.add(SubItemList( - 'Date time', - 'Default Date time axis', - '', - 'images/axes.png', - getDefaultDateTimeAxisChart(isTileView))); - dateTimeAxisSubItemList.add(SubItemList( - 'Date time', - 'Date time axis with label format', - '', - 'images/axes.png', - getLabelDateTimeAxisChart(isTileView))); - logarithmicAxisSubItemList.add(SubItemList( - 'Logarithmic', - 'Default logarithmic axis', - '', - 'images/axes.png', - getDefaultLogarithmicAxisChart(isTileView), '', - 'New')); - logarithmicAxisSubItemList.add(SubItemList( - 'Logarithmic', - 'Inversed logarithmic axis', - '', - 'images/axes.png', - getInversedLogarithmicAxisChart(isTileView), '', - 'New')); - axisSubItemList.add(numericAxisSubItemList); - axisSubItemList.add(categoryAxisSubItemList); - axisSubItemList.add(dateTimeAxisSubItemList); - axisSubItemList.add(logarithmicAxisSubItemList); - axesFeaturesSubItemList.add(axisFeaturesSubItemList); - - // For Accumulation Types - pieSeriesSubItemList = []; - doughnutSeriesSubItemList = []; - radialBarSeriesSubItemList = []; - - //Triagular series types - pyramidSeriesSubItemList = []; - funnelSeriesSubItemList = []; - - pieSeriesSubItemList.add(SubItemList( - 'Pie', - 'Default pie chart', - '', - 'images/axes.png', - getDefaultPieChart(isTileView), - )); - pieSeriesSubItemList.add(SubItemList( - 'Pie', - 'Pie with various radius', - 'This sample demonstrates the pie chart with different radius for all the slices. The radius of a slice is based on a numeric value.', - 'images/axes.png', - getRadiusPieChart(isTileView), - )); - pieSeriesSubItemList.add(SubItemList( - 'Pie', - 'Semi-pie chart', - '', - 'images/axes.png', - getSemiPieChart(isTileView), - )); - pieSeriesSubItemList.add(SubItemList( - 'Pie', - 'Pie with grouping', - 'This sample demonstrates the grouping functionality in a pie chart. Data points’ values less than the specified value can be grouped together.', - 'images/axes.png', - getGroupingPieChart(isTileView), - )); - pieSeriesSubItemList.add(SubItemList( - 'Pie', - 'Pie with smart labels', - '', - 'images/axes.png', - getSmartLabelPieChart(isTileView), - )); - doughnutSeriesSubItemList.add(SubItemList( - 'Doughnut', - 'Default doughnut chart', - '', - 'images/axes.png', - getDefaultDoughnutChart(isTileView), - )); - - doughnutSeriesSubItemList.add(SubItemList( - 'Doughnut', - 'Doughnut with center elevation', - 'The doughnut chart is rendered with elevated circle at the center using annotations feature in this sample.', - 'images/axes.png', - getElevationDoughnutChart(isTileView), - )); - doughnutSeriesSubItemList.add(SubItemList( - 'Doughnut', - 'Doughnut with rounded corners', - '', - 'images/axes.png', - getRoundedDoughnutChart(isTileView), - )); - doughnutSeriesSubItemList.add(SubItemList( - 'Doughnut', - 'Doughnut with color mapping', - '', - 'images/axes.png', - getDoughnutCustomizationChart(isTileView), - )); - doughnutSeriesSubItemList.add(SubItemList( - 'Doughnut', - 'Semi-doughnut chart', - '', - 'images/axes.png', - getSemiDoughnutChart(isTileView), - )); - - radialBarSeriesSubItemList.add(SubItemList( - 'Radial Bar', - 'Default radial bar chart', - '', - 'images/axes.png', - getDefaultRadialBarChart(isTileView), - )); - radialBarSeriesSubItemList.add(SubItemList( - 'Radial Bar', - 'Radial bar with legend', - '', - 'images/axes.png', - getAngleRadialBarChart(isTileView), - )); - radialBarSeriesSubItemList.add(SubItemList( - 'Radial Bar', - 'Customized radial bar chart', - 'This sample renders the radial bar chart with annotation at the center and templated legend.', - 'images/axes.png', - getCustomizedRadialBarChart(isTileView), - )); - - pyramidSeriesSubItemList.add(SubItemList( - 'Pyramid', - 'Default pyramid chart', - '', - 'images/axes.png', - getDefaultPyramidChart(isTileView), '', - 'New' - )); - pyramidSeriesSubItemList.add(SubItemList( - 'Pyramid', - 'Pyramid with smart labels', - '', - 'images/axes.png', - getPyramidSmartLabelChart(isTileView), '', - 'New' - )); - pyramidSeriesSubItemList.add(SubItemList( - 'Pyramid', - 'Pyramid with legend', - '', - 'images/axes.png', - getLegendPyramidChart(isTileView), '', - 'New' - )); - - funnelSeriesSubItemList.add(SubItemList( - 'Funnel', - 'Default funnel chart', - '', - 'images/axes.png', - getDefaultFunnelChart(isTileView), '', - 'New' - )); - funnelSeriesSubItemList.add(SubItemList( - 'Funnel', - 'Funnel with smart labels', - '', - 'images/axes.png', - getFunnelSmartLabelChart(isTileView), '', - 'New' - )); - funnelSeriesSubItemList.add(SubItemList( - 'Funnel', - 'Funnel with legend', - '', - 'images/axes.png', - getLegendFunnelChart(isTileView), '', - 'New' - )); - - // Cartesian Types - lineSeriesSubItemList = []; - columnSeriesSubItemList = []; - splineSeriesSubItemList = []; - areaSeriesSubItemList = []; - barSeriesSubItemList = []; - bubbleSeriesSubItemList = []; - scatterSeriesSubItemList = []; - stepLineSeriesSubItemList = []; - stackedSeriesSubItemList = []; - rangeColumnSeriesSubItemList = []; - legendSubItemList = []; - markerSubItemList = []; - dataLabelSubItemList = []; - annotationSubItemList = []; - sortingSubItemList = []; - animationSubItemList = []; - emptyPointSubItemList = []; - cartesianSubItemList = >[]; - accumulationSubItemList = >[]; - funnelSubItemList = >[]; - pyramidSubItemList = >[]; - otherFeaturesSubItemList = >[]; - legendFeaturesSubItemList = >[]; - userInteractionSubItemList = >[]; - dynamicUpdatesSubItemList = >[]; - // dynamic updates - liveUpdateSubItemList = []; - liveVerticalSubItemList = []; - randomUpdateDataSubItemList = []; - - // User Interactions Types - tooltipSubItemList = []; - zoomingPanningSubItemList = []; - crossHairSubItemList = []; - trackballSubItemList = []; - selectionSubItemList = []; - - lineSeriesSubItemList.add(SubItemList( - 'Line', - 'Default line chart', - '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.', - 'images/axes.png', - getDefaultLineChart(isTileView), - )); - lineSeriesSubItemList.add(SubItemList( - 'Line', - 'Line with dashes', - 'Line chart is rendered with dashes in this sample.', - 'images/axes.png', - getDashedLineChart(isTileView), - )); - lineSeriesSubItemList.add(SubItemList( - 'Line', - 'Multi-colored line', - 'This sample demonstrates the rendering of a line chart with multiple colors. Colors for each data point is mapped from the data source.', - 'images/circular.png', - getMultiColorLineChart(isTileView), - )); - lineSeriesSubItemList.add(SubItemList( - 'Line', - 'Customized line chart', - '', - 'images/circular.png', - getCustomizedLineChart(isTileView), - )); - - // dynamic updates - liveUpdateSubItemList.add(SubItemList( - 'Live Update', - 'Live update', - '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.', - 'images/circular.png', - getLiveUpdateChart(isTileView), - )); - liveUpdateSubItemList.add(SubItemList( - 'Live Update', - 'Vertical live chart', - 'This sample demonstrates the live chart. A new data point is added at the end in certain time interval continuously.', - 'images/circular.png', - getVerticalLineUpdateChart(isTileView), - )); - - liveVerticalSubItemList.add(SubItemList( - 'Add/Remove Data', - 'Add/remove points', - 'Add or remove the data points from a chart using the buttons placed in the sample.', - 'images/circular.png', - getAddRemovePointsChart(), - )); - liveVerticalSubItemList.add(SubItemList( - 'Add/Remove Data', - 'Add/remove series', - 'Add or remove series from the chart using the buttons placed in the sample.', - 'images/circular.png', - getAddRemoveSeriesChart(isTileView), - )); - randomUpdateDataSubItemList.add(SubItemList( - 'Update Data Source', - 'Update data source', - 'The data source bound to this chart can be changed with random values dynamically, by tapping the button placed in this sample.', - 'images/circular.png', - getUpdateDataSourceChart(isTileView), - )); - - // Interaction Types - tooltipSubItemList.add(SubItemList( - 'Tooltip', - 'Default tooltip', - 'Tooltip is enabled in this sample and to see a tooltip in action, tap the data points in the chart.', - 'images/circular.png', - getDefaultTooltipChart(isTileView), - )); - zoomingPanningSubItemList.add(SubItemList( - 'Zooming and Panning', - 'Pinch zooming', - 'Pinch zooming and panning is enabled in this sample. Pinch the chart to zoom it and swipe the zoomed chart to pan it.', - 'images/circular.png', - getDefaultPanningChart(isTileView), - )); - zoomingPanningSubItemList.add(SubItemList( - 'Zooming and Panning', - 'Selection zooming', - 'This sample depicts the working of selection zooming. Long press and drag on the chart to select the region for zooming.', - 'images/circular.png', - getDefaultZoomingChart(isTileView), '', - 'Updated' - )); - zoomingPanningSubItemList.add(SubItemList( - 'Zooming and Panning', - 'Zooming with custom buttons', - 'This sample demonstrates zooming and panning with custom buttons.', - 'images/circular.png', - getButtonZoomingChart(isTileView), - )); - crossHairSubItemList.add(SubItemList( - 'Crosshair', - 'Chart with crosshair', - 'Crosshair is enabled in this sample. Tap the chart to display a crosshair and drag the chart to change the position of the crosshair continuously.', - 'images/circular.png', - getDefaultCrossHairChart(isTileView), - )); - trackballSubItemList.add(SubItemList( - 'Trackball', - 'Chart with trackball', - 'Trackball is enabled in this sample. Tap the chart to display the trackball and drag the chart to change the position of the trackball continuously.', - 'images/circular.png', - getDefaultTrackballChart(isTileView), - )); - selectionSubItemList.add(SubItemList( - 'Selection', - 'Selection modes', - 'This sample depicts the selection feature in a chart. Tap the data points to select or unselect it.', - 'images/circular.png', - getDefaultSelectionChart(isTileView), - )); - legendSubItemList.add(SubItemList( - 'Legend', - 'Chart with legend', - '', - 'images/circular.png', - getLegendDefaultChart(isTileView), - )); - legendSubItemList.add(SubItemList( - 'Legend', - 'Chart with customized legend', - '', - 'images/circular.png', - getLegendCustomizedChart(isTileView), - )); - legendSubItemList.add(SubItemList( - 'Legend', - 'Legend with various options', - '', - 'images/circular.png', - getLegendOptionsChart(isTileView), - )); - markerSubItemList.add(SubItemList( - 'Marker', - 'Various marker shapes', - '', - 'images/circular.png', - getMarkerDefaultChart(isTileView), - )); - dataLabelSubItemList.add(SubItemList( - 'Data Label', - 'Default data labels', - '', - 'images/circular.png', - getDataLabelDefaultChart(isTileView), - )); - annotationSubItemList.add(SubItemList( - 'Annotation', - 'Chart with annotation', - 'This sample renders the cartesian chart with annotation. A pie chart is rendered as an annotation here.', - 'images/circular.png', - getWatermarkAnnotationChart(isTileView), - )); - annotationSubItemList.add(SubItemList( - 'Annotation', - 'Chart with watermark', - 'In this sample, annotation is placed at the center of the chart with reduced opacity to form a watermark.', - 'images/circular.png', - getDefaultAnnotationChart(isTileView), - )); - sortingSubItemList.add(SubItemList( - 'Sorting', - 'Sorting options', - '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.', - 'images/circular.png', - getDefaultSortingChart(isTileView), - )); - animationSubItemList.add(SubItemList( - 'Animation', - 'Series animation', - '', - 'images/circular.png', - getDefaultAnimationChart(isTileView), - )); - animationSubItemList.add(SubItemList( - 'Animation', - 'Dynamic update', - '', - 'images/circular.png', - getDynamicAnimationChart(isTileView), '', - 'New' - )); - emptyPointSubItemList.add(SubItemList( - 'Empty Points', - 'Chart with empty points', - '', - 'images/circular.png', - getEmptyPointChart(isTileView), - )); - splineSeriesSubItemList.add(SubItemList( - 'Spline', - 'Default spline chart', - '', - 'images/axisfeatures.png', - getDefaultSplineChart(isTileView), - )); - splineSeriesSubItemList.add(SubItemList( - 'Spline', - 'Spline with dashes', - '', - 'images/cartesian.png', - getDashedSplineChart(isTileView), - )); - splineSeriesSubItemList.add(SubItemList( - 'Spline', - 'Spline types', - 'This sample demonstrates various types of splines. Type can be changed by modifying the options in the properties panel.', - 'images/axisfeatures.png', - getTypesSplineChart(isTileView), - )); - splineSeriesSubItemList.add(SubItemList( - 'Spline', - 'Vertical spline chart', - '', - 'images/cartesian.png', - getVerticalSplineChart(isTileView), - )); - splineSeriesSubItemList.add(SubItemList( - 'Spline', - 'Customized spline chart', - '', - 'images/cartesian.png', - getCustomizedSplineChart(isTileView), - )); - - stepLineSeriesSubItemList.add(SubItemList( - 'Step Line', - 'Default step line chart', - '', - 'images/cartesian.png', - getDefaultStepLineChart(isTileView), - )); - stepLineSeriesSubItemList.add(SubItemList( - 'Step Line', - 'Step line with dashes', - 'A step line chart is rendered with dashes in this sample.', - 'images/cartesian.png', - getDashedStepLineChart(isTileView), - )); - stepLineSeriesSubItemList.add(SubItemList( - 'Step Line', - 'Vertical step line chart', - 'The axes in this sample are transposed to form a vertical step line chart. ', - 'images/cartesian.png', - getVerticalStepLineChart(isTileView), - )); - - areaSeriesSubItemList.add(SubItemList( - 'Area', - 'Default area chart', - '', - 'images/cartesian.png', - getDefaultAreaChart(isTileView), - )); - areaSeriesSubItemList.add(SubItemList( - 'Area', - 'Area with gradient', - 'This sample depicts the area chart filled with gradient colors.', - 'images/cartesian.png', - getGradientAreaChart(isTileView), - )); - areaSeriesSubItemList.add(SubItemList( - 'Area', - 'Area with empty points', - 'This area chart sample renders with gap for null values (empty data points).', - 'images/cartesian.png', - getEmptyPointAreaChart(isTileView), - )); - areaSeriesSubItemList.add(SubItemList( - 'Area', - 'Vertical area chart', - '', - 'images/cartesian.png', - getVerticalAreaChart(isTileView), - )); - - barSeriesSubItemList.add(SubItemList( - 'Bar', - 'Default bar chart', - '', - 'images/cartesian.png', - getDefaultBarChart(isTileView), - )); - barSeriesSubItemList.add(SubItemList( - 'Bar', - 'Bar with rounded corners', - '', - 'images/cartesian.png', - getRoundedBarChart(isTileView), - )); - barSeriesSubItemList.add(SubItemList( - 'Bar', - 'Bar width and spacing', - 'You can change the width and spacing of the bars by using the options in the properties panel.', - 'images/cartesian.png', - getSpacingBarChart(isTileView), - )); - barSeriesSubItemList.add(SubItemList( - 'Bar', - 'Bar with track', - 'This sample renders the bar chart with track. Track is a rectangular bar drawn from minimum to maximum values of an axis.', - 'images/cartesian.png', - getTrackerBarChart(isTileView), - )); - barSeriesSubItemList.add(SubItemList( - 'Bar', - 'Customized bar chart', - 'This sample demonstrates the rendering of custom bars. Here, the bars are filled with images, to look like pattern fill.', - 'images/cartesian.png', - getCustomizedBarChart(isTileView), - )); - - bubbleSeriesSubItemList.add(SubItemList( - 'Bubble', - 'Default bubble chart', - '', - 'images/cartesian.png', - getDefaultBubbleChart(isTileView), - )); - - bubbleSeriesSubItemList.add(SubItemList( - 'Bubble', - 'Bubble with various colors', - '', - 'images/cartesian.png', - getPointColorBubbleChart(isTileView), - )); - bubbleSeriesSubItemList.add(SubItemList( - 'Bubble', - 'Bubble filled with gradient', - 'This sample depicts the bubble chart filled with gradient colors.', - 'images/cartesian.png', - getGradientBubbleChart(isTileView), - )); - bubbleSeriesSubItemList.add(SubItemList( - 'Bubble', - 'Bubble with multiple series', - '', - 'images/cartesian.png', - getMultipleSeriesBubbleChart(isTileView), - )); - - scatterSeriesSubItemList.add(SubItemList( - 'Scatter', - 'Default scatter chart', - '', - 'images/cartesian.png', - getDefaultScatterChart(isTileView), - )); - scatterSeriesSubItemList.add(SubItemList( - 'Scatter', - 'Scatter with various shapes', - 'This sample demonstrates the rendering of a scatter chart with various shapes.', - 'images/cartesian.png', - getShapesScatterChart(isTileView), - )); - - columnSeriesSubItemList.add(SubItemList( - 'Column', - 'Default column chart', - '', - 'images/axes.png', - getDefaultColumnChart(isTileView), - )); - columnSeriesSubItemList.add(SubItemList( - 'Column', - 'Column with rounded corners', - '', - 'images/circular.png', - getRoundedColumnChart(isTileView), - )); - columnSeriesSubItemList.add(SubItemList( - 'Column', - 'Back to back column', - 'By default, the columns of various series are placed side by side. In this sample, it is changed to render back to back.', - 'images/axes.png', - getBackColumnChart(isTileView), - )); - columnSeriesSubItemList.add(SubItemList( - 'Column', - 'Column with track', - 'This sample renders the column chart with track. Track is a rectangular bar drawn from minimum to maximum values of an axis.', - 'images/circular.png', - getTrackerColumnChart(isTileView), - )); - columnSeriesSubItemList.add(SubItemList( - 'Column', - 'Column width and spacing', - 'You can change the width and spacing of columns by using the options in the properties panel.', - 'images/circular.png', - getSpacingColumnChart(isTileView), - )); - columnSeriesSubItemList.add(SubItemList( - 'Column', - 'Customized column chart', - 'This sample demonstrates the rendering of custom columns. Here, the top edges of the columns are changed to form a triangle.', - 'images/circular.png', - getVerticalColumnChart(isTileView), - )); - rangeColumnSeriesSubItemList.add(SubItemList( - 'Range Column', - 'Default range column chart', - '', - 'images/cartesian.png', - getDefaultRangeColumnChart(isTileView), - '', - 'New' - )); - rangeColumnSeriesSubItemList.add(SubItemList( - 'Range Column', - 'Transposed range column', - '', - 'images/cartesian.png', - getRangeBarChart(isTileView), '', - 'New' - )); - rangeColumnSeriesSubItemList.add(SubItemList( - 'Range Column', - 'Range column with track', - '', - 'images/cartesian.png', - getRangeColumnwithTrack(isTileView), '', - 'New' - )); - stackedSeriesSubItemList.add(SubItemList( - 'Stacked Charts', - 'Stacked line chart', - '', - 'images/cartesian.png', - getStackedLineChart(isTileView), '', - 'New' - )); - stackedSeriesSubItemList.add(SubItemList( - 'Stacked Charts', - 'Stacked area chart', - '', - 'images/cartesian.png', - getStackedAreaChart(isTileView), '', - 'New' - )); - stackedSeriesSubItemList.add(SubItemList( - 'Stacked Charts', - 'Stacked column chart', - '', - 'images/cartesian.png', - getStackedColumnChart(isTileView), '', - 'New' - )); - stackedSeriesSubItemList.add(SubItemList( - 'Stacked Charts', - 'Stacked bar chart', - '', - 'images/cartesian.png', - getStackedBarChart(isTileView), '', - 'New' - )); - - // Radial gauge example - - //Radial gauge examples - radialGaugeSubItemList = >[]; - - //Radial gauge categories - radialAxisSubItemList = []; - radialPointersSubItemList= []; - radialRangesSubItemList = []; - radialAnnotationSubItemList = []; - radialInteractionSubItemList= []; - radialShowCaseSubItemList = []; - radialAnimationSubItemList = []; - - radialShowCaseSubItemList.add(SubItemList( - 'Showcase', - 'Clock', - '', - 'images/axes.png', - getClockExample(isTileView), - )); - radialShowCaseSubItemList.add(SubItemList( - 'Showcase', - 'Temperature Monitor', - '', - 'images/axes.png', - getGaugeOverviewExample(isTileView), - )); - - radialShowCaseSubItemList.add(SubItemList( - 'Showcase', - 'Distance Tracker', - '', - 'images/axes.png', - getDistanceTrackerExample(isTileView), - )); - radialAxisSubItemList.add(SubItemList( - 'Axis', - 'Default view', - '', - 'images/axes.png', - getDefaultRadialGauge(isTileView), - )); - - radialAxisSubItemList.add(SubItemList( - 'Axis', - 'Multiple axis', - '', - 'images/axes.png', - getMultipleAxisGauge(isTileView), - )); - radialAxisSubItemList.add(SubItemList( - 'Axis', - 'Label Customization', - '', - 'images/axes.png', - getRadialLabelCustomization(isTileView), - )); - radialAxisSubItemList.add(SubItemList( - 'Axis', - 'Tick Customization', - '', - 'images/axes.png', - getRadialTickCustomization(isTileView), - )); - radialAxisSubItemList.add(SubItemList( - 'Axis', - 'Custom Scale', - '', - 'images/axes.png', - getRadialNonLinearLabel(isTileView), - )); - radialAxisSubItemList.add(SubItemList( - 'Axis', - 'Custom Labels', - '', - 'images/axes.png', - getGaugeCustomLabels(isTileView), - )); - radialAxisSubItemList.add(SubItemList( - 'Axis', - 'Range colors for axis', - '', - 'images/axes.png', - getRangeColorForLabels(isTileView), - )); - radialPointersSubItemList.add(SubItemList( - 'Pointers', - 'Range Pointer', - '', - 'images/axes.png', - getMultipleRangePointerExampleGauge(isTileView), - )); - - radialPointersSubItemList.add(SubItemList( - 'Pointers', - 'Multiple Needle', - '', - 'images/axes.png', - getMultipleNeedleExample(isTileView), - )); - radialPointersSubItemList.add(SubItemList( - 'Pointers', - 'Marker Pointer', - '', - 'images/axes.png', - getRadialMarkerExample(isTileView), - )); - radialPointersSubItemList.add(SubItemList( - 'Pointers', - 'Text Pointer', - '', - 'images/axes.png', - getRadialTextPointer(isTileView), - )); - radialRangesSubItemList.add(SubItemList( - 'Range', - 'Multiple Ranges', - '', - 'images/axes.png', - getMultipleRangesExampleGauge(isTileView), - )); - radialRangesSubItemList.add(SubItemList( - 'Range', - 'Range Thickness', - '', - 'images/axes.png', - getRangeThicknessExampleGauge(isTileView), - )); - radialRangesSubItemList.add(SubItemList( - 'Range', - 'Range Label', - '', - 'images/axes.png', - getRangeDataLabelExample(isTileView), - )); - radialAnnotationSubItemList.add(SubItemList( - 'Gauge Annotation', - 'Direction Compass', - '', - 'images/axes.png', - getRadialCompass(isTileView), - )); - radialAnnotationSubItemList.add(SubItemList( - 'Gauge Annotation', - 'Text Annotation', - '', - 'images/axes.png', - getRadialTextAnnotation(isTileView), - )); - radialAnnotationSubItemList.add(SubItemList( - 'Gauge Annotation', - 'Temperature Tracker', - '', - 'images/axes.png', - getRadialImageAnnotation(isTileView), - )); - radialInteractionSubItemList.add(SubItemList( - 'Pointer Interaction', - 'Pointer Dragging', - '', - 'images/axes.png', - getRadialPointerDragging(isTileView), - )); - - radialAnimationSubItemList.add(SubItemList( - 'Pointer Animation', - 'Bounce Out', - '', - 'images/axes.png', - getRadialBounceOutExample(isTileView), - )); - radialAnimationSubItemList.add(SubItemList( - 'Pointer Animation', - 'Ease', - '', - 'images/axes.png', - getRadialEaseExample(isTileView), - )); - radialAnimationSubItemList.add(SubItemList( - 'Pointer Animation', - 'Linear', - '', - 'images/axes.png', - getRadialLinearAnimation(isTileView), - )); - radialAnimationSubItemList.add(SubItemList( - 'Pointer Animation', - 'EaseInCirc', - '', - 'images/axes.png', - getRadialEaseInCircExample(isTileView), - )); - radialAnimationSubItemList.add(SubItemList( - 'Pointer Animation', - 'ElasticOut', - '', - 'images/axes.png', - getRadialElasticOutAnimation(isTileView), - )); - radialAnimationSubItemList.add(SubItemList( - 'Pointer Animation', - 'SlowMiddle', - '', - 'images/axes.png', - getRadialSlowMiddleAnimation(isTileView), - )); - radialAnimationSubItemList.add(SubItemList( - 'Pointer Animation', - 'EaseOutBack', - '', - 'images/axes.png', - getRadialEaseOutAnimation(isTileView), - )); - - cartesianSubItemList.add(lineSeriesSubItemList); - cartesianSubItemList.add(columnSeriesSubItemList); - cartesianSubItemList.add(splineSeriesSubItemList); - cartesianSubItemList.add(areaSeriesSubItemList); - cartesianSubItemList.add(barSeriesSubItemList); - cartesianSubItemList.add(bubbleSeriesSubItemList); - cartesianSubItemList.add(scatterSeriesSubItemList); - cartesianSubItemList.add(stepLineSeriesSubItemList); - cartesianSubItemList.add(rangeColumnSeriesSubItemList); - cartesianSubItemList.add(stackedSeriesSubItemList); - - accumulationSubItemList.add(pieSeriesSubItemList); - accumulationSubItemList.add(doughnutSeriesSubItemList); - accumulationSubItemList.add(radialBarSeriesSubItemList); - - pyramidSubItemList.add(pyramidSeriesSubItemList); - funnelSubItemList.add(funnelSeriesSubItemList); - - legendFeaturesSubItemList.add(legendSubItemList); - otherFeaturesSubItemList.add(markerSubItemList); - otherFeaturesSubItemList.add(dataLabelSubItemList); - otherFeaturesSubItemList.add(annotationSubItemList); - otherFeaturesSubItemList.add(sortingSubItemList); - otherFeaturesSubItemList.add(animationSubItemList); - otherFeaturesSubItemList.add(emptyPointSubItemList); + /// 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; + List sampleList; + List childList; + List subItems; +} - userInteractionSubItemList.add(tooltipSubItemList); - userInteractionSubItemList.add(zoomingPanningSubItemList); - userInteractionSubItemList.add(crossHairSubItemList); - userInteractionSubItemList.add(trackballSubItemList); - userInteractionSubItemList.add(selectionSubItemList); +class SubItem { + SubItem( + [this.type, + this.displayType, + this.title, + this.key, + this.codeLink, + this.description, + this.status, + this.subItems]); + factory SubItem.fromJson(Map json) { + return SubItem( + json['type'], + json['displayType'], + json['title'], + json['key'], + json['codeLink'], + json['description'], + json['status'], + json['subItems'], + ); + } - dynamicUpdatesSubItemList.add(liveUpdateSubItemList); - dynamicUpdatesSubItemList.add(liveVerticalSubItemList); - dynamicUpdatesSubItemList.add(randomUpdateDataSubItemList); + /// type given as parent/child/sample. + /// if "parent" is given then primary tab and secondary tab both come. + /// for "parent", "child" type must be give to subItems(next hierarchy). + /// if "child" is given only primary tab will come. + /// if "sample" is given no tab will come. + /// by default it taken as "sample". + /// Note: In all cases displayType is given as "fullView", additionally sample's tab will come. + final String type; + + /// Mention the samples layout. + /// displayType given as card/fullView. + /// by default it taken as "fullView". + /// Note: Need to mention this when on display type is child. + final String displayType; + + /// Need to mention in all type + final String title; - // To add radial gauge categories - radialGaugeSubItemList.add(radialShowCaseSubItemList); - radialGaugeSubItemList.add(radialAxisSubItemList); - radialGaugeSubItemList.add(radialPointersSubItemList); - radialGaugeSubItemList.add(radialRangesSubItemList); - radialGaugeSubItemList.add(radialAnnotationSubItemList); - radialGaugeSubItemList.add(radialInteractionSubItemList); - radialGaugeSubItemList.add(radialAnimationSubItemList); - - controlList.add(SampleList( - 'Radial Gauge', - 'Demos of radial gauges and its feature', - 'images/circle_gauge.png', - radialGaugeSubItemList, - 'New')); + /// Below values need to give when type is "sample" + final String key; + final String codeLink; + final String description; + final String status; - controlList.add(SampleList( - 'Cartesian Charts', - 'Demos of various chart types supported in cartesian axes', - 'images/cartesian_types.png', - cartesianSubItemList, - 'Updated')); - controlList.add(SampleList( - 'Circular Charts', - 'Demos of various circular chart types including pie and doughnut', - 'images/circle_series.png', - accumulationSubItemList, - '')); - controlList.add(SampleList( - 'Pyramid Chart', - 'Interactive demos of pyramid charts', - 'images/pyramid.png', - pyramidSubItemList, - 'New')); - controlList.add(SampleList( - 'Funnel Chart', - 'Interactive demos of funnel charts', - 'images/funnel.png', - funnelSubItemList, - 'New')); - controlList.add(SampleList( - 'Axis Types', - 'Various types of an axis available to plot the desired data', - 'images/axis_types.png', - axisSubItemList, - 'Updated')); - controlList.add(SampleList( - 'Axis Features', - 'Set of features helpful for customizing the axis and its elements', - 'images/axis_feature.png', - axesFeaturesSubItemList, - 'Updated')); - controlList.add(SampleList( - 'Series Features', - 'Set of features helpful for customizing series and data points', - 'images/other_features.png', - otherFeaturesSubItemList, - 'Updated')); - controlList.add(SampleList( - 'Legend', - 'Various legend features useful in displaying additional information about the series', - 'images/legend.png', - legendFeaturesSubItemList, - '')); - controlList.add(SampleList( - 'User Interactions', - 'Real-time demos of the interactive features in chart', - 'images/user_interaction.png', - userInteractionSubItemList, - 'Updated')); - controlList.add(SampleList( - 'Dynamic Updates', - 'This sample demonstrates the chart with dynamic updates at run time', - 'images/live_update.png', - dynamicUpdatesSubItemList, - '')); + ///No need to give when type is "sample" + List subItems; +} +class SampleModel extends Model { + SampleModel() { + controlList = []; + searchControlItems = []; + sampleList = []; + searchSampleItems = []; + controlList = SampleModel.controlList1; // For search results - - searchControlListItems.addAll(controlList); + searchControlItems.addAll(controlList); for (int index = 0; index < controlList.length; index++) { - for (int categoryIndex = 0; - categoryIndex < controlList[index].subItemList.length; - categoryIndex++) { - for (int sampleIndex = 0; - sampleIndex < controlList[index].subItemList[categoryIndex].length; - sampleIndex++) { - searchSampleListItems - .add(controlList[index].subItemList[categoryIndex][sampleIndex]); + if (controlList[index].sampleList != null) { + for (int i = 0; i < controlList[index].sampleList.length; i++) { + searchSampleItems.add(controlList[index].sampleList[i]); + } + } else if (controlList[index].childList != null) { + for (int i = 0; i < controlList[index].childList.length; i++) { + for (int j = 0; + j < controlList[index].childList[i].subItems.length; + j++) { + searchSampleItems.add(controlList[index].childList[i].subItems[j]); + } + } + } else { + for (int i = 0; i < controlList[index].subItems.length; i++) { + for (int j = 0; + j < controlList[index].subItems[i].subItems.length; + j++) { + for (int k = 0; + k < controlList[index].subItems[i].subItems[j].subItems.length; + k++) { + searchSampleItems + .add(controlList[index].subItems[i].subItems[j].subItems[k]); + } + } } } } } - + final Map> sampleWidget = getSampleWidget(); + static List controlList1 = []; bool isTargetMobile; - List controlList; - List searchControlListItems; // To handle search - List sampleList; - List searchSampleListItems; // To handle search - + List controlList; + List searchControlItems; // To handle search + List sampleList; + List searchSampleItems; // To handle search int selectedIndex = 0; Color backgroundColor = const Color.fromRGBO(0, 116, 228, 1); Color slidingPanelColor = const Color.fromRGBO(250, 250, 250, 1); @@ -1292,97 +140,9 @@ class SampleListModel extends Model { final bool isTileView = true; Color cardThemeColor = Colors.white; - // For Axis Types - List numericAxisSubItemList; - List categoryAxisSubItemList; - List dateTimeAxisSubItemList; - List logarithmicAxisSubItemList; - List axisFeaturesSubItemList; - List multipleAxisSubItemList; - List labelIntersectActionSubItemList; - List edgeLabelPlacementSubItemList; - List> axisSubItemList; - List> axesFeaturesSubItemList; - - // Cartesian Types - List lineSeriesSubItemList; - List columnSeriesSubItemList; - List splineSeriesSubItemList; - List areaSeriesSubItemList; - List barSeriesSubItemList; - List bubbleSeriesSubItemList; - List scatterSeriesSubItemList; - List stepLineSeriesSubItemList; - List rangeColumnSeriesSubItemList; - List stackedSeriesSubItemList; - List legendSubItemList; - List markerSubItemList; - List dataLabelSubItemList; - List annotationSubItemList; - List sortingSubItemList; - List animationSubItemList; - List emptyPointSubItemList; - List> cartesianSubItemList; - List> accumulationSubItemList; - List> pyramidSubItemList; - List> funnelSubItemList; - List> otherFeaturesSubItemList; - List> legendFeaturesSubItemList; - List> userInteractionSubItemList; - List> dynamicUpdatesSubItemList; - List> calendarSubItemList; - - // dynamic updates - List liveUpdateSubItemList; - List liveVerticalSubItemList; - List randomUpdateDataSubItemList; - - // User Interactions Types - List tooltipSubItemList; - List zoomingPanningSubItemList; - List crossHairSubItemList; - List trackballSubItemList; - List selectionSubItemList; - - // Accumulation Types - List pieSeriesSubItemList; - List doughnutSeriesSubItemList; - List radialBarSeriesSubItemList; - - //Triangular Types - List pyramidSeriesSubItemList; - List funnelSeriesSubItemList; - - //Radial gauge examples - List> radialGaugeSubItemList; - List radialAxisSubItemList; - List radialPointersSubItemList; - List radialRangesSubItemList; - List radialAnnotationSubItemList; - List radialInteractionSubItemList; - List radialAnimationSubItemList; - List radialShowCaseSubItemList; - void changeTheme(ThemeData _themeData) { themeData = _themeData; switch (_themeData.brightness) { - case Brightness.light: - { - drawerTextIconColor = Colors.black; - drawerIconColor = Colors.black; - slidingPanelColor = Colors.white; - drawerIconColor = Colors.black; - drawerBackgroundColor = Colors.white; - bottomSheetBackgroundColor = Colors.white; - backgroundColor = paletteColor ?? const Color.fromRGBO(0, 116, 228, 1); - listIconColor = paletteColor ?? const Color.fromRGBO(0, 116, 228, 1); - searchBoxColor = Colors.white; - listDescriptionTextColor = Colors.grey; - textColor = const Color.fromRGBO(51, 51, 51, 1); - theme = Brightness.light; - cardThemeColor = Colors.white; - break; - } case Brightness.dark: { drawerTextIconColor = Colors.white; @@ -1390,27 +150,29 @@ class SampleListModel extends Model { slidingPanelColor = const Color.fromRGBO(32, 33, 37, 1); drawerBackgroundColor = Colors.black; bottomSheetBackgroundColor = const Color.fromRGBO(34, 39, 51, 1); - backgroundColor = paletteColor ?? const Color.fromRGBO(0, 116, 228, 1); + backgroundColor = + paletteColor ?? const Color.fromRGBO(0, 116, 228, 1); listIconColor = paletteColor ?? Colors.white; searchBoxColor = Colors.white; - listDescriptionTextColor = const Color.fromRGBO(242,242,242,1); - textColor = const Color.fromRGBO(242,242,242,1); + listDescriptionTextColor = const Color.fromRGBO(242, 242, 242, 1); + textColor = const Color.fromRGBO(242, 242, 242, 1); theme = Brightness.dark; - // cardThemeColor = Colors.black.withOpacity(0.7); - cardThemeColor = const Color.fromRGBO(23,27,36,1); + cardThemeColor = const Color.fromRGBO(23, 27, 36, 1); break; } default: { - drawerTextIconColor = Colors.white; + drawerTextIconColor = Colors.black; + drawerIconColor = Colors.black; + slidingPanelColor = Colors.white; + drawerIconColor = Colors.black; drawerBackgroundColor = Colors.white; bottomSheetBackgroundColor = Colors.white; - drawerIconColor = Colors.white; - slidingPanelColor = Colors.white; - backgroundColor = const Color.fromRGBO(0, 116, 228, 1); + backgroundColor = + paletteColor ?? const Color.fromRGBO(0, 116, 228, 1); + listIconColor = paletteColor ?? const Color.fromRGBO(0, 116, 228, 1); searchBoxColor = Colors.white; - listIconColor = const Color.fromRGBO(0, 116, 228, 1); - listDescriptionTextColor = Colors.white; + listDescriptionTextColor = Colors.grey; textColor = const Color.fromRGBO(51, 51, 51, 1); theme = Brightness.light; cardThemeColor = Colors.white; @@ -1420,55 +182,75 @@ class SampleListModel extends Model { } } -class ChartNumeric { - ChartNumeric(this.x, this.y, this.y2, [this.size, this.text, this.lineColor]); - final double x; - final double y; - final double y2; - final double size; - final String text; - final Color lineColor; -} - -class OrdinalSales1 { - OrdinalSales1(this.year, this.androidSales, this.iphoneSales); - final DateTime year; - final int androidSales; - final int iphoneSales; -} - -class BubbleColors { - BubbleColors(this.year, this.growth, - [this.bubbleSize, this.pointColorMapper]); - final num year; - final num growth; - final num bubbleSize; - final Color pointColorMapper; -} +Future updateControl() async { + bool isSample = false; + bool isChild = false; + final String jsonText = + await rootBundle.loadString('lib/sample_details.json'); + final List controlList = json.decode(jsonText); + List subItems = []; + List subItems1 = []; + List subItems2 = []; + for (int i = 0; i < controlList.length; i++) { + SampleModel.controlList1.add(Control.fromJson(controlList[i])); + for (int j = 0; j < SampleModel.controlList1[i].subItems.length; j++) { + subItems.add(SubItem.fromJson(SampleModel.controlList1[i].subItems[j])); + if (subItems[j].type == 'parent') { + for (int k = 0; k < subItems[j].subItems.length; k++) { + subItems1.add(SubItem.fromJson(subItems[j].subItems[k])); + for (int l = 0; l < subItems1[k].subItems.length; l++) { + subItems2.add(SubItem.fromJson(subItems1[k].subItems[l])); + } + subItems1[k].subItems = subItems2; + subItems2 = []; + } + subItems[j].subItems = subItems1; + subItems1 = []; + } else if (subItems[j].type == 'child') { + isChild = true; + for (int k = 0; k < subItems[j].subItems.length; k++) { + subItems1.add(SubItem.fromJson(subItems[j].subItems[k])); + } + subItems[j].subItems = subItems1; + subItems1 = []; + } else { + isSample = true; + subItems1.add(subItems[j]); + } + } + if (isSample) { + SampleModel.controlList1[i].sampleList = subItems1; + subItems1 = []; + isSample = false; + } else if (isChild) { + SampleModel.controlList1[i].childList = subItems; + subItems1 = []; + isChild = false; + } -class ChartDataCollection { - ChartDataCollection(this.year, this.category, this.numeric, this.sales1, - this.sales2, this.sales3, this.sales4); - final DateTime year; - final String category; - final num numeric; - final num sales1; - final num sales2; - final num sales3; - final num sales4; + SampleModel.controlList1[i].subItems = subItems; + subItems = []; + } } -class DoughnutData { - DoughnutData(this.xVal, this.yVal, [this.text, this.radius]); - final String xVal; - final int yVal; +class ChartSampleData { + ChartSampleData( + {this.x, + this.y, + this.xValue, + this.yValue, + this.yValue2, + this.yValue3, + this.pointColor, + this.size, + this.text}); + final dynamic x; + final num y; + final dynamic xValue; + final num yValue; + final num yValue2; + final num yValue3; + final Color pointColor; + final num size; final String text; - final String radius; -} - -class ChartData { - ChartData(this.xVal, this.yVal, [this.radius]); - final String xVal; - final int yVal; - final String radius; } diff --git a/lib/model/view.dart b/lib/model/view.dart new file mode 100644 index 00000000..80f638ab --- /dev/null +++ b/lib/model/view.dart @@ -0,0 +1,422 @@ +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:url_launcher/url_launcher.dart'; + +class LayoutPage extends StatefulWidget { + const LayoutPage({Key key}) : super(key: key); + + @override + _LayoutPageState createState() => _LayoutPageState(); +} + +class _LayoutPageState extends State { + @override + void initState() { + super.initState(); + } + + @override + void dispose() { + super.dispose(); + } + + @override + // ignore: must_call_super + Widget build(BuildContext context) { + int _index = 0; + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) => Theme( + data: model.themeData, + child: SafeArea( + child: DefaultTabController( + length: model.controlList[model.selectedIndex].subItems.length, + child: Scaffold( + appBar: AppBar( + leading: IconButton( + icon: Icon(Icons.arrow_back), + onPressed: () => Navigator.pop(context, false), + ), + backgroundColor: model.backgroundColor, + bottom: + (model.controlList[model.selectedIndex].sampleList != + null && + model.controlList[model.selectedIndex] + .displayType == + 'card') + ? null + : TabBar( + onTap: (int index){ + _index = index; + }, + indicator: const UnderlineTabIndicator( + borderSide: BorderSide( + width: 5.0, + color: Color.fromRGBO(252, 220, 0, 1)), + ), + isScrollable: true, + tabs: _getTabs( + model.controlList[model.selectedIndex] + .subItems, + 'parent'), + ), + title: Text( + model.controlList[model.selectedIndex].title + .toString(), + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 16.0, + color: Colors.white, + letterSpacing: 0.3)), + actions: (model.controlList[model.selectedIndex] + .sampleList != + null && + model.controlList[model.selectedIndex] + .displayType != + 'card' && model.controlList[model.selectedIndex].sampleList[_index].codeLink != null && + model.controlList[model.selectedIndex].sampleList[_index].codeLink !='') + ? [ + 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(model.controlList[model.selectedIndex].sampleList[_index].codeLink); + }, + ), + ), + ), + ] + : null, + ), + body: TabBarView( + physics: const NeverScrollableScrollPhysics(), + children: + model.controlList[model.selectedIndex].sampleList != + null + ? _getSamples( + model, + model.controlList[model.selectedIndex] + .sampleList, + model.controlList[model.selectedIndex] + .displayType) + : (model.controlList[model.selectedIndex] + .childList != + null && + _checkType(model + .controlList[model.selectedIndex] + .subItems)) + ? _getChildTabViewChildren( + model, + model.controlList[model.selectedIndex] + .childList) + : _getParentTabViewChildren( + model, + model.controlList[model.selectedIndex] + .subItems))), + ), + ))); + } + + bool _checkType(List list) { + for (int i = 0; i < list.length; i++) { + if (list[i].type != 'child') { + return false; + } + } + return true; + } + + List _getSamples( + SampleModel model, List list, String displayType) => + displayType == 'card' + ? _getCardViewChildren(model, list) + : _getFullViewChildren(model, list); + + List _getTabs(List list, [String tabView]) { + final List tabs = []; + for (int i = 0; i < list.length; i++) { + if (list.isNotEmpty) { + final String str = _getStatus(list[i]); + tabs.add(Tab( + child: Row( + children: [ + Text(list[i].title.toString() + (str != '' ? ' ' : ''), + style: tabView != 'parent' + ? const TextStyle( + fontSize: 14, fontWeight: FontWeight.normal) + : const TextStyle(fontSize: 15)), + str == '' + ? Container() + : Container( + height: 20, + width: 20, + decoration: BoxDecoration( + color: str == 'N' + ? const Color.fromRGBO(101, 193, 0, 1) + : str == 'U' + ? const Color.fromRGBO(245, 166, 35, 1) + : Colors.transparent, + shape: BoxShape.circle, + ), + alignment: Alignment.center, + child: Text( + str, + style: TextStyle(fontSize: tabView != 'parent'? 11 : 12, color: Colors.white), + ), + ), + ], + ))); + } + } + return tabs; + } + + List _getFullViewChildren(SampleModel model, List list) { + final List tabs = []; + for (int j = 0; j < list.length; j++) { + model.sampleWidget[list[j].key][1].sample = list[j]; + tabs.add(Container(child: model.sampleWidget[list[j].key][1])); + } + return tabs; + } + + List _getCardViewChildren(SampleModel model, List list) { + final List tabChildren = []; + for (int i = 0; i < list.length; i++) { + tabChildren.add(ListView.builder( + cacheExtent: (list.length).toDouble(), + addAutomaticKeepAlives: true, + itemCount: list.length, + itemBuilder: (BuildContext context, int position) { + final String status = list[position].status; + return Container( + color: model.slidingPanelColor, + padding: const EdgeInsets.all(5.0), + child: Column( + crossAxisAlignment: CrossAxisAlignment.stretch, + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Card( + elevation: 2, + color: model.cardThemeColor, + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(3.0), + ), + child: Column( + children: [ + InkWell( + splashColor: Colors.grey.withOpacity(0.4), + onTap: () { + Feedback.forLongPress(context); + onTapSampleItem(context, list[position], model); + }, + child: Padding( + padding: const EdgeInsets.fromLTRB(10, 5, 10, 5), + child: Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text( + '${list[position].title}', + textAlign: TextAlign.left, + softWrap: true, + textScaleFactor: 1, + overflow: TextOverflow.fade, + style: TextStyle( + fontFamily: 'MontserratMedium', + fontSize: 16.0, + color: model.textColor, + letterSpacing: 0.2), + ), + Container( + child: Row( + children: [ + Container( + decoration: BoxDecoration( + color: (status != null && status != '') + ? (status == 'New' || status == 'new' + ? const Color.fromRGBO( + 101, 193, 0, 1) + : const Color.fromRGBO( + 245, 166, 35, 1)) + : Colors.transparent, + shape: BoxShape.rectangle, + borderRadius: + const BorderRadius.all( + Radius.circular(10.0))), + padding: const EdgeInsets.fromLTRB( + 6, 3, 6, 3), + child: Text( + (status == 'New' || status == 'new') + ? 'New' + : (status == 'Updated' || status == 'updated') ? 'Updated' : '', + style: const TextStyle(color: Colors.white))), + const Padding( + padding: EdgeInsets.only(left: 15), + ), + Container( + height: 24, + width: 24, + color: Colors.transparent, + child: Padding( + padding: const EdgeInsets.fromLTRB( + 5, 0, 5, 5), + child: Image.asset( + 'images/fullscreen.png', + fit: BoxFit.contain, + height: 20, + width: 20, + color: model.listIconColor), + ), + ), + ], + )), + ]), + ), + ), + InkWell( + onTap: () {}, + splashColor: Colors.grey.withOpacity(0.4), + child: Padding( + padding: const EdgeInsets.fromLTRB(5, 5, 5, 5), + child: SizedBox( + width: double.infinity, + height: 230, + child: model.sampleWidget[list[position].key] + [0]), + ), + ), + ], + ), + ), + ], + ), + ); + })); + } + return tabChildren; + } + + ///if child type given to control subitems + List _getChildTabViewChildren(SampleModel model, List list) { + final List tabs = []; + for (int i = 0; i < list.length; i++) { + if (list[i].subItems.isNotEmpty) { + tabs.add(Container( + alignment: Alignment.center, + child: DefaultTabController( + length: list[i].subItems.length, + child: Scaffold( + appBar: list[i].displayType == 'card' + ? null + : PreferredSize( + child: AppBar( + backgroundColor: + const Color.fromRGBO(241, 241, 241, 1), + bottom: TabBar( + unselectedLabelColor: Colors.black, + labelColor: Colors.blue, + indicatorColor: Colors.transparent, + indicatorWeight: 0.1, + isScrollable: true, + tabs: _getTabs(list[i].subItems), + ), + ), + preferredSize: const Size.fromHeight(46.1), + ), + body: TabBarView( + physics: const NeverScrollableScrollPhysics(), + children: _getSamples( + model, list[i].subItems, list[i].displayType)))), + )); + } + } + return tabs; + } + + ///if parent type given to control's subitem + List _getParentTabViewChildren( + SampleModel model, List list) { + final List tabs = []; + for (int i = 0; i < list.length; i++) { + if (list[i].subItems.isNotEmpty) { + tabs.add(Container( + alignment: Alignment.center, + child: DefaultTabController( + length: list[i].subItems.length, + child: Scaffold( + appBar: + list[i].type == 'child' && list[i].displayType == 'card' + ? null + : PreferredSize( + child: AppBar( + backgroundColor: + const Color.fromRGBO(241, 241, 241, 1), + bottom: TabBar( + unselectedLabelColor: Colors.black, + labelColor: Colors.blue, + indicatorColor: Colors.transparent, + indicatorWeight: 0.1, + isScrollable: true, + tabs: _getTabs(list[i].subItems), + ), + ), + preferredSize: const Size.fromHeight(46.1), + ), + body: TabBarView( + physics: const NeverScrollableScrollPhysics(), + children: list[i].type == 'child' + ? _getSamples( + model, list[i].subItems, list[i].displayType) + : _getChildTabViewChildren( + model, list[i].subItems)))), + )); + } + } + return tabs; + } + + String _getStatus(SubItem item) { + String status = ''; + if (item.subItems == null) { + status = (item.status == 'new' || item.status == 'New') + ? 'N' + : (item.status == 'updated' || item.status == 'Updated') ? 'U' : ''; + } else { + int newCount = 0; + int updateCount = 0; + for (int i = 0; i < item.subItems.length; i++) { + if (item.subItems[i].subItems == null) { + if (item.subItems[i].status == 'New' || + item.subItems[i].status == 'new') { + newCount++; + } else if (item.subItems[i].status == 'Updated' || + item.subItems[i].status == 'updated') { + updateCount++; + } + } else { + for (int j = 0; j < item.subItems[i].subItems.length; j++) { + if (item.subItems[i].subItems[j].status == 'New' || + item.subItems[i].subItems[j].status == 'new') { + newCount++; + } else if (item.subItems[i].subItems[j].status == 'Updated' || + item.subItems[i].subItems[j].status == 'updated') { + updateCount++; + } + } + } + } + status = (newCount != 0 && newCount == item.subItems.length) + ? 'N' + : (newCount != 0 || updateCount != 0) ? 'U' : ''; + } + return status; + } +} diff --git a/lib/sample_browser.dart b/lib/sample_browser.dart index 4aafd46e..87fe723c 100755 --- a/lib/sample_browser.dart +++ b/lib/sample_browser.dart @@ -2,8 +2,8 @@ import 'dart:async'; import 'dart:typed_data'; import 'dart:ui' as ui; import 'package:flutter/services.dart'; -import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart'; import 'package:flutter_examples/widgets/animateOpacityWidget.dart'; +import 'package:flutter_examples/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/search_bar.dart'; import 'package:flutter_examples/widgets/widget.dart'; @@ -13,9 +13,9 @@ import 'package:flutter/material.dart'; import 'model/helper.dart'; import 'model/model.dart'; +class SampleBrowser extends StatelessWidget { -class SampleBrowser extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( @@ -38,7 +38,7 @@ class _HomePageState extends State { Color darkThemeSelected; Color darkThemeSelectedTextColor; List defaultBorderColor; - SampleListModel sampleListModel; + SampleModel sampleListModel; List colorPaletteWidgets; List colors; final dynamic controller = ScrollController(); @@ -54,23 +54,23 @@ class _HomePageState extends State { @override void initState() { _currentThemeData = ThemeData.light(); - sampleListModel = SampleListModel(); + sampleListModel = SampleModel(); lightThemeSelected = sampleListModel.backgroundColor; - darkThemeSelected = const Color.fromRGBO(249, 249, 249, 1); + darkThemeSelected = const Color.fromRGBO(79, 85, 102, 1); lightThemeSelectedTextColor = Colors.white; - darkThemeSelectedTextColor = const Color.fromRGBO(51, 51, 51, 1); + darkThemeSelectedTextColor = const Color.fromRGBO(255, 255, 255, 1); defaultBorderColor = []; - addColors(); - init(); + _addColors(); + _init(); super.initState(); } - Future init() async { + Future _init() async { final ByteData data = await rootBundle.load('images/dashline.png'); - image = await loadImage(Uint8List.view(data.buffer)); + image = await _loadImage(Uint8List.view(data.buffer)); } - Future loadImage(List img) async { + Future _loadImage(List img) async { final Completer completer = Completer(); ui.decodeImageFromList(img, (ui.Image img) { setState(() { @@ -88,16 +88,17 @@ class _HomePageState extends State { final dynamic smallestDimension = MediaQuery.of(context).size.shortestSide; final bool useMobileLayout = smallestDimension < 600; sampleListModel.isTargetMobile = useMobileLayout; - return ScopedModel( + return ScopedModel( model: sampleListModel, - child: ScopedModelDescendant( + child: ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => MaterialApp( + builder: (BuildContext context, _, SampleModel model) => + MaterialApp( debugShowCheckedModeBanner: false, home: SafeArea( child: Scaffold( resizeToAvoidBottomPadding: true, - drawer: getSideDrawer(model), + drawer: _getSideDrawer(model), appBar: PreferredSize( preferredSize: const Size.fromHeight(60.0), child: Container( @@ -119,315 +120,277 @@ class _HomePageState extends State { fontSize: 18, fontFamily: 'MontserratMedium'))), actions: [ - Padding( + Container( padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon(Icons.settings, - color: Colors.white), - onPressed: () { - _showSettingsPanel(model); - }, - ), + height: 40, + width: 40, + child: IconButton( + icon: Icon(Icons.settings, color: Colors.white), + onPressed: () { + _showSettingsPanel(model); + }, ), ), ], ), )), - body: Scaffold( - backgroundColor: model.slidingPanelColor, - body: SafeArea( - child: ListView.builder( - controller: controller, - physics: const ClampingScrollPhysics(), - itemCount: 2, - itemBuilder: (BuildContext context, num index) { - return Material( - color: model.backgroundColor, - child: CustomListView( - header: Container( - color: model.backgroundColor, - child: Column( - children: [ - index != 0 - ? Container( - color: model.backgroundColor, - height: 100.0, - padding: const EdgeInsets.symmetric( - horizontal: 0.0), - alignment: Alignment.centerLeft, - child: Column( - crossAxisAlignment: - CrossAxisAlignment.stretch, - children: [ - Padding( - padding: const EdgeInsets - .fromLTRB( - 20, 20, 20, 0), - child: Container( - height: 50, - child: SearchBar( - sampleListModel: - model)), - ), - Padding( - padding: const EdgeInsets - .fromLTRB(0, 10, 0, 0), - child: Container( - height: 20, - width: double.infinity, - decoration: BoxDecoration( - color: model - .slidingPanelColor, - border: Border.all( - color: model - .slidingPanelColor), - borderRadius: const BorderRadius - .only( - topLeft: - Radius - .circular( - 12.0), - topRight: - Radius - .circular( - 12.0)), - boxShadow: [ - BoxShadow( - color: model - .slidingPanelColor, - offset: const Offset( - 0, 2.0), - blurRadius: - 0.25, - ) - ])), - ), - ], - )) - : Container( - height: 0, - color: model.backgroundColor), - ], - ), - ), - content: Container( - color: model.backgroundColor, + body: _getBodyWidget(model)), + ), + ), + )); + } + + Scaffold _getBodyWidget(SampleModel model) { + return Scaffold( + backgroundColor: model.slidingPanelColor, + body: SafeArea( + child: ListView.builder( + controller: controller, + physics: const ClampingScrollPhysics(), + itemCount: 2, + itemBuilder: (BuildContext context, num index) { + return Material( + color: model.backgroundColor, + child: CustomListView( + header: Container( + color: model.backgroundColor, + child: Column( + children: [ + index != 0 + ? Container( + color: model.backgroundColor, + height: 100.0, + padding: + const EdgeInsets.symmetric(horizontal: 0.0), + alignment: Alignment.centerLeft, + child: Column( + crossAxisAlignment: + CrossAxisAlignment.stretch, + children: [ + Padding( + padding: const EdgeInsets.fromLTRB( + 20, 20, 20, 0), + child: Container( + height: 50, + child: SearchBar( + sampleListModel: model)), + ), + Padding( + padding: const EdgeInsets.fromLTRB( + 0, 10, 0, 0), + child: Container( + height: 20, + width: double.infinity, + decoration: BoxDecoration( + color: model.slidingPanelColor, + border: Border.all( + color: model + .slidingPanelColor), + borderRadius: + const BorderRadius.only( + topLeft: + Radius.circular(12.0), + topRight: Radius.circular( + 12.0)), + boxShadow: [ + BoxShadow( + color: + model.slidingPanelColor, + offset: const Offset(0, 2.0), + blurRadius: 0.25, + ) + ])), + ), + ], + )) + : Container( + height: 0, color: model.backgroundColor), + ], + ), + ), + content: Container( + color: model.backgroundColor, + child: Column( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: MainAxisAlignment.start, + children: [ + Container( + color: model.backgroundColor, + width: double.infinity, + child: index == 0 + ? Padding( + padding: + const EdgeInsets.fromLTRB(20, 0, 0, 0), child: Column( crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: MainAxisAlignment.start, + // ignore: prefer_const_literals_to_create_immutables children: [ - Container( - color: model.backgroundColor, - width: double.infinity, - child: index == 0 - ? Padding( - padding: - const EdgeInsets.fromLTRB( - 20, 0, 0, 0), - child: Column( - crossAxisAlignment: - CrossAxisAlignment.start, - children: [ - Padding( - padding: - const EdgeInsets - .fromLTRB( - 0, 0, 0, 0), - child: Text( - 'Flutter UI Widgets', - style: TextStyle( - color: Colors - .white, - fontSize: 25, - letterSpacing: - 0.53, - fontFamily: - 'MontserratBold', - fontWeight: - FontWeight - .bold))), - const Padding( - padding: EdgeInsets - .fromLTRB( - 0, 12, 0, 0), - child: Text( - 'Fast . Fluid . Flexible', - style: TextStyle( - color: - Colors.white, - fontSize: 14, - letterSpacing: - 0.26, - fontFamily: - 'MontserratBold', - fontWeight: - FontWeight - .normal)), - ), - ], - )) - : Container( - color: model.slidingPanelColor, - child: Padding( - padding: - const EdgeInsets.fromLTRB( - 0, 0, 0, 20), - child: Column( - crossAxisAlignment: - CrossAxisAlignment - .start, - children: - getListViewChildrens( - model)), - )), + const Text('Flutter UI Widgets', + style: TextStyle( + color: Colors.white, + fontSize: 25, + letterSpacing: 0.53, + fontFamily: 'MontserratBold', + fontWeight: FontWeight.bold)), + const Padding( + padding: + EdgeInsets.fromLTRB(0, 12, 0, 0), + child: Text('Fast . Fluid . Flexible', + style: TextStyle( + color: Colors.white, + fontSize: 14, + letterSpacing: 0.26, + fontFamily: 'MontserratBold', + fontWeight: FontWeight.normal)), ), ], - ), + )) + : Container( + color: model.slidingPanelColor, + padding: + const EdgeInsets.fromLTRB(0, 0, 0, 20), + child: Column( + crossAxisAlignment: + CrossAxisAlignment.start, + children: _getListViewChildrens(model)), ), - ), - ); - }), + ), + ], ), - )), - ), - ), - )); + ), + ), + ); + }), + ), + ); } - List getListViewChildrens(SampleListModel model) { + List _getListViewChildrens(SampleModel model) { List items; items = []; for (int i = 0; i < model.controlList.length; i++) { - items.add(Padding( + items.add(Container( padding: const EdgeInsets.fromLTRB(0, 2, 0, 0), - child: Container( - color: model.slidingPanelColor, - child: ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Material( - color: model.slidingPanelColor, - elevation: 0.0, - child: InkWell( - splashColor: Colors.grey.withOpacity(0.4), - onTap: () { - Feedback.forLongPress(context); - onTapControlItem(context, model, i); - }, - child: Container( - child: ListTile( - leading: Image.asset(model.controlList[i].image, - fit: BoxFit.cover), - title: Row( - mainAxisAlignment: MainAxisAlignment.spaceBetween, - children: [ - Text( - model.controlList[i].title, - textAlign: TextAlign.left, - softWrap: true, - textScaleFactor: 1, - overflow: TextOverflow.fade, - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: model.textColor, - letterSpacing: 0.3, - fontFamily: 'MontserratBold'), + color: model.slidingPanelColor, + child: ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) => + Material( + color: model.slidingPanelColor, + elevation: 0.0, + child: InkWell( + splashColor: Colors.grey.withOpacity(0.4), + onTap: () { + Feedback.forLongPress(context); + onTapControlItem(context, model, i); + }, + child: Container( + child: ListTile( + leading: Image.asset(model.controlList[i].image, + fit: BoxFit.cover), + title: Row( + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text( + model.controlList[i].title, + textAlign: TextAlign.left, + softWrap: true, + textScaleFactor: 1, + overflow: TextOverflow.fade, + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 16.0, + color: model.textColor, + letterSpacing: 0.3, + fontFamily: 'MontserratBold'), + ), + model.controlList[i].status!=null ? + Container( + decoration: BoxDecoration( + shape: BoxShape.rectangle, + color: (model.controlList[i].status == 'New' || model.controlList[i].status == 'new') + ? const Color.fromRGBO( + 101, 193, 0, 1) + : (model.controlList[i].status == 'Updated' || model.controlList[i].status == 'updated') + ? const Color.fromRGBO( + 245, 166, 35, 1) + : (model.controlList[i].status == 'Preview' || model.controlList[i].status == 'preview') + ? const Color.fromRGBO( + 238, 245, 255, 1) + : Colors.transparent, + borderRadius: const BorderRadius.only( + topLeft: Radius.circular(10), + bottomLeft: Radius.circular(10))), + padding: + const EdgeInsets.fromLTRB(7, 3, 6, 3), + child: Text(model.controlList[i].status, + style: TextStyle( + color: (model.controlList[i].status == 'Preview' || model.controlList[i].status == 'preview') ? const Color.fromRGBO(0, 98, 255, 1) : Colors.white, + fontSize: 12))):Container() + ]), + subtitle: Padding( + padding: + const EdgeInsets.fromLTRB(0.0, 7.0, 0.0, 0.0), + child: Text( + model.controlList[i].description, + textAlign: TextAlign.left, + softWrap: true, + textScaleFactor: 1, + overflow: TextOverflow.fade, + style: TextStyle( + fontWeight: FontWeight.normal, + fontSize: 13, + letterSpacing: 0.24, + fontFamily: 'MontserratMedium', + color: model.listDescriptionTextColor, ), - Container( - decoration: BoxDecoration( - shape: BoxShape.rectangle, - color: model.controlList[i].status == 'New' - ? const Color.fromRGBO(101, 193, 0, 1) - : model.controlList[i].status == 'Updated' - ? const Color.fromRGBO( - 245, 166, 35, 1) - : model.controlList[i].status == 'Preview' - ? const Color.fromRGBO( - 238, 245, 255, 1) - : Colors.transparent, - borderRadius: const BorderRadius.only( - topLeft: Radius.circular(10), - bottomLeft: Radius.circular(10))), - padding: const EdgeInsets.fromLTRB(7, 3, 6, 3), - child: Text(model.controlList[i].status, - style: TextStyle( - color: model.controlList[i].status == - 'Preview' - ? const Color.fromRGBO(0, 98, 255, 1) - : Colors.white, - fontSize: 12))) - ]), - subtitle: Padding( - padding: - const EdgeInsets.fromLTRB(0.0, 7.0, 0.0, 0.0), - child: Text( - model.controlList[i].description, - textAlign: TextAlign.left, - softWrap: true, - textScaleFactor: 1, - overflow: TextOverflow.fade, - style: TextStyle( - fontWeight: FontWeight.normal, - fontSize: 13, - letterSpacing: 0.24, - fontFamily: 'MontserratMedium', - color: model.listDescriptionTextColor, ), ), ), - ), - )))), - ), + )))), )); if (i != model.controlList.length - 1) { items.add(const Divider(height: 15.0)); } } + return _getSearchedItems(items, model); + } + + List _getSearchedItems(List items, SampleModel model) { for (int i = 0; i < model.sampleList.length; i++) { - items.add(ScopedModelDescendant( + items.add(ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Material( + builder: (BuildContext context, _, SampleModel model) => Material( elevation: 0.0, color: model.slidingPanelColor, child: InkWell( splashColor: Colors.grey.withOpacity(0.4), onTap: () { Feedback.forLongPress(context); - onTapSampleItem(context, model.sampleList[i]); + onTapSampleItem(context, model.sampleList[i], model); }, child: Container( height: 40, width: double.infinity, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 20, 5, 0), - child: RichText( - overflow: TextOverflow.ellipsis, - textAlign: TextAlign.left, - softWrap: true, - maxLines: 1, - text: TextSpan( - children: [ - TextSpan( - text: '${model.sampleList[i].title} in ', - style: TextStyle( - fontFamily: 'MontserratMedium', - fontWeight: FontWeight.normal, - fontSize: 14.0, - color: model.textColor, - letterSpacing: 0.3)), - TextSpan( - text: '${model.sampleList[0].category}', - style: TextStyle( - fontSize: 14.0, - fontFamily: 'MontserratBold', - color: model.textColor, - letterSpacing: 0.3)), - ], - ), + padding: const EdgeInsets.fromLTRB(10, 20, 5, 0), + child: RichText( + overflow: TextOverflow.ellipsis, + textAlign: TextAlign.left, + softWrap: true, + maxLines: 1, + text: TextSpan( + children: [ + TextSpan( + text: model.sampleList[i].title , + style: TextStyle( + fontFamily: 'MontserratMedium', + fontWeight: FontWeight.normal, + fontSize: 14.0, + color: model.textColor, + letterSpacing: 0.3)), + ], ), ), ))))); @@ -436,32 +399,32 @@ class _HomePageState extends State { } } - if (model.sampleList.isEmpty&& model.controlList.isEmpty) { - items.add(Padding( - padding: const EdgeInsets.fromLTRB(0, 30, 0, 0), - child: Container( + if (model.sampleList.isEmpty && model.controlList.isEmpty) { + items.add( + Container( + padding: const EdgeInsets.fromLTRB(0, 30, 0, 0), color: model.slidingPanelColor, child: Center( child: Text('No results found', style: TextStyle(color: model.textColor, fontSize: 15)))), - )); + ); } - return items; } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { showRoundedModalBottomSheet( dismissOnTap: false, context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModel( + builder: (BuildContext context) => ScopedModel( model: sampleListModel, - child: ScopedModelDescendant( + child: ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => OrientationBuilder( - builder: (BuildContext context, Orientation orientation) { + builder: (BuildContext context, _, SampleModel model) => + OrientationBuilder( + builder: (BuildContext context, Orientation orientation) { return Container( height: 250, child: Column( @@ -503,26 +466,73 @@ class _HomePageState extends State { // ListView contains a group of widgets that scroll inside the drawer child: ListView( children: [ - Padding( - padding: const EdgeInsets.fromLTRB( - 0, 0, 0, 0), - child: Column(children: [ - Padding( - padding: const EdgeInsets.fromLTRB( - 0, 10, 0, 0), - child: MediaQuery.of(context) - .orientation == - Orientation.portrait - ? Container( - child: Padding( - padding: const EdgeInsets - .fromLTRB(15, 0, 10, 0), - child: Row( - mainAxisAlignment: - MainAxisAlignment - .spaceBetween, - children: [ - Expanded( + Column(children: [ + Padding( + padding: const EdgeInsets.fromLTRB( + 0, 10, 0, 0), + child: MediaQuery.of(context) + .orientation == + Orientation.portrait + ? Container( + padding: + const EdgeInsets.fromLTRB( + 15, 0, 10, 0), + child: Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + children: [ + Expanded( + child: RaisedButton( + color: + lightThemeSelected, + onPressed: () => + _toggleLightTheme( + model), + child: Text( + 'Light theme', + style: TextStyle( + color: + lightThemeSelectedTextColor, + fontFamily: + 'MontserratMedium'), + )), + ), + Expanded( + child: RaisedButton( + color: + darkThemeSelected, + onPressed: () => + _toggleDarkTheme( + model), + child: Text( + 'Dark theme', + style: TextStyle( + color: + darkThemeSelectedTextColor, + fontFamily: + 'MontserratMedium'))), + ) + ], + ), + ) + : Container( + padding: + const EdgeInsets.fromLTRB( + 15, 0, 10, 0), + child: Row( + mainAxisAlignment: + MainAxisAlignment + .spaceBetween, + children: [ + Expanded( + child: Padding( + padding: EdgeInsets + .fromLTRB( + _orientationPadding, + 0, + 0, + 0), child: RaisedButton( elevation: 0, color: @@ -539,7 +549,15 @@ class _HomePageState extends State { 'MontserratMedium'), )), ), - Expanded( + ), + Expanded( + child: Padding( + padding: EdgeInsets + .fromLTRB( + 0, + 0, + _orientationPadding, + 0), child: RaisedButton( elevation: 0, color: @@ -554,74 +572,13 @@ class _HomePageState extends State { darkThemeSelectedTextColor, fontFamily: 'MontserratMedium'))), - ) - ], - ), - )) - : Container( - child: Padding( - padding: const EdgeInsets - .fromLTRB(15, 0, 10, 0), - child: Row( - mainAxisAlignment: - MainAxisAlignment - .spaceBetween, - children: [ - Expanded( - child: Padding( - padding: EdgeInsets - .fromLTRB( - _orientationPadding, - 0, - 0, - 0), - child: RaisedButton( - elevation: 0, - color: - lightThemeSelected, - onPressed: () => - _toggleLightTheme( - model), - child: Text( - 'Light theme', - style: TextStyle( - color: - lightThemeSelectedTextColor, - fontFamily: - 'MontserratMedium'), - )), - ), ), - Expanded( - child: Padding( - padding: EdgeInsets - .fromLTRB( - 0, - 0, - _orientationPadding, - 0), - child: RaisedButton( - elevation: 0, - color: - darkThemeSelected, - onPressed: () => - _toggleDarkTheme( - model), - child: Text( - 'Dark theme', - style: TextStyle( - color: - darkThemeSelectedTextColor, - fontFamily: - 'MontserratMedium'))), - ), - ) - ], - ), - )), - ) - ]), - ), + ) + ], + ), + ), + ) + ]), Padding( padding: const EdgeInsets.fromLTRB( 0, 20, 0, 0), @@ -644,7 +601,7 @@ class _HomePageState extends State { MainAxisAlignment .spaceBetween, children: - addColorPalettes( + _addColorPalettes( model)), ), ), @@ -670,7 +627,7 @@ class _HomePageState extends State { MainAxisAlignment .spaceBetween, children: - addColorPalettes( + _addColorPalettes( model)), ), ), @@ -680,16 +637,10 @@ class _HomePageState extends State { ], ), ), - // This container holds the align - Container( - // This align moves the children to the bottom - child: Align( - alignment: FractionalOffset.bottomCenter, - // This container holds all the children that will be aligned - // on the bottom and should not scroll with the above ListView - child: Container( - color: Colors.blueAccent, + Align( + alignment: FractionalOffset.bottomCenter, child: Container( + color: Colors.blueAccent, height: 50, width: double.infinity, child: RaisedButton( @@ -700,23 +651,21 @@ class _HomePageState extends State { fontFamily: 'MontserratMedium', color: Colors.white))), - ), - ), - )) + )) ], )); }, )))); } - void _applySetting(SampleListModel model) { + void _applySetting(SampleModel model) { model.backgroundColor = _currentBackgroundColor; if (_lightThemeSelected) { lightThemeSelected = model.backgroundColor; - darkThemeSelected = const Color.fromRGBO(249, 249, 249, 1); + darkThemeSelected = const Color.fromRGBO(79, 85, 102, 1); } else { darkThemeSelected = model.backgroundColor; - lightThemeSelected = const Color.fromRGBO(249, 249, 249, 1); + lightThemeSelected = const Color.fromRGBO(79, 85, 102, 1); } model.listIconColor = _currentListIconColor; model.paletteColor = _currentPaletteColor; @@ -726,29 +675,29 @@ class _HomePageState extends State { Navigator.pop(context); } - void _toggleLightTheme(SampleListModel model) { + void _toggleLightTheme(SampleModel model) { _lightThemeSelected = true; lightThemeSelected = model.backgroundColor; - darkThemeSelected = const Color.fromRGBO(249, 249, 249, 1); + darkThemeSelected = const Color.fromRGBO(79, 85, 102, 1); _currentThemeData = ThemeData.light(); lightThemeSelectedTextColor = Colors.white; - darkThemeSelectedTextColor = const Color.fromRGBO(51, 51, 51, 1); + darkThemeSelectedTextColor = const Color.fromRGBO(255, 255, 255, 1); // ignore: invalid_use_of_protected_member model.notifyListeners(); } - void _toggleDarkTheme(SampleListModel model) { + void _toggleDarkTheme(SampleModel model) { _lightThemeSelected = false; darkThemeSelected = model.backgroundColor; - lightThemeSelected = const Color.fromRGBO(249, 249, 249, 1); + lightThemeSelected = const Color.fromRGBO(79, 85, 102, 1); _currentThemeData = ThemeData.dark(); - lightThemeSelectedTextColor = const Color.fromRGBO(51, 51, 51, 1); + lightThemeSelectedTextColor = const Color.fromRGBO(255, 255, 255, 1); darkThemeSelectedTextColor = Colors.white; // ignore: invalid_use_of_protected_member model.notifyListeners(); } - void addColors() { + void _addColors() { colors = []; colors.add(const Color.fromRGBO(0, 116, 228, 1)); colors.add(const Color.fromRGBO(255, 90, 25, 1)); @@ -762,7 +711,7 @@ class _HomePageState extends State { defaultBorderColor.add(Colors.transparent); } - List addColorPalettes(SampleListModel model) { + List _addColorPalettes(SampleModel model) { colorPaletteWidgets = []; for (int i = 0; i < colors.length; i++) { colorPaletteWidgets.add(Material( @@ -773,7 +722,7 @@ class _HomePageState extends State { shape: BoxShape.circle, ), child: InkWell( - onTap: () => changeColorPalette(model, i), + onTap: () => _changeColorPalette(model, i), child: Icon( Icons.brightness_1, size: 40.0, @@ -785,7 +734,7 @@ class _HomePageState extends State { return colorPaletteWidgets; } - void changeColorPalette(SampleListModel model, int index) { + void _changeColorPalette(SampleModel model, int index) { for (int j = 0; j < defaultBorderColor.length; j++) { defaultBorderColor[j] = Colors.transparent; } @@ -797,7 +746,7 @@ class _HomePageState extends State { model.notifyListeners(); } - Widget getSideDrawer(SampleListModel _model) { + Widget _getSideDrawer(SampleModel _model) { return LayoutBuilder( builder: (BuildContext context, BoxConstraints constraints) { double factor; @@ -824,19 +773,15 @@ class _HomePageState extends State { Stack(children: [ _lightThemeSelected ? Container( - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 30, 30, 10), - child: Image.asset('images/image_nav_banner.png', - fit: BoxFit.cover), - ), + padding: const EdgeInsets.fromLTRB(10, 30, 30, 10), + child: Image.asset('images/image_nav_banner.png', + fit: BoxFit.cover), ) : Container( - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 30, 30, 10), - child: Image.asset( - 'images/image_nav_banner_darktheme.png', - fit: BoxFit.cover), - ), + padding: const EdgeInsets.fromLTRB(10, 30, 30, 10), + child: Image.asset( + 'images/image_nav_banner_darktheme.png', + fit: BoxFit.cover), ) ]), Expanded( @@ -883,8 +828,7 @@ class _HomePageState extends State { children: [ const Padding( padding: - EdgeInsets.only( - top: 10)), + EdgeInsets.only(top: 10)), Row(children: [ Image.asset( 'images/product.png', @@ -911,8 +855,7 @@ class _HomePageState extends State { ]), const Padding( padding: - EdgeInsets.only( - top: 10)), + EdgeInsets.only(top: 10)), ], )))), ), @@ -934,8 +877,7 @@ class _HomePageState extends State { children: [ const Padding( padding: - EdgeInsets.only( - top: 10)), + EdgeInsets.only(top: 10)), Row(children: [ Image.asset( 'images/documentation.png', @@ -962,8 +904,7 @@ class _HomePageState extends State { ]), const Padding( padding: - EdgeInsets.only( - top: 10)), + EdgeInsets.only(top: 10)), ], )))), ), @@ -999,8 +940,7 @@ class _HomePageState extends State { ]), ), const Padding( - padding: - EdgeInsets.fromLTRB(0, 15, 0, 0)), + padding: EdgeInsets.fromLTRB(0, 15, 0, 0)), Material( color: Colors.transparent, child: InkWell( @@ -1013,8 +953,7 @@ class _HomePageState extends State { child: Column( children: [ const Padding( - padding: - EdgeInsets.only(top: 10)), + padding: EdgeInsets.only(top: 10)), Row( children: [ Padding( @@ -1056,8 +995,7 @@ class _HomePageState extends State { ], ), const Padding( - padding: - EdgeInsets.only(top: 10)), + padding: EdgeInsets.only(top: 10)), ], ))), Material( @@ -1072,8 +1010,7 @@ class _HomePageState extends State { child: Column( children: [ const Padding( - padding: - EdgeInsets.only(top: 10)), + padding: EdgeInsets.only(top: 10)), Row( children: [ Padding( @@ -1116,8 +1053,7 @@ class _HomePageState extends State { ], ), const Padding( - padding: - EdgeInsets.only(top: 10)), + padding: EdgeInsets.only(top: 10)), ], ))), Material( @@ -1132,8 +1068,7 @@ class _HomePageState extends State { child: Column( children: [ const Padding( - padding: - EdgeInsets.only(top: 10)), + padding: EdgeInsets.only(top: 10)), Row( children: [ Padding( @@ -1176,8 +1111,7 @@ class _HomePageState extends State { ], ), const Padding( - padding: - EdgeInsets.only(top: 10)), + padding: EdgeInsets.only(top: 10)), ], ))), ], @@ -1203,7 +1137,7 @@ class _HomePageState extends State { )), Align( alignment: Alignment.bottomCenter, - child: Text('Version 17.3.14', + child: Text('Version 17.4.40', style: TextStyle( color: _model.drawerTextIconColor, fontSize: 12, @@ -1218,9 +1152,4 @@ class _HomePageState extends State { ))); }); } - - @override - void dispose() { - super.dispose(); - } } diff --git a/lib/sample_details.json b/lib/sample_details.json new file mode 100644 index 00000000..dd73f6cb --- /dev/null +++ b/lib/sample_details.json @@ -0,0 +1,1273 @@ +[ + { + "title": "Calendar", + "description": "Demos of multiple calendar views and its features", + "image": "images/calendar.png", + "status": "New", + "displayType": "tab", + "subItems": [ + { + "type": "sample", + "title": "Getting Started", + "key": "getting_started_calendar", + "codeLink":"https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/getting_started/getting_started.dart" + }, + { + "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": "Agenda View", + "key": "agenda_view_calendar", + "codeLink":"https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/calendar/agenda_view/agenda_view.dart" + } + ] + }, + { + "title": "Radial Gauge", + "description": "Demos of radial gauges and its feature", + "image": "images/circle_gauge.png", + "status": "Updated", + "subItems": [ + { + "type": "child", + "title": "Showcase", + "displayType": "card", + "subItems": [ + { + "type": "sample", + "title": "Gauge compass", + "key": "gauge_compass", + "status": "New", + "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", + "status": "Updated", + "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", + "status": "Updated", + "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", + "status": "Updated", + "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", + "status": "Updated", + "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", + "status": "Updated", + "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": "Pointers", + "displayType": "card", + "subItems": [ + { + "type": "sample", + "title": "Range pointer", + "key": "range_pointer", + "status": "Updated", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/range_pointer.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", + "status": "Updated", + "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": "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": "" + }, + { + "type": "sample", + "title": "Range thickness", + "key": "range_thickness", + "status": "Updated", + "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": "Gauge Annotation", + "displayType": "card", + "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", + "status": "Updated", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/text_annotation.dart", + "description": "" + }, + { + "type": "sample", + "title": "Temparature tracker", + "key": "image_annotation", + "status": "Updated", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/image_annotation.dart", + "description": "" + } + ] + }, + { + "type": "child", + "title": "Pointer Interaction", + "displayType": "card", + "subItems": [ + { + "type": "sample", + "title": "Radial slider" , + "key": "radial_pointerdragging", + "status": "New", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointer_interaction/radial_pointerdragging.dart", + "description": "" + }, + { + "type": "sample", + "title": "Radial range slider", + "key": "radial_slider", + "status": "New", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointer_interaction/radial_slider.dart", + "description": "" + } + ] + }, + { + "type": "child", + "title": "Pointer Animation", + "displayType": "card", + "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", + "status": "Updated", + "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": "" + }, + { + "type": "sample", + "title": "Ease in cric", + "key": "radial_easeincric", + "status": "Updated", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_easeincric.dart", + "description": "" + }, + { + "type": "sample", + "title": "Elastic out", + "key": "radial_elasticout", + "status": "Updated", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_elasticout.dart", + "description": "" + }, + { + "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": "" + }, + { + "type": "sample", + "title": "Ease out back", + "key": "radial_easeout", + "status": "Updated", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_easeout.dart", + "description": "" + } + ] + } + ] + }, + { + "title": "Cartesian Charts", + "description": "Demos of various chart types supported in cartesian axes", + "image": "images/cartesian_types.png", + "status": "Updated", + "subItems": [ + { + "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/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", + "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." + }, + { + "type": "sample", + "title": "Customized line chart", + "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": "" + } + ] + }, + { + "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/column_series/default_column_chart.dart" + }, + { + "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" + }, + { + "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": "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": "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": "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" + } + ] + }, + { + "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/spline_series/default_spline_chart.dart" + }, + { + "title": "Spline with dashes", + "key": "spline_with_dashes", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart" + }, + { + "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" + }, + { + "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", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/customized_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/area_series/default_area_chart.dart" + }, + { + "title": "Area with gradient", + "key": "area_with_gradient", + "description":"This sample depicts the area chart filled with gradient colors.", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/area_with_gradient.dart" + + }, + { + "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": "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": "Spline area chart", + "key": "spline_area", + "status": "New", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/spline_area.dart" + }, + { + "title": "Step area chart", + "key": "step_area", + "status": "New", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/step_area.dart" + }, + { + "title": "Range area chart", + "key": "range_area", + "status": "New", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/range_area.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/bar_series/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/bar_series/bar_with_rounded_corners.dart" + }, + { + "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": "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": "Customized bar chart", + "key": "customized_bar_chart", + "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" + } + ] + }, + { + "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": "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": "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": "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" + } + ] + }, + { + "type": "child", + "title": "Scatter", + "displayType": "card", + "subItems": [ + { + "title": "Default with 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" + }, + { + "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" + } + ] + }, + { + "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/stepLine_series/default_stepline_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/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" + } + ] + }, + { + "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/rangecolumn_series/default_rangecolumn_chart.dart" + }, + { + "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" + }, + { + "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" + } + ] + }, + { + "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/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": "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" + } + ] + }, + { + "type": "child", + "title": "Stacked 100 Charts", + "displayType": "card", + "subItems": [ + { + "title": "100% stacked line chart", + "key": "stacked_line_100_chart", + "status": "New", + "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", + "status": "New", + "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", + "status": "New", + "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", + "status": "New", + "codeLink":"https://github.com/syncfusion/flutter-examples/tree/master/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_bar_100_chart.dart" + } + ] + } + ] + }, + { + "type": "parent", + "title": "Axis Types", + "subItems": [ + { + "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/axis_types/numeric_types/default_numeric_axis.dart", + "description": "", + "status": "" + }, + { + "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": "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": "" + } + ] + }, + { + "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/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/category_arranged_by_index.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." + }, + { + "title": "Label placement", + "key": "category_label_placement", + "codeLink": "https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/category_types/category_label_placement.dart", + "description": "", + "status": "" + } + ] + }, + { + "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/axis_types/date_time_types/default_datetime_axis.dart", + "description": "", + "status": "" + }, + { + "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/datetime_axis_with_label_format.dart", + "description": "", + "status": "" + } + ] + }, + { + "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/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": "" + } + ] + } + ] + }, + { + "type": "child", + "title": "Axis Features", + "displayType": "card", + "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" + }, + { + "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" + }, + { + "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" + }, + { + "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" + }, + { + "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": "Plot band", + "key": "plot_band", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/plot_band/plot_band.dart" + }, + { + "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" + } + ] + }, + { + "type": "parent", + "title": "Series Features", + "subItems": [ + { + "type": "child", + "title": "Marker", + "displayType": "card", + "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", + "code Link":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/data_label/default_datalabels.dart" + } + ] + }, + { + "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/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/series_features/annotation/chart_with_watermark.dart" + } + ] + }, + { + "type": "child", + "title": "Sorting", + "displayType": "card", + "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" + } + ] + }, + { + "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/series_features/animation/series_animation.dart" + }, + { + "title": "Dynamic update", + "key": "dynamic_animation", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/animation/dynamic_animation.dart" + } + ] + }, + { + "type": "child", + "title": "Empty Points", + "displayType": "card", + "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" + } + ] + } + ] + }, + { + "type": "child", + "title": "Legend", + "displayType": "card", + "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" + }, + { + "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": "parent", + "title": "User Interactions", + "subItems": [ + { + "type": "child", + "title": "Tooltip", + "displayType": "card", + "subItems": [ + { + "title": "Default tooltip", + "key": "default_tooltip", + "description":"Tooltip is enabled in this sample and to see a tooltip in action, tap the data points in the chart.", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/tooltip/default_tooltip.dart" + }, + { + "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", + "status":"New", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/tooltip/tooltip_position.dart" + } + ] + }, + { + "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 it and swipe the zoomed chart to pan it.", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming.dart" + }, + { + "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/user_interactions/zooming_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/user_interactions/zooming_panning/zooming_with_custom_buttons.dart" + } + ] + }, + { + "type": "child", + "title": "Crosshair", + "displayType": "card", + "subItems": [ + { + "title": "Chart with crosshair", + "key": "chart_with_crosshair", + "status": "Updated", + "description":"Crosshair is enabled in this sample. Tap the chart to display a crosshair and drag the chart to change the position of the crosshair continuously.", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart" + } + ] + }, + { + "type": "child", + "title": "Trackball", + "displayType": "card", + "subItems": [ + { + "title": "Chart with trackball", + "key": "chart_with_trackball", + "status": "Updated", + "description":"Trackball is enabled in this sample. Tap the chart to display the trackball and drag the chart to change the position of the trackball continuously.", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/trackball/chart_with_trackball.dart" + } + ] + }, + { + "type": "child", + "title": "Selection", + "displayType": "card", + "subItems": [ + { + "title": "Selection Modes", + "key": "selection_modes", + "description":"This sample depicts the selection feature in a chart. Tap the data points to select or unselect it.", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/selection/selection_modes.dart" + } + ] + } + ] + }, + { + "type": "parent", + "title": "Real-time Charts", + "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", + "status": "New", + "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": "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": "child", + "title": "Update Data Source", + "displayType": "card", + "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/dynamic_updates/update_data_source/update_data_source.dart" + } + ] + } + ] + } + ] + }, + { + "title": "Circular Charts", + "description": "Demos of various circular chart types including pie and doughnut", + "image": "images/circle_series.png", + "status": "Updated", + "subItems": [ + { + "type": "parent", + "title": "Chart Types", + "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" + }, + { + "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" + } + ] + }, + { + "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" + }, + { + "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" + } + ] + }, + { + "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" + } + ] + }, + { + "type": "child", + "title": "User Interactions", + "displayType": "card", + "subItems": [ + { + "title": "Tooltip", + "key": "pie_tooltip_position", + "status": "New", + "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" + }, + { + "title": "Selection", + "key": "circular_selection", + "codeLink":"https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/user_interactions/selection/circular_selection.dart" + } + ] + } + ] + }, + { + "title": "Pyramid Chart", + "description": "Interactive demos of pyramid chart", + "image": "images/pyramid.png", + "status": "", + "displayType": "card", + "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" + }, + { + "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": "Funnel Chart", + "description": "Interactive demos of funnel charts", + "image": "images/funnel.png", + "status": "", + "displayType": "card", + "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" + }, + { + "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" + } + ] + } +] \ No newline at end of file diff --git a/lib/sample_list.dart b/lib/sample_list.dart new file mode 100644 index 00000000..98c2acf4 --- /dev/null +++ b/lib/sample_list.dart @@ -0,0 +1,320 @@ +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/chart/axis_features/axis_crossing/axis_crossing.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_recurrence.dart'; +import 'samples/chart/axis_features/plot_band/plot_band.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/area_with_emptypoints.dart'; +import 'samples/chart/cartesian_charts/area_series/area_with_gradient.dart'; +import 'samples/chart/cartesian_charts/area_series/default_area_chart.dart'; +import 'samples/chart/cartesian_charts/area_series/range_area.dart'; +import 'samples/chart/cartesian_charts/area_series/spline_area.dart'; +import 'samples/chart/cartesian_charts/area_series/step_area.dart'; +import 'samples/chart/cartesian_charts/area_series/vertical_area_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/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/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/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/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/default_scatter_chart.dart'; +import 'samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.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/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/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/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/radialbar_series/customized_radialbar_chart.dart'; +import 'samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart'; +import 'samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart'; +import 'samples/chart/circular_charts/user_interactions/selection/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/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/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/dynamic_animation.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/empty_point/chart_with_empty_points.dart'; +import 'samples/chart/series_features/marker/various_marker_shapes.dart'; +import 'samples/chart/series_features/sorting/sorting_options.dart'; +import 'samples/chart/user_interactions/crosshair/chart_with_crosshair.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/trackball/chart_with_trackball.dart'; +import 'samples/chart/user_interactions/zooming_panning/pinch_zooming/pinch_zooming.dart'; +import 'samples/chart/user_interactions/zooming_panning/selection_zooming/selection_zooming.dart'; +import 'samples/chart/user_interactions/zooming_panning/zooming_with_custom_button/zooming_with_custom_buttons.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/annotation/direct_compass.dart'; +import 'samples/gauge/annotation/image_annotation.dart'; +import 'samples/gauge/annotation/text_annotation.dart'; +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/range_colors.dart'; +import 'samples/gauge/axis_feature/tick_customization.dart'; +import 'samples/gauge/pointer_interaction/radial_pointerdragging.dart'; +import 'samples/gauge/pointer_interaction/radial_slider.dart'; +import 'samples/gauge/pointers/multiple_needle.dart'; +import 'samples/gauge/pointers/multiple_ranges.dart'; +import 'samples/gauge/pointers/radial_marker.dart'; +import 'samples/gauge/pointers/text_pointer.dart'; +import 'samples/gauge/ranges/multiple_ranges.dart'; +import 'samples/gauge/ranges/range_datalabels.dart'; +import 'samples/gauge/ranges/range_thickness.dart'; +import 'samples/gauge/showcase/clock_sample.dart'; +import 'samples/gauge/showcase/distance_tracker.dart'; +import 'samples/gauge/showcase/gauge_compass.dart'; +import 'samples/gauge/showcase/gauge_overview.dart'; + +Map> getSampleWidget() { + return >{ + //cartesian charts + 'default_line_chart':[getDefaultLineChart(true), LineDefault()], + 'line_with_dashes':[getDashedLineChart(true),LineDashed()], + 'multi_colored_line':[getMultiColorLineChart(true),LineMultiColor()], + 'customized_line_chart':[getCustomizedLineChart(true),CustomizedLine()], + 'default_column_chart':[getDefaultColumnChart(true),ColumnDefault()], + 'column_with_rounded_corners':[getRoundedColumnChart(true),ColumnRounded()], + 'back_to_back_column': [getBackColumnChart(true),ColumnBack()], + 'column_with_track':[getTrackerColumnChart(true), ColumnTracker()], + 'column_width_and_spacing':[getSpacingColumnChart(true),ColumnSpacing()], + 'customized_column_chart':[getCustomizedColumnChart(true),ColumnVertical()], + 'default_spline_chart':[getDefaultSplineChart(true),SplineDefault()], + 'spline_with_dashes':[getDashedSplineChart(true),SplineDashed()], + 'spline_types':[getTypesSplineChart(true),SplineTypes()], + 'vertical_spline_chart':[getVerticalSplineChart(true),SplineVertical()], + 'customized_spline_chart':[getCustomizedSplineChart(true),SplineCustomization()], + 'default_area_chart': [getDefaultAreaChart(true),AreaDefault()], + 'area_with_gradient':[getGradientAreaChart(true),AreaGradient()], + 'area_with_emptypoints':[getEmptyPointAreaChart(true),AreaEmpty()], + 'vertical_area_chart':[getVerticalAreaChart(true),AreaVertical()], + 'range_area':[getRangeAreaChart(true),RangeArea()], + 'step_area':[getStepAreaChart(true),StepArea()], + 'spline_area':[getSplineAreaChart(true),SplineArea()], + 'default_bar_chart':[getDefaultBarChart(true),BarDefault()], + 'bar_with_rounded_corners':[getRoundedBarChart(true),BarRounded()], + 'bar_width_and_spacing':[getSpacingBarChart(true),BarSpacing()], + 'bar_with_track':[getTrackerBarChart(true), BarTracker()], + 'customized_bar_chart': [getCustomizedBarChart(true),BarCustomization()], + 'default_bubble_chart':[getDefaultBubbleChart(true),BubbleDefault()], + 'bubble_with_various_colors':[getPointColorBubbleChart(true),BubblePointColor()], + 'bubble_filled_with_gradient':[getGradientBubbleChart(true),BubbleGradient()], + 'bubble_with_multiple_series':[getMultipleSeriesBubbleChart(true),BubbleMultiSeries()], + 'default_scatter_chart':[getDefaultScatterChart(true),ScatterDefault()], + 'scatter_with_various_shapes':[getShapesScatterChart(true),ScatterShapes()], + 'default_stepline_chart':[getDefaultStepLineChart(true),StepLineDefault()], + 'stepline_with_dashes':[getDashedStepLineChart(true),StepLineDashed()], + 'vertical_stepline_chart':[getVerticalStepLineChart(true),StepLineVertical()], + 'default_rangecolumn_chart':[getDefaultRangeColumnChart(true),RangeColumnDefault()], + 'vertical_rangecolumn_chart':[getRangeBarChart(true),RangeBarChart()], + 'rangecolumn_with_track':[getRangeColumnwithTrack(true),RangeColumnWithTrack()], + 'stacked_line_chart':[getStackedLineChart(true),StackedLineChart()], + 'stacked_area_chart':[getStackedAreaChart(true),StackedAreaChart()], + 'stacked_column_chart':[getStackedColumnChart(true),StackedColumnChart()], + 'stacked_bar_chart':[getStackedBarChart(true), StackedBarChart()], + 'stacked_area_100_chart':[getStackedArea100Chart(true), StackedArea100Chart()], + 'stacked_bar_100_chart':[getStackedBar100Chart(true), StackedBar100Chart()], + 'stacked_column_100_chart':[getStackedColumn100Chart(true), StackedColumn100Chart()], + 'stacked_line_100_chart':[getStackedLine100Chart(true), StackedLine100Chart()], + 'default_numeric_axis':[getDefaultNumericAxisChart(true),NumericDefault()], + 'numeric_axis_with_label_format':[getLabelNumericAxisChart(true),NumericLabel()], + 'inversed_numeric_axis':[getInversedNumericAxisChart(true),NumericInverse()], + 'default_category_axis':[getDefaultCategoryAxisChart(true),CategoryDefault()], + 'category_arranged_by_index':[getIndexedCategoryAxisChart(true),CategoryIndexed()], + 'category_label_placement':[getTicksCategoryAxisChart(true),CategoryTicks()], + 'default_datetime_axis':[getDefaultDateTimeAxisChart(true),DateTimeDefault()], + 'datetime_axis_with_label_format':[getLabelDateTimeAxisChart(true),DateTimeLabel()], + 'default_logarithmic_axis':[getDefaultLogarithmicAxisChart(true),LogarithmicAxisDefault()], + 'inversed_logarithmic_axis':[getInversedLogarithmicAxisChart(true),LogarithmicAxisInversed()], + //Axis Features + 'axis_crossing':[getAxisCrossingSample(true),AxisCrossing()], + 'edgelabel_placement':[getEdgeLabelPlacementChart(true),EdgeLabel()], + 'handling_label_collision':[getLabelIntersectActionChart(true),LabelAction()], + 'multiple_axis_chart':[getMultipleAxisLineChart(true),MultipleAxis()], + 'opposed_axes':[getOpposedNumericAxisChart(true),NumericOpposed()], + 'plot_band_recurrence':[getPlotBandRecurrenceChart(true),PlotBandRecurrence()], + 'plot_band':[getPlotBandChart(true),PlotBandDefault()], + + //Series Features + 'dynamic_animation':[getDynamicAnimationChart(true),CartesianDynamicAnimation()], + 'series_animation':[getDefaultAnimationChart(true),AnimationDefault()], + 'chart_with_annotation':[getWatermarkAnnotationChart(true),AnnotationWatermark()], + 'chart_with_watermark':[getDefaultAnnotationChart(true),AnnotationDefault()], + 'default_datalabels':[getDataLabelDefaultChart(true),DataLabelDefault()], + 'chart_with_empty_points':[getEmptyPointChart(true),EmptyPoints()], + 'various_marker_shapes':[getMarkerDefaultChart(true),MarkerDefault()], + 'sorting_options':[getDefaultSortingChart(true),SortingDefault()], + + //Legend + 'chart_with_customized_legend':[getLegendCustomizedChart(true),LegendCustomized()], + 'chart_with_legend':[getLegendDefaultChart(true),LegendDefault()], + 'legend_with_various_options':[getLegendOptionsChart(true),LegendOptions()], + 'cartesian_legend_various_options':[getCartesianLegendOptionsChart(true),CartesianLegendOptions()], + + //User Interaction + 'chart_with_crosshair':[getDefaultCrossHairChart(true),DefaultCrossHair()], + 'selection_modes':[getDefaultSelectionChart(true),DefaultSelection()], + 'default_tooltip':[getDefaultTooltipChart(true),DefaultTooltip()], + 'chart_with_trackball':[getDefaultTrackballChart(true),DefaultTrackball()], + 'pinch_zooming':[getDefaultPanningChart(true),DefaultPanning()], + 'selection_zooming':[getDefaultZoomingChart(true),DefaultZooming()], + 'zooming_with_custom_buttons':[getButtonZoomingChart(true),ButtonZooming()], + 'tooltip_position':[getCartesianTooltipPositionChart(true),CartesianTooltipPosition()], + 'circular_selection':[getCircularSelectionChart(true),CircularSelection()], + 'pie_tooltip_position':[getPieTooltipPositionChart(true),PieTooltipPosition()], + + //Dynamic updates + 'add_remove_points':[getAddRemovePointsChart(true),AddDataPoints()], + 'add_remove_series':[getAddRemoveSeriesChart(true),AddSeries()], + 'real_time_spline_chart':[getLiveUpdateChart(true),LiveUpdate()], + 'vertical_live_chart':[getVerticalLineUpdateChart(true),VerticalLineLiveUpdate()], + 'update_data_source':[getUpdateDataSourceChart(true),UpdateDataSource()], + 'real_time_line_chart':[getLiveLineChart(true),LiveLineChart()], + + //Pie + 'default_pie_chart':[getDefaultPieChart(true),PieDefault()], + 'pie_with_grouping':[getGroupingPieChart(true),PieGrouping()], + 'pie_with_smart_labels':[getSmartLabelPieChart(true),PieSmartLabels()], + 'pie_with_various_radius':[getRadiusPieChart(true),PieRadius()], + 'semi_pie_chart':[getSemiPieChart(true),PieSemi()], + + //Doughnut + 'default_doughnut_chart':[getDefaultDoughnutChart(true),DoughnutDefault()], + 'doughnut_with_center_elevation':[getElevationDoughnutChart(true),DoughnutElevation()], + 'doughnut_with_color_mapping':[getDoughnutCustomizationChart(true),DoughnutCustomization()], + 'doughnut_with_rounded_corners':[getRoundedDoughnutChart(true),DoughnutRounded()], + 'semi_doughnut_chart':[getSemiDoughnutChart(true),DoughnutSemi()], + + //Radialbar + 'customized_radialbar_chart':[getCustomizedRadialBarChart(true),RadialBarCustomized()], + 'default_radialbar_chart':[getDefaultRadialBarChart(true),RadialBarDefault()], + 'radialbar_with_legend':[getAngleRadialBarChart(true),RadialBarAngle()], + + //Funnel + 'default_funnel_chart':[getDefaultFunnelChart(true),FunnelDefault()], + 'funnel_with_legend':[getLegendFunnelChart(true),FunnelLegend()], + 'funnel_with_smart_labels':[getFunnelSmartLabelChart(true),FunnelSmartLabels()], + + //Pyramid + 'default_pyramid_chart':[getDefaultPyramidChart(true),PyramidDefault()], + 'pyramid_with_legend':[getLegendPyramidChart(true),PyramidLegend()], + 'pyramid_with_smart_labels':[getPyramidSmartLabelChart(true),PyramidSmartLabels()], + + + // Calendar Samples + 'getting_started_calendar':[getGettingStartedCalendar(), GettingStartedCalendar()], + 'recurrence_calendar':[getRecurrenceCalendar(), RecurrenceCalendar()], + 'agenda_view_calendar':[getAgendaViewCalendar(), AgendaViewCalendar()], + 'appointment_editor_calendar':[getAppointmentEditorCalendar(), CalendarAppointmentEditor()], + + //Gauge + 'radial_bounce':[getRadialBounceOutExample(true), RadialBounceOutExample()], + 'radial_easeanimation':[getRadialEaseExample(true), RadialEaseExample()], + 'radial_easeincric':[getRadialEaseInCircExample(true), RadialEaseInCircExample()], + 'radial_easeout':[getRadialEaseOutAnimation(true), RadialEaseOutAnimation()], + 'radial_elasticout':[getRadialElasticOutAnimation(true), RadialElasticOutAnimation()], + 'radial_linearanimation':[getRadialLinearAnimation(true), RadialLinearAnimation()], + 'radial_slowmiddle':[getRadialSlowMiddleAnimation(true), RadialSlowMiddleAnimation()], + 'direct_compass':[getRadialCompass(true), RadialCompass()], + 'image_annotation':[getRadialImageAnnotation(true), RadialImageAnnotation()], + 'text_annotation':[getRadialTextAnnotation(true), RadialTextAnnotation()], + 'custom_labels':[getGaugeCustomLabels(true), GaugeCustomLabels()], + 'default_gauge_view':[getDefaultRadialGauge(true), RadialGaugeDefault()], + 'multiple_axis':[getMultipleAxisGauge(true), MultipleAxisExample()], + 'non_linearable':[getRadialNonLinearLabel(true), RadialNonLinearLabel()], + 'radiallabel_customization':[getRadialLabelCustomization(true), RadialLabelCustomization()], + 'range_colors':[getRangeColorForLabels(true), RangeColorForLabels()], + 'tick_customization':[getRadialTickCustomization(true), RadialTickCustomization()], + 'radial_pointerdragging':[getRadialPointerDragging(true), RadialPointerDragging()], + 'radial_slider':[getRadialSlider(true), RadialSlider()], + 'multiple_needle':[getMultipleNeedleExample(true), MultipleNeedleExample()], + 'range_pointer':[getMultipleRangePointerExampleGauge(true), MultipleRangePointerExample()], + 'radial_marker':[getRadialMarkerExample(true), RadialMarkerExample()], + 'text_pointer':[getRadialTextPointer(true), RadialTextPointer()], + 'multiple_ranges':[getMultipleRangesExampleGauge(true), MultipleRangesExample()], + 'range_datalabels':[getRangeDataLabelExample(true), RangeDataLabelExample()], + 'range_thickness':[getRangeThicknessExampleGauge(true), RangeThicknessExample()], + 'clock_sample':[getClockExample(true), ClockExample()], + 'distance_tracker':[getDistanceTrackerExample(true), DistanceTrackerExample()], + 'gauge_overview':[getGaugeOverviewExample(true), GaugeOverviewExample()], + 'gauge_compass':[getGaugeCompassExample(true), GaugeCompassExample()] + }; +} diff --git a/lib/samples/calendar/agenda_view/agenda_view.dart b/lib/samples/calendar/agenda_view/agenda_view.dart new file mode 100644 index 00000000..922c3f41 --- /dev/null +++ b/lib/samples/calendar/agenda_view/agenda_view.dart @@ -0,0 +1,229 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; +import 'package:flutter/scheduler.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +//ignore: must_be_immutable +class AgendaViewCalendar extends StatefulWidget { + AgendaViewCalendar({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _AgendaViewCalendarState createState() => _AgendaViewCalendarState(sample); +} + +class _AgendaViewCalendarState extends State { + _AgendaViewCalendarState(this.sample); + + final SubItem sample; + bool panelOpen; + final ValueNotifier frontPanelVisible = ValueNotifier(true); + List subjectCollection; + List colorCollection; + List meetings; + MeetingDataSource events; + DateTime selectedDate; + + @override + void initState() { + panelOpen = frontPanelVisible.value; + frontPanelVisible.addListener(_subscribeToValueNotifier); + meetings = []; + selectedDate = DateTime.now(); + addAppointmentDetails(); + addAppointments(); + events = MeetingDataSource(meetings); + super.initState(); + } + + void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + + @override + void didUpdateWidget(AgendaViewCalendar oldWidget) { + super.didUpdateWidget(oldWidget); + frontPanelVisible.removeListener(_subscribeToValueNotifier); + frontPanelVisible.addListener(_subscribeToValueNotifier); + } + + @override + Widget build(BuildContext context) { + return getAgendaViewCalendar(events, onViewChanged, selectedDate); + } + + void addAppointmentDetails() { + subjectCollection = []; + subjectCollection.add('General Meeting'); + subjectCollection.add('Plan Execution'); + subjectCollection.add('Project Plan'); + subjectCollection.add('Consulting'); + subjectCollection.add('Support'); + subjectCollection.add('Development Meeting'); + subjectCollection.add('Scrum'); + subjectCollection.add('Project Completion'); + subjectCollection.add('Release updates'); + subjectCollection.add('Performance Check'); + + colorCollection = []; + colorCollection.add(const Color(0xFF0F8644)); + colorCollection.add(const Color(0xFF8B1FA9)); + colorCollection.add(const Color(0xFFD20100)); + colorCollection.add(const Color(0xFFFC571D)); + colorCollection.add(const Color(0xFF36B37B)); + colorCollection.add(const Color(0xFF01A1EF)); + colorCollection.add(const Color(0xFF3D4FB5)); + colorCollection.add(const Color(0xFFE47C73)); + colorCollection.add(const Color(0xFF636363)); + colorCollection.add(const Color(0xFF0A8043)); + } + + void addAppointments() { + final Random random = Random(); + final DateTime rangeStartDate = + DateTime.now().add(const Duration(days: -(365 ~/ 2))); + final DateTime rangeEndDate = DateTime.now().add(const Duration(days: 365)); + for (DateTime i = rangeStartDate; + i.isBefore(rangeEndDate); + i = i.add(const Duration(days: 1))) { + final DateTime date = i; + final int count = 1 + random.nextInt(3); + for (int j = 0; j < count; j++) { + final DateTime startDate = DateTime( + date.year, date.month, date.day, 8 + random.nextInt(8), 0, 0); + meetings.add(Meeting( + subjectCollection[random.nextInt(7)], + '', + '', + null, + startDate, + startDate.add(Duration(hours: random.nextInt(3))), + colorCollection[random.nextInt(9)], + false, + '', + '', + '')); + } + } + + // added recurrence appointment + meetings.add(Meeting( + 'Development status', + '', + '', + null, + DateTime.now(), + DateTime.now().add(const Duration(hours: 2)), + colorCollection[random.nextInt(9)], + false, + '', + '', + 'FREQ=WEEKLY;BYDAY=FR;INTERVAL=1')); + } + + void onViewChanged(ViewChangedDetails visibleDatesChangedDetails) { + SchedulerBinding.instance.addPostFrameCallback((_) { + final DateTime currentViewDate = visibleDatesChangedDetails + .visibleDates[visibleDatesChangedDetails.visibleDates.length ~/ 2]; + if (currentViewDate.month == DateTime.now().month && + currentViewDate.year == DateTime.now().year) { + selectedDate = DateTime.now(); + } else { + selectedDate = + DateTime(currentViewDate.year, currentViewDate.month, 01); + } + setState(() {}); + }); + } +} + +SfCalendar getAgendaViewCalendar( + [CalendarDataSource _calendarDataSource, + ViewChangedCallback onViewChanged, + DateTime selectedDate]) { + return SfCalendar( + view: CalendarView.month, + initialSelectedDate: selectedDate, + onViewChanged: onViewChanged, + dataSource: _calendarDataSource, + monthViewSettings: MonthViewSettings(showAgenda: true), + timeSlotViewSettings: TimeSlotViewSettings( + minimumAppointmentDuration: const Duration(minutes: 60)), + ); +} + +class MeetingDataSource extends CalendarDataSource { + MeetingDataSource(this.source); + + List source; + + @override + List get appointments => source; + + @override + DateTime getStartTime(int index) { + return source[index].from; + } + + @override + DateTime getEndTime(int index) { + return source[index].to; + } + + @override + bool isAllDay(int index) { + return source[index].isAllDay; + } + + @override + String getSubject(int index) { + return source[index].eventName; + } + + @override + String getStartTimeZone(int index) { + return source[index].startTimeZone; + } + + @override + String getEndTimeZone(int index) { + return source[index].endTimeZone; + } + + @override + Color getColor(int index) { + return source[index].background; + } + + @override + String getRecurrenceRule(int index) { + return source[index].recurrenceRule; + } +} + +class Meeting { + Meeting( + this.eventName, + this.organizer, + this.contactID, + this.capacity, + this.from, + this.to, + this.background, + this.isAllDay, + this.startTimeZone, + this.endTimeZone, + this.recurrenceRule); + + String eventName; + String organizer; + String contactID; + int capacity; + DateTime from; + DateTime to; + Color background; + bool isAllDay; + String startTimeZone; + String endTimeZone; + String recurrenceRule; +} diff --git a/lib/samples/calendar/appointment_editor/appointment_editor.dart b/lib/samples/calendar/appointment_editor/appointment_editor.dart new file mode 100644 index 00000000..38ecb280 --- /dev/null +++ b/lib/samples/calendar/appointment_editor/appointment_editor.dart @@ -0,0 +1,929 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:intl/intl.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +import '../../../widgets/bottom_sheet.dart'; +import '../../../widgets/customDropDown.dart'; + +//ignore: must_be_immutable +class CalendarAppointmentEditor extends StatefulWidget { + CalendarAppointmentEditor({this.sample, Key key}) : super(key: key); + SubItem sample; + @override + CalendarAppointmentEditorState createState() => CalendarAppointmentEditorState(sample); +} + +List _colorCollection; +List _colorNames; +int _selectedColorIndex = 0; +int _selectedTimeZoneIndex = 0; +List _timeZoneCollection; +DataSource _events; +Appointment _selectedAppointment; +DateTime _startDate; +TimeOfDay _startTime; +DateTime _endDate; +TimeOfDay _endTime; +bool _isAllDay; +String _subject = ''; +String _notes = ''; + +class CalendarAppointmentEditorState extends State { + CalendarAppointmentEditorState(this.sample); + + final SubItem sample; + bool panelOpen; + final ValueNotifier frontPanelVisible = ValueNotifier(true); + CalendarView _calendarView; + List subjectCollection; + List appointments; + + String _view = 'Month'; + + final List _viewList = + [ + 'Day', + 'Week', + 'Work week', + 'Month', + 'Timeline day', + 'Timeline week', + 'Timeline work week' + ].toList(); + + @override + void initState() { + panelOpen = frontPanelVisible.value; + frontPanelVisible.addListener(_subscribeToValueNotifier); + _calendarView = CalendarView.month; + appointments = getAppointmentDetails(); + _events = DataSource(appointments); + _selectedAppointment = null; + _selectedColorIndex = 0; + _selectedTimeZoneIndex = 0; + _subject = ''; + _notes = ''; + super.initState(); + } + + void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + + @override + void didUpdateWidget(CalendarAppointmentEditor oldWidget) { + super.didUpdateWidget(oldWidget); + frontPanelVisible.removeListener(_subscribeToValueNotifier); + frontPanelVisible.addListener(_subscribeToValueNotifier); + } + + @override + Widget build([BuildContext context]) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + resizeToAvoidBottomInset: false, + resizeToAvoidBottomPadding: false, + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 5), + child: Container( + child: getAppointmentEditorCalendar( + _calendarView, _events, onCalendarTapped)), + ), + floatingActionButton: FloatingActionButton( + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, + )); + }); + } + + void onCalendarViewChange(String value, SampleModel model) { + _view = value; + if (value == 'Day') { + _calendarView = CalendarView.day; + } + else if (value == 'Week') { + _calendarView = CalendarView.week; + } + else if (value == 'Work week') { + _calendarView = CalendarView.workWeek; + } + else if (value == 'Month') { + _calendarView = CalendarView.month; + } + else if (value == 'Timeline day') { + _calendarView = CalendarView.timelineDay; + } + else if (value == 'Timeline week') { + _calendarView = CalendarView.timelineWeek; + } + else if (value == 'Timeline work week') { + _calendarView = CalendarView.timelineWorkWeek; + } + + setState(() {}); + } + + void onCalendarTapped(CalendarTapDetails calendarTapDetails) { + if (calendarTapDetails.targetElement != CalendarElement.calendarCell && + calendarTapDetails.targetElement != CalendarElement.appointment) { + return; + } + + setState(() { + _selectedAppointment = null; + _isAllDay = false; + _selectedColorIndex = 0; + _selectedTimeZoneIndex = 0; + _subject = ''; + _notes = ''; + if (_calendarView == CalendarView.month) { + _calendarView = CalendarView.day; + _view = 'Day'; + } + else { + if (calendarTapDetails.appointments != null && + calendarTapDetails.appointments.length == 1) { + final Appointment appointment = calendarTapDetails.appointments[0]; + _startDate = appointment.startTime; + _endDate = appointment.endTime; + _isAllDay = appointment.isAllDay; + _selectedColorIndex = _colorCollection.indexOf(appointment.color); + _selectedTimeZoneIndex = + appointment.startTimeZone == '' ? 0 : _timeZoneCollection.indexOf( + appointment.startTimeZone); + _subject = appointment.subject == '(No title)'? '':appointment.subject; + _notes = appointment.notes; + _selectedAppointment = appointment; + } + else { + final DateTime date = calendarTapDetails.date; + _startDate = date; + _endDate = date.add(const Duration(hours: 1)); + } + + _startTime = TimeOfDay(hour: _startDate.hour, minute: _startDate.minute); + _endTime = TimeOfDay(hour: _endDate.hour, minute: _endDate.minute); + Navigator.push( + context, + // ignore: always_specify_types + MaterialPageRoute(builder: (BuildContext context) => AppointmentEditor()), + ); + } + }); + } + + List getAppointmentDetails() { + final List appointmentCollection = []; + subjectCollection = []; + subjectCollection.add('General Meeting'); + subjectCollection.add('Plan Execution'); + subjectCollection.add('Project Plan'); + subjectCollection.add('Consulting'); + subjectCollection.add('Support'); + subjectCollection.add('Development Meeting'); + subjectCollection.add('Scrum'); + subjectCollection.add('Project Completion'); + subjectCollection.add('Release updates'); + subjectCollection.add('Performance Check'); + + _colorCollection = []; + _colorCollection.add(const Color(0xFF0F8644)); + _colorCollection.add(const Color(0xFF8B1FA9)); + _colorCollection.add(const Color(0xFFD20100)); + _colorCollection.add(const Color(0xFFFC571D)); + _colorCollection.add(const Color(0xFF85461E)); + _colorCollection.add(const Color(0xFFFF00FF)); + _colorCollection.add(const Color(0xFF3D4FB5)); + _colorCollection.add(const Color(0xFFE47C73)); + _colorCollection.add(const Color(0xFF636363)); + + _colorNames = []; + _colorNames.add('Green'); + _colorNames.add('Purple'); + _colorNames.add('Red'); + _colorNames.add('Orange'); + _colorNames.add('Caramel'); + _colorNames.add('Magenta'); + _colorNames.add('Blue'); + _colorNames.add('Peach'); + _colorNames.add('Gray'); + + _timeZoneCollection = []; + _timeZoneCollection.add('Default Time'); + _timeZoneCollection.add('AUS Central Standard Time'); + _timeZoneCollection.add('AUS Eastern Standard Time'); + _timeZoneCollection.add('Afghanistan Standard Time'); + _timeZoneCollection.add('Alaskan Standard Time'); + _timeZoneCollection.add('Arab Standard Time'); + _timeZoneCollection.add('Arabian Standard Time'); + _timeZoneCollection.add('Arabic Standard Time'); + _timeZoneCollection.add('Argentina Standard Time'); + _timeZoneCollection.add('Atlantic Standard Time'); + _timeZoneCollection.add('Azerbaijan Standard Time'); + _timeZoneCollection.add('Azores Standard Time'); + _timeZoneCollection.add('Bahia Standard Time'); + _timeZoneCollection.add('Bangladesh Standard Time'); + _timeZoneCollection.add('Belarus Standard Time'); + _timeZoneCollection.add('Canada Central Standard Time'); + _timeZoneCollection.add('Cape Verde Standard Time'); + _timeZoneCollection.add('Caucasus Standard Time'); + _timeZoneCollection.add('Cen. Australia Standard Time'); + _timeZoneCollection.add('Central America Standard Time'); + _timeZoneCollection.add('Central Asia Standard Time'); + _timeZoneCollection.add('Central Brazilian Standard Time'); + _timeZoneCollection.add('Central Europe Standard Time'); + _timeZoneCollection.add('Central European Standard Time'); + _timeZoneCollection.add('Central Pacific Standard Time'); + _timeZoneCollection.add('Central Standard Time'); + _timeZoneCollection.add('China Standard Time'); + _timeZoneCollection.add('Dateline Standard Time'); + _timeZoneCollection.add('E. Africa Standard Time'); + _timeZoneCollection.add('E. Australia Standard Time'); + _timeZoneCollection.add('E. South America Standard Time'); + _timeZoneCollection.add('Eastern Standard Time'); + _timeZoneCollection.add('Egypt Standard Time'); + _timeZoneCollection.add('Ekaterinburg Standard Time'); + _timeZoneCollection.add('FLE Standard Time'); + _timeZoneCollection.add('Fiji Standard Time'); + _timeZoneCollection.add('GMT Standard Time'); + _timeZoneCollection.add('GTB Standard Time'); + _timeZoneCollection.add('Georgian Standard Time'); + _timeZoneCollection.add('Greenland Standard Time'); + _timeZoneCollection.add('Greenwich Standard Time'); + _timeZoneCollection.add('Hawaiian Standard Time'); + _timeZoneCollection.add('India Standard Time'); + _timeZoneCollection.add('Iran Standard Time'); + _timeZoneCollection.add('Israel Standard Time'); + _timeZoneCollection.add('Jordan Standard Time'); + _timeZoneCollection.add('Kaliningrad Standard Time'); + _timeZoneCollection.add('Korea Standard Time'); + _timeZoneCollection.add('Libya Standard Time'); + _timeZoneCollection.add('Line Islands Standard Time'); + _timeZoneCollection.add('Magadan Standard Time'); + _timeZoneCollection.add('Mauritius Standard Time'); + _timeZoneCollection.add('Middle East Standard Time'); + _timeZoneCollection.add('Montevideo Standard Time'); + _timeZoneCollection.add('Morocco Standard Time'); + _timeZoneCollection.add('Mountain Standard Time'); + _timeZoneCollection.add('Mountain Standard Time (Mexico)'); + _timeZoneCollection.add('Myanmar Standard Time'); + _timeZoneCollection.add('N. Central Asia Standard Time'); + _timeZoneCollection.add('Namibia Standard Time'); + _timeZoneCollection.add('Nepal Standard Time'); + _timeZoneCollection.add('New Zealand Standard Time'); + _timeZoneCollection.add('Newfoundland Standard Time'); + _timeZoneCollection.add('North Asia East Standard Time'); + _timeZoneCollection.add('North Asia Standard Time'); + _timeZoneCollection.add('Pacific SA Standard Time'); + _timeZoneCollection.add('Pacific Standard Time'); + _timeZoneCollection.add('Pacific Standard Time (Mexico)'); + _timeZoneCollection.add('Pakistan Standard Time'); + _timeZoneCollection.add('Paraguay Standard Time'); + _timeZoneCollection.add('Romance Standard Time'); + _timeZoneCollection.add('Russia Time Zone 10'); + _timeZoneCollection.add('Russia Time Zone 11'); + _timeZoneCollection.add('Russia Time Zone 3'); + _timeZoneCollection.add('Russian Standard Time'); + _timeZoneCollection.add('SA Eastern Standard Time'); + _timeZoneCollection.add('SA Pacific Standard Time'); + _timeZoneCollection.add('SA Western Standard Time'); + _timeZoneCollection.add('SE Asia Standard Time'); + _timeZoneCollection.add('Samoa Standard Time'); + _timeZoneCollection.add('Singapore Standard Time'); + _timeZoneCollection.add('South Africa Standard Time'); + _timeZoneCollection.add('Sri Lanka Standard Time'); + _timeZoneCollection.add('Syria Standard Time'); + _timeZoneCollection.add('Taipei Standard Time'); + _timeZoneCollection.add('Tasmania Standard Time'); + _timeZoneCollection.add('Tokyo Standard Time'); + _timeZoneCollection.add('Tonga Standard Time'); + _timeZoneCollection.add('Turkey Standard Time'); + _timeZoneCollection.add('US Eastern Standard Time'); + _timeZoneCollection.add('US Mountain Standard Time'); + _timeZoneCollection.add('UTC'); + _timeZoneCollection.add('UTC+12'); + _timeZoneCollection.add('UTC-02'); + _timeZoneCollection.add('UTC-11'); + _timeZoneCollection.add('Ulaanbaatar Standard Time'); + _timeZoneCollection.add('Venezuela Standard Time'); + _timeZoneCollection.add('Vladivostok Standard Time'); + _timeZoneCollection.add('W. Australia Standard Time'); + _timeZoneCollection.add('W. Central Africa Standard Time'); + _timeZoneCollection.add('W. Europe Standard Time'); + _timeZoneCollection.add('West Asia Standard Time'); + _timeZoneCollection.add('West Pacific Standard Time'); + _timeZoneCollection.add('Yakutsk Standard Time'); + + final DateTime today = DateTime.now(); + final Random random = Random(); + for (int month = -1; month < 2; month++) { + for (int day = -5; day < 5; day++) { + for (int hour = 9; hour < 18; hour += 5) { + appointmentCollection.add( + Appointment( + startTime: today.add(Duration(days: (month * 30) + day)).add( + Duration(hours: hour)), + endTime: today.add(Duration(days: (month * 30) + day)).add( + Duration(hours: hour + 2)), + color: _colorCollection[random.nextInt(9)], + startTimeZone: '', + endTimeZone: '', + notes: '', + isAllDay: false, + subject: subjectCollection[random.nextInt(7)], + ) + ); + } + } + } + + return appointmentCollection; + } + + void _showSettingsPanel(SampleModel model) { + final double height = + (MediaQuery + .of(context) + .size + .height > MediaQuery + .of(context) + .size + .width) + ? 0.3 + : 0.4; + showRoundedModalBottomSheet( + dismissOnTap: false, + context: context, + radius: 12.0, + color: model.bottomSheetBackgroundColor, + builder: (BuildContext context) => + ScopedModelDescendant( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => + Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 170, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: MediaQuery + .of(context) + .size + .height * height, + child: Padding( + padding: const EdgeInsets.fromLTRB( + 15, 0, 0, 5), + child: Stack(children: [ + Container( + height: 40, + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight + .w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + Padding( + padding: + const EdgeInsets.fromLTRB( + 10, 50, 0, 0), + child: Container( + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Text('Calendar View ', + style: TextStyle( + fontSize: 16.0, + color: model + .textColor)), + Container( + padding: + const EdgeInsets.fromLTRB( + 15, 0, 0, 0), + height: 50, + width: 200, + child: Align( + alignment: + Alignment.bottomCenter, + child: Theme( + data: Theme.of(context) + .copyWith( + canvasColor: model + .bottomSheetBackgroundColor), + child: DropDown( + value: + _view, + item: _viewList.map( + ( + String value) { + return DropdownMenuItem< + String>( + value: (value != + null) + ? value + : 'Month', + child: Text( + '$value', + textAlign: TextAlign + .center, + style: TextStyle( + color: model + .textColor))); + }).toList(), + valueChanged: ( + dynamic value) { + onCalendarViewChange( + value, model); + }), + ), + )) + ], + ), + ), + ), + ]), + ) + ) + ) + ) + ) + ) + ); + } +} +SfCalendar getAppointmentEditorCalendar([CalendarView _calendarView, CalendarDataSource _calendarDataSource, CalendarTapCallback calendarTapCallback]) { + return SfCalendar(view: _calendarView, + dataSource: _calendarDataSource, + onTap: calendarTapCallback, + initialDisplayDate: DateTime(DateTime + .now() + .year, DateTime + .now() + .month, DateTime + .now() + .day, 0, 0, 0), + monthViewSettings: MonthViewSettings( + appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), + timeSlotViewSettings: TimeSlotViewSettings( + minimumAppointmentDuration: const Duration(minutes: 60))); +} + +class DataSource extends CalendarDataSource { + DataSource(this.source); + + List source; + + @override + List get appointments => source; +} + +class _CalendarColorPicker extends StatefulWidget { + @override + State createState() { + return _CalendarColorPickerState(); + } +} + +class _CalendarColorPickerState extends State<_CalendarColorPicker> { + @override + Widget build(BuildContext context) { + return AlertDialog( + content: Container(width: double.maxFinite,child: + ListView.builder(padding: const EdgeInsets.all(0), + itemCount: _colorCollection.length - 1, + itemBuilder: (BuildContext context, int index) { + return ListTile(contentPadding: const EdgeInsets.all(0), + leading: Icon( + index == _selectedColorIndex + ? Icons.lens + : Icons.trip_origin, + color: _colorCollection[index]), + title: Text(_colorNames[index]), + onTap: () { + setState(() { + _selectedColorIndex = index; + }); + + // ignore: always_specify_types + Future.delayed(const Duration(milliseconds: 200), () { + // When task is over, close the dialog + Navigator.pop(context); + }); + },); + }, + )), + ); + } +} + +class _CalendarTimeZonePicker extends StatefulWidget { + @override + State createState() { + return _CalendarTimeZonePickerState(); + } +} + +class _CalendarTimeZonePickerState extends State<_CalendarTimeZonePicker> { + @override + Widget build(BuildContext context) { + return AlertDialog( + content: Container(width: double.maxFinite, child: + ListView.builder(padding: const EdgeInsets.all(0), + itemCount: _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,), + title: Text(_timeZoneCollection[index]), + onTap: () { + setState(() { + _selectedTimeZoneIndex = index; + }); + + // ignore: always_specify_types + Future.delayed(const Duration(milliseconds: 200), () { + // When task is over, close the dialog + Navigator.pop(context); + }); + },); + }, + )), + ); + } +} + +class AppointmentEditor extends StatefulWidget { + @override + AppointmentEditorState createState() => AppointmentEditorState(); +} + + +class AppointmentEditorState extends State { + Widget _getAppointmentEditor(BuildContext context, Color backgroundColor, + Color defaultColor) { + return Container(color: backgroundColor, + child: ListView( + padding: const EdgeInsets.all(0), + children: [ + ListTile( + contentPadding: const EdgeInsets.fromLTRB(5, 0, 5, 5), + leading: const Text(''), + title: TextField( + controller: TextEditingController(text: _subject), + onChanged: (String value) { + _subject = value; + }, + keyboardType: TextInputType.multiline, + maxLines: null, + + style: TextStyle(fontSize: 25, + color: defaultColor, + fontWeight: FontWeight.w400), + decoration: InputDecoration(border: InputBorder.none, + hintText: 'Add title', + ), + ), + ), + const Divider( + height: 1.0,thickness: 1, + ), + + ListTile( + contentPadding: const EdgeInsets.fromLTRB(5, 2, 5, 2), + leading: Icon(Icons.access_time, color: defaultColor,), + title: + Row( + children: [ + const Expanded( + child: Text('All-day'), + ), + Expanded(child: + Align(alignment: Alignment.centerRight, child: + Switch( + value: _isAllDay, + onChanged: (bool value) { + setState(() { + _isAllDay = value; + }); + }, + )) + ), + ] + ) + ), + + ListTile( + contentPadding: const EdgeInsets.fromLTRB(5, 2, 5, 2), + leading: const Text(''), + title: + Row(crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded(flex: 7, child: + GestureDetector( + child: + Text( + DateFormat('EEE, MMM dd yyyy').format( + _startDate), + textAlign: TextAlign.left), + onTap: () async { + final DateTime date = await showDatePicker( + context: context, + initialDate: _startDate, + firstDate: DateTime(1900), + lastDate: DateTime(2100), + ); + + 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); + }); + } + }), + ), + Expanded(flex: 3, child: _isAllDay ? const Text('') : + GestureDetector( + child: Text(DateFormat('hh:mm a').format(_startDate), + textAlign: TextAlign.right,), + onTap: () async { + final TimeOfDay time = await showTimePicker( + context: context, initialTime: TimeOfDay( + hour: _startTime.hour, + minute: _startTime.minute) + ); + + 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); + }); + } + }) + ), + ] + ) + ), + + ListTile( + contentPadding: const EdgeInsets.fromLTRB(5, 2, 5, 2), + leading: const Text(''), + title: + Row(crossAxisAlignment: CrossAxisAlignment.center, + children: [ + Expanded(flex: 7, child: + GestureDetector( + child: Text( + DateFormat('EEE, MMM dd yyyy').format(_endDate), + textAlign: TextAlign.left,), + onTap: () async { + final DateTime date = await showDatePicker( + context: context, + initialDate: _endDate, + firstDate: DateTime(1900), + lastDate: DateTime(2100), + ); + + if (date != null && date != _endDate) { + setState(() { + final Duration difference = _endDate + .difference(_startDate); + _endDate = DateTime( + date.year, date.month, + date.day, + _endTime.hour, _endTime.minute, 0); + if (_endDate.isBefore(_startDate)) { + _startDate = _endDate.subtract(difference); + _startTime = TimeOfDay(hour: _startDate.hour, + minute: _startDate.minute); + } + }); + } + }), + ), + Expanded(flex: 3, child: _isAllDay ? const Text('') : + GestureDetector( + child: Text(DateFormat('hh:mm a').format(_endDate), + textAlign: TextAlign.right,), + onTap: () async { + final TimeOfDay time = await showTimePicker( + context: context, initialTime: TimeOfDay( + hour: _endTime.hour, + minute: _endTime.minute) + ); + + if (time != null && time != _endTime) { + setState(() { + _endTime = time; + final Duration difference = _endDate + .difference(_startDate); + _endDate = DateTime( + _endDate.year, _endDate.month, + _endDate.day, + _endTime.hour, _endTime.minute, 0); + if (_endDate.isBefore(_startDate)) { + _startDate = _endDate.subtract(difference); + _startTime = TimeOfDay(hour: _startDate.hour, + minute: _startDate.minute); + } + }); + } + }) + ), + ] + ) + ), + + ListTile( + contentPadding: const EdgeInsets.fromLTRB(5, 2, 5, 2), + leading: Icon(Icons.public, color: defaultColor,), + title: Text(_timeZoneCollection[_selectedTimeZoneIndex]), + onTap: () { + showDialog( + context: context, + barrierDismissible: true, + builder: (BuildContext context) { + return _CalendarTimeZonePicker(); + }, + ).then((dynamic value) => setState(() {})); + }, + ), + + const Divider( + height: 1.0,thickness: 1, + ), + + ListTile( + contentPadding: const EdgeInsets.fromLTRB(5, 2, 5, 2), + leading: Icon( + Icons.lens, color: _colorCollection[_selectedColorIndex]), + title: Text(_colorNames[_selectedColorIndex],), + onTap: () { + showDialog( + context: context, + barrierDismissible: true, + builder: (BuildContext context) { + return _CalendarColorPicker(); + }, + ).then((dynamic value) => setState(() {})); + }, + ), + const Divider( + height: 1.0,thickness: 1, + ), + + ListTile( + contentPadding: const EdgeInsets.all(5), + leading: Icon(Icons.subject, color: defaultColor,), + title: TextField( + controller: TextEditingController(text: _notes), + onChanged: (String value) { + _notes = value; + }, + keyboardType: TextInputType.multiline, + maxLines: null, + style: TextStyle(fontSize: 18, + color: defaultColor, + fontWeight: FontWeight.w400), + decoration: InputDecoration(border: InputBorder.none, + hintText: 'Add description', + ), + ), + ), + ], + ) + ); + } + + @override + Widget build([BuildContext context]) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Theme( + data: model.themeData, child: Scaffold( + backgroundColor: model.cardThemeColor, + appBar: AppBar(backgroundColor: _colorCollection[_selectedColorIndex],leading: IconButton( + icon: const Icon(Icons.close, color: Colors.white,), + onPressed: () { + Navigator.pop(context); + },) + , actions: [ + IconButton( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 0), + icon: const Icon(Icons.done, color: Colors.white,), + onPressed: () { + final List appointment = []; + if (_selectedAppointment != null) { + _events.appointments.removeAt( + _events.appointments.indexOf( + _selectedAppointment)); + _events.notifyListeners( + CalendarDataSourceAction.remove, + []..add(_selectedAppointment)); + } + appointment.add( + Appointment( + startTime: _startDate, + endTime: _endDate, + color: _colorCollection[_selectedColorIndex], + startTimeZone: _selectedTimeZoneIndex == 0 + ? '' + : _timeZoneCollection[_selectedTimeZoneIndex], + endTimeZone: _selectedTimeZoneIndex == 0 + ? '' + : _timeZoneCollection[_selectedTimeZoneIndex], + notes: _notes, + isAllDay: _isAllDay, + subject: _subject == ''? '(No title)': _subject, + ) + ); + + _events.appointments.add(appointment[0]); + + _events.notifyListeners( + CalendarDataSourceAction.add, appointment); + _selectedAppointment = null; + + Navigator.pop(context); + }) + ],), + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 5, 5, 5), + child: Stack( + children: [ + _getAppointmentEditor(context, model.cardThemeColor, + model.theme != null && model.theme == Brightness.dark + ? Colors.white + : Colors.black87) + ], + ), + ), + floatingActionButton: _selectedAppointment == null + ? const Text('') + : FloatingActionButton( + onPressed: () { + if (_selectedAppointment != null) { + _events.appointments.removeAt( + _events.appointments.indexOf(_selectedAppointment)); + _events.notifyListeners( + CalendarDataSourceAction.remove, + []..add(_selectedAppointment)); + _selectedAppointment = null; + Navigator.pop(context); + } + }, + child: const Icon(Icons.delete_outline, color: Colors.white), + backgroundColor: model.backgroundColor, + ))); + }); + } +} + diff --git a/lib/samples/calendar/getting_started/getting_started.dart b/lib/samples/calendar/getting_started/getting_started.dart new file mode 100644 index 00000000..b4fe061c --- /dev/null +++ b/lib/samples/calendar/getting_started/getting_started.dart @@ -0,0 +1,350 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; + +import '../../../widgets/bottom_sheet.dart'; +import '../../../widgets/customDropDown.dart'; + +//ignore: must_be_immutable +class GettingStartedCalendar extends StatefulWidget { + GettingStartedCalendar({this.sample, Key key}) : super(key: key); + SubItem sample; + @override + _GettingStartedCalendarState createState() => _GettingStartedCalendarState(sample); +} + +class _GettingStartedCalendarState extends State { + _GettingStartedCalendarState(this.sample); + + final SubItem sample; + bool panelOpen; + final ValueNotifier frontPanelVisible = ValueNotifier(true); + CalendarView _calendarView; + List subjectCollection; + List colorCollection; + List meetings; + MeetingDataSource events; + + String _view = 'Month'; + + final List _viewList = [ + 'Day', + 'Week', + 'Work week', + 'Month', + 'Timeline day', + 'Timeline week', + 'Timeline work week' + ].toList(); + + + @override + void initState() { + panelOpen = frontPanelVisible.value; + frontPanelVisible.addListener(_subscribeToValueNotifier); + _calendarView = CalendarView.month; + meetings = []; + addAppointmentDetails(); + events = MeetingDataSource(meetings); + super.initState(); + } + + void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + + @override + void didUpdateWidget(GettingStartedCalendar oldWidget) { + super.didUpdateWidget(oldWidget); + frontPanelVisible.removeListener(_subscribeToValueNotifier); + frontPanelVisible.addListener(_subscribeToValueNotifier); + } + + @override + Widget build([BuildContext context]) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 5), + child: Container( + child: getGettingStartedCalendar( + _calendarView, events, onViewChanged)), + ), + floatingActionButton: FloatingActionButton( + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, + )); + }); + } + + void onCalendarViewChange(String value, SampleModel model) { + _view = value; + if (value == 'Day') { + _calendarView = CalendarView.day; + } + else if (value == 'Week') { + _calendarView = CalendarView.week; + } + else if (value == 'Work week') { + _calendarView = CalendarView.workWeek; + } + else if (value == 'Month') { + _calendarView = CalendarView.month; + } + else if (value == 'Timeline day') { + _calendarView = CalendarView.timelineDay; + } + else if (value == 'Timeline week') { + _calendarView = CalendarView.timelineWeek; + } + else if (value == 'Timeline work week') { + _calendarView = CalendarView.timelineWorkWeek; + } + + setState(() {}); + } + + void onViewChanged(ViewChangedDetails visibleDatesChangedDetails) { + final List appointment = []; + events.appointments.clear(); + final Random random = Random(); + for (int i = 0; i < visibleDatesChangedDetails.visibleDates.length; i++) { + final DateTime date = visibleDatesChangedDetails.visibleDates[i]; + final int count = 1 + random.nextInt(3); + for (int j = 0; j < count; j++) { + final DateTime startDate = DateTime( + date.year, date.month, date.day, 8 + random.nextInt(8), 0, 0); + appointment.add(Meeting( + subjectCollection[random.nextInt(7)], + '', + '', + null, + startDate, + startDate.add(Duration(hours: random.nextInt(3))), + colorCollection[random.nextInt(9)], + false, + '', + '') + ); + } + } + + for (int i = 0; i < appointment.length; i++) { + events.appointments.add(appointment[i]); + } + + events.notifyListeners(CalendarDataSourceAction.reset, appointment); + } + + void addAppointmentDetails() { + subjectCollection = []; + subjectCollection.add('General Meeting'); + subjectCollection.add('Plan Execution'); + subjectCollection.add('Project Plan'); + subjectCollection.add('Consulting'); + subjectCollection.add('Support'); + subjectCollection.add('Development Meeting'); + subjectCollection.add('Scrum'); + subjectCollection.add('Project Completion'); + subjectCollection.add('Release updates'); + subjectCollection.add('Performance Check'); + + colorCollection = []; + colorCollection.add(const Color(0xFF0F8644)); + colorCollection.add(const Color(0xFF8B1FA9)); + colorCollection.add(const Color(0xFFD20100)); + colorCollection.add(const Color(0xFFFC571D)); + colorCollection.add(const Color(0xFF36B37B)); + colorCollection.add(const Color(0xFF01A1EF)); + colorCollection.add(const Color(0xFF3D4FB5)); + colorCollection.add(const Color(0xFFE47C73)); + colorCollection.add(const Color(0xFF636363)); + colorCollection.add(const Color(0xFF0A8043)); + } + + void _showSettingsPanel(SampleModel model) { + final double height = + (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) + ? 0.3 + : 0.4; + showRoundedModalBottomSheet( + dismissOnTap: false, + context: context, + radius: 12.0, + color: model.bottomSheetBackgroundColor, + builder: (BuildContext context) => ScopedModelDescendant( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 170, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: MediaQuery.of(context).size.height * height, + child: Padding( + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack(children: [ + Container( + height: 40, + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + Padding( + padding: + const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: Container( + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Text('Calendar View ', + style: TextStyle( + fontSize: 16.0, + color: model.textColor)), + Container( + padding: + const EdgeInsets.fromLTRB( + 15, 0, 0, 0), + height: 50, + width: 200, + child: Align( + alignment: + Alignment.bottomCenter, + child: Theme( + data: Theme.of(context) + .copyWith( + canvasColor: model + .bottomSheetBackgroundColor), + child: DropDown( + value: + _view, + item: _viewList.map( + (String value) { + return DropdownMenuItem< + String>( + value: (value != + null) + ? value + : 'Month', + child: Text( + '$value', + textAlign: TextAlign.center, + style: TextStyle( + color: model + .textColor))); + }).toList(), + valueChanged: (dynamic value) { + onCalendarViewChange( + value, model); + }), + ), + )) + ], + ), + ), + ), + ]), + ))))))); + } +} +SfCalendar getGettingStartedCalendar([CalendarView _calendarView, CalendarDataSource _calendarDataSource, ViewChangedCallback viewChangedCallback]) { + return SfCalendar(view: _calendarView, + dataSource: _calendarDataSource, + onViewChanged: viewChangedCallback, + monthViewSettings: MonthViewSettings( + appointmentDisplayMode: MonthAppointmentDisplayMode.appointment), + timeSlotViewSettings: TimeSlotViewSettings( + minimumAppointmentDuration: const Duration(minutes: 60))); +} + +class MeetingDataSource extends CalendarDataSource { + MeetingDataSource(this.source); + + List source; + + @override + List get appointments => source; + + @override + DateTime getStartTime(int index) { + return source[index].from; + } + + @override + DateTime getEndTime(int index) { + return source[index].to; + } + + @override + bool isAllDay(int index) { + return source[index].isAllDay; + } + + @override + String getSubject(int index) { + return source[index].eventName; + } + + @override + String getStartTimeZone(int index) { + return source[index].startTimeZone; + } + + @override + String getEndTimeZone(int index) { + return source[index].endTimeZone; + } + + @override + Color getColor(int index) { + return source[index].background; + } +} + +class Meeting { + Meeting(this.eventName, this.organizer, this.contactID, this.capacity, + this.from, this.to, this.background, this.isAllDay, this.startTimeZone, + this.endTimeZone); + + String eventName; + String organizer; + String contactID; + int capacity; + DateTime from; + DateTime to; + Color background; + bool isAllDay; + String startTimeZone; + String endTimeZone; +} diff --git a/lib/samples/calendar/recurrence/recurrence.dart b/lib/samples/calendar/recurrence/recurrence.dart new file mode 100644 index 00000000..476facc9 --- /dev/null +++ b/lib/samples/calendar/recurrence/recurrence.dart @@ -0,0 +1,465 @@ +import 'dart:math'; + +import 'package:flutter/cupertino.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:syncfusion_flutter_calendar/calendar.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:scoped_model/scoped_model.dart'; + +//ignore: must_be_immutable +class RecurrenceCalendar extends StatefulWidget { + RecurrenceCalendar({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + RecurrenceCalendarState createState() => RecurrenceCalendarState(sample); +} + +class RecurrenceCalendarState extends State { + RecurrenceCalendarState([this.sample]); + + final SubItem sample; + bool panelOpen; + final ValueNotifier frontPanelVisible = ValueNotifier(true); + CalendarView _calendarView; + List _appointments; + bool _showAgenda = false; + List colorCollection; + + String _view = 'Week'; + + final List _viewList = [ + 'Day', + 'Week', + 'Work week', + 'Month', + 'Month agenda', + 'Timeline day', + 'Timeline week', + 'Timeline work week' + ].toList(); + + @override + void initState() { + panelOpen = frontPanelVisible.value; + frontPanelVisible.addListener(_subscribeToValueNotifier); + _calendarView = CalendarView.week; + _appointments = []; + _addColorCollection(); + createRecursiveAppointments(); + super.initState(); + } + + void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + + @override + void didUpdateWidget(RecurrenceCalendar oldWidget) { + super.didUpdateWidget(oldWidget); + frontPanelVisible.removeListener(_subscribeToValueNotifier); + frontPanelVisible.addListener(_subscribeToValueNotifier); + } + + @override + Widget build([BuildContext context]) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 5), + child: Container( + child: getRecurrenceCalendar(_calendarView, + AppointmentDataSource(_appointments), _showAgenda)), + ), + floatingActionButton: FloatingActionButton( + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, + )); + }); + } + + void createRecursiveAppointments() { + final Random random = Random(); + //Recurrence Appointment 1 + final Appointment alternativeDayAppointment = Appointment(); + final DateTime currentDate = DateTime.now(); + final DateTime startTime = + DateTime(currentDate.year, currentDate.month, currentDate.day, 9, 0, 0); + final DateTime endTime = DateTime( + currentDate.year, currentDate.month, currentDate.day, 11, 0, 0); + alternativeDayAppointment.startTime = startTime; + alternativeDayAppointment.endTime = endTime; + alternativeDayAppointment.color = colorCollection[random.nextInt(9)]; + alternativeDayAppointment.subject = 'Scrum meeting'; + final RecurrenceProperties recurrencePropertiesForAlternativeDay = + RecurrenceProperties(); + recurrencePropertiesForAlternativeDay.recurrenceType = RecurrenceType.daily; + recurrencePropertiesForAlternativeDay.interval = 2; + recurrencePropertiesForAlternativeDay.recurrenceRange = + RecurrenceRange.count; + recurrencePropertiesForAlternativeDay.recurrenceCount = 20; + alternativeDayAppointment.recurrenceRule = SfCalendar.generateRRule( + recurrencePropertiesForAlternativeDay, + alternativeDayAppointment.startTime, + alternativeDayAppointment.endTime); + _appointments.add(alternativeDayAppointment); + + //Recurrence Appointment 2 + final Appointment weeklyAppointment = Appointment(); + final DateTime startTime1 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 13, 0, 0); + final DateTime endTime1 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 15, 0, 0); + weeklyAppointment.startTime = startTime1; + weeklyAppointment.endTime = endTime1; + weeklyAppointment.color = colorCollection[random.nextInt(9)]; + weeklyAppointment.subject = 'product development status'; + + final RecurrenceProperties recurrencePropertiesForWeeklyAppointment = + RecurrenceProperties(); + recurrencePropertiesForWeeklyAppointment.recurrenceType = + RecurrenceType.weekly; + recurrencePropertiesForWeeklyAppointment.recurrenceRange = + RecurrenceRange.count; + recurrencePropertiesForWeeklyAppointment.interval = 1; + recurrencePropertiesForWeeklyAppointment.weekDays = [] + ..add(WeekDays.monday); + recurrencePropertiesForWeeklyAppointment.recurrenceCount = 20; + weeklyAppointment.recurrenceRule = SfCalendar.generateRRule( + recurrencePropertiesForWeeklyAppointment, + weeklyAppointment.startTime, + weeklyAppointment.endTime); + _appointments.add(weeklyAppointment); + + final Appointment monthlyAppointment = Appointment(); + final DateTime startTime2 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 14, 0, 0); + final DateTime endTime2 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 15, 0, 0); + monthlyAppointment.startTime = startTime2; + monthlyAppointment.endTime = endTime2; + monthlyAppointment.color = colorCollection[random.nextInt(9)]; + monthlyAppointment.subject = 'Sprint planning meeting'; + + final RecurrenceProperties recurrencePropertiesForMonthlyAppointment = + RecurrenceProperties(); + recurrencePropertiesForMonthlyAppointment.recurrenceType = + RecurrenceType.monthly; + recurrencePropertiesForMonthlyAppointment.recurrenceRange = + RecurrenceRange.count; + recurrencePropertiesForMonthlyAppointment.interval = 1; + recurrencePropertiesForMonthlyAppointment.dayOfMonth = 1; + recurrencePropertiesForMonthlyAppointment.recurrenceCount = 10; + monthlyAppointment.recurrenceRule = SfCalendar.generateRRule( + recurrencePropertiesForMonthlyAppointment, + monthlyAppointment.startTime, + monthlyAppointment.endTime); + _appointments.add(monthlyAppointment); + + final Appointment yearlyAppointment = Appointment(); + final DateTime startTime3 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 12, 0, 0); + final DateTime endTime3 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 14, 0, 0); + yearlyAppointment.startTime = startTime3; + yearlyAppointment.endTime = endTime3; + yearlyAppointment.color = colorCollection[random.nextInt(9)]; + yearlyAppointment.isAllDay = true; + yearlyAppointment.subject = 'Stephen birthday'; + + final RecurrenceProperties recurrencePropertiesForYearlyAppointment = + RecurrenceProperties(); + recurrencePropertiesForYearlyAppointment.recurrenceType = + RecurrenceType.yearly; + recurrencePropertiesForYearlyAppointment.recurrenceRange = + RecurrenceRange.noEndDate; + recurrencePropertiesForYearlyAppointment.interval = 1; + recurrencePropertiesForYearlyAppointment.dayOfMonth = 5; + yearlyAppointment.recurrenceRule = SfCalendar.generateRRule( + recurrencePropertiesForYearlyAppointment, + yearlyAppointment.startTime, + yearlyAppointment.endTime); + _appointments.add(yearlyAppointment); + + final Appointment customDailyAppointment = Appointment(); + final DateTime startTime4 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 17, 0, 0); + final DateTime endTime4 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 18, 0, 0); + customDailyAppointment.startTime = startTime4; + customDailyAppointment.endTime = endTime4; + customDailyAppointment.color = colorCollection[random.nextInt(9)]; + customDailyAppointment.subject = 'General meeting'; + + final RecurrenceProperties recurrencePropertiesForCustomDailyAppointment = + RecurrenceProperties(); + recurrencePropertiesForCustomDailyAppointment.recurrenceType = + RecurrenceType.daily; + recurrencePropertiesForCustomDailyAppointment.recurrenceRange = + RecurrenceRange.noEndDate; + recurrencePropertiesForCustomDailyAppointment.interval = 1; + customDailyAppointment.recurrenceRule = SfCalendar.generateRRule( + recurrencePropertiesForCustomDailyAppointment, + customDailyAppointment.startTime, + customDailyAppointment.endTime); + _appointments.add(customDailyAppointment); + + final Appointment customWeeklyAppointment = Appointment(); + final DateTime startTime5 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 12, 0, 0); + final DateTime endTime5 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 13, 0, 0); + customWeeklyAppointment.startTime = startTime5; + customWeeklyAppointment.endTime = endTime5; + customWeeklyAppointment.color = colorCollection[random.nextInt(9)]; + customWeeklyAppointment.subject = 'performance check'; + + final RecurrenceProperties recurrencePropertiesForCustomWeeklyAppointment = + RecurrenceProperties(); + recurrencePropertiesForCustomWeeklyAppointment.recurrenceType = + RecurrenceType.weekly; + recurrencePropertiesForCustomWeeklyAppointment.recurrenceRange = + RecurrenceRange.endDate; + recurrencePropertiesForCustomWeeklyAppointment.interval = 1; + recurrencePropertiesForCustomWeeklyAppointment.weekDays = [ + WeekDays.monday, + WeekDays.friday + ]; + recurrencePropertiesForCustomWeeklyAppointment.endDate = + DateTime.now().add(const Duration(days: 14)); + customWeeklyAppointment.recurrenceRule = SfCalendar.generateRRule( + recurrencePropertiesForCustomWeeklyAppointment, + customWeeklyAppointment.startTime, + customWeeklyAppointment.endTime); + _appointments.add(customWeeklyAppointment); + + final Appointment customMonthlyAppointment = Appointment(); + final DateTime startTime6 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 16, 0, 0); + final DateTime endTime6 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 18, 0, 0); + customMonthlyAppointment.startTime = startTime6; + customMonthlyAppointment.endTime = endTime6; + customMonthlyAppointment.color = colorCollection[random.nextInt(9)]; + customMonthlyAppointment.subject = 'Sprint end meeting'; + + final RecurrenceProperties recurrencePropertiesForCustomMonthlyAppointment = + RecurrenceProperties(); + recurrencePropertiesForCustomMonthlyAppointment.recurrenceType = + RecurrenceType.monthly; + recurrencePropertiesForCustomMonthlyAppointment.recurrenceRange = + RecurrenceRange.count; + recurrencePropertiesForCustomMonthlyAppointment.interval = 1; + recurrencePropertiesForCustomMonthlyAppointment.dayOfWeek = DateTime.friday; + recurrencePropertiesForCustomMonthlyAppointment.week = 4; + recurrencePropertiesForCustomMonthlyAppointment.recurrenceCount = 12; + customMonthlyAppointment.recurrenceRule = SfCalendar.generateRRule( + recurrencePropertiesForCustomMonthlyAppointment, + customMonthlyAppointment.startTime, + customMonthlyAppointment.endTime); + _appointments.add(customMonthlyAppointment); + + final Appointment customYearlyAppointment = Appointment(); + final DateTime startTime7 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 14, 0, 0); + final DateTime endTime7 = DateTime( + currentDate.year, currentDate.month, currentDate.day, 15, 0, 0); + customYearlyAppointment.startTime = startTime7; + customYearlyAppointment.endTime = endTime7; + customYearlyAppointment.color = colorCollection[random.nextInt(9)]; + customYearlyAppointment.subject = 'Alumini meet'; + + final RecurrenceProperties recurrencePropertiesForCustomYearlyAppointment = + RecurrenceProperties(); + recurrencePropertiesForCustomYearlyAppointment.recurrenceType = + RecurrenceType.yearly; + recurrencePropertiesForCustomYearlyAppointment.recurrenceRange = + RecurrenceRange.count; + recurrencePropertiesForCustomYearlyAppointment.interval = 2; + recurrencePropertiesForCustomYearlyAppointment.month = DateTime.february; + recurrencePropertiesForCustomYearlyAppointment.week = 2; + recurrencePropertiesForCustomYearlyAppointment.dayOfWeek = DateTime.sunday; + recurrencePropertiesForCustomYearlyAppointment.recurrenceCount = 10; + customYearlyAppointment.recurrenceRule = SfCalendar.generateRRule( + recurrencePropertiesForCustomYearlyAppointment, + customYearlyAppointment.startTime, + customYearlyAppointment.endTime); + _appointments.add(customYearlyAppointment); + } + + void _addColorCollection() { + colorCollection = []; + colorCollection.add(const Color(0xFF0F8644)); + colorCollection.add(const Color(0xFF8B1FA9)); + colorCollection.add(const Color(0xFFD20100)); + colorCollection.add(const Color(0xFFFC571D)); + colorCollection.add(const Color(0xFF36B37B)); + colorCollection.add(const Color(0xFF01A1EF)); + colorCollection.add(const Color(0xFF3D4FB5)); + colorCollection.add(const Color(0xFFE47C73)); + colorCollection.add(const Color(0xFF636363)); + colorCollection.add(const Color(0xFF0A8043)); + } + + void onCalendarViewChange(String value, SampleModel model) { + _view = value; + if (value == 'Day') { + _calendarView = CalendarView.day; + } else if (value == 'Week') { + _calendarView = CalendarView.week; + } else if (value == 'Work week') { + _calendarView = CalendarView.workWeek; + } else if (value == 'Month') { + _calendarView = CalendarView.month; + _showAgenda = false; + } else if (value == 'Timeline day') { + _calendarView = CalendarView.timelineDay; + } else if (value == 'Timeline week') { + _calendarView = CalendarView.timelineWeek; + } else if (value == 'Timeline work week') { + _calendarView = CalendarView.timelineWorkWeek; + } + else if(value == 'Month agenda'){ + _calendarView = CalendarView.month; + _showAgenda = true; + } + + setState(() {}); + } + + void _showSettingsPanel(SampleModel model) { + final double height = + (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) + ? 0.3 + : 0.4; + showRoundedModalBottomSheet( + dismissOnTap: false, + context: context, + radius: 12.0, + color: model.bottomSheetBackgroundColor, + builder: (BuildContext context) => ScopedModelDescendant( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 170, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: MediaQuery.of(context).size.height * height, + child: Padding( + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack(children: [ + Container( + height: 40, + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + Padding( + padding: + const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: Container( + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Text('Calendar View ', + style: TextStyle( + fontSize: 16.0, + color: model.textColor)), + Container( + padding: const EdgeInsets.fromLTRB( + 15, 0, 0, 0), + height: 50, + width: 200, + child: Align( + alignment: Alignment.bottomCenter, + child: Theme( + data: Theme.of(context).copyWith( + canvasColor: model + .bottomSheetBackgroundColor), + child: DropDown( + value: _view, + item: _viewList + .map((String value) { + return DropdownMenuItem< + String>( + value: (value != null) + ? value + : 'Week', + child: Text('$value', + textAlign: + TextAlign + .center, + style: TextStyle( + color: model + .textColor))); + }).toList(), + valueChanged: + (dynamic value) { + onCalendarViewChange( + value, model); + }), + ), + )) + ], + ), + ), + ), + ]), + ))))))); + } +} + +SfCalendar getRecurrenceCalendar( + [CalendarView _calendarView, + CalendarDataSource _calendarDataSource, + bool showAgenda]) { + return SfCalendar( + view: _calendarView, + dataSource: _calendarDataSource, + monthViewSettings: MonthViewSettings( + showAgenda: showAgenda, + appointmentDisplayMode: showAgenda != null && showAgenda + ? MonthAppointmentDisplayMode.indicator + : MonthAppointmentDisplayMode.appointment), + ); +} + +class AppointmentDataSource extends CalendarDataSource { + AppointmentDataSource(this.source); + + List source; + + @override + List get appointments => source; +} diff --git a/lib/samples/chart/axis_features/axis_crossing/axis_crossing.dart b/lib/samples/chart/axis_features/axis_crossing/axis_crossing.dart index 9a3a79ba..b0badf99 100644 --- a/lib/samples/chart/axis_features/axis_crossing/axis_crossing.dart +++ b/lib/samples/chart/axis_features/axis_crossing/axis_crossing.dart @@ -1,506 +1,289 @@ -import 'package:flutter_examples/widgets/checkbox.dart'; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/checkbox.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; import 'package:flutter_examples/widgets/custom_button.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; + +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class AxisCrossing extends StatefulWidget { - const AxisCrossing(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + AxisCrossing({this.sample, Key key}) : super(key: key); + SubItem sample; @override _AxisCrossingState createState() => _AxisCrossingState(sample); } class _AxisCrossingState extends State { - _AxisCrossingState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - + _AxisCrossingState(this.sample); + final SubItem sample; @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, AxisCrossingFrontPanel(sample)); } +} - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } +SfCartesianChart getAxisCrossingSample(bool isTileView, + [String _selectedAxis, double _crossAt, bool isPlaceLabelsNearAxisLine]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Spline Interpolation'), + legend: Legend(isVisible: !isTileView), + primaryXAxis: NumericAxis( + minimum: -8, + maximum: 8, + interval: 2, + placeLabelsNearAxisLine: isTileView + ? true + : _selectedAxis == 'X' ? isPlaceLabelsNearAxisLine : true, + crossesAt: _selectedAxis == 'X' ? _crossAt : 0, + minorTicksPerInterval: 3), + primaryYAxis: NumericAxis( + minimum: -8, + maximum: 8, + interval: 2, + placeLabelsNearAxisLine: isTileView + ? true + : _selectedAxis == 'Y' ? isPlaceLabelsNearAxisLine : true, + crossesAt: _selectedAxis == 'Y' ? _crossAt : 0, + minorTicksPerInterval: 3), + series: getSeries(isTileView), + tooltipBehavior: + TooltipBehavior(enable: true, header: '', canShowMarker: false), + ); +} - @override - void didUpdateWidget(AxisCrossing oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +List> getSeries(bool isTileView) { + final dynamic splineData = [ + ChartSampleData(x: -7, y: -3), + ChartSampleData(x: -4.5, y: -2), + ChartSampleData(x: -3.5, y: 0), + ChartSampleData(x: -3, y: 2), + ChartSampleData(x: 0, y: 7), + ChartSampleData(x: 3, y: 2), + ChartSampleData(x: 3.5, y: 0), + ChartSampleData(x: 4.5, y: -2), + ChartSampleData(x: 7, y: -3), + ]; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/axis_crossing/axis_crossing.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color:model.cardThemeColor, - borderRadius:const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } + return >[ + SplineSeries( + dataSource: splineData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + color: const Color.fromRGBO(20, 122, 20, 1), + name: 'Cubic Interpolation', + width: 2), + ]; } -class FrontPanel extends StatefulWidget { - +class AxisCrossingFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - - final SubItemList subItemList; + AxisCrossingFrontPanel(this.subItemList); + + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _AxisCrossingFrontPanelState createState() => + _AxisCrossingFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _AxisCrossingFrontPanelState extends State { + _AxisCrossingFrontPanelState(this.sample); + final SubItem sample; TextEditingController editingController = TextEditingController(); TextEditingController spacingEditingController = TextEditingController(); - final List _axis = - ['X', 'Y'].toList(); + final List _axis = ['X', 'Y'].toList(); String _selectedAxisType = 'X'; String _selectedAxis; double crossAt = 0; bool isPlaceLabelsNearAxisLine = true; - @override + @override void initState() { super.initState(); crossAt = 0; - _selectedAxis = 'X'; - // _selectedPyramidMode = PyramidMode.linear; + _selectedAxis = 'X'; } @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor:model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getAxisCrossingSample(false,_selectedAxisType, crossAt, isPlaceLabelsNearAxisLine)), - ), - floatingActionButton: Stack( - children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - // child: InkWell( - // onTap: () => launch( - // 'https://data.worldbank.org/indicator/sp.rur.totl.zs'), - // child: Row( - // children: [ - // Text('Source: ', - // style: TextStyle( - // fontSize: 16, color: model.textColor)), - // Text('data.worldbank.org', - // style: TextStyle( - // fontSize: 14, color: Colors.blue)), - // ], - // ), - // ), - ), - ), - ), - Align( - alignment: Alignment.bottomRight, - child: FloatingActionButton( - heroTag: null, - onPressed: () { - _showSettingsPanel(model); - }, - child: Icon(Icons.graphic_eq, color: Colors.white), - backgroundColor: model.backgroundColor, - ), + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getAxisCrossingSample(false, _selectedAxisType, + crossAt, isPlaceLabelsNearAxisLine)), + ), + floatingActionButton: Stack(children: [ + Align( + alignment: Alignment.bottomRight, + child: FloatingActionButton( + heroTag: null, + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, ), - - ])); + ), + ])); }); } - void onPyramidModeChange(String item) { + + void onAxisTypeChange(String item) { setState(() { _selectedAxis = item; if (_selectedAxis == 'X') { _selectedAxisType = 'X'; - } - else if (_selectedAxis == 'Y') { + } else if (_selectedAxis == 'Y') { _selectedAxisType = 'Y'; } }); } - void _showSettingsPanel(SampleListModel model) { - final double height = - (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) - ? 0.3 - : 0.4; - showRoundedModalBottomSheet( + + void _showSettingsPanel(SampleModel model) { + showRoundedModalBottomSheet( dismissOnTap: false, context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _,SampleListModel model) => Padding( - padding:const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 170, - child: Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: MediaQuery.of(context).size.height * height, - child: Padding( - padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), - child: Stack(children: [ - Container( - height: 40, - child: Row( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - Text('Settings', - style: TextStyle( - color: model.textColor, - fontSize: 18, - letterSpacing: 0.34, - fontWeight: FontWeight.w500)), - IconButton( - icon: Icon( - Icons.close, - color: model.textColor, - ), - onPressed: () { - Navigator.pop(context); - }, - ), - ], - ), - ), - Padding( + builder: (BuildContext context, _, SampleModel model) => Container( + height: 170, + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack(children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + // ), + Padding( + padding: const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: ListView( + children: [ + Row( + children: [ + Text('Axis ', + style: TextStyle( + fontSize: 16.0, color: model.textColor)), + Container( + padding: + const EdgeInsets.fromLTRB(20, 0, 0, 0), + height: 50, + width: 150, + child: Align( + alignment: Alignment.bottomCenter, + child: Theme( + data: Theme.of(context).copyWith( + canvasColor: + model.bottomSheetBackgroundColor), + child: DropDown( + value: _selectedAxis, + item: _axis.map((String value) { + return DropdownMenuItem( + value: (value != null) + ? value + : 'X', + child: Text('$value', + style: TextStyle( + color: + model.textColor))); + }).toList(), + valueChanged: (dynamic value) { + onAxisTypeChange(value.toString()); + }), + ), + )) + ], + ), + Row( + children: [ + Text('Cross At ', + style: TextStyle( + fontSize: 16.0, color: model.textColor)), + Container( + child: Padding( padding: - const EdgeInsets.fromLTRB(10, 50, 0, 0), - child: ListView( - children: [ - Container( - child: Row( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.start, - children: [ - Text('Axis ', - style: TextStyle( - fontSize: 16.0, - color: model.textColor)), - Container( - padding: - const EdgeInsets.fromLTRB( - 20, 0, 0, 0), - height: 50, - width: 150, - child: Align( - alignment: - Alignment.bottomCenter, - child: Theme( - data: Theme.of(context) - .copyWith( - canvasColor: model - .bottomSheetBackgroundColor), - child: DropDown( - value: _selectedAxis, - item: _axis - .map( - (String value) { - return DropdownMenuItem< - String>( - value: (value != - null) - ? value - : 'X', - child: Text( - '$value', - style: TextStyle( - color: model - .textColor))); - }).toList(), - valueChanged: - (dynamic value) { - onPyramidModeChange( - value.toString()); - }), - ), - )) - ], - ), - ), - Container( - child: Row( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.start, - children: [ - Text('Cross At ', - style: TextStyle( - fontSize: 16.0, - color: model.textColor)), - Container( - child: Padding( - padding: - const EdgeInsets.fromLTRB( - 10, 0, 0, 0), - child: CustomButton( - minValue: -8, - maxValue: 8, - initialValue: - crossAt, - onChanged: (double val) => - setState(() { - crossAt = val; - }), - step: 2, - horizontal: true, - loop: false, - padding: 0, - iconUp: - Icons.keyboard_arrow_up, - iconDown: - Icons.keyboard_arrow_down, - iconLeft: - Icons.keyboard_arrow_left, - iconRight: Icons - .keyboard_arrow_right, - iconUpRightColor: - model.textColor, - iconDownLeftColor: - model.textColor, - style: TextStyle( - fontSize: 20.0, - color: model.textColor), - ), - ), - ), - ], - ), - ), - Container( - child: Row( - children: [ - Text('Labels Near Axisline', - style: TextStyle( - color: model.textColor, - fontSize: 16, - letterSpacing: 0.34, - fontWeight: - FontWeight.normal)), - const Padding( - padding: EdgeInsets.fromLTRB(20, 0, 0, 0) - ), - BottomSheetCheckbox( - activeColor: - model.backgroundColor, - switchValue: isPlaceLabelsNearAxisLine, - valueChanged: (dynamic value) { - setState(() { - isPlaceLabelsNearAxisLine = value; - }); - }, - ), - ], - ), - ), - ], + const EdgeInsets.fromLTRB(10, 0, 0, 0), + child: CustomButton( + minValue: -8, + maxValue: 8, + initialValue: crossAt, + onChanged: (double val) => setState(() { + crossAt = val; + }), + step: 2, + horizontal: true, + loop: false, + padding: 0, + iconUp: Icons.keyboard_arrow_up, + iconDown: Icons.keyboard_arrow_down, + iconLeft: Icons.keyboard_arrow_left, + iconRight: Icons.keyboard_arrow_right, + iconUpRightColor: model.textColor, + iconDownLeftColor: model.textColor, + style: TextStyle( + fontSize: 20.0, color: model.textColor), ), ), - ]), - ))))))); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - dynamic _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + ), + ], + ), + // ), + // Container( + // child: + Row( + children: [ + Text('Labels Near Axisline', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: FontWeight.normal)), + const Padding( + padding: EdgeInsets.fromLTRB(20, 0, 0, 0)), + BottomSheetCheckbox( + activeColor: model.backgroundColor, + switchValue: isPlaceLabelsNearAxisLine, + valueChanged: (dynamic value) { + setState(() { + isPlaceLabelsNearAxisLine = value; + }); + }, + ), + ], + ), + // ), + ], + ), + ), + ]), + // )))) + ))); } } - -SfCartesianChart getAxisCrossingSample(bool isTileView,[String _selectedAxis, double _crossAt, bool isPlaceLabelsNearAxisLine]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - title: ChartTitle( - text: isTileView ? '' : 'Spline Interpolation'), - legend:Legend(isVisible: !isTileView), - primaryXAxis: NumericAxis( - minimum: -8, - maximum: 8, - interval: 2, - placeLabelsNearAxisLine: isTileView ? true : _selectedAxis == 'X' ? isPlaceLabelsNearAxisLine : true, - crossesAt: _selectedAxis == 'X' ? _crossAt: 0, - minorTicksPerInterval: 3), - primaryYAxis: NumericAxis( - minimum: -8, - maximum: 8, - interval: 2, - placeLabelsNearAxisLine: isTileView ? true : _selectedAxis == 'Y' ? isPlaceLabelsNearAxisLine : true, - crossesAt: _selectedAxis == 'Y' ? _crossAt: 0, - minorTicksPerInterval: 3), - series: getSeries(isTileView), - tooltipBehavior: - TooltipBehavior(enable: true, header: '', canShowMarker: false), - ); -} - -List> getSeries(bool isTileView) { - final dynamic splineData = <_ChartData>[ - _ChartData( -7, -3), - _ChartData( -4.5, -2), - _ChartData( -3.5, 0), - _ChartData( -3, 2), - _ChartData( 0, 7), - _ChartData( 3, 2), - _ChartData( 3.5, 0), - _ChartData( 4.5, -2), - _ChartData( 7, -3), - ]; - - return >[ - SplineSeries<_ChartData, dynamic>( - dataSource: splineData, - xValueMapper: (_ChartData sales, _) => sales.value1, - yValueMapper: (_ChartData sales, _) => sales.value2, - color: const Color.fromRGBO(20, 122, 20, 1), - name: 'Cubic Interpolation', - width: 2), - ]; -} - -class _ChartData { - _ChartData(this.value1, this.value2); - final num value1; - final num value2; -} diff --git a/lib/samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart b/lib/samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart index fed3ceba..413b644f 100755 --- a/lib/samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart +++ b/lib/samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart @@ -1,111 +1,114 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class EdgeLabel extends StatefulWidget { - const EdgeLabel(this.sample, {Key key}) : super(key: key); + EdgeLabel({this.sample, Key key}) : super(key: key); - final SubItemList sample; + SubItem sample; @override _EdgeLabelState createState() => _EdgeLabelState(sample); } class _EdgeLabelState extends State { - _EdgeLabelState(this.sample); - - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); + _EdgeLabelState(this.sample); - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + final SubItem sample; @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, EdgeLabelPlaceFrontPanel(sample)); } +} - @override - void didUpdateWidget(EdgeLabel oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getEdgeLabelPlacementChart(bool isTileView, + [EdgeLabelPlacement _edgeLabelPlacement]) { + return SfCartesianChart( + plotAreaBorderWidth: 1, + title: ChartTitle(text: isTileView ? '' : 'Fuel price in India'), + legend: Legend(isVisible: isTileView ? false : true), + primaryXAxis: DateTimeAxis( + majorGridLines: MajorGridLines(width: 0), + minimum: DateTime(2006, 4, 1), + interval: 2, + dateFormat: DateFormat.y(), + intervalType: DateTimeIntervalType.years, + maximum: DateTime(2016, 4, 1), + edgeLabelPlacement: + isTileView ? EdgeLabelPlacement.shift : _edgeLabelPlacement), + primaryYAxis: NumericAxis( + majorTickLines: MajorTickLines(width: 0.5), + axisLine: AxisLine(width: 0), + labelFormat: '₹{value}', + minimum: 20, + maximum: 80, + edgeLabelPlacement: _edgeLabelPlacement, + title: AxisTitle(text: isTileView ? '' : 'Rupees per litre'), + ), + series: getEdgeLabelPlacementSeries(isTileView), + tooltipBehavior: TooltipBehavior(enable: true, format: 'point.x : point.y'), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/edge_label_placement/edgelabel_placement.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius:const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> getEdgeLabelPlacementSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: DateTime(2005, 4, 1), y: 37.99, yValue2: 28.22), + ChartSampleData(x: DateTime(2006, 4, 1), y: 43.5, yValue2: 30.45), + ChartSampleData(x: DateTime(2007, 4, 1), y: 43, yValue2: 30.25), + ChartSampleData(x: DateTime(2008, 4, 1), y: 45.5, yValue2: 31.76), + ChartSampleData(x: DateTime(2009, 4, 1), y: 44.7, yValue2: 30.86), + ChartSampleData(x: DateTime(2010, 4, 1), y: 48, yValue2: 38.1), + ChartSampleData(x: DateTime(2011, 4, 1), y: 58.5, yValue2: 37.75), + ChartSampleData(x: DateTime(2012, 4, 1), y: 65.6, yValue2: 40.91), + ChartSampleData(x: DateTime(2013, 4, 1), y: 66.09, yValue2: 48.63), + ChartSampleData(x: DateTime(2014, 4, 1), y: 72.26, yValue2: 55.48), + ChartSampleData(x: DateTime(2015, 4, 1), y: 60.49, yValue2: 49.71), + ChartSampleData(x: DateTime(2016, 4, 1), y: 59.68, yValue2: 48.33) + ]; + return >[ + SplineSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + markerSettings: + MarkerSettings(isVisible: true, shape: DataMarkerType.pentagon), + name: 'Petrol'), + SplineSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, + markerSettings: + MarkerSettings(isVisible: true, shape: DataMarkerType.pentagon), + name: 'Diesel') + ]; } -class FrontPanel extends StatefulWidget { +class EdgeLabelPlaceFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); + EdgeLabelPlaceFrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _EdgeLabelPlaceFrontPanelState createState() => + _EdgeLabelPlaceFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); +class _EdgeLabelPlaceFrontPanelState extends State { + _EdgeLabelPlaceFrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; + final SubItem sample; final List _edgeList = ['hide', 'none', 'shift'].toList(); String _selectedType = 'shift'; @@ -114,11 +117,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor:model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -167,7 +170,7 @@ class _FrontPanelState extends State { }); } - void onPositionTypeChange(String item, SampleListModel model) { + void onPositionTypeChange(String item, SampleModel model) { setState(() { _selectedType = item; if (_selectedType == 'hide') { @@ -182,7 +185,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -192,10 +195,10 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _,SampleListModel model) => Padding( - padding:const EdgeInsets.fromLTRB(0, 0, 0, 0), + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 120, child: Padding( @@ -294,153 +297,3 @@ class _FrontPanelState extends State { ))))))); } } - -class BackPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - - final SubItemList sample; - - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - dynamic _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getEdgeLabelPlacementChart(bool isTileView, - [EdgeLabelPlacement _edgeLabelPlacement]) { - return SfCartesianChart( - plotAreaBorderWidth: 1, - title: ChartTitle(text: isTileView ? '' : 'Fuel price in India'), - legend: Legend(isVisible: isTileView ? false : true), - primaryXAxis: DateTimeAxis( - majorGridLines: MajorGridLines(width: 0), - minimum: DateTime(2006, 4, 1), - interval: 2, - dateFormat: DateFormat.y(), - intervalType: DateTimeIntervalType.years, - maximum: DateTime(2016, 4, 1), - edgeLabelPlacement: - isTileView ? EdgeLabelPlacement.shift : _edgeLabelPlacement), - primaryYAxis: NumericAxis( - majorTickLines: MajorTickLines(width: 0.5), - axisLine: AxisLine(width: 0), - labelFormat: '₹{value}', - minimum: 20, - maximum: 80, - edgeLabelPlacement: _edgeLabelPlacement, - title: AxisTitle(text: isTileView ? '' : 'Rupees per litre'), - ), - series: getLineSeries(isTileView), - tooltipBehavior: TooltipBehavior(enable: true, format: 'point.x : point.y'), - ); -} - -List> getLineSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData( DateTime(2005, 4, 1), 37.99, 28.22), - _ChartData( DateTime(2006, 4, 1), 43.5, 30.45), - _ChartData( DateTime(2007, 4, 1), 43, 30.25), - _ChartData( DateTime(2008, 4, 1), 45.5, 31.76), - _ChartData( DateTime(2009, 4, 1), 44.7, 30.86), - _ChartData( DateTime(2010, 4, 1), 48, 38.1), - _ChartData( DateTime(2011, 4, 1), 58.5, 37.75), - _ChartData( DateTime(2012, 4, 1), 65.6, 40.91), - _ChartData( DateTime(2013, 4, 1), 66.09, 48.63), - _ChartData( DateTime(2014, 4, 1), 72.26, 55.48), - _ChartData( DateTime(2015, 4, 1), 60.49, 49.71), - _ChartData( DateTime(2016, 4, 1), 59.68, 48.33) - ]; - return >[ - SplineSeries<_ChartData, DateTime>( - dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.year, - yValueMapper: (_ChartData sales, _) => sales.y, - markerSettings: - MarkerSettings(isVisible: true, shape: DataMarkerType.pentagon), - name: 'Petrol'), - SplineSeries<_ChartData, DateTime>( - dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.year, - yValueMapper: (_ChartData sales, _) => sales.y1, - markerSettings: - MarkerSettings(isVisible: true, shape: DataMarkerType.pentagon), - name: 'Diesel') - ]; -} - -class _ChartData { - _ChartData(this.year, this.y, this.y1); - final DateTime year; - final double y; - final double y1; -} diff --git a/lib/samples/chart/axis_features/handling_label_collision/handling_label_collision.dart b/lib/samples/chart/axis_features/handling_label_collision/handling_label_collision.dart index 2b49311d..b7ce162e 100755 --- a/lib/samples/chart/axis_features/handling_label_collision/handling_label_collision.dart +++ b/lib/samples/chart/axis_features/handling_label_collision/handling_label_collision.dart @@ -1,15 +1,16 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class LabelAction extends StatefulWidget { - const LabelAction(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + LabelAction({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LabelActionState createState() => _LabelActionState(sample); @@ -18,108 +19,71 @@ class LabelAction extends StatefulWidget { class _LabelActionState extends State { _LabelActionState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(LabelAction oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/handling_label_collision/handling_label_collision.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, LabelCollisionFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { +SfCartesianChart getLabelIntersectActionChart(bool isTileView, + [AxisLabelIntersectAction _labelIntersectAction]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: + ChartTitle(text: isTileView ? '' : 'Football players with most goals'), + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + labelIntersectAction: _labelIntersectAction), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), + interval: 40, + majorTickLines: MajorTickLines(size: 0)), + series: getLabelIntersectActionSeries(isTileView), + tooltipBehavior: TooltipBehavior( + enable: true, + format: 'point.x : point.y Goals', + header: '', + canShowMarker: false), + ); +} + +List> getLabelIntersectActionSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Josef Bican', y: 805), + ChartSampleData(x: 'Romário', y: 772), + ChartSampleData(x: 'Pelé', y: 761), + ChartSampleData(x: 'Ferenc Puskás', y: 746), + ChartSampleData(x: 'Gerd Müller', y: 735), + ChartSampleData(x: 'Ronaldo', y: 707), + ChartSampleData(x: 'Messi', y: 698) + ]; + return >[ + ColumnSeries( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelSettings: DataLabelSettings( + isVisible: true, labelAlignment: ChartDataLabelAlignment.top)) + ]; +} - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); +class LabelCollisionFrontPanel extends StatefulWidget { + //ignore:prefer_const_constructors_in_immutables + LabelCollisionFrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _LabelCollisionFrontPanelState createState() => + _LabelCollisionFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; +class _LabelCollisionFrontPanelState extends State { + _LabelCollisionFrontPanelState(this.sample); + final SubItem sample; final List _labelList = [ 'hide', 'none', @@ -136,11 +100,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor:model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -189,7 +153,7 @@ class _FrontPanelState extends State { }); } - void onPositionTypeChange(String item, SampleListModel model) { + void onPositionTypeChange(String item, SampleModel model) { setState(() { _selectedType = item; if (_selectedType == 'hide') { @@ -213,16 +177,16 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { showRoundedModalBottomSheet( dismissOnTap: false, context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _,SampleListModel model) => Padding( - padding:const EdgeInsets.fromLTRB(0, 0, 0, 0), + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 120, child: Padding( @@ -278,7 +242,6 @@ class _FrontPanelState extends State { const EdgeInsets.fromLTRB( 20, 0, 0, 0), height: 50, - width: 150, child: Align( alignment: Alignment.bottomCenter, @@ -321,132 +284,3 @@ class _FrontPanelState extends State { ))))))); } } - -class BackPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - dynamic _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getLabelIntersectActionChart(bool isTileView, - [AxisLabelIntersectAction _labelIntersectAction]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - title: - ChartTitle(text: isTileView ? '' : 'Football players with most goals'), - primaryXAxis: CategoryAxis( - majorGridLines: MajorGridLines(width: 0), - labelIntersectAction: _labelIntersectAction), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), - interval: 40, - majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), - tooltipBehavior: TooltipBehavior( - enable: true, - format: 'point.x : point.y Goals', - header: '', - canShowMarker: false), - ); -} - -List> getLineSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Josef Bican', 805), - _ChartData('Romário', 772), - _ChartData('Pelé', 761), - _ChartData('Ferenc Puskás', 746), - _ChartData('Gerd Müller', 735), - _ChartData('Ronaldo', 707), - _ChartData('Messi', 698) - ]; - return >[ - ColumnSeries<_ChartData, String>( - enableTooltip: true, - dataSource: chartData, - xValueMapper: (_ChartData data, _) => data.xVal, - yValueMapper: (_ChartData data, _) => data.yVal, - dataLabelSettings: DataLabelSettings( - isVisible: true, labelAlignment: ChartDataLabelAlignment.top)) - ]; -} - -class _ChartData { - _ChartData(this.xVal, this.yVal); - final String xVal; - final double yVal; -} diff --git a/lib/samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart b/lib/samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart index 19ec4146..9e97cda5 100755 --- a/lib/samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart +++ b/lib/samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart @@ -1,14 +1,14 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class MultipleAxis extends StatefulWidget { - const MultipleAxis(this.sample, {Key key}) : super(key: key); + MultipleAxis({this.sample, Key key}) : super(key: key); - final SubItemList sample; + SubItem sample; @override _MultipleAxisState createState() => _MultipleAxisState(sample); @@ -17,211 +17,15 @@ class MultipleAxis extends StatefulWidget { class _MultipleAxisState extends State { _MultipleAxisState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(MultipleAxis oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _,SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/multiple_axis_chart/multiple_axis_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Scaffold( - backgroundColor:model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getMultipleAxisLineChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.accuweather.com/en/us/new-york-ny/10007/month/349727?monyr=5/01/2019'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.accuweather.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ]) - ); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - - final SubItemList sample; - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - dynamic _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.accuweather.com/en/us/new-york-ny/10007/month/349727?monyr=5/01/2019'; + const String source = 'www.accuweather.com'; + return getScopedModel( + getMultipleAxisLineChart(false), sample, null, sourceLink, source); } } @@ -251,41 +55,35 @@ SfCartesianChart getMultipleAxisLineChart(bool isTileView) { interval: 10, labelFormat: '{value}°C', ), - series: getLineSeries(isTileView), + series: getMultipleAxisLineSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -class _MultipleAxesData { - _MultipleAxesData(this.x, this.y, this.y2); - final DateTime x; - final double y; - final double y2; -} - -List> getLineSeries(bool isTileView) { - final List<_MultipleAxesData> chartData = <_MultipleAxesData>[ - _MultipleAxesData(DateTime(2019, 5, 1), 13, 69.8), - _MultipleAxesData(DateTime(2019, 5, 2), 26, 87.8), - _MultipleAxesData(DateTime(2019, 5, 3), 13, 78.8), - _MultipleAxesData(DateTime(2019, 5, 4), 22, 75.2), - _MultipleAxesData(DateTime(2019, 5, 5), 14, 68), - _MultipleAxesData(DateTime(2019, 5, 6), 23, 78.8), - _MultipleAxesData(DateTime(2019, 5, 7), 21, 80.6), - _MultipleAxesData(DateTime(2019, 5, 8), 22, 73.4), - _MultipleAxesData(DateTime(2019, 5, 9), 16, 78.8), +List> getMultipleAxisLineSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: DateTime(2019, 5, 1), y: 13, yValue2: 69.8), + ChartSampleData(x: DateTime(2019, 5, 2), y: 26, yValue2: 87.8), + ChartSampleData(x: DateTime(2019, 5, 3), y: 13, yValue2: 78.8), + ChartSampleData(x: DateTime(2019, 5, 4), y: 22, yValue2: 75.2), + ChartSampleData(x: DateTime(2019, 5, 5), y: 14, yValue2: 68), + ChartSampleData(x: DateTime(2019, 5, 6), y: 23, yValue2: 78.8), + ChartSampleData(x: DateTime(2019, 5, 7), y: 21, yValue2: 80.6), + ChartSampleData(x: DateTime(2019, 5, 8), y: 22, yValue2: 73.4), + ChartSampleData(x: DateTime(2019, 5, 9), y: 16, yValue2: 78.8), ]; - return >[ - ColumnSeries<_MultipleAxesData, DateTime>( + return >[ + ColumnSeries( dataSource: chartData, - xValueMapper: (_MultipleAxesData sales, _) => sales.x, - yValueMapper: (_MultipleAxesData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'New York'), - LineSeries<_MultipleAxesData, DateTime>( + LineSeries( dataSource: chartData, yAxisName: 'yAxis1', - xValueMapper: (_MultipleAxesData sales, _) => sales.x, - yValueMapper: (_MultipleAxesData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'Washington') ]; } diff --git a/lib/samples/chart/axis_features/opposed_axes/opposed_axes.dart b/lib/samples/chart/axis_features/opposed_axes/opposed_axes.dart index b3a99c51..3002c4f9 100755 --- a/lib/samples/chart/axis_features/opposed_axes/opposed_axes.dart +++ b/lib/samples/chart/axis_features/opposed_axes/opposed_axes.dart @@ -1,15 +1,15 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class NumericOpposed extends StatefulWidget { - const NumericOpposed(this.sample, {Key key}) : super(key: key); + NumericOpposed({this.sample, Key key}) : super(key: key); - final SubItemList sample; + SubItem sample; @override _NumericOpposedState createState() => _NumericOpposedState(sample); @@ -18,212 +18,15 @@ class NumericOpposed extends StatefulWidget { class _NumericOpposedState extends State { _NumericOpposedState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(NumericOpposed oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _,SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - toggleFrontLayer: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/opposed_axes/opposed_axes.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color:model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius:const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Scaffold( - backgroundColor:model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getOpposedNumericAxisChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 200, - child: InkWell( - onTap: () => launch( - 'https://www.statista.com/statistics/199983/us-vehicle-sales-since-1951/'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.statista.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - dynamic _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.statista.com/statistics/199983/us-vehicle-sales-since-1951/'; + const String source = 'www.statista.com'; + return getScopedModel( + getOpposedNumericAxisChart(false), sample, null, sourceLink, source); } } @@ -246,36 +49,31 @@ SfCartesianChart getOpposedNumericAxisChart(bool isTileView) { interval: 2000, maximum: 20000, majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), + series: getOpposedNumericAxisSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), ); } -List> getLineSeries(bool isTileView) { - final List<_ChartNumeric> chartData = <_ChartNumeric>[ - _ChartNumeric(1978, 14981), - _ChartNumeric(1983, 12107.1), - _ChartNumeric(1988, 15443.2), - _ChartNumeric(1993, 13882.7), - _ChartNumeric(1998, 15543), - _ChartNumeric(2003, 16639.1), - _ChartNumeric(2008, 13198.8), - _ChartNumeric(2013, 15530.1), - _ChartNumeric(2018, 17213.5), +List> getOpposedNumericAxisSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 1978, y: 14981), + ChartSampleData(x: 1983, y: 12107.1), + ChartSampleData(x: 1988, y: 15443.2), + ChartSampleData(x: 1993, y: 13882.7), + ChartSampleData(x: 1998, y: 15543), + ChartSampleData(x: 2003, y: 16639.1), + ChartSampleData(x: 2008, y: 13198.8), + ChartSampleData(x: 2013, y: 15530.1), + ChartSampleData(x: 2018, y: 17213.5), ]; - return >[ - ColumnSeries<_ChartNumeric, num>( + return >[ + ColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartNumeric sales, _) => sales.x, - yValueMapper: (_ChartNumeric sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, ) ]; } - -class _ChartNumeric { - _ChartNumeric(this.x, this.y); - final double x; - final double y; -} diff --git a/lib/samples/chart/axis_features/plot_band/Plot_band_recurrence.dart b/lib/samples/chart/axis_features/plot_band/Plot_band_recurrence.dart index 3acdca76..ac1d47b3 100644 --- a/lib/samples/chart/axis_features/plot_band/Plot_band_recurrence.dart +++ b/lib/samples/chart/axis_features/plot_band/Plot_band_recurrence.dart @@ -1,17 +1,17 @@ +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/checkbox.dart'; import 'package:intl/intl.dart'; +import 'package:scoped_model/scoped_model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:flutter_examples/widgets/checkbox.dart'; -import 'package:url_launcher/url_launcher.dart'; -import '../../../../widgets/bottom_sheet.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class PlotBandRecurrence extends StatefulWidget { - const PlotBandRecurrence(this.sample, {Key key}) : super(key: key); + PlotBandRecurrence({this.sample, Key key}) : super(key: key); - final SubItemList sample; + SubItem sample; @override _PlotBandRecurrenceState createState() => _PlotBandRecurrenceState(sample); @@ -20,90 +20,109 @@ class PlotBandRecurrence extends StatefulWidget { class _PlotBandRecurrenceState extends State { _PlotBandRecurrenceState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); + final SubItem sample; @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, PlotBandRecurrenceFrontPanel(sample)); } +} - @override - void didUpdateWidget(PlotBandRecurrence oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getPlotBandRecurrenceChart(bool isTileView, + [bool xVisible, bool yVisible]) { + return SfCartesianChart( + title: ChartTitle(text: isTileView ? '' : 'World pollution report'), + legend: Legend(isVisible: !isTileView), + plotAreaBorderWidth: 0, + primaryXAxis: DateTimeAxis( + interval: 5, + dateFormat: DateFormat.y(), + majorGridLines: MajorGridLines(width: 0), + intervalType: DateTimeIntervalType.years, + edgeLabelPlacement: EdgeLabelPlacement.hide, + minimum: DateTime(1975, 1, 1), + maximum: DateTime(2010, 1, 1), + plotBands: [ + PlotBand( + isRepeatable: true, + isVisible: isTileView ? false : xVisible, + repeatEvery: 10, + sizeType: DateTimeIntervalType.years, + size: 5, + repeatUntil: DateTime(2010, 1, 1), + start: DateTime(1965, 1, 1), + end: DateTime(2010, 1, 1), + shouldRenderAboveSeries: false, + color: const Color.fromRGBO(227, 228, 230, 0.4)) + ]), + primaryYAxis: NumericAxis( + isVisible: true, + minimum: 0, + interval: 2000, + maximum: 18000, + plotBands: [ + PlotBand( + isRepeatable: true, + isVisible: isTileView ? true : yVisible, + repeatEvery: 4000, + size: 2000, + start: 0, + end: 18000, + repeatUntil: 18000, + shouldRenderAboveSeries: false, + color: const Color.fromRGBO(227, 228, 230, 0.1)) + ], + majorGridLines: MajorGridLines(color: Colors.grey), + majorTickLines: MajorTickLines(size: 0), + axisLine: AxisLine(width: 0), + labelStyle: ChartTextStyle(fontSize: 0)), + series: _getPlotBandRecurrenceSeries(isTileView), + tooltipBehavior: + TooltipBehavior(enable: true, canShowMarker: false, header: ''), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _,SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - toggleFrontLayer: false, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/plot_band/Plot_band_recurrence.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius:const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> _getPlotBandRecurrenceSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: DateTime(1980, 1, 1), y: 15400, yValue: 6400), + ChartSampleData(x: DateTime(1985, 1, 1), y: 15800, yValue: 3700), + ChartSampleData(x: DateTime(1990, 1, 1), y: 14000, yValue: 7200), + ChartSampleData(x: DateTime(1995, 1, 1), y: 10500, yValue: 2300), + ChartSampleData(x: DateTime(2000, 1, 1), y: 13300, yValue: 4000), + ChartSampleData(x: DateTime(2005, 1, 1), y: 12800, yValue: 4800) + ]; + return >[ + ColumnSeries( + dataSource: chartData, + name: 'All sources', + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + ), + ColumnSeries( + dataSource: chartData, + name: 'Autos & Light Trucks', + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, + ) + ]; } -class FrontPanel extends StatefulWidget { - +class PlotBandRecurrenceFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); + PlotBandRecurrenceFrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _PlotBandRecurrenceFrontPanelState createState() => + _PlotBandRecurrenceFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - - final SubItemList sample; +class _PlotBandRecurrenceFrontPanelState + extends State { + _PlotBandRecurrenceFrontPanelState(this.sample); + final SubItem sample; bool xAxis = false, yAxis = true; @override @@ -115,11 +134,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor:model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 60), child: Container( @@ -135,7 +154,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -145,10 +164,10 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _,SampleListModel model) => Padding( - padding:const EdgeInsets.fromLTRB(0, 0, 0, 0), + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 180, child: Padding( @@ -242,169 +261,3 @@ class _FrontPanelState extends State { ))))))); } } - -class BackPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - dynamic _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getPlotBandRecurrenceChart(bool isTileView, - [bool xVisible, bool yVisible]) { - return SfCartesianChart( - title: ChartTitle(text: isTileView ? '' : 'World pollution report'), - legend: Legend(isVisible: !isTileView), - plotAreaBorderWidth: 0, - primaryXAxis: DateTimeAxis( - interval: 5, - dateFormat: DateFormat.y(), - majorGridLines: MajorGridLines(width: 0), - intervalType: DateTimeIntervalType.years, - edgeLabelPlacement: EdgeLabelPlacement.hide, - minimum: DateTime(1975, 1, 1), - maximum: DateTime(2010, 1, 1), - plotBands: [ - PlotBand( - isRepeatable: true, - isVisible: isTileView ? false : xVisible, - repeatEvery: 10, - sizeType: DateTimeIntervalType.years, - size: 5, - repeatUntil: DateTime(2010, 1, 1), - start: DateTime(1965, 1, 1), - end: DateTime(2010, 1, 1), - shouldRenderAboveSeries:false, - color: const Color.fromRGBO(227, 228, 230, 0.4)) - ]), - primaryYAxis: NumericAxis( - isVisible: true, - minimum: 0, - interval: 2000, - maximum: 18000, - plotBands: [ - PlotBand( - isRepeatable: true, - isVisible: isTileView ? true : yVisible, - repeatEvery: 4000, - size: 2000, - start: 0, - end: 18000, - repeatUntil: 18000, - shouldRenderAboveSeries:false, - color: const Color.fromRGBO(227, 228, 230, 0.1)) - ], - majorGridLines: MajorGridLines(color: Colors.grey), - majorTickLines: MajorTickLines(size: 0), - axisLine: AxisLine(width: 0), - labelStyle: ChartTextStyle(fontSize: 0)), - series: _getColumnSeries(isTileView), - tooltipBehavior: - TooltipBehavior(enable: true, canShowMarker: false, header: ''), - ); -} - -List> _getColumnSeries(bool isTileView) { - final List<_ColumnData> chartData = <_ColumnData>[ - _ColumnData(DateTime(1980, 1, 1), 15400, 6400), - _ColumnData(DateTime(1985, 1, 1), 15800, 3700), - _ColumnData(DateTime(1990, 1, 1), 14000, 7200), - _ColumnData(DateTime(1995, 1, 1), 10500, 2300), - _ColumnData(DateTime(2000, 1, 1), 13300, 4000), - _ColumnData(DateTime(2005, 1, 1), 12800, 4800) - ]; - return >[ - ColumnSeries<_ColumnData, DateTime>( - dataSource: chartData, - name: 'All sources', - xValueMapper: (_ColumnData sales, _) => sales.x, - yValueMapper: (_ColumnData sales, _) => sales.y, - ), - ColumnSeries<_ColumnData, DateTime>( - dataSource: chartData, - name: 'Autos & Light Trucks', - xValueMapper: (_ColumnData sales, _) => sales.x, - yValueMapper: (_ColumnData sales, _) => sales.yVal, - ) - ]; -} - -class _ColumnData { - _ColumnData(this.x, this.y, this.yVal); - final DateTime x; - final double y; - final double yVal; -} diff --git a/lib/samples/chart/axis_features/plot_band/plot_band.dart b/lib/samples/chart/axis_features/plot_band/plot_band.dart index 914599fd..2753fd2c 100644 --- a/lib/samples/chart/axis_features/plot_band/plot_band.dart +++ b/lib/samples/chart/axis_features/plot_band/plot_band.dart @@ -1,17 +1,16 @@ +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:scoped_model/scoped_model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -import '../../../../widgets/bottom_sheet.dart'; -import '../../../../widgets/customDropDown.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class PlotBandDefault extends StatefulWidget { - const PlotBandDefault(this.sample, {Key key}) : super(key: key); + PlotBandDefault({this.sample, Key key}) : super(key: key); - final SubItemList sample; + SubItem sample; @override _PlotBandDefaultState createState() => _PlotBandDefaultState(sample); @@ -20,91 +19,188 @@ class PlotBandDefault extends StatefulWidget { class _PlotBandDefaultState extends State { _PlotBandDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(PlotBandDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _,SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - toggleFrontLayer: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_features/plot_band/plot_band.dart'); - }, - ), - ), - ), - - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, PlotBandFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { +SfCartesianChart getPlotBandChart(bool isTileView, + [bool isHorizontal, bool isVertical, bool isSegment]) { + return SfCartesianChart( + title: ChartTitle(text: isTileView ? '' : 'Weather report'), + legend: Legend(isVisible: false), + plotAreaBorderWidth: 0, + primaryXAxis: CategoryAxis( + interval: 1, + plotBands: [ + PlotBand( + isVisible: isTileView ? true : isHorizontal, + start: -0.5, + end: 1.5, + text: 'Winter', + shouldRenderAboveSeries: false, + textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), + color: const Color.fromRGBO(101, 199, 209, 1)), + PlotBand( + isVisible: isTileView ? true : isHorizontal, + start: 4.5, + end: 7.5, + text: 'Summer', + shouldRenderAboveSeries: false, + textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), + color: const Color.fromRGBO(254, 213, 2, 1)), + PlotBand( + isVisible: isTileView ? true : isHorizontal, + start: 1.5, + end: 4.5, + text: 'Spring', + shouldRenderAboveSeries: false, + textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), + color: const Color.fromRGBO(140, 198, 62, 1)), + PlotBand( + isVisible: isTileView ? true : isHorizontal, + start: 7.5, + end: 9.5, + text: 'Autumn', + shouldRenderAboveSeries: false, + textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), + color: const Color.fromRGBO(217, 112, 1, 1)), + PlotBand( + isVisible: isTileView ? true : isHorizontal, + start: 9.5, + end: 10.5, + text: 'Winter', + textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), + shouldRenderAboveSeries: false, + color: const Color.fromRGBO(101, 199, 209, 1)), + PlotBand( + size: 2, + start: -0.5, + end: 4.5, + textAngle: 0, + associatedAxisStart: 20.5, + text: 'Average', + associatedAxisEnd: 27.5, + isVisible: isTileView ? false : isSegment, + color: const Color.fromRGBO(224, 155, 0, 1), + shouldRenderAboveSeries: false, + textStyle: ChartTextStyle(color: Colors.white, fontSize: 17)), + PlotBand( + start: 7.5, + end: 10.5, + size: 3, + associatedAxisStart: 20.5, + text: 'Average', + associatedAxisEnd: 27.5, + textAngle: 0, + isVisible: isTileView ? false : isSegment, + color: const Color.fromRGBO(224, 155, 0, 1), + shouldRenderAboveSeries: false, + textStyle: ChartTextStyle(color: Colors.white, fontSize: 17)), + PlotBand( + start: 4.5, + end: 7.5, + size: 2, + associatedAxisStart: 32.5, + text: 'High', + associatedAxisEnd: 37.5, + textAngle: 0, + isVisible: isTileView ? false : isSegment, + color: const Color.fromRGBO(207, 85, 7, 1), + shouldRenderAboveSeries: false, + textStyle: ChartTextStyle(color: Colors.white, fontSize: 17)), + ], + majorGridLines: MajorGridLines(width: 0)), + primaryYAxis: NumericAxis( + minimum: 10, + maximum: 40, + interval: 5, + labelFormat: '{value} °C', + rangePadding: ChartRangePadding.none, + plotBands: [ + PlotBand( + isVisible: isTileView ? false : isVertical, + start: 30, + end: 40, + text: 'High Temperature', + shouldRenderAboveSeries: false, + color: const Color.fromRGBO(207, 85, 7, 1), + textStyle: + ChartTextStyle(color: const Color.fromRGBO(255, 255, 255, 1))), + PlotBand( + isVisible: isTileView ? false : isVertical, + start: 20, + end: 30, + text: 'Average Temperature', + shouldRenderAboveSeries: false, + color: const Color.fromRGBO(224, 155, 0, 1), + textStyle: + ChartTextStyle(color: const Color.fromRGBO(255, 255, 255, 1))), + PlotBand( + isVisible: isTileView ? false : isVertical, + start: 10, + end: 20, + text: 'Low Temperature', + shouldRenderAboveSeries: false, + color: const Color.fromRGBO(237, 195, 12, 1)) + ], + ), + series: _getPlotBandSeries(isTileView, isSegment), + tooltipBehavior: + TooltipBehavior(enable: true, canShowMarker: false, header: ''), + ); +} +List> _getPlotBandSeries(bool isTileView, + [bool isSegment]) { + final dynamic lineData = [ + ChartSampleData(xValue: 'Jan', yValue: 23), + ChartSampleData(xValue: 'Feb', yValue: 24), + ChartSampleData(xValue: 'Mar', yValue: 23), + ChartSampleData(xValue: 'Apr', yValue: 22), + ChartSampleData(xValue: 'May', yValue: 21), + ChartSampleData(xValue: 'Jun', yValue: 27), + ChartSampleData(xValue: 'Jul', yValue: 33), + ChartSampleData(xValue: 'Aug', yValue: 36), + ChartSampleData(xValue: 'Sep', yValue: 23), + ChartSampleData(xValue: 'Oct', yValue: 25), + ChartSampleData(xValue: 'Nov', yValue: 22), + // ChartSampleData(xValue: 'Dec', yValue: 23), + ]; + return >[ + LineSeries( + dataSource: lineData, + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, + color: + isTileView ? Colors.white : isSegment ? Colors.black : Colors.white, + name: 'Weather', + markerSettings: MarkerSettings( + isVisible: true, + borderColor: Colors.white, + borderWidth: 2, + color: const Color.fromRGBO(102, 102, 102, 1))) + ]; +} + +class PlotBandFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); + PlotBandFrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _PlotBandFrontPanelState createState() => + _PlotBandFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); +class _PlotBandFrontPanelState extends State { + _PlotBandFrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; final List _plotBandType = ['vertical', 'horizontal', 'segment'].toList(); bool isHorizontal = true; @@ -126,11 +222,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 60), child: Container( @@ -176,7 +272,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -186,9 +282,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _,SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 120, @@ -285,247 +381,3 @@ class _FrontPanelState extends State { ])))))))); } } - -class BackPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - - final SubItemList sample; - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - - _BackPanelState(this.sample); - - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - dynamic _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getPlotBandChart(bool isTileView, - [bool isHorizontal, bool isVertical, bool isSegment]) { - return SfCartesianChart( - title: ChartTitle(text: isTileView ? '' : 'Weather report'), - legend: Legend(isVisible: false), - plotAreaBorderWidth: 0, - primaryXAxis: CategoryAxis( - interval: 1, - plotBands: [ - PlotBand( - isVisible: isTileView ? true : isHorizontal, - start: -0.5, - end: 1.5, - text: 'Winter', - shouldRenderAboveSeries: false, - textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), - color: const Color.fromRGBO(101, 199, 209, 1)), - PlotBand( - isVisible: isTileView ? true : isHorizontal, - start: 4.5, - end: 7.5, - text: 'Summer', - shouldRenderAboveSeries: false, - textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), - color: const Color.fromRGBO(254, 213, 2, 1)), - PlotBand( - isVisible: isTileView ? true : isHorizontal, - start: 1.5, - end: 4.5, - text: 'Spring', - shouldRenderAboveSeries: false, - textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), - color: const Color.fromRGBO(140, 198, 62, 1)), - PlotBand( - isVisible: isTileView ? true : isHorizontal, - start: 7.5, - end: 9.5, - text: 'Autumn', - shouldRenderAboveSeries: false, - textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), - color: const Color.fromRGBO(217, 112, 1, 1)), - PlotBand( - isVisible: isTileView ? true : isHorizontal, - start: 9.5, - end: 10.5, - text: 'Winter', - textStyle: ChartTextStyle(color: Colors.black, fontSize: 13), - shouldRenderAboveSeries: false, - color: const Color.fromRGBO(101, 199, 209, 1)), - PlotBand( - size: 2, - start: -0.5, - end: 4.5, - textAngle: 0, - associatedAxisStart: 20.5, - text: 'Average', - associatedAxisEnd: 27.5, - isVisible: isTileView ? false : isSegment, - color: const Color.fromRGBO(224, 155, 0, 1), - shouldRenderAboveSeries: false, - textStyle: ChartTextStyle(color: Colors.white, fontSize: 17)), - PlotBand( - start: 7.5, - end: 10.5, - size: 3, - associatedAxisStart: 20.5, - text: 'Average', - associatedAxisEnd: 27.5, - textAngle: 0, - isVisible: isTileView ? false : isSegment, - color: const Color.fromRGBO(224, 155, 0, 1), - shouldRenderAboveSeries: false, - textStyle: ChartTextStyle(color: Colors.white, fontSize: 17)), - PlotBand( - start: 4.5, - end: 7.5, - size: 2, - associatedAxisStart: 32.5, - text: 'High', - associatedAxisEnd: 37.5, - textAngle: 0, - isVisible: isTileView ? false : isSegment, - color: const Color.fromRGBO(207, 85, 7, 1), - shouldRenderAboveSeries: false, - textStyle: ChartTextStyle(color: Colors.white, fontSize: 17)), - ], majorGridLines: MajorGridLines(width: 0)), - primaryYAxis: NumericAxis( - minimum: 10, - maximum: 40, - interval: 5, - labelFormat: '{value} °C', - rangePadding: ChartRangePadding.none, - plotBands: [ - PlotBand( - isVisible: isTileView ? false : isVertical, - start: 30, - end: 40, - text: 'High Temperature', - shouldRenderAboveSeries: false, - color: const Color.fromRGBO(207, 85, 7, 1), - textStyle: ChartTextStyle(color:const Color.fromRGBO(255, 255, 255, 1))), - PlotBand( - isVisible: isTileView ? false : isVertical, - start: 20, - end: 30, - text: 'Average Temperature', - shouldRenderAboveSeries: false, - color: const Color.fromRGBO(224, 155, 0, 1), - textStyle: ChartTextStyle(color:const Color.fromRGBO(255, 255, 255, 1))), - PlotBand( - isVisible: isTileView ? false : isVertical, - start: 10, - end: 20, - text: 'Low Temperature', - shouldRenderAboveSeries: false, - color: const Color.fromRGBO(237, 195, 12, 1)) - ], - ), - series: _getColumnSeries(isTileView, isSegment), - tooltipBehavior: - TooltipBehavior(enable: true, canShowMarker: false, header: ''), - ); -} - -List> _getColumnSeries(bool isTileView, - [bool isSegment]) { - final dynamic lineData = <_ColumnData>[ - _ColumnData(xValue: 'Jan', yValue: 23), - _ColumnData(xValue: 'Feb', yValue: 24), - _ColumnData(xValue: 'Mar', yValue: 23), - _ColumnData(xValue: 'Apr', yValue: 22), - _ColumnData(xValue: 'May', yValue: 21), - _ColumnData(xValue: 'Jun', yValue: 27), - _ColumnData(xValue: 'Jul', yValue: 33), - _ColumnData(xValue: 'Aug', yValue: 36), - _ColumnData(xValue: 'Sep', yValue: 23), - _ColumnData(xValue: 'Oct', yValue: 25), - _ColumnData(xValue: 'Nov', yValue: 22), - // _ColumnData(xValue: 'Dec', yValue: 23), - ]; - return >[ - LineSeries<_ColumnData, dynamic>( - dataSource: lineData, - xValueMapper: (_ColumnData sales, _) => sales.xValue, - yValueMapper: (_ColumnData sales, _) => sales.yValue, - color: - isTileView ? Colors.white : isSegment ? Colors.black : Colors.white, - name: 'Weather', - markerSettings: MarkerSettings( - isVisible: true, - borderColor: Colors.white, - borderWidth: 2, - color: const Color.fromRGBO(102, 102, 102, 1))) - ]; -} - -class _ColumnData { - _ColumnData({this.xValue, this.yValue}); - final String xValue; - final num yValue; -} diff --git a/lib/samples/chart/axis_types/category_types/default_category_axis.dart b/lib/samples/chart/axis_types/category_types/default_category_axis.dart index 2b7a19ae..1e6037a6 100755 --- a/lib/samples/chart/axis_types/category_types/default_category_axis.dart +++ b/lib/samples/chart/axis_types/category_types/default_category_axis.dart @@ -1,193 +1,24 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +//ignore: must_be_immutable class CategoryDefault extends StatefulWidget { - const CategoryDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + CategoryDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _CategoryDefaultState createState() => _CategoryDefaultState(sample); } class _CategoryDefaultState extends State { _CategoryDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(CategoryDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override + final SubItem sample; + + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/category_types/default_category_axis.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultCategoryAxisChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel( + getDefaultCategoryAxisChart(false), sample); } } @@ -206,32 +37,43 @@ SfCartesianChart getDefaultCategoryAxisChart(bool isTileView) { ); } -List> getDefaultCategory(bool isTileView) { - final List<_CategoryData> chartData = <_CategoryData>[ - _CategoryData('South\nKorea', 39, Colors.teal[300]), - _CategoryData('India', 20, const Color.fromRGBO(53, 124, 210, 1)), - _CategoryData('South\nAfrica', 61, Colors.pink), - _CategoryData('China', 65, Colors.orange), - _CategoryData('France', 45, Colors.green), - _CategoryData('Saudi\nArabia', 10, Colors.pink[300]), - _CategoryData('Japan', 16, Colors.purple[300]), - _CategoryData('Mexico', 31, const Color.fromRGBO(127, 132, 232, 1)) +List> getDefaultCategory( + bool isTileView) { + final List chartData = [ + ChartSampleData( + x: 'South\nKorea', + yValue: 39, + pointColor: Colors.teal[300]), + ChartSampleData( + x: 'India', + yValue: 20, + pointColor: const Color.fromRGBO(53, 124, 210, 1)), + ChartSampleData( + x: 'South\nAfrica', + yValue: 61, + pointColor: Colors.pink), + ChartSampleData( + x: 'China', yValue: 65, pointColor: Colors.orange), + ChartSampleData( + x: 'France', yValue: 45, pointColor: Colors.green), + ChartSampleData( + x: 'Saudi\nArabia', + yValue: 10, + pointColor: Colors.pink[300]), + ChartSampleData( + x: 'Japan', yValue: 16, pointColor: Colors.purple[300]), + ChartSampleData( + x: 'Mexico', + yValue: 31, + pointColor: const Color.fromRGBO(127, 132, 232, 1)) ]; - return >[ - ColumnSeries<_CategoryData, String>( + return >[ + ColumnSeries( dataSource: chartData, - xValueMapper: (_CategoryData data, _) => data.xVal, - yValueMapper: (_CategoryData data, _) => data.yVal, - pointColorMapper: (_CategoryData data, _) => data.color, - dataLabelSettings: - DataLabelSettings(isVisible: true), + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue, + pointColorMapper: (ChartSampleData data, _) => data.pointColor, + dataLabelSettings: DataLabelSettings(isVisible: true), ) ]; } - -class _CategoryData { - _CategoryData(this.xVal, this.yVal, this.color); - final String xVal; - final int yVal; - Color color; -} diff --git a/lib/samples/chart/axis_types/category_types/indexed_category_axis.dart b/lib/samples/chart/axis_types/category_types/indexed_category_axis.dart index 90494a1c..d16afb9f 100755 --- a/lib/samples/chart/axis_types/category_types/indexed_category_axis.dart +++ b/lib/samples/chart/axis_types/category_types/indexed_category_axis.dart @@ -1,138 +1,101 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/checkbox.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -import '../../../../widgets/bottom_sheet.dart'; +//ignore: must_be_immutable class CategoryIndexed extends StatefulWidget { - const CategoryIndexed(this.sample, {Key key}) : super(key: key); + CategoryIndexed({this.sample, Key key}) : super(key: key); - final SubItemList sample; + SubItem sample; @override _CategoryIndexedState createState() => _CategoryIndexedState(sample); } class _CategoryIndexedState extends State { - _CategoryIndexedState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(CategoryIndexed oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _,SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/category_types/indexed_category_axis.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius:const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, IndexedFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { +SfCartesianChart getIndexedCategoryAxisChart(bool isTileView, + [bool isIndexed]) { + return SfCartesianChart( + title: ChartTitle(text: isTileView ? '' : 'Real GDP growth'), + plotAreaBorderWidth: 0, + legend: Legend(isVisible: isTileView ? false : true), + primaryXAxis: CategoryAxis( + arrangeByIndex: isTileView ? true : isIndexed, + majorGridLines: MajorGridLines(width: 0), + labelIntersectAction: AxisLabelIntersectAction.multipleRows, + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + labelFormat: '{value}%', + title: AxisTitle(text: isTileView ? '' : 'GDP growth rate'), + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: getIndexedCategoryAxisSeries(isTileView), + tooltipBehavior: TooltipBehavior(enable: true), + ); +} - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - +List> getIndexedCategoryAxisSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Myanmar', yValue: 7.3), + ChartSampleData(x: 'India', yValue: 7.9), + ChartSampleData(x: 'Bangladesh', yValue: 6.8) + ]; + final List chartData1 = [ + ChartSampleData(x: 'Poland', yValue: 2.7), + ChartSampleData(x: 'Australia', yValue: 2.5), + ChartSampleData(x: 'Singapore', yValue: 2.0) + ]; + return >[ + ColumnSeries( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue, + name: '2015'), + ColumnSeries( + enableTooltip: true, + dataSource: chartData1, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue, + name: '2016') + ]; +} + +class IndexedFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + IndexedFrontPanel(this.sampleList); + final SubItem sampleList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _IndexedFrontPanelState createState() => _IndexedFrontPanelState(sampleList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - bool enableTooltip = false; +class _IndexedFrontPanelState extends State { + _IndexedFrontPanelState(this.sample); + final SubItem sample; bool isIndexed = true; - bool enableMarker = false; - bool enableDatalabel = false; @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -148,223 +111,67 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { - final double height = - (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) - ? 0.3 - : 0.4; + void _showSettingsPanel(SampleModel model) { showRoundedModalBottomSheet( dismissOnTap: false, context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( - rebuildOnChange: false, - builder: (BuildContext context, _,SampleListModel model) => Padding( - padding:const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 120, - child: Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: MediaQuery.of(context).size.height * height, - child: Padding( - padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), - child: Stack(children: [ - Container( - height: 40, - child: Row( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - Text('Settings', - style: TextStyle( - color: model.textColor, - fontSize: 18, - letterSpacing: 0.34, - fontWeight: FontWeight.w500)), - IconButton( - icon: Icon( - Icons.close, + builder: (BuildContext context) => + ScopedModelDescendant( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => + Container( + height: 120, + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack(children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + Padding( + padding: const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: ListView( + children: [ + Row( + children: [ + Text('Arrange by index', + style: TextStyle( color: model.textColor, - ), - onPressed: () { - Navigator.pop(context); - }, - ), - ], - ), - ), - Padding( - padding: - const EdgeInsets.fromLTRB(10, 50, 0, 0), - child: ListView( - children: [ - Container( - child: Row( - children: [ - Text('Arrange by index', - style: TextStyle( - color: model.textColor, - fontSize: 16, - letterSpacing: 0.34, - fontWeight: - FontWeight.normal)), - BottomSheetCheckbox( - activeColor: - model.backgroundColor, - switchValue: isIndexed, - valueChanged: (dynamic value) { - setState(() { - isIndexed = value; - }); - }, - ), - ], - ), - ), - ], + fontSize: 16, + letterSpacing: 0.34, + fontWeight: FontWeight.normal)), + BottomSheetCheckbox( + activeColor: model.backgroundColor, + switchValue: isIndexed, + valueChanged: (dynamic value) { + setState(() { + isIndexed = value; + }); + }, ), - ), - ]), - ))))))); + ], + ), + ], + ), + ), + ]), + ))); } } - -class BackPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getIndexedCategoryAxisChart(bool isTileView, - [bool isIndexed]) { - return SfCartesianChart( - title: ChartTitle(text: isTileView ? '' : 'Real GDP growth'), - plotAreaBorderWidth: 0, - legend: Legend(isVisible: isTileView ? false : true), - primaryXAxis: CategoryAxis( - arrangeByIndex: isTileView ? true : isIndexed, - majorGridLines: MajorGridLines(width: 0), - labelIntersectAction: AxisLabelIntersectAction.multipleRows, - edgeLabelPlacement: EdgeLabelPlacement.shift), - primaryYAxis: NumericAxis( - labelFormat: '{value}%', - title: AxisTitle(text: isTileView ? '' : 'GDP growth rate'), - axisLine: AxisLine(width: 0), - majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), - tooltipBehavior: TooltipBehavior(enable: true), - ); -} - -List> getLineSeries(bool isTileView) { - final List<_IndexedData> chartData = <_IndexedData>[ - _IndexedData('Myanmar', 7.3), - _IndexedData('India', 7.9), - _IndexedData('Bangladesh', 6.8) - ]; - final List<_IndexedData> chartData1 = <_IndexedData>[ - _IndexedData('Poland', 2.7), - _IndexedData('Australia', 2.5), - _IndexedData('Singapore', 2.0) - ]; - return >[ - ColumnSeries<_IndexedData, String>( - enableTooltip: true, - dataSource: chartData, - xValueMapper: (_IndexedData data, _) => data.xVal, - yValueMapper: (_IndexedData data, _) => data.yVal, - name: '2015'), - ColumnSeries<_IndexedData, String>( - enableTooltip: true, - dataSource: chartData1, - xValueMapper: (_IndexedData data, _) => data.xVal, - yValueMapper: (_IndexedData data, _) => data.yVal, - name: '2016') - ]; -} - -class _IndexedData { - _IndexedData(this.xVal, this.yVal); - final String xVal; - final double yVal; -} diff --git a/lib/samples/chart/axis_types/category_types/label_placement.dart b/lib/samples/chart/axis_types/category_types/label_placement.dart index d6170c3f..d0942d04 100755 --- a/lib/samples/chart/axis_types/category_types/label_placement.dart +++ b/lib/samples/chart/axis_types/category_types/label_placement.dart @@ -1,108 +1,85 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/cupertino.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class CategoryTicks extends StatefulWidget { - const CategoryTicks(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + CategoryTicks({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _CategoryTicksState createState() => _CategoryTicksState(sample); } class _CategoryTicksState extends State { _CategoryTicksState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - + final SubItem sample; + @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel( + null, sample, LabelPlacementFrontPanel(sample)); } +} - @override - void didUpdateWidget(CategoryTicks oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getTicksCategoryAxisChart(bool isTileView, + [LabelPlacement _labelPlacement]) { + return SfCartesianChart( + title: ChartTitle(text: isTileView ? '' : 'Employees task count'), + plotAreaBorderWidth: 0, + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + labelPlacement: _labelPlacement != null + ? _labelPlacement + : LabelPlacement.betweenTicks), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(width: 0), + minimum: 7, + maximum: 12, + interval: 1), + series: getTicksCategoryAxisSeries(isTileView, _labelPlacement), + tooltipBehavior: + TooltipBehavior(enable: true, header: '', canShowMarker: false), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/category_types/label_placement.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> getTicksCategoryAxisSeries( + bool isTileView, LabelPlacement _labelPlacement) { + final List chartData = [ + ChartSampleData(x: 'John', yValue: 10), + ChartSampleData(x: 'Parker', yValue: 11), + ChartSampleData(x: 'David', yValue: 9), + ChartSampleData(x: 'Peter', yValue: 10), + ChartSampleData(x: 'Antony', yValue: 11), + ChartSampleData(x: 'Brit', yValue: 10) + ]; + return >[ + LineSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue, + markerSettings: MarkerSettings(isVisible: true)) + ]; } -class FrontPanel extends StatefulWidget { +class LabelPlacementFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + LabelPlacementFrontPanel(this.sampleList); + final SubItem sampleList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _LabelPlacementFrontPanelState createState() => + _LabelPlacementFrontPanelState(sampleList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; - int selectitem = 1; +class _LabelPlacementFrontPanelState extends State { + _LabelPlacementFrontPanelState(this.sample); + final SubItem sample; final List _labelPosition = ['betweenTicks', 'onTicks'].toList(); @@ -112,11 +89,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -132,7 +109,7 @@ class _FrontPanelState extends State { }); } - void onPositionTypeChange(String item, SampleListModel model) { + void onPositionTypeChange(String item, SampleModel model) { setState(() { _selectedType = item; if (_selectedType == 'betweenTicks') { @@ -144,240 +121,87 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { - final double height = - (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) - ? 0.3 - : 0.4; + void _showSettingsPanel(SampleModel model) { showRoundedModalBottomSheet( dismissOnTap: false, context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant< + SampleModel>( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 120, - child: Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: MediaQuery.of(context).size.height * height, - child: Padding( - padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), - child: Stack(children: [ - Container( - height: 40, - child: Row( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - Text('Settings', - style: TextStyle( - color: model.textColor, - fontSize: 18, - letterSpacing: 0.34, - fontWeight: FontWeight.w500)), - IconButton( - icon: Icon( - Icons.close, - color: model.textColor, - ), - onPressed: () { - Navigator.pop(context); - }, - ), - ], - ), - ), - Padding( + builder: (BuildContext context, _, SampleModel model) => + Container( + height: 120, + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack(children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + Padding( + padding: const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: ListView( + children: [ + Row( + children: [ + Text('Label placement ', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: FontWeight.normal)), + Container( padding: - const EdgeInsets.fromLTRB(10, 50, 0, 0), - child: ListView( - children: [ - Container( - child: Row( - children: [ - Text('Label placement ', - style: TextStyle( - color: model.textColor, - fontSize: 16, - letterSpacing: 0.34, - fontWeight: - FontWeight.normal)), - Container( - padding: - const EdgeInsets.fromLTRB( - 20, 0, 0, 0), - height: 50, - width: 150, - child: Align( - alignment: - Alignment.bottomCenter, - child: Theme( - data: Theme.of(context) - .copyWith( - canvasColor: model - .bottomSheetBackgroundColor), - child: DropDown( - value: _selectedType, - item: _labelPosition - .map( - (String value) { - return DropdownMenuItem< - String>( - value: (value != - null) - ? value - : 'betweenTicks', - child: Text( - '$value', - style: TextStyle( - color: model - .textColor))); - }).toList(), - valueChanged: - (dynamic value) { - onPositionTypeChange( - value.toString(), - model); - }), - ), - )), - ], - ), - ), - ], - ), - ), - ]), - ))))))); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const EdgeInsets.fromLTRB(20, 0, 0, 0), + height: 50, + child: Align( + alignment: Alignment.bottomCenter, + child: Theme( + data: Theme.of(context).copyWith( + canvasColor: + model.bottomSheetBackgroundColor), + child: DropDown( + value: _selectedType, + item: _labelPosition + .map((String value) { + return DropdownMenuItem( + value: (value != null) + ? value + : 'betweenTicks', + child: Text('$value', + style: TextStyle( + color: + model.textColor))); + }).toList(), + valueChanged: (dynamic value) { + onPositionTypeChange( + value.toString(), model); + }), + ), + )), + ], + ), + ], + ), + ), + ]), + ))); } } - -SfCartesianChart getTicksCategoryAxisChart(bool isTileView, - [LabelPlacement _labelPlacement]) { - return SfCartesianChart( - title: ChartTitle(text: isTileView ? '' : 'Employees task count'), - plotAreaBorderWidth: 0, - primaryXAxis: CategoryAxis( - majorGridLines: MajorGridLines(width: 0), - labelPlacement: _labelPlacement != null - ? _labelPlacement - : LabelPlacement.betweenTicks), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), - majorTickLines: MajorTickLines(width: 0), - minimum: 7, - maximum: 12, - interval: 1), - series: getLineSeries(isTileView, _labelPlacement), - tooltipBehavior: - TooltipBehavior(enable: true, header: '', canShowMarker: false), - ); -} - -List> getLineSeries( - bool isTileView, LabelPlacement _labelPlacement) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('John', 10), - _ChartData('Parker', 11), - _ChartData('David', 9), - _ChartData('Peter', 10), - _ChartData('Antony', 11), - _ChartData('Brit', 10) - ]; - return >[ - LineSeries<_ChartData, String>( - dataSource: chartData, - xValueMapper: (_ChartData data, _) => data.country, - yValueMapper: (_ChartData data, _) => data.value, - markerSettings: MarkerSettings(isVisible: true)) - ]; -} - -class _ChartData { - _ChartData(this.country, this.value); - String country; - int value; -} diff --git a/lib/samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart b/lib/samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart index 7432b47b..a828549f 100755 --- a/lib/samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart +++ b/lib/samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart @@ -1,14 +1,13 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +//ignore: must_be_immutable class DateTimeLabel extends StatefulWidget { - const DateTimeLabel(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DateTimeLabel({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DateTimeLabelState createState() => _DateTimeLabelState(sample); @@ -16,204 +15,15 @@ class DateTimeLabel extends StatefulWidget { class _DateTimeLabelState extends State { _DateTimeLabelState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DateTimeLabel oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/date_time_types/date_time_axis_with_label_format.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getLabelDateTimeAxisChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 200, - child: InkWell( - onTap: () => launch( - 'https://en.wikipedia.org/wiki/List_of_earthquakes_in_Indonesia'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('en.wikipedia.org', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://en.wikipedia.org/wiki/List_of_earthquakes_in_Indonesia'; + const String source = 'en.wikipedia.org'; + return getScopedModel(getLabelDateTimeAxisChart(false), + sample, null, sourceLink, source); } } @@ -234,7 +44,7 @@ SfCartesianChart getLabelDateTimeAxisChart(bool isTileView) { maximum: 8, title: AxisTitle(text: isTileView ? '' : 'Magnitude (Mw)'), ), - series: getLineSeries(isTileView), + series: getLabelDateTimeAxisSeries(isTileView), tooltipBehavior: TooltipBehavior( enable: true, format: 'point.x : point.y Mw', @@ -243,38 +53,33 @@ SfCartesianChart getLabelDateTimeAxisChart(bool isTileView) { ); } -List> getLineSeries(bool isTileView) { - final List<_DateTimeData> chartData = <_DateTimeData>[ - _DateTimeData(DateTime(2019, 4, 12), 6.8), - _DateTimeData(DateTime(2019, 03, 17), 5.5), - _DateTimeData(DateTime(2018, 11, 14), 5.6), - _DateTimeData(DateTime(2018, 10, 10), 6.0), - _DateTimeData(DateTime(2018, 09, 28), 7.5), - _DateTimeData(DateTime(2018, 08, 19), 6.9), - _DateTimeData(DateTime(2018, 08, 19), 6.3), - _DateTimeData(DateTime(2018, 08, 09), 5.9), - _DateTimeData(DateTime(2018, 08, 05), 6.9), - _DateTimeData(DateTime(2018, 07, 29), 6.4), - _DateTimeData(DateTime(2018, 07, 21), 5.2), - _DateTimeData(DateTime(2018, 04, 18), 4.5), - _DateTimeData(DateTime(2018, 01, 23), 6.0), - _DateTimeData(DateTime(2017, 12, 15), 6.5), - _DateTimeData(DateTime(2017, 10, 31), 6.3) +List> getLabelDateTimeAxisSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: DateTime(2019, 4, 12), yValue: 6.8), + ChartSampleData(x: DateTime(2019, 03, 17), yValue: 5.5), + ChartSampleData(x: DateTime(2018, 11, 14), yValue: 5.6), + ChartSampleData(x: DateTime(2018, 10, 10), yValue: 6.0), + ChartSampleData(x: DateTime(2018, 09, 28), yValue: 7.5), + ChartSampleData(x: DateTime(2018, 08, 19), yValue: 6.9), + ChartSampleData(x: DateTime(2018, 08, 19), yValue: 6.3), + ChartSampleData(x: DateTime(2018, 08, 09), yValue: 5.9), + ChartSampleData(x: DateTime(2018, 08, 05), yValue: 6.9), + ChartSampleData(x: DateTime(2018, 07, 29), yValue: 6.4), + ChartSampleData(x: DateTime(2018, 07, 21), yValue: 5.2), + ChartSampleData(x: DateTime(2018, 04, 18), yValue: 4.5), + ChartSampleData(x: DateTime(2018, 01, 23), yValue: 6.0), + ChartSampleData(x: DateTime(2017, 12, 15), yValue: 6.5), + ChartSampleData(x: DateTime(2017, 10, 31), yValue: 6.3) ]; - return >[ - ScatterSeries<_DateTimeData, DateTime>( + return >[ + ScatterSeries( enableTooltip: true, opacity: 0.8, markerSettings: MarkerSettings(height: 15, width: 15), dataSource: chartData, - xValueMapper: (_DateTimeData data, _) => data.year, - yValueMapper: (_DateTimeData data, _) => data.y, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue, color: const Color.fromRGBO(232, 84, 84, 1)) ]; } - -class _DateTimeData { - _DateTimeData(this.year, this.y); - final DateTime year; - final double y; -} diff --git a/lib/samples/chart/axis_types/date_time_types/default_date_time_axis.dart b/lib/samples/chart/axis_types/date_time_types/default_date_time_axis.dart index 87e28e20..d11bdbb9 100755 --- a/lib/samples/chart/axis_types/date_time_types/default_date_time_axis.dart +++ b/lib/samples/chart/axis_types/date_time_types/default_date_time_axis.dart @@ -1,13 +1,12 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +//ignore: must_be_immutable class DateTimeDefault extends StatefulWidget { - const DateTimeDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DateTimeDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DateTimeDefaultState createState() => _DateTimeDefaultState(sample); @@ -15,206 +14,15 @@ class DateTimeDefault extends StatefulWidget { class _DateTimeDefaultState extends State { _DateTimeDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DateTimeDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/date_time_types/default_date_time_axis.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - + final SubItem sample; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultDateTimeAxisChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 200, - child: InkWell( - onTap: () => launch( - 'https://www.x-rates.com/graph/?from=USD&to=INR&amount=1'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.x-rates.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.x-rates.com/graph/?from=USD&to=INR&amount=1'; + const String source = 'www.x-rates.com'; + return getScopedModel(getDefaultDateTimeAxisChart(false), + sample, null, sourceLink, source); } } @@ -235,7 +43,7 @@ SfCartesianChart getDefaultDateTimeAxisChart(bool isTileView) { axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0), ), - series: getLineSeries(isTileView), + series: getDefaultDateTimeSeries(isTileView), trackballBehavior: TrackballBehavior( enable: true, activationMode: ActivationMode.singleTap, @@ -243,74 +51,64 @@ SfCartesianChart getDefaultDateTimeAxisChart(bool isTileView) { InteractiveTooltip(format: 'point.x : point.y', borderWidth: 0))); } -List> getLineSeries(bool isTileView) { - final List<_DateTimeData> chartData = <_DateTimeData>[ - _DateTimeData(DateTime(2015, 1, 1), 1.13), - _DateTimeData(DateTime(2015, 2, 1), 1.12), - _DateTimeData(DateTime(2015, 3, 1), 1.08), - _DateTimeData(DateTime(2015, 4, 1), 1.12), - _DateTimeData(DateTime(2015, 5, 1), 1.1), - _DateTimeData(DateTime(2015, 6, 1), 1.12), - _DateTimeData(DateTime(2015, 7, 1), 1.1), - _DateTimeData(DateTime(2015, 8, 1), 1.12), - _DateTimeData(DateTime(2015, 9, 1), 1.12), - _DateTimeData(DateTime(2015, 10, 1), 1.1), - _DateTimeData(DateTime(2015, 11, 1), 1.06), - _DateTimeData(DateTime(2015, 12, 1), 1.09), - _DateTimeData(DateTime(2016, 1, 1), 1.09), - _DateTimeData(DateTime(2016, 2, 1), 1.09), - _DateTimeData(DateTime(2016, 3, 1), 1.14), - _DateTimeData(DateTime(2016, 4, 1), 1.14), - _DateTimeData(DateTime(2016, 5, 1), 1.12), - _DateTimeData(DateTime(2016, 6, 1), 1.11), - _DateTimeData(DateTime(2016, 7, 1), 1.11), - _DateTimeData(DateTime(2016, 8, 1), 1.11), - _DateTimeData(DateTime(2016, 9, 1), 1.12), - _DateTimeData(DateTime(2016, 10, 1), 1.1), - _DateTimeData(DateTime(2016, 11, 1), 1.08), - _DateTimeData( - DateTime( - 2016, - 12, - ), - 1.05), - _DateTimeData(DateTime(2017, 1, 1), 1.08), - _DateTimeData(DateTime(2017, 2, 1), 1.06), - _DateTimeData(DateTime(2017, 3, 1), 1.07), - _DateTimeData(DateTime(2017, 4, 1), 1.09), - _DateTimeData(DateTime(2017, 5, 1), 1.12), - _DateTimeData(DateTime(2017, 6, 1), 1.14), - _DateTimeData(DateTime(2017, 7, 1), 1.17), - _DateTimeData(DateTime(2017, 8, 1), 1.18), - _DateTimeData(DateTime(2017, 9, 1), 1.18), - _DateTimeData(DateTime(2017, 10, 1), 1.16), - _DateTimeData(DateTime(2017, 11, 1), 1.18), - _DateTimeData(DateTime(2017, 12, 1), 1.2), - _DateTimeData(DateTime(2018, 1, 1), 1.25), - _DateTimeData(DateTime(2018, 2, 1), 1.22), - _DateTimeData(DateTime(2018, 3, 1), 1.23), - _DateTimeData(DateTime(2018, 4, 1), 1.21), - _DateTimeData(DateTime(2018, 5, 1), 1.17), - _DateTimeData(DateTime(2018, 6, 1), 1.17), - _DateTimeData(DateTime(2018, 7, 1), 1.17), - _DateTimeData(DateTime(2018, 8, 1), 1.17), - _DateTimeData(DateTime(2018, 9, 1), 1.16), - _DateTimeData(DateTime(2018, 10, 1), 1.13), - _DateTimeData(DateTime(2018, 11, 1), 1.14), - _DateTimeData(DateTime(2018, 12, 1), 1.15) +List> getDefaultDateTimeSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: DateTime(2015, 1, 1), yValue: 1.13), + ChartSampleData(x: DateTime(2015, 2, 1), yValue: 1.12), + ChartSampleData(x: DateTime(2015, 3, 1), yValue: 1.08), + ChartSampleData(x: DateTime(2015, 4, 1), yValue: 1.12), + ChartSampleData(x: DateTime(2015, 5, 1), yValue: 1.1), + ChartSampleData(x: DateTime(2015, 6, 1), yValue: 1.12), + ChartSampleData(x: DateTime(2015, 7, 1), yValue: 1.1), + ChartSampleData(x: DateTime(2015, 8, 1), yValue: 1.12), + ChartSampleData(x: DateTime(2015, 9, 1), yValue: 1.12), + ChartSampleData(x: DateTime(2015, 10, 1), yValue: 1.1), + ChartSampleData(x: DateTime(2015, 11, 1), yValue: 1.06), + ChartSampleData(x: DateTime(2015, 12, 1), yValue: 1.09), + ChartSampleData(x: DateTime(2016, 1, 1), yValue: 1.09), + ChartSampleData(x: DateTime(2016, 2, 1), yValue: 1.09), + ChartSampleData(x: DateTime(2016, 3, 1), yValue: 1.14), + ChartSampleData(x: DateTime(2016, 4, 1), yValue: 1.14), + ChartSampleData(x: DateTime(2016, 5, 1), yValue: 1.12), + ChartSampleData(x: DateTime(2016, 6, 1), yValue: 1.11), + ChartSampleData(x: DateTime(2016, 7, 1), yValue: 1.11), + ChartSampleData(x: DateTime(2016, 8, 1), yValue: 1.11), + ChartSampleData(x: DateTime(2016, 9, 1), yValue: 1.12), + ChartSampleData(x: DateTime(2016, 10, 1), yValue: 1.1), + ChartSampleData(x: DateTime(2016, 11, 1), yValue: 1.08), + ChartSampleData(x: DateTime(2016, 12, 1), yValue: 1.05), + ChartSampleData(x: DateTime(2017, 1, 1), yValue: 1.08), + ChartSampleData(x: DateTime(2017, 2, 1), yValue: 1.06), + ChartSampleData(x: DateTime(2017, 3, 1), yValue: 1.07), + ChartSampleData(x: DateTime(2017, 4, 1), yValue: 1.09), + ChartSampleData(x: DateTime(2017, 5, 1), yValue: 1.12), + ChartSampleData(x: DateTime(2017, 6, 1), yValue: 1.14), + ChartSampleData(x: DateTime(2017, 7, 1), yValue: 1.17), + ChartSampleData(x: DateTime(2017, 8, 1), yValue: 1.18), + ChartSampleData(x: DateTime(2017, 9, 1), yValue: 1.18), + ChartSampleData(x: DateTime(2017, 10, 1), yValue: 1.16), + ChartSampleData(x: DateTime(2017, 11, 1), yValue: 1.18), + ChartSampleData(x: DateTime(2017, 12, 1), yValue: 1.2), + ChartSampleData(x: DateTime(2018, 1, 1), yValue: 1.25), + ChartSampleData(x: DateTime(2018, 2, 1), yValue: 1.22), + ChartSampleData(x: DateTime(2018, 3, 1), yValue: 1.23), + ChartSampleData(x: DateTime(2018, 4, 1), yValue: 1.21), + ChartSampleData(x: DateTime(2018, 5, 1), yValue: 1.17), + ChartSampleData(x: DateTime(2018, 6, 1), yValue: 1.17), + ChartSampleData(x: DateTime(2018, 7, 1), yValue: 1.17), + ChartSampleData(x: DateTime(2018, 8, 1), yValue: 1.17), + ChartSampleData(x: DateTime(2018, 9, 1), yValue: 1.16), + ChartSampleData(x: DateTime(2018, 10, 1), yValue: 1.13), + ChartSampleData(x: DateTime(2018, 11, 1), yValue: 1.14), + ChartSampleData(x: DateTime(2018, 12, 1), yValue: 1.15) ]; - return >[ - LineSeries<_DateTimeData, DateTime>( + return >[ + LineSeries( dataSource: chartData, - xValueMapper: (_DateTimeData data, _) => data.year, - yValueMapper: (_DateTimeData data, _) => data.y, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue, color: const Color.fromRGBO(242, 117, 7, 1), ) ]; } - -class _DateTimeData { - _DateTimeData(this.year, this.y); - final DateTime year; - final double y; -} diff --git a/lib/samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart b/lib/samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart index e8627523..2f065246 100644 --- a/lib/samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart +++ b/lib/samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart @@ -1,14 +1,13 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +//ignore: must_be_immutable class LogarithmicAxisDefault extends StatefulWidget { - const LogarithmicAxisDefault(this.sample, {Key key}) : super(key: key); + LogarithmicAxisDefault({this.sample, Key key}) : super(key: key); - final SubItemList sample; + SubItem sample; @override _LogarithmicAxisDefaultState createState() => @@ -16,184 +15,13 @@ class LogarithmicAxisDefault extends StatefulWidget { } class _LogarithmicAxisDefaultState extends State { - _LogarithmicAxisDefaultState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(LogarithmicAxisDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _,SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/logarithmic_types/default_logarithmic_axis.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultLogarithmicAxisChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel( + getDefaultLogarithmicAxisChart(false), sample); } } @@ -215,31 +43,25 @@ SfCartesianChart getDefaultLogarithmicAxisChart(bool isTileView) { ); } -List> _getSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(DateTime(1996, 1, 1), 200), - _ChartData(DateTime(1997, 1, 1), 400), - _ChartData(DateTime(1998, 1, 1), 600), - _ChartData(DateTime(1999, 1, 1), 700), - _ChartData(DateTime(2000, 1, 1), 1400), - _ChartData(DateTime(2001, 1, 1), 2000), - _ChartData(DateTime(2002, 1, 1), 4000), - _ChartData(DateTime(2003, 1, 1), 6000), - _ChartData(DateTime(2004, 1, 1), 8000), - _ChartData(DateTime(2005, 1, 1), 11000) +List> _getSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x: DateTime(1996, 1, 1), yValue: 200), + ChartSampleData(x: DateTime(1997, 1, 1), yValue: 400), + ChartSampleData(x: DateTime(1998, 1, 1), yValue: 600), + ChartSampleData(x: DateTime(1999, 1, 1), yValue: 700), + ChartSampleData(x: DateTime(2000, 1, 1), yValue: 1400), + ChartSampleData(x: DateTime(2001, 1, 1), yValue: 2000), + ChartSampleData(x: DateTime(2002, 1, 1), yValue: 4000), + ChartSampleData(x: DateTime(2003, 1, 1), yValue: 6000), + ChartSampleData(x: DateTime(2004, 1, 1), yValue: 8000), + ChartSampleData(x: DateTime(2005, 1, 1), yValue: 11000) ]; - return >[ - LineSeries<_ChartData, DateTime>( + return >[ + LineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, markerSettings: MarkerSettings(isVisible: true)) ]; } - -class _ChartData { - _ChartData(this.x, this.y); - final DateTime x; - final int y; -} diff --git a/lib/samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart b/lib/samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart index 877c0df4..9b654c95 100644 --- a/lib/samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart +++ b/lib/samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart @@ -1,14 +1,13 @@ -import 'package:intl/intl.dart'; -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; -dynamic text; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; + +//ignore: must_be_immutable class LogarithmicAxisInversed extends StatefulWidget { - const LogarithmicAxisInversed(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + LogarithmicAxisInversed({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LogarithmicAxisInversedState createState() => _LogarithmicAxisInversedState(sample); @@ -16,222 +15,30 @@ class LogarithmicAxisInversed extends StatefulWidget { class _LogarithmicAxisInversedState extends State { _LogarithmicAxisInversedState(this.sample); - final SubItemList sample; - - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(LogarithmicAxisInversed oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/logarithmic_types/inversed_logarithmic_axis.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getInversedLogarithmicAxisChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.worldometers.info/world-population/population-by-country/'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('worldometers.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.worldometers.info/world-population/population-by-country/'; + const String source = 'www.worldometers.info'; + return getScopedModel(getInversedLogarithmicAxisChart(false), + sample, null, sourceLink, source); } } SfCartesianChart getInversedLogarithmicAxisChart(bool isTileView) { + dynamic text; return SfCartesianChart( onTooltipRender: (TooltipArgs args) { final NumberFormat format = NumberFormat.decimalPattern(); text = format.format(args.dataPoints[args.pointIndex].y).toString(); args.text = text; }, - onAxisLabelRender: (AxisLabelRenderArgs args) { + onAxisLabelRender: (AxisLabelRenderArgs args) { final NumberFormat format = NumberFormat.decimalPattern(); - if(args.axisName == 'primaryYAxis') - args.text = format.format(double.parse(args.text)).toString(); + if (args.axisName == 'primaryYAxis') + args.text = format.format(double.parse(args.text)).toString(); }, plotAreaBorderWidth: 0, title: @@ -249,39 +56,35 @@ SfCartesianChart getInversedLogarithmicAxisChart(bool isTileView) { isInversed: true, interval: 1, ), - series: _getSeries(isTileView), + series: _getInversedLogarithmicSeries(isTileView), tooltipBehavior: TooltipBehavior( enable: true, format: 'point.y', header: '', canShowMarker: false), ); } -List> _getSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('China', 1433783686), - _ChartData('India', 1366417754), - _ChartData('US', 329064917), - _ChartData('Japan', 126860301), - _ChartData('UK', 67530172), - _ChartData('Canada', 37411047), - _ChartData('Greece', 10473455), - _ChartData('Maldives', 530953), - _ChartData('Dominica', 71808), +List> _getInversedLogarithmicSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'China', yValue: 1433783686), + ChartSampleData(x: 'India', yValue: 1366417754), + ChartSampleData(x: 'US', yValue: 329064917), + ChartSampleData(x: 'Japan', yValue: 126860301), + ChartSampleData(x: 'UK', yValue: 67530172), + ChartSampleData(x: 'Canada', yValue: 37411047), + ChartSampleData(x: 'Greece', yValue: 10473455), + ChartSampleData(x: 'Maldives', yValue: 530953), + ChartSampleData(x: 'Dominica', yValue: 71808), ]; - return >[ - StepLineSeries<_ChartData, String>( + return >[ + StepLineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, - markerSettings: MarkerSettings(isVisible: true, - width: 5, - height: 5, - shape: DataMarkerType.rectangle)) + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, + markerSettings: MarkerSettings( + isVisible: true, + width: 5, + height: 5, + shape: DataMarkerType.rectangle)) ]; } - -class _ChartData { - _ChartData(this.x, this.y); - final String x; - final int y; -} diff --git a/lib/samples/chart/axis_types/numeric_types/default_numeric_axis.dart b/lib/samples/chart/axis_types/numeric_types/default_numeric_axis.dart index fc013017..78a73563 100755 --- a/lib/samples/chart/axis_types/numeric_types/default_numeric_axis.dart +++ b/lib/samples/chart/axis_types/numeric_types/default_numeric_axis.dart @@ -1,13 +1,12 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +//ignore: must_be_immutable class NumericDefault extends StatefulWidget { - const NumericDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + NumericDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _NumericDefaultState createState() => _NumericDefaultState(sample); @@ -15,209 +14,15 @@ class NumericDefault extends StatefulWidget { class _NumericDefaultState extends State { _NumericDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(NumericDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - + final SubItem sample; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/numeric_types/default_numeric_axis.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultNumericAxisChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 200, - child: InkWell( - onTap: () => launch( - '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'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.google.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String 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'; + const String source = 'www.google.com'; + return getScopedModel( + getDefaultNumericAxisChart(false), sample, null, sourceLink, source); } } @@ -239,41 +44,35 @@ SfCartesianChart getDefaultNumericAxisChart(bool isTileView) { title: AxisTitle(text: isTileView ? '' : 'Score'), axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), + series: getDefaultNumericSeries(isTileView), tooltipBehavior: TooltipBehavior( enable: true, format: 'Score: point.y', canShowMarker: false), ); } -List> getLineSeries(bool isTileView) { - final List<_ChartNumeric> chartData = <_ChartNumeric>[ - _ChartNumeric(1, 240, 236), - _ChartNumeric(2, 250, 242), - _ChartNumeric(3, 281, 313), - _ChartNumeric(4, 358, 359), - _ChartNumeric(5, 237, 272) +List> getDefaultNumericSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(xValue: 1, yValue: 240, yValue2: 236), + ChartSampleData(xValue: 2, yValue: 250, yValue2: 242), + ChartSampleData(xValue: 3, yValue: 281, yValue2: 313), + ChartSampleData(xValue: 4, yValue: 358, yValue2: 359), + ChartSampleData(xValue: 5, yValue: 237, yValue2: 272) ]; - return >[ - ColumnSeries<_ChartNumeric, num>( + return >[ + ColumnSeries( enableTooltip: true, dataSource: chartData, color: const Color.fromRGBO(237, 221, 76, 1), name: 'Australia', - xValueMapper: (_ChartNumeric sales, _) => sales.x, - yValueMapper: (_ChartNumeric sales, _) => sales.y2), - ColumnSeries<_ChartNumeric, num>( + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2), + ColumnSeries( enableTooltip: true, dataSource: chartData, color: const Color.fromRGBO(2, 109, 213, 1), - xValueMapper: (_ChartNumeric sales, _) => sales.x, - yValueMapper: (_ChartNumeric sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, name: 'India'), ]; } - -class _ChartNumeric { - _ChartNumeric(this.x, this.y, this.y2); - final double x; - final double y; - final double y2; -} diff --git a/lib/samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart b/lib/samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart index 042509c6..4994ffcd 100755 --- a/lib/samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart +++ b/lib/samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart @@ -1,115 +1,103 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; import 'package:flutter_examples/widgets/switch.dart'; -import 'package:intl/intl.dart'; +import 'package:scoped_model/scoped_model.dart'; import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class NumericInverse extends StatefulWidget { - const NumericInverse(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + NumericInverse({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _NumericInverseState createState() => _NumericInverseState(sample); } class _NumericInverseState extends State { _NumericInverseState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - + final SubItem sample; @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel( + null, sample, InversedNumericFrontPanel(sample)); } +} - @override - void didUpdateWidget(NumericInverse oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getInversedNumericAxisChart(bool isTileView, + [bool isXInversed, bool isYInversed]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Airports count in US'), + primaryXAxis: NumericAxis( + minimum: 2000, + maximum: 2010, + title: AxisTitle(text: isTileView ? '' : 'Year'), + isInversed: isXInversed ?? true, + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + numberFormat: NumberFormat.decimalPattern(), + axisLine: AxisLine(width: 0), + title: AxisTitle(text: isTileView ? '' : 'Count'), + isInversed: isYInversed ?? true, + majorTickLines: MajorTickLines(size: 0)), + series: getInversedNumericSeries(isTileView), + tooltipBehavior: + TooltipBehavior(enable: true, header: '', canShowMarker: false), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _,SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/numeric_types/inversed_numeric_axis.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius:const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> getInversedNumericSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(xValue: 2000, yValue: 14720), + ChartSampleData(xValue: 2001, yValue: 14695), + ChartSampleData(xValue: 2002, yValue: 14801), + ChartSampleData(xValue: 2003, yValue: 14807), + ChartSampleData(xValue: 2004, yValue: 14857), + ChartSampleData(xValue: 2006, yValue: 14858), + ChartSampleData(xValue: 2007, yValue: 14947), + ChartSampleData(xValue: 2008, yValue: 14951), + ChartSampleData(xValue: 2010, yValue: 15079), + ]; + return >[ + LineSeries( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, + width: 2, + markerSettings: MarkerSettings(isVisible: true)) + ]; } -class FrontPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; +class InversedNumericFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + InversedNumericFrontPanel(this.sampleList); + final SubItem sampleList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _InversedNumericFrontPanelState createState() => + _InversedNumericFrontPanelState(sampleList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _InversedNumericFrontPanelState extends State { + _InversedNumericFrontPanelState(this.sample); + final SubItem sample; bool isYInversed = true; bool isXInversed = true; @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -158,257 +146,98 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { - final double height = - (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) - ? 0.3 - : 0.4; + void _showSettingsPanel(SampleModel model) { showRoundedModalBottomSheet( dismissOnTap: false, context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant< + SampleModel>( rebuildOnChange: false, - builder: (BuildContext context, _,SampleListModel model) => Padding( - padding:const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 150, - child: Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: MediaQuery.of(context).size.height * height, - child: Padding( - padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), - child: Stack(children: [ - Container( - height: 40, - child: Row( - crossAxisAlignment: - CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - Text('Settings', - style: TextStyle( - color: model.textColor, - fontSize: 18, - letterSpacing: 0.34, - fontWeight: FontWeight.w500)), - IconButton( - icon: Icon( - Icons.close, - color: model.textColor, - ), - onPressed: () { - Navigator.pop(context); - }, - ), - ], - ), + builder: (BuildContext context, _, SampleModel model) => + Container( + height: 150, + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack(children: [ + Row( + mainAxisAlignment: MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + Padding( + padding: const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: ListView( + children: [ + Row( + children: [ + Text('Inverse X axis', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: FontWeight.normal)), + const Padding( + padding: EdgeInsets.only(left: 5), + ), + Padding( + padding: const EdgeInsets.fromLTRB(30, 0, 0, 0), + child: BottomSheetSwitch( + activeColor: model.backgroundColor, + switchValue: isXInversed, + valueChanged: (dynamic value) { + setState(() { + isXInversed = value; + }); + }, ), - Padding( - padding: - const EdgeInsets.fromLTRB(10, 50, 0, 0), - child: ListView( - children: [ - Container( - child: Row( - children: [ - Text('Inverse X axis', - style: TextStyle( - color: model.textColor, - fontSize: 16, - letterSpacing: 0.34, - fontWeight: - FontWeight.normal)), - const Padding( - padding: EdgeInsets.only(left: 5), - ), - Padding( - padding: - const EdgeInsets.fromLTRB( - 30, 0, 0, 0), - child: BottomSheetSwitch( - activeColor: - model.backgroundColor, - switchValue: isXInversed, - valueChanged: (dynamic value) { - setState(() { - isXInversed = value; - }); - }, - ), - ), - ], - ), - ), - Container( - child: Row( - children: [ - Text('Inverse Y axis', - style: TextStyle( - color: model.textColor, - fontSize: 16, - letterSpacing: 0.34, - fontWeight: - FontWeight.normal)), - const Padding( - padding: EdgeInsets.only(left: 5), - ), - Padding( - padding: - const EdgeInsets.fromLTRB( - 30, 0, 0, 0), - child: BottomSheetSwitch( - activeColor: - model.backgroundColor, - switchValue: isYInversed, - valueChanged: (dynamic value) { - setState(() { - isYInversed = value; - }); - }, - ), - ), - ], - ), - ), - ], - ), + ), + ], + ), + Row( + children: [ + Text('Inverse Y axis', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: FontWeight.normal)), + const Padding( + padding: EdgeInsets.only(left: 5), + ), + Padding( + padding: const EdgeInsets.fromLTRB(30, 0, 0, 0), + child: BottomSheetSwitch( + activeColor: model.backgroundColor, + switchValue: isYInversed, + valueChanged: (dynamic value) { + setState(() { + isYInversed = value; + }); + }, ), - ]), - ))))))); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _,SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + ), + ], + ), + ], + ), + ), + ]), + ))); } } - -SfCartesianChart getInversedNumericAxisChart(bool isTileView, - [bool isXInversed, bool isYInversed]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - title: ChartTitle(text: isTileView ? '' : 'Airports count in US'), - primaryXAxis: NumericAxis( - minimum: 2000, - maximum: 2010, - title: AxisTitle(text: isTileView ? '' : 'Year'), - isInversed: isXInversed ?? true, - majorGridLines: MajorGridLines(width: 0), - edgeLabelPlacement: EdgeLabelPlacement.shift), - primaryYAxis: NumericAxis( - numberFormat: NumberFormat.decimalPattern(), - axisLine: AxisLine(width: 0), - title: AxisTitle(text: isTileView ? '' : 'Count'), - isInversed: isYInversed ?? true, - majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), - tooltipBehavior: - TooltipBehavior(enable: true, header: '', canShowMarker: false), - ); -} - -List> getLineSeries(bool isTileView) { - final List<_InversedData> chartData = <_InversedData>[ - _InversedData(2000, 14720), - _InversedData(2001, 14695), - _InversedData(2002, 14801), - _InversedData(2003, 14807), - _InversedData(2004, 14857), - _InversedData(2006, 14858), - _InversedData(2007, 14947), - _InversedData(2008, 14951), - _InversedData(2010, 15079), - ]; - return >[ - LineSeries<_InversedData, num>( - enableTooltip: true, - dataSource: chartData, - xValueMapper: (_InversedData sales, _) => sales.x, - yValueMapper: (_InversedData sales, _) => sales.y, - width: 2, - markerSettings: MarkerSettings(isVisible: true)) - ]; -} - -class _InversedData { - _InversedData(this.x, this.y); - final double x; - final double y; -} diff --git a/lib/samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart b/lib/samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart index 19a33e04..9877dd45 100755 --- a/lib/samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart +++ b/lib/samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart @@ -1,193 +1,24 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +//ignore: must_be_immutable class NumericLabel extends StatefulWidget { - const NumericLabel(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + NumericLabel({this.sample, Key key}) : super(key: key); + SubItem sample; @override _NumericLabelState createState() => _NumericLabelState(sample); } class _NumericLabelState extends State { - _NumericLabelState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(NumericLabel oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/axis_types/numeric_types/numeric_axis_with_label_format.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + _NumericLabelState(this.sample); + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getLabelNumericAxisChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getLabelNumericAxisChart(false), sample); } } @@ -203,7 +34,7 @@ SfCartesianChart getLabelNumericAxisChart(bool isTileView) { labelFormat: '{value}°F', axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), + series: getNumericLabelSeries(isTileView), tooltipBehavior: TooltipBehavior( enable: true, header: '', @@ -212,32 +43,26 @@ SfCartesianChart getLabelNumericAxisChart(bool isTileView) { ); } -List> getLineSeries(bool isTileView) { - final List<_NumericData> chartData = <_NumericData>[ - _NumericData(0, 32), - _NumericData(5, 41), - _NumericData(10, 50), - _NumericData(15, 59), - _NumericData(20, 68), - _NumericData(25, 77), - _NumericData(30, 86), - _NumericData(35, 95), - _NumericData(40, 104), - _NumericData(45, 113), - _NumericData(50, 122) +List> getNumericLabelSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(xValue: 0, yValue: 32), + ChartSampleData(xValue: 5, yValue: 41), + ChartSampleData(xValue: 10, yValue: 50), + ChartSampleData(xValue: 15, yValue: 59), + ChartSampleData(xValue: 20, yValue: 68), + ChartSampleData(xValue: 25, yValue: 77), + ChartSampleData(xValue: 30, yValue: 86), + ChartSampleData(xValue: 35, yValue: 95), + ChartSampleData(xValue: 40, yValue: 104), + ChartSampleData(xValue: 45, yValue: 113), + ChartSampleData(xValue: 50, yValue: 122) ]; - return >[ - LineSeries<_NumericData, num>( + return >[ + LineSeries( dataSource: chartData, - xValueMapper: (_NumericData sales, _) => sales.x, - yValueMapper: (_NumericData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, width: 2, markerSettings: MarkerSettings(height: 10, width: 10, isVisible: true)), ]; } - -class _NumericData { - _NumericData(this.x, this.y); - final double x; - final double y; -} diff --git a/lib/samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart b/lib/samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart index 80460ce8..511e59e4 100755 --- a/lib/samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart +++ b/lib/samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart @@ -1,14 +1,14 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class AreaEmpty extends StatefulWidget { - const AreaEmpty(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + AreaEmpty({this.sample, Key key}) : super(key: key); + SubItem sample; @override _AreaEmptyState createState() => _AreaEmptyState(sample); @@ -16,193 +16,11 @@ class AreaEmpty extends StatefulWidget { class _AreaEmptyState extends State { _AreaEmptyState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(AreaEmpty oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/area_with_emptypoints.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - //frontHeader: model.panelTitle(context), - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} + final SubItem sample; -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getEmptyPointAreaChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getEmptyPointAreaChart(false), sample); } } @@ -220,37 +38,32 @@ SfCartesianChart getEmptyPointAreaChart(bool isTileView) { numberFormat: NumberFormat.compact(), axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getAreaSeries(isTileView), + series: getEmptyPointAreaSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), ); } -List> getAreaSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(2002, 220000000), - _ChartData(2003, 340000000), - _ChartData(2004, 280000000), - _ChartData(2005, null), - _ChartData(2006, null), - _ChartData(2007, 250000000), - _ChartData(2008, 290000000), - _ChartData(2009, 380000000), - _ChartData(2010, 140000000), - _ChartData(2011, 310000000), +List> getEmptyPointAreaSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 2002, y: 220000000), + ChartSampleData(x: 2003, y: 340000000), + ChartSampleData(x: 2004, y: 280000000), + ChartSampleData(x: 2005, y: null), + ChartSampleData(x: 2006, y: null), + ChartSampleData(x: 2007, y: 250000000), + ChartSampleData(x: 2008, y: 290000000), + ChartSampleData(x: 2009, y: 380000000), + ChartSampleData(x: 2010, y: 140000000), + ChartSampleData(x: 2011, y: 310000000), ]; - return >[ - AreaSeries<_ChartData, num>( + return >[ + AreaSeries( // animationDuration: isTileView ? 0 : 1500, enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y), ]; } - -class _ChartData { - _ChartData(this.x, this.y); - final double x; - final double y; -} diff --git a/lib/samples/chart/cartesian_charts/area_series/area_with_gradient.dart b/lib/samples/chart/cartesian_charts/area_series/area_with_gradient.dart index af3076b6..b8c9bf48 100755 --- a/lib/samples/chart/cartesian_charts/area_series/area_with_gradient.dart +++ b/lib/samples/chart/cartesian_charts/area_series/area_with_gradient.dart @@ -1,14 +1,14 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class AreaGradient extends StatefulWidget { - const AreaGradient(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + AreaGradient({this.sample, Key key}) : super(key: key); + SubItem sample; @override _AreaGradientState createState() => _AreaGradientState(sample); @@ -16,178 +16,11 @@ class AreaGradient extends StatefulWidget { class _AreaGradientState extends State { _AreaGradientState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(AreaGradient oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/area_with_gradient.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getGradientAreaChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getGradientAreaChart(false), sample); } } @@ -207,36 +40,37 @@ SfCartesianChart getGradientAreaChart(bool isTileView) { axisLine: AxisLine(width: 0), labelFormat: '{value}mm', majorTickLines: MajorTickLines(size: 0)), - series: getAreaSeries(isTileView), + series: getGradientAreaSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), ); } -List> getAreaSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(DateTime(1924), 400), - _ChartData(DateTime(1925), 415), - _ChartData(DateTime(1926), 408), - _ChartData(DateTime(1927), 415), - _ChartData(DateTime(1928), 350), - _ChartData(DateTime(1929), 375), - _ChartData(DateTime(1930), 500), - _ChartData(DateTime(1931), 390), - _ChartData(DateTime(1932), 450), - _ChartData(DateTime(1933), 440), - _ChartData(DateTime(1934), 350), - _ChartData(DateTime(1935), 400), - _ChartData(DateTime(1936), 365), - _ChartData(DateTime(1937), 490), - _ChartData(DateTime(1938), 400), - _ChartData(DateTime(1939), 520), - _ChartData(DateTime(1940), 510), - _ChartData(DateTime(1941), 395), - _ChartData(DateTime(1942), 380), - _ChartData(DateTime(1943), 404), - _ChartData(DateTime(1944), 400), - _ChartData(DateTime(1945), 500) +List> getGradientAreaSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: DateTime(1924), y: 400), + ChartSampleData(x: DateTime(1925), y: 415), + ChartSampleData(x: DateTime(1926), y: 408), + ChartSampleData(x: DateTime(1927), y: 415), + ChartSampleData(x: DateTime(1928), y: 350), + ChartSampleData(x: DateTime(1929), y: 375), + ChartSampleData(x: DateTime(1930), y: 500), + ChartSampleData(x: DateTime(1931), y: 390), + ChartSampleData(x: DateTime(1932), y: 450), + ChartSampleData(x: DateTime(1933), y: 440), + ChartSampleData(x: DateTime(1934), y: 350), + ChartSampleData(x: DateTime(1935), y: 400), + ChartSampleData(x: DateTime(1936), y: 365), + ChartSampleData(x: DateTime(1937), y: 490), + ChartSampleData(x: DateTime(1938), y: 400), + ChartSampleData(x: DateTime(1939), y: 520), + ChartSampleData(x: DateTime(1940), y: 510), + ChartSampleData(x: DateTime(1941), y: 395), + ChartSampleData(x: DateTime(1942), y: 380), + ChartSampleData(x: DateTime(1943), y: 404), + ChartSampleData(x: DateTime(1944), y: 400), + ChartSampleData(x: DateTime(1945), y: 500) ]; final List color = []; color.add(Colors.blue[50]); @@ -250,20 +84,14 @@ List> getAreaSeries(bool isTileView) { final LinearGradient gradientColors = LinearGradient(colors: color, stops: stops); - return >[ - AreaSeries<_ChartData, DateTime>( + return >[ + AreaSeries( enableTooltip: true, gradient: gradientColors, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Annual Rainfall', ) ]; } - -class _ChartData { - _ChartData(this.x, this.y); - final DateTime x; - final double y; -} diff --git a/lib/samples/chart/cartesian_charts/area_series/default_area_chart.dart b/lib/samples/chart/cartesian_charts/area_series/default_area_chart.dart index 22bceb49..cf0dacc1 100755 --- a/lib/samples/chart/cartesian_charts/area_series/default_area_chart.dart +++ b/lib/samples/chart/cartesian_charts/area_series/default_area_chart.dart @@ -1,14 +1,14 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; + +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class AreaDefault extends StatefulWidget { - const AreaDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + AreaDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _AreaDefaultState createState() => _AreaDefaultState(sample); @@ -16,182 +16,15 @@ class AreaDefault extends StatefulWidget { class _AreaDefaultState extends State { _AreaDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(AreaDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - toggleFrontLayer: false, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/default_area_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultAreaChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { + final SubItem sample; - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultAreaChart(false),sample); } } + SfCartesianChart getDefaultAreaChart(bool isTileView) { return SfCartesianChart( legend: Legend(isVisible: isTileView ? false : true, opacity: 0.7), @@ -209,41 +42,34 @@ SfCartesianChart getDefaultAreaChart(bool isTileView) { interval: 1, axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getAreaSeries(isTileView), + series: getDefaultAreaSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getAreaSeries(bool isTileView) { - final List<_DefaultArea> chartData = <_DefaultArea>[ - _DefaultArea(DateTime(2000, 1, 1), 4, 2.6), - _DefaultArea(DateTime(2001, 1, 1), 3.0, 2.8), - _DefaultArea(DateTime(2002, 1, 1), 3.8, 2.6), - _DefaultArea(DateTime(2003, 1, 1), 3.4, 3), - _DefaultArea(DateTime(2004, 1, 1), 3.2, 3.6), - _DefaultArea(DateTime(2005, 1, 1), 3.9, 3), +List> getDefaultAreaSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x:DateTime(2000, 1, 1), y:4, yValue2:2.6), + ChartSampleData(x:DateTime(2001, 1, 1), y:3.0, yValue2:2.8), + ChartSampleData(x:DateTime(2002, 1, 1), y:3.8, yValue2:2.6), + ChartSampleData(x:DateTime(2003, 1, 1), y:3.4, yValue2:3), + ChartSampleData(x:DateTime(2004, 1, 1), y:3.2, yValue2:3.6), + ChartSampleData(x:DateTime(2005, 1, 1), y:3.9, yValue2:3), ]; - return >[ - AreaSeries<_DefaultArea, DateTime>( + return >[ + AreaSeries( dataSource: chartData, opacity: 0.7, name: 'Product A', - xValueMapper: (_DefaultArea sales, _) => sales.x, - yValueMapper: (_DefaultArea sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, ), - AreaSeries<_DefaultArea, DateTime>( + AreaSeries( dataSource: chartData, opacity: 0.7, name: 'Product B', - xValueMapper: (_DefaultArea sales, _) => sales.x, - yValueMapper: (_DefaultArea sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, ) ]; -} - -class _DefaultArea { - _DefaultArea(this.x, this.y1, this.y2); - final DateTime x; - final double y1; - final double y2; -} +} \ No newline at end of file diff --git a/lib/samples/chart/cartesian_charts/area_series/range_area.dart b/lib/samples/chart/cartesian_charts/area_series/range_area.dart new file mode 100644 index 00000000..8257fd7a --- /dev/null +++ b/lib/samples/chart/cartesian_charts/area_series/range_area.dart @@ -0,0 +1,87 @@ +import 'dart:math'; + +import 'package:intl/intl.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; + +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable +class RangeArea extends StatefulWidget { + RangeArea({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _RangeAreaState createState() => _RangeAreaState(sample); +} + +class _RangeAreaState extends State { + _RangeAreaState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getRangeAreaChart(false), sample); + } +} + +SfCartesianChart getRangeAreaChart(bool isTileView) { + return SfCartesianChart( + title: ChartTitle(text: isTileView ? '' : 'Average temperature variation'), + plotAreaBorderWidth: 0, + primaryXAxis: DateTimeAxis( + dateFormat: DateFormat.y(), + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + labelFormat: '{value}°C', + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + zoomPanBehavior: + ZoomPanBehavior(zoomMode: ZoomMode.x, enableSelectionZooming: true), + series: _getRangeAreaSeries(isTileView), + tooltipBehavior: TooltipBehavior(enable: true, decimalPlaces: 1), + ); +} + +dynamic getData() { + List<_RangeAreaData> _chartData; + _chartData = <_RangeAreaData>[]; + double value = 30; + for (int i = 0; i < 100; i++) { + final Random yValue = Random(); + if (yValue.nextDouble() > .5) { + value += Random().nextDouble(); + } else { + value -= Random().nextDouble(); + } + _chartData.add(_RangeAreaData(DateTime(2000, i + 2, i), value, value + 10)); + } + return _chartData; +} + +List> _getRangeAreaSeries( + bool isTileView) { + final List<_RangeAreaData> chartData = getData(); + return >[ + RangeAreaSeries<_RangeAreaData, DateTime>( + dataSource: chartData, + name: 'London', + borderWidth: 2, + borderColor: Colors.blue, + color: Colors.blue[50], + borderDrawMode: RangeAreaBorderMode.excludeSides, + xValueMapper: (_RangeAreaData sales, _) => sales.month, + highValueMapper: (_RangeAreaData sales, _) => sales.high, + lowValueMapper: (_RangeAreaData sales, _) => sales.low, + ) + ]; +} + +class _RangeAreaData { + _RangeAreaData(this.month, this.high, this.low); + final DateTime month; + final double high; + final double low; +} diff --git a/lib/samples/chart/cartesian_charts/area_series/spline_area.dart b/lib/samples/chart/cartesian_charts/area_series/spline_area.dart new file mode 100644 index 00000000..c4c08632 --- /dev/null +++ b/lib/samples/chart/cartesian_charts/area_series/spline_area.dart @@ -0,0 +1,77 @@ +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; + +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable +class SplineArea extends StatefulWidget { + SplineArea({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _SplineAreaState createState() => _SplineAreaState(sample); +} + +class _SplineAreaState extends State { + _SplineAreaState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getSplineAreaChart(false), sample); + } +} + +SfCartesianChart getSplineAreaChart(bool isTileView) { + return SfCartesianChart( + legend: Legend(isVisible: isTileView ? false : true, opacity: 0.7), + title: ChartTitle(text: isTileView ? '' : 'Inflation rate'), + plotAreaBorderWidth: 0, + primaryXAxis: NumericAxis( + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + labelFormat: '{value}%', + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: _getSplieAreaSeries(isTileView), + tooltipBehavior: TooltipBehavior(enable: true), + ); +} + +List> _getSplieAreaSeries( + bool isTileView) { + final List<_SplineAreaData> chartData = <_SplineAreaData>[ + _SplineAreaData(2010, 10.53, 3.3), + _SplineAreaData(2011, 9.5, 5.4), + _SplineAreaData(2012, 10, 2.65), + _SplineAreaData(2013, 9.4, 2.62), + _SplineAreaData(2014, 5.8, 1.99), + _SplineAreaData(2015, 4.9, 1.44), + _SplineAreaData(2016, 4.5, 2), + _SplineAreaData(2017, 3.6, 1.56), + _SplineAreaData(2018, 3.43, 2.1), + ]; + return >[ + SplineAreaSeries<_SplineAreaData, double>( + dataSource: chartData, + name: 'India', + xValueMapper: (_SplineAreaData sales, _) => sales.year, + yValueMapper: (_SplineAreaData sales, _) => sales.y1, + ), + SplineAreaSeries<_SplineAreaData, double>( + dataSource: chartData, + name: 'China', + xValueMapper: (_SplineAreaData sales, _) => sales.year, + yValueMapper: (_SplineAreaData sales, _) => sales.y2, + ) + ]; +} + +class _SplineAreaData { + _SplineAreaData(this.year, this.y1, this.y2); + final double year; + final double y1; + final double y2; +} diff --git a/lib/samples/chart/cartesian_charts/area_series/step_area.dart b/lib/samples/chart/cartesian_charts/area_series/step_area.dart new file mode 100644 index 00000000..9eb5ccde --- /dev/null +++ b/lib/samples/chart/cartesian_charts/area_series/step_area.dart @@ -0,0 +1,106 @@ +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; + +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable +class StepArea extends StatefulWidget { + StepArea({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _StepAreaState createState() => _StepAreaState(sample); +} + +class _StepAreaState extends State { + _StepAreaState(this.sample); + final SubItem sample; + bool panelOpen; + final ValueNotifier frontPanelVisible = ValueNotifier(true); + + @override + Widget build(BuildContext context) { + const String sourceLink = + 'https://www.accuweather.com/en/fr/paris/623/march-weather/623?year=2019'; + const String source = 'www.accuweather.com'; + return getScopedModel( + getStepAreaChart(false), sample, null, sourceLink, source); + } +} + +SfCartesianChart getStepAreaChart(bool isTileView) { + return SfCartesianChart( + legend: Legend(isVisible: isTileView ? false : true), + title: ChartTitle(text: isTileView ? '' : 'Temperature variation of Paris'), + plotAreaBorderWidth: 0, + primaryXAxis: DateTimeAxis( + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + labelFormat: '{value}°C', + interval: isTileView ? 4 : 2, + maximum: 16, + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: getStepAreaSeries(isTileView), + tooltipBehavior: TooltipBehavior(enable: true), + ); +} + +List> getStepAreaSeries(bool isTileView) { + final List<_RangeAreaData> chartData = <_RangeAreaData>[ + _RangeAreaData(DateTime(2019, 3, 1), 12, 9), + _RangeAreaData(DateTime(2019, 3, 2), 13, 7), + _RangeAreaData(DateTime(2019, 3, 3), 14, 10), + _RangeAreaData(DateTime(2019, 3, 4), 12, 5), + _RangeAreaData(DateTime(2019, 3, 5), 12, 4), + _RangeAreaData(DateTime(2019, 3, 6), 12, 8), + _RangeAreaData(DateTime(2019, 3, 7), 13, 6), + _RangeAreaData(DateTime(2019, 3, 8), 12, 4), + _RangeAreaData(DateTime(2019, 3, 9), 15, 8), + _RangeAreaData(DateTime(2019, 3, 10), 14, 7), + _RangeAreaData(DateTime(2019, 3, 11), 10, 3), + _RangeAreaData(DateTime(2019, 3, 12), 13, 4), + _RangeAreaData(DateTime(2019, 3, 13), 12, 4), + _RangeAreaData(DateTime(2019, 3, 14), 11, 6), + _RangeAreaData(DateTime(2019, 3, 15), 14, 10), + _RangeAreaData(DateTime(2019, 3, 16), 14, 9), + _RangeAreaData(DateTime(2019, 3, 17), 11, 4), + _RangeAreaData(DateTime(2019, 3, 18), 11, 2), + // _RangeAreaData(DateTime(2019,3,19), 13, 0), + // _RangeAreaData(DateTime(2019,3,20), 14, 2), + // _RangeAreaData(DateTime(2019,3,21), 16, 3), + // _RangeAreaData(DateTime(2019,3,22), 18, 4), + // _RangeAreaData(DateTime(2019,3,23), 14, 4), + // _RangeAreaData(DateTime(2019,3,24), 12, 5), + // _RangeAreaData(DateTime(2019,3,25), 12, 3), + // _RangeAreaData(DateTime(2019,3,26), 13, 5), + // _RangeAreaData(DateTime(2019,3,27), 13, 4), + // _RangeAreaData(DateTime(2019,3,28), 15, 4), + // _RangeAreaData(DateTime(2019,3,29), 18, 5), + // _RangeAreaData(DateTime(2019,3,30), 20, 4), + // _RangeAreaData(DateTime(2019,3,31), 21, 4), + ]; + return >[ + StepAreaSeries<_RangeAreaData, DateTime>( + dataSource: chartData, + name: 'High', + xValueMapper: (_RangeAreaData sales, _) => sales.x, + yValueMapper: (_RangeAreaData sales, _) => sales.high, + ), + StepAreaSeries<_RangeAreaData, DateTime>( + dataSource: chartData, + name: 'Low', + xValueMapper: (_RangeAreaData sales, _) => sales.x, + yValueMapper: (_RangeAreaData sales, _) => sales.low, + ) + ]; +} + +class _RangeAreaData { + _RangeAreaData(this.x, this.high, this.low); + final DateTime x; + final double high; + final double low; +} diff --git a/lib/samples/chart/cartesian_charts/area_series/vertical_area_chart.dart b/lib/samples/chart/cartesian_charts/area_series/vertical_area_chart.dart index 23e973b6..fd62cd9b 100755 --- a/lib/samples/chart/cartesian_charts/area_series/vertical_area_chart.dart +++ b/lib/samples/chart/cartesian_charts/area_series/vertical_area_chart.dart @@ -1,190 +1,24 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class AreaVertical extends StatefulWidget { - const AreaVertical(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + AreaVertical({this.sample, Key key}) : super(key: key); + SubItem sample; @override _AreaVerticalState createState() => _AreaVerticalState(sample); } class _AreaVerticalState extends State { -_AreaVerticalState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); + _AreaVerticalState(this.sample); + final SubItem sample; - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(AreaVertical oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/area_series/vertical_area_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getVerticalAreaChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getVerticalAreaChart(false), sample); } } @@ -203,52 +37,43 @@ SfCartesianChart getVerticalAreaChart(bool isTileView) { primaryYAxis: NumericAxis( title: AxisTitle(text: isTileView ? '' : 'Spends'), majorTickLines: MajorTickLines(size: 0)), - series: getAreaSeries(isTileView), + series: getVerticalAreaSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getAreaSeries(bool isTileView) { - final List<_AreaData> chartData = <_AreaData>[ - _AreaData(DateTime(2000, 0, 1), 0.61, 0.03, 0.48, 0.23), - _AreaData(DateTime(2001, 0, 1), 0.81, 0.05, 0.53, 0.17), - _AreaData(DateTime(2002, 0, 1), 0.91, 0.06, 0.57, 0.17), - _AreaData(DateTime(2003, 0, 1), 1, 0.09, 0.61, 0.20), - _AreaData(DateTime(2004, 0, 1), 1.19, 0.14, 0.63, 0.23), - _AreaData(DateTime(2005, 0, 1), 1.47, 0.20, 0.64, 0.36), - _AreaData(DateTime(2006, 0, 1), 1.74, 0.29, 0.66, 0.43), - _AreaData(DateTime(2007, 0, 1), 1.98, 0.46, 0.76, 0.52), - _AreaData(DateTime(2008, 0, 1), 1.99, 0.64, 0.77, 0.72), - _AreaData(DateTime(2009, 0, 1), 1.70, 0.75, 0.55, 1.29), - _AreaData(DateTime(2010, 0, 1), 1.48, 1.06, 0.54, 1.38), - _AreaData(DateTime(2011, 0, 1), 1.38, 1.25, 0.57, 1.82), - _AreaData(DateTime(2012, 0, 1), 1.66, 1.55, 0.61, 2.16), - _AreaData(DateTime(2013, 0, 1), 1.66, 1.55, 0.67, 2.51), - _AreaData(DateTime(2014, 0, 1), 1.67, 1.65, 0.67, 2.61), +List> getVerticalAreaSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x:DateTime(2000, 0, 1), y:0.61, yValue:0.03, yValue2:0.48, yValue3:0.23), + ChartSampleData(x:DateTime(2001, 0, 1), y:0.81, yValue:0.05, yValue2:0.53, yValue3:0.17), + ChartSampleData(x:DateTime(2002, 0, 1), y:0.91, yValue:0.06, yValue2:0.57, yValue3:0.17), + ChartSampleData(x:DateTime(2003, 0, 1), y:1, yValue:0.09, yValue2:0.61, yValue3:0.20), + ChartSampleData(x:DateTime(2004, 0, 1), y:1.19, yValue:0.14, yValue2:0.63, yValue3:0.23), + ChartSampleData(x:DateTime(2005, 0, 1), y:1.47, yValue:0.20,yValue2: 0.64, yValue3:0.36), + ChartSampleData(x:DateTime(2006, 0, 1), y:1.74, yValue:0.29, yValue2:0.66, yValue3:0.43), + ChartSampleData(x:DateTime(2007, 0, 1), y:1.98, yValue:0.46, yValue2:0.76, yValue3:0.52), + ChartSampleData(x:DateTime(2008, 0, 1), y:1.99, yValue:0.64, yValue2:0.77, yValue3:0.72), + ChartSampleData(x:DateTime(2009, 0, 1), y:1.70, yValue:0.75, yValue2:0.55, yValue3:1.29), + ChartSampleData(x:DateTime(2010, 0, 1), y:1.48, yValue:1.06, yValue2:0.54, yValue3:1.38), + ChartSampleData(x:DateTime(2011, 0, 1), y:1.38, yValue:1.25, yValue2:0.57, yValue3:1.82), + ChartSampleData(x:DateTime(2012, 0, 1), y:1.66, yValue:1.55, yValue2:0.61, yValue3:2.16), + ChartSampleData(x:DateTime(2013, 0, 1), y:1.66, yValue:1.55, yValue2:0.67, yValue3:2.51), + ChartSampleData(x:DateTime(2014, 0, 1), y:1.67, yValue:1.65, yValue2:0.67, yValue3:2.61), ]; - return >[ - AreaSeries<_AreaData, DateTime>( + return >[ + AreaSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_AreaData sales, _) => sales.x, - yValueMapper: (_AreaData sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, opacity: 0.7, name: 'Organic'), - AreaSeries<_AreaData, DateTime>( + AreaSeries( enableTooltip: true, dataSource: chartData, opacity: 0.7, - xValueMapper: (_AreaData sales, _) => sales.x, - yValueMapper: (_AreaData sales, _) => sales.y4, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, name: 'Others'), ]; } - -class _AreaData { - _AreaData(this.x, this.y1, this.y2, this.y3, this.y4); - final DateTime x; - final double y1; - final double y2; - final double y3; - final double y4; -} diff --git a/lib/samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart b/lib/samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart index 289048b1..d91dfd1e 100755 --- a/lib/samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart +++ b/lib/samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart @@ -1,15 +1,15 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/custom_button.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class BarSpacing extends StatefulWidget { - const BarSpacing(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BarSpacing({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BarSpacingState createState() => _BarSpacingState(sample); @@ -17,102 +17,77 @@ class BarSpacing extends StatefulWidget { class _BarSpacingState extends State { _BarSpacingState(this.sample); - final SubItemList sample; - - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); + final SubItem sample; @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, BarSettingsFrontPanel(sample)); } +} - @override - void didUpdateWidget(BarSpacing oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getSpacingBarChart(bool isTileView, + [double columnWidth, double columnSpacing]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Exports & Imports of US'), + legend: Legend(isVisible: isTileView ? false : true), + primaryXAxis: NumericAxis( + minimum: 2005, + maximum: 2011, + interval: 1, + majorGridLines: MajorGridLines(width: 0)), + primaryYAxis: NumericAxis( + labelFormat: '{value}%', + title: AxisTitle(text: isTileView ? '' : 'Goods and services (% of GDP)'), + ), + series: getSpacingBarSeries(isTileView, columnWidth, columnSpacing), + tooltipBehavior: TooltipBehavior(enable: true), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/bar_width_and_spacing.dart'); - }, - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> getSpacingBarSeries( + bool isTileView, double columnWidth, double columnSpacing) { + final List chartData = [ + ChartSampleData(x: 2006, y: 16.219, yValue2: 10.655), + ChartSampleData(x: 2007, y: 16.461, yValue2: 11.498), + ChartSampleData(x: 2008, y: 17.427, yValue2: 12.514), + ChartSampleData(x: 2009, y: 13.754, yValue2: 11.012), + ChartSampleData(x: 2010, y: 15.743, yValue2: 12.315), + ]; + return >[ + BarSeries( + enableTooltip: true, + width: isTileView ? 0.8 : columnWidth, + spacing: isTileView ? 0.2 : columnSpacing, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + name: 'Import'), + BarSeries( + enableTooltip: true, + width: isTileView ? 0.8 : columnWidth, + spacing: isTileView ? 0.2 : columnSpacing, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, + name: 'Export') + ]; } -class FrontPanel extends StatefulWidget { - +//ignore:must_be_immutable +class BarSettingsFrontPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + BarSettingsFrontPanel(this.subItemList); + SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _BarSettingsFrontPanelState createState() => + _BarSettingsFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _BarSettingsFrontPanelState extends State { + _BarSettingsFrontPanelState(this.sample); + final SubItem sample; double columnWidth = 0.8; double columnSpacing = 0.2; TextEditingController editingController = TextEditingController(); @@ -120,11 +95,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -141,7 +116,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -151,9 +126,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -217,8 +192,8 @@ class _FrontPanelState extends State { initialValue: columnWidth, onChanged: (double val) => setState(() { - columnWidth = val; - }), + columnWidth = val; + }), step: 0.1, horizontal: true, loop: true, @@ -269,8 +244,8 @@ class _FrontPanelState extends State { initialValue: columnSpacing, onChanged: (double val) => setState(() { - columnSpacing = val; - }), + columnSpacing = val; + }), step: 0.1, horizontal: true, loop: true, @@ -305,133 +280,3 @@ class _FrontPanelState extends State { )))); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getSpacingBarChart(bool isTileView, - [double columnWidth, double columnSpacing]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - title: ChartTitle(text: isTileView ? '' : 'Exports & Imports of US'), - legend: Legend(isVisible: isTileView ? false : true), - primaryXAxis: NumericAxis( - minimum: 2005, maximum: 2011,interval: 1, majorGridLines: MajorGridLines(width: 0)), - primaryYAxis: NumericAxis( - labelFormat: '{value}%', - title: AxisTitle(text: isTileView ? '' : 'Goods and services (% of GDP)'), - ), - series: getBarSeries(isTileView, columnWidth, columnSpacing), - tooltipBehavior: TooltipBehavior(enable: true), - ); -} - -List> getBarSeries( - bool isTileView, double columnWidth, double columnSpacing) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(2006, 16.219, 10.655), - _ChartData(2007, 16.461, 11.498), - _ChartData(2008, 17.427, 12.514), - _ChartData(2009, 13.754, 11.012), - _ChartData(2010, 15.743, 12.315), - ]; - return >[ - BarSeries<_ChartData, num>( - enableTooltip: true, - width: isTileView ? 0.8 : columnWidth, - spacing: isTileView ? 0.2 : columnSpacing, - dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.year, - yValueMapper: (_ChartData sales, _) => sales.import, - name: 'Import'), - BarSeries<_ChartData, num>( - enableTooltip: true, - width: isTileView ? 0.8 : columnWidth, - spacing: isTileView ? 0.2 : columnSpacing, - dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.year, - yValueMapper: (_ChartData sales, _) => sales.export, - name: 'Export') - ]; -} - -class _ChartData { - _ChartData(this.year, this.import, this.export); - final double year; - final double import; - final double export; -} diff --git a/lib/samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart b/lib/samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart index a1de434b..b4902108 100755 --- a/lib/samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart +++ b/lib/samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class BarRounded extends StatefulWidget { - const BarRounded(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BarRounded({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BarRoundedState createState() => _BarRoundedState(sample); @@ -15,204 +14,15 @@ class BarRounded extends StatefulWidget { class _BarRoundedState extends State { _BarRoundedState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(BarRounded oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/bar_with_rounded_corners.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRoundedBarChart(false)), - ), - floatingActionButton: Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.indexmundi.com/g/r.aspx?v=24'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.indexmundi.com', - style: TextStyle(fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ), - - ); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = 'https://www.indexmundi.com/g/r.aspx?v=24'; + const String source = 'www.indexmundi.com'; + return getScopedModel( + getRoundedBarChart(false), sample, null, sourceLink, source); } } @@ -224,35 +34,29 @@ SfCartesianChart getRoundedBarChart(bool isTileView) { primaryXAxis: CategoryAxis(majorGridLines: MajorGridLines(width: 0)), primaryYAxis: NumericAxis( minimum: -2, maximum: 2, majorTickLines: MajorTickLines(size: 0)), - series: getBarSeries(isTileView), + series: getRoundedBarSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), ); } -List> getBarSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Iceland', 1.13), - _ChartData('Moldova', -1.05), - _ChartData('Malaysia', 1.37), - _ChartData('American Samoa', -1.3), - _ChartData('Singapore', 1.82), - _ChartData('Puerto Rico', -1.74), - _ChartData('Algeria', 1.7) +List> getRoundedBarSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Iceland', y: 1.13), + ChartSampleData(x: 'Moldova', y: -1.05), + ChartSampleData(x: 'Malaysia', y: 1.37), + ChartSampleData(x: 'American Samoa', y: -1.3), + ChartSampleData(x: 'Singapore', y: 1.82), + ChartSampleData(x: 'Puerto Rico', y: -1.74), + ChartSampleData(x: 'Algeria', y: 1.7) ]; - return >[ - BarSeries<_ChartData, String>( + return >[ + BarSeries( enableTooltip: true, dataSource: chartData, - borderRadius:const BorderRadius.all(Radius.circular(10)), - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.population, + borderRadius: const BorderRadius.all(Radius.circular(10)), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, ), ]; } - -class _ChartData { - _ChartData(this.x, this.population); - final String x; - final double population; -} diff --git a/lib/samples/chart/cartesian_charts/bar_series/bar_with_track.dart b/lib/samples/chart/cartesian_charts/bar_series/bar_with_track.dart index 64bb165c..231c35c6 100755 --- a/lib/samples/chart/cartesian_charts/bar_series/bar_with_track.dart +++ b/lib/samples/chart/cartesian_charts/bar_series/bar_with_track.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class BarTracker extends StatefulWidget { - const BarTracker(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BarTracker({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BarTrackerState createState() => _BarTrackerState(sample); @@ -15,194 +14,11 @@ class BarTracker extends StatefulWidget { class _BarTrackerState extends State { _BarTrackerState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(BarTracker oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/bar_with_track.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getTrackerBarChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getTrackerBarChart(false), sample); } } @@ -219,37 +35,31 @@ SfCartesianChart getTrackerBarChart(bool isTileView) { minimum: 0, maximum: 8, majorTickLines: MajorTickLines(size: 0)), - series: getBarSeries(isTileView), + series: getTrackerBarSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), ); } -List> getBarSeries(bool isTileView) { - final List<_TrackerData> chartData = <_TrackerData>[ - _TrackerData('Mike', 7.5), - _TrackerData('Chris', 7), - _TrackerData('Helana', 6), - _TrackerData('Tom', 5), - _TrackerData('Federer', 7), - _TrackerData('Hussain', 7), +List> getTrackerBarSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Mike', y: 7.5), + ChartSampleData(x: 'Chris', y: 7), + ChartSampleData(x: 'Helana', y: 6), + ChartSampleData(x: 'Tom', y: 5), + ChartSampleData(x: 'Federer', y: 7), + ChartSampleData(x: 'Hussain', y: 7), ]; - return >[ - BarSeries<_TrackerData, String>( + return >[ + BarSeries( dataSource: chartData, borderRadius: BorderRadius.circular(15), - trackColor:const Color.fromRGBO(198, 201, 207, 1), + trackColor: const Color.fromRGBO(198, 201, 207, 1), isTrackVisible: true, dataLabelSettings: DataLabelSettings( isVisible: true, labelAlignment: ChartDataLabelAlignment.top), - xValueMapper: (_TrackerData sales, _) => sales.employeeName, - yValueMapper: (_TrackerData sales, _) => sales.hours, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, ), ]; } - -class _TrackerData { - _TrackerData(this.employeeName, this.hours); - final String employeeName; - final double hours; -} diff --git a/lib/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart b/lib/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart index 4e39b197..07750925 100755 --- a/lib/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart +++ b/lib/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart @@ -2,14 +2,13 @@ import 'dart:typed_data'; import 'dart:ui' as ui; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class BarCustomization extends StatefulWidget { - const BarCustomization(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BarCustomization({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BarCustomizationState createState() => _BarCustomizationState(sample); @@ -22,219 +21,15 @@ List values; class _BarCustomizationState extends State { _BarCustomizationState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(BarCustomization oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/customized_bar_chart.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - void initState() { - super.initState(); - } - - final SubItemList sample; - + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getCustomizedBarChart(false)), - ), - floatingActionButton: Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.makeuseof.com/tag/most-popular-android-apps/'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.makeuseof.com', - style: TextStyle(fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { -_BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.makeuseof.com/tag/most-popular-android-apps/'; + const String source = 'www.makeuseof.com'; + return getScopedModel( + getCustomizedBarChart(false), sample, null, sourceLink, source); } } @@ -250,29 +45,30 @@ SfCartesianChart getCustomizedBarChart(bool isTileView) { title: AxisTitle(text: 'Downloads in Billion'), majorGridLines: MajorGridLines(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getVerticalData(isTileView), + series: getCustomizedBarSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, canShowMarker: false, header: ''), ); } -List> getVerticalData(bool isTileView) { - final dynamic chartData = <_ChartData>[ - _ChartData('Facebook', 4.119, Colors.redAccent), - _ChartData('FB Messenger', 3.408, Colors.indigo), - _ChartData('WhatsApp', 2.979, Colors.grey), - _ChartData('Instagram', 1.843, Colors.orange), - _ChartData('Skype', 1.039, Colors.green), - _ChartData('Subway Surfers', 1.025, Colors.yellow), +List> getCustomizedBarSeries( + bool isTileView) { + final dynamic chartData = [ + ChartSampleData(x: 'Facebook', y: 4.119, pointColor: Colors.redAccent), + ChartSampleData(x: 'FB Messenger', y: 3.408, pointColor: Colors.indigo), + ChartSampleData(x: 'WhatsApp', y: 2.979, pointColor: Colors.grey), + ChartSampleData(x: 'Instagram', y: 1.843, pointColor: Colors.orange), + ChartSampleData(x: 'Skype', y: 1.039, pointColor: Colors.green), + ChartSampleData(x: 'Subway Surfers', y: 1.025, pointColor: Colors.yellow), ]; - return >[ - CustomBarSeries<_ChartData, String>( + return >[ + CustomBarSeries( enableTooltip: true, isTrackVisible: false, dataLabelSettings: DataLabelSettings(isVisible: true), dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, ) ]; } @@ -317,11 +113,11 @@ class CustomBarSeries extends BarSeries { @override ChartSegment createSegment() { - return CustomPainter(); + return BarCustomPainter(); } } -class CustomPainter extends BarSegment { +class BarCustomPainter extends BarSegment { List values = []; @override @@ -349,10 +145,3 @@ class CustomPainter extends BarSegment { } } } - -class _ChartData { - _ChartData(this.x, this.y, this.colors); - final String x; - final double y; - final Color colors; -} diff --git a/lib/samples/chart/cartesian_charts/bar_series/default_bar_chart.dart b/lib/samples/chart/cartesian_charts/bar_series/default_bar_chart.dart index 4bb43884..60cf465e 100755 --- a/lib/samples/chart/cartesian_charts/bar_series/default_bar_chart.dart +++ b/lib/samples/chart/cartesian_charts/bar_series/default_bar_chart.dart @@ -1,14 +1,15 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class BarDefault extends StatefulWidget { - const BarDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BarDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BarDefaultState createState() => _BarDefaultState(sample); @@ -16,178 +17,11 @@ class BarDefault extends StatefulWidget { class _BarDefaultState extends State { _BarDefaultState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(BarDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bar_series/default_bar_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultBarChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultBarChart(false), sample); } } @@ -202,46 +36,42 @@ SfCartesianChart getDefaultBarChart(bool isTileView) { primaryYAxis: NumericAxis( majorGridLines: MajorGridLines(width: 0), numberFormat: NumberFormat.compact()), - series: getBarSeries(isTileView), + series: getDefaultBarSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getBarSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('France', 84452000, 82682000, 86861000), - _ChartData('Spain', 68175000, 75315000, 81786000), - _ChartData('US', 77774000, 76407000, 76941000), - _ChartData('Italy', 50732000, 52372000, 58253000), - _ChartData('Mexico', 32093000, 35079000, 39291000), - _ChartData('UK', 34436000, 35814000, 37651000), +List> getDefaultBarSeries(bool isTileView) { + final List chartData = [ + ChartSampleData( + x: 'France', y: 84452000, yValue2: 82682000, yValue3: 86861000), + ChartSampleData( + x: 'Spain', y: 68175000, yValue2: 75315000, yValue3: 81786000), + ChartSampleData(x: 'US', y: 77774000, yValue2: 76407000, yValue3: 76941000), + ChartSampleData( + x: 'Italy', y: 50732000, yValue2: 52372000, yValue3: 58253000), + ChartSampleData( + x: 'Mexico', y: 32093000, yValue2: 35079000, yValue3: 39291000), + ChartSampleData(x: 'UK', y: 34436000, yValue2: 35814000, yValue3: 37651000), ]; - return >[ - BarSeries<_ChartData, String>( + return >[ + BarSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.year1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: '2015'), - BarSeries<_ChartData, String>( + BarSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.year2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: '2016'), - BarSeries<_ChartData, String>( + BarSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.year3, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, name: '2017') ]; } - -class _ChartData { - _ChartData(this.x, this.year1, this.year2, this.year3); - final String x; - final double year1; - final double year2; - final double year3; -} diff --git a/lib/samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart b/lib/samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart index 3b8e961c..58cf7be2 100755 --- a/lib/samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart +++ b/lib/samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class BubbleGradient extends StatefulWidget { - const BubbleGradient(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BubbleGradient({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BubbleGradientState createState() => _BubbleGradientState(sample); @@ -15,198 +14,14 @@ class BubbleGradient extends StatefulWidget { class _BubbleGradientState extends State { _BubbleGradientState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(BubbleGradient oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/bubble_filled_with_gradient.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } + return getScopedModel(getGradientBubbleChart(false),sample); + } } -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getGradientBubbleChart(false)), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} SfCartesianChart getGradientBubbleChart(bool isTileView) { return SfCartesianChart( @@ -224,7 +39,7 @@ SfCartesianChart getGradientBubbleChart(bool isTileView) { minimum: 0, maximum: 4, interval: 1), - series: getBubbleSeries(isTileView), + series: getGradientBubbleSeries(isTileView), tooltipBehavior: TooltipBehavior( enable: true, header: '', canShowMarker: false, // format: 'point.x\nFinal : point.y\nWin : point.size' @@ -232,14 +47,14 @@ SfCartesianChart getGradientBubbleChart(bool isTileView) { ); } -List> getBubbleSeries(bool isTileView) { - final List<_BubbleGradient> chartData = <_BubbleGradient>[ - _BubbleGradient('England', 3, 0, const Color.fromRGBO(233, 132, 30, 1)), - _BubbleGradient('India', 3, 2, const Color.fromRGBO(0, 255, 255, 1)), - _BubbleGradient('Pakistan', 2, 1, const Color.fromRGBO(255, 200, 102, 1)), - _BubbleGradient('West\nIndies', 3, 2, const Color.fromRGBO(0, 0, 0, 1)), - _BubbleGradient('Sri\nLanka', 3, 1, const Color.fromRGBO(255, 340, 102, 1)), - _BubbleGradient('New\nZealand', 1, 0, const Color.fromRGBO(200, 0, 102, 1)) +List> getGradientBubbleSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x:'England', y:3, yValue:0, pointColor: const Color.fromRGBO(233, 132, 30, 1)), + ChartSampleData(x:'India', y:3, yValue:2, pointColor:const Color.fromRGBO(0, 255, 255, 1)), + ChartSampleData(x:'Pakistan', y:2, yValue:1, pointColor:const Color.fromRGBO(255, 200, 102, 1)), + ChartSampleData(x:'West\nIndies', y:3, yValue:2, pointColor:const Color.fromRGBO(0, 0, 0, 1)), + ChartSampleData(x:'Sri\nLanka', y:3, yValue:1, pointColor:const Color.fromRGBO(255, 340, 102, 1)), + ChartSampleData(x:'New\nZealand', y:1, yValue:0,pointColor: const Color.fromRGBO(200, 0, 102, 1)) ]; final List color = []; color.add(Colors.blue[50]); @@ -253,24 +68,15 @@ List> getBubbleSeries(bool isTileView) { final LinearGradient gradientColors = LinearGradient(colors: color, stops: stops); - return >[ - BubbleSeries<_BubbleGradient, String>( + return >[ + BubbleSeries( gradient: gradientColors, dataSource: chartData, minimumRadius: 5, maximumRadius: 10, - xValueMapper: (_BubbleGradient sales, _) => sales.country, - yValueMapper: (_BubbleGradient sales, _) => sales.finalList, - sizeValueMapper: (_BubbleGradient sales, _) => sales.bubbleSize, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + sizeValueMapper: (ChartSampleData sales, _) => sales.yValue, ) ]; } - -class _BubbleGradient { - _BubbleGradient(this.country, this.finalList, - [this.bubbleSize, this.pointColorMapper]); - final String country; - final num finalList; - final double bubbleSize; - final Color pointColorMapper; -} diff --git a/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart b/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart index 0b51277a..d4a54068 100755 --- a/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart +++ b/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart @@ -1,194 +1,24 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class BubbleMultiSeries extends StatefulWidget { - const BubbleMultiSeries(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BubbleMultiSeries({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BubbleMultiSeriesState createState() => _BubbleMultiSeriesState(sample); } class _BubbleMultiSeriesState extends State { - _BubbleMultiSeriesState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(BubbleMultiSeries oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_multiple_series.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getMultipleSeriesBubbleChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getMultipleSeriesBubbleChart(false), sample); } } @@ -205,7 +35,7 @@ SfCartesianChart getMultipleSeriesBubbleChart(bool isTileView) { axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(width: 0), title: AxisTitle(text: isTileView ? '' : 'GDP growth rate')), - series: getBubbleSeries(isTileView), + series: getMultipleBubbleSeries(isTileView), legend: Legend( isVisible: isTileView ? false : true, overflowMode: LegendItemOverflowMode.wrap), @@ -219,72 +49,65 @@ SfCartesianChart getMultipleSeriesBubbleChart(bool isTileView) { ); } -List> getBubbleSeries(bool isTileView) { - final List<_BubbleData> asia = <_BubbleData>[ - _BubbleData('China', 92.2, 7.8, 1.347), - _BubbleData('India', 74, 6.5, 1.241), - _BubbleData('Indonesia', 90.4, 6.0, 0.238), - _BubbleData('Japan', 99, 0.2, 0.128), - _BubbleData('Philippines', 92.6, 6.6, 0.096), - _BubbleData('Hong Kong', 82.2, 3.97, 0.7), - _BubbleData('Jordan', 72.5, 4.5, 0.7), - _BubbleData('Australia', 81, 3.5, 0.21), - _BubbleData('Mongolia', 66.8, 3.9, 0.028), - _BubbleData('Taiwan', 78.4, 2.9, 0.231), +List> getMultipleBubbleSeries( + bool isTileView) { + final List asia = [ + ChartSampleData(x: 'China', xValue: 92.2, y: 7.8, size: 1.347), + ChartSampleData(x: 'India', xValue: 74, y: 6.5, size: 1.241), + ChartSampleData(x: 'Indonesia', xValue: 90.4, y: 6.0, size: 0.238), + ChartSampleData(x: 'Japan', xValue: 99, y: 0.2, size: 0.128), + ChartSampleData(x: 'Philippines', xValue: 92.6, y: 6.6, size: 0.096), + ChartSampleData(x: 'Hong Kong', xValue: 82.2, y: 3.97, size: 0.7), + ChartSampleData(x: 'Jordan', xValue: 72.5, y: 4.5, size: 0.7), + ChartSampleData(x: 'Australia', xValue: 81, y: 3.5, size: 0.21), + ChartSampleData(x: 'Mongolia', xValue: 66.8, y: 3.9, size: 0.028), + ChartSampleData(x: 'Taiwan', xValue: 78.4, y: 2.9, size: 0.231), ]; - final List<_BubbleData> africa = <_BubbleData>[ - _BubbleData('Egypt', 72, 2.0, 0.0826), - _BubbleData('Nigeria', 61.3, 1.45, 0.162), + final List africa = [ + ChartSampleData(x: 'Egypt', xValue: 72, y: 2.0, size: 0.0826), + ChartSampleData(x: 'Nigeria', xValue: 61.3, y: 1.45, size: 0.162), ]; - final List<_BubbleData> northAmerica = <_BubbleData>[ - _BubbleData('US', 99.4, 2.2, 0.312), - _BubbleData('Mexico', 86.1, 4.0, 0.115) + final List northAmerica = [ + ChartSampleData(x: 'US', xValue: 99.4, y: 2.2, size: 0.312), + ChartSampleData(x: 'Mexico', xValue: 86.1, y: 4.0, size: 0.115) ]; - final List<_BubbleData> europe = <_BubbleData>[ - _BubbleData('Germany', 99, 0.7, 0.0818), - _BubbleData('Russia', 99.6, 3.4, 0.143), - _BubbleData('Netherland', 79.2, 3.9, 0.162) + final List europe = [ + ChartSampleData(x: 'Germany', xValue: 99, y: 0.7, size: 0.0818), + ChartSampleData(x: 'Russia', xValue: 99.6, y: 3.4, size: 0.143), + ChartSampleData(x: 'Netherland', xValue: 79.2, y: 3.9, size: 0.162) ]; - return >[ - BubbleSeries<_BubbleData, num>( + return >[ + BubbleSeries( opacity: 0.7, enableTooltip: true, name: 'North America', dataSource: northAmerica, - xValueMapper: (_BubbleData sales, _) => sales.x, - yValueMapper: (_BubbleData sales, _) => sales.y, - sizeValueMapper: (_BubbleData sales, _) => sales.size), - BubbleSeries<_BubbleData, num>( + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.y, + sizeValueMapper: (ChartSampleData sales, _) => sales.size), + BubbleSeries( opacity: 0.7, enableTooltip: true, name: 'Europe', dataSource: europe, - xValueMapper: (_BubbleData sales, _) => sales.x, - yValueMapper: (_BubbleData sales, _) => sales.y, - sizeValueMapper: (_BubbleData sales, _) => sales.size), - BubbleSeries<_BubbleData, num>( + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.y, + sizeValueMapper: (ChartSampleData sales, _) => sales.size), + BubbleSeries( opacity: 0.7, enableTooltip: true, dataSource: asia, name: 'Asia', - xValueMapper: (_BubbleData sales, _) => sales.x, - yValueMapper: (_BubbleData sales, _) => sales.y, - sizeValueMapper: (_BubbleData sales, _) => sales.size), - BubbleSeries<_BubbleData, num>( + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.y, + sizeValueMapper: (ChartSampleData sales, _) => sales.size), + BubbleSeries( opacity: 0.7, enableTooltip: true, name: 'Africa', dataSource: africa, - xValueMapper: (_BubbleData sales, _) => sales.x, - yValueMapper: (_BubbleData sales, _) => sales.y, - sizeValueMapper: (_BubbleData sales, _) => sales.size), + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.y, + sizeValueMapper: (ChartSampleData sales, _) => sales.size), ]; } - -class _BubbleData { - _BubbleData(this.text, this.x, [this.y, this.size]); - final String text; - final double x; - final double y; - final double size; -} diff --git a/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart b/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart index dccc1ff2..449a4ca1 100755 --- a/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart +++ b/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart @@ -1,197 +1,26 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class BubblePointColor extends StatefulWidget { - const BubblePointColor(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BubblePointColor({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BubblePointColorState createState() => _BubblePointColorState(sample); } class _BubblePointColorState extends State { - _BubblePointColorState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(BubblePointColor oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + _BubblePointColorState(this.sample); + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - toggleFrontLayer: false, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/bubble_with_various_colors.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getPointColorBubbleChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getPointColorBubbleChart(false), sample); } } @@ -210,7 +39,7 @@ SfCartesianChart getPointColorBubbleChart(bool isTileView) { maximum: 1500000, rangePadding: ChartRangePadding.additional, majorTickLines: MajorTickLines(size: 0)), - series: getBubbleSeries(isTileView), + series: getPointColorBubbleSeries(isTileView), tooltipBehavior: TooltipBehavior( textAlignment: ChartAlignment.near, enable: true, @@ -220,45 +49,68 @@ SfCartesianChart getPointColorBubbleChart(bool isTileView) { ); } -List> getBubbleSeries(bool isTileView) { - final List<_BubbleColors> chartData = <_BubbleColors>[ - _BubbleColors( - 'Namibia', 825615, 0.37, const Color.fromRGBO(123, 180, 235, 1)), - _BubbleColors( - 'Angola', 1246700, 0.84, const Color.fromRGBO(53, 124, 210, 1)), - _BubbleColors( - 'Tanzania', 945087, 0.64, const Color.fromRGBO(221, 138, 189, 1)), - _BubbleColors( - 'Egypt', 1002450, 0.68, const Color.fromRGBO(248, 184, 131, 1)), - _BubbleColors( - 'Nigeria', 923768, 0.62, const Color.fromRGBO(112, 173, 71, 1)), - _BubbleColors('Peru', 1285216, 0.87, const Color.fromRGBO(0, 189, 174, 1)), - _BubbleColors( - 'Ethiopia', 1104300, 0.74, const Color.fromRGBO(229, 101, 144, 1)), - _BubbleColors( - 'Venezuela', 916445, 0.62, const Color.fromRGBO(127, 132, 232, 1)), - _BubbleColors( - 'Niger', 1267000, 0.85, const Color.fromRGBO(160, 81, 149, 1)), - _BubbleColors( - 'Turkey', 783562, 0.53, const Color.fromRGBO(234, 122, 87, 1)), +List> getPointColorBubbleSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData( + x: 'Namibia', + y: 825615, + size: 0.37, + pointColor: const Color.fromRGBO(123, 180, 235, 1)), + ChartSampleData( + x: 'Angola', + y: 1246700, + size: 0.84, + pointColor: const Color.fromRGBO(53, 124, 210, 1)), + ChartSampleData( + x: 'Tanzania', + y: 945087, + size: 0.64, + pointColor: const Color.fromRGBO(221, 138, 189, 1)), + ChartSampleData( + x: 'Egypt', + y: 1002450, + size: 0.68, + pointColor: const Color.fromRGBO(248, 184, 131, 1)), + ChartSampleData( + x: 'Nigeria', + y: 923768, + size: 0.62, + pointColor: const Color.fromRGBO(112, 173, 71, 1)), + ChartSampleData( + x: 'Peru', + y: 1285216, + size: 0.87, + pointColor: const Color.fromRGBO(0, 189, 174, 1)), + ChartSampleData( + x: 'Ethiopia', + y: 1104300, + size: 0.74, + pointColor: const Color.fromRGBO(229, 101, 144, 1)), + ChartSampleData( + x: 'Venezuela', + y: 916445, + size: 0.62, + pointColor: const Color.fromRGBO(127, 132, 232, 1)), + ChartSampleData( + x: 'Niger', + y: 1267000, + size: 0.85, + pointColor: const Color.fromRGBO(160, 81, 149, 1)), + ChartSampleData( + x: 'Turkey', + y: 783562, + size: 0.53, + pointColor: const Color.fromRGBO(234, 122, 87, 1)), ]; - return >[ - BubbleSeries<_BubbleColors, String>( + return >[ + BubbleSeries( dataSource: chartData, opacity: 0.8, - xValueMapper: (_BubbleColors sales, _) => sales.text, - yValueMapper: (_BubbleColors sales, _) => sales.growth, - pointColorMapper: (_BubbleColors sales, _) => sales.pointColorMapper, - sizeValueMapper: (_BubbleColors sales, _) => sales.bubbleSize, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + pointColorMapper: (ChartSampleData sales, _) => sales.pointColor, + sizeValueMapper: (ChartSampleData sales, _) => sales.size, ) ]; } - -class _BubbleColors { - _BubbleColors(this.text, this.growth, - [this.bubbleSize, this.pointColorMapper]); - final String text; - final num growth; - final num bubbleSize; - final Color pointColorMapper; -} diff --git a/lib/samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart b/lib/samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart index d8f99499..fcc3c148 100755 --- a/lib/samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart +++ b/lib/samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart @@ -1,13 +1,13 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class BubbleDefault extends StatefulWidget { - const BubbleDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + BubbleDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _BubbleDefaultState createState() => _BubbleDefaultState(sample); @@ -15,179 +15,11 @@ class BubbleDefault extends StatefulWidget { class _BubbleDefaultState extends State { _BubbleDefaultState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(BubbleDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - toggleFrontLayer: false, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/bubble_series/default_bubble_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultBubbleChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultBubbleChart(false), sample); } } @@ -211,45 +43,38 @@ SfCartesianChart getDefaultBubbleChart(bool isTileView) { canShowMarker: false, format: 'point.x\nLiteracy rate : point.x%\nGDP growth rate : point.y\nPopulation : point.sizeB'), - series: getBubbleSeries(isTileView)); + series: getDefaultBubbleSeries(isTileView)); } -List> getBubbleSeries(bool isTileView) { - final List<_BubbleData> bubbleData = <_BubbleData>[ - _BubbleData('China', 92.2, 7.8, 1.347), - _BubbleData('India', 74, 6.5, 1.241), - _BubbleData('Indonesia', 90.4, 6.0, 0.238), - _BubbleData('US', 99.4, 2.2, 0.312), - _BubbleData('Germany', 99, 0.7, 0.0818), - _BubbleData('Egypt', 72, 2.0, 0.0826), - _BubbleData('Russia', 99.6, 3.4, 0.143), - _BubbleData('Japan', 99, 0.2, 0.128), - _BubbleData('Mexico', 86.1, 4.0, 0.115), - _BubbleData('Philippines', 92.6, 6.6, 0.096), - _BubbleData('Nigeria', 61.3, 1.45, 0.162), - _BubbleData('Hong Kong', 82.2, 3.97, 0.7), - _BubbleData('Netherland', 79.2, 3.9, 0.162), - _BubbleData('Jordan', 72.5, 4.5, 0.7), - _BubbleData('Australia', 81, 3.5, 0.21), - _BubbleData('Mongolia', 66.8, 3.9, 0.028), - _BubbleData('Taiwan', 78.4, 2.9, 0.231), +List> getDefaultBubbleSeries( + bool isTileView) { + final List bubbleData = [ + ChartSampleData(x: 'China', xValue: 92.2, y: 7.8, size: 1.347), + ChartSampleData(x: 'India', xValue: 74, y: 6.5, size: 1.241), + ChartSampleData(x: 'Indonesia', xValue: 90.4, y: 6.0, size: 0.238), + ChartSampleData(x: 'US', xValue: 99.4, y: 2.2, size: 0.312), + ChartSampleData(x: 'Germany', xValue: 99, y: 0.7, size: 0.0818), + ChartSampleData(x: 'Egypt', xValue: 72, y: 2.0, size: 0.0826), + ChartSampleData(x: 'Russia', xValue: 99.6, y: 3.4, size: 0.143), + ChartSampleData(x: 'Japan', xValue: 99, y: 0.2, size: 0.128), + ChartSampleData(x: 'Mexico', xValue: 86.1, y: 4.0, size: 0.115), + ChartSampleData(x: 'Philippines', xValue: 92.6, y: 6.6, size: 0.096), + ChartSampleData(x: 'Nigeria', xValue: 61.3, y: 1.45, size: 0.162), + ChartSampleData(x: 'Hong Kong', xValue: 82.2, y: 3.97, size: 0.7), + ChartSampleData(x: 'Netherland', xValue: 79.2, y: 3.9, size: 0.162), + ChartSampleData(x: 'Jordan', xValue: 72.5, y: 4.5, size: 0.7), + ChartSampleData(x: 'Australia', xValue: 81, y: 3.5, size: 0.21), + ChartSampleData(x: 'Mongolia', xValue: 66.8, y: 3.9, size: 0.028), + ChartSampleData(x: 'Taiwan', xValue: 78.4, y: 2.9, size: 0.231), ]; - return >[ - BubbleSeries<_BubbleData, num>( + return >[ + BubbleSeries( enableTooltip: true, opacity: 0.7, dataSource: bubbleData, - xValueMapper: (_BubbleData sales, _) => sales.x, - yValueMapper: (_BubbleData sales, _) => sales.y, - sizeValueMapper: (_BubbleData sales, _) => sales.size, + xValueMapper: (ChartSampleData sales, _) => sales.xValue, + yValueMapper: (ChartSampleData sales, _) => sales.y, + sizeValueMapper: (ChartSampleData sales, _) => sales.size, ) ]; } - -class _BubbleData { - _BubbleData(this.text, this.x, [this.y, this.size]); - final String text; - final double x; - final double y; - final double size; -} diff --git a/lib/samples/chart/cartesian_charts/column_series/back_to_back_column.dart b/lib/samples/chart/cartesian_charts/column_series/back_to_back_column.dart index a92c7f07..71761360 100755 --- a/lib/samples/chart/cartesian_charts/column_series/back_to_back_column.dart +++ b/lib/samples/chart/cartesian_charts/column_series/back_to_back_column.dart @@ -1,214 +1,25 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; -class ColumnBack extends StatefulWidget { +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; - const ColumnBack(this.sample, {Key key}) : super(key: key); - final SubItemList sample; +//ignore: must_be_immutable +class ColumnBack extends StatefulWidget { + ColumnBack({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ColumnBackState createState() => _ColumnBackState(sample); } class _ColumnBackState extends State { - _ColumnBackState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ColumnBack oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/back_to_back_column.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableLegend = true; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getBackColumnChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getBackColumnChart(false), sample); } } @@ -230,41 +41,40 @@ SfCartesianChart getBackColumnChart(bool isTileView) { tooltipBehavior: TooltipBehavior(enable: true)); } -List> getBackToBackColumn(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('France', 63621381, 65027507, 66316092), - _ChartData('United Kingdom', 60846820, 62766365, 64613160), - _ChartData('Italy', 58143979, 59277417, 60789140), +List> getBackToBackColumn( + bool isTileView) { + final List chartData = [ + ChartSampleData( + x: 'France', y: 63621381, yValue: 65027507, yValue2: 66316092), + ChartSampleData( + x: 'United Kingdom', + y: 60846820, + yValue: 62766365, + yValue2: 64613160), + ChartSampleData( + x: 'Italy', y: 58143979, yValue: 59277417, yValue2: 60789140), ]; - return >[ - ColumnSeries<_ChartData, String>( + return >[ + ColumnSeries( enableTooltip: true, dataSource: chartData, width: 0.7, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y3, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: '2014'), - ColumnSeries<_ChartData, String>( + ColumnSeries( enableTooltip: true, dataSource: chartData, width: 0.5, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, name: '2010'), - ColumnSeries<_ChartData, String>( + ColumnSeries( enableTooltip: true, dataSource: chartData, width: 0.3, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: '2006') ]; } - -class _ChartData { - _ChartData(this.x, this.y, this.y2, this.y3); - final String x; - final double y; - final double y2; - final double y3; -} diff --git a/lib/samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart b/lib/samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart index 2fec400b..b0689383 100755 --- a/lib/samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart +++ b/lib/samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart @@ -1,123 +1,103 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/custom_button.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class ColumnSpacing extends StatefulWidget { - const ColumnSpacing(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + ColumnSpacing({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ColumnSpacingState createState() => _ColumnSpacingState(sample); } class _ColumnSpacingState extends State { - _ColumnSpacingState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + final SubItem sample; @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, ColumnSettingsFrontPanel(sample)); } +} - @override - void didUpdateWidget(ColumnSpacing oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getSpacingColumnChart(bool isTileView, + [double columnWidth, double columnSpacing]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Winter olympic medals count'), + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + ), + primaryYAxis: NumericAxis( + maximum: 150, + minimum: 0, + interval: 25, + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: getDefaultColumn(isTileView, columnWidth, columnSpacing), + legend: Legend(isVisible: isTileView ? false : true), + tooltipBehavior: TooltipBehavior(enable: true), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/column_width_and_spacing.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color:model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> getDefaultColumn(bool isTileView, + [double columnWidth, double columnSpacing]) { + final List chartData = [ + ChartSampleData(x: 'Germany', y: 128, yValue2: 129, yValue3: 101), + ChartSampleData(x: 'Russia', y: 123, yValue2: 92, yValue3: 93), + ChartSampleData(x: 'Norway', y: 107, yValue2: 106, yValue3: 90), + ChartSampleData(x: 'USA', y: 87, yValue2: 95, yValue3: 71), + ]; + return >[ + ColumnSeries( + enableTooltip: true, + width: isTileView ? 0.8 : columnWidth, + spacing: isTileView ? 0.2 : columnSpacing, + dataSource: chartData, + color: const Color.fromRGBO(252, 216, 20, 1), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + name: 'Gold'), + ColumnSeries( + enableTooltip: true, + dataSource: chartData, + width: isTileView ? 0.8 : columnWidth, + spacing: isTileView ? 0.2 : columnSpacing, + color: const Color.fromRGBO(169, 169, 169, 1), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, + name: 'Silver'), + ColumnSeries( + enableTooltip: true, + dataSource: chartData, + width: isTileView ? 0.8 : columnWidth, + spacing: isTileView ? 0.2 : columnSpacing, + color: const Color.fromRGBO(205, 127, 50, 1), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, + name: 'Bronze') + ]; } -class FrontPanel extends StatefulWidget { - +//ignore: must_be_immutable +class ColumnSettingsFrontPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + ColumnSettingsFrontPanel(this.subItemList); + SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _ColumnSettingsFrontPanelState createState() => + _ColumnSettingsFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableLegend = true; +class _ColumnSettingsFrontPanelState extends State { + _ColumnSettingsFrontPanelState(this.sample); + SubItem sample; double columnWidth = 0.8; double columnSpacing = 0.2; TextEditingController editingController = TextEditingController(); @@ -125,11 +105,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -146,7 +126,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -156,9 +136,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -222,8 +202,8 @@ class _FrontPanelState extends State { initialValue: columnWidth, onChanged: (dynamic val) => setState(() { - columnWidth = val; - }), + columnWidth = val; + }), step: 0.1, horizontal: true, loop: true, @@ -274,8 +254,8 @@ class _FrontPanelState extends State { initialValue: columnSpacing, onChanged: (dynamic val) => setState(() { - columnSpacing = val; - }), + columnSpacing = val; + }), step: 0.1, horizontal: true, loop: true, @@ -310,148 +290,3 @@ class _FrontPanelState extends State { )))); } } - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getSpacingColumnChart(bool isTileView, - [double columnWidth, double columnSpacing]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - title: ChartTitle(text: isTileView ? '' : 'Winter olympic medals count'), - primaryXAxis: CategoryAxis( - majorGridLines: MajorGridLines(width: 0), - ), - primaryYAxis: NumericAxis( - maximum: 150, - minimum: 0, - interval: 25, - axisLine: AxisLine(width: 0), - majorTickLines: MajorTickLines(size: 0)), - series: getDefaultColumn(isTileView, columnWidth, columnSpacing), - legend: Legend(isVisible: isTileView ? false : true), - tooltipBehavior: TooltipBehavior(enable: true), - ); -} - -List> getDefaultColumn(bool isTileView, - [double columnWidth, double columnSpacing]) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Germany', 128, 129, 101), - _ChartData('Russia', 123, 92, 93), - _ChartData('Norway', 107, 106, 90), - _ChartData('USA', 87, 95, 71), - ]; - return >[ - ColumnSeries<_ChartData, String>( - enableTooltip: true, - width: isTileView ? 0.8 : columnWidth, - spacing: isTileView ? 0.2 : columnSpacing, - dataSource: chartData, - color: const Color.fromRGBO(252, 216, 20, 1), - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, - name: 'Gold'), - ColumnSeries<_ChartData, String>( - enableTooltip: true, - dataSource: chartData, - width: isTileView ? 0.8 : columnWidth, - spacing: isTileView ? 0.2 : columnSpacing, - color: const Color.fromRGBO(169, 169, 169, 1), - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y2, - name: 'Silver'), - ColumnSeries<_ChartData, String>( - enableTooltip: true, - dataSource: chartData, - width: isTileView ? 0.8 : columnWidth, - spacing: isTileView ? 0.2 : columnSpacing, - color: const Color.fromRGBO(205, 127, 50, 1), - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y3, - name: 'Bronze') - ]; -} - -class _ChartData { - _ChartData(this.x, this.y, this.y2, this.y3); - final String x; - final double y; - final double y2; - final double y3; -} diff --git a/lib/samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart b/lib/samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart index 002d13cf..d87fc010 100755 --- a/lib/samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart +++ b/lib/samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class ColumnRounded extends StatefulWidget { - const ColumnRounded(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + ColumnRounded({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ColumnRoundedState createState() => _ColumnRoundedState(sample); @@ -15,205 +14,15 @@ class ColumnRounded extends StatefulWidget { class _ColumnRoundedState extends State { _ColumnRoundedState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ColumnRounded oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/column_with_rounded_corners.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRoundedColumnChart(false)), - ), - floatingActionButton: Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.worldatlas.com/articles/largest-cities-in-the-world-by-land-area.html'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.worldatlas.com', - style: TextStyle(fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.worldatlas.com/articles/largest-cities-in-the-world-by-land-area.html'; + const String source = 'www.worldatlas.com'; + return getScopedModel( + getRoundedColumnChart(false), sample, null, sourceLink, source); } } @@ -230,7 +39,7 @@ SfCartesianChart getRoundedColumnChart(bool isTileView) { majorGridLines: MajorGridLines(width: 0), ), primaryYAxis: NumericAxis(isVisible: false, minimum: 0, maximum: 9000), - series: getColumnSeries(isTileView), + series: getRoundedColumnSeries(isTileView), tooltipBehavior: TooltipBehavior( enable: true, canShowMarker: false, @@ -239,30 +48,25 @@ SfCartesianChart getRoundedColumnChart(bool isTileView) { ); } -List> getColumnSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('New York', 8683), - _ChartData('Tokyo', 6993), - _ChartData('Chicago', 5498), - _ChartData('Atlanta', 5083), - _ChartData('Boston', 4497), +List> getRoundedColumnSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'New York', y: 8683), + ChartSampleData(x: 'Tokyo', y: 6993), + ChartSampleData(x: 'Chicago', y: 5498), + ChartSampleData(x: 'Atlanta', y: 5083), + ChartSampleData(x: 'Boston', y: 4497), ]; - return >[ - ColumnSeries<_ChartData, String>( + return >[ + ColumnSeries( enableTooltip: true, width: 0.9, dataLabelSettings: DataLabelSettings( isVisible: true, labelAlignment: ChartDataLabelAlignment.top), dataSource: chartData, borderRadius: BorderRadius.circular(10), - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.area, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, ), ]; } - -class _ChartData { - _ChartData(this.x, this.area); - final String x; - final double area; -} diff --git a/lib/samples/chart/cartesian_charts/column_series/column_with_track.dart b/lib/samples/chart/cartesian_charts/column_series/column_with_track.dart index 3367d802..c9de800b 100755 --- a/lib/samples/chart/cartesian_charts/column_series/column_with_track.dart +++ b/lib/samples/chart/cartesian_charts/column_series/column_with_track.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class ColumnTracker extends StatefulWidget { - const ColumnTracker(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + ColumnTracker({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ColumnTrackerState createState() => _ColumnTrackerState(sample); @@ -15,196 +14,14 @@ class ColumnTracker extends StatefulWidget { class _ColumnTrackerState extends State { _ColumnTrackerState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ColumnTracker oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/column_with_track.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getTrackerColumnChart(false)), - )); - }); + return getScopedModel(getTrackerColumnChart(false),sample); } } -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} SfCartesianChart getTrackerColumnChart(bool isTileView) { return SfCartesianChart( @@ -227,23 +44,23 @@ SfCartesianChart getTrackerColumnChart(bool isTileView) { ); } -List> getTracker(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Subject 1', 71), - _ChartData('Subject 2', 84), - _ChartData('Subject 3', 48), - _ChartData('Subject 4', 80), - _ChartData('Subject 5', 76), +List> getTracker(bool isTileView) { + final List chartData = [ + ChartSampleData(x:'Subject 1',y: 71), + ChartSampleData(x:'Subject 2',y: 84), + ChartSampleData(x:'Subject 3', y:48), + ChartSampleData(x:'Subject 4', y:80), + ChartSampleData(x:'Subject 5', y: 76), ]; - return >[ - ColumnSeries<_ChartData, String>( + return >[ + ColumnSeries( enableTooltip: true, dataSource: chartData, isTrackVisible: true, trackColor:const Color.fromRGBO(198, 201, 207, 1), borderRadius: BorderRadius.circular(15), - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Marks', dataLabelSettings: DataLabelSettings( isVisible: true, @@ -252,8 +69,3 @@ List> getTracker(bool isTileView) { ]; } -class _ChartData { - _ChartData(this.x, this.y); - final String x; - final double y; -} diff --git a/lib/samples/chart/cartesian_charts/column_series/customized_column_chart.dart b/lib/samples/chart/cartesian_charts/column_series/customized_column_chart.dart index 4fc0142f..7fc2c0fd 100755 --- a/lib/samples/chart/cartesian_charts/column_series/customized_column_chart.dart +++ b/lib/samples/chart/cartesian_charts/column_series/customized_column_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class ColumnVertical extends StatefulWidget { - const ColumnVertical(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + ColumnVertical({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ColumnVerticalState createState() => _ColumnVerticalState(sample); @@ -15,223 +14,17 @@ class ColumnVertical extends StatefulWidget { class _ColumnVerticalState extends State { _ColumnVerticalState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ColumnVertical oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/customized_column_chart.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + const String sourceLink = 'https://www.statista.com/statistics/263393/global-pc-shipments-since-1st-quarter-2009-by-vendor/'; + const String source = 'www.statista.com'; + return getScopedModel(getCustomizedColumnChart(false),sample,null, sourceLink,source); } } -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getVerticalColumnChart(false)), - ), - floatingActionButton: Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.statista.com/statistics/263393/global-pc-shipments-since-1st-quarter-2009-by-vendor/'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.statista.com', - style: TextStyle(fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getVerticalColumnChart(bool isTileView) { +SfCartesianChart getCustomizedColumnChart(bool isTileView) { return SfCartesianChart( title: ChartTitle(text: isTileView ? '' : 'PC vendor shipments - 2015 Q1'), primaryXAxis: CategoryAxis( @@ -242,31 +35,31 @@ SfCartesianChart getVerticalColumnChart(bool isTileView) { title: AxisTitle(text: isTileView ? '' : 'Shipments in million'), majorGridLines: MajorGridLines(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getVerticalData(isTileView), + series: getCustomizedColumnSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, canShowMarker: false, header: ''), ); } -List> getVerticalData(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('HP Inc', 12.54, const Color.fromARGB(53, 92, 125, 1)), - _ChartData('Lenovo', 13.46, const Color.fromARGB(192, 108, 132, 1)), - _ChartData('Dell', 9.18, const Color.fromARGB(246, 114, 128, 1)), - _ChartData('Apple', 4.56, const Color.fromARGB(248, 177, 149, 1)), - _ChartData('Asus', 5.29, const Color.fromARGB(116, 180, 155, 1)), +List> getCustomizedColumnSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x:'HP Inc', y:12.54, pointColor:const Color.fromARGB(53, 92, 125, 1)), + ChartSampleData(x:'Lenovo', y:13.46, pointColor:const Color.fromARGB(192, 108, 132, 1)), + ChartSampleData(x:'Dell', y:9.18, pointColor:const Color.fromARGB(246, 114, 128, 1)), + ChartSampleData(x:'Apple', y:4.56, pointColor:const Color.fromARGB(248, 177, 149, 1)), + ChartSampleData(x:'Asus', y:5.29, pointColor:const Color.fromARGB(116, 180, 155, 1)), ]; - return >[ - CustomColumnSeries<_ChartData, String>( + return >[ + CustomColumnSeries( enableTooltip: true, isTrackVisible: false, dataLabelSettings: DataLabelSettings( isVisible: true, labelAlignment: ChartDataLabelAlignment.middle), dataSource: chartData, width: 0.8, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, - pointColorMapper: (_ChartData sales, _) => sales.colors, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + pointColorMapper: (ChartSampleData sales, _) => sales.pointColor, ) ]; } @@ -311,11 +104,11 @@ class CustomColumnSeries extends ColumnSeries { @override ChartSegment createSegment() { - return CustomPainter(); + return ColumnCustomPainter(); } } -class CustomPainter extends ColumnSegment { +class ColumnCustomPainter extends ColumnSegment { List colorList = [ const Color.fromRGBO(53, 92, 125, 1), const Color.fromRGBO(192, 108, 132, 1), @@ -367,9 +160,3 @@ class CustomPainter extends ColumnSegment { } } -class _ChartData { - _ChartData(this.x, this.y, this.colors); - final String x; - final double y; - final Color colors; -} diff --git a/lib/samples/chart/cartesian_charts/column_series/default_column_chart.dart b/lib/samples/chart/cartesian_charts/column_series/default_column_chart.dart index 6cd0581f..20d0b2f0 100755 --- a/lib/samples/chart/cartesian_charts/column_series/default_column_chart.dart +++ b/lib/samples/chart/cartesian_charts/column_series/default_column_chart.dart @@ -1,13 +1,13 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class ColumnDefault extends StatefulWidget { - const ColumnDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + ColumnDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ColumnDefaultState createState() => _ColumnDefaultState(sample); @@ -15,181 +15,11 @@ class ColumnDefault extends StatefulWidget { class _ColumnDefaultState extends State { _ColumnDefaultState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ColumnDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/column_series/default_column_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultColumnChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultColumnChart(false), sample); } } @@ -205,35 +35,30 @@ SfCartesianChart getDefaultColumnChart(bool isTileView) { axisLine: AxisLine(width: 0), labelFormat: '{value}%', majorTickLines: MajorTickLines(size: 0)), - series: getColumnSeries(isTileView), + series: getDefaultColumnSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), ); } -List> getColumnSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('China', 0.541), - _ChartData('Brazil', 0.818), - _ChartData('Bolivia', 1.51), - _ChartData('Mexico', 1.302), - _ChartData('Egypt', 2.017), - _ChartData('Mongolia', 1.683), +List> getDefaultColumnSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'China', y: 0.541), + ChartSampleData(x: 'Brazil', y: 0.818), + ChartSampleData(x: 'Bolivia', y: 1.51), + ChartSampleData(x: 'Mexico', y: 1.302), + ChartSampleData(x: 'Egypt', y: 2.017), + ChartSampleData(x: 'Mongolia', y: 1.683), ]; - return >[ - ColumnSeries<_ChartData, String>( + return >[ + ColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, dataLabelSettings: DataLabelSettings( isVisible: true, textStyle: ChartTextStyle(fontSize: 10)), ) ]; } - -class _ChartData { - _ChartData(this.x, this.y); - final String x; - final double y; -} diff --git a/lib/samples/chart/cartesian_charts/line_series/customized_line_chart.dart b/lib/samples/chart/cartesian_charts/line_series/customized_line_chart.dart index 835a7242..dc3c1f4f 100755 --- a/lib/samples/chart/cartesian_charts/line_series/customized_line_chart.dart +++ b/lib/samples/chart/cartesian_charts/line_series/customized_line_chart.dart @@ -3,15 +3,15 @@ import 'dart:ui'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter/material.dart' as prefix0; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class CustomizedLine extends StatefulWidget { - const CustomizedLine(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + CustomizedLine({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LineDefaultState createState() => _LineDefaultState(sample); @@ -22,181 +22,10 @@ List yValues; class _LineDefaultState extends State { _LineDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(CustomizedLine oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - toggleFrontLayer: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/customized_line_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = true; - bool enableMarker = true; - bool enableDatalabel = false; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getCustomizedLineChart(false)), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getCustomizedLineChart(false), sample); } } @@ -205,6 +34,7 @@ SfCartesianChart getCustomizedLineChart(bool isTileView) { title: ChartTitle( text: isTileView ? '' : 'Capital investment as a share of exports'), primaryXAxis: DateTimeAxis( + edgeLabelPlacement: EdgeLabelPlacement.shift, dateFormat: DateFormat.yMMM(), intervalType: DateTimeIntervalType.months, interval: 3, @@ -215,13 +45,14 @@ SfCartesianChart getCustomizedLineChart(bool isTileView) { maximum: 3.5, interval: 0.5, majorGridLines: MajorGridLines(color: Colors.transparent)), - series: getLineSeries(isTileView), + series: getCustomizedLineSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), ); } -List> getLineSeries(bool isTileView) { +List> getCustomizedLineSeries( + bool isTileView) { final dynamic chartData = <_ChartData>[ _ChartData(DateTime(2018, 7), 2.9), _ChartData(DateTime(2018, 8), 2.7), @@ -288,12 +119,12 @@ class CustomLineSeries extends LineSeries { @override ChartSegment createSegment() { - return CustomPainter(randomNumber.nextInt(4)); + return LineCustomPainter(randomNumber.nextInt(4)); } } -class CustomPainter extends LineSegment { - CustomPainter(int value) { +class LineCustomPainter extends LineSegment { + LineCustomPainter(int value) { //ignore: prefer_initializing_formals index = value; xValues = []; diff --git a/lib/samples/chart/cartesian_charts/line_series/default_line_chart.dart b/lib/samples/chart/cartesian_charts/line_series/default_line_chart.dart index 8c29d0d6..c6f02c72 100755 --- a/lib/samples/chart/cartesian_charts/line_series/default_line_chart.dart +++ b/lib/samples/chart/cartesian_charts/line_series/default_line_chart.dart @@ -1,13 +1,13 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class LineDefault extends StatefulWidget { - const LineDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + LineDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LineDefaultState createState() => _LineDefaultState(sample); @@ -15,198 +15,11 @@ class LineDefault extends StatefulWidget { class _LineDefaultState extends State { _LineDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(LineDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/default_line_chart.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = true; - bool enableMarker = true; - bool enableDatalabel = false; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor:model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultLineChart(false)), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultLineChart(false), sample); } } @@ -225,12 +38,12 @@ SfCartesianChart getDefaultLineChart(bool isTileView) { labelFormat: '{value}%', axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(color: Colors.transparent)), - series: getLineSeries(isTileView), + series: getDefaultLineSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getLineSeries(bool isTileView) { +List> getDefaultLineSeries(bool isTileView) { final List<_ChartData> chartData = <_ChartData>[ _ChartData(2005, 21, 28), _ChartData(2006, 24, 44), diff --git a/lib/samples/chart/cartesian_charts/line_series/line_with_dashes.dart b/lib/samples/chart/cartesian_charts/line_series/line_with_dashes.dart index d4f84a19..f19b62be 100755 --- a/lib/samples/chart/cartesian_charts/line_series/line_with_dashes.dart +++ b/lib/samples/chart/cartesian_charts/line_series/line_with_dashes.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +//ignore: must_be_immutable class LineDashed extends StatefulWidget { - const LineDashed(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + LineDashed({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LineDashedState createState() => _LineDashedState(sample); @@ -15,194 +14,12 @@ class LineDashed extends StatefulWidget { class _LineDashedState extends State { _LineDashedState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(LineDashed oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.35, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/line_with_dashes.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - color: model.cardThemeColor, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDashedLineChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } + return getScopedModel(getDashedLineChart(false),sample); + } } SfCartesianChart getDashedLineChart(bool isTileView) { @@ -224,12 +41,12 @@ SfCartesianChart getDashedLineChart(bool isTileView) { labelFormat: '{value}%', axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(color: Colors.transparent)), - series: getLineSeries(isTileView), + series: getDashedLineSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getLineSeries(bool isTileView) { +List> getDashedLineSeries(bool isTileView) { final List<_ChartData> chartData = <_ChartData>[ _ChartData(2010, 6.6, 9.0, 15.1, 18.8), _ChartData(2011, 6.3, 9.3, 15.5, 18.5), diff --git a/lib/samples/chart/cartesian_charts/line_series/multi_colored_line.dart b/lib/samples/chart/cartesian_charts/line_series/multi_colored_line.dart index 7cef9214..ddb80b1b 100755 --- a/lib/samples/chart/cartesian_charts/line_series/multi_colored_line.dart +++ b/lib/samples/chart/cartesian_charts/line_series/multi_colored_line.dart @@ -1,14 +1,14 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class LineMultiColor extends StatefulWidget { - const LineMultiColor(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + LineMultiColor({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LineMultiColorState createState() => _LineMultiColorState(sample); @@ -16,196 +16,12 @@ class LineMultiColor extends StatefulWidget { class _LineMultiColorState extends State { _LineMultiColorState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(LineMultiColor oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.35, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/line_series/multi_colored_line.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - //frontHeader: model.panelTitle(context), - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getMultiColorLineChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - + final SubItem sample; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getMultiColorLineChart(false),sample); + } } @@ -225,7 +41,7 @@ SfCartesianChart getMultiColorLineChart(bool isTileView) { axisLine: AxisLine(width: 0), labelFormat: '{value}mm', majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), + series: getMultiColoredLineSeries(isTileView), trackballBehavior: TrackballBehavior( enable: true, activationMode: ActivationMode.singleTap, @@ -234,7 +50,7 @@ SfCartesianChart getMultiColorLineChart(bool isTileView) { ); } -List> getLineSeries(bool isTileView) { +List> getMultiColoredLineSeries(bool isTileView) { final List<_ChartData> chartData = <_ChartData>[ _ChartData(DateTime(1925), 415, const Color.fromRGBO(248, 184, 131, 1)), _ChartData(DateTime(1926), 408, const Color.fromRGBO(248, 184, 131, 1)), diff --git a/lib/samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart b/lib/samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart index a264132d..0717ba11 100644 --- a/lib/samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart +++ b/lib/samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class RangeColumnDefault extends StatefulWidget { - const RangeColumnDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RangeColumnDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RangeColumnDefaultState createState() => _RangeColumnDefaultState(sample); @@ -15,209 +14,15 @@ class RangeColumnDefault extends StatefulWidget { class _RangeColumnDefaultState extends State { _RangeColumnDefaultState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RangeColumnDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/rangecolumn_series/default_rangecolumn_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultRangeColumnChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.holiday-weather.com/london/averages/'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('holiday-weather.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ]) - ); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.holiday-weather.com/london/averages/'; + const String source = 'holiday-weather.com'; + return getScopedModel( + getDefaultRangeColumnChart(false), sample, null, sourceLink, source); } } @@ -236,29 +41,29 @@ SfCartesianChart getDefaultRangeColumnChart(bool isTileView) { interval: isTileView ? 5 : 2, labelFormat: '{value}°C', majorTickLines: MajorTickLines(size: 0)), - series: getRangeColumnSeries(isTileView), + series: getDefaultRangeColumnSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), ); } -List> getRangeColumnSeries( +List> getDefaultRangeColumnSeries( bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Jan', 3, 6), - _ChartData('Feb', 3, 7), - _ChartData('Mar', 4, 10), - _ChartData('Apr', 6, 13), - _ChartData('May', 9, 17), - _ChartData('June', 12, 20), + final List chartData = [ + ChartSampleData(x: 'Jan', y: 3, yValue: 6), + ChartSampleData(x: 'Feb', y: 3, yValue: 7), + ChartSampleData(x: 'Mar', y: 4, yValue: 10), + ChartSampleData(x: 'Apr', y: 6, yValue: 13), + ChartSampleData(x: 'May', y: 9, yValue: 17), + ChartSampleData(x: 'June', y: 12, yValue: 20), ]; - return >[ - RangeColumnSeries<_ChartData, String>( + return >[ + RangeColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - lowValueMapper: (_ChartData sales, _) => sales.low, - highValueMapper: (_ChartData sales, _) => sales.high, + xValueMapper: (ChartSampleData sales, _) => sales.x, + lowValueMapper: (ChartSampleData sales, _) => sales.y, + highValueMapper: (ChartSampleData sales, _) => sales.yValue, dataLabelSettings: DataLabelSettings( isVisible: isTileView ? false : true, labelAlignment: ChartDataLabelAlignment.top, @@ -266,10 +71,3 @@ List> getRangeColumnSeries( ) ]; } - -class _ChartData { - _ChartData(this.x, this.low, this.high); - final String x; - final int low; - final int high; -} diff --git a/lib/samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart b/lib/samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart index 59c34303..e697107f 100644 --- a/lib/samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart +++ b/lib/samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class RangeColumnWithTrack extends StatefulWidget { - const RangeColumnWithTrack(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RangeColumnWithTrack({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RangeColumnWithTrackState createState() => @@ -16,183 +15,15 @@ class RangeColumnWithTrack extends StatefulWidget { class _RangeColumnWithTrackState extends State { _RangeColumnWithTrackState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RangeColumnWithTrack oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/rangecolumn_series/rangecolumn_with_track.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRangeColumnwithTrack(false)), - )); - }); + return getScopedModel(getRangeColumnwithTrack(false),sample); } } -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} SfCartesianChart getRangeColumnwithTrack(bool isTileView) { return SfCartesianChart( @@ -207,40 +38,33 @@ SfCartesianChart getRangeColumnwithTrack(bool isTileView) { maximum: 10, labelFormat: '{value} PM', majorTickLines: MajorTickLines(size: 0)), - series: getRangeColumnSeries(isTileView), + series: getRangeColumnSerieswithTrack(isTileView), tooltipBehavior: TooltipBehavior(enable: true, canShowMarker: false, header: ''), ); } -List> getRangeColumnSeries( +List> getRangeColumnSerieswithTrack( bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Day 1', 3, 5), - _ChartData('Day 2', 4, 7), - _ChartData('Day 3', 4, 8), - _ChartData('Day 4', 2, 5), - _ChartData('Day 5', 5, 7), + final List chartData = [ + ChartSampleData(x:'Day 1', y:3, yValue:5), + ChartSampleData(x:'Day 2', y:4, yValue:7), + ChartSampleData(x:'Day 3', y:4, yValue:8), + ChartSampleData(x:'Day 4', y:2, yValue:5), + ChartSampleData(x:'Day 5', y:5, yValue:7), ]; - return >[ - RangeColumnSeries<_ChartData, String>( + return >[ + RangeColumnSeries( enableTooltip: true, dataSource: chartData, isTrackVisible: true, trackColor: const Color.fromRGBO(198, 201, 207, 1), borderRadius: BorderRadius.circular(15), trackBorderColor: Colors.grey[100], - xValueMapper: (_ChartData sales, _) => sales.x, - lowValueMapper: (_ChartData sales, _) => sales.low, - highValueMapper: (_ChartData sales, _) => sales.high, + xValueMapper: (ChartSampleData sales, _) => sales.x, + lowValueMapper: (ChartSampleData sales, _) => sales.y, + highValueMapper: (ChartSampleData sales, _) => sales.yValue, dataLabelSettings: DataLabelSettings( isVisible: !isTileView, labelAlignment: ChartDataLabelAlignment.top)) ]; } - -class _ChartData { - _ChartData(this.x, this.low, this.high); - final String x; - final double low; - final double high; -} diff --git a/lib/samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart b/lib/samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart index be4e3a77..a48ae68f 100644 --- a/lib/samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart +++ b/lib/samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class RangeBarChart extends StatefulWidget { - const RangeBarChart(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RangeBarChart({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RangeBarChartState createState() => _RangeBarChartState(sample); @@ -15,207 +14,15 @@ class RangeBarChart extends StatefulWidget { class _RangeBarChartState extends State { _RangeBarChartState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RangeBarChart oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/rangecolumn_series/vertical_rangecolumn_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { -_FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRangeBarChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.holiday-weather.com/sydney/averages/'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('holiday-weather.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.holiday-weather.com/sydney/averages/'; + const String source = 'holiday-weather.com'; + return getScopedModel( + getRangeBarChart(false), sample, null, sourceLink, source); } } @@ -233,49 +40,42 @@ SfCartesianChart getRangeBarChart(bool isTileView) { labelFormat: '{value}°F', minimum: 40, maximum: 80), - series: getRangeColumnSeries(isTileView), + series: getVerticalRangeColumnSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), isTransposed: true, ); } -List> getRangeColumnSeries( +List> getVerticalRangeColumnSeries( bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Jul', 46, 63, 43, 57), - _ChartData('Aug', 48, 64, 45, 59), - _ChartData('Sep', 54, 68, 48, 63), - _ChartData('Oct', 57, 72, 50, 68), - _ChartData('Nov', 61, 75, 54, 72), - _ChartData('Dec', 64, 79, 57, 75), + final List chartData = [ + ChartSampleData(x: 'Jul', y: 46, yValue: 63, yValue2: 43, yValue3: 57), + ChartSampleData(x: 'Aug', y: 48, yValue: 64, yValue2: 45, yValue3: 59), + ChartSampleData(x: 'Sep', y: 54, yValue: 68, yValue2: 48, yValue3: 63), + ChartSampleData(x: 'Oct', y: 57, yValue: 72, yValue2: 50, yValue3: 68), + ChartSampleData(x: 'Nov', y: 61, yValue: 75, yValue2: 54, yValue3: 72), + ChartSampleData(x: 'Dec', y: 64, yValue: 79, yValue2: 57, yValue3: 75), ]; - return >[ - RangeColumnSeries<_ChartData, String>( + return >[ + RangeColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - lowValueMapper: (_ChartData sales, _) => sales.lowSyd, - highValueMapper: (_ChartData sales, _) => sales.highSyd, + xValueMapper: (ChartSampleData sales, _) => sales.x, + lowValueMapper: (ChartSampleData sales, _) => sales.y, + highValueMapper: (ChartSampleData sales, _) => sales.yValue, name: 'Sydney', dataLabelSettings: DataLabelSettings( - isVisible: !isTileView, labelAlignment: ChartDataLabelAlignment.top)), - RangeColumnSeries<_ChartData, String>( + isVisible: !isTileView, + labelAlignment: ChartDataLabelAlignment.top)), + RangeColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - lowValueMapper: (_ChartData sales, _) => sales.lowMel, - highValueMapper: (_ChartData sales, _) => sales.highMel, + xValueMapper: (ChartSampleData sales, _) => sales.x, + lowValueMapper: (ChartSampleData sales, _) => sales.yValue2, + highValueMapper: (ChartSampleData sales, _) => sales.yValue3, name: 'Melbourne', dataLabelSettings: DataLabelSettings( - isVisible: !isTileView, labelAlignment: ChartDataLabelAlignment.top)) + isVisible: !isTileView, + labelAlignment: ChartDataLabelAlignment.top)) ]; } - -class _ChartData { - _ChartData(this.x, this.lowSyd, this.highSyd, this.lowMel, this.highMel); - final String x; - final int lowSyd; - final int highSyd; - final int lowMel; - final int highMel; -} diff --git a/lib/samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart b/lib/samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart index 3ab945de..c77f8a38 100755 --- a/lib/samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart +++ b/lib/samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class ScatterDefault extends StatefulWidget { - const ScatterDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + ScatterDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ScatterDefaultState createState() => _ScatterDefaultState(sample); @@ -15,204 +14,15 @@ class ScatterDefault extends StatefulWidget { class _ScatterDefaultState extends State { _ScatterDefaultState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ScatterDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/scatter_series/default_scatter_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultScatterChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://tcdata360.worldbank.org/indicators/ex.grw?country=BRA&indicator=401&countries=IND,CAN&viz=line_chart&years=2013Q2,2016Q2'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('tcdata360.worldbank.org', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://tcdata360.worldbank.org/indicators/ex.grw?country=BRA&indicator=401&countries=IND,CAN&viz=line_chart&years=2013Q2,2016Q2'; + const String source = 'tcdata360.worldbank.org'; + return getScopedModel( + getDefaultScatterChart(false), sample, null, sourceLink, source); } } @@ -230,57 +40,58 @@ SfCartesianChart getDefaultScatterChart(bool isTileView) { axisLine: AxisLine(width: 0), minorTickLines: MinorTickLines(size: 0)), tooltipBehavior: TooltipBehavior(enable: true), - series: getScatterSeries(isTileView), + series: getDefaultScatterSeries(isTileView), ); } -List> getScatterSeries(bool isTileView) { - final List<_ScatterData> chartData = <_ScatterData>[ - _ScatterData( DateTime(2006, 1, 1), 0.01, -0.03, 0.10), - _ScatterData( DateTime(2007, 1, 1), 0.03, -0.02, 0.08), - _ScatterData( DateTime(2008, 1, 1), -0.06, -0.13, -0.03), - _ScatterData( DateTime(2009, 1, 1), -0.03, -0.04, 0.04), - _ScatterData( DateTime(2010, 1, 1), 0.09, 0.07, 0.19), - _ScatterData( DateTime(2011, 1, 1), 0, 0.04, 0), - _ScatterData( DateTime(2012, 1, 1), 0.01, -0.01, -0.09), - _ScatterData( DateTime(2013, 1, 1), 0.05, 0.05, 0.10), - _ScatterData( DateTime(2014, 1, 1), 0, 0.08, 0.05), - _ScatterData( DateTime(2015, 1, 1), 0.1, 0.01, -0.04), - _ScatterData( DateTime(2016, 1, 1), 0.08, 0, 0.02), +List> getDefaultScatterSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData( + x: DateTime(2006, 1, 1), y: 0.01, yValue: -0.03, yValue2: 0.10), + ChartSampleData( + x: DateTime(2007, 1, 1), y: 0.03, yValue: -0.02, yValue2: 0.08), + ChartSampleData( + x: DateTime(2008, 1, 1), y: -0.06, yValue: -0.13, yValue2: -0.03), + ChartSampleData( + x: DateTime(2009, 1, 1), y: -0.03, yValue: -0.04, yValue2: 0.04), + ChartSampleData( + x: DateTime(2010, 1, 1), y: 0.09, yValue: 0.07, yValue2: 0.19), + ChartSampleData(x: DateTime(2011, 1, 1), y: 0, yValue: 0.04, yValue2: 0), + ChartSampleData( + x: DateTime(2012, 1, 1), y: 0.01, yValue: -0.01, yValue2: -0.09), + ChartSampleData( + x: DateTime(2013, 1, 1), y: 0.05, yValue: 0.05, yValue2: 0.10), + ChartSampleData(x: DateTime(2014, 1, 1), y: 0, yValue: 0.08, yValue2: 0.05), + ChartSampleData( + x: DateTime(2015, 1, 1), y: 0.1, yValue: 0.01, yValue2: -0.04), + ChartSampleData(x: DateTime(2016, 1, 1), y: 0.08, yValue: 0, yValue2: 0.02), ]; - return >[ - ScatterSeries<_ScatterData, DateTime>( + return >[ + ScatterSeries( enableTooltip: true, dataSource: chartData, opacity: 0.7, - xValueMapper: (_ScatterData sales, _) => sales.year, - yValueMapper: (_ScatterData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, markerSettings: MarkerSettings(height: 15, width: 15), name: 'Brazil'), - ScatterSeries<_ScatterData, DateTime>( + ScatterSeries( enableTooltip: true, opacity: 0.7, dataSource: chartData, - xValueMapper: (_ScatterData sales, _) => sales.year, - yValueMapper: (_ScatterData sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, markerSettings: MarkerSettings(height: 15, width: 15), name: 'Canada'), - ScatterSeries<_ScatterData, DateTime>( + ScatterSeries( enableTooltip: true, dataSource: chartData, color: const Color.fromRGBO(0, 168, 181, 1), - xValueMapper: (_ScatterData sales, _) => sales.year, - yValueMapper: (_ScatterData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'India', markerSettings: MarkerSettings(height: 15, width: 15), ) ]; } - -class _ScatterData { - _ScatterData(this.year, this.y, this.y1, this.y2); - final DateTime year; - final double y; - final double y1; - final double y2; -} diff --git a/lib/samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart b/lib/samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart index 68829b90..6d0cc6cf 100755 --- a/lib/samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart +++ b/lib/samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class ScatterShapes extends StatefulWidget { - const ScatterShapes(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + ScatterShapes({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ScatterShapesState createState() => _ScatterShapesState(sample); @@ -15,194 +14,11 @@ class ScatterShapes extends StatefulWidget { class _ScatterShapesState extends State { _ScatterShapesState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ScatterShapes oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/scatter_series/scatter_with_various_shapes.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getShapesScatterChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getShapesScatterChart(false), sample); } } @@ -226,53 +42,46 @@ SfCartesianChart getShapesScatterChart(bool isTileView) { majorTickLines: MajorTickLines(size: 0)), tooltipBehavior: TooltipBehavior(enable: true, header: '', canShowMarker: false), - series: getScatterSeries(isTileView), + series: getScatterShapesSeries(isTileView), ); } -List> getScatterSeries(bool isTileView) { - final List<_ScatterData> chartData = <_ScatterData>[ - _ScatterData(1950, 0.8, 1.4, 2), - _ScatterData(1955, 1.2, 1.7, 2.4), - _ScatterData(1960, 0.9, 1.5, 2.2), - _ScatterData(1965, 1, 1.6, 2.5), - _ScatterData(1970, 0.8, 1.4, 2.2), - _ScatterData(1975, 1, 1.8, 2.4), - _ScatterData(1980, 1, 1.7, 2), - _ScatterData(1985, 1.2, 1.9, 2.3), - _ScatterData(1990, 1.1, 1.4, 2), - _ScatterData(1995, 1.2, 1.8, 2.2), - _ScatterData(2000, 1.4, 2, 2.4), +List> getScatterShapesSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 1950, y: 0.8, yValue2: 1.4, yValue3: 2), + ChartSampleData(x: 1955, y: 1.2, yValue2: 1.7, yValue3: 2.4), + ChartSampleData(x: 1960, y: 0.9, yValue2: 1.5, yValue3: 2.2), + ChartSampleData(x: 1965, y: 1, yValue2: 1.6, yValue3: 2.5), + ChartSampleData(x: 1970, y: 0.8, yValue2: 1.4, yValue3: 2.2), + ChartSampleData(x: 1975, y: 1, yValue2: 1.8, yValue3: 2.4), + ChartSampleData(x: 1980, y: 1, yValue2: 1.7, yValue3: 2), + ChartSampleData(x: 1985, y: 1.2, yValue2: 1.9, yValue3: 2.3), + ChartSampleData(x: 1990, y: 1.1, yValue2: 1.4, yValue3: 2), + ChartSampleData(x: 1995, y: 1.2, yValue2: 1.8, yValue3: 2.2), + ChartSampleData(x: 2000, y: 1.4, yValue2: 2, yValue3: 2.4), ]; - return >[ - ScatterSeries<_ScatterData, num>( + return >[ + ScatterSeries( dataSource: chartData, - xValueMapper: (_ScatterData sales, _) => sales.x, - yValueMapper: (_ScatterData sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, markerSettings: MarkerSettings( width: 15, height: 15, shape: DataMarkerType.diamond), name: 'India'), - ScatterSeries<_ScatterData, num>( + ScatterSeries( dataSource: chartData, - xValueMapper: (_ScatterData sales, _) => sales.x, - yValueMapper: (_ScatterData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, markerSettings: MarkerSettings( width: 15, height: 15, shape: DataMarkerType.triangle), name: 'China'), - ScatterSeries<_ScatterData, num>( + ScatterSeries( dataSource: chartData, - xValueMapper: (_ScatterData sales, _) => sales.x, - yValueMapper: (_ScatterData sales, _) => sales.y3, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, markerSettings: MarkerSettings( width: 15, height: 15, shape: DataMarkerType.pentagon), name: 'Japan') ]; } - -class _ScatterData { - _ScatterData(this.x, this.y1, this.y2, this.y3); - final double x; - final double y1; - final double y2; - final double y3; -} diff --git a/lib/samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart b/lib/samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart index 523c11d7..21fdb63b 100755 --- a/lib/samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart +++ b/lib/samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart @@ -2,14 +2,13 @@ import 'dart:math'; import 'dart:ui'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class SplineCustomization extends StatefulWidget { - const SplineCustomization(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + SplineCustomization({this.sample, Key key}) : super(key: key); + SubItem sample; @override _SplineVerticalState createState() => _SplineVerticalState(sample); @@ -17,182 +16,11 @@ class SplineCustomization extends StatefulWidget { class _SplineVerticalState extends State { _SplineVerticalState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(SplineCustomization oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - toggleFrontLayer: false, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/customized_spline_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - //frontHeader: model.panelTitle(context), - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableLegend = true; - double animaionDuration = 1500; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getCustomizedSplineChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getCustomizedSplineChart(false), sample); } } @@ -212,24 +40,24 @@ SfCartesianChart getCustomizedSplineChart(bool isTileView) { ); } -List> getSplineCustomizedSeries( +List> getSplineCustomizedSeries( bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(2016, 2), - _ChartData(2017, 1.5), - _ChartData(2018, 2), - _ChartData(2019, 1.75), - _ChartData(2020, 1.5), - _ChartData(2021, 2), - _ChartData(2022, 1.5), - _ChartData(2023, 2.2), - _ChartData(2024, 1.9), + final List chartData = [ + ChartSampleData(x: 2016, y: 2), + ChartSampleData(x: 2017, y: 1.5), + ChartSampleData(x: 2018, y: 2), + ChartSampleData(x: 2019, y: 1.75), + ChartSampleData(x: 2020, y: 1.5), + ChartSampleData(x: 2021, y: 2), + ChartSampleData(x: 2022, y: 1.5), + ChartSampleData(x: 2023, y: 2.2), + ChartSampleData(x: 2024, y: 1.9), ]; - return >[ - CustomSplineSeries<_ChartData, num>( + return >[ + CustomSplineSeries( dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, width: 2, dashArray: [10, 5]), ]; @@ -275,15 +103,15 @@ class CustomSplineSeries extends SplineSeries { } } -List yValues; -List xValues; +List yVal; +List xVal; class SplineCustomPainter extends SplineSegment { SplineCustomPainter(int value) { //ignore: prefer_initializing_formals index = value; - yValues = []; - xValues = []; + yVal = []; + xVal = []; } double maximum, minimum; @@ -305,8 +133,8 @@ class SplineCustomPainter extends SplineSegment { Paint getStrokePaint() { final Paint customerStrokePaint = Paint(); customerStrokePaint.color = currentSegmentIndex < 4 - ? const Color.fromRGBO(0, 168, 181, 1) - :const Color.fromRGBO(246, 114, 128, 1); + ? const Color.fromRGBO(0, 168, 181, 1) + : const Color.fromRGBO(246, 114, 128, 1); customerStrokePaint.strokeWidth = 2; customerStrokePaint.style = PaintingStyle.stroke; return customerStrokePaint; @@ -323,10 +151,10 @@ class SplineCustomPainter extends SplineSegment { @override void onPaint(Canvas canvas) { final double x1 = this.x1, y1 = this.y1, x2 = this.x2, y2 = this.y2; - yValues.add(y1); - yValues.add(y2); - xValues.add(x1); - xValues.add(x2); + yVal.add(y1); + yVal.add(y2); + xVal.add(x1); + xVal.add(x2); final Path path = Path(); path.moveTo(x1, y1); path.cubicTo( @@ -337,8 +165,8 @@ class SplineCustomPainter extends SplineSegment { if (currentSegmentIndex == series.segments.length - 1) { double maximum; - maximum = yValues.reduce(max); - const TextSpan span = TextSpan( + maximum = yVal.reduce(max); + const TextSpan span = TextSpan( style: TextStyle( color: Color.fromRGBO(0, 168, 181, 1), fontSize: 12.0, @@ -348,10 +176,10 @@ class SplineCustomPainter extends SplineSegment { final TextPainter tp = TextPainter(text: span, textDirection: TextDirection.ltr); tp.layout(); - tp.paint(canvas, Offset(xValues[1], maximum + tp.size.height)); + tp.paint(canvas, Offset(xVal[1], maximum + tp.size.height)); const TextSpan span1 = TextSpan( style: TextStyle( - color: Color.fromRGBO(246, 114, 128, 1), + color: Color.fromRGBO(246, 114, 128, 1), fontSize: 12.0, fontFamily: 'Roboto'), text: 'Imaginary data', @@ -359,17 +187,11 @@ class SplineCustomPainter extends SplineSegment { final TextPainter tp1 = TextPainter(text: span1, textDirection: TextDirection.ltr); tp1.layout(); - tp1.paint(canvas, Offset(xValues[10], maximum + tp.size.height)); + tp1.paint(canvas, Offset(xVal[10], maximum + tp.size.height)); } } } -class _ChartData { - _ChartData(this.x, this.y); - final double x; - final double y; -} - void drawDashedLine(Canvas canvas, CartesianSeries series, Paint paint, Path path, bool isSeries, [List pathList, List colorList]) { diff --git a/lib/samples/chart/cartesian_charts/spline_series/default_spline_chart.dart b/lib/samples/chart/cartesian_charts/spline_series/default_spline_chart.dart index e70df721..b1513109 100755 --- a/lib/samples/chart/cartesian_charts/spline_series/default_spline_chart.dart +++ b/lib/samples/chart/cartesian_charts/spline_series/default_spline_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class SplineDefault extends StatefulWidget { - const SplineDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + SplineDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _SplineDefaultState createState() => _SplineDefaultState(sample); @@ -15,205 +14,15 @@ class SplineDefault extends StatefulWidget { class _SplineDefaultState extends State { _SplineDefaultState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(SplineDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/default_spline_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultSplineChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.holiday-weather.com/london/averages/'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.holiday-weather.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.holiday-weather.com/london/averages/'; + const String source = 'www.holiday-weather.com'; + return getScopedModel( + getDefaultSplineChart(false), sample, null, sourceLink, source); } } @@ -233,50 +42,43 @@ SfCartesianChart getDefaultSplineChart(bool isTileView) { edgeLabelPlacement: EdgeLabelPlacement.shift, labelFormat: '{value}°F', majorTickLines: MajorTickLines(size: 0)), - series: getSplineSeries(isTileView), + series: getDefaultSplineSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getSplineSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Jan', 43, 37, 41), - _ChartData('Feb', 45, 37, 45), - _ChartData('Mar', 50, 39, 48), - _ChartData('Apr', 55, 43, 52), - _ChartData('May', 63, 48, 57), - _ChartData('Jun', 68, 54, 61), - _ChartData('Jul', 72, 57, 66), - _ChartData('Aug', 70, 57, 66), - _ChartData('Sep', 66, 54, 63), - _ChartData('Oct', 57, 48, 55), - _ChartData('Nov', 50, 43, 50), - _ChartData('Dec', 45, 37, 45) +List> getDefaultSplineSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Jan', y: 43, yValue2: 37, yValue3: 41), + ChartSampleData(x: 'Feb', y: 45, yValue2: 37, yValue3: 45), + ChartSampleData(x: 'Mar', y: 50, yValue2: 39, yValue3: 48), + ChartSampleData(x: 'Apr', y: 55, yValue2: 43, yValue3: 52), + ChartSampleData(x: 'May', y: 63, yValue2: 48, yValue3: 57), + ChartSampleData(x: 'Jun', y: 68, yValue2: 54, yValue3: 61), + ChartSampleData(x: 'Jul', y: 72, yValue2: 57, yValue3: 66), + ChartSampleData(x: 'Aug', y: 70, yValue2: 57, yValue3: 66), + ChartSampleData(x: 'Sep', y: 66, yValue2: 54, yValue3: 63), + ChartSampleData(x: 'Oct', y: 57, yValue2: 48, yValue3: 55), + ChartSampleData(x: 'Nov', y: 50, yValue2: 43, yValue3: 50), + ChartSampleData(x: 'Dec', y: 45, yValue2: 37, yValue3: 45) ]; - return >[ - SplineSeries<_ChartData, String>( + return >[ + SplineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.high, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, markerSettings: MarkerSettings(isVisible: true), name: 'High', ), - SplineSeries<_ChartData, String>( + SplineSeries( enableTooltip: true, dataSource: chartData, name: 'Low', markerSettings: MarkerSettings(isVisible: true), - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.low, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, ) ]; } - -class _ChartData { - _ChartData(this.x, this.high, this.low, this.average); - final String x; - final double high; - final double low; - final double average; -} diff --git a/lib/samples/chart/cartesian_charts/spline_series/spline_types.dart b/lib/samples/chart/cartesian_charts/spline_series/spline_types.dart index 9b60fc5a..6ebfd839 100755 --- a/lib/samples/chart/cartesian_charts/spline_series/spline_types.dart +++ b/lib/samples/chart/cartesian_charts/spline_series/spline_types.dart @@ -1,16 +1,18 @@ +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:scoped_model/scoped_model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; import 'package:url_launcher/url_launcher.dart'; -import '../../../../widgets/bottom_sheet.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class SplineTypes extends StatefulWidget { - const SplineTypes(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + SplineTypes({this.sample, Key key}) : super(key: key); + SubItem sample; @override _SplineTypesState createState() => _SplineTypesState(sample); @@ -18,107 +20,92 @@ class SplineTypes extends StatefulWidget { class _SplineTypesState extends State { _SplineTypesState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); + SubItem sample; @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, SplineTypesFrontPanel(sample)); } +} - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - @override - void dispose() { - super.dispose(); - } - @override - void didUpdateWidget(SplineTypes oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getTypesSplineChart(bool isTileView, + [SplineType _splineType]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Export growth of Brazil'), + primaryXAxis: NumericAxis( + majorGridLines: MajorGridLines(width: 0), + interval: 1, + ), + primaryYAxis: NumericAxis( + labelFormat: '{value}%', + minimum: -0.1, + maximum: 0.2, + interval: 0.1, + majorTickLines: MajorTickLines(size: 0)), + series: getSplineTypesSeries(isTileView, _splineType), + tooltipBehavior: + TooltipBehavior(enable: true, header: '', canShowMarker: false), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/spline_types.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> getSplineTypesSeries(bool isTileView, + [SplineType _splineType]) { + final List<_ChartData> chartData = <_ChartData>[ + _ChartData(2011, 0.05), + _ChartData(2011.25, 0), + _ChartData(2011.50, 0.03), + _ChartData(2011.75, 0), + _ChartData(2012, 0.04), + _ChartData(2012.25, 0.02), + _ChartData(2012.50, -0.01), + _ChartData(2012.75, 0.01), + _ChartData(2013, -0.08), + _ChartData(2013.25, -0.02), + _ChartData(2013.50, 0.03), + _ChartData(2013.75, 0.05), + _ChartData(2014, 0.04), + _ChartData(2014.25, 0.02), + _ChartData(2014.50, 0.04), + _ChartData(2014.75, 0), + _ChartData(2015, 0.02), + _ChartData(2015.25, 0.10), + _ChartData(2015.50, 0.09), + _ChartData(2015.75, 0.11), + _ChartData(2016, 0.12), + ]; + return >[ + SplineSeries<_ChartData, num>( + enableTooltip: true, + splineType: _splineType, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.y, + width: 2) + ]; +} + +class _ChartData { + _ChartData(this.x, this.y); + final double x; + final double y; } -class FrontPanel extends StatefulWidget { +//ignore: must_be_immutable +class SplineTypesFrontPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + SplineTypesFrontPanel(this.subItemList); + SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _SplineTypesFrontPanelState createState() => _SplineTypesFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; +class _SplineTypesFrontPanelState extends State { + _SplineTypesFrontPanelState(this.sample); + final SubItem sample; final List _splineList = ['natural', 'monotonic', 'cardinal', 'clamped'].toList(); @@ -127,9 +114,9 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -178,7 +165,7 @@ class _FrontPanelState extends State { }); } - void onPositionTypeChange(String item, SampleListModel model) { + void onPositionTypeChange(String item, SampleModel model) { setState(() { _selectedSplineType = item; if (_selectedSplineType == 'natural') { @@ -196,7 +183,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -206,9 +193,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 140, @@ -308,144 +295,4 @@ class _FrontPanelState extends State { ]), ))))))); } -} - -class BackPanel extends StatefulWidget { -//ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getTypesSplineChart(bool isTileView, - [SplineType _splineType]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - title: ChartTitle(text: isTileView ? '' : 'Export growth of Brazil'), - primaryXAxis: NumericAxis( - majorGridLines: MajorGridLines(width: 0), - interval: 1, - ), - primaryYAxis: NumericAxis( - labelFormat: '{value}%', - minimum: -0.1, - maximum: 0.2, - interval: 0.1, - majorTickLines: MajorTickLines(size: 0)), - series: getSplineSeries(isTileView, _splineType), - tooltipBehavior: - TooltipBehavior(enable: true, header: '', canShowMarker: false), - ); -} - -List> getSplineSeries(bool isTileView, - [SplineType _splineType]) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(2011, 0.05), - _ChartData(2011.25, 0), - _ChartData(2011.50, 0.03), - _ChartData(2011.75, 0), - _ChartData(2012, 0.04), - _ChartData(2012.25, 0.02), - _ChartData(2012.50, -0.01), - _ChartData(2012.75, 0.01), - _ChartData(2013, -0.08), - _ChartData(2013.25, -0.02), - _ChartData(2013.50, 0.03), - _ChartData(2013.75, 0.05), - _ChartData(2014, 0.04), - _ChartData(2014.25, 0.02), - _ChartData(2014.50, 0.04), - _ChartData(2014.75, 0), - _ChartData(2015, 0.02), - _ChartData(2015.25, 0.10), - _ChartData(2015.50, 0.09), - _ChartData(2015.75, 0.11), - _ChartData(2016, 0.12), - ]; - return >[ - SplineSeries<_ChartData, num>( - enableTooltip: true, - splineType: _splineType, - dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, - width: 2) - ]; -} - -class _ChartData { - _ChartData(this.x, this.y); - final double x; - final double y; -} +} \ No newline at end of file diff --git a/lib/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart b/lib/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart index c8ec1e7c..37bdd2ab 100755 --- a/lib/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart +++ b/lib/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart @@ -1,222 +1,28 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class SplineDashed extends StatefulWidget { - const SplineDashed(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + SplineDashed({this.sample, Key key}) : super(key: key); + SubItem sample; @override _SplineDashedState createState() => _SplineDashedState(sample); } class _SplineDashedState extends State { - _SplineDashedState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(SplineDashed oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/spline_with_dashes.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - //frontHeader: model.panelTitle(context), - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + _SplineDashedState(this.sample); + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDashedSplineChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://tcdata360.worldbank.org/indicators/inv.all.pct?country=BRA&indicator=345&countries=GRC,SWE&viz=line_chart&years=1997,2004'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('tcdata360.worldbank.org', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://tcdata360.worldbank.org/indicators/inv.all.pct?country=BRA&indicator=345&countries=GRC,SWE&viz=line_chart&years=1997,2004'; + const String source = 'tcdata360.worldbank.org'; + return getScopedModel( + getDashedSplineChart(false), sample, null, sourceLink, source); } } @@ -233,57 +39,50 @@ SfCartesianChart getDashedSplineChart(bool isTileView) { labelFormat: '{value}%', axisLine: AxisLine(width: 0), ), - series: getSplineSeries(isTileView), + series: getDashedSplineSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getSplineSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(1997, 17.79, 20.32, 22.44), - _ChartData(1998, 18.20, 21.46, 25.18), - _ChartData(1999, 17.44, 21.72, 24.15), - _ChartData(2000, 19, 22.86, 25.83), - _ChartData(2001, 18.93, 22.87, 25.69), - _ChartData(2002, 17.58, 21.87, 24.75), - _ChartData(2003, 16.83, 21.67, 27.38), - _ChartData(2004, 17.93, 21.65, 25.31) +List> getDashedSplineSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 1997, y: 17.79, yValue2: 20.32, yValue3: 22.44), + ChartSampleData(x: 1998, y: 18.20, yValue2: 21.46, yValue3: 25.18), + ChartSampleData(x: 1999, y: 17.44, yValue2: 21.72, yValue3: 24.15), + ChartSampleData(x: 2000, y: 19, yValue2: 22.86, yValue3: 25.83), + ChartSampleData(x: 2001, y: 18.93, yValue2: 22.87, yValue3: 25.69), + ChartSampleData(x: 2002, y: 17.58, yValue2: 21.87, yValue3: 24.75), + ChartSampleData(x: 2003, y: 16.83, yValue2: 21.67, yValue3: 27.38), + ChartSampleData(x: 2004, y: 17.93, yValue2: 21.65, yValue3: 25.31) ]; - return >[ - SplineSeries<_ChartData, num>( + return >[ + SplineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, width: 2, name: 'Brazil', dashArray: [12, 3, 3, 3], markerSettings: MarkerSettings(isVisible: true)), - SplineSeries<_ChartData, num>( + SplineSeries( enableTooltip: true, dataSource: chartData, width: 2, name: 'Sweden', dashArray: [12, 3, 3, 3], - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, markerSettings: MarkerSettings(isVisible: true)), - SplineSeries<_ChartData, num>( + SplineSeries( enableTooltip: true, dataSource: chartData, width: 2, dashArray: [12, 3, 3, 3], name: 'Greece', - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y3, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, markerSettings: MarkerSettings(isVisible: true)) ]; } - -class _ChartData { - _ChartData(this.x, this.y, this.y2, this.y3); - final double x; - final double y; - final double y2; - final double y3; -} diff --git a/lib/samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart b/lib/samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart index ba130af4..df7cc015 100755 --- a/lib/samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart +++ b/lib/samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class SplineVertical extends StatefulWidget { - const SplineVertical(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + SplineVertical({this.sample, Key key}) : super(key: key); + SubItem sample; @override _SplineVerticalState createState() => _SplineVerticalState(sample); @@ -15,184 +14,11 @@ class SplineVertical extends StatefulWidget { class _SplineVerticalState extends State { _SplineVerticalState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(SplineVertical oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/spline_series/vertical_spline_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableLegend = true; - double animaionDuration = 1500; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getVerticalSplineChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getVerticalSplineChart(false), sample); } } @@ -210,12 +36,13 @@ SfCartesianChart getVerticalSplineChart(bool isTileView) { interval: 10, labelFormat: '{value}°C', majorGridLines: MajorGridLines(width: 0)), - series: getSplineSeries(isTileView), + series: getVerticalSplineSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getSplineSeries(bool isTileView) { +List> getVerticalSplineSeries( + bool isTileView) { final List<_ChartData> chartData = <_ChartData>[ _ChartData('Jan', -1, 7), _ChartData('Mar', 12, 2), diff --git a/lib/samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart b/lib/samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart index be3e3116..a46b85b8 100644 --- a/lib/samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart +++ b/lib/samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart @@ -1,14 +1,14 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; import 'package:intl/intl.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class StackedAreaChart extends StatefulWidget { - const StackedAreaChart(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + StackedAreaChart({this.sample, Key key}) : super(key: key); + SubItem sample; @override _StackedAreaChartState createState() => _StackedAreaChartState(sample); @@ -16,189 +16,19 @@ class StackedAreaChart extends StatefulWidget { class _StackedAreaChartState extends State { _StackedAreaChartState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(StackedAreaChart oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stacked_series/stacked_area_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getStackedAreaChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getStackedAreaChart(false), sample); } } SfCartesianChart getStackedAreaChart(bool isTileView) { return SfCartesianChart( plotAreaBorderWidth: 0, - title: - ChartTitle(text: isTileView ? '' : 'Sales comparision of fruits in a shop'), + title: ChartTitle( + text: isTileView ? '' : 'Sales comparision of fruits in a shop'), legend: Legend( isVisible: !isTileView, overflowMode: LegendItemOverflowMode.wrap), primaryXAxis: DateTimeAxis( @@ -215,62 +45,128 @@ SfCartesianChart getStackedAreaChart(bool isTileView) { ); } -List> getStackedAreaSeries( +List> getStackedAreaSeries( bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(DateTime(2000, 1, 1), 0.61, 0.03, 0.48, 0.23), - _ChartData(DateTime(2001, 1, 1), 0.81, 0.05, 0.53, 0.17), - _ChartData(DateTime(2002, 1, 1), 0.91, 0.06, 0.57, 0.17), - _ChartData(DateTime(2003, 1, 1), 1.00, 0.09, 0.61, 0.20), - _ChartData(DateTime(2004, 1, 1), 1.19, 0.14, 0.63, 0.23), - _ChartData(DateTime(2005, 1, 1), 1.47, 0.20, 0.64, 0.36), - _ChartData(DateTime(2006, 1, 1), 1.74, 0.29, 0.66, 0.43), - _ChartData(DateTime(2007, 1, 1), 1.98, 0.46, 0.76, 0.52), - _ChartData(DateTime(2008, 1, 1), 1.99, 0.64, 0.77, 0.72), - _ChartData(DateTime(2009, 1, 1), 1.70, 0.75, 0.55, 1.29), - _ChartData(DateTime(2010, 1, 1), 1.48, 1.06, 0.54, 1.38), - _ChartData(DateTime(2011, 1, 1), 1.38, 1.25, 0.57, 1.82), - _ChartData(DateTime(2012, 1, 1), 1.66, 1.55, 0.61, 2.16), - _ChartData(DateTime(2013, 1, 1), 1.66, 1.55, 0.67, 2.51), - _ChartData(DateTime(2014, 1, 1), 1.67, 1.65, 0.67, 2.61), + final List chartData = [ + ChartSampleData( + x: DateTime(2000, 1, 1), + y: 0.61, + yValue: 0.03, + yValue2: 0.48, + yValue3: 0.23), + ChartSampleData( + x: DateTime(2001, 1, 1), + y: 0.81, + yValue: 0.05, + yValue2: 0.53, + yValue3: 0.17), + ChartSampleData( + x: DateTime(2002, 1, 1), + y: 0.91, + yValue: 0.06, + yValue2: 0.57, + yValue3: 0.17), + ChartSampleData( + x: DateTime(2003, 1, 1), + y: 1.00, + yValue: 0.09, + yValue2: 0.61, + yValue3: 0.20), + ChartSampleData( + x: DateTime(2004, 1, 1), + y: 1.19, + yValue: 0.14, + yValue2: 0.63, + yValue3: 0.23), + ChartSampleData( + x: DateTime(2005, 1, 1), + y: 1.47, + yValue: 0.20, + yValue2: 0.64, + yValue3: 0.36), + ChartSampleData( + x: DateTime(2006, 1, 1), + y: 1.74, + yValue: 0.29, + yValue2: 0.66, + yValue3: 0.43), + ChartSampleData( + x: DateTime(2007, 1, 1), + y: 1.98, + yValue: 0.46, + yValue2: 0.76, + yValue3: 0.52), + ChartSampleData( + x: DateTime(2008, 1, 1), + y: 1.99, + yValue: 0.64, + yValue2: 0.77, + yValue3: 0.72), + ChartSampleData( + x: DateTime(2009, 1, 1), + y: 1.70, + yValue: 0.75, + yValue2: 0.55, + yValue3: 1.29), + ChartSampleData( + x: DateTime(2010, 1, 1), + y: 1.48, + yValue: 1.06, + yValue2: 0.54, + yValue3: 1.38), + ChartSampleData( + x: DateTime(2011, 1, 1), + y: 1.38, + yValue: 1.25, + yValue2: 0.57, + yValue3: 1.82), + ChartSampleData( + x: DateTime(2012, 1, 1), + y: 1.66, + yValue: 1.55, + yValue2: 0.61, + yValue3: 2.16), + ChartSampleData( + x: DateTime(2013, 1, 1), + y: 1.66, + yValue: 1.55, + yValue2: 0.67, + yValue3: 2.51), + ChartSampleData( + x: DateTime(2014, 1, 1), + y: 1.67, + yValue: 1.65, + yValue2: 0.67, + yValue3: 2.61), ]; - return >[ - StackedAreaSeries<_ChartData, DateTime>( + return >[ + StackedAreaSeries( animationDuration: 2500, enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.organic, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Apple'), - StackedAreaSeries<_ChartData, DateTime>( + StackedAreaSeries( animationDuration: 2500, enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.fairTrade, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, name: 'Orange'), - StackedAreaSeries<_ChartData, DateTime>( + StackedAreaSeries( animationDuration: 2500, enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.veg, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'Pears'), - StackedAreaSeries<_ChartData, DateTime>( + StackedAreaSeries( animationDuration: 2500, enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.others, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, name: 'Others') ]; } - -class _ChartData { - _ChartData(this.x, this.organic, this.fairTrade, this.veg, this.others); - final DateTime x; - final num organic; - final num fairTrade; - final num veg; - final num others; -} diff --git a/lib/samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart b/lib/samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart index 88f4f831..918e8040 100644 --- a/lib/samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart +++ b/lib/samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class StackedBarChart extends StatefulWidget { - const StackedBarChart(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + StackedBarChart({this.sample, Key key}) : super(key: key); + SubItem sample; @override _StackedBarChartState createState() => _StackedBarChartState(sample); @@ -15,181 +14,11 @@ class StackedBarChart extends StatefulWidget { class _StackedBarChartState extends State { _StackedBarChartState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(StackedBarChart oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stacked_series/stacked_bar_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getStackedBarChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getStackedBarChart(false), sample); } } @@ -211,42 +40,34 @@ SfCartesianChart getStackedBarChart(bool isTileView) { ); } -List> getStackedBarSeries( +List> getStackedBarSeries( bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Jan', 6, 6, -1), - _ChartData('Feb', 8, 8, -1.5), - _ChartData('Mar', 12, 11, -2), - _ChartData('Apr', 15.5, 16, -2.5), - _ChartData('May', 20, 21, -3), - _ChartData('June', 24, 25, -3.5), + final List chartData = [ + ChartSampleData(x: 'Jan', y: 6, yValue: 6, yValue2: -1), + ChartSampleData(x: 'Feb', y: 8, yValue: 8, yValue2: -1.5), + ChartSampleData(x: 'Mar', y: 12, yValue: 11, yValue2: -2), + ChartSampleData(x: 'Apr', y: 15.5, yValue: 16, yValue2: -2.5), + ChartSampleData(x: 'May', y: 20, yValue: 21, yValue2: -3), + ChartSampleData(x: 'June', y: 24, yValue: 25, yValue2: -3.5), ]; - return >[ - StackedBarSeries<_ChartData, String>( + return >[ + StackedBarSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.apple, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Apple'), - StackedBarSeries<_ChartData, String>( + StackedBarSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.orange, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, name: 'Orange'), - StackedBarSeries<_ChartData, String>( + StackedBarSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.wastage, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'Wastage') ]; } - -class _ChartData { - _ChartData(this.x, this.apple, this.orange, this.wastage); - final String x; - final num apple; - final num orange; - final num wastage; -} diff --git a/lib/samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart b/lib/samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart index 40d52208..1758b97b 100644 --- a/lib/samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart +++ b/lib/samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class StackedColumnChart extends StatefulWidget { - const StackedColumnChart(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + StackedColumnChart({this.sample, Key key}) : super(key: key); + SubItem sample; @override _StackedColumnChartState createState() => _StackedColumnChartState(sample); @@ -15,181 +14,11 @@ class StackedColumnChart extends StatefulWidget { class _StackedColumnChartState extends State { _StackedColumnChartState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(StackedColumnChart oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stacked_series/stacked_column_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getStackedColumnChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getStackedColumnChart(false), sample); } } @@ -214,47 +43,38 @@ SfCartesianChart getStackedColumnChart(bool isTileView) { ); } -List> getStackedColumnSeries( +List> getStackedColumnSeries( bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Q1', 50, 55, 72, 65), - _ChartData('Q2', 80, 75, 70, 60), - _ChartData('Q3', 35, 45, 55, 52), - _ChartData('Q4', 65, 50, 70, 65), + final List chartData = [ + ChartSampleData(x: 'Q1', y: 50, yValue: 55, yValue2: 72, yValue3: 65), + ChartSampleData(x: 'Q2', y: 80, yValue: 75, yValue2: 70, yValue3: 60), + ChartSampleData(x: 'Q3', y: 35, yValue: 45, yValue2: 55, yValue3: 52), + ChartSampleData(x: 'Q4', y: 65, yValue: 50, yValue2: 70, yValue3: 65), ]; - return >[ - StackedColumnSeries<_ChartData, String>( + return >[ + StackedColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Product A'), - StackedColumnSeries<_ChartData, String>( + StackedColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, name: 'Product B'), - StackedColumnSeries<_ChartData, String>( + StackedColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y3, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'Product C'), - StackedColumnSeries<_ChartData, String>( + StackedColumnSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y4, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, name: 'Product D') ]; } - -class _ChartData { - _ChartData(this.x, this.y1, this.y2, this.y3, this.y4); - final String x; - final num y1; - final num y2; - final num y3; - final num y4; -} diff --git a/lib/samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart b/lib/samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart index 1d302de5..2f51fccb 100644 --- a/lib/samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart +++ b/lib/samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class StackedLineChart extends StatefulWidget { - const StackedLineChart(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + StackedLineChart({this.sample, Key key}) : super(key: key); + SubItem sample; @override _StackedLineChartState createState() => _StackedLineChartState(sample); @@ -15,181 +14,11 @@ class StackedLineChart extends StatefulWidget { class _StackedLineChartState extends State { _StackedLineChartState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(StackedLineChart oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stacked_series/stacked_line_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - TextEditingController editingController = TextEditingController(); - TextEditingController spacingEditingController = TextEditingController(); - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getStackedLineChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getStackedLineChart(false), sample); } } @@ -208,59 +37,52 @@ SfCartesianChart getStackedLineChart(bool isTileView) { labelFormat: '\${value}', majorTickLines: MajorTickLines(size: 0)), series: getStackedLineSeries(isTileView), - trackballBehavior:TrackballBehavior(enable: true, activationMode: ActivationMode.singleTap), + trackballBehavior: TrackballBehavior( + enable: true, activationMode: ActivationMode.singleTap), tooltipBehavior: TooltipBehavior(enable: false, header: '', canShowMarker: false), ); } -List> getStackedLineSeries( +List> getStackedLineSeries( bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Food', 55, 40, 45, 48), - _ChartData('Transport', 33, 45, 54, 28), - _ChartData('Medical', 43, 23, 20, 34), - _ChartData('Clothes', 32, 54, 23, 54), - _ChartData('Books', 56, 18, 43, 55), - _ChartData('Others', 23, 54, 33, 56), + final List chartData = [ + ChartSampleData(x: 'Food', y: 55, yValue: 40, yValue2: 45, yValue3: 48), + ChartSampleData( + x: 'Transport', y: 33, yValue: 45, yValue2: 54, yValue3: 28), + ChartSampleData(x: 'Medical', y: 43, yValue: 23, yValue2: 20, yValue3: 34), + ChartSampleData(x: 'Clothes', y: 32, yValue: 54, yValue2: 23, yValue3: 54), + ChartSampleData(x: 'Books', y: 56, yValue: 18, yValue2: 43, yValue3: 55), + ChartSampleData(x: 'Others', y: 23, yValue: 54, yValue2: 33, yValue3: 56), ]; - return >[ - StackedLineSeries<_ChartData, String>( + return >[ + StackedLineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.father, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Father', markerSettings: MarkerSettings(isVisible: true)), - StackedLineSeries<_ChartData, String>( + StackedLineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.mother, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, name: 'Mother', markerSettings: MarkerSettings(isVisible: true)), - StackedLineSeries<_ChartData, String>( + StackedLineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.son, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'Son', markerSettings: MarkerSettings(isVisible: true)), - StackedLineSeries<_ChartData, String>( + StackedLineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.daughter, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, name: 'Daughter', markerSettings: MarkerSettings(isVisible: true)) ]; } - -class _ChartData { - _ChartData(this.x, this.father, this.mother, this.son, this.daughter); - final String x; - final num father; - final num mother; - final num son; - final num daughter; -} diff --git a/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_area_100_chart.dart b/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_area_100_chart.dart new file mode 100644 index 00000000..8839a06e --- /dev/null +++ b/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_area_100_chart.dart @@ -0,0 +1,105 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:intl/intl.dart'; + +//ignore: must_be_immutable +class StackedArea100Chart extends StatefulWidget { + StackedArea100Chart({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _StackedAreaChartState createState() => _StackedAreaChartState(sample); +} + +class _StackedAreaChartState extends State { + _StackedAreaChartState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getStackedArea100Chart(false), sample); + } +} + +SfCartesianChart getStackedArea100Chart(bool isTileView) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle( + text: isTileView ? '' : 'Sales comparision of fruits in a shop'), + legend: Legend( + isVisible: !isTileView, overflowMode: LegendItemOverflowMode.wrap), + primaryXAxis: DateTimeAxis( + majorGridLines: MajorGridLines(width: 0), + intervalType: DateTimeIntervalType.years, + dateFormat: DateFormat.y()), + primaryYAxis: NumericAxis( + rangePadding: ChartRangePadding.none, + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: getStackedAreaSeries(isTileView), + tooltipBehavior: + TooltipBehavior(enable: true, header: '', canShowMarker: false), + ); +} + +List> getStackedAreaSeries(bool isTileView) { + final List<_ChartData> chartData = <_ChartData>[ + _ChartData(DateTime(2000, 1, 1), 0.61, 0.03, 0.48, 0.23), + _ChartData(DateTime(2001, 1, 1), 0.81, 0.05, 0.53, 0.17), + _ChartData(DateTime(2002, 1, 1), 0.91, 0.06, 0.57, 0.17), + _ChartData(DateTime(2003, 1, 1), 1.00, 0.09, 0.61, 0.20), + _ChartData(DateTime(2004, 1, 1), 1.19, 0.14, 0.63, 0.23), + _ChartData(DateTime(2005, 1, 1), 1.47, 0.20, 0.64, 0.36), + _ChartData(DateTime(2006, 1, 1), 1.74, 0.29, 0.66, 0.43), + _ChartData(DateTime(2007, 1, 1), 1.98, 0.46, 0.76, 0.52), + _ChartData(DateTime(2008, 1, 1), 1.99, 0.64, 0.77, 0.72), + _ChartData(DateTime(2009, 1, 1), 1.70, 0.75, 0.55, 1.29), + _ChartData(DateTime(2010, 1, 1), 1.48, 1.06, 0.54, 1.38), + _ChartData(DateTime(2011, 1, 1), 1.38, 1.25, 0.57, 1.82), + _ChartData(DateTime(2012, 1, 1), 1.66, 1.55, 0.61, 2.16), + _ChartData(DateTime(2013, 1, 1), 1.66, 1.55, 0.67, 2.51), + _ChartData(DateTime(2014, 1, 1), 1.67, 1.65, 0.67, 2.61), + _ChartData(DateTime(2015, 1, 1), 1.98, 1.96, 0.98, 2.93), + ]; + return >[ + StackedArea100Series<_ChartData, DateTime>( + animationDuration: 2500, + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.organic, + name: 'Apple'), + StackedArea100Series<_ChartData, DateTime>( + animationDuration: 2500, + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.fairTrade, + name: 'Orange'), + StackedArea100Series<_ChartData, DateTime>( + animationDuration: 2500, + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.veg, + name: 'Pears'), + StackedArea100Series<_ChartData, DateTime>( + animationDuration: 2500, + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.others, + name: 'Others') + ]; +} + +class _ChartData { + _ChartData(this.x, this.organic, this.fairTrade, this.veg, this.others); + final DateTime x; + final num organic; + final num fairTrade; + final num veg; + final num others; +} diff --git a/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_bar_100_chart.dart b/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_bar_100_chart.dart new file mode 100644 index 00000000..96521d0a --- /dev/null +++ b/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_bar_100_chart.dart @@ -0,0 +1,80 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; + +//ignore: must_be_immutable +class StackedBar100Chart extends StatefulWidget { + StackedBar100Chart({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _StackedBar100ChartState createState() => _StackedBar100ChartState(sample); +} + +class _StackedBar100ChartState extends State { + _StackedBar100ChartState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getStackedBar100Chart(false), sample); + } +} + +SfCartesianChart getStackedBar100Chart(bool isTileView) { + return SfCartesianChart( + plotAreaBorderWidth: 1, + title: ChartTitle(text: isTileView ? '' : 'Sales comparison of fruits'), + legend: Legend(isVisible: !isTileView), + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + ), + primaryYAxis: NumericAxis( + rangePadding: ChartRangePadding.none, + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: _getStackedBarSeries(isTileView), + tooltipBehavior: + TooltipBehavior(enable: true, header: '', canShowMarker: false), + ); +} + +List> _getStackedBarSeries(bool isTileView) { + final List<_ChartData> chartData = <_ChartData>[ + _ChartData('Jan', 6, 6, 1), + _ChartData('Feb', 8, 8, 1.5), + _ChartData('Mar', 12, 11, 2), + _ChartData('Apr', 15.5, 16, 2.5), + _ChartData('May', 20, 21, 3), + _ChartData('June', 24, 25, 3.5), + ]; + return >[ + StackedBar100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.apple, + name: 'Apple'), + StackedBar100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.orange, + name: 'Orange'), + StackedBar100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.wastage, + name: 'Wastage') + ]; +} + +class _ChartData { + _ChartData(this.x, this.apple, this.orange, this.wastage); + final String x; + final num apple; + final num orange; + final num wastage; +} diff --git a/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_column_100_chart.dart b/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_column_100_chart.dart new file mode 100644 index 00000000..c11b4ea0 --- /dev/null +++ b/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_column_100_chart.dart @@ -0,0 +1,93 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; + +//ignore: must_be_immutable +class StackedColumn100Chart extends StatefulWidget { + StackedColumn100Chart({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _StackedColumn100ChartState createState() => + _StackedColumn100ChartState(sample); +} + +class _StackedColumn100ChartState extends State { + _StackedColumn100ChartState(this.sample); + final SubItem sample; + + + @override + Widget build(BuildContext context) { + return getScopedModel(getStackedColumn100Chart(false), sample); + } +} + +SfCartesianChart getStackedColumn100Chart(bool isTileView) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: + ChartTitle(text: isTileView ? '' : 'Quarterly wise sales of products'), + legend: Legend( + isVisible: !isTileView, overflowMode: LegendItemOverflowMode.wrap), + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + ), + primaryYAxis: NumericAxis( + rangePadding: ChartRangePadding.none, + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: _getStackedColumnSeries(isTileView), + tooltipBehavior: + TooltipBehavior(enable: true, header: '', canShowMarker: false), + ); +} + +List> _getStackedColumnSeries(bool isTileView) { + final List<_ChartData> chartData = <_ChartData>[ + _ChartData('Q1', 50, 55, 72, 65), + _ChartData('Q2', 80, 75, 70, 60), + _ChartData('Q3', 35, 45, 55, 52), + _ChartData('Q4', 65, 50, 70, 65), + ]; + return >[ + StackedColumn100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + dataLabelSettings: DataLabelSettings(isVisible: true), + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.y1, + name: 'Product A'), + StackedColumn100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + dataLabelSettings: DataLabelSettings(isVisible: true), + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.y2, + name: 'Product B'), + StackedColumn100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + dataLabelSettings: DataLabelSettings(isVisible: true), + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.y3, + name: 'Product C'), + StackedColumn100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + dataLabelSettings: DataLabelSettings(isVisible: true), + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.y4, + name: 'Product D') + ]; +} + +class _ChartData { + _ChartData(this.x, this.y1, this.y2, this.y3, this.y4); + final String x; + final num y1; + final num y2; + final num y3; + final num y4; +} diff --git a/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_line_100_chart.dart b/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_line_100_chart.dart new file mode 100644 index 00000000..177e9168 --- /dev/null +++ b/lib/samples/chart/cartesian_charts/stacked_series_100/stacked_line_100_chart.dart @@ -0,0 +1,95 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; + +//ignore: must_be_immutable +class StackedLine100Chart extends StatefulWidget { + StackedLine100Chart({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _StackedLineChartState createState() => _StackedLineChartState(sample); +} + +class _StackedLineChartState extends State { + _StackedLineChartState(this.sample); + final SubItem sample; + + + @override + Widget build(BuildContext context) { + return getScopedModel(getStackedLine100Chart(false), sample); + + } +} + +SfCartesianChart getStackedLine100Chart(bool isTileView) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Monthly expense of a family'), + legend: Legend(isVisible: !isTileView), + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + labelRotation: isTileView ? 0 : 45, + ), + primaryYAxis: NumericAxis( + rangePadding: ChartRangePadding.none, + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: _getStackedLine100Series(isTileView), + tooltipBehavior: + TooltipBehavior(enable: true), + ); +} + +List> _getStackedLine100Series( + bool isTileView) { + final List<_ChartData> chartData = <_ChartData>[ + _ChartData('Food', 55, 40, 45, 48), + _ChartData('Transport', 33, 45, 54, 28), + _ChartData('Medical', 43, 23, 20, 34), + _ChartData('Clothes', 32, 54, 23, 54), + _ChartData('Books', 56, 18, 43, 55), + _ChartData('Others', 23, 54, 33, 56), + ]; + return >[ + StackedLine100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.father, + name: 'Father', + markerSettings: MarkerSettings(isVisible: true)), + StackedLine100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.mother, + name: 'Mother', + markerSettings: MarkerSettings(isVisible: true)), + StackedLine100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.son, + name: 'Son', + markerSettings: MarkerSettings(isVisible: true)), + StackedLine100Series<_ChartData, String>( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.daughter, + name: 'Daughter', + markerSettings: MarkerSettings(isVisible: true)) + ]; +} + +class _ChartData { + _ChartData(this.x, this.father, this.mother, this.son, this.daughter); + final String x; + final num father; + final num mother; + final num son; + final num daughter; +} diff --git a/lib/samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart b/lib/samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart index 77c164bd..c322891b 100755 --- a/lib/samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart +++ b/lib/samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class StepLineDefault extends StatefulWidget { - const StepLineDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + StepLineDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _StepLineDefaultState createState() => _StepLineDefaultState(sample); @@ -15,178 +14,11 @@ class StepLineDefault extends StatefulWidget { class _StepLineDefaultState extends State { _StepLineDefaultState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(StepLineDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stepLine_series/default_stepline_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultStepLineChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultStepLineChart(false), sample); } } @@ -202,42 +34,36 @@ SfCartesianChart getDefaultStepLineChart(bool isTileView) { labelFormat: '{value}B'), legend: Legend(isVisible: isTileView ? false : true), tooltipBehavior: TooltipBehavior(enable: true), - series: getStepLineSeries(isTileView), + series: getDefaultStepLineSeries(isTileView), ); } -List> getStepLineSeries(bool isTileView) { - final List<_StepLineData> chartData = <_StepLineData>[ - _StepLineData(2000, 416, 180), - _StepLineData(2001, 490, 240), - _StepLineData(2002, 470, 370), - _StepLineData(2003, 500, 200), - _StepLineData(2004, 449, 229), - _StepLineData(2005, 470, 210), - _StepLineData(2006, 437, 337), - _StepLineData(2007, 458, 258), - _StepLineData(2008, 500, 300), - _StepLineData(2009, 473, 173), - _StepLineData(2010, 520, 220), - _StepLineData(2011, 509, 309) +List> getDefaultStepLineSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 2000, y: 416, yValue2: 180), + ChartSampleData(x: 2001, y: 490, yValue2: 240), + ChartSampleData(x: 2002, y: 470, yValue2: 370), + ChartSampleData(x: 2003, y: 500, yValue2: 200), + ChartSampleData(x: 2004, y: 449, yValue2: 229), + ChartSampleData(x: 2005, y: 470, yValue2: 210), + ChartSampleData(x: 2006, y: 437, yValue2: 337), + ChartSampleData(x: 2007, y: 458, yValue2: 258), + ChartSampleData(x: 2008, y: 500, yValue2: 300), + ChartSampleData(x: 2009, y: 473, yValue2: 173), + ChartSampleData(x: 2010, y: 520, yValue2: 220), + ChartSampleData(x: 2011, y: 509, yValue2: 309) ]; - return >[ - StepLineSeries<_StepLineData, num>( + return >[ + StepLineSeries( dataSource: chartData, - xValueMapper: (_StepLineData sales, _) => sales.xData, - yValueMapper: (_StepLineData sales, _) => sales.yData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Renewable'), - StepLineSeries<_StepLineData, num>( + StepLineSeries( dataSource: chartData, - xValueMapper: (_StepLineData sales, _) => sales.xData, - yValueMapper: (_StepLineData sales, _) => sales.yData2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'Non-Renewable') ]; } - -class _StepLineData { - _StepLineData(this.xData, this.yData, this.yData2); - final double xData; - final double yData; - final double yData2; -} diff --git a/lib/samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart b/lib/samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart index 1d2a928e..16400911 100755 --- a/lib/samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart +++ b/lib/samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart @@ -1,13 +1,12 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class StepLineDashed extends StatefulWidget { - const StepLineDashed(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + StepLineDashed({this.sample, Key key}) : super(key: key); + SubItem sample; @override _StepLineDashedState createState() => _StepLineDashedState(sample); @@ -15,194 +14,11 @@ class StepLineDashed extends StatefulWidget { class _StepLineDashedState extends State { _StepLineDashedState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(StepLineDashed oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stepLine_series/stepline_with_dashes.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDashedStepLineChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDashedStepLineChart(false), sample); } } @@ -224,56 +40,48 @@ SfCartesianChart getDashedStepLineChart(bool isTileView) { ), legend: Legend(isVisible: isTileView ? false : true), tooltipBehavior: TooltipBehavior(enable: true), - series: getStepLineSeries(isTileView), + series: getDashedStepLineSeries(isTileView), ); } -List> getStepLineSeries(bool isTileView) { - final List<_StepLineData> chartData = <_StepLineData>[ - _StepLineData(2006, 378, 463, 519, 570), - _StepLineData(2007, 416, 449, 508, 579), - _StepLineData(2008, 404, 458, 502, 563), - _StepLineData(2009, 390, 450, 495, 550), - _StepLineData(2010, 376, 425, 485, 545), - _StepLineData(2011, 365, 430, 470, 525) +List> getDashedStepLineSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 2006, y: 378, yValue: 463, yValue2: 519, yValue3: 570), + ChartSampleData(x: 2007, y: 416, yValue: 449, yValue2: 508, yValue3: 579), + ChartSampleData(x: 2008, y: 404, yValue: 458, yValue2: 502, yValue3: 563), + ChartSampleData(x: 2009, y: 390, yValue: 450, yValue2: 495, yValue3: 550), + ChartSampleData(x: 2010, y: 376, yValue: 425, yValue2: 485, yValue3: 545), + ChartSampleData(x: 2011, y: 365, yValue: 430, yValue2: 470, yValue3: 525) ]; - return >[ - StepLineSeries<_StepLineData, num>( + return >[ + StepLineSeries( dataSource: chartData, - xValueMapper: (_StepLineData data, _) => data.x, - yValueMapper: (_StepLineData data, _) => data.y1, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, name: 'USA', width: 2, - dashArray:[10, 5]), - StepLineSeries<_StepLineData, num>( + dashArray: [10, 5]), + StepLineSeries( dataSource: chartData, - xValueMapper: (_StepLineData data, _) => data.x, - yValueMapper: (_StepLineData data, _) => data.y2, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue, name: 'UK', width: 2, dashArray: [10, 5]), - StepLineSeries<_StepLineData, num>( + StepLineSeries( dataSource: chartData, - xValueMapper: (_StepLineData data, _) => data.x, - yValueMapper: (_StepLineData data, _) => data.y3, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue2, name: 'Korea', width: 2, dashArray: [10, 5]), - StepLineSeries<_StepLineData, num>( + StepLineSeries( dataSource: chartData, - xValueMapper: (_StepLineData data, _) => data.x, - yValueMapper: (_StepLineData data, _) => data.y4, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.yValue3, name: 'Japan', width: 2, dashArray: [10, 5]) ]; } - -class _StepLineData { - _StepLineData(this.x, this.y1, this.y2, this.y3, this.y4); - final double x; - final double y1; - final double y2; - final double y3; - final double y4; -} diff --git a/lib/samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart b/lib/samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart index d192e51f..50b8eb3c 100755 --- a/lib/samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart +++ b/lib/samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart @@ -1,14 +1,14 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:intl/intl.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class StepLineVertical extends StatefulWidget { - const StepLineVertical(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + StepLineVertical({this.sample, Key key}) : super(key: key); + SubItem sample; @override _StepLineVerticalState createState() => _StepLineVerticalState(sample); @@ -16,193 +16,11 @@ class StepLineVertical extends StatefulWidget { class _StepLineVerticalState extends State { _StepLineVerticalState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(StepLineVertical oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/cartesian_charts/stepLine_series/vertical_stepline_chart.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getVerticalStepLineChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getVerticalStepLineChart(false), sample); } } @@ -217,43 +35,36 @@ SfCartesianChart getVerticalStepLineChart(bool isTileView) { interval: 5), primaryYAxis: NumericAxis(labelFormat: '{value}%', interval: 5), isTransposed: true, - series: getStepLineSeries(isTileView), + series: getVerticalStepLineSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getStepLineSeries( +List> getVerticalStepLineSeries( bool isTileView) { - final List<_StepLineData> chartData = <_StepLineData>[ - _StepLineData(DateTime(1975), 16, 10), - _StepLineData(DateTime(1980), 12.5, 7.5), - _StepLineData(DateTime(1985), 19, 11), - _StepLineData(DateTime(1990), 14.4, 7), - _StepLineData(DateTime(1995), 11.5, 8), - _StepLineData(DateTime(2000), 14, 6), - _StepLineData(DateTime(2005), 10, 3.5), - _StepLineData(DateTime(2010), 16, 7), + final List chartData = [ + ChartSampleData(x: DateTime(1975), y: 16, yValue2: 10), + ChartSampleData(x: DateTime(1980), y: 12.5, yValue2: 7.5), + ChartSampleData(x: DateTime(1985), y: 19, yValue2: 11), + ChartSampleData(x: DateTime(1990), y: 14.4, yValue2: 7), + ChartSampleData(x: DateTime(1995), y: 11.5, yValue2: 8), + ChartSampleData(x: DateTime(2000), y: 14, yValue2: 6), + ChartSampleData(x: DateTime(2005), y: 10, yValue2: 3.5), + ChartSampleData(x: DateTime(2010), y: 16, yValue2: 7), ]; - return >[ - StepLineSeries<_StepLineData, DateTime>( + return >[ + StepLineSeries( markerSettings: MarkerSettings(isVisible: true), dataSource: chartData, - xValueMapper: (_StepLineData sales, _) => sales.xData, - yValueMapper: (_StepLineData sales, _) => sales.yData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'China'), - StepLineSeries<_StepLineData, DateTime>( + StepLineSeries( markerSettings: MarkerSettings(isVisible: true), dataSource: chartData, name: 'Australia', - xValueMapper: (_StepLineData sales, _) => sales.xData, - yValueMapper: (_StepLineData sales, _) => sales.yData2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, ) ]; } - -class _StepLineData { - _StepLineData(this.xData, this.yData, this.yData2); - final DateTime xData; - final double yData; - final double yData2; -} diff --git a/lib/samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart b/lib/samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart index 0eb8ccd8..ac6ee127 100755 --- a/lib/samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart +++ b/lib/samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class DoughnutDefault extends StatefulWidget { - const DoughnutDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DoughnutDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DoughnutDefaultState createState() => _DoughnutDefaultState(sample); @@ -15,203 +14,15 @@ class DoughnutDefault extends StatefulWidget { class _DoughnutDefaultState extends State { _DoughnutDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DoughnutDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/default_doughnut_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultDoughnutChart(false)), - ), - floatingActionButton: Stack(children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.pngkit.com/view/u2q8y3w7r5y3t4o0_composition-of-ocean-water-earths-oceans-elements-percentage/'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.pngkit.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ) - ])); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.pngkit.com/view/u2q8y3w7r5y3t4o0_composition-of-ocean-water-earths-oceans-elements-percentage/'; + const String source = 'www.pngkit.com'; + return getScopedModel( + getDefaultDoughnutChart(false), sample, null, sourceLink, source); } } @@ -221,36 +32,30 @@ SfCircularChart getDefaultDoughnutChart(bool isTileView) { legend: Legend( isVisible: isTileView ? false : true, overflowMode: LegendItemOverflowMode.wrap), - series: getDoughnutSeries(isTileView), + series: getDefaultDoughnutSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getDoughnutSeries(bool isTileView) { - final List<_DoughnutData> chartData = <_DoughnutData>[ - _DoughnutData('Chlorine', 55, '55%'), - _DoughnutData('Sodium', 31, '31%'), - _DoughnutData('Magnesium', 7.7, '7.7%'), - _DoughnutData('Sulfur', 3.7, '3.7%'), - _DoughnutData('Calcium', 1.2, '1.2%'), - _DoughnutData('Others', 1.4, '1.4%'), +List> getDefaultDoughnutSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Chlorine', y: 55, text: '55%'), + ChartSampleData(x: 'Sodium', y: 31, text: '31%'), + ChartSampleData(x: 'Magnesium', y: 7.7, text: '7.7%'), + ChartSampleData(x: 'Sulfur', y: 3.7, text: '3.7%'), + ChartSampleData(x: 'Calcium', y: 1.2, text: '1.2%'), + ChartSampleData(x: 'Others', y: 1.4, text: '1.4%'), ]; - return >[ - DoughnutSeries<_DoughnutData, String>( + return >[ + DoughnutSeries( radius: '80%', explode: true, explodeOffset: '10%', dataSource: chartData, - xValueMapper: (_DoughnutData data, _) => data.xData, - yValueMapper: (_DoughnutData data, _) => data.yData, - dataLabelMapper: (_DoughnutData data, _) => data.text, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelMapper: (ChartSampleData data, _) => data.text, dataLabelSettings: DataLabelSettings(isVisible: true)) ]; } - -class _DoughnutData { - _DoughnutData(this.xData, this.yData, this.text); - final String xData; - final num yData; - final String text; -} diff --git a/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart b/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart index 3dabb2bf..df7ba7c2 100755 --- a/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart +++ b/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class DoughnutElevation extends StatefulWidget { - const DoughnutElevation(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DoughnutElevation({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DoughnutDefaultState createState() => _DoughnutDefaultState(sample); @@ -15,193 +14,11 @@ class DoughnutElevation extends StatefulWidget { class _DoughnutDefaultState extends State { _DoughnutDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DoughnutElevation oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_center_elevation.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getElevationDoughnutChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getElevationDoughnutChart(false), sample); } } @@ -221,36 +38,31 @@ SfCircularChart getElevationDoughnutChart(bool isTileView) { CircularChartAnnotation( widget: Container( child: const Text('62%', - style: TextStyle( - color: Color.fromRGBO(0, 0, 0, 0.5), fontSize: 25)))) + style: TextStyle( + color: Color.fromRGBO(0, 0, 0, 0.5), fontSize: 25)))) ], title: ChartTitle( text: isTileView ? '' : 'Progress of a task', textStyle: ChartTextStyle(fontSize: 20)), - series: getDoughnutSeries(isTileView), + series: getElevationDoughnutSeries(isTileView), ); } -List> getDoughnutSeries(bool isTileView) { - final List<_DoughnutData> chartData = <_DoughnutData>[ - _DoughnutData('A', 62, null, const Color.fromRGBO(0, 220, 252, 1)), - _DoughnutData('B', 38, null, const Color.fromRGBO(230, 230, 230, 1)) +List> getElevationDoughnutSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData( + x: 'A', y: 62, pointColor: const Color.fromRGBO(0, 220, 252, 1)), + ChartSampleData( + x: 'B', y: 38, pointColor: const Color.fromRGBO(230, 230, 230, 1)) ]; - return >[ - DoughnutSeries<_DoughnutData, String>( + return >[ + DoughnutSeries( dataSource: chartData, animationDuration: 0, - xValueMapper: (_DoughnutData data, _) => data.xData, - yValueMapper: (_DoughnutData data, _) => data.yData, - pointColorMapper: (_DoughnutData data, _) => data.color) + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + pointColorMapper: (ChartSampleData data, _) => data.pointColor) ]; } - -class _DoughnutData { - _DoughnutData(this.xData, this.yData, this.text, this.color); - final String xData; - final num yData; - final String text; - final Color color; -} diff --git a/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart b/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart index 0a687ccd..f69db534 100755 --- a/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart +++ b/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class DoughnutCustomization extends StatefulWidget { - const DoughnutCustomization(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DoughnutCustomization({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DoughnutDefaultState createState() => _DoughnutDefaultState(sample); @@ -15,177 +14,11 @@ class DoughnutCustomization extends StatefulWidget { class _DoughnutDefaultState extends State { _DoughnutDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DoughnutCustomization oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_color_mapping.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDoughnutCustomizationChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDoughnutCustomizationChart(false), sample); } } @@ -195,56 +28,69 @@ SfCircularChart getDoughnutCustomizationChart(bool isTileView) { CircularChartAnnotation( widget: Container( child: Text('90%', - style: TextStyle( - color: Colors.grey, fontSize: 25)))) + style: TextStyle(color: Colors.grey, fontSize: 25)))) ], title: ChartTitle( text: isTileView ? '' : 'Work progress', textStyle: ChartTextStyle(fontSize: 20)), - series: getDoughnutSeries(isTileView), + series: getDoughnutCustomizationSeries(isTileView), ); } -List> getDoughnutSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('A', 10, const Color.fromRGBO(255, 4, 0, 1)), - _ChartData('B', 10, const Color.fromRGBO(255, 15, 0, 1)), - _ChartData('C', 10, const Color.fromRGBO(255, 31, 0, 1)), - _ChartData('D', 10, const Color.fromRGBO(255, 60, 0, 1)), - _ChartData('E', 10, const Color.fromRGBO(255, 90, 0, 1)), - _ChartData('F', 10, const Color.fromRGBO(255, 115, 0, 1)), - _ChartData('G', 10, const Color.fromRGBO(255, 135, 0, 1)), - _ChartData('H', 10, const Color.fromRGBO(255, 155, 0, 1)), - _ChartData('I', 10, const Color.fromRGBO(255, 175, 0, 1)), - _ChartData('J', 10, const Color.fromRGBO(255, 188, 0, 1)), - _ChartData('K', 10, const Color.fromRGBO(255, 188, 0, 1)), - _ChartData('L', 10, const Color.fromRGBO(251, 188, 2, 1)), - _ChartData('M', 10, const Color.fromRGBO(245, 188, 6, 1)), - _ChartData('N', 10, const Color.fromRGBO(233, 188, 12, 1)), - _ChartData('O', 10, const Color.fromRGBO(220, 187, 19, 1)), - _ChartData('P', 10, const Color.fromRGBO(208, 187, 26, 1)), - _ChartData('Q', 10, const Color.fromRGBO(193, 187, 34, 1)), - _ChartData('R', 10, const Color.fromRGBO(177, 186, 43, 1)), - _ChartData('S', 10, const Color.fromRGBO(230, 230, 230, 1)), - _ChartData('T', 10, const Color.fromRGBO(230, 230, 230, 1)) +List> getDoughnutCustomizationSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData( + x: 'A', y: 10, pointColor: const Color.fromRGBO(255, 4, 0, 1)), + ChartSampleData( + x: 'B', y: 10, pointColor: const Color.fromRGBO(255, 15, 0, 1)), + ChartSampleData( + x: 'C', y: 10, pointColor: const Color.fromRGBO(255, 31, 0, 1)), + ChartSampleData( + x: 'D', y: 10, pointColor: const Color.fromRGBO(255, 60, 0, 1)), + ChartSampleData( + x: 'E', y: 10, pointColor: const Color.fromRGBO(255, 90, 0, 1)), + ChartSampleData( + x: 'F', y: 10, pointColor: const Color.fromRGBO(255, 115, 0, 1)), + ChartSampleData( + x: 'G', y: 10, pointColor: const Color.fromRGBO(255, 135, 0, 1)), + ChartSampleData( + x: 'H', y: 10, pointColor: const Color.fromRGBO(255, 155, 0, 1)), + ChartSampleData( + x: 'I', y: 10, pointColor: const Color.fromRGBO(255, 175, 0, 1)), + ChartSampleData( + x: 'J', y: 10, pointColor: const Color.fromRGBO(255, 188, 0, 1)), + ChartSampleData( + x: 'K', y: 10, pointColor: const Color.fromRGBO(255, 188, 0, 1)), + ChartSampleData( + x: 'L', y: 10, pointColor: const Color.fromRGBO(251, 188, 2, 1)), + ChartSampleData( + x: 'M', y: 10, pointColor: const Color.fromRGBO(245, 188, 6, 1)), + ChartSampleData( + x: 'N', y: 10, pointColor: const Color.fromRGBO(233, 188, 12, 1)), + ChartSampleData( + x: 'O', y: 10, pointColor: const Color.fromRGBO(220, 187, 19, 1)), + ChartSampleData( + x: 'P', y: 10, pointColor: const Color.fromRGBO(208, 187, 26, 1)), + ChartSampleData( + x: 'Q', y: 10, pointColor: const Color.fromRGBO(193, 187, 34, 1)), + ChartSampleData( + x: 'R', y: 10, pointColor: const Color.fromRGBO(177, 186, 43, 1)), + ChartSampleData( + x: 'S', y: 10, pointColor: const Color.fromRGBO(230, 230, 230, 1)), + ChartSampleData( + x: 'T', y: 10, pointColor: const Color.fromRGBO(230, 230, 230, 1)) ]; - return >[ - DoughnutSeries<_ChartData, String>( + return >[ + DoughnutSeries( dataSource: chartData, radius: '100%', strokeColor: Colors.white, strokeWidth: 2, - xValueMapper: (_ChartData data, _) => data.xVal, - yValueMapper: (_ChartData data, _) => data.yVal, - pointColorMapper: (_ChartData data, _) => data.color, - dataLabelMapper: (_ChartData data, _) => data.xVal, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + pointColorMapper: (ChartSampleData data, _) => data.pointColor, + dataLabelMapper: (ChartSampleData data, _) => data.x, ), ]; } - -class _ChartData { - _ChartData(this.xVal, this.yVal, [this.color]); - final String xVal; - final int yVal; - final Color color; -} diff --git a/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart b/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart index 39300215..1b97328e 100755 --- a/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart +++ b/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart @@ -1,211 +1,24 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class DoughnutRounded extends StatefulWidget { - const DoughnutRounded(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DoughnutRounded({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DoughnutRoundedState createState() => _DoughnutRoundedState(sample); } class _DoughnutRoundedState extends State { - _DoughnutRoundedState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DoughnutRounded oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + _DoughnutRoundedState(this.sample); + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/doughnut_with_rounded_corners.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - //frontHeader: model.panelTitle(context), - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRoundedDoughnutChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRoundedDoughnutChart(false), sample); } } @@ -215,35 +28,29 @@ SfCircularChart getRoundedDoughnutChart(bool isTileView) { isVisible: isTileView ? false : true, overflowMode: LegendItemOverflowMode.wrap), title: ChartTitle(text: isTileView ? '' : 'Software development cycle'), - series: getDoughnutSeries(isTileView), + series: getRoundedDoughnutSeries(isTileView), ); } -List> getDoughnutSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('Planning', 10), - _ChartData('Analysis', 10), - _ChartData('Design', 10), - _ChartData('Development', 10), - _ChartData('Testing & Integration', 10), - _ChartData('Maintainance', 10) +List> getRoundedDoughnutSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Planning', y: 10), + ChartSampleData(x: 'Analysis', y: 10), + ChartSampleData(x: 'Design', y: 10), + ChartSampleData(x: 'Development', y: 10), + ChartSampleData(x: 'Testing & Integration', y: 10), + ChartSampleData(x: 'Maintainance', y: 10) ]; - return >[ - DoughnutSeries<_ChartData, String>( + return >[ + DoughnutSeries( dataSource: chartData, animationDuration: 0, cornerStyle: CornerStyle.bothCurve, radius: '80%', innerRadius: '60%', - xValueMapper: (_ChartData data, _) => data.xVal, - yValueMapper: (_ChartData data, _) => data.yVal, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, ), ]; } - -class _ChartData { - _ChartData(this.xVal, this.yVal, [this.radius]); - final String xVal; - final int yVal; - final String radius; -} diff --git a/lib/samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart b/lib/samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart index 0fbe3b22..081ef839 100755 --- a/lib/samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart +++ b/lib/samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart @@ -1,15 +1,15 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/custom_button.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; +//ignore: must_be_immutable class DoughnutSemi extends StatefulWidget { - const DoughnutSemi(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DoughnutSemi({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DoughnutSemiState createState() => _DoughnutSemiState(sample); @@ -17,96 +17,70 @@ class DoughnutSemi extends StatefulWidget { class _DoughnutSemiState extends State { _DoughnutSemiState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + final SubItem sample; @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, SemiDoughnutFrontPanel(sample)); } +} - @override - void didUpdateWidget(DoughnutSemi oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCircularChart getSemiDoughnutChart(bool isTileView, + [int startAngle, int endAngle]) { + return SfCircularChart( + title: ChartTitle(text: isTileView ? '' : 'Sales by sales person'), + legend: Legend(isVisible: isTileView ? false : true), + centerY: isTileView ? '65%' : '60%', + series: getSemiDoughnutSeries(isTileView, startAngle, endAngle), + tooltipBehavior: TooltipBehavior(enable: true), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/doughnut_series/semi_doughnut_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> getSemiDoughnutSeries( + bool isTileView, int startAngle, int endAngle) { + final List chartData = [ + ChartSampleData(x: 'David', y: 75, text: 'David 74%'), + ChartSampleData(x: 'Steve', y: 35, text: 'Steve 35%'), + ChartSampleData(x: 'Jack', y: 39, text: 'Jack 39%'), + ChartSampleData(x: 'Others', y: 75, text: 'Others 75%') + ]; + return >[ + DoughnutSeries( + dataSource: chartData, + innerRadius: '70%', + radius: isTileView ? '100%' : '59%', + startAngle: isTileView ? 270 : startAngle, + endAngle: isTileView ? 90 : endAngle, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelMapper: (ChartSampleData data, _) => data.text, + dataLabelSettings: DataLabelSettings( + isVisible: true, labelPosition: ChartDataLabelPosition.outside)) + ]; } -class FrontPanel extends StatefulWidget { +class SemiDoughnutFrontPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + SemiDoughnutFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _SemiDoughnutFrontPanelState createState() => + _SemiDoughnutFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _SemiDoughnutFrontPanelState extends State { + _SemiDoughnutFrontPanelState(this.sample); + final SubItem sample; int startAngle = 270; int endAngle = 90; @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -122,8 +96,8 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { - final double height = + void _showSettingsPanel(SampleModel model) { + final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 : 0.4; @@ -132,9 +106,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -199,9 +173,8 @@ class _FrontPanelState extends State { startAngle.toDouble(), onChanged: (dynamic val) => setState(() { - startAngle = - val.toInt(); - }), + startAngle = val.toInt(); + }), step: 10, horizontal: true, loop: false, @@ -255,8 +228,8 @@ class _FrontPanelState extends State { endAngle.toDouble(), onChanged: (dynamic val) => setState(() { - endAngle = val.toInt(); - }), + endAngle = val.toInt(); + }), step: 10, horizontal: true, loop: false, @@ -289,119 +262,3 @@ class _FrontPanelState extends State { ))))))); } } - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCircularChart getSemiDoughnutChart(bool isTileView, - [int startAngle, int endAngle]) { - return SfCircularChart( - title: ChartTitle(text: isTileView ? '' : 'Sales by sales person'), - legend: Legend(isVisible: isTileView ? false : true), - series: getDoughnutSeries(isTileView, startAngle, endAngle), - tooltipBehavior: TooltipBehavior(enable: true), - ); -} - -List> getDoughnutSeries( - bool isTileView, int startAngle, int endAngle) { - final List<_DoughnutData> chartData = <_DoughnutData>[ - _DoughnutData('David', 75, 'David 74%'), - _DoughnutData('Steve', 35, 'Steve 35%'), - _DoughnutData('Jack', 39, 'Jack 39%'), - _DoughnutData('Others', 75, 'Others 75%') - ]; - return >[ - DoughnutSeries<_DoughnutData, String>( - dataSource: chartData, - innerRadius: '70%', - startAngle: isTileView ? 270 : startAngle, - endAngle: isTileView ? 90 : endAngle, - xValueMapper: (_DoughnutData data, _) => data.xData, - yValueMapper: (_DoughnutData data, _) => data.yData, - dataLabelMapper: (_DoughnutData data, _) => data.text, - dataLabelSettings: DataLabelSettings( - isVisible: true, labelPosition: ChartDataLabelPosition.inside)) - ]; -} - -class _DoughnutData { - _DoughnutData(this.xData, this.yData, this.text); - final String xData; - final num yData; - final String text; -} diff --git a/lib/samples/chart/circular_charts/pie_series/default_pie_chart.dart b/lib/samples/chart/circular_charts/pie_series/default_pie_chart.dart index 17619d1c..92f0dabf 100755 --- a/lib/samples/chart/circular_charts/pie_series/default_pie_chart.dart +++ b/lib/samples/chart/circular_charts/pie_series/default_pie_chart.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class PieDefault extends StatefulWidget { - const PieDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + PieDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _PieDefaultState createState() => _PieDefaultState(sample); @@ -15,176 +14,11 @@ class PieDefault extends StatefulWidget { class _PieDefaultState extends State { _PieDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(PieDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/default_pie_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultPieChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultPieChart(false), sample); } } @@ -192,35 +26,28 @@ SfCircularChart getDefaultPieChart(bool isTileView) { return SfCircularChart( title: ChartTitle(text: isTileView ? '' : 'Sales by sales person'), legend: Legend(isVisible: isTileView ? false : true), - series: getPieSeries(isTileView), + series: getDefaultPieSeries(isTileView), ); } -List> getPieSeries(bool isTileView) { - final List<_PieData> pieData = <_PieData>[ - _PieData('David', 30, 'David \n 30%'), - _PieData('Steve', 35, 'Steve \n 35%'), - _PieData('Jack', 39, 'Jack \n 39%'), - _PieData('Others', 75, 'Others \n 75%'), +List> getDefaultPieSeries(bool isTileView) { + final List pieData = [ + ChartSampleData(x: 'David', y: 30, text: 'David \n 30%'), + ChartSampleData(x: 'Steve', y: 35, text: 'Steve \n 35%'), + ChartSampleData(x: 'Jack', y: 39, text: 'Jack \n 39%'), + ChartSampleData(x: 'Others', y: 75, text: 'Others \n 75%'), ]; - return >[ - PieSeries<_PieData, String>( + return >[ + PieSeries( explode: true, explodeIndex: 0, explodeOffset: '10%', dataSource: pieData, - xValueMapper: (_PieData data, _) => data.xData, - yValueMapper: (_PieData data, _) => data.yData, - dataLabelMapper: (_PieData data, _) => data.text, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelMapper: (ChartSampleData data, _) => data.text, startAngle: 90, endAngle: 90, dataLabelSettings: DataLabelSettings(isVisible: true)), ]; } - -class _PieData { - _PieData(this.xData, this.yData, [this.text]); - final String xData; - final num yData; - final String text; -} diff --git a/lib/samples/chart/circular_charts/pie_series/pie_with_grouping.dart b/lib/samples/chart/circular_charts/pie_series/pie_with_grouping.dart index 05beb27a..b3752b8f 100755 --- a/lib/samples/chart/circular_charts/pie_series/pie_with_grouping.dart +++ b/lib/samples/chart/circular_charts/pie_series/pie_with_grouping.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class PieGrouping extends StatefulWidget { - const PieGrouping(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + PieGrouping({this.sample, Key key}) : super(key: key); + SubItem sample; @override _PieGroupingState createState() => _PieGroupingState(sample); @@ -15,222 +14,68 @@ class PieGrouping extends StatefulWidget { class _PieGroupingState extends State { _PieGroupingState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(PieGrouping oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override + final SubItem sample; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/pie_with_grouping.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getGroupingPieChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getGroupingPieChart(false), sample); } } SfCircularChart getGroupingPieChart(bool isTileView) { return SfCircularChart( title: ChartTitle(text: isTileView ? '' : 'Electricity sectors'), - series: getPieSeries(isTileView), + series: getGroupingPieSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true, format: 'point.x : point.y%'), ); } -List> getPieSeries(bool isTileView) { - final List<_PieData> pieData = <_PieData>[ - _PieData('Coal', 56.2, 'Coal: 200,704.5 MW (56.2%)', null), - _PieData('Large\nHydro', 12.7, 'Large Hydro: 45,399.22 MW (12.7%)', null), - _PieData('Small\nHydro', 1.3, 'Small Hydro: 4,594.15 MW (1.3%)', null), - _PieData('Wind\nPower', 10, 'Wind Power: 35,815.88 MW (10.0%)', null), - _PieData('Solar\nPower', 8, 'Solar Power: 28,679.21 MW (8.0%)', - const Color.fromRGBO(198, 201, 207, 1)), - _PieData('Biomass', 2.6, 'Biomass: 9,269.8 MW (2.6%)', null), - _PieData('Nuclear', 1.9, 'Nuclear: 6,780 MW (1.9%)', null), - _PieData('Gas', 7, 'Gas: 24,937.22 MW (7.0%)', null), - _PieData('Diesel', 0.2, 'Diesel: 637.63 MW (0.2%)', null) +List> getGroupingPieSeries(bool isTileView) { + final List pieData = [ + ChartSampleData( + x: 'Coal', + y: 56.2, + text: 'Coal: 200,704.5 MW (56.2%)', + pointColor: null), + ChartSampleData( + x: 'Large\nHydro', + y: 12.7, + text: 'Large Hydro: 45,399.22 MW (12.7%)', + pointColor: null), + ChartSampleData( + x: 'Small\nHydro', + y: 1.3, + text: 'Small Hydro: 4,594.15 MW (1.3%)', + pointColor: null), + ChartSampleData( + x: 'Wind\nPower', + y: 10, + text: 'Wind Power: 35,815.88 MW (10.0%)', + pointColor: null), + ChartSampleData( + x: 'Solar\nPower', + y: 8, + text: 'Solar Power: 28,679.21 MW (8.0%)', + pointColor: const Color.fromRGBO(198, 201, 207, 1)), + ChartSampleData( + x: 'Biomass', + y: 2.6, + text: 'Biomass: 9,269.8 MW (2.6%)', + pointColor: null), + ChartSampleData( + x: 'Nuclear', + y: 1.9, + text: 'Nuclear: 6,780 MW (1.9%)', + pointColor: null), + ChartSampleData( + x: 'Gas', y: 7, text: 'Gas: 24,937.22 MW (7.0%)', pointColor: null), + ChartSampleData( + x: 'Diesel', y: 0.2, text: 'Diesel: 637.63 MW (0.2%)', pointColor: null) ]; - return >[ - PieSeries<_PieData, String>( + return >[ + PieSeries( radius: '90%', - dataLabelMapper: (_PieData data, _) => data.xData, + dataLabelMapper: (ChartSampleData data, _) => data.x, dataLabelSettings: DataLabelSettings( isVisible: true, labelPosition: ChartDataLabelPosition.inside), dataSource: pieData, @@ -238,16 +83,8 @@ List> getPieSeries(bool isTileView) { endAngle: 90, groupMode: CircularChartGroupMode.value, groupTo: 7, - pointColorMapper: (_PieData data, _) => data.color, - xValueMapper: (_PieData data, _) => data.xData, - yValueMapper: (_PieData data, _) => data.yData) + pointColorMapper: (ChartSampleData data, _) => data.pointColor, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y) ]; } - -class _PieData { - _PieData(this.xData, this.yData, [this.text, this.color]); - final String xData; - final num yData; - final String text; - final Color color; -} diff --git a/lib/samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart b/lib/samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart index dc05e8e4..8d6352e2 100755 --- a/lib/samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart +++ b/lib/samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class PieSmartLabels extends StatefulWidget { - const PieSmartLabels(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + PieSmartLabels({this.sample, Key key}) : super(key: key); + SubItem sample; @override _PieSmartLabelsState createState() => _PieSmartLabelsState(sample); @@ -15,208 +14,40 @@ class PieSmartLabels extends StatefulWidget { class _PieSmartLabelsState extends State { _PieSmartLabelsState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(PieSmartLabels oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/pie_with_smart_labels.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getSmartLabelPieChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getSmartLabelPieChart(false), sample); } } SfCircularChart getSmartLabelPieChart(bool isTileView) { return SfCircularChart( title: ChartTitle(text: isTileView ? '' : 'Largest islands in the world'), - series: getPieSeries(isTileView), + series: gettSmartLabelPieSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getPieSeries(bool isTileView) { - final List<_PieData> chartData = <_PieData>[ - _PieData('Greenland', 2130800), - _PieData('New\nGuinea', 785753), - _PieData('Borneo', 743330), - _PieData('Madagascar', 587713), - _PieData('Baffin\nIsland', 507451), - _PieData('Sumatra', 443066), - _PieData('Honshu', 225800), - _PieData('Victoria\nIsland', 217291), +List> gettSmartLabelPieSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Greenland', y: 2130800), + ChartSampleData(x: 'New\nGuinea', y: 785753), + ChartSampleData(x: 'Borneo', y: 743330), + ChartSampleData(x: 'Madagascar', y: 587713), + ChartSampleData(x: 'Baffin\nIsland', y: 507451), + ChartSampleData(x: 'Sumatra', y: 443066), + ChartSampleData(x: 'Honshu', y: 225800), + ChartSampleData(x: 'Victoria\nIsland', y: 217291), ]; - return >[ - PieSeries<_PieData, String>( + return >[ + PieSeries( dataSource: chartData, - xValueMapper: (_PieData data, _) => data.xData, - yValueMapper: (_PieData data, _) => data.yData, - dataLabelMapper: (_PieData data, _) => data.xData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelMapper: (ChartSampleData data, _) => data.x, radius: '65%', startAngle: 80, endAngle: 80, @@ -227,10 +58,3 @@ List> getPieSeries(bool isTileView) { ConnectorLineSettings(type: ConnectorType.curve))) ]; } - -class _PieData { - _PieData(this.xData, this.yData, [this.text]); - final String xData; - final num yData; - final String text; -} diff --git a/lib/samples/chart/circular_charts/pie_series/pie_with_various_radius.dart b/lib/samples/chart/circular_charts/pie_series/pie_with_various_radius.dart index ae2595cf..6956066d 100755 --- a/lib/samples/chart/circular_charts/pie_series/pie_with_various_radius.dart +++ b/lib/samples/chart/circular_charts/pie_series/pie_with_various_radius.dart @@ -1,207 +1,24 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class PieRadius extends StatefulWidget { - const PieRadius(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + PieRadius({this.sample, Key key}) : super(key: key); + SubItem sample; @override _PieRadiusState createState() => _PieRadiusState(sample); } class _PieRadiusState extends State { - _PieRadiusState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(PieRadius oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + _PieRadiusState(this.sample); + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/pie_with_various_radius.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadiusPieChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadiusPieChart(false), sample); } } @@ -213,38 +30,31 @@ SfCircularChart getRadiusPieChart(bool isTileView) { legend: Legend( isVisible: isTileView ? false : true, overflowMode: LegendItemOverflowMode.wrap), - series: getPieSeries(isTileView), + series: _getRadiusPieSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getPieSeries(bool isTileView) { - final List<_PieData> chartData = <_PieData>[ - _PieData('Argentina', 505370, '45%'), - _PieData('Belgium', 551500, '53.7%'), - _PieData('Cuba', 312685, '59.6%'), - _PieData('Dominican Republic', 350000, '72.5%'), - _PieData('Egypt', 301000, '85.8%'), - _PieData('Kazakhstan', 300000, '90.5%'), - _PieData('Somalia', 357022, '95.6%') +List> _getRadiusPieSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Argentina', y: 505370, text: '45%'), + ChartSampleData(x: 'Belgium', y: 551500, text: '53.7%'), + ChartSampleData(x: 'Cuba', y: 312685, text: '59.6%'), + ChartSampleData(x: 'Dominican Republic', y: 350000, text: '72.5%'), + ChartSampleData(x: 'Egypt', y: 301000, text: '85.8%'), + ChartSampleData(x: 'Kazakhstan', y: 300000, text: '90.5%'), + ChartSampleData(x: 'Somalia', y: 357022, text: '95.6%') ]; - return >[ - PieSeries<_PieData, String>( + return >[ + PieSeries( dataSource: chartData, - xValueMapper: (_PieData data, _) => data.xData, - yValueMapper: (_PieData data, _) => data.yData, - dataLabelMapper: (_PieData data, _) => data.xData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelMapper: (ChartSampleData data, _) => data.x, startAngle: 100, endAngle: 100, - pointRadiusMapper: (_PieData data, _) => data.radius, + pointRadiusMapper: (ChartSampleData data, _) => data.text, dataLabelSettings: DataLabelSettings( isVisible: true, labelPosition: ChartDataLabelPosition.outside)) ]; } - -class _PieData { - _PieData(this.xData, this.yData, [this.radius]); - final String xData; - final num yData; - final String radius; -} diff --git a/lib/samples/chart/circular_charts/pie_series/semi_pie_chart.dart b/lib/samples/chart/circular_charts/pie_series/semi_pie_chart.dart index 9dc002a4..c2c90d21 100755 --- a/lib/samples/chart/circular_charts/pie_series/semi_pie_chart.dart +++ b/lib/samples/chart/circular_charts/pie_series/semi_pie_chart.dart @@ -1,15 +1,16 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/custom_button.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class PieSemi extends StatefulWidget { - const PieSemi(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + PieSemi({this.sample, Key key}) : super(key: key); + SubItem sample; @override _PieSemiState createState() => _PieSemiState(sample); @@ -17,95 +18,70 @@ class PieSemi extends StatefulWidget { class _PieSemiState extends State { _PieSemiState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(PieSemi oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - + final SubItem sample; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/pie_series/semi_pie_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, SemiPieFrontPanel(sample)); } } +SfCircularChart getSemiPieChart(bool isTileView, + [int startAngle, int endAngle]) { + return SfCircularChart( + centerY: '60%', + title: ChartTitle( + text: isTileView ? '' : 'Rural population of various countries'), + legend: Legend( + isVisible: isTileView ? false : true, + overflowMode: LegendItemOverflowMode.wrap), + series: getSemiPieSeries(isTileView, startAngle, endAngle), + tooltipBehavior: + TooltipBehavior(enable: true, format: 'point.x : point.y%'), + ); +} -class FrontPanel extends StatefulWidget { +List> getSemiPieSeries( + bool isTileView, int startAngle, int endAngle) { + final List chartData = [ + ChartSampleData(x:'Algeria', y:28), + ChartSampleData(x:'Australia', y:14), + ChartSampleData(x:'Bolivia', y:31), + ChartSampleData(x:'Cambodia', y:77), + ChartSampleData(x:'Canada', y:19), + ]; + return >[ + PieSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelMapper: (ChartSampleData data, _) => data.x, + startAngle: isTileView ? 270 : startAngle, + endAngle: isTileView ? 90 : endAngle, + dataLabelSettings: DataLabelSettings( + isVisible: true, labelPosition: ChartDataLabelPosition.inside)) + ]; +} + +class SemiPieFrontPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + SemiPieFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _SemiPieFrontPanelState createState() => _SemiPieFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _SemiPieFrontPanelState extends State { + _SemiPieFrontPanelState(this.sample); + final SubItem sample; int startAngle = 270; int endAngle = 90; @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -155,7 +131,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -165,9 +141,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -323,123 +299,3 @@ class _FrontPanelState extends State { } } -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCircularChart getSemiPieChart(bool isTileView, - [int startAngle, int endAngle]) { - return SfCircularChart( - centerY: '60%', - title: ChartTitle( - text: isTileView ? '' : 'Rural population of various countries'), - legend: Legend( - isVisible: isTileView ? false : true, - overflowMode: LegendItemOverflowMode.wrap), - series: getPieSeries(isTileView, startAngle, endAngle), - tooltipBehavior: - TooltipBehavior(enable: true, format: 'point.x : point.y%'), - ); -} - -List> getPieSeries( - bool isTileView, int startAngle, int endAngle) { - final List<_PieData> chartData = <_PieData>[ - _PieData('Algeria', 28), - _PieData('Australia', 14), - _PieData('Bolivia', 31), - _PieData('Cambodia', 77), - _PieData('Canada', 19), - ]; - return >[ - PieSeries<_PieData, String>( - dataSource: chartData, - xValueMapper: (_PieData data, _) => data.xData, - yValueMapper: (_PieData data, _) => data.yData, - dataLabelMapper: (_PieData data, _) => data.xData, - startAngle: isTileView ? 270 : startAngle, - endAngle: isTileView ? 90 : endAngle, - dataLabelSettings: DataLabelSettings( - isVisible: true, labelPosition: ChartDataLabelPosition.inside)) - ]; -} - -class _PieData { - _PieData(this.xData, this.yData, [this.radius]); - final String xData; - final num yData; - final String radius; -} diff --git a/lib/samples/chart/circular_charts/radialbar_series/customized_radialbar_chart.dart b/lib/samples/chart/circular_charts/radialbar_series/customized_radialbar_chart.dart index 81c5830e..1e591897 100755 --- a/lib/samples/chart/circular_charts/radialbar_series/customized_radialbar_chart.dart +++ b/lib/samples/chart/circular_charts/radialbar_series/customized_radialbar_chart.dart @@ -1,14 +1,13 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter/rendering.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class RadialBarCustomized extends StatefulWidget { - const RadialBarCustomized(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialBarCustomized({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RadialBarCustomizedState createState() => _RadialBarCustomizedState(sample); @@ -16,210 +15,45 @@ class RadialBarCustomized extends StatefulWidget { class _RadialBarCustomizedState extends State { _RadialBarCustomizedState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialBarCustomized oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/radialbar_series/customized_radialbar_chart.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getCustomizedRadialBarChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getCustomizedRadialBarChart(false), sample); } } SfCircularChart getCustomizedRadialBarChart(bool isTileView) { - final List<_RadialData> dataSources = <_RadialData>[ - _RadialData('Vehicle', 62.70, '10%', const Color.fromRGBO(69, 186, 161, 1.0)), - _RadialData('Education', 29.20, '10%', const Color.fromRGBO(230, 135, 111, 1.0)), - _RadialData('Home', 85.20, '100%', const Color.fromRGBO(145, 132, 202, 1.0)), - _RadialData('Personal', 45.70, '100%', const Color.fromRGBO(235, 96, 143, 1.0)) + final List dataSources = [ + ChartSampleData( + x: 'Vehicle', + y: 62.70, + text: '10%', + pointColor: const Color.fromRGBO(69, 186, 161, 1.0)), + ChartSampleData( + x: 'Education', + y: 29.20, + text: '10%', + pointColor: const Color.fromRGBO(230, 135, 111, 1.0)), + ChartSampleData( + x: 'Home', + y: 85.20, + text: '100%', + pointColor: const Color.fromRGBO(145, 132, 202, 1.0)), + ChartSampleData( + x: 'Personal', + y: 45.70, + text: '100%', + pointColor: const Color.fromRGBO(235, 96, 143, 1.0)) ]; - final List annotationSources =[ + final List annotationSources = + [ CircularChartAnnotation( angle: 0, radius: '0%', widget: Container( - child: Image.asset( + child: Image.asset( 'images/car_legend.png', width: 20, height: 20, @@ -231,7 +65,7 @@ SfCircularChart getCustomizedRadialBarChart(bool isTileView) { angle: 0, radius: '0%', widget: Container( - child: Image.asset( + child: Image.asset( 'images/book.png', width: 20, height: 20, @@ -243,26 +77,28 @@ SfCircularChart getCustomizedRadialBarChart(bool isTileView) { angle: 0, radius: '0%', widget: Container( - child: Image.asset('images/home.png', - width: 20, height: 20, color: const Color.fromRGBO(145, 132, 202, 1.0)), + child: Image.asset('images/home.png', + width: 20, + height: 20, + color: const Color.fromRGBO(145, 132, 202, 1.0)), ), ), CircularChartAnnotation( angle: 0, radius: '0%', widget: Container( - child: Image.asset( + child: Image.asset( 'images/personal_loan.png', width: 20, height: 20, - color: const Color.fromRGBO(235, 96, 143, 1.0), + color: const Color.fromRGBO(235, 96, 143, 1.0), ), ), ), ]; - const dynamic colors =[ - Color.fromRGBO(69, 186, 161, 1.0), + const dynamic colors = [ + Color.fromRGBO(69, 186, 161, 1.0), Color.fromRGBO(230, 135, 111, 1.0), Color.fromRGBO(145, 132, 202, 1.0), Color.fromRGBO(235, 96, 143, 1.0) @@ -286,24 +122,25 @@ SfCircularChart getCustomizedRadialBarChart(bool isTileView) { annotations: [ annotationSources[index], ], - series: >[ - RadialBarSeries<_RadialData, String>( + series: >[ + RadialBarSeries( animationDuration: 0, - dataSource: <_RadialData>[dataSources[index]], + dataSource: [dataSources[index]], maximumValue: 100, radius: '100%', cornerStyle: CornerStyle.bothCurve, - xValueMapper: (_RadialData data, _) => point.x, - yValueMapper: (_RadialData data, _) => data.yVal, - pointColorMapper: (_RadialData data, _) => data.color, + xValueMapper: (ChartSampleData data, _) => point.x, + yValueMapper: (ChartSampleData data, _) => data.y, + pointColorMapper: (ChartSampleData data, _) => + data.pointColor, innerRadius: '70%', - pointRadiusMapper: (_RadialData data, _) => - data.radius, + pointRadiusMapper: (ChartSampleData data, _) => + data.text ), ], )), Container( - width: 70, + width: 72, child: Text( point.x, style: TextStyle( @@ -320,9 +157,9 @@ SfCircularChart getCustomizedRadialBarChart(bool isTileView) { angle: 0, radius: '0%', height: '90%', - width:'90%', + width: '90%', widget: Container( - child: Image.asset( + child: Image.asset( 'images/person.png', height: 100.0, width: 100.0, @@ -333,15 +170,31 @@ SfCircularChart getCustomizedRadialBarChart(bool isTileView) { ); } -List> getRadialBarCustomizedSeries() { - final List<_RadialData> chartData = <_RadialData>[ - _RadialData('Vehicle', 62.70, '100%', const Color.fromRGBO(69, 186, 161, 1.0)), - _RadialData('Education', 29.20, '100%', const Color.fromRGBO(230, 135, 111, 1.0)), - _RadialData('Home', 85.20, '100%', const Color.fromRGBO(145, 132, 202, 1.0)), - _RadialData('Personal', 45.70, '100%', const Color.fromRGBO(235, 96, 143, 1.0)) +List> getRadialBarCustomizedSeries() { + final List chartData = [ + ChartSampleData( + x: 'Vehicle', + y: 62.70, + text: '100%', + pointColor: const Color.fromRGBO(69, 186, 161, 1.0)), + ChartSampleData( + x: 'Education', + y: 29.20, + text: '100%', + pointColor: const Color.fromRGBO(230, 135, 111, 1.0)), + ChartSampleData( + x: 'Home', + y: 85.20, + text: '100%', + pointColor: const Color.fromRGBO(145, 132, 202, 1.0)), + ChartSampleData( + x: 'Personal', + y: 45.70, + text: '100%', + pointColor: const Color.fromRGBO(235, 96, 143, 1.0)) ]; - return >[ - RadialBarSeries<_RadialData, String>( + return >[ + RadialBarSeries( animationDuration: 0, maximumValue: 100, gap: '10%', @@ -349,19 +202,11 @@ List> getRadialBarCustomizedSeries() { dataSource: chartData, cornerStyle: CornerStyle.bothCurve, innerRadius: '50%', - xValueMapper: (_RadialData data, _) => data.xVal, - yValueMapper: (_RadialData data, _) => data.yVal, - pointRadiusMapper: (_RadialData data, _) => data.radius, - pointColorMapper: (_RadialData data, _) => data.color, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + pointRadiusMapper: (ChartSampleData data, _) => data.text, + pointColorMapper: (ChartSampleData data, _) => data.pointColor, legendIconType: LegendIconType.circle, ), ]; } - -class _RadialData { - _RadialData(this.xVal, this.yVal, [this.radius, this.color]); - final String xVal; - final double yVal; - final String radius; - final Color color; -} diff --git a/lib/samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart b/lib/samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart index 602cfbbf..6f8c62ea 100755 --- a/lib/samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart +++ b/lib/samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class RadialBarDefault extends StatefulWidget { - const RadialBarDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialBarDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RadialBarDefaultState createState() => _RadialBarDefaultState(sample); @@ -15,193 +14,11 @@ class RadialBarDefault extends StatefulWidget { class _RadialBarDefaultState extends State { _RadialBarDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialBarDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/radialbar_series/default_radialbar_chart.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.informationIcon, - color: Colors.white), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultRadialBarChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultRadialBarChart(false), sample); } } @@ -214,16 +31,32 @@ SfCircularChart getDefaultRadialBarChart(bool isTileView) { ); } -List> getRadialBarDefaultSeries( +List> getRadialBarDefaultSeries( bool isTileView) { - final List<_RadialData> chartData = <_RadialData>[ - _RadialData('John', 10, '100%', const Color.fromRGBO(248, 177, 149, 1.0)), - _RadialData('Almaida', 11, '100%', const Color.fromRGBO(246, 114, 128, 1.0)), - _RadialData('Doe', 12, '100%', const Color.fromRGBO(61, 205, 171, 1.0)), - _RadialData('Tom', 13, '100%', const Color.fromRGBO(1, 174, 190, 1.0)), + final List chartData = [ + ChartSampleData( + x: 'John', + y: 10, + text: '100%', + pointColor: const Color.fromRGBO(248, 177, 149, 1.0)), + ChartSampleData( + x: 'Almaida', + y: 11, + text: '100%', + pointColor: const Color.fromRGBO(246, 114, 128, 1.0)), + ChartSampleData( + x: 'Doe', + y: 12, + text: '100%', + pointColor: const Color.fromRGBO(61, 205, 171, 1.0)), + ChartSampleData( + x: 'Tom', + y: 13, + text: '100%', + pointColor: const Color.fromRGBO(1, 174, 190, 1.0)), ]; - return >[ - RadialBarSeries<_RadialData, String>( + return >[ + RadialBarSeries( maximumValue: 15, dataLabelSettings: DataLabelSettings( isVisible: true, textStyle: ChartTextStyle(fontSize: 10.0)), @@ -231,18 +64,10 @@ List> getRadialBarDefaultSeries( cornerStyle: CornerStyle.bothCurve, gap: '10%', radius: '90%', - xValueMapper: (_RadialData data, _) => data.xVal, - yValueMapper: (_RadialData data, _) => data.yVal, - pointRadiusMapper: (_RadialData data, _) => data.radius, - pointColorMapper: (_RadialData data, _) => data.color, - dataLabelMapper: (_RadialData data, _) => data.xVal) + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + pointRadiusMapper: (ChartSampleData data, _) => data.text, + pointColorMapper: (ChartSampleData data, _) => data.pointColor, + dataLabelMapper: (ChartSampleData data, _) => data.x) ]; } - -class _RadialData { - _RadialData(this.xVal, this.yVal, [this.radius, this.color]); - final String xVal; - final double yVal; - final String radius; - final Color color; -} diff --git a/lib/samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart b/lib/samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart index dd7581e9..3aed6554 100755 --- a/lib/samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart +++ b/lib/samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart @@ -1,191 +1,24 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class RadialBarAngle extends StatefulWidget { - const RadialBarAngle(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialBarAngle({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RadialBarAngleState createState() => _RadialBarAngleState(sample); } class _RadialBarAngleState extends State { - _RadialBarAngleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialBarAngle oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + _RadialBarAngleState(this.sample); + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/circular_charts/radialbar_series/radialbar_with_legend.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getAngleRadialBarChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getAngleRadialBarChart(false), sample); } } @@ -193,7 +26,7 @@ SfCircularChart getAngleRadialBarChart(bool isTileView) { return SfCircularChart( title: ChartTitle(text: isTileView ? '' : 'Activity tracker'), legend: Legend( - isVisible: true, + isVisible: true, iconHeight: 20, iconWidth: 20, overflowMode: LegendItemOverflowMode.wrap), @@ -202,38 +35,43 @@ SfCircularChart getAngleRadialBarChart(bool isTileView) { ); } -List> getRadialBarSeries(bool isTileView) { - final List<_RadialData> chartData = <_RadialData>[ - _RadialData('Move 65%\n338/520 CAL', 65, 'Move ', null, - const Color.fromRGBO(0, 201, 230, 1.0)), - _RadialData('Exercise 43%\n13/30 MIN', 43, 'Exercise ', null, - const Color.fromRGBO(63, 224, 0, 1.0)), - _RadialData('Stand 58%\n7/12 HR', 58, 'Stand ', null, - const Color.fromRGBO(226, 1, 26, 1.0)), +List> getRadialBarSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData( + x: 'Move 65%\n338/520 CAL', + y: 65, + text: 'Move ', + xValue: null, + pointColor: const Color.fromRGBO(0, 201, 230, 1.0)), + ChartSampleData( + x: 'Exercise 43%\n13/30 MIN', + y: 43, + text: 'Exercise ', + xValue: null, + pointColor: const Color.fromRGBO(63, 224, 0, 1.0)), + ChartSampleData( + x: 'Stand 58%\n7/12 HR', + y: 58, + text: 'Stand ', + xValue: null, + pointColor: const Color.fromRGBO(226, 1, 26, 1.0)), ]; - final List> list = >[ - RadialBarSeries<_RadialData, String>( - pointRadiusMapper: (_RadialData data, _) => data.radius, + final List> list = + >[ + RadialBarSeries( + pointRadiusMapper: (ChartSampleData data, _) => data.xValue, maximumValue: 100, radius: '100%', gap: '2%', innerRadius: '30%', dataSource: chartData, cornerStyle: CornerStyle.bothCurve, - xValueMapper: (_RadialData data, _) => data.xVal, - yValueMapper: (_RadialData data, _) => data.yVal, - pointColorMapper: (_RadialData data, _) => data.color, - dataLabelMapper: (_RadialData data, _) => data.text, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + pointColorMapper: (ChartSampleData data, _) => data.pointColor, + dataLabelMapper: (ChartSampleData data, _) => data.text, dataLabelSettings: DataLabelSettings(isVisible: true)) ]; return list; } - -class _RadialData { - _RadialData(this.xVal, this.yVal, [this.text, this.radius, this.color]); - final String xVal; - final int yVal; - final String text; - final String radius; - final Color color; -} diff --git a/lib/samples/chart/circular_charts/user_interactions/selection/circular_selection.dart b/lib/samples/chart/circular_charts/user_interactions/selection/circular_selection.dart new file mode 100644 index 00000000..ff202f20 --- /dev/null +++ b/lib/samples/chart/circular_charts/user_interactions/selection/circular_selection.dart @@ -0,0 +1,189 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/checkbox.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; + +//ignore:must_be_immutable +class CircularSelection extends StatefulWidget { + CircularSelection({this.sample, Key key}) : super(key: key); + + SubItem sample; + + @override + _CircularSelectionState createState() => _CircularSelectionState(sample); +} + +class _CircularSelectionState extends State { + _CircularSelectionState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(null, sample, SelectionFrontPanel(sample)); + } +} + +SfCircularChart getCircularSelectionChart(bool isTileView, + [bool enableMultiSelect]) { + return SfCircularChart( + title: ChartTitle( + text: isTileView ? '' : 'Age distribution by country - 5 to 50 years'), + selectionGesture: ActivationMode.singleTap, + enableMultiSelection: enableMultiSelect, + series: getCircularSelectionSeries(isTileView), + ); +} + +List> getCircularSelectionSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'CHN', y: 17, yValue2: 54, yValue3: 9, text: 'CHN : 54M'), + ChartSampleData(x: 'USA', y: 19, yValue2: 67, yValue3: 14, text: 'USA : 67M'), + ChartSampleData(x: 'IDN', y: 29, yValue2: 65, yValue3: 6, text: 'IDN : 65M'), + ChartSampleData(x: 'JAP', y: 13, yValue2: 61, yValue3: 26, text: 'JAP : 61M'), + ChartSampleData(x: 'BRZ', y: 24, yValue2: 68, yValue3: 8, text: 'BRZ : 68M') + ]; + return >[ + PieSeries( + dataSource: chartData, + radius: '70%', + startAngle: 30, + endAngle: 30, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, + dataLabelMapper: (ChartSampleData sales, _) => sales.text, + dataLabelSettings: DataLabelSettings( + isVisible: true, labelPosition: isTileView ? ChartDataLabelPosition.outside : ChartDataLabelPosition.inside), + selectionSettings: + SelectionSettings(enable: true, unselectedOpacity: 0.5), + ) + ]; +} + +class SelectionFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + SelectionFrontPanel(this.subItemList); + + final SubItem subItemList; + + @override + _SelectionFrontPanelState createState() => + _SelectionFrontPanelState(subItemList); +} + +class _SelectionFrontPanelState extends State { + _SelectionFrontPanelState(this.sample); + final SubItem sample; + bool enableMultiSelect = false; + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getCircularSelectionChart(false, enableMultiSelect)), + ), + floatingActionButton: FloatingActionButton( + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, + )); + }); + } + + void _showSettingsPanel(SampleModel model) { + final double height = + (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) + ? 0.3 + : 0.4; + showRoundedModalBottomSheet( + dismissOnTap: false, + context: context, + radius: 12.0, + color: model.bottomSheetBackgroundColor, + builder: (BuildContext context) => ScopedModelDescendant( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 120, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: MediaQuery.of(context).size.height * height, + child: Padding( + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack( + children: [ + Container( + height: 40, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + Padding( + padding: + const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: ListView( + children: [ + Container( + child: Row( + children: [ + Text('Enable multi-selection ', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: + FontWeight.normal)), + BottomSheetCheckbox( + activeColor: model.backgroundColor, + switchValue: enableMultiSelect, + valueChanged: (dynamic value) { + setState(() { + enableMultiSelect = value; + }); + }, + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + )), + )))); + } +} diff --git a/lib/samples/chart/circular_charts/user_interactions/tooltip/pie_tooltip_position.dart b/lib/samples/chart/circular_charts/user_interactions/tooltip/pie_tooltip_position.dart new file mode 100644 index 00000000..2e9a7c0b --- /dev/null +++ b/lib/samples/chart/circular_charts/user_interactions/tooltip/pie_tooltip_position.dart @@ -0,0 +1,368 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:flutter_examples/widgets/custom_button.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; + +//ignore: must_be_immutable +class PieTooltipPosition extends StatefulWidget { + PieTooltipPosition({this.sample, Key key}) : super(key: key); + + SubItem sample; + + @override + _PieTooltipPositionState createState() => _PieTooltipPositionState(sample); +} + +class _PieTooltipPositionState extends State { + _PieTooltipPositionState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(null, sample, TooltipPositioningPanel(sample)); + } +} + +dynamic getPieTooltipPositionChart(bool isTileView, + [String chartType, TooltipPosition _tooltipPosition, double duration]) { + dynamic _chart; + if (chartType == 'column') + _chart = SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Age distribution'), + tooltipBehavior: TooltipBehavior( + enable: true, + tooltipPosition: _tooltipPosition, + duration: duration * 1000, + canShowMarker: false), + primaryXAxis: CategoryAxis( + title: AxisTitle(text: isTileView ? '' : 'Years'), + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + labelFormat: '{value}M', + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: _getCartesianSeries(isTileView), + ); + else + _chart = SfCircularChart( + title: ChartTitle( + text: isTileView + ? '' + : 'Various countries population density and area'), + legend: Legend( + isVisible: isTileView ? false : true, + overflowMode: LegendItemOverflowMode.wrap), + series: _getPieSeries(isTileView), + tooltipBehavior: TooltipBehavior( + enable: true, + tooltipPosition: _tooltipPosition, + duration: (duration == null ? 2.0 : duration) * 1000, + ), + ); + return _chart; +} + +final List<_ChartData> chartData = <_ChartData>[ + _ChartData( + 'CHN', + 54, + const Color.fromRGBO(53, 92, 125, 1), + ), + _ChartData( + 'USA', + 67, + const Color.fromRGBO(192, 108, 132, 1), + ), + _ChartData( + 'IDN', + 65, + const Color.fromRGBO(246, 114, 128, 1), + ), + _ChartData('JAP', 61, const Color.fromRGBO(248, 177, 149, 1)), + _ChartData('BRAZ', 68, const Color.fromRGBO(116, 180, 155, 1)) +]; +List> _getCartesianSeries(bool isTileView) { + return >[ + ColumnSeries<_ChartData, String>( + dataSource: chartData, + pointColorMapper: (_ChartData sales, _) => sales.color, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.y1, + ), + ]; +} + +List> _getPieSeries(bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Argentina', y: 505370, text: '45%'), + ChartSampleData(x: 'Belgium', y: 551500, text: '53.7%'), + ChartSampleData(x: 'Cuba', y: 312685, text: '59.6%'), + ChartSampleData(x: 'Dominican Republic', y: 350000, text: '72.5%'), + ChartSampleData(x: 'Egypt', y: 301000, text: '85.8%'), + ChartSampleData(x: 'Kazakhstan', y: 300000, text: '90.5%'), + ChartSampleData(x: 'Somalia', y: 357022, text: '95.6%') + ]; + return >[ + PieSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelMapper: (ChartSampleData data, _) => data.x, + startAngle: 100, + endAngle: 100, + pointRadiusMapper: (ChartSampleData data, _) => data.text, + dataLabelSettings: DataLabelSettings( + isVisible: true, labelPosition: ChartDataLabelPosition.outside)) + ]; +} + +class _ChartData { + _ChartData(this.x, this.y1, [this.color]); + final String x; + final double y1; + final Color color; +} + +class TooltipPositioningPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + TooltipPositioningPanel(this.sampleList); + final SubItem sampleList; + + @override + _TooltipPositioningPanelState createState() => + _TooltipPositioningPanelState(sampleList); +} + +class _TooltipPositioningPanelState extends State { + _TooltipPositioningPanelState(this.sample); + final SubItem sample; + + // final List _modeList = + // ['column', 'pie'].toList(); + String _selectedChartType = 'pie'; + + String _chartType = 'pie'; + + final List _tooltipPositionList = + ['auto', 'pointer'].toList(); + String _selectedTooltipPosition = 'auto'; + TooltipPosition _tooltipPosition = TooltipPosition.auto; + double duration = 2; + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getPieTooltipPositionChart( + false, _chartType, _tooltipPosition, duration)), + ), + floatingActionButton: FloatingActionButton( + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, + )); + }); + } + + void onPositionTypeChange(String item, SampleModel model) { + setState(() { + _selectedTooltipPosition = item; + if (_selectedTooltipPosition == 'auto') { + _tooltipPosition = TooltipPosition.auto; + } + if (_selectedTooltipPosition == 'pointer') { + _tooltipPosition = TooltipPosition.pointer; + } + }); + } + + void _showSettingsPanel(SampleModel model) { + final double height = + (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) + ? 0.3 + : 0.4; + showRoundedModalBottomSheet( + dismissOnTap: false, + context: context, + radius: 12.0, + color: model.bottomSheetBackgroundColor, + builder: (BuildContext context) => ScopedModelDescendant( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 170, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: MediaQuery.of(context).size.height * height, + child: Padding( + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack( + children: [ + Container( + height: 40, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + Padding( + padding: + const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: ListView( + children: [ + Container( + child: Row( + children: [ + Text('Tooltip position ', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: + FontWeight.normal)), + Container( + padding: + const EdgeInsets.fromLTRB( + 20, 0, 0, 0), + height: 50, + width: 150, + child: Align( + alignment: + Alignment.bottomCenter, + child: Theme( + data: Theme.of(context).copyWith( + canvasColor: model + .bottomSheetBackgroundColor), + child: DropDown( + value: + _selectedTooltipPosition, + item: _tooltipPositionList + .map((String value) { + return DropdownMenuItem< + String>( + value: + (value != null) + ? value + : 'auto', + child: Text( + '$value', + style: TextStyle( + color: model + .textColor))); + }).toList(), + valueChanged: + (dynamic value) { + onPositionTypeChange( + value.toString(), + model); + }), + ), + )) + ], + ), + ), + Container( + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Text('Hide delay ', + style: TextStyle( + fontSize: 16.0, + color: model.textColor)), + Container( + child: Padding( + padding: + const EdgeInsets.fromLTRB( + 40, 0, 0, 0), + child: CustomButton( + minValue: 1, + maxValue: 10, + initialValue: duration, + onChanged: (dynamic val) => + setState(() { + duration = val; + }), + step: 2, + horizontal: true, + loop: true, + padding: 0, + iconUp: Icons.keyboard_arrow_up, + iconDown: + Icons.keyboard_arrow_down, + iconLeft: + Icons.keyboard_arrow_left, + iconRight: + Icons.keyboard_arrow_right, + iconUpRightColor: + model.textColor, + iconDownLeftColor: + model.textColor, + style: TextStyle( + fontSize: 20.0, + color: model.textColor), + ), + ), + ), + ], + ), + ), + ], + ), + ), + ], + ), + ), + )), + )))); + } + + void onChartTypeChange(String item, SampleModel model) { + setState(() { + _selectedChartType = item; + if (_selectedChartType == 'column') { + _chartType = 'column'; + } + if (_selectedChartType == 'pie') { + _chartType = 'pie'; + } + // ignore: invalid_use_of_protected_member + model.notifyListeners(); + }); + } +} diff --git a/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart b/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart index c09e17bf..7df49e52 100755 --- a/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart +++ b/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart @@ -1,148 +1,106 @@ import 'dart:math'; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +//ignore: must_be_immutable class AddDataPoints extends StatefulWidget { - const AddDataPoints(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + AddDataPoints({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _LiveVerticalState createState() => _LiveVerticalState(sample); } -List<_ChartData> chartData = chartData = <_ChartData>[ - _ChartData(0, 10), - _ChartData(1, 13), - _ChartData(2, 80), - _ChartData(3, 30), - _ChartData(4, 72), - _ChartData(5, 19), - _ChartData(6, 30), - _ChartData(7, 92), - _ChartData(8, 48), - _ChartData(9, 20), - _ChartData(10, 51), +List chartData = chartData = [ + ChartSampleData(x: 0, y: 10), + ChartSampleData(x: 1, y: 13), + ChartSampleData(x: 2, y: 80), + ChartSampleData(x: 3, y: 30), + ChartSampleData(x: 4, y: 72), + ChartSampleData(x: 5, y: 19), + ChartSampleData(x: 6, y: 30), + ChartSampleData(x: 7, y: 92), + ChartSampleData(x: 8, y: 48), + ChartSampleData(x: 9, y: 20), + ChartSampleData(x: 10, y: 51), ]; int count = 11; class _LiveVerticalState extends State { _LiveVerticalState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - + final SubItem sample; + @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, DynamicPointFrontPanel(sample)); } +} - @override - void didUpdateWidget(AddDataPoints oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getAddRemovePointsChart(bool isTileView,[List chartData]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + primaryXAxis: NumericAxis( + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), + series: getAddRemovePointSeries(chartData), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_points.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List chartData1 = [ + ChartSampleData(x: 0, y: 10), + ChartSampleData(x: 1, y: 13), + ChartSampleData(x: 2, y: 80), + ChartSampleData(x: 3, y: 30), + ChartSampleData(x: 4, y: 72), + ChartSampleData(x: 5, y: 19), + ChartSampleData(x: 6, y: 30), + ChartSampleData(x: 7, y: 92), + ChartSampleData(x: 8, y: 48), + ChartSampleData(x: 9, y: 20), + ChartSampleData(x: 10, y: 51), +]; +List> getAddRemovePointSeries( + List chartData) { + return >[ + LineSeries( + dataSource: chartData ?? chartData1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + width: 2), + ]; } -class FrontPanel extends StatefulWidget { +class DynamicPointFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - + DynamicPointFrontPanel(this.subItemList); + final SubItem subItemList; + @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _DynamicPointFrontPanelState createState() => + _DynamicPointFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _DynamicPointFrontPanelState extends State { + _DynamicPointFrontPanelState(this.sample); + final SubItem sample; num getRandomInt(num min, num max) { final Random random = Random(); return min + random.nextInt(max - min); } - List<_ChartData> getChartData(SampleListModel model) { - chartData.add(_ChartData(count, getRandomInt(10, 100))); + List getChartData(SampleModel model) { + chartData.add(ChartSampleData(x: count, y: getRandomInt(10, 100))); count = count + 1; return chartData; } - List<_ChartData> getChartData1(SampleListModel model) { + List getChartData1(SampleModel model) { // ignore: invalid_use_of_protected_member if (chartData != null && chartData.isNotEmpty) chartData.removeAt(chartData.length - 1); @@ -157,14 +115,14 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getAddRemovePointsChart(chartData)), + child: Container(child: getAddRemovePointsChart(false,chartData)), ), floatingActionButton: Stack(children: [ Align( @@ -181,8 +139,8 @@ class _FrontPanelState extends State { icon: Icon(Icons.add_circle, size: 50, color: model.backgroundColor), onPressed: () => setState(() { - chartData = getChartData(model); - }), + chartData = getChartData(model); + }), ), Padding( padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), @@ -190,8 +148,8 @@ class _FrontPanelState extends State { icon: Icon(Icons.remove_circle, size: 50, color: model.backgroundColor), onPressed: () => setState(() { - chartData = getChartData1(model); - }), + chartData = getChartData1(model); + }), ), ) ], @@ -204,121 +162,3 @@ class _FrontPanelState extends State { }); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getAddRemovePointsChart([List<_ChartData> chartData]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - primaryXAxis: NumericAxis( - majorGridLines: MajorGridLines(width: 0), - edgeLabelPlacement: EdgeLabelPlacement.shift), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(chartData), - ); -} - -List<_ChartData> chartData1 = <_ChartData>[ - _ChartData(0, 10), - _ChartData(1, 13), - _ChartData(2, 80), - _ChartData(3, 30), - _ChartData(4, 72), - _ChartData(5, 19), - _ChartData(6, 30), - _ChartData(7, 92), - _ChartData(8, 48), - _ChartData(9, 20), - _ChartData(10, 51), -]; -List> getLineSeries(List<_ChartData> chartData) { - return >[ - LineSeries<_ChartData, num>( - dataSource: chartData ?? chartData1, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, - width: 2), - ]; -} - -class _ChartData { - _ChartData(this.country, this.sales); - final num country; - final int sales; -} diff --git a/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart b/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart index 3f38840c..e71d95a8 100755 --- a/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart +++ b/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart @@ -1,173 +1,129 @@ import 'dart:math'; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +//ignore: must_be_immutable class AddSeries extends StatefulWidget { - const AddSeries(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + AddSeries({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _LiveVerticalState createState() => _LiveVerticalState(sample); } -List<_ChartData> chartData = <_ChartData>[ - _ChartData(0, 10), - _ChartData(1, 13), - _ChartData(2, 20), - _ChartData(3, 10), - _ChartData(4, 32), - _ChartData(5, 19) +List chartData = [ + ChartSampleData(x:0, y:10), + ChartSampleData(x:1, y:13), + ChartSampleData(x:2, y:20), + ChartSampleData(x:3, y:10), + ChartSampleData(x:4, y:32), + ChartSampleData(x:5, y:19) ]; -List> series = >[ - LineSeries<_ChartData, int>( +List> series = + >[ + LineSeries( dataSource: chartData, width: 2, enableTooltip: true, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, ), - LineSeries<_ChartData, int>( - dataSource: <_ChartData>[ - _ChartData(0, 22), - _ChartData(1, 22), - _ChartData(2, 53), - _ChartData(3, 28), - _ChartData(4, 39), - _ChartData(5, 48) + LineSeries( + dataSource: [ + ChartSampleData(x:0,y: 22), + ChartSampleData(x:1, y:22), + ChartSampleData(x:2, y:53), + ChartSampleData(x:3, y:28), + ChartSampleData(x:4, y:39), + ChartSampleData(x:5, y:48) ], width: 2, enableTooltip: true, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, ), ]; int count = 0; class _LiveVerticalState extends State { _LiveVerticalState(this.sample); - final SubItemList sample; + final SubItem sample; bool panelOpen; final ValueNotifier frontPanelVisible = ValueNotifier(true); - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(AddSeries oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 50, - frontHeader: Container( - color: Colors.transparent, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: [ - Row( - children: const [], - ), - ], - )), - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/add_remove_data/add_remove_series.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, DynamicSeriesFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { +SfCartesianChart getAddRemoveSeriesChart(bool isTileView) { + final List> defaultSeries = + >[ + LineSeries( + dataSource: [ + ChartSampleData(x:0,y: 10), + ChartSampleData(x:1, y:13), + ChartSampleData(x:2, y:20), + ChartSampleData(x:3, y:10), + ChartSampleData(x:4, y:32), + ChartSampleData(x:5, y:19) + ], + width: 2, + enableTooltip: true, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + ), + LineSeries( + dataSource: [ + ChartSampleData(x:0, y:22), + ChartSampleData(x:1,y: 22), + ChartSampleData(x:2, y:53), + ChartSampleData(x:3, y:28), + ChartSampleData(x:4, y:39), + ChartSampleData(x:5, y:48) + ], + width: 2, + enableTooltip: true, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + ) + ]; + return SfCartesianChart( + plotAreaBorderWidth: 0, + primaryXAxis: NumericAxis( + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), + series: isTileView ? defaultSeries : series, + ); +} + + +class DynamicSeriesFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + DynamicSeriesFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _DynamicSeriesFrontPanelState createState() => _DynamicSeriesFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _DynamicSeriesFrontPanelState extends State { + _DynamicSeriesFrontPanelState(this.sample); + final SubItem sample; num getRandomInt(num min, num max) { final Random random = Random(); return min + random.nextInt(max - min); } - void getSeries1(SampleListModel model) { + void getSeries1(SampleModel model) { //ignore: invalid_use_of_protected_member model.notifyListeners(); if (series != null && series.isNotEmpty){ @@ -175,15 +131,15 @@ class _FrontPanelState extends State { } } - void getSeries(SampleListModel model) { - final List<_ChartData> chartData1 = <_ChartData>[]; + void getSeries(SampleModel model) { + final List chartData1 = []; for (int i = 0; i <= 6; i++) { - chartData1.add(_ChartData(i, getRandomInt(10, 50))); + chartData1.add(ChartSampleData(x:i, y:getRandomInt(10, 50))); } - series.add(LineSeries<_ChartData, int>( + series.add(LineSeries( dataSource: chartData1, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, )); count++; if (count == 8) { @@ -195,9 +151,9 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -242,130 +198,4 @@ class _FrontPanelState extends State { ])); }); } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getAddRemoveSeriesChart(bool isTileView) { - final List> defaultSeries = - >[ - LineSeries<_ChartData, int>( - dataSource: <_ChartData>[ - _ChartData(0, 10), - _ChartData(1, 13), - _ChartData(2, 20), - _ChartData(3, 10), - _ChartData(4, 32), - _ChartData(5, 19) - ], - width: 2, - enableTooltip: true, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, - ), - LineSeries<_ChartData, int>( - dataSource: <_ChartData>[ - _ChartData(0, 22), - _ChartData(1, 22), - _ChartData(2, 53), - _ChartData(3, 28), - _ChartData(4, 39), - _ChartData(5, 48) - ], - width: 2, - enableTooltip: true, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, - ) - ]; - return SfCartesianChart( - plotAreaBorderWidth: 0, - primaryXAxis: NumericAxis( - majorGridLines: MajorGridLines(width: 0), - edgeLabelPlacement: EdgeLabelPlacement.shift), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: isTileView ? defaultSeries : series, - ); -} - -class _ChartData { - _ChartData(this.country, this.sales); - final num country; - final int sales; -} +} \ No newline at end of file diff --git a/lib/samples/chart/dynamic_updates/live_update/live_update.dart b/lib/samples/chart/dynamic_updates/live_update/live_update.dart deleted file mode 100755 index 946413d1..00000000 --- a/lib/samples/chart/dynamic_updates/live_update/live_update.dart +++ /dev/null @@ -1,314 +0,0 @@ -import 'dart:async'; -import 'dart:math' as math; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -class LiveUpdate extends StatefulWidget { - const LiveUpdate(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _LiveUpdateState createState() => _LiveUpdateState(sample); -} - -Timer timer; - -List<_ChartData> chartData1 = <_ChartData>[ - _ChartData(0, 0), - _ChartData(1, -2), - _ChartData(2, 2), - _ChartData(3, 0) -]; -List<_ChartData> chartData2 = <_ChartData>[ - _ChartData(0, 0), - _ChartData(1, 2), - _ChartData(2, -2), - _ChartData(3, 0) -]; -bool canStopTimer = false; -int wave1; -int wave2, count = 1; - -class _LiveUpdateState extends State { - _LiveUpdateState(this.sample); - Timer timer; - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - chartData1 = <_ChartData>[ - _ChartData(0, 0), - ]; - chartData2 = <_ChartData>[ - _ChartData(0, 0), - ]; - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - // timer.cancel(); - super.dispose(); - } - - @override - void didUpdateWidget(LiveUpdate oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/live_update/live_update.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample) { - wave1 = 0; - wave2 = 180; - if (chartData1.isNotEmpty && chartData2.isNotEmpty) { - chartData1.clear(); - chartData2.clear(); - } - updateLiveData(); - timer = Timer.periodic(const Duration(milliseconds: 2), updateData); - } - - Timer timer; - - @override - void dispose() { - timer.cancel(); - super.dispose(); - } - - final SubItemList sample; - - void updateData(Timer timer) { - setState(() { - chartData1.removeAt(0); - chartData1.add(_ChartData( - wave1, - math.sin(wave1 * (math.pi / 180.0)), - )); - chartData2.removeAt(0); - chartData2.add(_ChartData( - wave1, - math.sin(wave2 * (math.pi / 180.0)), - )); - wave1++; - wave2++; - }); - } - - void updateLiveData() { - for (int i = 0; i < 180; i++) { - chartData1.add(_ChartData(i, math.sin(wave1 * (math.pi / 180.0)))); - wave1++; - } - - for (int i = 0; i < 180; i++) { - chartData2.add(_ChartData(i, math.sin(wave2 * (math.pi / 180.0)))); - wave2++; - } - - wave1 = chartData1.length; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getLiveUpdateChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -void updateLiveData() { - for (int i = 0; i < 180; i++) { - chartData1.add(_ChartData(i, math.sin(wave1 * (math.pi / 180.0)))); - wave1++; - } - - for (int i = 0; i < 180; i++) { - chartData2.add(_ChartData(i, math.sin(wave2 * (math.pi / 180.0)))); - wave2++; - } - - wave1 = chartData1.length; -} - -SfCartesianChart getLiveUpdateChart(bool isTileView) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getSplineSeries(false), - ); -} - -List> getSplineSeries(bool isTileView) { - return >[ - SplineSeries<_ChartData, num>( - dataSource: chartData1, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, - width: 2), - SplineSeries<_ChartData, num>( - dataSource: chartData2, - width: 2, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, - ) - ]; -} - -class _ChartData { - _ChartData(this.country, this.sales); - final num country; - final double sales; -} diff --git a/lib/samples/chart/dynamic_updates/live_update/real_time_line_chart.dart b/lib/samples/chart/dynamic_updates/live_update/real_time_line_chart.dart new file mode 100644 index 00000000..280ca638 --- /dev/null +++ b/lib/samples/chart/dynamic_updates/live_update/real_time_line_chart.dart @@ -0,0 +1,168 @@ +import 'dart:async'; +import 'dart:math' as math; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +Timer timer; + +//ignore: must_be_immutable +class LiveLineChart extends StatefulWidget { + LiveLineChart({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _LiveLineChartState createState() => _LiveLineChartState(sample); +} + +class _LiveLineChartState extends State { + _LiveLineChartState(this.sample); + final SubItem sample; + + + @override + void dispose() { + super.dispose(); + timer?.cancel(); + } + + @override + void initState() { + super.initState(); + } + + @override + Widget build(BuildContext context) { + return getScopedModel(null, sample, FrontPanel(sample)); + } +} + + +SfCartesianChart getLiveLineChart(bool isTileView, + [List<_ChartData> chartData]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: >[ + LineSeries<_ChartData, int>( + dataSource: isTileView + ? <_ChartData>[ + _ChartData(0, 42), + _ChartData(1, 47), + _ChartData(2, 33), + _ChartData(3, 49), + _ChartData(4, 54), + _ChartData(5, 41), + _ChartData(6, 58), + _ChartData(7, 51), + _ChartData(8, 98), + _ChartData(9, 41), + _ChartData(10, 53), + _ChartData(11, 72), + _ChartData(12, 86), + _ChartData(13, 52), + _ChartData(14, 94), + _ChartData(15, 92), + _ChartData(16, 86), + _ChartData(17, 72), + _ChartData(18, 94), + ] + : chartData, + color: const Color.fromRGBO(192, 108, 132, 1), + xValueMapper: (_ChartData sales, _) => sales.country, + yValueMapper: (_ChartData sales, _) => sales.sales, + animationDuration: 0, + dataLabelSettings: DataLabelSettings( + isVisible: false, labelAlignment: ChartDataLabelAlignment.top), + ) + ]); +} + + +class FrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + FrontPanel(this.subItemList); + final SubItem subItemList; + + @override + _FrontPanelState createState() => _FrontPanelState(subItemList); +} + +class _FrontPanelState extends State { + _FrontPanelState(this.sample) { + timer = Timer.periodic(const Duration(milliseconds: 100), updateDataSource); + } + Timer timer; + List<_ChartData> chartData = <_ChartData>[ + _ChartData(0, 42), + _ChartData(1, 47), + _ChartData(2, 33), + _ChartData(3, 49), + _ChartData(4, 54), + _ChartData(5, 41), + _ChartData(6, 58), + _ChartData(7, 51), + _ChartData(8, 98), + _ChartData(9, 41), + _ChartData(10, 53), + _ChartData(11, 72), + _ChartData(12, 86), + _ChartData(13, 52), + _ChartData(14, 94), + _ChartData(15, 92), + _ChartData(16, 86), + _ChartData(17, 72), + _ChartData(18, 94), + ]; + final SubItem sample; + + int count = 19; + void updateDataSource(Timer timer) { + setState(() { + chartData.add(_ChartData(count, getRandomInt(10, 100))); + + if (chartData.length == 20) { + chartData.removeAt(0); + } + + count = count + 1; + }); + } + + num getRandomInt(num min, num max) { + final math.Random random = math.Random(); + return min + random.nextInt(max - min); + } + + @override + void dispose() { + timer?.cancel(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getLiveLineChart(false, chartData)), + )); + }); + } +} + + +class _ChartData { + _ChartData(this.country, this.sales); + final num country; + final num sales; +} diff --git a/lib/samples/chart/dynamic_updates/live_update/real_time_spline_chart.dart b/lib/samples/chart/dynamic_updates/live_update/real_time_spline_chart.dart new file mode 100644 index 00000000..94b7d63a --- /dev/null +++ b/lib/samples/chart/dynamic_updates/live_update/real_time_spline_chart.dart @@ -0,0 +1,180 @@ +import 'dart:async'; +import 'dart:math' as math; +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; + + +//ignore: must_be_immutable +class LiveUpdate extends StatefulWidget { + LiveUpdate({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _LiveUpdateState createState() => _LiveUpdateState(sample); +} + +Timer timer; + +List chartData1 = [ + ChartSampleData(x:0, y:0), + ChartSampleData(x:1, y:-2), + ChartSampleData(x:2, y:2), + ChartSampleData(x:3, y:0) +]; +List chartData2 = [ + ChartSampleData(x:0, y:0), + ChartSampleData(x:1, y:2), + ChartSampleData(x:2, y:-2), + ChartSampleData(x:3, y:0) +]; +bool canStopTimer = false; +int wave1; +int wave2, count = 1; + +class _LiveUpdateState extends State { + _LiveUpdateState(this.sample); + Timer timer; + final SubItem sample; + + @override + void initState() { + chartData1 = [ + ChartSampleData(x: 0, y: 0), + ]; + chartData2 = [ + ChartSampleData(x: 0, y: 0), + ]; + super.initState(); + } + + @override + void dispose() { + timer?.cancel(); + super.dispose(); + } + + @override + Widget build(BuildContext context) { + return getScopedModel(null, sample, LiveHorizontalFrontPanel(sample)); + } +} + +SfCartesianChart getLiveUpdateChart(bool isTileView) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), + series: getLiveUpdateSeries(false), + ); +} + +List> getLiveUpdateSeries(bool isTileView) { + return >[ + SplineSeries( + dataSource: chartData1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + width: 2), + SplineSeries( + dataSource: chartData2, + width: 2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + ) + ]; +} + +class LiveHorizontalFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + LiveHorizontalFrontPanel(this.subItemList); + final SubItem subItemList; + + @override + _LiveHorizontalFrontPanelState createState() => _LiveHorizontalFrontPanelState(subItemList); +} + +class _LiveHorizontalFrontPanelState extends State { + _LiveHorizontalFrontPanelState(this.sample) { + wave1 = 0; + wave2 = 180; + if (chartData1.isNotEmpty && chartData2.isNotEmpty) { + chartData1.clear(); + chartData2.clear(); + } + updateLiveData(); + timer = Timer.periodic(const Duration(milliseconds: 2), updateData); + } + + Timer timer; + + @override + void dispose() { + timer?.cancel(); + super.dispose(); + } + + final SubItem sample; + + void updateData(Timer timer) { + setState(() { + chartData1.removeAt(0); + chartData1.add(ChartSampleData(x: + wave1, + y: math.sin(wave1 * (math.pi / 180.0)), + )); + chartData2.removeAt(0); + chartData2.add(ChartSampleData(x: + wave1, + y:math.sin(wave2 * (math.pi / 180.0)), + )); + wave1++; + wave2++; + }); + } + + void updateLiveData() { + for (int i = 0; i < 180; i++) { + chartData1.add(ChartSampleData(x:i, y:math.sin(wave1 * (math.pi / 180.0)))); + wave1++; + } + + for (int i = 0; i < 180; i++) { + chartData2.add(ChartSampleData(x:i, y:math.sin(wave2 * (math.pi / 180.0)))); + wave2++; + } + + wave1 = chartData1.length; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getLiveUpdateChart(false)), + )); + }); + } +} + +void updateLiveData() { + for (int i = 0; i < 180; i++) { + chartData1.add(ChartSampleData(x:i, y:math.sin(wave1 * (math.pi / 180.0)))); + wave1++; + } + + for (int i = 0; i < 180; i++) { + chartData2.add(ChartSampleData(x:i,y: math.sin(wave2 * (math.pi / 180.0)))); + wave2++; + } + + wave1 = chartData1.length; +} diff --git a/lib/samples/chart/dynamic_updates/live_update/vertical_live_chart.dart b/lib/samples/chart/dynamic_updates/live_update/vertical_live_chart.dart index 03d01e43..ec891dc4 100755 --- a/lib/samples/chart/dynamic_updates/live_update/vertical_live_chart.dart +++ b/lib/samples/chart/dynamic_updates/live_update/vertical_live_chart.dart @@ -1,15 +1,15 @@ import 'dart:async'; import 'dart:math'; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +//ignore: must_be_immutable class VerticalLineLiveUpdate extends StatefulWidget { - const VerticalLineLiveUpdate(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + VerticalLineLiveUpdate({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LiveUpdateState createState() => _LiveUpdateState(sample); @@ -17,106 +17,79 @@ class VerticalLineLiveUpdate extends StatefulWidget { int count; -List<_ChartData> chartData = <_ChartData>[ - _ChartData(10, 0), - _ChartData(9, 0), - _ChartData(8, 0), - _ChartData(7, 4), - _ChartData(6, -3), - _ChartData(5, 0), - _ChartData(4, -2), - _ChartData(3, 2), - _ChartData(2, -3), - _ChartData(1, 3), - _ChartData(0, -4), +List chartData = [ + ChartSampleData(x:10,y: 0), + ChartSampleData(x:9, y:0), + ChartSampleData(x:8, y:0), + ChartSampleData(x:7, y:4), + ChartSampleData(x:6, y:-3), + ChartSampleData(x:5, y:0), + ChartSampleData(x:4, y:-2), + ChartSampleData(x:3, y:2), + ChartSampleData(x:2, y:-3), + ChartSampleData(x:1, y:3), + ChartSampleData(x:0, y:-4), ]; Timer timer; class _LiveUpdateState extends State { _LiveUpdateState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - + final SubItem sample; + @override void initState() { - chartData = <_ChartData>[ - _ChartData(0, 0), + chartData = [ + ChartSampleData(x:0, y:0), ]; - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); super.initState(); } - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(VerticalLineLiveUpdate oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/live_update/vertical_live_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } + return getScopedModel(null, sample, VerticalLiveDataFrontPanel(sample)); + } +} + +SfCartesianChart getVerticalLineUpdateChart(bool isTileView) { + return SfCartesianChart( + isTransposed: true, + plotAreaBorderWidth: 0, + primaryXAxis: NumericAxis( + isInversed: false, + title: AxisTitle(text: isTileView ? '' : 'Time(s)'), + majorGridLines: MajorGridLines(color: Colors.transparent), + ), + primaryYAxis: NumericAxis( + title: AxisTitle(text: isTileView ? '' : 'Velocity(m/s)'), + minimum: -15, + maximum: 15, + isInversed: false), + series: getVerticalLineSeries(), + ); } -class FrontPanel extends StatefulWidget { +List> getVerticalLineSeries() { + return >[ + LineSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + width: 2, + ), + ]; +} + +class VerticalLiveDataFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + VerticalLiveDataFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _VerticalLiveDataFrontPanelState createState() => _VerticalLiveDataFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample) { +class _VerticalLiveDataFrontPanelState extends State { + _VerticalLiveDataFrontPanelState(this.sample) { count = 0; } @override @@ -137,12 +110,12 @@ class _FrontPanelState extends State { }); } - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -152,141 +125,31 @@ class _FrontPanelState extends State { ); }); } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getVerticalLineUpdateChart(bool isTileView) { - return SfCartesianChart( - isTransposed: true, - plotAreaBorderWidth: 0, - primaryXAxis: NumericAxis( - isInversed: false, - title: AxisTitle(text: isTileView ? '' : 'Time(s)'), - majorGridLines: MajorGridLines(color: Colors.transparent), - ), - primaryYAxis: NumericAxis( - title: AxisTitle(text: isTileView ? '' : 'Velocity(m/s)'), - minimum: -15, - maximum: 15, - isInversed: false), - series: getLineSeries(), - ); -} - -List> getLineSeries() { - return >[ - LineSeries<_ChartData, num>( - dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, - width: 2, - ), - ]; -} - + num getRandomInt(num min, num max) { final Random random = Random(); return min + random.nextInt(max - min); } -List<_ChartData> getChartData() { +List getChartData() { count = count + 1; if (count > 350) { timer.cancel(); } else if (count > 300) { - chartData.add(_ChartData(chartData.length, getRandomInt(0, 1))); + chartData.add(ChartSampleData(x:chartData.length, y:getRandomInt(0, 1))); } else if (count > 250) { - chartData.add(_ChartData(chartData.length, getRandomInt(-2, 1))); + chartData.add(ChartSampleData(x:chartData.length, y:getRandomInt(-2, 1))); } else if (count > 180) { - chartData.add(_ChartData(chartData.length, getRandomInt(-3, 2))); + chartData.add(ChartSampleData(x:chartData.length, y:getRandomInt(-3, 2))); } else if (count > 100) { - chartData.add(_ChartData(chartData.length, getRandomInt(-7, 6))); + chartData.add(ChartSampleData(x:chartData.length, y:getRandomInt(-7, 6))); } else if (count < 50) { - chartData.add(_ChartData(chartData.length, getRandomInt(-3, 3))); + chartData.add(ChartSampleData(x:chartData.length, y:getRandomInt(-3, 3))); } else { - chartData.add(_ChartData(chartData.length, getRandomInt(-9, 9))); + chartData.add(ChartSampleData(x:chartData.length, y:getRandomInt(-9, 9))); } return chartData; } - -class _ChartData { - _ChartData(this.x, this.y); - final num x; - final int y; } + \ No newline at end of file diff --git a/lib/samples/chart/dynamic_updates/update_data_source/update_data_source.dart b/lib/samples/chart/dynamic_updates/update_data_source/update_data_source.dart index 9811422f..136c115f 100644 --- a/lib/samples/chart/dynamic_updates/update_data_source/update_data_source.dart +++ b/lib/samples/chart/dynamic_updates/update_data_source/update_data_source.dart @@ -1,32 +1,32 @@ import 'dart:math'; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +//ignore: must_be_immutable class UpdateDataSource extends StatefulWidget { - const UpdateDataSource(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + UpdateDataSource({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LiveVerticalState createState() => _LiveVerticalState(sample); } -List<_ChartData> chartData = chartData = <_ChartData>[ - _ChartData(1, 30), - _ChartData(3, 13), - _ChartData(5, 80), - _ChartData(7, 30), - _ChartData(9, 72) +List chartData = chartData = [ + ChartSampleData(x:1, y:30), + ChartSampleData(x:3, y:13), + ChartSampleData(x:5, y:80), + ChartSampleData(x:7, y:30), + ChartSampleData(x:9, y:72) ]; int count = 11; class _LiveVerticalState extends State { _LiveVerticalState(this.sample); - final SubItemList sample; + final SubItem sample; bool panelOpen; final ValueNotifier frontPanelVisible = ValueNotifier(true); @@ -39,11 +39,6 @@ class _LiveVerticalState extends State { void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - @override - void dispose() { - super.dispose(); - } - @override void didUpdateWidget(UpdateDataSource oldWidget) { super.didUpdateWidget(oldWidget); @@ -53,93 +48,62 @@ class _LiveVerticalState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/dynamic_updates/update_data_source/update_data_source.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, UpdateDataFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { +SfCartesianChart getUpdateDataSourceChart(bool isTileView, + [List chartData]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + primaryXAxis: NumericAxis( + minimum: 0, interval: 1, majorGridLines: MajorGridLines(width: 0)), + primaryYAxis: NumericAxis( + rangePadding: ChartRangePadding.additional, + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0), + minorGridLines: MinorGridLines(width: 0)), + series: getUpdateDataSourceSeries(), + ); +} + +List> getUpdateDataSourceSeries() { + return >[ + ColumnSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + dataLabelSettings: DataLabelSettings(isVisible: true)), + ]; +} + +class UpdateDataFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + UpdateDataFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _UpdateDataFrontPanelState createState() => _UpdateDataFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _UpdateDataFrontPanelState extends State { + _UpdateDataFrontPanelState(this.sample); + final SubItem sample; final Random random = Random(); num getRandomInt(num min, num max) { return min + random.nextInt(max - min); } - List<_ChartData> getChartData(SampleListModel model) { - chartData.add(_ChartData(1, getRandomInt(10, 100))); - chartData.add(_ChartData(3, getRandomInt(10, 100))); - chartData.add(_ChartData(5, getRandomInt(10, 100))); - chartData.add(_ChartData(7, getRandomInt(10, 100))); - chartData.add(_ChartData(9, getRandomInt(10, 100))); + List getChartData(SampleModel model) { + chartData.add(ChartSampleData(x:1, y:getRandomInt(10, 100))); + chartData.add(ChartSampleData(x:3, y:getRandomInt(10, 100))); + chartData.add(ChartSampleData(x:5, y:getRandomInt(10, 100))); + chartData.add(ChartSampleData(x:7, y:getRandomInt(10, 100))); + chartData.add(ChartSampleData(x:9, y:getRandomInt(10, 100))); return chartData; } - List<_ChartData> getChartData1(SampleListModel model) { + List getChartData1(SampleModel model) { // ignore: invalid_use_of_protected_member if (chartData != null && chartData.isNotEmpty) chartData.removeAt(chartData.length - 1); @@ -154,9 +118,9 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -166,7 +130,7 @@ class _FrontPanelState extends State { ), floatingActionButton: FloatingActionButton( onPressed: () => setState(() { - chartData = <_ChartData>[]; + chartData = []; chartData = getChartData(model); }), child: Icon(Icons.refresh, color: Colors.white), @@ -175,111 +139,3 @@ class _FrontPanelState extends State { }); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getUpdateDataSourceChart(bool isTileView, - [List<_ChartData> chartData]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - primaryXAxis: NumericAxis( - minimum: 0, interval: 1, majorGridLines: MajorGridLines(width: 0)), - primaryYAxis: NumericAxis( - rangePadding: ChartRangePadding.additional, - axisLine: AxisLine(width: 0), - majorTickLines: MajorTickLines(size: 0), - minorGridLines: MinorGridLines(width: 0)), - series: getColumnSeries(), - ); -} - -List> getColumnSeries() { - return >[ - ColumnSeries<_ChartData, num>( - dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.country, - yValueMapper: (_ChartData sales, _) => sales.sales, - dataLabelSettings: DataLabelSettings(isVisible: true)), - ]; -} - -class _ChartData { - _ChartData(this.country, this.sales); - final num country; - final int sales; -} diff --git a/lib/samples/chart/funnel_charts/default_funnel_chart.dart b/lib/samples/chart/funnel_charts/default_funnel_chart.dart index 9426aa7c..7d90852c 100644 --- a/lib/samples/chart/funnel_charts/default_funnel_chart.dart +++ b/lib/samples/chart/funnel_charts/default_funnel_chart.dart @@ -1,162 +1,110 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/checkbox.dart'; import 'package:flutter_examples/widgets/custom_button.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -import '../../../widgets/checkbox.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +//ignore: must_be_immutable class FunnelDefault extends StatefulWidget { - const FunnelDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + FunnelDefault({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _FunnelDefaultState createState() => _FunnelDefaultState(sample); } class _FunnelDefaultState extends State { _FunnelDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + final SubItem sample; @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, DefaultFunnelFrontPanel(sample)); } +} - @override - void didUpdateWidget(FunnelDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfFunnelChart getDefaultFunnelChart(bool isTileView, + [double gapRatio, int neckWidth, int neckHeight, bool explode]) { + return SfFunnelChart( + smartLabelMode: SmartLabelMode.shift, + title: ChartTitle(text: isTileView ? '' : 'Website conversion rate'), + tooltipBehavior: TooltipBehavior(enable: true), + series: + _getFunnelSeries(isTileView, gapRatio, neckWidth, neckHeight, explode), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/default_funnel_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +FunnelSeries _getFunnelSeries(bool isTileView, + [double _gapRatio, int _neckWidth, int _neckHeight, bool _explode]) { + final List pieData = [ + ChartSampleData(x: 'Purchased ', y: 150), + ChartSampleData(x: 'Requested price list', y: 300), + ChartSampleData(x: 'Downloaded trail', y: 600), + ChartSampleData(x: 'Visit download page', y: 1500), + ChartSampleData(x: 'Watched demo', y: 2600), + ChartSampleData(x: 'Website visitors', y: 3000) + ]; + return FunnelSeries( + dataSource: pieData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + explode: isTileView ? false : _explode, + gapRatio: isTileView ? 0 : _gapRatio, + neckHeight: isTileView ? '20%' : _neckHeight.toString() + '%', + neckWidth: isTileView ? '20%' : _neckWidth.toString() + '%', + dataLabelSettings: DataLabelSettings(isVisible: true)); } -class FrontPanel extends StatefulWidget { +class DefaultFunnelFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - + DefaultFunnelFrontPanel(this.subItemList); + final SubItem subItemList; + @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _DefaultFunnelFrontPanelState createState() => + _DefaultFunnelFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _DefaultFunnelFrontPanelState extends State { + _DefaultFunnelFrontPanelState(this.sample); + final SubItem sample; double gapRatio = 0; int neckWidth = 20; int neckHeight = 20; - bool explode = false; + bool explode = false; @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultFunnelChart(false, gapRatio,neckWidth, neckHeight, explode)), - ), - floatingActionButton: Stack( - children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - // child: InkWell( - // onTap: () => launch( - // 'https://data.worldbank.org/indicator/sp.rur.totl.zs'), - // child: Row( - // children: [ - // Text('Source: ', - // style: TextStyle( - // fontSize: 16, color: model.textColor)), - // Text('data.worldbank.org', - // style: TextStyle( - // fontSize: 14, color: Colors.blue)), - // ], - // ), - // ), - ), - ), - ), - Align( - alignment: Alignment.bottomRight, - child: FloatingActionButton( - heroTag: null, - onPressed: () { - _showSettingsPanel(model); - }, - child: Icon(Icons.graphic_eq, color: Colors.white), - backgroundColor: model.backgroundColor, - ), + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getDefaultFunnelChart( + false, gapRatio, neckWidth, neckHeight, explode)), + ), + floatingActionButton: Stack(children: [ + Align( + alignment: Alignment.bottomRight, + child: FloatingActionButton( + heroTag: null, + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, ), - - ])); + ), + ])); }); } - void _showSettingsPanel(SampleListModel model) { + + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -166,9 +114,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -210,7 +158,6 @@ class _FrontPanelState extends State { const EdgeInsets.fromLTRB(10, 50, 0, 0), child: ListView( children: [ - Container( child: Row( crossAxisAlignment: @@ -230,12 +177,11 @@ class _FrontPanelState extends State { child: CustomButton( minValue: 0, maxValue: 0.5, - initialValue: - gapRatio, + initialValue: gapRatio, onChanged: (dynamic val) => setState(() { - gapRatio = val; - }), + gapRatio = val; + }), step: 0.1, horizontal: true, loop: false, @@ -261,7 +207,7 @@ class _FrontPanelState extends State { ], ), ), - Container( + Container( child: Row( crossAxisAlignment: CrossAxisAlignment.center, @@ -284,8 +230,8 @@ class _FrontPanelState extends State { neckHeight.toDouble(), onChanged: (dynamic val) => setState(() { - neckHeight = val.toInt(); - }), + neckHeight = val.toInt(); + }), step: 10, horizontal: true, loop: false, @@ -311,7 +257,7 @@ class _FrontPanelState extends State { ], ), ), - Container( + Container( child: Row( crossAxisAlignment: CrossAxisAlignment.center, @@ -334,8 +280,8 @@ class _FrontPanelState extends State { neckWidth.toDouble(), onChanged: (dynamic val) => setState(() { - neckWidth = val.toInt(); - }), + neckWidth = val.toInt(); + }), step: 10, horizontal: true, loop: false, @@ -361,8 +307,7 @@ class _FrontPanelState extends State { ], ), ), - - Container( + Container( child: Row( children: [ Text('Explode', @@ -372,9 +317,9 @@ class _FrontPanelState extends State { letterSpacing: 0.34, fontWeight: FontWeight.normal)), - const Padding( - padding: EdgeInsets.fromLTRB(40, 0, 0, 0) - ), + const Padding( + padding: EdgeInsets.fromLTRB( + 40, 0, 0, 0)), BottomSheetCheckbox( activeColor: model.backgroundColor, @@ -395,116 +340,3 @@ class _FrontPanelState extends State { ))))))); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfFunnelChart getDefaultFunnelChart(bool isTileView,[double gapRatio, int neckWidth, int neckHeight, bool explode]) { - return SfFunnelChart( - smartLabelMode: SmartLabelMode.shift, - title: ChartTitle(text: isTileView ? '' : 'Website conversion rate'), - tooltipBehavior: TooltipBehavior(enable: true), - series: _getFunnelSeries(isTileView, gapRatio,neckWidth,neckHeight, explode), - ); -} - -FunnelSeries<_FunnelData, String> _getFunnelSeries(bool isTileView,[double _gapRatio, int _neckWidth, int _neckHeight, bool _explode]) { - final List<_FunnelData> pieData = <_FunnelData>[ - _FunnelData('Purchased ', 150), - _FunnelData('Requested price list', 300), - _FunnelData('Downloaded trail', 600), - _FunnelData('Visit download page', 1500), - _FunnelData('Watched demo', 2600), - _FunnelData('Website visitors', 3000) - ]; - return FunnelSeries<_FunnelData, String>( - dataSource: pieData, - xValueMapper: (_FunnelData data, _) => data.xData, - yValueMapper: (_FunnelData data, _) => data.yData, - explode: isTileView ? false : _explode, - gapRatio: isTileView ? 0 : _gapRatio, - neckHeight: isTileView ? '20%' : _neckHeight.toString()+'%', - neckWidth: isTileView ? '20%' : _neckWidth.toString()+'%', - dataLabelSettings: DataLabelSettings(isVisible: true)); -} - -class _FunnelData { - _FunnelData(this.xData, this.yData, [this.text]); - final String xData; - final num yData; - final String text; -} diff --git a/lib/samples/chart/funnel_charts/funnel_with_legend.dart b/lib/samples/chart/funnel_charts/funnel_with_legend.dart index f2ba5c91..cbbf899b 100644 --- a/lib/samples/chart/funnel_charts/funnel_with_legend.dart +++ b/lib/samples/chart/funnel_charts/funnel_with_legend.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class FunnelLegend extends StatefulWidget { - const FunnelLegend(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + FunnelLegend({this.sample, Key key}) : super(key: key); + SubItem sample; @override _FunnelLegendState createState() => _FunnelLegendState(sample); @@ -15,179 +14,13 @@ class FunnelLegend extends StatefulWidget { class _FunnelLegendState extends State { _FunnelLegendState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(FunnelLegend oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/funnel_with_legend.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem sample; - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getLegendFunnelChart(false)), - )); - }); + return getScopedModel(getLegendFunnelChart(false), sample); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - SfFunnelChart getLegendFunnelChart(bool isTileView) { return SfFunnelChart( smartLabelMode: SmartLabelMode.none, @@ -200,28 +33,21 @@ SfFunnelChart getLegendFunnelChart(bool isTileView) { ); } -FunnelSeries<_FunnelData, String> _getFunnelSeries(bool isTileView) { - final List<_FunnelData> pieData = <_FunnelData>[ - _FunnelData('Others', 10, '10%'), - _FunnelData('Medical ', 11, '11%'), - _FunnelData('Saving ', 14, '14%'), - _FunnelData('Shopping', 17, '17%'), - _FunnelData('Travel', 21, '21%'), - _FunnelData('Food', 27, '27%'), +FunnelSeries _getFunnelSeries(bool isTileView) { + final List pieData = [ + ChartSampleData(x:'Others', y:10, text:'10%'), + ChartSampleData(x:'Medical ', y:11, text:'11%'), + ChartSampleData(x:'Saving ', y:14, text:'14%'), + ChartSampleData(x:'Shopping',y: 17, text:'17%'), + ChartSampleData(x:'Travel', y:21, text:'21%'), + ChartSampleData(x:'Food', y:27, text:'27%'), ]; - return FunnelSeries<_FunnelData, String>( + return FunnelSeries( dataSource: pieData, - textFieldMapper: (_FunnelData data, _) => data.text, - xValueMapper: (_FunnelData data, _) => data.xData, - yValueMapper: (_FunnelData data, _) => data.yData, + textFieldMapper: (ChartSampleData data, _) => data.text, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: isTileView ? false : true, labelPosition: ChartDataLabelPosition.inside)); } - -class _FunnelData { - _FunnelData(this.xData, this.yData, [this.text]); - final String xData; - final num yData; - final String text; -} diff --git a/lib/samples/chart/funnel_charts/funnel_with_smart_labels.dart b/lib/samples/chart/funnel_charts/funnel_with_smart_labels.dart index 58edbd32..35186d5b 100644 --- a/lib/samples/chart/funnel_charts/funnel_with_smart_labels.dart +++ b/lib/samples/chart/funnel_charts/funnel_with_smart_labels.dart @@ -1,105 +1,85 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +//ignore: must_be_immutable class FunnelSmartLabels extends StatefulWidget { - const FunnelSmartLabels(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + FunnelSmartLabels({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _FunnelSmartLabelState createState() => _FunnelSmartLabelState(sample); } class _FunnelSmartLabelState extends State { _FunnelSmartLabelState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + final SubItem sample; @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, FunnelSmartLabelFrontPanel(sample)); } +} - @override - void didUpdateWidget(FunnelSmartLabels oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfFunnelChart getFunnelSmartLabelChart(bool isTileView, + [ChartDataLabelPosition _labelPosition, SmartLabelMode _mode]) { + return SfFunnelChart( + smartLabelMode: isTileView ? SmartLabelMode.shift : _mode, + title: ChartTitle(text: isTileView ? '' : 'Tournament details'), + tooltipBehavior: TooltipBehavior( + enable: true, + ), + series: _getFunnelSeries( + isTileView, + _labelPosition, + ), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/funnel_charts/funnel_with_smart_labels.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +FunnelSeries _getFunnelSeries(bool isTileView, + [ChartDataLabelPosition _labelPosition]) { + final List pieData = [ + ChartSampleData(x: 'Finals', y: 2), + ChartSampleData(x: 'Semifinals', y: 4), + ChartSampleData(x: 'Quarter finals', y: 8), + ChartSampleData(x: 'League matches', y: 16), + ChartSampleData(x: 'Participated', y: 32), + ChartSampleData(x: 'Eligible', y: 36), + ChartSampleData(x: 'Applicants', y: 40), + ]; + return FunnelSeries( + width: '60%', + dataSource: pieData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelSettings: DataLabelSettings( + isVisible: true, + labelPosition: + isTileView ? ChartDataLabelPosition.outside : _labelPosition, + useSeriesColor: true)); } -class FrontPanel extends StatefulWidget { +class FunnelSmartLabelFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - + FunnelSmartLabelFrontPanel(this.subItemList); + final SubItem subItemList; + @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _FunnelSmartLabelFrontPanelState createState() => + _FunnelSmartLabelFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _FunnelSmartLabelFrontPanelState + extends State { + _FunnelSmartLabelFrontPanelState(this.sample); + final SubItem sample; final List _labelPositon = ['outside', 'inside'].toList(); - ChartDataLabelPosition _selectedLabelPosition = ChartDataLabelPosition.outside; + ChartDataLabelPosition _selectedLabelPosition = + ChartDataLabelPosition.outside; String _selectedPosition; final List _modeList = ['shift', 'none', 'hide'].toList(); @@ -115,11 +95,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -153,7 +133,7 @@ class _FrontPanelState extends State { }); } - void onSmartLabelModeChange(String item, SampleListModel model) { + void onSmartLabelModeChange(String item, SampleModel model) { setState(() { _smartLabelMode = item; if (_smartLabelMode == 'shift') { @@ -168,7 +148,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -178,9 +158,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -332,126 +312,3 @@ class _FrontPanelState extends State { ))))))); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfFunnelChart getFunnelSmartLabelChart(bool isTileView, - [ChartDataLabelPosition _labelPosition, SmartLabelMode _mode]) { - return SfFunnelChart( - smartLabelMode: isTileView ? SmartLabelMode.shift : _mode, - title: ChartTitle(text: isTileView ? '' : 'Tournament details'), - tooltipBehavior: TooltipBehavior( - enable: true, - ), - series: _getFunnelSeries( - isTileView, - _labelPosition, - ), - ); -} - -FunnelSeries<_FunnelData, String> _getFunnelSeries(bool isTileView, - [ChartDataLabelPosition _labelPosition]) { - final List<_FunnelData> pieData = <_FunnelData>[ - _FunnelData('Finals', 2), - _FunnelData('Semifinals', 4), - _FunnelData('Quarter finals', 8), - _FunnelData('League matches', 16), - _FunnelData('Participated', 32), - _FunnelData('Eligible', 36), - _FunnelData('Applicants', 40), - ]; - return FunnelSeries<_FunnelData, String>( - width: '60%', - dataSource: pieData, - xValueMapper: (_FunnelData data, _) => data.xData, - yValueMapper: (_FunnelData data, _) => data.yData, - // textFieldMapper: (_FunnelData data, _) => data.xData, - // pointColorMapper: (_FunnelData data, _) => data.color, - dataLabelSettings: DataLabelSettings( - isVisible: true, - labelPosition: isTileView ? ChartDataLabelPosition.outside : _labelPosition, - useSeriesColor: true)); -} - -class _FunnelData { - _FunnelData(this.xData, this.yData, [this.text, this.color]); - final String xData; - final num yData; - final String text; - final Color color; -} diff --git a/lib/samples/chart/home/axes_features_home.dart b/lib/samples/chart/home/axes_features_home.dart deleted file mode 100755 index 1953589f..00000000 --- a/lib/samples/chart/home/axes_features_home.dart +++ /dev/null @@ -1,57 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class AxesFeatures extends StatefulWidget { - const AxesFeatures({Key key}) : super(key: key); - - @override - _SeriesFeaturesState createState() => _SeriesFeaturesState(); -} - -class _SeriesFeaturesState extends State { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } -} diff --git a/lib/samples/chart/home/axis_types.dart b/lib/samples/chart/home/axis_types.dart deleted file mode 100755 index 46c477e3..00000000 --- a/lib/samples/chart/home/axis_types.dart +++ /dev/null @@ -1,65 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class AxisTypes extends StatefulWidget { - const AxisTypes({Key key}) : super(key: key); - - @override - _AxisTypesState createState() => _AxisTypesState(); -} - -class _AxisTypesState extends State { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - bottom: TabBar( - indicator: const UnderlineTabIndicator( - borderSide: BorderSide( - width: 5.0, color: Color.fromRGBO(252, 220, 0, 1)), - ), - isScrollable: true, - tabs: getTabs(model), - ), - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } -} diff --git a/lib/samples/chart/home/cartesian_types.dart b/lib/samples/chart/home/cartesian_types.dart deleted file mode 100755 index edd2baec..00000000 --- a/lib/samples/chart/home/cartesian_types.dart +++ /dev/null @@ -1,69 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class CartesianTypes extends StatefulWidget { - const CartesianTypes({Key key}) : super(key: key); - - @override - _CartesianTypesState createState() => _CartesianTypesState(); -} - -class _CartesianTypesState extends State - with AutomaticKeepAliveClientMixin { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - bottom: TabBar( - indicator: const UnderlineTabIndicator( - borderSide: BorderSide( - width: 5.0, color: Color.fromRGBO(252, 220, 0, 1)), - ), - isScrollable: true, - tabs: getTabs(model), - ), - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } - - @override - bool get wantKeepAlive => false; -} \ No newline at end of file diff --git a/lib/samples/chart/home/circular_types.dart b/lib/samples/chart/home/circular_types.dart deleted file mode 100755 index 1232a1cf..00000000 --- a/lib/samples/chart/home/circular_types.dart +++ /dev/null @@ -1,69 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class CircularTypes extends StatefulWidget { - const CircularTypes({Key key}) : super(key: key); - - @override - _CircularTypesState createState() => _CircularTypesState(); -} - -class _CircularTypesState extends State - with AutomaticKeepAliveClientMixin { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - bottom: TabBar( - indicator: const UnderlineTabIndicator( - borderSide: BorderSide( - width: 5.0, color: Color.fromRGBO(252, 220, 0, 1)), - ), - isScrollable: true, - tabs: getTabs(model), - ), - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } - - @override - bool get wantKeepAlive => false; -} diff --git a/lib/samples/chart/home/dynamic_updates.dart b/lib/samples/chart/home/dynamic_updates.dart deleted file mode 100755 index e3dbcb5c..00000000 --- a/lib/samples/chart/home/dynamic_updates.dart +++ /dev/null @@ -1,65 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class DynamicUpdates extends StatefulWidget { - const DynamicUpdates({Key key}) : super(key: key); - - @override - _DynamicUpdatesState createState() => _DynamicUpdatesState(); -} - -class _DynamicUpdatesState extends State { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - bottom: TabBar( - indicator: const UnderlineTabIndicator( - borderSide: BorderSide( - width: 5.0, color: Color.fromRGBO(252, 220, 0, 1)), - ), - isScrollable: true, - tabs: getTabs(model), - ), - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } -} diff --git a/lib/samples/chart/home/funnel_chart.dart b/lib/samples/chart/home/funnel_chart.dart deleted file mode 100644 index 86e88178..00000000 --- a/lib/samples/chart/home/funnel_chart.dart +++ /dev/null @@ -1,57 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class FunnelCharts extends StatefulWidget { - const FunnelCharts({Key key}) : super(key: key); - - @override - _SeriesFeaturesState createState() => _SeriesFeaturesState(); -} - -class _SeriesFeaturesState extends State { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } -} diff --git a/lib/samples/chart/home/legend_home.dart b/lib/samples/chart/home/legend_home.dart deleted file mode 100755 index 5c6ccb9a..00000000 --- a/lib/samples/chart/home/legend_home.dart +++ /dev/null @@ -1,57 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class LegendFeatures extends StatefulWidget { - const LegendFeatures({Key key}) : super(key: key); - - @override - _SeriesFeaturesState createState() => _SeriesFeaturesState(); -} - -class _SeriesFeaturesState extends State { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } -} diff --git a/lib/samples/chart/home/other_features.dart b/lib/samples/chart/home/other_features.dart deleted file mode 100755 index df9a440e..00000000 --- a/lib/samples/chart/home/other_features.dart +++ /dev/null @@ -1,65 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class SeriesFeatures extends StatefulWidget { - const SeriesFeatures({Key key}) : super(key: key); - - @override - _SeriesFeaturesState createState() => _SeriesFeaturesState(); -} - -class _SeriesFeaturesState extends State { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - bottom: TabBar( - indicator: const UnderlineTabIndicator( - borderSide: BorderSide( - width: 5.0, color: Color.fromRGBO(252, 220, 0, 1)), - ), - isScrollable: true, - tabs: getTabs(model), - ), - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } -} diff --git a/lib/samples/chart/home/pyramid_chart.dart b/lib/samples/chart/home/pyramid_chart.dart deleted file mode 100644 index ed7cbdb4..00000000 --- a/lib/samples/chart/home/pyramid_chart.dart +++ /dev/null @@ -1,57 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class PyramidFeatures extends StatefulWidget { - const PyramidFeatures({Key key}) : super(key: key); - - @override - _SeriesFeaturesState createState() => _SeriesFeaturesState(); -} - -class _SeriesFeaturesState extends State { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } -} diff --git a/lib/samples/chart/home/radial_gauge.dart b/lib/samples/chart/home/radial_gauge.dart deleted file mode 100644 index 72e4a670..00000000 --- a/lib/samples/chart/home/radial_gauge.dart +++ /dev/null @@ -1,69 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class RadialGaugeExamples extends StatefulWidget { - const RadialGaugeExamples({Key key}) : super(key: key); - - @override - _RadialGaugeExamplesState createState() => _RadialGaugeExamplesState(); -} - -class _RadialGaugeExamplesState extends State - with AutomaticKeepAliveClientMixin { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - bottom: TabBar( - indicator: const UnderlineTabIndicator( - borderSide: BorderSide( - width: 5.0, color: Color.fromRGBO(252, 220, 0, 1)), - ), - isScrollable: true, - tabs: getTabs(model), - ), - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - children: getCardViewChildren(model), - ), - ), - ), - ))); - } - - @override - bool get wantKeepAlive => false; -} diff --git a/lib/samples/chart/home/user_interaction.dart b/lib/samples/chart/home/user_interaction.dart deleted file mode 100755 index 3652d99f..00000000 --- a/lib/samples/chart/home/user_interaction.dart +++ /dev/null @@ -1,70 +0,0 @@ -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/helper.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:scoped_model/scoped_model.dart'; - -class InteractionTypes extends StatefulWidget { - const InteractionTypes({Key key}) : super(key: key); - - @override - _InteractionTypesState createState() => _InteractionTypesState(); -} - -class _InteractionTypesState extends State - with AutomaticKeepAliveClientMixin { - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - // ignore: must_call_super - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) => Theme( - data: model.themeData, - child: SafeArea( - child: DefaultTabController( - length: - model.controlList[model.selectedIndex].subItemList.length, - child: Scaffold( - appBar: AppBar( - leading: IconButton( - icon: Icon(Icons.arrow_back), - onPressed: () => Navigator.pop(context, false), - ), - backgroundColor: model.backgroundColor, - bottom: TabBar( - indicator: const UnderlineTabIndicator( - borderSide: BorderSide( - width: 5.0, color: Color.fromRGBO(252, 220, 0, 1)), - ), - isScrollable: true, - tabs: getTabs(model), - ), - title: Text( - model.controlList[model.selectedIndex].title.toString(), - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 16.0, - color: Colors.white, - letterSpacing: 0.3)), - ), - body: TabBarView( - physics: const ClampingScrollPhysics(), - children: getCardViewChildren(model), - ), - ), - ), - ))); - } - - @override - bool get wantKeepAlive => false; -} diff --git a/lib/samples/chart/legend/cartesian_legend_various_options.dart b/lib/samples/chart/legend/cartesian_legend_various_options.dart new file mode 100644 index 00000000..31c0a69c --- /dev/null +++ b/lib/samples/chart/legend/cartesian_legend_various_options.dart @@ -0,0 +1,377 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/checkbox.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; + +//ignore: must_be_immutable +class CartesianLegendOptions extends StatefulWidget { + CartesianLegendOptions({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _CartesianLegendOptionsState createState() => + _CartesianLegendOptionsState(sample); +} + +class _CartesianLegendOptionsState extends State { + _CartesianLegendOptionsState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(null, sample, LegendWithOptionsFrontPanel(sample)); + } +} + +SfCartesianChart getCartesianLegendOptionsChart(bool isTileView, + [LegendPosition _position, + LegendItemOverflowMode _overflowMode, + dynamic toggleVisibility]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Monthly expense of a family'), + legend: Legend( + isVisible: !isTileView, + position: _position, + overflowMode: _overflowMode, + toggleSeriesVisibility: toggleVisibility), + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + labelRotation: isTileView ? 0 : 45, + ), + primaryYAxis: NumericAxis( + // maximum: 200, + axisLine: AxisLine(width: 0), + labelFormat: '\${value}', + majorTickLines: MajorTickLines(size: 0)), + series: _getStackedLineSeries(isTileView), + tooltipBehavior: + TooltipBehavior(enable: true), + ); +} +List> _getStackedLineSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Food', y: 55, yValue: 40, yValue2: 45, yValue3: 48, size:28), + ChartSampleData( + x: 'Transport', y: 33, yValue: 45, yValue2: 54, yValue3: 28, size: 35), + ChartSampleData(x: 'Medical', y: 43, yValue: 23, yValue2: 20, yValue3: 34, size:48), + ChartSampleData(x: 'Clothes', y: 32, yValue: 54, yValue2: 23, yValue3: 54, size:27), + ChartSampleData(x: 'Books', y: 56, yValue: 18, yValue2: 43, yValue3: 55, size:31), + ChartSampleData(x: 'Others', y: 23, yValue: 54, yValue2: 33, yValue3: 56, size:35), + ]; + return >[ + StackedLineSeries( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + name: 'Person 1', + markerSettings: MarkerSettings(isVisible: true)), + StackedLineSeries( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, + name: 'Person 2', + markerSettings: MarkerSettings(isVisible: true)), + StackedLineSeries( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, + name: 'Person 3', + markerSettings: MarkerSettings(isVisible: true)), + StackedLineSeries( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, + name: 'Person 4', + markerSettings: MarkerSettings(isVisible: true)), + StackedLineSeries( + enableTooltip: true, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.size, + name: 'Person 5', + markerSettings: MarkerSettings(isVisible: true)) + ]; +} +class LegendWithOptionsFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + LegendWithOptionsFrontPanel(this.subItemList); + final SubItem subItemList; + + @override + _LegendWithOptionsFrontPanelState createState() => + _LegendWithOptionsFrontPanelState(subItemList); +} + +class _LegendWithOptionsFrontPanelState + extends State { + _LegendWithOptionsFrontPanelState(this.sample); + final SubItem sample; + bool toggleVisibility = true; + final List _positionList = + ['auto', 'bottom', 'left', 'right', 'top'].toList(); + String _selectedPosition = 'auto'; + LegendPosition _position = LegendPosition.auto; + + final List _modeList = ['wrap', 'scroll', 'none'].toList(); + String _selectedMode = 'wrap'; + + LegendItemOverflowMode _overflowMode = LegendItemOverflowMode.wrap; + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getCartesianLegendOptionsChart( + false, _position, _overflowMode, toggleVisibility)), + ), + floatingActionButton: FloatingActionButton( + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, + )); + }); + } + + void _showSettingsPanel(SampleModel model) { + final double height = + (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) + ? 0.4 + : 0.5; + showRoundedModalBottomSheet( + dismissOnTap: false, + context: context, + radius: 20.0, + color: model.bottomSheetBackgroundColor, + builder: (BuildContext context) => ScopedModelDescendant( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 220, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: MediaQuery.of(context).size.height * height, + child: Padding( + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack( + children: [ + Container( + height: 40, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + Padding( + padding: + const EdgeInsets.fromLTRB(10, 50, 0, 0), + child: ListView( + children: [ + Container( + child: Row( + children: [ + Text('Position ', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: + FontWeight.normal)), + Container( + padding: const EdgeInsets.fromLTRB( + 75, 0, 0, 0), + height: 50, + width: 200, + child: Align( + alignment: Alignment.bottomCenter, + child: Theme( + data: Theme.of(context).copyWith( + canvasColor: model + .bottomSheetBackgroundColor), + child: DropDown( + value: _selectedPosition, + item: _positionList + .map((String value) { + return DropdownMenuItem< + String>( + value: + (value != null) + ? value + : 'auto', + child: Text( + '$value', + style: TextStyle( + color: model + .textColor))); + }).toList(), + valueChanged: + (dynamic value) { + onPositionTypeChange( + value.toString(), + model); + })), + ), + ), + ], + ), + ), + Container( + child: Row( + children: [ + Text('Overflow mode', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: + FontWeight.normal)), + Container( + padding: const EdgeInsets.fromLTRB( + 20, 0, 0, 0), + height: 50, + width: 150, + child: Align( + alignment: Alignment.bottomCenter, + child: Theme( + data: Theme.of(context).copyWith( + canvasColor: model + .bottomSheetBackgroundColor), + child: DropDown( + value: _selectedMode, + item: _modeList + .map((String value) { + return DropdownMenuItem< + String>( + value: + (value != null) + ? value + : 'wrap', + child: Text( + '$value', + style: TextStyle( + color: model + .textColor))); + }).toList(), + valueChanged: + (dynamic value) { + onModeTypeChange( + value, model); + })), + ), + ), + ], + ), + ), + Container( + child: Row( + children: [ + Text('Toggle visibility ', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: + FontWeight.normal)), + Padding( + padding: const EdgeInsets.all(8.0), + child: BottomSheetCheckbox( + activeColor: + model.backgroundColor, + switchValue: toggleVisibility, + valueChanged: (dynamic value) { + setState(() { + toggleVisibility = value; + }); + }, + ), + ), + ], + ), + ), + ], + ), + ) + ], + ), + ), + )), + )))); + } + + void onPositionTypeChange(String item, SampleModel model) { + setState(() { + _selectedPosition = item; + if (_selectedPosition == 'auto') { + _position = LegendPosition.auto; + } + if (_selectedPosition == 'bottom') { + _position = LegendPosition.bottom; + } + if (_selectedPosition == 'right') { + _position = LegendPosition.right; + } + if (_selectedPosition == 'left') { + _position = LegendPosition.left; + } + if (_selectedPosition == 'top') { + _position = LegendPosition.top; + } + // ignore: invalid_use_of_protected_member + model.notifyListeners(); + }); + } + + void onModeTypeChange(String item, SampleModel model) { + setState(() { + _selectedMode = item; + if (_selectedMode == 'wrap') { + _overflowMode = LegendItemOverflowMode.wrap; + } + if (_selectedMode == 'scroll') { + _overflowMode = LegendItemOverflowMode.scroll; + } + if (_selectedMode == 'none') { + _overflowMode = LegendItemOverflowMode.none; + } + // ignore: invalid_use_of_protected_member + model.notifyListeners(); + }); + } +} diff --git a/lib/samples/chart/legend/chart_with_customized_legend.dart b/lib/samples/chart/legend/chart_with_customized_legend.dart index 4a8a280b..5aa47e48 100755 --- a/lib/samples/chart/legend/chart_with_customized_legend.dart +++ b/lib/samples/chart/legend/chart_with_customized_legend.dart @@ -1,191 +1,24 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class LegendCustomized extends StatefulWidget { - const LegendCustomized(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + LegendCustomized({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _LegendCustomizedState createState() => _LegendCustomizedState(sample); } class _LegendCustomizedState extends State { _LegendCustomizedState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(LegendCustomized oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/legend/chart_with_customized_legend.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} + final SubItem sample; -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getLegendCustomizedChart(false)), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getLegendCustomizedChart(false), sample); } } @@ -216,7 +49,7 @@ SfCartesianChart getLegendCustomizedChart(bool isTileView) { maximum: 120, axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(color: Colors.transparent)), - series: getLineSeries(isTileView), + series: getLegendCustomizedSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } @@ -231,51 +64,43 @@ dynamic getImage(int index) { return images[index]; } -List> getLineSeries(bool isTileView) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData(2005, 38, 49, 56, 67), - _ChartData(2006, 20, 40, 50, 60), - _ChartData(2007, 60, 72, 84, 96), - _ChartData(2008, 50, 65, 80, 90), +List> getLegendCustomizedSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 2005, y: 38, yValue: 49, yValue2: 56, yValue3: 67), + ChartSampleData(x: 2006, y: 20, yValue: 40, yValue2: 50, yValue3: 60), + ChartSampleData(x: 2007, y: 60, yValue: 72, yValue2: 84, yValue3: 96), + ChartSampleData(x: 2008, y: 50, yValue: 65, yValue2: 80, yValue3: 90), ]; - return >[ - LineSeries<_ChartData, num>( + return >[ + LineSeries( width: 2, markerSettings: MarkerSettings(isVisible: true), dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Truck', ), - LineSeries<_ChartData, num>( + LineSeries( markerSettings: MarkerSettings(isVisible: true), width: 2, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, name: 'Car'), - LineSeries<_ChartData, num>( + LineSeries( markerSettings: MarkerSettings(isVisible: true), width: 2, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y3, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'Bike'), - LineSeries<_ChartData, num>( + LineSeries( markerSettings: MarkerSettings(isVisible: true), width: 2, dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y4, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, name: 'Bicycle') ]; } - -class _ChartData { - _ChartData(this.x, this.y, this.y2, this.y3, this.y4); - final double x; - final double y; - final double y2; - final double y3; - final double y4; -} diff --git a/lib/samples/chart/legend/chart_with_legend.dart b/lib/samples/chart/legend/chart_with_legend.dart index 8228ee68..ec95dbc7 100755 --- a/lib/samples/chart/legend/chart_with_legend.dart +++ b/lib/samples/chart/legend/chart_with_legend.dart @@ -1,192 +1,24 @@ +import 'package:flutter_examples/model/helper.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class LegendDefault extends StatefulWidget { - const LegendDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + LegendDefault({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _LegendDefaultState createState() => _LegendDefaultState(sample); } class _LegendDefaultState extends State { _LegendDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(LegendDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/legend/chart_with_legend.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getLegendDefaultChart(false)), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getLegendDefaultChart(false), sample); } } @@ -194,34 +26,29 @@ SfCircularChart getLegendDefaultChart(bool isTileView) { return SfCircularChart( title: ChartTitle(text: isTileView ? '' : 'Electricity sectors'), legend: Legend(isVisible: true, overflowMode: LegendItemOverflowMode.wrap), - series: getPieSeries(isTileView), + series: getLegendDefaultSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -class _LegendData { - _LegendData(this.xData, this.yData); - final String xData; - final num yData; -} - -List> getPieSeries(bool isTileView) { - final List<_LegendData> chartData = <_LegendData>[ - _LegendData('Coal', 56.2), - _LegendData('Large Hydro', 12.7), - _LegendData('Small Hydro', 1.3), - _LegendData('Wind Power', 10), - _LegendData('Solar Power', 8), - _LegendData('Biomass', 2.6), - _LegendData('Nuclear', 1.9), - _LegendData('Gas', 7), - _LegendData('Diesel', 0.2) +List> getLegendDefaultSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Coal', y: 56.2), + ChartSampleData(x: 'Large Hydro', y: 12.7), + ChartSampleData(x: 'Small Hydro', y: 1.3), + ChartSampleData(x: 'Wind Power', y: 10), + ChartSampleData(x: 'Solar Power', y: 8), + ChartSampleData(x: 'Biomass', y: 2.6), + ChartSampleData(x: 'Nuclear', y: 1.9), + ChartSampleData(x: 'Gas', y: 7), + ChartSampleData(x: 'Diesel', y: 0.2) ]; - return >[ - DoughnutSeries<_LegendData, String>( + return >[ + DoughnutSeries( dataSource: chartData, - xValueMapper: (_LegendData data, _) => data.xData, - yValueMapper: (_LegendData data, _) => data.yData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, startAngle: 90, endAngle: 90, dataLabelSettings: DataLabelSettings( diff --git a/lib/samples/chart/legend/legend_with_various_options.dart b/lib/samples/chart/legend/legend_with_various_options.dart index 34da121c..ad97c3f5 100755 --- a/lib/samples/chart/legend/legend_with_various_options.dart +++ b/lib/samples/chart/legend/legend_with_various_options.dart @@ -1,16 +1,15 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; -import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:flutter_examples/widgets/checkbox.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +//ignore: must_be_immutable class LegendOptions extends StatefulWidget { - const LegendOptions(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + LegendOptions({this.sample, Key key}) : super(key: key); + SubItem sample; @override _LegendOptionsState createState() => _LegendOptionsState(sample); @@ -18,90 +17,62 @@ class LegendOptions extends StatefulWidget { class _LegendOptionsState extends State { _LegendOptionsState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - + final SubItem sample; + @override - void dispose() { - super.dispose(); - } + Widget build(BuildContext context) { + return getScopedModel(null, sample, LegendWithOptionsFrontPanel(sample)); - @override - void didUpdateWidget(LegendOptions oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); } +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/legend/legend_with_various_options.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +SfCircularChart getLegendOptionsChart(bool isTileView, + [LegendPosition _position, + LegendItemOverflowMode _overflowMode, + dynamic toggleVisibility]) { + return SfCircularChart( + title: ChartTitle(text: isTileView ? '' : 'Expenses by category'), + legend: Legend( + isVisible: true, + position: _position, + overflowMode: _overflowMode, + toggleSeriesVisibility: toggleVisibility), + series: getLegendOptionsSeries(isTileView), + tooltipBehavior: TooltipBehavior(enable: true), + ); +} +List> getLegendOptionsSeries(bool isTileView) { + final List pieData = [ + ChartSampleData(x:'Tution Fees', y:21), + ChartSampleData(x:'Entertainment', y:21), + ChartSampleData(x:'Private Gifts', y:8), + ChartSampleData(x:'Local Revenue', y:21), + ChartSampleData(x:'Federal Revenue', y:16), + ChartSampleData(x:'Others', y:8) + ]; + return >[ + PieSeries( + dataSource: pieData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + startAngle: 90, + endAngle: 90, + dataLabelSettings: DataLabelSettings(isVisible: true)), + ]; } -class FrontPanel extends StatefulWidget { +class LegendWithOptionsFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + LegendWithOptionsFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _LegendWithOptionsFrontPanelState createState() => _LegendWithOptionsFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; +class _LegendWithOptionsFrontPanelState extends State { + _LegendWithOptionsFrontPanelState(this.sample); + final SubItem sample; bool toggleVisibility = true; final List _positionList = ['auto', 'bottom', 'left', 'right', 'top'].toList(); @@ -115,9 +86,9 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -136,7 +107,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.4 @@ -146,9 +117,9 @@ class _FrontPanelState extends State { context: context, radius: 20.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 220, @@ -321,7 +292,7 @@ class _FrontPanelState extends State { )))); } - void onPositionTypeChange(String item, SampleListModel model) { + void onPositionTypeChange(String item, SampleModel model) { setState(() { _selectedPosition = item; if (_selectedPosition == 'auto') { @@ -344,7 +315,7 @@ class _FrontPanelState extends State { }); } - void onModeTypeChange(String item, SampleListModel model) { + void onModeTypeChange(String item, SampleModel model) { setState(() { _selectedMode = item; if (_selectedMode == 'wrap') { @@ -362,120 +333,3 @@ class _FrontPanelState extends State { } } -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -List> getPieSeries(bool isTileView) { - final List<_PieData> pieData = <_PieData>[ - _PieData('Tution Fees', 21), - _PieData('Entertainment', 21), - _PieData('Private Gifts', 8), - _PieData('Local Revenue', 21), - _PieData('Federal Revenue', 16), - _PieData('Others', 8) - ]; - return >[ - PieSeries<_PieData, String>( - dataSource: pieData, - xValueMapper: (_PieData data, _) => data.xData, - yValueMapper: (_PieData data, _) => data.yData, - startAngle: 90, - endAngle: 90, - dataLabelSettings: DataLabelSettings(isVisible: true)), - ]; -} - -class _PieData { - _PieData(this.xData, this.yData); - final String xData; - final num yData; -} - -SfCircularChart getLegendOptionsChart(bool isTileView, - [LegendPosition _position, - LegendItemOverflowMode _overflowMode, - dynamic toggleVisibility]) { - return SfCircularChart( - title: ChartTitle(text: isTileView ? '' : 'Expenses by category'), - legend: Legend( - isVisible: true, - position: _position, - overflowMode: _overflowMode, - toggleSeriesVisibility: toggleVisibility), - series: getPieSeries(isTileView), - tooltipBehavior: TooltipBehavior(enable: true), - ); -} diff --git a/lib/samples/chart/pyramid_charts/default_pyramid_chart.dart b/lib/samples/chart/pyramid_charts/default_pyramid_chart.dart index 6e158222..006fcdda 100644 --- a/lib/samples/chart/pyramid_charts/default_pyramid_chart.dart +++ b/lib/samples/chart/pyramid_charts/default_pyramid_chart.dart @@ -1,18 +1,17 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/checkbox.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; import 'package:flutter_examples/widgets/custom_button.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -import '../../../widgets/checkbox.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/model.dart'; +//ignore: must_be_immutable class PyramidDefault extends StatefulWidget { - const PyramidDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + PyramidDefault({this.sample, Key key}) : super(key: key); + SubItem sample; @override _PyramidDefaultState createState() => _PyramidDefaultState(sample); @@ -20,87 +19,56 @@ class PyramidDefault extends StatefulWidget { class _PyramidDefaultState extends State { _PyramidDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - + final SubItem sample; + @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, DefaultPyramidFrontPanel(sample)); } +} - @override - void didUpdateWidget(PyramidDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfPyramidChart getDefaultPyramidChart(bool isTileView, [PyramidMode _selectedPyramidMode, double gapRatio, bool explode]) { + return SfPyramidChart( + smartLabelMode: SmartLabelMode.shift, + title: ChartTitle(text: isTileView ? '' : 'Comparison of calories'), + tooltipBehavior: TooltipBehavior(enable: true), + series: _getPyramidSeries(isTileView, _selectedPyramidMode, gapRatio, explode), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/default_pyramid_chart.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +PyramidSeries _getPyramidSeries(bool isTileView, [PyramidMode selectedPyramidMode, double gapRatio, bool explode]) { + final List pieData = [ + ChartSampleData(x:'Walnuts', y:654), + ChartSampleData(x:'Almonds', y:575), + ChartSampleData(x:'Soybeans',y: 446), + ChartSampleData(x:'Black beans',y: 341), + ChartSampleData(x:'Mushrooms', y:296), + ChartSampleData(x:'Avacado', y:160), + ]; + return PyramidSeries( + dataSource: pieData, + height: '90%', + explode: isTileView ? false : explode, + gapRatio: isTileView ? 0 : gapRatio, + pyramidMode: isTileView ? PyramidMode.linear : selectedPyramidMode, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + dataLabelSettings: DataLabelSettings(isVisible: true,)); } -class FrontPanel extends StatefulWidget { + +class DefaultPyramidFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + DefaultPyramidFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _DefaultPyramidFrontPanelState createState() => _DefaultPyramidFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _DefaultPyramidFrontPanelState extends State { + _DefaultPyramidFrontPanelState(this.sample); + final SubItem sample; final List _pyramidMode = ['Linear', 'Surface'].toList(); PyramidMode _selectedPyramidMode = PyramidMode.linear; @@ -116,9 +84,9 @@ class _FrontPanelState extends State { } @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -127,31 +95,7 @@ class _FrontPanelState extends State { ), floatingActionButton: Stack( children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - // child: InkWell( - // onTap: () => launch( - // 'https://data.worldbank.org/indicator/sp.rur.totl.zs'), - // child: Row( - // children: [ - // Text('Source: ', - // style: TextStyle( - // fontSize: 16, color: model.textColor)), - // Text('data.worldbank.org', - // style: TextStyle( - // fontSize: 14, color: Colors.blue)), - // ], - // ), - // ), - ), - ), - ), - Align( + Align( alignment: Alignment.bottomRight, child: FloatingActionButton( heroTag: null, @@ -177,7 +121,7 @@ class _FrontPanelState extends State { } }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -187,9 +131,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -366,119 +310,3 @@ class _FrontPanelState extends State { ))))))); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfPyramidChart getDefaultPyramidChart(bool isTileView, [PyramidMode _selectedPyramidMode, double gapRatio, bool explode]) { - return SfPyramidChart( - - smartLabelMode: SmartLabelMode.shift, - title: ChartTitle(text: isTileView ? '' : 'Comparison of calories'), - tooltipBehavior: TooltipBehavior(enable: true), - series: _getPyramidSeries(isTileView, _selectedPyramidMode, gapRatio, explode), - ); -} - -PyramidSeries<_PyramidData, String> _getPyramidSeries(bool isTileView, [PyramidMode selectedPyramidMode, double gapRatio, bool explode]) { - final List<_PyramidData> pieData = <_PyramidData>[ - _PyramidData('Walnuts', 654), - _PyramidData('Almonds', 575), - _PyramidData('Soybeans', 446), - _PyramidData('Black beans', 341), - _PyramidData('Mushrooms', 296), - _PyramidData('Avacado', 160), - ]; - return PyramidSeries<_PyramidData, String>( - dataSource: pieData, - height: '90%', - explode: isTileView ? false : explode, - gapRatio: isTileView ? 0 : gapRatio, - pyramidMode: isTileView ? PyramidMode.linear : selectedPyramidMode, - xValueMapper: (_PyramidData data, _) => data.xData, - yValueMapper: (_PyramidData data, _) => data.yData, - dataLabelSettings: DataLabelSettings(isVisible: true,)); -} - -class _PyramidData { - _PyramidData(this.xData, this.yData, [this.text]); - final String xData; - final num yData; - final String text; -} diff --git a/lib/samples/chart/pyramid_charts/pyramid_with_legend.dart b/lib/samples/chart/pyramid_charts/pyramid_with_legend.dart index d08a97dd..dde69d94 100644 --- a/lib/samples/chart/pyramid_charts/pyramid_with_legend.dart +++ b/lib/samples/chart/pyramid_charts/pyramid_with_legend.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class PyramidLegend extends StatefulWidget { - const PyramidLegend(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + PyramidLegend({this.sample, Key key}) : super(key: key); + SubItem sample; @override _PyramidLegendState createState() => _PyramidLegendState(sample); @@ -15,176 +14,11 @@ class PyramidLegend extends StatefulWidget { class _PyramidLegendState extends State { _PyramidLegendState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(PyramidLegend oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/pyramid_with_legend.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem sample; - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getLegendPyramidChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getLegendPyramidChart(false), sample); } } @@ -212,42 +46,36 @@ SfPyramidChart getLegendPyramidChart(bool isTileView) { ); } -PyramidSeries<_PyramidData, String> _getPyramidSeries(bool isTileView) { - final List<_PyramidData> pieData = <_PyramidData>[ - _PyramidData('Ray', 7.3), - _PyramidData( - 'Michael', - 6.6, +PyramidSeries _getPyramidSeries(bool isTileView) { + final List pieData = [ + ChartSampleData(x:'Ray', y:7.3), + ChartSampleData( + x:'Michael', + y:6.6, ), - _PyramidData( - 'John ', - 3, + ChartSampleData( + x:'John ', + y: 3, ), - _PyramidData( - 'Mercy', - 0.8, + ChartSampleData( + x:'Mercy', + y:0.8, ), - _PyramidData( - 'Tina ', - 1.4, + ChartSampleData( + x:'Tina ', + y:1.4, ), - _PyramidData( - 'Stephen', - 5.2, + ChartSampleData( + x:'Stephen', + y:5.2, ), ]; - return PyramidSeries<_PyramidData, String>( + return PyramidSeries( dataSource: pieData, - xValueMapper: (_PyramidData data, _) => data.xData, - yValueMapper: (_PyramidData data, _) => data.yData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: isTileView ? false : true, labelPosition: ChartDataLabelPosition.inside)); } -class _PyramidData { - _PyramidData(this.xData, this.yData, [this.text]); - final String xData; - final num yData; - final String text; -} diff --git a/lib/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart b/lib/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart index f6e1ab00..e447e560 100644 --- a/lib/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart +++ b/lib/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart @@ -1,104 +1,131 @@ -import 'package:intl/intl.dart'; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:intl/intl.dart'; import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class PyramidSmartLabels extends StatefulWidget { - const PyramidSmartLabels(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + PyramidSmartLabels({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _PyramidSmartLabelState createState() => _PyramidSmartLabelState(sample); } class _PyramidSmartLabelState extends State { _PyramidSmartLabelState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + final SubItem sample; @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, PyramidSmartLabelsFrontPanel(sample)); } +} - @override - void didUpdateWidget(PyramidSmartLabels oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfPyramidChart getPyramidSmartLabelChart(bool isTileView, + [ChartDataLabelPosition _labelPosition, SmartLabelMode _mode]) { + return SfPyramidChart( + onTooltipRender: (TooltipArgs args) { + final NumberFormat format = NumberFormat.decimalPattern(); + args.text = format.format(args.dataPoints[args.pointIndex].y).toString(); + }, + title: + ChartTitle(text: isTileView ? '' : 'Top 10 populated countries - 2019'), + tooltipBehavior: TooltipBehavior(enable: true), + smartLabelMode: isTileView ? SmartLabelMode.shift : _mode, + series: _getPyramidSeries( + isTileView, + _labelPosition, + ), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/pyramid_charts/pyramid_with_smart_labels.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +PyramidSeries _getPyramidSeries(bool isTileView, + [ChartDataLabelPosition _labelPosition, + LabelIntersectAction _labelIntersectAction]) { + final List pieData = [ + ChartSampleData( + x: 'Mexico', + y: 127575529, + text: null, + pointColor: const Color.fromRGBO(238, 238, 238, 1)), + ChartSampleData( + x: 'Russia ', + y: 145872256, + text: null, + pointColor: const Color.fromRGBO(255, 240, 219, 1)), + ChartSampleData( + x: 'Bangladesh', + y: 163046161, + text: null, + pointColor: const Color.fromRGBO(255, 205, 96, 1)), + ChartSampleData( + x: 'Nigeria ', + y: 200963599, + text: null, + pointColor: const Color.fromRGBO(73, 76, 162, 1)), + ChartSampleData( + x: 'Brazil', + y: 211049527, + text: null, + pointColor: const Color.fromRGBO(0, 168, 181, 1)), + ChartSampleData( + x: 'Pakistan ', + y: 216565318, + text: null, + pointColor: const Color.fromRGBO(116, 180, 155, 1)), + ChartSampleData( + x: 'Indonesia', + y: 270625568, + text: null, + pointColor: const Color.fromRGBO(248, 177, 149, 1)), + ChartSampleData( + x: 'US', + y: 329064917, + text: null, + pointColor: const Color.fromRGBO(246, 114, 128, 1)), + ChartSampleData( + x: 'India', + y: 1366417754, + text: null, + pointColor: const Color.fromRGBO(192, 108, 132, 1)), + ChartSampleData( + x: 'China', + y: 1433783686, + text: null, + pointColor: const Color.fromRGBO(53, 92, 125, 1)), + ]; + return PyramidSeries( + width: '60%', + dataSource: pieData, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + textFieldMapper: (ChartSampleData data, _) => data.x, + pointColorMapper: (ChartSampleData data, _) => data.pointColor, + dataLabelSettings: DataLabelSettings( + isVisible: true, + labelPosition: + isTileView ? ChartDataLabelPosition.outside : _labelPosition, + useSeriesColor: true)); } -class FrontPanel extends StatefulWidget { +class PyramidSmartLabelsFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + PyramidSmartLabelsFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _PyramidSmartLabelsFrontPanelState createState() => _PyramidSmartLabelsFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _PyramidSmartLabelsFrontPanelState extends State { + _PyramidSmartLabelsFrontPanelState(this.sample); + final SubItem sample; final List _labelPositon = ['outside', 'inside'].toList(); ChartDataLabelPosition _selectedLabelPosition = ChartDataLabelPosition.outside; String _selectedPosition; @@ -116,9 +143,9 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -178,7 +205,7 @@ class _FrontPanelState extends State { }); } - void onSmartLabelModeChange(String item, SampleListModel model) { + void onSmartLabelModeChange(String item, SampleModel model) { setState(() { _smartLabelMode = item; if (_smartLabelMode == 'shift') { @@ -193,7 +220,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -203,9 +230,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -356,138 +383,4 @@ class _FrontPanelState extends State { ]), ))))))); } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfPyramidChart getPyramidSmartLabelChart(bool isTileView, - [ChartDataLabelPosition _labelPosition, SmartLabelMode _mode]) { - return SfPyramidChart( - onTooltipRender: (TooltipArgs args) { - final NumberFormat format = NumberFormat.decimalPattern(); - args.text = format.format(args.dataPoints[args.pointIndex].y).toString(); - }, - title: - ChartTitle(text: isTileView ? '' : 'Top 10 populated countries - 2019'), - tooltipBehavior: TooltipBehavior(enable: true), - smartLabelMode: isTileView ? SmartLabelMode.shift : _mode, - series: _getPyramidSeries( - isTileView, - _labelPosition, - ), - ); -} - -PyramidSeries<_PyramidData, String> _getPyramidSeries(bool isTileView, - [ChartDataLabelPosition _labelPosition, - LabelIntersectAction _labelIntersectAction]) { - final List<_PyramidData> pieData = <_PyramidData>[ - _PyramidData('Mexico', 127575529, null, const Color.fromRGBO(238, 238, 238, 1)), - _PyramidData('Russia ', 145872256, null, const Color.fromRGBO(255, 240, 219, 1)), - _PyramidData( - 'Bangladesh', 163046161, null, const Color.fromRGBO(255, 205, 96, 1)), - _PyramidData('Nigeria ', 200963599, null, const Color.fromRGBO(73, 76, 162, 1)), - _PyramidData('Brazil', 211049527, null, const Color.fromRGBO(0, 168, 181, 1)), - _PyramidData( - 'Pakistan ', 216565318, null, const Color.fromRGBO(116, 180, 155, 1)), - _PyramidData( - 'Indonesia', 270625568, null, const Color.fromRGBO(248, 177, 149, 1)), - _PyramidData('US', 329064917, null, const Color.fromRGBO(246, 114, 128, 1)), - _PyramidData('India', 1366417754, null, const Color.fromRGBO(192, 108, 132, 1)), - _PyramidData('China', 1433783686, null, const Color.fromRGBO(53, 92, 125, 1)), - ]; - return PyramidSeries<_PyramidData, String>( - width: '60%', - dataSource: pieData, - xValueMapper: (_PyramidData data, _) => data.xData, - yValueMapper: (_PyramidData data, _) => data.yData, - textFieldMapper: (_PyramidData data, _) => data.xData, - pointColorMapper: (_PyramidData data, _) => data.color, - dataLabelSettings: DataLabelSettings( - isVisible: true, - labelPosition: isTileView ? ChartDataLabelPosition.outside : _labelPosition, - useSeriesColor: true)); -} - -class _PyramidData { - _PyramidData(this.xData, this.yData, [this.text, this.color]); - final String xData; - final num yData; - final String text; - final Color color; -} +} \ No newline at end of file diff --git a/lib/samples/chart/series_features/animation/dynamic_animation.dart b/lib/samples/chart/series_features/animation/dynamic_animation.dart index b30dfa8e..7aff8cd1 100644 --- a/lib/samples/chart/series_features/animation/dynamic_animation.dart +++ b/lib/samples/chart/series_features/animation/dynamic_animation.dart @@ -1,18 +1,20 @@ import 'dart:async'; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; + Timer timer; +//ignore: must_be_immutable class CartesianDynamicAnimation extends StatefulWidget { - const CartesianDynamicAnimation(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + CartesianDynamicAnimation({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _CartesianDynamicAnimationState createState() => _CartesianDynamicAnimationState(sample); @@ -20,19 +22,7 @@ class CartesianDynamicAnimation extends StatefulWidget { class _CartesianDynamicAnimationState extends State { _CartesianDynamicAnimationState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + final SubItem sample; @override void dispose() { @@ -41,82 +31,233 @@ class _CartesianDynamicAnimationState extends State { } @override - void didUpdateWidget(CartesianDynamicAnimation oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); + Widget build(BuildContext context) { + return getScopedModel(null, sample, DynamicFrontPanel(sample)); } +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - toggleFrontLayer: false, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/animation/dynamic_animation.dart'); - }, - ), - ), - ), - - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); +SfCartesianChart getDynamicAnimationChart(bool isTileView, + [String _selectedType]) { + return SfCartesianChart( + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + ), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), + interval: 20, + maximum: 80, + majorTickLines: MajorTickLines(size: 0)), + series: getAnimationData(isTileView, isTileView ? 'Column' : _selectedType), + ); +} + +List> getAnimationData( + bool isTileView, String _selectedseriesType) { + if (_selectedseriesType == 'Line') { + return >[ + LineSeries( + dataSource: chartData, + color: const Color.fromRGBO(0, 168, 181, 1), + width: 2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + markerSettings: MarkerSettings( + isVisible: false, + height: 5, + width: 5, + color: Colors.white, + shape: DataMarkerType.circle, + borderWidth: 3, + borderColor: Colors.blue), + dataLabelSettings: DataLabelSettings( + color: Colors.blue, + alignment: ChartAlignment.near, + isVisible: false), + ) + ]; + } else if (_selectedseriesType == 'Column') { + return >[ + ColumnSeries( + dataSource: chartData, + color: const Color.fromRGBO(0, 168, 181, 1), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + markerSettings: MarkerSettings( + isVisible: false, + height: 5, + width: 5, + color: Colors.white, + shape: DataMarkerType.circle, + borderWidth: 3, + borderColor: Colors.blue), + dataLabelSettings: DataLabelSettings( + color: Colors.blue, + alignment: ChartAlignment.near, + isVisible: false), + borderRadius: const BorderRadius.all(Radius.circular(20)), + ) + ]; + } else if (_selectedseriesType == 'Spline') { + return >[ + SplineSeries( + dataSource: chartData, + color: const Color.fromRGBO(0, 168, 181, 1), + width: 2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + markerSettings: MarkerSettings( + isVisible: false, + height: 5, + width: 5, + color: Colors.white, + shape: DataMarkerType.circle, + borderWidth: 3, + borderColor: Colors.blue), + dataLabelSettings: DataLabelSettings( + color: Colors.blue, + alignment: ChartAlignment.near, + isVisible: false), + ) + ]; + } else if (_selectedseriesType == 'Area') { + return >[ + AreaSeries( + dataSource: chartData, + color: const Color.fromRGBO(0, 168, 181, 1), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + dataLabelSettings: DataLabelSettings( + color: Colors.blue, + alignment: ChartAlignment.near, + isVisible: false), + markerSettings: MarkerSettings( + isVisible: false, + height: 5, + width: 5, + color: Colors.white, + shape: DataMarkerType.circle, + borderWidth: 3, + borderColor: Colors.blue), + ) + ]; + } else if (_selectedseriesType == 'StepLine') { + return >[ + StepLineSeries( + dataSource: chartData, + width: 2, + color: const Color.fromRGBO(0, 168, 181, 1), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + dataLabelSettings: DataLabelSettings( + color: Colors.blue, + alignment: ChartAlignment.center, + labelAlignment: ChartDataLabelAlignment.auto, + isVisible: false), + markerSettings: MarkerSettings( + isVisible: false, + height: 5, + width: 5, + color: Colors.white, + shape: DataMarkerType.circle, + borderWidth: 3, + borderColor: Colors.blue), + ) + ]; + } else if (_selectedseriesType == 'Bar') { + return >[ + BarSeries( + dataSource: chartData, + color: const Color.fromRGBO(0, 168, 181, 1), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + dataLabelSettings: DataLabelSettings( + color: Colors.blue, + alignment: ChartAlignment.center, + labelAlignment: ChartDataLabelAlignment.auto, + isVisible: false), + borderRadius: const BorderRadius.all(Radius.circular(20)), + markerSettings: MarkerSettings( + isVisible: false, + height: 5, + width: 5, + color: Colors.white, + shape: DataMarkerType.circle, + borderWidth: 3, + borderColor: Colors.blue), + ) + ]; + } else if (_selectedseriesType == 'Scatter') { + return >[ + ScatterSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + color: const Color.fromRGBO(0, 168, 181, 1), + dataLabelSettings: DataLabelSettings( + color: Colors.blue, + alignment: ChartAlignment.center, + labelAlignment: ChartDataLabelAlignment.auto, + isVisible: false), + markerSettings: MarkerSettings( + isVisible: false, + height: 10, + width: 10, + color: Colors.white, + shape: DataMarkerType.circle, + borderWidth: 3, + borderColor: Colors.blue), + ) + ]; + } else if (_selectedseriesType == 'Bubble') { + return >[ + BubbleSeries( + dataSource: chartData, + color: const Color.fromRGBO(0, 168, 181, 1), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + sizeValueMapper: (ChartSampleData sales, _) => sales.y, + dataLabelSettings: DataLabelSettings( + color: Colors.blue, + alignment: ChartAlignment.center, + labelAlignment: ChartDataLabelAlignment.auto, + isVisible: false), + markerSettings: MarkerSettings( + isVisible: false, + height: 5, + width: 5, + color: Colors.white, + shape: DataMarkerType.circle, + borderWidth: 3, + borderColor: Colors.blue), + ) + ]; } + + return null; } -class FrontPanel extends StatefulWidget { +List chartData = [ + ChartSampleData(x: '1', y: 45, pointColor: Colors.yellow), + ChartSampleData(x: '2', y: 52, pointColor: Colors.teal), + ChartSampleData(x: '3', y: 41, pointColor: Colors.blue), + ChartSampleData(x: '4', y: 65, pointColor: Colors.orange), + ChartSampleData(x: '5', y: 36, pointColor: Colors.pink), + ChartSampleData(x: '6', y: 65, pointColor: Colors.brown[300]), +]; + +class DynamicFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - + DynamicFrontPanel(this.subItemList); + final SubItem subItemList; + @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _DynamicFrontPanelState createState() => _DynamicFrontPanelState(subItemList); } -List<_DynamicData> chartData = <_DynamicData>[ - _DynamicData('1', 45, Colors.yellow), - _DynamicData('2', 52, Colors.teal), - _DynamicData('3', 41, Colors.blue), - _DynamicData('4', 65, Colors.orange), - _DynamicData('5', 36, Colors.pink), - _DynamicData('6', 65, Colors.brown[300]), -]; - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; - // List<_DynamicData> chartData; +class _DynamicFrontPanelState extends State { + _DynamicFrontPanelState(this.sample); + final SubItem sample; + // List chartData; int count = 0; final List _seriesType = [ 'Column', @@ -131,7 +272,6 @@ class _FrontPanelState extends State { String _selectedType = 'Column'; - @override Widget build(BuildContext context) { chartData = getChartData(); @@ -140,11 +280,11 @@ class _FrontPanelState extends State { chartData = getChartData(); }); }); - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -182,21 +322,21 @@ class _FrontPanelState extends State { }); } - void onSeriesTypeChange(String item, SampleListModel model) { + void onSeriesTypeChange(String item, SampleModel model) { setState(() { _selectedType = item; }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { showRoundedModalBottomSheet( dismissOnTap: false, context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 120, @@ -296,35 +436,35 @@ class _FrontPanelState extends State { ))))))); } - List<_DynamicData> getChartData() { + List getChartData() { if (count == 0) { - chartData = <_DynamicData>[ - _DynamicData('1', 76, Colors.yellow), - _DynamicData('2', 50, Colors.teal), - _DynamicData('3', 60, Colors.blue), - _DynamicData('4', 32, Colors.orange), - _DynamicData('5', 29, Colors.pink), - _DynamicData('6', 20, Colors.brown[300]), + chartData = [ + ChartSampleData(x: '1', y: 76, pointColor: Colors.yellow), + ChartSampleData(x: '2', y: 50, pointColor: Colors.teal), + ChartSampleData(x: '3', y: 60, pointColor: Colors.blue), + ChartSampleData(x: '4', y: 32, pointColor: Colors.orange), + ChartSampleData(x: '5', y: 29, pointColor: Colors.pink), + ChartSampleData(x: '6', y: 20, pointColor: Colors.brown[300]), ]; count++; } else if (count == 1) { - chartData = <_DynamicData>[ - _DynamicData('1', 36, Colors.yellow), - _DynamicData('2', 10, Colors.teal), - _DynamicData('3', 20, Colors.blue), - _DynamicData('4', 50, Colors.orange), - _DynamicData('5', 19, Colors.pink), - _DynamicData('6', 67, Colors.brown[300]), + chartData = [ + ChartSampleData(x: '1', y: 36, pointColor: Colors.yellow), + ChartSampleData(x: '2', y: 10, pointColor: Colors.teal), + ChartSampleData(x: '3', y: 20, pointColor: Colors.blue), + ChartSampleData(x: '4', y: 50, pointColor: Colors.orange), + ChartSampleData(x: '5', y: 19, pointColor: Colors.pink), + ChartSampleData(x: '6', y: 67, pointColor: Colors.brown[300]), ]; count++; } else if (count == 2) { - chartData = <_DynamicData>[ - _DynamicData('1', 40, Colors.yellow), - _DynamicData('2', 60, Colors.teal), - _DynamicData('3', 35, Colors.blue), - _DynamicData('4', 12, Colors.orange), - _DynamicData('5', 65, Colors.pink), - _DynamicData('6', 40, Colors.brown[300]), + chartData = [ + ChartSampleData(x: '1', y: 40, pointColor: Colors.yellow), + ChartSampleData(x: '2', y: 60, pointColor: Colors.teal), + ChartSampleData(x: '3', y: 35, pointColor: Colors.blue), + ChartSampleData(x: '4', y: 12, pointColor: Colors.orange), + ChartSampleData(x: '5', y: 65, pointColor: Colors.pink), + ChartSampleData(x: '6', y: 40, pointColor: Colors.brown[300]), ]; count = 0; } @@ -334,288 +474,3 @@ class _FrontPanelState extends State { return chartData; } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - // _selectedseriesType = _seriesTypes.first; - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDynamicAnimationChart(bool isTileView, - [String _selectedType]) { - return SfCartesianChart( - primaryXAxis: CategoryAxis( - majorGridLines: MajorGridLines(width: 0), - ), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), - interval: 20, - maximum: 80, - majorTickLines: MajorTickLines(size: 0)), - series: getAnimationData(isTileView, isTileView ? 'Column' : _selectedType), - ); -} - -List> getAnimationData( - bool isTileView, String _selectedseriesType) { - if (_selectedseriesType == 'Line') { - return >[ - LineSeries<_DynamicData, String>( - dataSource: chartData, - color: const Color.fromRGBO(0, 168, 181, 1), - width: 2, - xValueMapper: (_DynamicData sales, _) => sales.country, - yValueMapper: (_DynamicData sales, _) => sales.sales, - markerSettings: MarkerSettings( - isVisible: false, - height: 5, - width: 5, - color: Colors.white, - shape: DataMarkerType.circle, - borderWidth: 3, - borderColor: Colors.blue), - dataLabelSettings: DataLabelSettings( - color: Colors.blue, - alignment: ChartAlignment.near, - isVisible: false), - ) - ]; - } else if (_selectedseriesType == 'Column') { - return >[ - ColumnSeries<_DynamicData, String>( - dataSource: chartData, - color: const Color.fromRGBO(0, 168, 181, 1), - xValueMapper: (_DynamicData sales, _) => sales.country, - yValueMapper: (_DynamicData sales, _) => sales.sales, - markerSettings: MarkerSettings( - isVisible: false, - height: 5, - width: 5, - color: Colors.white, - shape: DataMarkerType.circle, - borderWidth: 3, - borderColor: Colors.blue), - dataLabelSettings: DataLabelSettings( - color: Colors.blue, - alignment: ChartAlignment.near, - isVisible: false), - borderRadius: const BorderRadius.all(Radius.circular(20)), - ) - ]; - } else if (_selectedseriesType == 'Spline') { - return >[ - SplineSeries<_DynamicData, String>( - dataSource: chartData, - color: const Color.fromRGBO(0, 168, 181, 1), - width: 2, - xValueMapper: (_DynamicData sales, _) => sales.country, - yValueMapper: (_DynamicData sales, _) => sales.sales, - markerSettings: MarkerSettings( - isVisible: false, - height: 5, - width: 5, - color: Colors.white, - shape: DataMarkerType.circle, - borderWidth: 3, - borderColor: Colors.blue), - dataLabelSettings: DataLabelSettings( - color: Colors.blue, - alignment: ChartAlignment.near, - isVisible: false), - ) - ]; - } else if (_selectedseriesType == 'Area') { - return >[ - AreaSeries<_DynamicData, String>( - dataSource: chartData, - color: const Color.fromRGBO(0, 168, 181, 1), - xValueMapper: (_DynamicData sales, _) => sales.country, - yValueMapper: (_DynamicData sales, _) => sales.sales, - dataLabelSettings: DataLabelSettings( - color: Colors.blue, - alignment: ChartAlignment.near, - isVisible: false), - markerSettings: MarkerSettings( - isVisible: false, - height: 5, - width: 5, - color: Colors.white, - shape: DataMarkerType.circle, - borderWidth: 3, - borderColor: Colors.blue), - ) - ]; - } else if (_selectedseriesType == 'StepLine') { - return >[ - StepLineSeries<_DynamicData, String>( - dataSource: chartData, - width: 2, - color: const Color.fromRGBO(0, 168, 181, 1), - xValueMapper: (_DynamicData sales, _) => sales.country, - yValueMapper: (_DynamicData sales, _) => sales.sales, - dataLabelSettings: DataLabelSettings( - color: Colors.blue, - alignment: ChartAlignment.center, - labelAlignment: ChartDataLabelAlignment.auto, - isVisible: false), - markerSettings: MarkerSettings( - isVisible: false, - height: 5, - width: 5, - color: Colors.white, - shape: DataMarkerType.circle, - borderWidth: 3, - borderColor: Colors.blue), - ) - ]; - } else if (_selectedseriesType == 'Bar') { - return >[ - BarSeries<_DynamicData, String>( - dataSource: chartData, - color: const Color.fromRGBO(0, 168, 181, 1), - xValueMapper: (_DynamicData sales, _) => sales.country, - yValueMapper: (_DynamicData sales, _) => sales.sales, - dataLabelSettings: DataLabelSettings( - color: Colors.blue, - alignment: ChartAlignment.center, - labelAlignment: ChartDataLabelAlignment.auto, - isVisible: false), - borderRadius: const BorderRadius.all(Radius.circular(20)), - markerSettings: MarkerSettings( - isVisible: false, - height: 5, - width: 5, - color: Colors.white, - shape: DataMarkerType.circle, - borderWidth: 3, - borderColor: Colors.blue), - ) - ]; - } else if (_selectedseriesType == 'Scatter') { - return >[ - ScatterSeries<_DynamicData, String>( - dataSource: chartData, - xValueMapper: (_DynamicData sales, _) => sales.country, - yValueMapper: (_DynamicData sales, _) => sales.sales, - color: const Color.fromRGBO(0, 168, 181, 1), - dataLabelSettings: DataLabelSettings( - color: Colors.blue, - alignment: ChartAlignment.center, - labelAlignment: ChartDataLabelAlignment.auto, - isVisible: false), - markerSettings: MarkerSettings( - isVisible: false, - height: 10, - width: 10, - color: Colors.white, - shape: DataMarkerType.circle, - borderWidth: 3, - borderColor: Colors.blue), - ) - ]; - } else if (_selectedseriesType == 'Bubble') { - return >[ - BubbleSeries<_DynamicData, String>( - dataSource: chartData, - color: const Color.fromRGBO(0, 168, 181, 1), - xValueMapper: (_DynamicData sales, _) => sales.country, - yValueMapper: (_DynamicData sales, _) => sales.sales, - sizeValueMapper: (_DynamicData sales, _) => sales.sales, - dataLabelSettings: DataLabelSettings( - color: Colors.blue, - alignment: ChartAlignment.center, - labelAlignment: ChartDataLabelAlignment.auto, - isVisible: false), - markerSettings: MarkerSettings( - isVisible: false, - height: 5, - width: 5, - color: Colors.white, - shape: DataMarkerType.circle, - borderWidth: 3, - borderColor: Colors.blue), - ) - ]; - } - - return null; -} - -class _DynamicData { - _DynamicData(this.country, this.sales, this.pointColor); - final String country; - final double sales; - final Color pointColor; -} diff --git a/lib/samples/chart/series_features/animation/series_animation.dart b/lib/samples/chart/series_features/animation/series_animation.dart index 703da305..89841b1b 100755 --- a/lib/samples/chart/series_features/animation/series_animation.dart +++ b/lib/samples/chart/series_features/animation/series_animation.dart @@ -1,191 +1,23 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class AnimationDefault extends StatefulWidget { - const AnimationDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + AnimationDefault({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _AnimationDefaultState createState() => _AnimationDefaultState(sample); } class _AnimationDefaultState extends State { _AnimationDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(AnimationDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - toggleFrontLayer: false, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/animation/series_animation.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultAnimationChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultAnimationChart(false), sample); } } @@ -210,42 +42,36 @@ SfCartesianChart getDefaultAnimationChart(bool isTileView) { minimum: 0, maximum: 7000) ], - series: getLineSeries(isTileView), + series: getDefaultAnimationSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getLineSeries(bool isTileView) { - final List<_AnimationData> chartData = <_AnimationData>[ - _AnimationData('Jan', 45, 1000), - _AnimationData('Feb', 100, 3000), - _AnimationData('March', 25, 1000), - _AnimationData('April', 100, 7000), - _AnimationData('May', 85, 5000), - _AnimationData('June', 140, 7000) +List> getDefaultAnimationSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'Jan', y: 45, yValue2: 1000), + ChartSampleData(x: 'Feb', y: 100, yValue2: 3000), + ChartSampleData(x: 'March', y: 25, yValue2: 1000), + ChartSampleData(x: 'April', y: 100, yValue2: 7000), + ChartSampleData(x: 'May', y: 85, yValue2: 5000), + ChartSampleData(x: 'June', y: 140, yValue2: 7000) ]; - return >[ - ColumnSeries<_AnimationData, String>( + return >[ + ColumnSeries( animationDuration: 2000, dataSource: chartData, - xValueMapper: (_AnimationData sales, _) => sales.month, - yValueMapper: (_AnimationData sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, name: 'Unit Sold'), - LineSeries<_AnimationData, String>( + LineSeries( animationDuration: 4500, dataSource: chartData, width: 2, - xValueMapper: (_AnimationData sales, _) => sales.month, - yValueMapper: (_AnimationData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, yAxisName: 'yAxis1', markerSettings: MarkerSettings(isVisible: true), name: 'Total Transaction') ]; } - -class _AnimationData { - _AnimationData(this.month, this.y1, this.y2); - final String month; - final double y1; - final double y2; -} diff --git a/lib/samples/chart/series_features/annotation/chart_with_annotation.dart b/lib/samples/chart/series_features/annotation/chart_with_annotation.dart index 4edd2c79..64e269d6 100755 --- a/lib/samples/chart/series_features/annotation/chart_with_annotation.dart +++ b/lib/samples/chart/series_features/annotation/chart_with_annotation.dart @@ -1,210 +1,26 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:flutter_examples/model/helper.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class AnnotationWatermark extends StatefulWidget { - const AnnotationWatermark(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + AnnotationWatermark({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _AnnotationWatermarkState createState() => _AnnotationWatermarkState(sample); } class _AnnotationWatermarkState extends State { _AnnotationWatermarkState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(AnnotationWatermark oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/annotation/chart_with_annotation.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} + final SubItem sample; -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getWatermarkAnnotationChart(false)), - ), - ); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getWatermarkAnnotationChart(false), sample); } } @@ -223,37 +39,51 @@ SfCartesianChart getWatermarkAnnotationChart(bool isTileView) { maximum: 120, axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(width: 0)), - series: getLineSeries(isTileView), + series: getWatermarkAnnotationSeries(isTileView), annotations: [ CartesianChartAnnotation( widget: Container( height: isTileView ? 100 : 150, width: isTileView ? 100 : 150, child: SfCircularChart( - series: >[ - PieSeries<_ChartData, String>( + series: >[ + PieSeries( radius: '90%', enableSmartLabels: false, - dataSource: <_ChartData>[ - _ChartData('Facebook', 90, '90%', - const Color.fromRGBO(0, 63, 92, 1)), - _ChartData('Twitter', 60, '60%', - const Color.fromRGBO(242, 117, 7, 1)), - _ChartData('Instagram', 51, '51%', - const Color.fromRGBO(89, 59, 84, 1)), - _ChartData('Snapchat', 50, '50%', - const Color.fromRGBO(217, 67, 80, 1)), + dataSource: [ + ChartSampleData( + x: 'Facebook', + y: 90, + xValue: '90%', + pointColor: const Color.fromRGBO(0, 63, 92, 1)), + ChartSampleData( + x: 'Twitter', + y: 60, + xValue: '60%', + pointColor: const Color.fromRGBO(242, 117, 7, 1)), + ChartSampleData( + x: 'Instagram', + y: 51, + xValue: '51%', + pointColor: const Color.fromRGBO(89, 59, 84, 1)), + ChartSampleData( + x: 'Snapchat', + y: 50, + xValue: '50%', + pointColor: const Color.fromRGBO(217, 67, 80, 1)), ], - dataLabelMapper: (_ChartData data, _) => data.text, - xValueMapper: (_ChartData data, _) => data.x, - yValueMapper: (_ChartData data, _) => data.y, + dataLabelMapper: (ChartSampleData data, _) => + data.xValue, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, dataLabelSettings: DataLabelSettings( isVisible: true, labelIntersectAction: LabelIntersectAction.none, textStyle: ChartTextStyle( color: Colors.white, fontSize: isTileView ? 10 : 12)), - pointColorMapper: (_ChartData data, _) => data.color) + pointColorMapper: (ChartSampleData data, _) => + data.pointColor) ], )), coordinateUnit: CoordinateUnit.point, @@ -263,19 +93,36 @@ SfCartesianChart getWatermarkAnnotationChart(bool isTileView) { ]); } -List> getLineSeries(bool isTileView) { - final dynamic chartData = <_ChartData>[ - _ChartData('Facebook', 90, '90', const Color.fromRGBO(0, 63, 92, 1)), - _ChartData('Twitter', 60, '60', const Color.fromRGBO(242, 117, 7, 1)), - _ChartData('Instagram', 51, '51', const Color.fromRGBO(89, 59, 84, 1)), - _ChartData('Snapchat', 50, '50', const Color.fromRGBO(217, 67, 80, 1)), +List> getWatermarkAnnotationSeries( + bool isTileView) { + final dynamic chartData = [ + ChartSampleData( + x: 'Facebook', + y: 90, + xValue: '90', + pointColor: const Color.fromRGBO(0, 63, 92, 1)), + ChartSampleData( + x: 'Twitter', + y: 60, + xValue: '60', + pointColor: const Color.fromRGBO(242, 117, 7, 1)), + ChartSampleData( + x: 'Instagram', + y: 51, + xValue: '51', + pointColor: const Color.fromRGBO(89, 59, 84, 1)), + ChartSampleData( + x: 'Snapchat', + y: 50, + xValue: '50', + pointColor: const Color.fromRGBO(217, 67, 80, 1)), ]; - return >[ - ColumnSeries<_ChartData, String>( + return >[ + ColumnSeries( dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, - pointColorMapper: (_ChartData sales, _) => sales.color, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + pointColorMapper: (ChartSampleData sales, _) => sales.pointColor, width: 0.8, dataLabelSettings: DataLabelSettings( isVisible: true, @@ -284,11 +131,3 @@ List> getLineSeries(bool isTileView) { labelAlignment: ChartDataLabelAlignment.top)), ]; } - -class _ChartData { - _ChartData(this.x, this.y, this.text, this.color); - final String x; - final double y; - final String text; - final Color color; -} diff --git a/lib/samples/chart/series_features/annotation/chart_with_watermark.dart b/lib/samples/chart/series_features/annotation/chart_with_watermark.dart index 57a8b43d..cfbb9a82 100755 --- a/lib/samples/chart/series_features/annotation/chart_with_watermark.dart +++ b/lib/samples/chart/series_features/annotation/chart_with_watermark.dart @@ -1,220 +1,31 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class AnnotationDefault extends StatefulWidget { - const AnnotationDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + AnnotationDefault({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _AnnotationDefaultState createState() => _AnnotationDefaultState(sample); } class _AnnotationDefaultState extends State { _AnnotationDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(AnnotationDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeader: Container( - color: Colors.transparent, - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - crossAxisAlignment: CrossAxisAlignment.center, - children: const [], - )), - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/annotation/chart_with_watermark.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultAnnotationChart(false,model.theme)), - )); - }); + return getScopedModel(getDefaultAnnotationChart(false), sample); } } -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDefaultAnnotationChart(bool isTileView,[Brightness currentTheme]) { +SfCartesianChart getDefaultAnnotationChart(bool isTileView, + [Brightness currentTheme]) { return SfCartesianChart( plotAreaBorderWidth: 0, title: ChartTitle( @@ -240,7 +51,7 @@ SfCartesianChart getDefaultAnnotationChart(bool isTileView,[Brightness currentTh child: const Text( '€ - \$ ', style: TextStyle( - color:Color.fromRGBO(216, 225, 227,1), + color: Color.fromRGBO(216, 225, 227, 1), // color: currentTheme == Brightness.light? const Color.fromRGBO(0, 0, 0, 0.15) : Color.fromRGBO(255, 255, 255, 0.3), fontWeight: FontWeight.bold, fontSize: 80), @@ -255,70 +66,64 @@ SfCartesianChart getDefaultAnnotationChart(bool isTileView,[Brightness currentTh ); } -List> getAnnotationLineSeries( +List> getAnnotationLineSeries( bool isTileView) { - final List<_DateTimeData> chartData = <_DateTimeData>[ - _DateTimeData(DateTime(2015, 1, 1), 1.13), - _DateTimeData(DateTime(2015, 2, 1), 1.12), - _DateTimeData(DateTime(2015, 3, 1), 1.08), - _DateTimeData(DateTime(2015, 4, 1), 1.12), - _DateTimeData(DateTime(2015, 5, 1), 1.1), - _DateTimeData(DateTime(2015, 6, 1), 1.12), - _DateTimeData(DateTime(2015, 7, 1), 1.1), - _DateTimeData(DateTime(2015, 8, 1), 1.12), - _DateTimeData(DateTime(2015, 9, 1), 1.12), - _DateTimeData(DateTime(2015, 10, 1), 1.1), - _DateTimeData(DateTime(2015, 11, 1), 1.06), - _DateTimeData(DateTime(2015, 12, 1), 1.09), - _DateTimeData(DateTime(2016, 1, 1), 1.09), - _DateTimeData(DateTime(2016, 2, 1), 1.09), - _DateTimeData(DateTime(2016, 3, 1), 1.14), - _DateTimeData(DateTime(2016, 4, 1), 1.14), - _DateTimeData(DateTime(2016, 5, 1), 1.12), - _DateTimeData(DateTime(2016, 6, 1), 1.11), - _DateTimeData(DateTime(2016, 7, 1), 1.11), - _DateTimeData(DateTime(2016, 8, 1), 1.11), - _DateTimeData(DateTime(2016, 9, 1), 1.12), - _DateTimeData(DateTime(2016, 10, 1), 1.1), - _DateTimeData(DateTime(2016, 11, 1), 1.08), - _DateTimeData(DateTime(2016, 12, 1), 1.05), - _DateTimeData(DateTime(2017, 1, 1), 1.08), - _DateTimeData(DateTime(2017, 2, 1), 1.06), - _DateTimeData(DateTime(2017, 3, 1), 1.07), - _DateTimeData(DateTime(2017, 4, 1), 1.09), - _DateTimeData(DateTime(2017, 5, 1), 1.12), - _DateTimeData(DateTime(2017, 6, 1), 1.14), - _DateTimeData(DateTime(2017, 7, 1), 1.17), - _DateTimeData(DateTime(2017, 8, 1), 1.18), - _DateTimeData(DateTime(2017, 9, 1), 1.18), - _DateTimeData(DateTime(2017, 10, 1), 1.16), - _DateTimeData(DateTime(2017, 11, 1), 1.18), - _DateTimeData(DateTime(2017, 12, 1), 1.2), - _DateTimeData(DateTime(2018, 1, 1), 1.25), - _DateTimeData(DateTime(2018, 2, 1), 1.22), - _DateTimeData(DateTime(2018, 3, 1), 1.23), - _DateTimeData(DateTime(2018, 4, 1), 1.21), - _DateTimeData(DateTime(2018, 5, 1), 1.17), - _DateTimeData(DateTime(2018, 6, 1), 1.17), - _DateTimeData(DateTime(2018, 7, 1), 1.17), - _DateTimeData(DateTime(2018, 8, 1), 1.17), - _DateTimeData(DateTime(2018, 9, 1), 1.16), - _DateTimeData(DateTime(2018, 10, 1), 1.13), - _DateTimeData(DateTime(2018, 11, 1), 1.14), - _DateTimeData(DateTime(2018, 12, 1), 1.15) + final List chartData = [ + ChartSampleData(x: DateTime(2015, 1, 1), y: 1.13), + ChartSampleData(x: DateTime(2015, 2, 1), y: 1.12), + ChartSampleData(x: DateTime(2015, 3, 1), y: 1.08), + ChartSampleData(x: DateTime(2015, 4, 1), y: 1.12), + ChartSampleData(x: DateTime(2015, 5, 1), y: 1.1), + ChartSampleData(x: DateTime(2015, 6, 1), y: 1.12), + ChartSampleData(x: DateTime(2015, 7, 1), y: 1.1), + ChartSampleData(x: DateTime(2015, 8, 1), y: 1.12), + ChartSampleData(x: DateTime(2015, 9, 1), y: 1.12), + ChartSampleData(x: DateTime(2015, 10, 1), y: 1.1), + ChartSampleData(x: DateTime(2015, 11, 1), y: 1.06), + ChartSampleData(x: DateTime(2015, 12, 1), y: 1.09), + ChartSampleData(x: DateTime(2016, 1, 1), y: 1.09), + ChartSampleData(x: DateTime(2016, 2, 1), y: 1.09), + ChartSampleData(x: DateTime(2016, 3, 1), y: 1.14), + ChartSampleData(x: DateTime(2016, 4, 1), y: 1.14), + ChartSampleData(x: DateTime(2016, 5, 1), y: 1.12), + ChartSampleData(x: DateTime(2016, 6, 1), y: 1.11), + ChartSampleData(x: DateTime(2016, 7, 1), y: 1.11), + ChartSampleData(x: DateTime(2016, 8, 1), y: 1.11), + ChartSampleData(x: DateTime(2016, 9, 1), y: 1.12), + ChartSampleData(x: DateTime(2016, 10, 1), y: 1.1), + ChartSampleData(x: DateTime(2016, 11, 1), y: 1.08), + ChartSampleData(x: DateTime(2016, 12, 1), y: 1.05), + ChartSampleData(x: DateTime(2017, 1, 1), y: 1.08), + ChartSampleData(x: DateTime(2017, 2, 1), y: 1.06), + ChartSampleData(x: DateTime(2017, 3, 1), y: 1.07), + ChartSampleData(x: DateTime(2017, 4, 1), y: 1.09), + ChartSampleData(x: DateTime(2017, 5, 1), y: 1.12), + ChartSampleData(x: DateTime(2017, 6, 1), y: 1.14), + ChartSampleData(x: DateTime(2017, 7, 1), y: 1.17), + ChartSampleData(x: DateTime(2017, 8, 1), y: 1.18), + ChartSampleData(x: DateTime(2017, 9, 1), y: 1.18), + ChartSampleData(x: DateTime(2017, 10, 1), y: 1.16), + ChartSampleData(x: DateTime(2017, 11, 1), y: 1.18), + ChartSampleData(x: DateTime(2017, 12, 1), y: 1.2), + ChartSampleData(x: DateTime(2018, 1, 1), y: 1.25), + ChartSampleData(x: DateTime(2018, 2, 1), y: 1.22), + ChartSampleData(x: DateTime(2018, 3, 1), y: 1.23), + ChartSampleData(x: DateTime(2018, 4, 1), y: 1.21), + ChartSampleData(x: DateTime(2018, 5, 1), y: 1.17), + ChartSampleData(x: DateTime(2018, 6, 1), y: 1.17), + ChartSampleData(x: DateTime(2018, 7, 1), y: 1.17), + ChartSampleData(x: DateTime(2018, 8, 1), y: 1.17), + ChartSampleData(x: DateTime(2018, 9, 1), y: 1.16), + ChartSampleData(x: DateTime(2018, 10, 1), y: 1.13), + ChartSampleData(x: DateTime(2018, 11, 1), y: 1.14), + ChartSampleData(x: DateTime(2018, 12, 1), y: 1.15) ]; - return >[ - LineSeries<_DateTimeData, DateTime>( + return >[ + LineSeries( dataSource: chartData, - xValueMapper: (_DateTimeData data, _) => data.year, - yValueMapper: (_DateTimeData data, _) => data.y, + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, color: const Color.fromRGBO(242, 117, 7, 1), ) ]; } - -class _DateTimeData { - _DateTimeData(this.year, this.y); - final DateTime year; - final double y; -} diff --git a/lib/samples/chart/series_features/data_label/default_datalabels.dart b/lib/samples/chart/series_features/data_label/default_datalabels.dart index 161a3a84..d6b6b898 100755 --- a/lib/samples/chart/series_features/data_label/default_datalabels.dart +++ b/lib/samples/chart/series_features/data_label/default_datalabels.dart @@ -1,196 +1,28 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class DataLabelDefault extends StatefulWidget { - const DataLabelDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + DataLabelDefault({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _DataLabelDefaultState createState() => _DataLabelDefaultState(sample); } class _DataLabelDefaultState extends State { _DataLabelDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DataLabelDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/data_label/default_datalabels.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} + final SubItem sample; -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool performIntersectAction = true; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container( - child: getDataLabelDefaultChart(false, performIntersectAction)), - )); - }); + return getScopedModel(getDataLabelDefaultChart(false), sample); } } -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDataLabelDefaultChart(bool isTileView, - [bool performIntersectAction]) { +SfCartesianChart getDataLabelDefaultChart(bool isTileView) { return SfCartesianChart( title: ChartTitle(text: isTileView ? '' : 'Gross investments'), plotAreaBorderWidth: 0, @@ -207,45 +39,45 @@ SfCartesianChart getDataLabelDefaultChart(bool isTileView, labelFormat: '{value}%', axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), + series: getDataLabelDefaultSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getLineSeries( +List> getDataLabelDefaultSeries( bool isTileView, ) { - final List<_LabelData> chartData = <_LabelData>[ - _LabelData(2006, 21.8, 18.2), - _LabelData(2007, 24.9, 21), - _LabelData(2008, 28.5, 22.1), - _LabelData(2009, 27.2, 21.5), - _LabelData(2010, 23.4, 18.9), - _LabelData(2011, 23.4, 21.3) + final List chartData = [ + ChartSampleData(x: 2006, y: 21.8, yValue: 18.2), + ChartSampleData(x: 2007, y: 24.9, yValue: 21), + ChartSampleData(x: 2008, y: 28.5, yValue: 22.1), + ChartSampleData(x: 2009, y: 27.2, yValue: 21.5), + ChartSampleData(x: 2010, y: 23.4, yValue: 18.9), + ChartSampleData(x: 2011, y: 23.4, yValue: 21.3) ]; - return >[ - SplineSeries<_LabelData, num>( + return >[ + SplineSeries( legendIconType: LegendIconType.rectangle, enableTooltip: true, dataSource: chartData, color: const Color.fromRGBO(140, 198, 64, 1), width: 2, - xValueMapper: (_LabelData sales, _) => sales.x, - yValueMapper: (_LabelData sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, markerSettings: MarkerSettings(isVisible: true), name: 'Singapore', dataLabelSettings: DataLabelSettings( isVisible: true, useSeriesColor: true, labelAlignment: ChartDataLabelAlignment.top)), - SplineSeries<_LabelData, num>( + SplineSeries( legendIconType: LegendIconType.rectangle, enableTooltip: true, color: const Color.fromRGBO(203, 164, 199, 1), dataSource: chartData, width: 2, - xValueMapper: (_LabelData sales, _) => sales.x, - yValueMapper: (_LabelData sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue, markerSettings: MarkerSettings(isVisible: true), name: 'Russia', dataLabelSettings: DataLabelSettings( @@ -254,10 +86,3 @@ List> getLineSeries( labelAlignment: ChartDataLabelAlignment.top)) ]; } - -class _LabelData { - _LabelData(this.x, this.y1, this.y2); - final double x; - final double y1; - final double y2; -} diff --git a/lib/samples/chart/series_features/empty_point/chart_with_empty_points.dart b/lib/samples/chart/series_features/empty_point/chart_with_empty_points.dart index b0c26c5b..eafce4af 100755 --- a/lib/samples/chart/series_features/empty_point/chart_with_empty_points.dart +++ b/lib/samples/chart/series_features/empty_point/chart_with_empty_points.dart @@ -1,15 +1,15 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; +//ignore: must_be_immutable class EmptyPoints extends StatefulWidget { - const EmptyPoints(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + EmptyPoints({this.sample, Key key}) : super(key: key); + SubItem sample; @override _EmptyPointsState createState() => _EmptyPointsState(sample); @@ -17,89 +17,70 @@ class EmptyPoints extends StatefulWidget { class _EmptyPointsState extends State { _EmptyPointsState(this.sample); - final SubItemList sample; - - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); + final SubItem sample; @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, EmptyPointsFrontPanel(sample)); } +} - @override - void didUpdateWidget(EmptyPoints oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 20, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/empty_point/chart_with_empty_points.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +SfCartesianChart getEmptyPointChart(bool isTileView, + [EmptyPointMode _selectedEmptyPointMode]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle( + text: isTileView ? '' : 'Population growth of various countries'), + primaryXAxis: CategoryAxis( + majorGridLines: MajorGridLines(width: 0), + ), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), + labelFormat: '{value}%', + majorTickLines: MajorTickLines(size: 0)), + series: getEmptyPointSeries(isTileView, _selectedEmptyPointMode), + tooltipBehavior: + TooltipBehavior(enable: true, header: '', canShowMarker: false), + ); } -class FrontPanel extends StatefulWidget { +List> getEmptyPointSeries(bool isTileView, + [EmptyPointMode _selectedEmptyPointMode]) { + final List chartData = [ + ChartSampleData(x:'China', y:0.541), + ChartSampleData(x:'Brazil', y:null), + ChartSampleData(x:'Bolivia', y:1.51), + ChartSampleData(x:'Mexico', y:1.302), + ChartSampleData(x:'Egypt', y:null), + ChartSampleData(x:'Mongolia', y:1.683), + ]; + return >[ + ColumnSeries( + enableTooltip: true, + dataSource: chartData, + emptyPointSettings: EmptyPointSettings( + mode: isTileView ? EmptyPointMode.gap : _selectedEmptyPointMode, + color: Colors.grey), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + dataLabelSettings: DataLabelSettings( + isVisible: true, textStyle: ChartTextStyle(fontSize: 10)), + ) + ]; +} +class EmptyPointsFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + EmptyPointsFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _EmptyPointsFrontPanelState createState() => _EmptyPointsFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _EmptyPointsFrontPanelState extends State { + _EmptyPointsFrontPanelState(this.sample); + final SubItem sample; final List _emptyPointMode = ['gap', 'zero', 'average', 'drop'].toList(); EmptyPointMode _selectedEmptyPointMode = EmptyPointMode.gap; @@ -116,9 +97,9 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -162,7 +143,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -172,9 +153,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 120, @@ -272,130 +253,3 @@ class _FrontPanelState extends State { ])))))))); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getEmptyPointChart(bool isTileView, - [EmptyPointMode _selectedEmptyPointMode]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - title: ChartTitle( - text: isTileView ? '' : 'Population growth of various countries'), - primaryXAxis: CategoryAxis( - majorGridLines: MajorGridLines(width: 0), - ), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), - labelFormat: '{value}%', - majorTickLines: MajorTickLines(size: 0)), - series: getColumnSeries(isTileView, _selectedEmptyPointMode), - tooltipBehavior: - TooltipBehavior(enable: true, header: '', canShowMarker: false), - ); -} - -List> getColumnSeries(bool isTileView, - [EmptyPointMode _selectedEmptyPointMode]) { - final List<_ChartData> chartData = <_ChartData>[ - _ChartData('China', 0.541), - _ChartData('Brazil', null), - _ChartData('Bolivia', 1.51), - _ChartData('Mexico', 1.302), - _ChartData('Egypt', null), - _ChartData('Mongolia', 1.683), - ]; - return >[ - ColumnSeries<_ChartData, String>( - enableTooltip: true, - dataSource: chartData, - emptyPointSettings: EmptyPointSettings( - mode: isTileView ? EmptyPointMode.gap : _selectedEmptyPointMode, - color: Colors.grey), - xValueMapper: (_ChartData sales, _) => sales.x, - yValueMapper: (_ChartData sales, _) => sales.y, - dataLabelSettings: DataLabelSettings( - isVisible: true, textStyle: ChartTextStyle(fontSize: 10)), - ) - ]; -} - -class _ChartData { - _ChartData(this.x, this.y); - final String x; - final double y; -} diff --git a/lib/samples/chart/series_features/marker/various_marker_shapes.dart b/lib/samples/chart/series_features/marker/various_marker_shapes.dart index 91cec44f..2b77480a 100755 --- a/lib/samples/chart/series_features/marker/various_marker_shapes.dart +++ b/lib/samples/chart/series_features/marker/various_marker_shapes.dart @@ -1,190 +1,28 @@ import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; import 'package:intl/intl.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../../model/helper.dart'; +import '../../../../model/model.dart'; + +//ignore: must_be_immutable class MarkerDefault extends StatefulWidget { - const MarkerDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + MarkerDefault({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _MarkerDefaultState createState() => _MarkerDefaultState(sample); } class _MarkerDefaultState extends State { _MarkerDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(MarkerDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/marker/various_marker_shapes.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} + final SubItem sample; -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getMarkerDefaultChart(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getMarkerDefaultChart(false), sample); } } @@ -202,26 +40,33 @@ SfCartesianChart getMarkerDefaultChart(bool isTileView) { title: AxisTitle(text: isTileView ? '' : 'Count'), axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), + series: getMarkeSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getLineSeries(bool isTileView) { - final List<_ChartNumeric> chartData = <_ChartNumeric>[ - _ChartNumeric(DateTime(2018, 3, 1, 8, 0), 60, 28, 15), - _ChartNumeric(DateTime(2018, 3, 1, 8, 30), 49, 40, 28), - _ChartNumeric(DateTime(2018, 3, 1, 9, 0), 70, 32, 16), - _ChartNumeric(DateTime(2018, 3, 1, 9, 30), 56, 36, 66), - _ChartNumeric(DateTime(2018, 3, 1, 10, 0), 66, 50, 26), - _ChartNumeric(DateTime(2018, 3, 1, 10, 30), 50, 35, 14), - _ChartNumeric(DateTime(2018, 3, 1, 11, 0), 55, 32, 20), +List> getMarkeSeries(bool isTileView) { + final List chartData = [ + ChartSampleData( + x: DateTime(2018, 3, 1, 8, 0), y: 60, yValue2: 28, yValue3: 15), + ChartSampleData( + x: DateTime(2018, 3, 1, 8, 30), y: 49, yValue2: 40, yValue3: 28), + ChartSampleData( + x: DateTime(2018, 3, 1, 9, 0), y: 70, yValue2: 32, yValue3: 16), + ChartSampleData( + x: DateTime(2018, 3, 1, 9, 30), y: 56, yValue2: 36, yValue3: 66), + ChartSampleData( + x: DateTime(2018, 3, 1, 10, 0), y: 66, yValue2: 50, yValue3: 26), + ChartSampleData( + x: DateTime(2018, 3, 1, 10, 30), y: 50, yValue2: 35, yValue3: 14), + ChartSampleData( + x: DateTime(2018, 3, 1, 11, 0), y: 55, yValue2: 32, yValue3: 20), ]; - return >[ - LineSeries<_ChartNumeric, DateTime>( + return >[ + LineSeries( dataSource: chartData, - xValueMapper: (_ChartNumeric sales, _) => sales.x, - yValueMapper: (_ChartNumeric sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, width: 2, name: 'Truck', markerSettings: MarkerSettings( @@ -229,31 +74,23 @@ List> getLineSeries(bool isTileView) { shape: DataMarkerType.pentagon, image: const AssetImage('images/truck.png')), ), - LineSeries<_ChartNumeric, DateTime>( + LineSeries( dataSource: chartData, width: 2, - xValueMapper: (_ChartNumeric sales, _) => sales.x, - yValueMapper: (_ChartNumeric sales, _) => sales.y2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, name: 'Bike', markerSettings: MarkerSettings(isVisible: true, shape: DataMarkerType.triangle), ), - LineSeries<_ChartNumeric, DateTime>( + LineSeries( dataSource: chartData, width: 2, - xValueMapper: (_ChartNumeric sales, _) => sales.x, - yValueMapper: (_ChartNumeric sales, _) => sales.y3, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, name: 'Car', markerSettings: MarkerSettings(isVisible: true, shape: DataMarkerType.rectangle), ) ]; } - -class _ChartNumeric { - _ChartNumeric(this.x, this.y1, this.y2, this.y3); - final DateTime x; - final double y1; - final double y2; - final double y3; -} diff --git a/lib/samples/chart/series_features/sorting/sorting_options.dart b/lib/samples/chart/series_features/sorting/sorting_options.dart index 0ea9eade..62e8e2a8 100755 --- a/lib/samples/chart/series_features/sorting/sorting_options.dart +++ b/lib/samples/chart/series_features/sorting/sorting_options.dart @@ -1,23 +1,24 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; import 'package:url_launcher/url_launcher.dart'; +//ignore: must_be_immutable class SortingDefault extends StatefulWidget { - const SortingDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + SortingDefault({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _SortingDefaultState createState() => _SortingDefaultState(sample); } class _SortingDefaultState extends State { _SortingDefaultState(this.sample); - final SubItemList sample; + final SubItem sample; bool panelOpen; final ValueNotifier frontPanelVisible = ValueNotifier(true); @@ -30,11 +31,6 @@ class _SortingDefaultState extends State { void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - @override - void dispose() { - super.dispose(); - } - @override void didUpdateWidget(SortingDefault oldWidget) { super.didUpdateWidget(oldWidget); @@ -44,81 +40,64 @@ class _SortingDefaultState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/series_features/sorting/sorting_options.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, SortingFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { +SfCartesianChart getDefaultSortingChart(bool isTileView, + [String _sortby, SortingOrder _sortingOrder]) { + return SfCartesianChart( + title: ChartTitle(text: isTileView ? '' : "World's tallest buildings"), + plotAreaBorderWidth: 0, + primaryXAxis: CategoryAxis(majorGridLines: MajorGridLines(width: 0)), + primaryYAxis: NumericAxis( + minimum: 500, + maximum: 900, + interval: 100, + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: getDefaultSortingSeries(isTileView, _sortby, _sortingOrder), + tooltipBehavior: + TooltipBehavior(enable: true, canShowMarker: false, header: ''), + ); +} + +List> getDefaultSortingSeries( + bool isTileView, + [String _sortby, + SortingOrder _sortingOrder]) { + final List chartData = [ + ChartSampleData(x: 'Burj \n Khalifa', y: 828), + ChartSampleData(x: 'Goldin \n Finance 117', y: 597), + ChartSampleData(x: 'Makkah Clock \n Royal Tower', y: 601), + ChartSampleData(x: 'Ping An \n Finance Center', y: 599), + ChartSampleData(x: 'Shanghai \n Tower', y: 632), + ]; + return >[ + BarSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + sortingOrder: _sortingOrder != null ? _sortingOrder : SortingOrder.none, + dataLabelSettings: DataLabelSettings( + isVisible: true, labelAlignment: ChartDataLabelAlignment.auto), + sortFieldValueMapper: (ChartSampleData sales, _) => + _sortby == 'x' ? sales.x : sales.y, + ) + ]; +} +class SortingFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + SortingFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _SortingFrontPanelState createState() => _SortingFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; +class _SortingFrontPanelState extends State { + _SortingFrontPanelState(this.sample); + final SubItem sample; bool isSorting = true; final List _labelList = ['y', 'x'].toList(); final List _sortList = @@ -131,9 +110,9 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -184,7 +163,7 @@ class _FrontPanelState extends State { }); } - void onPositionTypeChange(String item, SampleListModel model) { + void onPositionTypeChange(String item, SampleModel model) { setState(() { _selectedType = item; if (_selectedType == 'y') { @@ -196,7 +175,7 @@ class _FrontPanelState extends State { }); } - void onSortingTypeChange(String item, SampleListModel model) { + void onSortingTypeChange(String item, SampleModel model) { setState(() { _selectedSortType = item; if (_selectedSortType == 'descending') { @@ -209,15 +188,15 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { showRoundedModalBottomSheet( dismissOnTap: false, context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -369,127 +348,3 @@ class _FrontPanelState extends State { ))))))); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDefaultSortingChart(bool isTileView, - [String _sortby, SortingOrder _sortingOrder]) { - return SfCartesianChart( - title: ChartTitle(text: isTileView ? '' : "World's tallest buildings"), - plotAreaBorderWidth: 0, - primaryXAxis: CategoryAxis(majorGridLines: MajorGridLines(width: 0)), - primaryYAxis: NumericAxis( - minimum: 500, - maximum: 900, - interval: 100, - axisLine: AxisLine(width: 0), - majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView, _sortby, _sortingOrder), - tooltipBehavior: - TooltipBehavior(enable: true, canShowMarker: false, header: ''), - ); -} - -List> getLineSeries(bool isTileView, - [String _sortby, SortingOrder _sortingOrder]) { - final List<_SortingData> chartData = <_SortingData>[ - _SortingData('Burj \n Khalifa', 828), - _SortingData('Goldin \n Finance 117', 597), - _SortingData('Makkah Clock \n Royal Tower', 601), - _SortingData('Ping An \n Finance Center', 599), - _SortingData('Shanghai \n Tower', 632), - ]; - return >[ - BarSeries<_SortingData, String>( - dataSource: chartData, - xValueMapper: (_SortingData sales, _) => sales.name, - yValueMapper: (_SortingData sales, _) => sales.height, - sortingOrder: _sortingOrder != null ? _sortingOrder : SortingOrder.none, - dataLabelSettings: DataLabelSettings( - isVisible: true, labelAlignment: ChartDataLabelAlignment.auto), - sortFieldValueMapper: (_SortingData sales, _) => - _sortby == 'x' ? sales.name : sales.height, - ) - ]; -} - -class _SortingData { - _SortingData(this.name, this.height); - final String name; - final double height; -} diff --git a/lib/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart b/lib/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart index c502ab0e..b89b2ce6 100755 --- a/lib/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart +++ b/lib/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart @@ -1,124 +1,109 @@ import 'dart:math'; -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; +import 'package:flutter_examples/model/helper.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; import 'package:flutter_examples/widgets/bottom_sheet.dart'; import 'package:flutter_examples/widgets/checkbox.dart'; -import 'package:url_launcher/url_launcher.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:flutter_examples/widgets/custom_button.dart'; +import 'package:intl/intl.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +double duration = 2; + +//ignore:must_be_immutable class DefaultCrossHair extends StatefulWidget { - - const DefaultCrossHair(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DefaultCrossHair({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DefaultCrossHairState createState() => _DefaultCrossHairState(sample); } class _DefaultCrossHairState extends State { _DefaultCrossHairState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); + final SubItem sample; @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, CrosshairFrontPanel(sample)); } +} - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; +SfCartesianChart getDefaultCrossHairChart(bool isTileView, + [bool alwaysShow, CrosshairLineType lineType, dynamic randomData]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + primaryXAxis: DateTimeAxis( + dateFormat: DateFormat.y(), + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift, + interactiveTooltip: InteractiveTooltip( + enable: (isTileView || + lineType == CrosshairLineType.both || + lineType == CrosshairLineType.vertical) + ? true + : false)), + crosshairBehavior: CrosshairBehavior( + enable: true, + hideDelay: duration * 1000, + lineWidth: 1, + activationMode: ActivationMode.singleTap, + shouldAlwaysShow: isTileView ? true : alwaysShow, + lineType: isTileView ? CrosshairLineType.both : lineType), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), + interactiveTooltip: InteractiveTooltip( + enable: (isTileView || + lineType == CrosshairLineType.both || + lineType == CrosshairLineType.horizontal) + ? true + : false), + majorTickLines: MajorTickLines(width: 0)), + series: getDefaultCrossHairSeries(isTileView, randomData), + ); +} - @override - void dispose() { - super.dispose(); - } +List> getDefaultCrossHairSeries( + bool isTileView, dynamic randomData) { + return >[ + LineSeries( + dataSource: isTileView ? getDatatTimeData() : randomData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + width: 2) + ]; +} - @override - void didUpdateWidget(DefaultCrossHair oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +dynamic getDatatTimeData() { + final List randomData = []; + final Random rand = Random(); + double value = 100; + for (int i = 1; i < 2000; i++) { + if (rand.nextDouble() > 0.5) + value += rand.nextDouble(); + else + value -= rand.nextDouble(); - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/crosshair/chart_with_crosshair.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + randomData.add(ChartSampleData(x: DateTime(1900, i, 1), y: value)); } + return randomData; } -class FrontPanel extends StatefulWidget { +class CrosshairFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + CrosshairFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _CrosshairFrontPanelState createState() => + _CrosshairFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool alwaysShow = true; +class _CrosshairFrontPanelState extends State { + _CrosshairFrontPanelState(this.sample); + final SubItem sample; + bool alwaysShow = false; final List _lineTypeList = ['both', 'vertical', 'horizontal'].toList(); String _selectedLineType = 'both'; @@ -132,11 +117,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), child: Container( @@ -153,7 +138,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.4 @@ -163,9 +148,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 170, @@ -276,6 +261,54 @@ class _FrontPanelState extends State { ], ), ), + Container( + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Text('Hide delay ', + style: TextStyle( + fontSize: 16.0, + color: model.textColor)), + Container( + child: Padding( + padding: + const EdgeInsets.fromLTRB( + 40, 0, 0, 0), + child: CustomButton( + minValue: 0, + maxValue: 10, + initialValue: duration, + onChanged: (dynamic val) => + setState(() { + duration = val; + }), + step: 2, + horizontal: true, + loop: true, + padding: 0, + iconUp: Icons.keyboard_arrow_up, + iconDown: + Icons.keyboard_arrow_down, + iconLeft: + Icons.keyboard_arrow_left, + iconRight: + Icons.keyboard_arrow_right, + iconUpRightColor: + model.textColor, + iconDownLeftColor: + model.textColor, + style: TextStyle( + fontSize: 20.0, + color: model.textColor), + ), + ), + ), + ], + ), + ), ], ), ) @@ -286,7 +319,7 @@ class _FrontPanelState extends State { )))); } - void onPositionTypeChange(String item, SampleListModel model) { + void onPositionTypeChange(String item, SampleModel model) { setState(() { _selectedLineType = item; if (_selectedLineType == 'both') { @@ -304,144 +337,3 @@ class _FrontPanelState extends State { }); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDefaultCrossHairChart(bool isTileView, - [bool alwaysShow, CrosshairLineType lineType, dynamic randomData]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - primaryXAxis: DateTimeAxis( - majorGridLines: MajorGridLines(width: 0), - edgeLabelPlacement: EdgeLabelPlacement.shift, - interactiveTooltip: InteractiveTooltip( - enable: (isTileView || - lineType == CrosshairLineType.both || - lineType == CrosshairLineType.vertical) - ? true - : false)), - crosshairBehavior: CrosshairBehavior( - enable: true, - lineWidth: 1, - activationMode: ActivationMode.singleTap, - shouldAlwaysShow: isTileView ? true : alwaysShow, - lineType: isTileView ? CrosshairLineType.both : lineType), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), - interactiveTooltip: InteractiveTooltip( - enable: (isTileView || - lineType == CrosshairLineType.both || - lineType == CrosshairLineType.horizontal) - ? true - : false), - majorTickLines: MajorTickLines(width: 0)), - series: getLineSeries(isTileView, randomData), - ); -} - -List> getLineSeries( - bool isTileView, dynamic randomData) { - return >[ - LineSeries<_DateTimeData, DateTime>( - dataSource: isTileView ? getDatatTimeData() : randomData, - xValueMapper: (_DateTimeData sales, _) => sales.year, - yValueMapper: (_DateTimeData sales, _) => sales.y, - width: 2) - ]; -} - -class _DateTimeData { - _DateTimeData(this.year, this.y); - final DateTime year; - final double y; -} - -dynamic getDatatTimeData() { - final List<_DateTimeData> randomData = <_DateTimeData>[]; - final Random rand = Random(); - double value = 100; - for (int i = 1; i < 2000; i++) { - if (rand.nextDouble() > 0.5) - value += rand.nextDouble(); - else - value -= rand.nextDouble(); - - randomData.add(_DateTimeData(DateTime(1900, i, 1), value)); - } - return randomData; -} diff --git a/lib/samples/chart/user_interactions/selection/selection_modes.dart b/lib/samples/chart/user_interactions/selection/selection_modes.dart index 99d04fd1..2e798b2e 100755 --- a/lib/samples/chart/user_interactions/selection/selection_modes.dart +++ b/lib/samples/chart/user_interactions/selection/selection_modes.dart @@ -1,17 +1,17 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/checkbox.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:scoped_model/scoped_model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:flutter_examples/widgets/bottom_sheet.dart'; -import 'package:flutter_examples/widgets/checkbox.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore:must_be_immutable class DefaultSelection extends StatefulWidget { - const DefaultSelection(this.sample, {Key key}) : super(key: key); + DefaultSelection({this.sample, Key key}) : super(key: key); - final SubItemList sample; + SubItem sample; @override _DefaultSelectionState createState() => _DefaultSelectionState(sample); @@ -19,106 +19,81 @@ class DefaultSelection extends StatefulWidget { class _DefaultSelectionState extends State { _DefaultSelectionState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DefaultSelection oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/selection/selection_modes.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, SelectionFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { +SfCartesianChart getDefaultSelectionChart(bool isTileView, + [SelectionType _mode, bool enableMultiSelect]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Age distribution by country'), + selectionType: _mode, + selectionGesture: ActivationMode.singleTap, + enableMultiSelection: enableMultiSelect, + primaryXAxis: CategoryAxis( + title: AxisTitle(text: isTileView ? '' : 'Countries'), + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), + series: getDefaultSelectionSeries(isTileView), + ); +} + +List> getDefaultSelectionSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 'CHN', y: 17, yValue2: 54, yValue3: 9), + ChartSampleData(x: 'USA', y: 19, yValue2: 67, yValue3: 14), + ChartSampleData(x: 'IDN', y: 29, yValue2: 65, yValue3: 6), + ChartSampleData(x: 'JAP', y: 13, yValue2: 61, yValue3: 26), + ChartSampleData(x: 'BRZ', y: 24, yValue2: 68, yValue3: 8) + ]; + return >[ + ColumnSeries( + // animationDuration: isTileView ? 0 : 1500, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + selectionSettings: + SelectionSettings(enable: true, unselectedOpacity: 0.5), + name: 'Age 0-14'), + ColumnSeries( + // animationDuration: isTileView ? 0 : 1500, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, + selectionSettings: + SelectionSettings(enable: true, unselectedOpacity: 0.5), + name: 'Age 15-64'), + ColumnSeries( + // animationDuration: isTileView ? 0 : 1500, + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, + selectionSettings: + SelectionSettings(enable: true, unselectedOpacity: 0.5), + name: 'Age 65 & Above') + ]; +} +class SelectionFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); + SelectionFrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _SelectionFrontPanelState createState() => _SelectionFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _SelectionFrontPanelState extends State { + _SelectionFrontPanelState(this.sample); + final SubItem sample; bool enableMultiSelect = false; final List _modeList = @@ -129,9 +104,9 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, body: Padding( @@ -150,7 +125,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.3 @@ -161,9 +136,9 @@ class _FrontPanelState extends State { radius: 12.0, color: model.bottomSheetBackgroundColor, builder: (BuildContext context) => ScopedModelDescendant< - SampleListModel>( + SampleModel>( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( @@ -290,7 +265,7 @@ class _FrontPanelState extends State { )))); } - void onModeTypeChange(String item, SampleListModel model) { + void onModeTypeChange(String item, SampleModel model) { setState(() { _selectedMode = item; if (_selectedMode == 'point') { @@ -308,144 +283,3 @@ class _FrontPanelState extends State { } } -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - // ignore: prefer_const_constructors_in_immutables - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDefaultSelectionChart(bool isTileView, - [SelectionType _mode, bool enableMultiSelect]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - title: ChartTitle(text: isTileView ? '' : 'Age distribution by country'), - selectionType: _mode, - selectionGesture: ActivationMode.singleTap, - enableMultiSelection: enableMultiSelect, - primaryXAxis: CategoryAxis( - title: AxisTitle(text: isTileView ? '' : 'Countries'), - majorGridLines: MajorGridLines(width: 0), - edgeLabelPlacement: EdgeLabelPlacement.shift), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), - ); -} - -List> getLineSeries(bool isTileView) { - final List<_SelectionData> chartData = <_SelectionData>[ - _SelectionData('CHN', 17, 54, 9), - _SelectionData('USA', 19, 67, 14), - _SelectionData('IDN', 29, 65, 6), - _SelectionData('JAP', 13, 61, 26), - _SelectionData('BRZ', 24, 68, 8) - ]; - return >[ - ColumnSeries<_SelectionData, String>( - // animationDuration: isTileView ? 0 : 1500, - dataSource: chartData, - xValueMapper: (_SelectionData sales, _) => sales.x, - yValueMapper: (_SelectionData sales, _) => sales.y1, - selectionSettings: - SelectionSettings(enable: true, unselectedOpacity: 0.5), - name: 'Age 0-14'), - ColumnSeries<_SelectionData, String>( - // animationDuration: isTileView ? 0 : 1500, - dataSource: chartData, - xValueMapper: (_SelectionData sales, _) => sales.x, - yValueMapper: (_SelectionData sales, _) => sales.y2, - selectionSettings: - SelectionSettings(enable: true, unselectedOpacity: 0.5), - name: 'Age 15-64'), - ColumnSeries<_SelectionData, String>( - // animationDuration: isTileView ? 0 : 1500, - dataSource: chartData, - xValueMapper: (_SelectionData sales, _) => sales.x, - yValueMapper: (_SelectionData sales, _) => sales.y3, - selectionSettings: - SelectionSettings(enable: true, unselectedOpacity: 0.5), - name: 'Age 65 & Above') - ]; -} - -class _SelectionData { - _SelectionData(this.x, this.y1, this.y2, this.y3); - final String x; - final double y1; - final double y2; - final double y3; -} diff --git a/lib/samples/chart/user_interactions/tooltip/default_tooltip.dart b/lib/samples/chart/user_interactions/tooltip/default_tooltip.dart index 4efdd1ce..4d0a012a 100755 --- a/lib/samples/chart/user_interactions/tooltip/default_tooltip.dart +++ b/lib/samples/chart/user_interactions/tooltip/default_tooltip.dart @@ -1,13 +1,12 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +//ignore:must_be_immutable class DefaultTooltip extends StatefulWidget { - const DefaultTooltip(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DefaultTooltip({this.sample, Key key}) : super(key: key); + SubItem sample; @override _DefaultTooltipState createState() => _DefaultTooltipState(sample); @@ -15,226 +14,15 @@ class DefaultTooltip extends StatefulWidget { class _DefaultTooltipState extends State { _DefaultTooltipState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DefaultTooltip oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/tooltip/default_tooltip.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultTooltipChart(false)), - ), - floatingActionButton: Stack( - children: [ - Align( - alignment: Alignment.bottomLeft, - child: Padding( - padding: const EdgeInsets.fromLTRB(30, 50, 0, 0), - child: Container( - height: 50, - width: 250, - child: InkWell( - onTap: () => launch( - 'https://www.indexmundi.com/g/g.aspx?v=72&c=gm&c=mx&l=en'), - child: Row( - children: [ - Text('Source: ', - style: TextStyle( - fontSize: 16, color: model.textColor)), - Text('www.indexmundi.com', - style: TextStyle( - fontSize: 14, color: Colors.blue)), - ], - ), - ), - ), - ), - ), - ], - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + const String sourceLink = + 'https://www.indexmundi.com/g/g.aspx?v=72&c=gm&c=mx&l=en'; + const String source = 'www.indexmundi.com'; + return getScopedModel( + getDefaultTooltipChart(false), sample, null, sourceLink, source); } } @@ -253,48 +41,42 @@ SfCartesianChart getDefaultTooltipChart(bool isTileView) { minimum: 30, maximum: 60, axisLine: AxisLine(width: 0)), - series: getLineSeries(isTileView), + series: getDefaultTooltipSeries(isTileView), tooltipBehavior: TooltipBehavior(enable: true), ); } -List> getLineSeries(bool isTileView) { - final List<_TooltipData> chartData = <_TooltipData>[ - _TooltipData(2004, 42.630000, 34.730000), - _TooltipData(2005, 43.320000, 43.400000), - _TooltipData(2006, 43.660000, 38.090000), - _TooltipData(2007, 43.540000, 44.710000), - _TooltipData(2008, 43.600000, 45.320000), - _TooltipData(2009, 43.500000, 46.200000), - _TooltipData(2010, 43.350000, 46.990000), - _TooltipData(2011, 43.620000, 49.170000), - _TooltipData(2012, 43.930000, 50.640000), - _TooltipData(2013, 44.200000, 51.480000), +List> getDefaultTooltipSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: 2004, y: 42.630000, yValue2: 34.730000), + ChartSampleData(x: 2005, y: 43.320000, yValue2: 43.400000), + ChartSampleData(x: 2006, y: 43.660000, yValue2: 38.090000), + ChartSampleData(x: 2007, y: 43.540000, yValue2: 44.710000), + ChartSampleData(x: 2008, y: 43.600000, yValue2: 45.320000), + ChartSampleData(x: 2009, y: 43.500000, yValue2: 46.200000), + ChartSampleData(x: 2010, y: 43.350000, yValue2: 46.990000), + ChartSampleData(x: 2011, y: 43.620000, yValue2: 49.170000), + ChartSampleData(x: 2012, y: 43.930000, yValue2: 50.640000), + ChartSampleData(x: 2013, y: 44.200000, yValue2: 51.480000), ]; - return >[ - LineSeries<_TooltipData, num>( + return >[ + LineSeries( enableTooltip: true, dataSource: chartData, - xValueMapper: (_TooltipData sales, _) => sales.x, - yValueMapper: (_TooltipData sales, _) => sales.y, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, width: 2, name: 'Germany', markerSettings: MarkerSettings(isVisible: true)), - LineSeries<_TooltipData, num>( + LineSeries( enableTooltip: true, dataSource: chartData, width: 2, name: 'Mexico', - xValueMapper: (_TooltipData sales, _) => sales.x, - yValueMapper: (_TooltipData sales, _) => sales.y1, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, markerSettings: MarkerSettings(isVisible: true), ) ]; } - -class _TooltipData { - _TooltipData(this.x, this.y, this.y1); - final double x; - final double y; - final double y1; -} diff --git a/lib/samples/chart/user_interactions/tooltip/tooltip_position.dart b/lib/samples/chart/user_interactions/tooltip/tooltip_position.dart new file mode 100644 index 00000000..7caff166 --- /dev/null +++ b/lib/samples/chart/user_interactions/tooltip/tooltip_position.dart @@ -0,0 +1,286 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; + +//ignore: must_be_immutable +class CartesianTooltipPosition extends StatefulWidget { + CartesianTooltipPosition({this.sample, Key key}) : super(key: key); + + SubItem sample; + + @override + _TooltipPositionState createState() => _TooltipPositionState(sample); +} + +class _TooltipPositionState extends State { + _TooltipPositionState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(null, sample, TooltipPositioningPanel(sample)); + } +} + +dynamic getCartesianTooltipPositionChart(bool isTileView, + [String chartType, TooltipPosition _tooltipPosition]) { + dynamic _chart; + if (isTileView || chartType == 'column') + _chart = SfCartesianChart( + plotAreaBorderWidth: 0, + title: ChartTitle(text: isTileView ? '' : 'Age distribution'), + tooltipBehavior: TooltipBehavior( + enable: true, tooltipPosition: _tooltipPosition, canShowMarker: false + ), + primaryXAxis: CategoryAxis( + title: AxisTitle(text: isTileView ? '' : 'Years'), + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + labelFormat: '{value}M', + axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), + series: _getCartesianSeries(isTileView), + ); + else + _chart = SfCircularChart( + title: ChartTitle(text: isTileView ? '' : 'Age distribution'), + tooltipBehavior: TooltipBehavior( + enable: true, tooltipPosition: _tooltipPosition, format: 'point.x : point.yM' + ), + legend: Legend(isVisible: isTileView ? false : true), + series: getPieSeries(isTileView), + ); + return _chart; +} +final List<_ChartData> chartData = <_ChartData>[ + _ChartData('<5', 5.55, const Color.fromRGBO(53, 92, 125, 1),), + _ChartData('5-15', 11.61,const Color.fromRGBO(192, 108, 132, 1),), + _ChartData('15-24', 12.87,const Color.fromRGBO(246, 114, 128, 1),), + _ChartData('25-64', 69.59,const Color.fromRGBO(248, 177, 149, 1)), + _ChartData('>65', 28.92,const Color.fromRGBO(116, 180, 155, 1)) + ]; +List> _getCartesianSeries(bool isTileView) { + + return >[ + ColumnSeries<_ChartData, String>( + dataSource: chartData, + pointColorMapper:(_ChartData sales, _) => sales.color, + xValueMapper: (_ChartData sales, _) => sales.x, + yValueMapper: (_ChartData sales, _) => sales.y1, + name: 'Japan - 2010'), + ]; +} + +List> getPieSeries(bool isTileView) { + return >[ + PieSeries<_ChartData, String>( + dataSource: chartData, + xValueMapper: (_ChartData data, _) => data.x, + yValueMapper: (_ChartData data, _) => data.y1, name: 'Japan - 2010' + ), + ]; +} + +class _ChartData { + _ChartData(this.x, this.y1, [this.color]); + final String x; + final double y1; + final Color color; +} + +class TooltipPositioningPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + TooltipPositioningPanel(this.sampleList); + final SubItem sampleList; + + @override + _TooltipPositioningPanelState createState() => _TooltipPositioningPanelState(sampleList); +} + +class _TooltipPositioningPanelState extends State { + _TooltipPositioningPanelState(this.sample); + final SubItem sample; + + // final List _modeList = + // ['column', 'pie'].toList(); + String _selectedChartType = 'column'; + + String _chartType = 'column'; + + final List _tooltipPositionList = + ['auto', 'pointer'].toList(); + String _selectedTooltipPosition = 'auto'; + TooltipPosition _tooltipPosition = TooltipPosition.auto; + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getCartesianTooltipPositionChart(false,_chartType, _tooltipPosition)), + ), + floatingActionButton: FloatingActionButton( + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, + )); + }); + } + + void onPositionTypeChange(String item, SampleModel model) { + setState(() { + _selectedTooltipPosition = item; + if (_selectedTooltipPosition == 'auto') { + _tooltipPosition = TooltipPosition.auto; + } + if (_selectedTooltipPosition == 'pointer') { + _tooltipPosition = TooltipPosition.pointer; + } + }); + } + +void _showSettingsPanel(SampleModel model) { + final double height = + (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) + ? 0.3 + : 0.4; + showRoundedModalBottomSheet( + dismissOnTap: false, + context: context, + radius: 12.0, + color: model.bottomSheetBackgroundColor, + builder: (BuildContext context) => ScopedModelDescendant< + SampleModel>( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => + Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 120, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: MediaQuery.of(context).size.height * height, + child: Padding( + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack( + children: [ + Container( + height: 40, + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + Padding( + padding: + const EdgeInsets.fromLTRB(0, 50, 0, 0), + child: ListView( + children: [ + Container( + child: Row( + children: [ + Text('Tooltip position ', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: + FontWeight.normal)), + Container( + padding: + const EdgeInsets.fromLTRB( + 20, 0, 0, 0), + height: 50, + width: 150, + child: Align( + alignment: + Alignment.bottomCenter, + child: Theme( + data: Theme.of(context) + .copyWith( + canvasColor: model + .bottomSheetBackgroundColor), + child: DropDown( + value: + _selectedTooltipPosition, + item: _tooltipPositionList.map( + (String value) { + return DropdownMenuItem< + String>( + value: (value != + null) + ? value + : 'auto', + child: Text( + '$value', + style: TextStyle( + color: model + .textColor))); + }).toList(), + valueChanged: + (dynamic value) { + onPositionTypeChange( + value.toString(), + model); + }), + ), + )) + ], + ), + ), + ], + ), + ) + ], + ), + ), + )), + )))); + } + + void onChartTypeChange(String item, SampleModel model) { + setState(() { + _selectedChartType = item; + if (_selectedChartType == 'column') { + _chartType = 'column'; + } + if (_selectedChartType == 'pie') { + _chartType = 'pie'; + } + // ignore: invalid_use_of_protected_member + model.notifyListeners(); + }); + } + } + diff --git a/lib/samples/chart/user_interactions/trackball/chart_with_trackball.dart b/lib/samples/chart/user_interactions/trackball/chart_with_trackball.dart index 427b098b..3b258bf1 100755 --- a/lib/samples/chart/user_interactions/trackball/chart_with_trackball.dart +++ b/lib/samples/chart/user_interactions/trackball/chart_with_trackball.dart @@ -1,123 +1,117 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/checkbox.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:flutter_examples/widgets/custom_button.dart'; +import 'package:intl/intl.dart'; +import 'package:scoped_model/scoped_model.dart'; import 'package:syncfusion_flutter_charts/charts.dart'; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:flutter_examples/widgets/bottom_sheet.dart'; -import 'package:flutter_examples/widgets/checkbox.dart'; -import 'package:url_launcher/url_launcher.dart'; +double duration = 2; + +//ignore:must_be_immutable class DefaultTrackball extends StatefulWidget { - const DefaultTrackball(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + DefaultTrackball({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _DefaultTrackballState createState() => _DefaultTrackballState(sample); } class _DefaultTrackballState extends State { _DefaultTrackballState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + final SubItem sample; @override - void dispose() { - super.dispose(); + Widget build(BuildContext context) { + return getScopedModel(null, sample, TrackballFrontPanel(sample)); } +} - @override - void didUpdateWidget(DefaultTrackball oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } +SfCartesianChart getDefaultTrackballChart(bool isTileView, + [TrackballDisplayMode _mode, ChartAlignment _alignment, bool showAlways]) { + return SfCartesianChart( + title: ChartTitle(text: isTileView ? '' : 'Average sales per person'), + plotAreaBorderWidth: 0, + primaryXAxis: DateTimeAxis( + dateFormat: DateFormat.y(), + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + title: AxisTitle(text: isTileView ? '' : 'Revenue'), + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(width: 0)), + series: getDefaultTrackballSeries(isTileView), + trackballBehavior: TrackballBehavior( + enable: true, + hideDelay: duration * 1000, + lineType: TrackballLineType.vertical, + activationMode: ActivationMode.singleTap, + tooltipAlignment: _alignment, + tooltipDisplayMode: _mode, + tooltipSettings: InteractiveTooltip(format: 'point.x : point.y'), + shouldAlwaysShow: isTileView ? true : showAlways), + ); +} - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/trackball/chart_with_trackball.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } +List> getDefaultTrackballSeries( + bool isTileView) { + final List chartData = [ + ChartSampleData(x: DateTime(2000, 2, 11), y: 15, yValue2: 39, yValue3: 60), + ChartSampleData(x: DateTime(2000, 9, 14), y: 20, yValue2: 30, yValue3: 55), + ChartSampleData(x: DateTime(2001, 2, 11), y: 25, yValue2: 28, yValue3: 48), + ChartSampleData(x: DateTime(2001, 9, 16), y: 21, yValue2: 35, yValue3: 57), + ChartSampleData(x: DateTime(2002, 2, 7), y: 13, yValue2: 39, yValue3: 62), + ChartSampleData(x: DateTime(2002, 9, 7), y: 18, yValue2: 41, yValue3: 64), + ChartSampleData(x: DateTime(2003, 2, 11), y: 24, yValue2: 45, yValue3: 57), + ChartSampleData(x: DateTime(2003, 9, 14), y: 23, yValue2: 48, yValue3: 53), + ChartSampleData(x: DateTime(2004, 2, 6), y: 19, yValue2: 54, yValue3: 63), + ChartSampleData(x: DateTime(2004, 9, 6), y: 31, yValue2: 55, yValue3: 50), + ChartSampleData(x: DateTime(2005, 2, 11), y: 39, yValue2: 57, yValue3: 66), + ChartSampleData(x: DateTime(2005, 9, 11), y: 50, yValue2: 60, yValue3: 65), + ChartSampleData(x: DateTime(2006, 2, 11), y: 24, yValue2: 60, yValue3: 79), + ]; + return >[ + LineSeries( + dataSource: chartData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + width: 2, + name: 'John', + markerSettings: MarkerSettings(isVisible: true)), + LineSeries( + dataSource: chartData, + width: 2, + name: 'Andrew', + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue2, + markerSettings: MarkerSettings(isVisible: true)), + LineSeries( + dataSource: chartData, + width: 2, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.yValue3, + name: 'Thomas', + markerSettings: MarkerSettings(isVisible: true)) + ]; } -class FrontPanel extends StatefulWidget { +class TrackballFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + TrackballFrontPanel(this.subItemList); + final SubItem subItemList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _TrackballFrontPanelState createState() => + _TrackballFrontPanelState(subItemList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool showAlways = true; +class _TrackballFrontPanelState extends State { + _TrackballFrontPanelState(this.sample); + final SubItem sample; + bool showAlways = false; final List _modeList = ['floatAllPoints', 'groupAllPoints', 'nearestPoint'].toList(); String _selectedMode = 'floatAllPoints'; @@ -132,11 +126,11 @@ class _FrontPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 60), child: Container( @@ -153,7 +147,7 @@ class _FrontPanelState extends State { }); } - void _showSettingsPanel(SampleListModel model) { + void _showSettingsPanel(SampleModel model) { final double height = (MediaQuery.of(context).size.height > MediaQuery.of(context).size.width) ? 0.4 @@ -163,9 +157,9 @@ class _FrontPanelState extends State { context: context, radius: 12.0, color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( + builder: (BuildContext context) => ScopedModelDescendant( rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( + builder: (BuildContext context, _, SampleModel model) => Padding( padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), child: Container( height: 220, @@ -330,6 +324,54 @@ class _FrontPanelState extends State { ], ), ), + Container( + child: Row( + crossAxisAlignment: + CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Text('Hide delay ', + style: TextStyle( + fontSize: 16.0, + color: model.textColor)), + Container( + child: Padding( + padding: + const EdgeInsets.fromLTRB( + 40, 0, 0, 0), + child: CustomButton( + minValue: 0, + maxValue: 10, + initialValue: duration, + onChanged: (dynamic val) => + setState(() { + duration = val; + }), + step: 2, + horizontal: true, + loop: true, + padding: 0, + iconUp: Icons.keyboard_arrow_up, + iconDown: + Icons.keyboard_arrow_down, + iconLeft: + Icons.keyboard_arrow_left, + iconRight: + Icons.keyboard_arrow_right, + iconUpRightColor: + model.textColor, + iconDownLeftColor: + model.textColor, + style: TextStyle( + fontSize: 20.0, + color: model.textColor), + ), + ), + ), + ], + ), + ), ], ), ) @@ -340,7 +382,7 @@ class _FrontPanelState extends State { )))); } - void onModeTypeChange(String item, SampleListModel model) { + void onModeTypeChange(String item, SampleModel model) { setState(() { _selectedMode = item; if (_selectedMode == 'floatAllPoints') { @@ -360,7 +402,7 @@ class _FrontPanelState extends State { }); } - void onAlignmentChange(String item, SampleListModel model) { + void onAlignmentChange(String item, SampleModel model) { setState(() { _tooltipAlignment = item; if (_tooltipAlignment == 'center') { @@ -377,153 +419,3 @@ class _FrontPanelState extends State { }); } } - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDefaultTrackballChart(bool isTileView, - [TrackballDisplayMode _mode, ChartAlignment _alignment, bool showAlways]) { - return SfCartesianChart( - title: ChartTitle(text: isTileView ? '' : 'Average sales per person'), - plotAreaBorderWidth: 0, - primaryXAxis: DateTimeAxis( - majorGridLines: MajorGridLines(width: 0), - edgeLabelPlacement: EdgeLabelPlacement.shift), - primaryYAxis: NumericAxis( - title: AxisTitle(text: isTileView ? '' : 'Revenue'), - axisLine: AxisLine(width: 0), - majorTickLines: MajorTickLines(width: 0)), - series: getLineSeries(isTileView), - trackballBehavior: TrackballBehavior( - enable: true, - lineType: TrackballLineType.vertical, - activationMode: ActivationMode.singleTap, - tooltipAlignment: _alignment, - tooltipDisplayMode: _mode, - tooltipSettings: InteractiveTooltip(format: 'point.x : point.y'), - shouldAlwaysShow: showAlways), - ); -} - -List> getLineSeries(bool isTileView) { - final List<_TrackballData> chartData = <_TrackballData>[ - _TrackballData(DateTime(2000, 2, 11), 15, 39, 60), - _TrackballData(DateTime(2000, 9, 14), 20, 30, 55), - _TrackballData(DateTime(2001, 2, 11), 25, 28, 48), - _TrackballData(DateTime(2001, 9, 16), 21, 35, 57), - _TrackballData(DateTime(2002, 2, 7), 13, 39, 62), - _TrackballData(DateTime(2002, 9, 7), 18, 41, 64), - _TrackballData(DateTime(2003, 2, 11), 24, 45, 57), - _TrackballData(DateTime(2003, 9, 14), 23, 48, 53), - _TrackballData(DateTime(2004, 2, 6), 19, 54, 63), - _TrackballData(DateTime(2004, 9, 6), 31, 55, 50), - _TrackballData(DateTime(2005, 2, 11), 39, 57, 66), - _TrackballData(DateTime(2005, 9, 11), 50, 60, 65), - _TrackballData(DateTime(2006, 2, 11), 24, 60, 79), - ]; - return >[ - LineSeries<_TrackballData, DateTime>( - dataSource: chartData, - xValueMapper: (_TrackballData sales, _) => sales.year, - yValueMapper: (_TrackballData sales, _) => sales.y1, - width: 2, - name: 'John', - markerSettings: MarkerSettings(isVisible: true)), - LineSeries<_TrackballData, DateTime>( - dataSource: chartData, - width: 2, - name: 'Andrew', - xValueMapper: (_TrackballData sales, _) => sales.year, - yValueMapper: (_TrackballData sales, _) => sales.y2, - markerSettings: MarkerSettings(isVisible: true)), - LineSeries<_TrackballData, DateTime>( - dataSource: chartData, - width: 2, - xValueMapper: (_TrackballData sales, _) => sales.year, - yValueMapper: (_TrackballData sales, _) => sales.y3, - name: 'Thomas', - markerSettings: MarkerSettings(isVisible: true)) - ]; -} - -class _TrackballData { - _TrackballData(this.year, this.y1, this.y2, this.y3); - final DateTime year; - final double y1; - final double y2; - final double y3; -} diff --git a/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming.dart b/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming.dart deleted file mode 100755 index 28a5fef8..00000000 --- a/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming.dart +++ /dev/null @@ -1,742 +0,0 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/bottom_sheet.dart'; -import 'package:flutter_examples/widgets/customDropDown.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -class DefaultPanning extends StatefulWidget { - const DefaultPanning(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _DefaultPanningState createState() => _DefaultPanningState(sample); -} - -ZoomPanBehavior zoomingBehavior; - -class _DefaultPanningState extends State { - _DefaultPanningState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DefaultPanning oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - final List _zoomModeTypeList = ['x', 'y', 'xy'].toList(); - String _selectedModeType = 'x'; - ZoomMode _zoomModeType = ZoomMode.x; - - @override - Widget build(BuildContext context) { - zoomingBehavior = ZoomPanBehavior( - enablePinching: true, - zoomMode: _zoomModeType, - enablePanning: true); - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container( - child: getDefaultPanningChart(false, _zoomModeType)), - ), - floatingActionButton: Container( - height:45, - child: Row( - mainAxisAlignment: MainAxisAlignment.end, - children: [ - FloatingActionButton( - onPressed: () { - _showSettingsPanel(model); - }, - child: Icon(Icons.graphic_eq, color: Colors.white), - backgroundColor: model.backgroundColor, - ), - const Padding( - padding:EdgeInsets.only(left:5) , - ), - - FloatingActionButton( - heroTag: false, - onPressed: () { - zoomingBehavior.reset(); - }, - child: Icon(Icons.refresh, color: Colors.white), - backgroundColor: model.backgroundColor, - ) - ], - ), - )); - }); - } - - void _showSettingsPanel(SampleListModel model) { - showRoundedModalBottomSheet( - dismissOnTap: false, - context: context, - radius: 12.0, - color: model.bottomSheetBackgroundColor, - builder: (BuildContext context) => ScopedModelDescendant( - rebuildOnChange: false, - builder: (BuildContext context, _, SampleListModel model) => Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 120, - child: Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 120, - child: Padding( - padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), - child: Stack( - children: [ - Container( - height: 40, - child: Row( - crossAxisAlignment: CrossAxisAlignment.center, - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - Text('Settings', - style: TextStyle( - color: model.textColor, - fontSize: 18, - letterSpacing: 0.34, - fontWeight: FontWeight.w500)), - IconButton( - icon: Icon( - Icons.close, - color: model.textColor, - ), - onPressed: () { - Navigator.pop(context); - }, - ), - ], - ), - ), - Padding( - padding: - const EdgeInsets.fromLTRB(15, 50, 0, 0), - child: ListView( - children: [ - Container( - child: Row( - children: [ - Text('Zoom mode ', - style: TextStyle( - color: model.textColor, - fontSize: 16, - letterSpacing: 0.34, - fontWeight: - FontWeight.normal)), - Container( - padding: const EdgeInsets.fromLTRB( - 0, 0, 40, 0), - height: 50, - width: 150, - child: Align( - alignment: Alignment.bottomCenter, - child: Theme( - data: Theme.of(context).copyWith( - canvasColor: model - .bottomSheetBackgroundColor), - child: DropDown( - value: _selectedModeType, - item: _zoomModeTypeList - .map((String value) { - return DropdownMenuItem< - String>( - value: - (value != null) - ? value - : 'x', - child: Text( - '$value', - style: TextStyle( - color: model - .textColor))); - }).toList(), - valueChanged: - (dynamic value) { - onZoomTypeChange( - value, model); - })), - ), - ), - ], - ), - ), - ], - ), - ) - ], - ), - ), - )), - )))); - } - - void onZoomTypeChange(String item, SampleListModel model) { - setState(() { - _selectedModeType = item; - if (_selectedModeType == 'x') { - _zoomModeType = ZoomMode.x; - } - if (_selectedModeType == 'y') { - _zoomModeType = ZoomMode.y; - } - if (_selectedModeType == 'xy') { - _zoomModeType = ZoomMode.xy; - } - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDefaultPanningChart(bool isTileView, - [ZoomMode _zoomModeType]) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - primaryXAxis: DateTimeAxis(majorGridLines: MajorGridLines(width: 0)), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), - majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), - zoomPanBehavior: zoomingBehavior); -} - -List> getLineSeries(bool isTileView) { - final List color = []; - color.add(Colors.teal[50]); - color.add(Colors.teal[200]); - color.add(Colors.teal); - - final List stops = []; - stops.add(0.0); - stops.add(0.5); - stops.add(1.0); - - final LinearGradient gradientColors = - LinearGradient(colors: color, stops: stops); - return >[ - AreaSeries<_DateTimeData, DateTime>( - dataSource: getDatatTimeData(), - xValueMapper: (_DateTimeData sales, _) => sales.year, - yValueMapper: (_DateTimeData sales, _) => sales.y, - gradient: gradientColors - // width: 2 - ) - ]; -} - -class _DateTimeData { - _DateTimeData(this.year, this.y); - final DateTime year; - final num y; -} - -dynamic getDatatTimeData() { - final List<_DateTimeData> randomData = <_DateTimeData>[ - _DateTimeData(DateTime(1950, 3, 31), 80.7), - _DateTimeData(DateTime(1950, 5, 1), 80.2), - _DateTimeData(DateTime(1950, 6, 2), 79.3), - _DateTimeData(DateTime(1950, 7, 3), 78.6), - _DateTimeData(DateTime(1950, 8, 4), 79.5), - _DateTimeData(DateTime(1950, 9, 5), 78.9), - _DateTimeData(DateTime(1950, 10, 6), 78.2), - _DateTimeData(DateTime(1950, 11, 07), 77.4), - _DateTimeData(DateTime(1950, 12, 08), 77.6), - _DateTimeData(DateTime(1951, 01, 09), 77.7), - _DateTimeData(DateTime(1951, 02, 10), 78.4), - _DateTimeData(DateTime(1951, 03, 11), 78.6), - _DateTimeData(DateTime(1951, 04, 12), 78.8), - _DateTimeData(DateTime(1951, 05, 13), 79.4), - _DateTimeData(DateTime(1951, 06, 14), 79.0), - _DateTimeData(DateTime(1951, 07, 15), 79.9), - _DateTimeData(DateTime(1951, 08, 16), 79.8), - _DateTimeData(DateTime(1951, 09, 17), 79.2), - _DateTimeData(DateTime(1951, 10, 18), 78.5), - _DateTimeData(DateTime(1951, 11, 19), 77.9), - _DateTimeData(DateTime(1951, 12, 20), 78.2), - _DateTimeData(DateTime(1952, 01, 21), 79.1), - _DateTimeData(DateTime(1952, 02, 22), 79.5), - _DateTimeData(DateTime(1952, 03, 23), 79.6), - _DateTimeData(DateTime(1952, 04, 24), 78.8), - _DateTimeData(DateTime(1952, 05, 25), 79.4), - _DateTimeData(DateTime(1952, 06, 26), 78.7), - _DateTimeData(DateTime(1952, 07, 27), 79.0), - _DateTimeData(DateTime(1952, 08, 28), 79.6), - _DateTimeData(DateTime(1952, 09, 29), 80.4), - _DateTimeData(DateTime(1952, 10, 30), 80.9), - _DateTimeData(DateTime(1952, 12, 01), 81.1), - _DateTimeData(DateTime(1953, 01, 01), 80.3), - _DateTimeData(DateTime(1953, 02, 02), 81.0), - _DateTimeData(DateTime(1953, 03, 06), 81.1), - _DateTimeData(DateTime(1953, 04, 04), 81.2), - _DateTimeData(DateTime(1953, 05, 06), 81.9), - _DateTimeData(DateTime(1953, 06, 06), 82.9), - _DateTimeData(DateTime(1953, 07, 08), 82.9), - _DateTimeData(DateTime(1953, 08, 08), 82.8), - _DateTimeData(DateTime(1953, 09, 09), 82.1), - _DateTimeData(DateTime(1953, 10, 11), 81.5), - _DateTimeData(DateTime(1953, 11, 11), 82.0), - _DateTimeData(DateTime(1953, 12, 13), 81.2), - _DateTimeData(DateTime(1954, 01, 13), 80.6), - _DateTimeData(DateTime(1954, 02, 14), 80.2), - _DateTimeData(DateTime(1954, 03, 18), 79.4), - _DateTimeData(DateTime(1954, 04, 16), 78.4), - _DateTimeData(DateTime(1954, 05, 18), 78.8), - _DateTimeData(DateTime(1954, 06, 18), 78.0), - _DateTimeData(DateTime(1954, 07, 20), 78.5), - _DateTimeData(DateTime(1954, 08, 20), 78.9), - _DateTimeData(DateTime(1954, 09, 21), 79.1), - _DateTimeData(DateTime(1954, 10, 23), 79.1), - _DateTimeData(DateTime(1954, 11, 23), 79.3), - _DateTimeData(DateTime(1954, 12, 25), 80.2), - _DateTimeData(DateTime(1955, 01, 25), 79.7), - _DateTimeData(DateTime(1955, 02, 26), 79.8), - _DateTimeData(DateTime(1955, 03, 30), 79.3), - _DateTimeData(DateTime(1955, 04, 28), 78.3), - _DateTimeData(DateTime(1955, 05, 30), 77.4), - _DateTimeData(DateTime(1955, 06, 30), 78.0), - _DateTimeData(DateTime(1955, 08, 01), 77.0), - _DateTimeData(DateTime(1955, 09, 01), 77.6), - _DateTimeData(DateTime(1955, 10, 03), 76.7), - _DateTimeData(DateTime(1955, 11, 04), 76.5), - _DateTimeData(DateTime(1955, 12, 05), 75.8), - _DateTimeData(DateTime(1956, 01, 06), 75.2), - _DateTimeData(DateTime(1956, 02, 06), 75.8), - _DateTimeData(DateTime(1956, 03, 09), 76.3), - _DateTimeData(DateTime(1956, 04, 10), 76.9), - _DateTimeData(DateTime(1956, 05, 10), 76.3), - _DateTimeData(DateTime(1956, 06, 11), 76.3), - _DateTimeData(DateTime(1956, 07, 12), 76.6), - _DateTimeData(DateTime(1956, 08, 13), 76.1), - _DateTimeData(DateTime(1956, 09, 13), 76.3), - _DateTimeData(DateTime(1956, 10, 15), 76.6), - _DateTimeData(DateTime(1956, 11, 16), 77.3), - _DateTimeData(DateTime(1956, 12, 17), 76.6), - _DateTimeData(DateTime(1957, 01, 18), 76.6), - _DateTimeData(DateTime(1957, 02, 18), 76.6), - _DateTimeData(DateTime(1957, 03, 22), 77.4), - _DateTimeData(DateTime(1957, 04, 23), 78.2), - _DateTimeData(DateTime(1957, 05, 22), 78.0), - _DateTimeData(DateTime(1957, 06, 23), 77.1), - _DateTimeData(DateTime(1957, 07, 24), 77.6), - _DateTimeData(DateTime(1957, 08, 25), 77.1), - _DateTimeData(DateTime(1957, 09, 25), 77.4), - _DateTimeData(DateTime(1957, 10, 27), 76.4), - _DateTimeData(DateTime(1957, 11, 28), 76.7), - _DateTimeData(DateTime(1957, 12, 29), 76.6), - _DateTimeData(DateTime(1958, 01, 30), 76.7), - _DateTimeData(DateTime(1958, 03, 02), 76.1), - _DateTimeData(DateTime(1958, 04, 03), 75.4), - _DateTimeData(DateTime(1958, 05, 05), 76.1), - _DateTimeData(DateTime(1958, 06, 03), 76.6), - _DateTimeData(DateTime(1958, 07, 05), 76.9), - _DateTimeData(DateTime(1958, 08, 05), 77.9), - _DateTimeData(DateTime(1958, 09, 06), 77.5), - _DateTimeData(DateTime(1958, 10, 07), 77.5), - _DateTimeData(DateTime(1958, 11, 08), 77.5), - _DateTimeData(DateTime(1958, 12, 10), 77.3), - _DateTimeData(DateTime(1959, 01, 10), 76.6), - _DateTimeData(DateTime(1959, 02, 11), 77.0), - _DateTimeData(DateTime(1959, 03, 14), 76.5), - _DateTimeData(DateTime(1959, 04, 15), 77.4), - _DateTimeData(DateTime(1959, 05, 17), 77.8), - _DateTimeData(DateTime(1959, 06, 15), 78.3), - _DateTimeData(DateTime(1959, 07, 17), 78.3), - _DateTimeData(DateTime(1959, 08, 17), 78.9), - _DateTimeData(DateTime(1959, 09, 18), 78.9), - _DateTimeData(DateTime(1959, 10, 19), 79.3), - _DateTimeData(DateTime(1959, 11, 20), 78.9), - _DateTimeData(DateTime(1959, 12, 22), 78.7), - _DateTimeData(DateTime(1960, 01, 22), 79.0), - _DateTimeData(DateTime(1960, 02, 23), 78.4), - _DateTimeData(DateTime(1960, 03, 25), 77.8), - _DateTimeData(DateTime(1960, 04, 26), 78.6), - _DateTimeData(DateTime(1960, 05, 28), 79.5), - _DateTimeData(DateTime(1960, 06, 27), 79.1), - _DateTimeData(DateTime(1960, 07, 29), 79.6), - _DateTimeData(DateTime(1960, 08, 29), 79.3), - _DateTimeData(DateTime(1960, 09, 30), 79.2), - _DateTimeData(DateTime(1960, 10, 31), 79.4), - _DateTimeData(DateTime(1960, 12, 02), 79.7), - _DateTimeData(DateTime(1961, 01, 03), 80.5), - _DateTimeData(DateTime(1961, 02, 03), 79.5), - _DateTimeData(DateTime(1961, 03, 07), 80.3), - _DateTimeData(DateTime(1961, 04, 07), 80.1), - _DateTimeData(DateTime(1961, 05, 09), 80.3), - _DateTimeData(DateTime(1961, 06, 10), 79.5), - _DateTimeData(DateTime(1961, 07, 09), 78.9), - _DateTimeData(DateTime(1961, 08, 10), 79.2), - _DateTimeData(DateTime(1961, 09, 10), 79.6), - _DateTimeData(DateTime(1961, 10, 12), 78.6), - _DateTimeData(DateTime(1961, 11, 12), 78.8), - _DateTimeData(DateTime(1961, 12, 14), 79.8), - _DateTimeData(DateTime(1962, 01, 15), 80.3), - _DateTimeData(DateTime(1962, 02, 15), 79.5), - _DateTimeData(DateTime(1962, 03, 19), 79.5), - _DateTimeData(DateTime(1962, 04, 19), 80.2), - _DateTimeData(DateTime(1962, 05, 21), 80.0), - _DateTimeData(DateTime(1962, 06, 22), 79.1), - _DateTimeData(DateTime(1962, 07, 21), 79.1), - _DateTimeData(DateTime(1962, 08, 22), 79.3), - _DateTimeData(DateTime(1962, 09, 22), 79.1), - _DateTimeData(DateTime(1962, 10, 24), 79.6), - _DateTimeData(DateTime(1962, 11, 24), 80.3), - _DateTimeData(DateTime(1962, 12, 26), 79.9), - _DateTimeData(DateTime(1963, 01, 27), 80.1), - _DateTimeData(DateTime(1963, 02, 27), 80.4), - _DateTimeData(DateTime(1963, 03, 31), 80.5), - _DateTimeData(DateTime(1963, 05, 01), 80.0), - _DateTimeData(DateTime(1963, 06, 02), 80.4), - _DateTimeData(DateTime(1963, 07, 04), 80.3), - _DateTimeData(DateTime(1963, 08, 02), 81.3), - _DateTimeData(DateTime(1963, 09, 03), 82.0), - _DateTimeData(DateTime(1963, 10, 04), 82.3), - _DateTimeData(DateTime(1963, 11, 05), 82.6), - _DateTimeData(DateTime(1963, 12, 06), 82.4), - _DateTimeData(DateTime(1964, 01, 07), 82.1), - _DateTimeData(DateTime(1964, 02, 08), 81.5), - _DateTimeData(DateTime(1964, 03, 10), 81.1), - _DateTimeData(DateTime(1964, 04, 11), 80.2), - _DateTimeData(DateTime(1964, 05, 12), 80.0), - _DateTimeData(DateTime(1964, 06, 13), 79.2), - _DateTimeData(DateTime(1964, 07, 15), 78.7), - _DateTimeData(DateTime(1964, 08, 14), 78.0), - _DateTimeData(DateTime(1964, 09, 15), 77.3), - _DateTimeData(DateTime(1964, 10, 16), 77.9), - _DateTimeData(DateTime(1964, 11, 17), 77.8), - _DateTimeData(DateTime(1964, 12, 18), 77.0), - _DateTimeData(DateTime(1965, 01, 19), 77.1), - _DateTimeData(DateTime(1965, 02, 20), 78.0), - _DateTimeData(DateTime(1965, 03, 23), 78.5), - _DateTimeData(DateTime(1965, 04, 24), 78.8), - _DateTimeData(DateTime(1965, 05, 25), 79.5), - _DateTimeData(DateTime(1965, 06, 26), 80.2), - _DateTimeData(DateTime(1965, 07, 28), 81.0), - _DateTimeData(DateTime(1965, 08, 26), 80.2), - _DateTimeData(DateTime(1965, 09, 27), 79.3), - _DateTimeData(DateTime(1965, 10, 28), 79.4), - _DateTimeData(DateTime(1965, 11, 29), 79.5), - _DateTimeData(DateTime(1965, 12, 30), 79.6), - _DateTimeData(DateTime(1966, 01, 31), 79.1), - _DateTimeData(DateTime(1966, 03, 04), 79.8), - _DateTimeData(DateTime(1966, 04, 04), 78.8), - _DateTimeData(DateTime(1966, 05, 06), 79.6), - _DateTimeData(DateTime(1966, 06, 06), 80.2), - _DateTimeData(DateTime(1966, 07, 08), 79.2), - _DateTimeData(DateTime(1966, 08, 09), 78.5), - _DateTimeData(DateTime(1966, 09, 07), 77.5), - _DateTimeData(DateTime(1966, 10, 09), 78.0), - _DateTimeData(DateTime(1966, 11, 09), 78.5), - _DateTimeData(DateTime(1966, 12, 11), 78.1), - _DateTimeData(DateTime(1967, 01, 11), 77.3), - _DateTimeData(DateTime(1967, 02, 12), 76.7), - _DateTimeData(DateTime(1967, 03, 16), 76.0), - _DateTimeData(DateTime(1967, 04, 16), 76.6), - _DateTimeData(DateTime(1967, 05, 18), 76.3), - _DateTimeData(DateTime(1967, 06, 18), 76.0), - _DateTimeData(DateTime(1967, 07, 20), 76.5), - _DateTimeData(DateTime(1967, 08, 21), 76.6), - _DateTimeData(DateTime(1967, 09, 19), 77.3), - _DateTimeData(DateTime(1967, 10, 21), 76.8), - _DateTimeData(DateTime(1967, 11, 21), 77.8), - _DateTimeData(DateTime(1967, 12, 23), 77.6), - _DateTimeData(DateTime(1968, 01, 23), 77.6), - _DateTimeData(DateTime(1968, 02, 24), 76.9), - _DateTimeData(DateTime(1968, 03, 27), 76.0), - _DateTimeData(DateTime(1968, 04, 27), 76.8), - _DateTimeData(DateTime(1968, 05, 29), 75.9), - _DateTimeData(DateTime(1968, 06, 29), 76.3), - _DateTimeData(DateTime(1968, 07, 31), 75.5), - _DateTimeData(DateTime(1968, 09, 01), 75.3), - _DateTimeData(DateTime(1968, 10, 01), 75.0), - _DateTimeData(DateTime(1968, 11, 02), 75.3), - _DateTimeData(DateTime(1968, 12, 03), 74.8), - _DateTimeData(DateTime(1969, 01, 04), 74.4), - _DateTimeData(DateTime(1969, 02, 04), 74.1), - _DateTimeData(DateTime(1969, 03, 08), 74.4), - _DateTimeData(DateTime(1969, 04, 09), 74.6), - _DateTimeData(DateTime(1969, 05, 10), 75.1), - _DateTimeData(DateTime(1969, 06, 11), 74.9), - _DateTimeData(DateTime(1969, 07, 12), 75.4), - _DateTimeData(DateTime(1969, 08, 13), 76.0), - _DateTimeData(DateTime(1969, 09, 14), 76.4), - _DateTimeData(DateTime(1969, 10, 13), 76.7), - _DateTimeData(DateTime(1969, 11, 14), 76.7), - _DateTimeData(DateTime(1969, 12, 15), 77.0), - _DateTimeData(DateTime(1970, 01, 16), 77.9), - _DateTimeData(DateTime(1970, 02, 16), 77.9), - _DateTimeData(DateTime(1970, 03, 20), 78.8), - _DateTimeData(DateTime(1970, 04, 21), 79.1), - _DateTimeData(DateTime(1970, 05, 22), 79.0), - _DateTimeData(DateTime(1970, 06, 23), 78.7), - _DateTimeData(DateTime(1970, 07, 24), 78.3), - _DateTimeData(DateTime(1970, 08, 25), 78.3), - _DateTimeData(DateTime(1970, 09, 26), 79.1), - _DateTimeData(DateTime(1970, 10, 25), 78.1), - _DateTimeData(DateTime(1970, 11, 26), 77.9), - _DateTimeData(DateTime(1970, 12, 27), 77.2), - _DateTimeData(DateTime(1971, 01, 28), 77.2), - _DateTimeData(DateTime(1971, 02, 28), 76.2), - _DateTimeData(DateTime(1971, 04, 01), 76.3), - _DateTimeData(DateTime(1971, 05, 03), 75.6), - _DateTimeData(DateTime(1971, 06, 03), 75.1), - _DateTimeData(DateTime(1971, 07, 05), 74.5), - _DateTimeData(DateTime(1971, 08, 05), 74.6), - _DateTimeData(DateTime(1971, 09, 06), 75.2), - _DateTimeData(DateTime(1971, 10, 08), 74.5), - _DateTimeData(DateTime(1971, 11, 06), 74.7), - _DateTimeData(DateTime(1971, 12, 08), 74.7), - _DateTimeData(DateTime(1972, 01, 08), 75.2), - _DateTimeData(DateTime(1972, 02, 09), 75.5), - _DateTimeData(DateTime(1972, 03, 11), 76.3), - _DateTimeData(DateTime(1972, 04, 12), 75.7), - _DateTimeData(DateTime(1972, 05, 14), 76.5), - _DateTimeData(DateTime(1972, 06, 14), 77.5), - _DateTimeData(DateTime(1972, 07, 16), 78.3), - _DateTimeData(DateTime(1972, 08, 16), 79.0), - _DateTimeData(DateTime(1972, 09, 17), 80.0), - _DateTimeData(DateTime(1972, 10, 19), 80.4), - _DateTimeData(DateTime(1972, 11, 18), 80.5), - _DateTimeData(DateTime(1972, 12, 20), 79.5), - _DateTimeData(DateTime(1973, 01, 20), 78.9), - _DateTimeData(DateTime(1973, 02, 21), 79.5), - _DateTimeData(DateTime(1973, 03, 24), 80.5), - _DateTimeData(DateTime(1973, 04, 25), 79.6), - _DateTimeData(DateTime(1973, 05, 27), 80.6), - _DateTimeData(DateTime(1973, 06, 27), 81.4), - _DateTimeData(DateTime(1973, 07, 29), 81.2), - _DateTimeData(DateTime(1973, 08, 29), 81.1), - _DateTimeData(DateTime(1973, 09, 30), 81.3), - _DateTimeData(DateTime(1973, 11, 01), 81.3), - _DateTimeData(DateTime(1973, 11, 30), 80.6), - _DateTimeData(DateTime(1974, 01, 01), 81.0), - _DateTimeData(DateTime(1974, 02, 01), 81.6), - _DateTimeData(DateTime(1974, 03, 05), 80.9), - _DateTimeData(DateTime(1974, 04, 05), 80.0), - _DateTimeData(DateTime(1974, 05, 07), 80.8), - _DateTimeData(DateTime(1974, 06, 08), 81.0), - _DateTimeData(DateTime(1974, 07, 09), 80.7), - _DateTimeData(DateTime(1974, 08, 10), 80.4), - _DateTimeData(DateTime(1974, 09, 10), 79.9), - _DateTimeData(DateTime(1974, 10, 12), 79.3), - _DateTimeData(DateTime(1974, 11, 13), 78.7), - _DateTimeData(DateTime(1974, 12, 12), 77.9), - _DateTimeData(DateTime(1975, 01, 13), 78.4), - _DateTimeData(DateTime(1975, 02, 13), 77.4), - _DateTimeData(DateTime(1975, 03, 17), 78.0), - _DateTimeData(DateTime(1975, 04, 17), 77.9), - _DateTimeData(DateTime(1975, 05, 19), 77.8), - _DateTimeData(DateTime(1975, 06, 20), 78.3), - _DateTimeData(DateTime(1975, 07, 21), 79.2), - _DateTimeData(DateTime(1975, 08, 22), 79.9), - _DateTimeData(DateTime(1975, 09, 22), 79.1), - _DateTimeData(DateTime(1975, 10, 24), 79.1), - _DateTimeData(DateTime(1975, 11, 25), 79.2), - _DateTimeData(DateTime(1975, 12, 24), 78.3), - _DateTimeData(DateTime(1976, 01, 25), 77.6), - _DateTimeData(DateTime(1976, 02, 25), 78.3), - _DateTimeData(DateTime(1976, 03, 28), 78.0), - _DateTimeData(DateTime(1976, 04, 28), 78.0), - _DateTimeData(DateTime(1976, 05, 30), 78.6), - _DateTimeData(DateTime(1976, 07, 01), 79.5), - _DateTimeData(DateTime(1976, 08, 01), 79.1), - _DateTimeData(DateTime(1976, 09, 02), 79.9), - _DateTimeData(DateTime(1976, 10, 03), 79.9), - _DateTimeData(DateTime(1976, 11, 04), 79.0), - _DateTimeData(DateTime(1976, 12, 06), 79.3), - _DateTimeData(DateTime(1977, 01, 05), 78.7), - _DateTimeData(DateTime(1977, 02, 06), 78.9), - _DateTimeData(DateTime(1977, 03, 09), 79.9), - _DateTimeData(DateTime(1977, 04, 10), 80.5), - _DateTimeData(DateTime(1977, 05, 11), 79.7), - _DateTimeData(DateTime(1977, 06, 12), 80.7), - _DateTimeData(DateTime(1977, 07, 14), 81.6), - _DateTimeData(DateTime(1977, 08, 14), 82.6), - _DateTimeData(DateTime(1977, 09, 15), 82.1), - _DateTimeData(DateTime(1977, 10, 16), 83.1), - _DateTimeData(DateTime(1977, 11, 17), 82.9), - _DateTimeData(DateTime(1977, 12, 19), 83.0), - _DateTimeData(DateTime(1978, 01, 17), 82.1), - _DateTimeData(DateTime(1978, 02, 18), 82.0), - _DateTimeData(DateTime(1978, 03, 21), 82.0), - ]; - return randomData; -} diff --git a/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming/pinch_zooming.dart b/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming/pinch_zooming.dart new file mode 100644 index 00000000..16c89cf2 --- /dev/null +++ b/lib/samples/chart/user_interactions/zooming_panning/pinch_zooming/pinch_zooming.dart @@ -0,0 +1,581 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:flutter_examples/widgets/bottom_sheet.dart'; +import 'package:flutter_examples/widgets/customDropDown.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; + +//ignore:must_be_immutable +class DefaultPanning extends StatefulWidget { + DefaultPanning({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _DefaultPanningState createState() => _DefaultPanningState(sample); +} + +ZoomPanBehavior zoomingBehavior; + +class _DefaultPanningState extends State { + _DefaultPanningState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(null, sample, PinchZoomingFrontPanel(sample)); + } +} + +SfCartesianChart getDefaultPanningChart(bool isTileView, + [ZoomMode _zoomModeType]) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + primaryXAxis: DateTimeAxis(majorGridLines: MajorGridLines(width: 0)), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), + majorTickLines: MajorTickLines(size: 0)), + series: getDefaultPanningSeries(isTileView), + zoomPanBehavior: zoomingBehavior); +} + +List> getDefaultPanningSeries( + bool isTileView) { + final List color = []; + color.add(Colors.teal[50]); + color.add(Colors.teal[200]); + color.add(Colors.teal); + + final List stops = []; + stops.add(0.0); + stops.add(0.5); + stops.add(1.0); + + final LinearGradient gradientColors = + LinearGradient(colors: color, stops: stops); + return >[ + AreaSeries( + dataSource: getDateTimeData(), + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + gradient: gradientColors + // width: 2 + ) + ]; +} + +dynamic getDateTimeData() { + final List randomData = [ + ChartSampleData(x: DateTime(1950, 3, 31), y: 80.7), + ChartSampleData(x: DateTime(1950, 5, 1), y: 80.2), + ChartSampleData(x: DateTime(1950, 6, 2), y: 79.3), + ChartSampleData(x: DateTime(1950, 7, 3), y: 78.6), + ChartSampleData(x: DateTime(1950, 8, 4), y: 79.5), + ChartSampleData(x: DateTime(1950, 9, 5), y: 78.9), + ChartSampleData(x: DateTime(1950, 10, 6), y: 78.2), + ChartSampleData(x: DateTime(1950, 11, 07), y: 77.4), + ChartSampleData(x: DateTime(1950, 12, 08), y: 77.6), + ChartSampleData(x: DateTime(1951, 01, 09), y: 77.7), + ChartSampleData(x: DateTime(1951, 02, 10), y: 78.4), + ChartSampleData(x: DateTime(1951, 03, 11), y: 78.6), + ChartSampleData(x: DateTime(1951, 04, 12), y: 78.8), + ChartSampleData(x: DateTime(1951, 05, 13), y: 79.4), + ChartSampleData(x: DateTime(1951, 06, 14), y: 79.0), + ChartSampleData(x: DateTime(1951, 07, 15), y: 79.9), + ChartSampleData(x: DateTime(1951, 08, 16), y: 79.8), + ChartSampleData(x: DateTime(1951, 09, 17), y: 79.2), + ChartSampleData(x: DateTime(1951, 10, 18), y: 78.5), + ChartSampleData(x: DateTime(1951, 11, 19), y: 77.9), + ChartSampleData(x: DateTime(1951, 12, 20), y: 78.2), + ChartSampleData(x: DateTime(1952, 01, 21), y: 79.1), + ChartSampleData(x: DateTime(1952, 02, 22), y: 79.5), + ChartSampleData(x: DateTime(1952, 03, 23), y: 79.6), + ChartSampleData(x: DateTime(1952, 04, 24), y: 78.8), + ChartSampleData(x: DateTime(1952, 05, 25), y: 79.4), + ChartSampleData(x: DateTime(1952, 06, 26), y: 78.7), + ChartSampleData(x: DateTime(1952, 07, 27), y: 79.0), + ChartSampleData(x: DateTime(1952, 08, 28), y: 79.6), + ChartSampleData(x: DateTime(1952, 09, 29), y: 80.4), + ChartSampleData(x: DateTime(1952, 10, 30), y: 80.9), + ChartSampleData(x: DateTime(1952, 12, 01), y: 81.1), + ChartSampleData(x: DateTime(1953, 01, 01), y: 80.3), + ChartSampleData(x: DateTime(1953, 02, 02), y: 81.0), + ChartSampleData(x: DateTime(1953, 03, 06), y: 81.1), + ChartSampleData(x: DateTime(1953, 04, 04), y: 81.2), + ChartSampleData(x: DateTime(1953, 05, 06), y: 81.9), + ChartSampleData(x: DateTime(1953, 06, 06), y: 82.9), + ChartSampleData(x: DateTime(1953, 07, 08), y: 82.9), + ChartSampleData(x: DateTime(1953, 08, 08), y: 82.8), + ChartSampleData(x: DateTime(1953, 09, 09), y: 82.1), + ChartSampleData(x: DateTime(1953, 10, 11), y: 81.5), + ChartSampleData(x: DateTime(1953, 11, 11), y: 82.0), + ChartSampleData(x: DateTime(1953, 12, 13), y: 81.2), + ChartSampleData(x: DateTime(1954, 01, 13), y: 80.6), + ChartSampleData(x: DateTime(1954, 02, 14), y: 80.2), + ChartSampleData(x: DateTime(1954, 03, 18), y: 79.4), + ChartSampleData(x: DateTime(1954, 04, 16), y: 78.4), + ChartSampleData(x: DateTime(1954, 05, 18), y: 78.8), + ChartSampleData(x: DateTime(1954, 06, 18), y: 78.0), + ChartSampleData(x: DateTime(1954, 07, 20), y: 78.5), + ChartSampleData(x: DateTime(1954, 08, 20), y: 78.9), + ChartSampleData(x: DateTime(1954, 09, 21), y: 79.1), + ChartSampleData(x: DateTime(1954, 10, 23), y: 79.1), + ChartSampleData(x: DateTime(1954, 11, 23), y: 79.3), + ChartSampleData(x: DateTime(1954, 12, 25), y: 80.2), + ChartSampleData(x: DateTime(1955, 01, 25), y: 79.7), + ChartSampleData(x: DateTime(1955, 02, 26), y: 79.8), + ChartSampleData(x: DateTime(1955, 03, 30), y: 79.3), + ChartSampleData(x: DateTime(1955, 04, 28), y: 78.3), + ChartSampleData(x: DateTime(1955, 05, 30), y: 77.4), + ChartSampleData(x: DateTime(1955, 06, 30), y: 78.0), + ChartSampleData(x: DateTime(1955, 08, 01), y: 77.0), + ChartSampleData(x: DateTime(1955, 09, 01), y: 77.6), + ChartSampleData(x: DateTime(1955, 10, 03), y: 76.7), + ChartSampleData(x: DateTime(1955, 11, 04), y: 76.5), + ChartSampleData(x: DateTime(1955, 12, 05), y: 75.8), + ChartSampleData(x: DateTime(1956, 01, 06), y: 75.2), + ChartSampleData(x: DateTime(1956, 02, 06), y: 75.8), + ChartSampleData(x: DateTime(1956, 03, 09), y: 76.3), + ChartSampleData(x: DateTime(1956, 04, 10), y: 76.9), + ChartSampleData(x: DateTime(1956, 05, 10), y: 76.3), + ChartSampleData(x: DateTime(1956, 06, 11), y: 76.3), + ChartSampleData(x: DateTime(1956, 07, 12), y: 76.6), + ChartSampleData(x: DateTime(1956, 08, 13), y: 76.1), + ChartSampleData(x: DateTime(1956, 09, 13), y: 76.3), + ChartSampleData(x: DateTime(1956, 10, 15), y: 76.6), + ChartSampleData(x: DateTime(1956, 11, 16), y: 77.3), + ChartSampleData(x: DateTime(1956, 12, 17), y: 76.6), + ChartSampleData(x: DateTime(1957, 01, 18), y: 76.6), + ChartSampleData(x: DateTime(1957, 02, 18), y: 76.6), + ChartSampleData(x: DateTime(1957, 03, 22), y: 77.4), + ChartSampleData(x: DateTime(1957, 04, 23), y: 78.2), + ChartSampleData(x: DateTime(1957, 05, 22), y: 78.0), + ChartSampleData(x: DateTime(1957, 06, 23), y: 77.1), + ChartSampleData(x: DateTime(1957, 07, 24), y: 77.6), + ChartSampleData(x: DateTime(1957, 08, 25), y: 77.1), + ChartSampleData(x: DateTime(1957, 09, 25), y: 77.4), + ChartSampleData(x: DateTime(1957, 10, 27), y: 76.4), + ChartSampleData(x: DateTime(1957, 11, 28), y: 76.7), + ChartSampleData(x: DateTime(1957, 12, 29), y: 76.6), + ChartSampleData(x: DateTime(1958, 01, 30), y: 76.7), + ChartSampleData(x: DateTime(1958, 03, 02), y: 76.1), + ChartSampleData(x: DateTime(1958, 04, 03), y: 75.4), + ChartSampleData(x: DateTime(1958, 05, 05), y: 76.1), + ChartSampleData(x: DateTime(1958, 06, 03), y: 76.6), + ChartSampleData(x: DateTime(1958, 07, 05), y: 76.9), + ChartSampleData(x: DateTime(1958, 08, 05), y: 77.9), + ChartSampleData(x: DateTime(1958, 09, 06), y: 77.5), + ChartSampleData(x: DateTime(1958, 10, 07), y: 77.5), + ChartSampleData(x: DateTime(1958, 11, 08), y: 77.5), + ChartSampleData(x: DateTime(1958, 12, 10), y: 77.3), + ChartSampleData(x: DateTime(1959, 01, 10), y: 76.6), + ChartSampleData(x: DateTime(1959, 02, 11), y: 77.0), + ChartSampleData(x: DateTime(1959, 03, 14), y: 76.5), + ChartSampleData(x: DateTime(1959, 04, 15), y: 77.4), + ChartSampleData(x: DateTime(1959, 05, 17), y: 77.8), + ChartSampleData(x: DateTime(1959, 06, 15), y: 78.3), + ChartSampleData(x: DateTime(1959, 07, 17), y: 78.3), + ChartSampleData(x: DateTime(1959, 08, 17), y: 78.9), + ChartSampleData(x: DateTime(1959, 09, 18), y: 78.9), + ChartSampleData(x: DateTime(1959, 10, 19), y: 79.3), + ChartSampleData(x: DateTime(1959, 11, 20), y: 78.9), + ChartSampleData(x: DateTime(1959, 12, 22), y: 78.7), + ChartSampleData(x: DateTime(1960, 01, 22), y: 79.0), + ChartSampleData(x: DateTime(1960, 02, 23), y: 78.4), + ChartSampleData(x: DateTime(1960, 03, 25), y: 77.8), + ChartSampleData(x: DateTime(1960, 04, 26), y: 78.6), + ChartSampleData(x: DateTime(1960, 05, 28), y: 79.5), + ChartSampleData(x: DateTime(1960, 06, 27), y: 79.1), + ChartSampleData(x: DateTime(1960, 07, 29), y: 79.6), + ChartSampleData(x: DateTime(1960, 08, 29), y: 79.3), + ChartSampleData(x: DateTime(1960, 09, 30), y: 79.2), + ChartSampleData(x: DateTime(1960, 10, 31), y: 79.4), + ChartSampleData(x: DateTime(1960, 12, 02), y: 79.7), + ChartSampleData(x: DateTime(1961, 01, 03), y: 80.5), + ChartSampleData(x: DateTime(1961, 02, 03), y: 79.5), + ChartSampleData(x: DateTime(1961, 03, 07), y: 80.3), + ChartSampleData(x: DateTime(1961, 04, 07), y: 80.1), + ChartSampleData(x: DateTime(1961, 05, 09), y: 80.3), + ChartSampleData(x: DateTime(1961, 06, 10), y: 79.5), + ChartSampleData(x: DateTime(1961, 07, 09), y: 78.9), + ChartSampleData(x: DateTime(1961, 08, 10), y: 79.2), + ChartSampleData(x: DateTime(1961, 09, 10), y: 79.6), + ChartSampleData(x: DateTime(1961, 10, 12), y: 78.6), + ChartSampleData(x: DateTime(1961, 11, 12), y: 78.8), + ChartSampleData(x: DateTime(1961, 12, 14), y: 79.8), + ChartSampleData(x: DateTime(1962, 01, 15), y: 80.3), + ChartSampleData(x: DateTime(1962, 02, 15), y: 79.5), + ChartSampleData(x: DateTime(1962, 03, 19), y: 79.5), + ChartSampleData(x: DateTime(1962, 04, 19), y: 80.2), + ChartSampleData(x: DateTime(1962, 05, 21), y: 80.0), + ChartSampleData(x: DateTime(1962, 06, 22), y: 79.1), + ChartSampleData(x: DateTime(1962, 07, 21), y: 79.1), + ChartSampleData(x: DateTime(1962, 08, 22), y: 79.3), + ChartSampleData(x: DateTime(1962, 09, 22), y: 79.1), + ChartSampleData(x: DateTime(1962, 10, 24), y: 79.6), + ChartSampleData(x: DateTime(1962, 11, 24), y: 80.3), + ChartSampleData(x: DateTime(1962, 12, 26), y: 79.9), + ChartSampleData(x: DateTime(1963, 01, 27), y: 80.1), + ChartSampleData(x: DateTime(1963, 02, 27), y: 80.4), + ChartSampleData(x: DateTime(1963, 03, 31), y: 80.5), + ChartSampleData(x: DateTime(1963, 05, 01), y: 80.0), + ChartSampleData(x: DateTime(1963, 06, 02), y: 80.4), + ChartSampleData(x: DateTime(1963, 07, 04), y: 80.3), + ChartSampleData(x: DateTime(1963, 08, 02), y: 81.3), + ChartSampleData(x: DateTime(1963, 09, 03), y: 82.0), + ChartSampleData(x: DateTime(1963, 10, 04), y: 82.3), + ChartSampleData(x: DateTime(1963, 11, 05), y: 82.6), + ChartSampleData(x: DateTime(1963, 12, 06), y: 82.4), + ChartSampleData(x: DateTime(1964, 01, 07), y: 82.1), + ChartSampleData(x: DateTime(1964, 02, 08), y: 81.5), + ChartSampleData(x: DateTime(1964, 03, 10), y: 81.1), + ChartSampleData(x: DateTime(1964, 04, 11), y: 80.2), + ChartSampleData(x: DateTime(1964, 05, 12), y: 80.0), + ChartSampleData(x: DateTime(1964, 06, 13), y: 79.2), + ChartSampleData(x: DateTime(1964, 07, 15), y: 78.7), + ChartSampleData(x: DateTime(1964, 08, 14), y: 78.0), + ChartSampleData(x: DateTime(1964, 09, 15), y: 77.3), + ChartSampleData(x: DateTime(1964, 10, 16), y: 77.9), + ChartSampleData(x: DateTime(1964, 11, 17), y: 77.8), + ChartSampleData(x: DateTime(1964, 12, 18), y: 77.0), + ChartSampleData(x: DateTime(1965, 01, 19), y: 77.1), + ChartSampleData(x: DateTime(1965, 02, 20), y: 78.0), + ChartSampleData(x: DateTime(1965, 03, 23), y: 78.5), + ChartSampleData(x: DateTime(1965, 04, 24), y: 78.8), + ChartSampleData(x: DateTime(1965, 05, 25), y: 79.5), + ChartSampleData(x: DateTime(1965, 06, 26), y: 80.2), + ChartSampleData(x: DateTime(1965, 07, 28), y: 81.0), + ChartSampleData(x: DateTime(1965, 08, 26), y: 80.2), + ChartSampleData(x: DateTime(1965, 09, 27), y: 79.3), + ChartSampleData(x: DateTime(1965, 10, 28), y: 79.4), + ChartSampleData(x: DateTime(1965, 11, 29), y: 79.5), + ChartSampleData(x: DateTime(1965, 12, 30), y: 79.6), + ChartSampleData(x: DateTime(1966, 01, 31), y: 79.1), + ChartSampleData(x: DateTime(1966, 03, 04), y: 79.8), + ChartSampleData(x: DateTime(1966, 04, 04), y: 78.8), + ChartSampleData(x: DateTime(1966, 05, 06), y: 79.6), + ChartSampleData(x: DateTime(1966, 06, 06), y: 80.2), + ChartSampleData(x: DateTime(1966, 07, 08), y: 79.2), + ChartSampleData(x: DateTime(1966, 08, 09), y: 78.5), + ChartSampleData(x: DateTime(1966, 09, 07), y: 77.5), + ChartSampleData(x: DateTime(1966, 10, 09), y: 78.0), + ChartSampleData(x: DateTime(1966, 11, 09), y: 78.5), + ChartSampleData(x: DateTime(1966, 12, 11), y: 78.1), + ChartSampleData(x: DateTime(1967, 01, 11), y: 77.3), + ChartSampleData(x: DateTime(1967, 02, 12), y: 76.7), + ChartSampleData(x: DateTime(1967, 03, 16), y: 76.0), + ChartSampleData(x: DateTime(1967, 04, 16), y: 76.6), + ChartSampleData(x: DateTime(1967, 05, 18), y: 76.3), + ChartSampleData(x: DateTime(1967, 06, 18), y: 76.0), + ChartSampleData(x: DateTime(1967, 07, 20), y: 76.5), + ChartSampleData(x: DateTime(1967, 08, 21), y: 76.6), + ChartSampleData(x: DateTime(1967, 09, 19), y: 77.3), + ChartSampleData(x: DateTime(1967, 10, 21), y: 76.8), + ChartSampleData(x: DateTime(1967, 11, 21), y: 77.8), + ChartSampleData(x: DateTime(1967, 12, 23), y: 77.6), + ChartSampleData(x: DateTime(1968, 01, 23), y: 77.6), + ChartSampleData(x: DateTime(1968, 02, 24), y: 76.9), + ChartSampleData(x: DateTime(1968, 03, 27), y: 76.0), + ChartSampleData(x: DateTime(1968, 04, 27), y: 76.8), + ChartSampleData(x: DateTime(1968, 05, 29), y: 75.9), + ChartSampleData(x: DateTime(1968, 06, 29), y: 76.3), + ChartSampleData(x: DateTime(1968, 07, 31), y: 75.5), + ChartSampleData(x: DateTime(1968, 09, 01), y: 75.3), + ChartSampleData(x: DateTime(1968, 10, 01), y: 75.0), + ChartSampleData(x: DateTime(1968, 11, 02), y: 75.3), + ChartSampleData(x: DateTime(1968, 12, 03), y: 74.8), + ChartSampleData(x: DateTime(1969, 01, 04), y: 74.4), + ChartSampleData(x: DateTime(1969, 02, 04), y: 74.1), + ChartSampleData(x: DateTime(1969, 03, 08), y: 74.4), + ChartSampleData(x: DateTime(1969, 04, 09), y: 74.6), + ChartSampleData(x: DateTime(1969, 05, 10), y: 75.1), + ChartSampleData(x: DateTime(1969, 06, 11), y: 74.9), + ChartSampleData(x: DateTime(1969, 07, 12), y: 75.4), + ChartSampleData(x: DateTime(1969, 08, 13), y: 76.0), + ChartSampleData(x: DateTime(1969, 09, 14), y: 76.4), + ChartSampleData(x: DateTime(1969, 10, 13), y: 76.7), + ChartSampleData(x: DateTime(1969, 11, 14), y: 76.7), + ChartSampleData(x: DateTime(1969, 12, 15), y: 77.0), + ChartSampleData(x: DateTime(1970, 01, 16), y: 77.9), + ChartSampleData(x: DateTime(1970, 02, 16), y: 77.9), + ChartSampleData(x: DateTime(1970, 03, 20), y: 78.8), + ChartSampleData(x: DateTime(1970, 04, 21), y: 79.1), + ChartSampleData(x: DateTime(1970, 05, 22), y: 79.0), + ChartSampleData(x: DateTime(1970, 06, 23), y: 78.7), + ChartSampleData(x: DateTime(1970, 07, 24), y: 78.3), + ChartSampleData(x: DateTime(1970, 08, 25), y: 78.3), + ChartSampleData(x: DateTime(1970, 09, 26), y: 79.1), + ChartSampleData(x: DateTime(1970, 10, 25), y: 78.1), + ChartSampleData(x: DateTime(1970, 11, 26), y: 77.9), + ChartSampleData(x: DateTime(1970, 12, 27), y: 77.2), + ChartSampleData(x: DateTime(1971, 01, 28), y: 77.2), + ChartSampleData(x: DateTime(1971, 02, 28), y: 76.2), + ChartSampleData(x: DateTime(1971, 04, 01), y: 76.3), + ChartSampleData(x: DateTime(1971, 05, 03), y: 75.6), + ChartSampleData(x: DateTime(1971, 06, 03), y: 75.1), + ChartSampleData(x: DateTime(1971, 07, 05), y: 74.5), + ChartSampleData(x: DateTime(1971, 08, 05), y: 74.6), + ChartSampleData(x: DateTime(1971, 09, 06), y: 75.2), + ChartSampleData(x: DateTime(1971, 10, 08), y: 74.5), + ChartSampleData(x: DateTime(1971, 11, 06), y: 74.7), + ChartSampleData(x: DateTime(1971, 12, 08), y: 74.7), + ChartSampleData(x: DateTime(1972, 01, 08), y: 75.2), + ChartSampleData(x: DateTime(1972, 02, 09), y: 75.5), + ChartSampleData(x: DateTime(1972, 03, 11), y: 76.3), + ChartSampleData(x: DateTime(1972, 04, 12), y: 75.7), + ChartSampleData(x: DateTime(1972, 05, 14), y: 76.5), + ChartSampleData(x: DateTime(1972, 06, 14), y: 77.5), + ChartSampleData(x: DateTime(1972, 07, 16), y: 78.3), + ChartSampleData(x: DateTime(1972, 08, 16), y: 79.0), + ChartSampleData(x: DateTime(1972, 09, 17), y: 80.0), + ChartSampleData(x: DateTime(1972, 10, 19), y: 80.4), + ChartSampleData(x: DateTime(1972, 11, 18), y: 80.5), + ChartSampleData(x: DateTime(1972, 12, 20), y: 79.5), + ChartSampleData(x: DateTime(1973, 01, 20), y: 78.9), + ChartSampleData(x: DateTime(1973, 02, 21), y: 79.5), + ChartSampleData(x: DateTime(1973, 03, 24), y: 80.5), + ChartSampleData(x: DateTime(1973, 04, 25), y: 79.6), + ChartSampleData(x: DateTime(1973, 05, 27), y: 80.6), + ChartSampleData(x: DateTime(1973, 06, 27), y: 81.4), + ChartSampleData(x: DateTime(1973, 07, 29), y: 81.2), + ChartSampleData(x: DateTime(1973, 08, 29), y: 81.1), + ChartSampleData(x: DateTime(1973, 09, 30), y: 81.3), + ChartSampleData(x: DateTime(1973, 11, 01), y: 81.3), + ChartSampleData(x: DateTime(1973, 11, 30), y: 80.6), + ChartSampleData(x: DateTime(1974, 01, 01), y: 81.0), + ChartSampleData(x: DateTime(1974, 02, 01), y: 81.6), + ChartSampleData(x: DateTime(1974, 03, 05), y: 80.9), + ChartSampleData(x: DateTime(1974, 04, 05), y: 80.0), + ChartSampleData(x: DateTime(1974, 05, 07), y: 80.8), + ChartSampleData(x: DateTime(1974, 06, 08), y: 81.0), + ChartSampleData(x: DateTime(1974, 07, 09), y: 80.7), + ChartSampleData(x: DateTime(1974, 08, 10), y: 80.4), + ChartSampleData(x: DateTime(1974, 09, 10), y: 79.9), + ChartSampleData(x: DateTime(1974, 10, 12), y: 79.3), + ChartSampleData(x: DateTime(1974, 11, 13), y: 78.7), + ChartSampleData(x: DateTime(1974, 12, 12), y: 77.9), + ChartSampleData(x: DateTime(1975, 01, 13), y: 78.4), + ChartSampleData(x: DateTime(1975, 02, 13), y: 77.4), + ChartSampleData(x: DateTime(1975, 03, 17), y: 78.0), + ChartSampleData(x: DateTime(1975, 04, 17), y: 77.9), + ChartSampleData(x: DateTime(1975, 05, 19), y: 77.8), + ChartSampleData(x: DateTime(1975, 06, 20), y: 78.3), + ChartSampleData(x: DateTime(1975, 07, 21), y: 79.2), + ChartSampleData(x: DateTime(1975, 08, 22), y: 79.9), + ChartSampleData(x: DateTime(1975, 09, 22), y: 79.1), + ChartSampleData(x: DateTime(1975, 10, 24), y: 79.1), + ChartSampleData(x: DateTime(1975, 11, 25), y: 79.2), + ChartSampleData(x: DateTime(1975, 12, 24), y: 78.3), + ChartSampleData(x: DateTime(1976, 01, 25), y: 77.6), + ChartSampleData(x: DateTime(1976, 02, 25), y: 78.3), + ChartSampleData(x: DateTime(1976, 03, 28), y: 78.0), + ChartSampleData(x: DateTime(1976, 04, 28), y: 78.0), + ChartSampleData(x: DateTime(1976, 05, 30), y: 78.6), + ChartSampleData(x: DateTime(1976, 07, 01), y: 79.5), + ChartSampleData(x: DateTime(1976, 08, 01), y: 79.1), + ChartSampleData(x: DateTime(1976, 09, 02), y: 79.9), + ChartSampleData(x: DateTime(1976, 10, 03), y: 79.9), + ChartSampleData(x: DateTime(1976, 11, 04), y: 79.0), + ChartSampleData(x: DateTime(1976, 12, 06), y: 79.3), + ChartSampleData(x: DateTime(1977, 01, 05), y: 78.7), + ChartSampleData(x: DateTime(1977, 02, 06), y: 78.9), + ChartSampleData(x: DateTime(1977, 03, 09), y: 79.9), + ChartSampleData(x: DateTime(1977, 04, 10), y: 80.5), + ChartSampleData(x: DateTime(1977, 05, 11), y: 79.7), + ChartSampleData(x: DateTime(1977, 06, 12), y: 80.7), + ChartSampleData(x: DateTime(1977, 07, 14), y: 81.6), + ChartSampleData(x: DateTime(1977, 08, 14), y: 82.6), + ChartSampleData(x: DateTime(1977, 09, 15), y: 82.1), + ChartSampleData(x: DateTime(1977, 10, 16), y: 83.1), + ChartSampleData(x: DateTime(1977, 11, 17), y: 82.9), + ChartSampleData(x: DateTime(1977, 12, 19), y: 83.0), + ChartSampleData(x: DateTime(1978, 01, 17), y: 82.1), + ChartSampleData(x: DateTime(1978, 02, 18), y: 82.0), + ChartSampleData(x: DateTime(1978, 03, 21), y: 82.0), + ]; + return randomData; +} + +//ignore:must_be_immutable +class PinchZoomingFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + PinchZoomingFrontPanel(this.subItemList); + SubItem subItemList; + @override + _PinchZoomingFrontPanelState createState() => + _PinchZoomingFrontPanelState(subItemList); +} + +class _PinchZoomingFrontPanelState extends State { + _PinchZoomingFrontPanelState(this.sample); + final SubItem sample; + + final List _zoomModeTypeList = ['x', 'y', 'xy'].toList(); + String _selectedModeType = 'x'; + ZoomMode _zoomModeType = ZoomMode.x; + + @override + Widget build(BuildContext context) { + zoomingBehavior = ZoomPanBehavior( + enablePinching: true, zoomMode: _zoomModeType, enablePanning: true); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getDefaultPanningChart(false, _zoomModeType)), + ), + floatingActionButton: Container( + height: 45, + child: Row( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + FloatingActionButton( + onPressed: () { + _showSettingsPanel(model); + }, + child: Icon(Icons.graphic_eq, color: Colors.white), + backgroundColor: model.backgroundColor, + ), + const Padding( + padding: EdgeInsets.only(left: 5), + ), + FloatingActionButton( + heroTag: false, + onPressed: () { + zoomingBehavior.reset(); + }, + child: Icon(Icons.refresh, color: Colors.white), + backgroundColor: model.backgroundColor, + ) + ], + ), + )); + }); + } + + void _showSettingsPanel(SampleModel model) { + showRoundedModalBottomSheet( + dismissOnTap: false, + context: context, + radius: 12.0, + color: model.bottomSheetBackgroundColor, + builder: (BuildContext context) => ScopedModelDescendant( + rebuildOnChange: false, + builder: (BuildContext context, _, SampleModel model) => Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 120, + child: Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 120, + child: Padding( + padding: const EdgeInsets.fromLTRB(15, 0, 0, 5), + child: Stack( + children: [ + Container( + height: 40, + child: Row( + crossAxisAlignment: CrossAxisAlignment.center, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + Text('Settings', + style: TextStyle( + color: model.textColor, + fontSize: 18, + letterSpacing: 0.34, + fontWeight: FontWeight.w500)), + IconButton( + icon: Icon( + Icons.close, + color: model.textColor, + ), + onPressed: () { + Navigator.pop(context); + }, + ), + ], + ), + ), + Padding( + padding: + const EdgeInsets.fromLTRB(15, 50, 0, 0), + child: ListView( + children: [ + Container( + child: Row( + children: [ + Text('Zoom mode ', + style: TextStyle( + color: model.textColor, + fontSize: 16, + letterSpacing: 0.34, + fontWeight: + FontWeight.normal)), + Container( + padding: const EdgeInsets.fromLTRB( + 0, 0, 40, 0), + height: 50, + width: 150, + child: Align( + alignment: Alignment.bottomCenter, + child: Theme( + data: Theme.of(context).copyWith( + canvasColor: model + .bottomSheetBackgroundColor), + child: DropDown( + value: _selectedModeType, + item: _zoomModeTypeList + .map((String value) { + return DropdownMenuItem< + String>( + value: + (value != null) + ? value + : 'x', + child: Text( + '$value', + style: TextStyle( + color: model + .textColor))); + }).toList(), + valueChanged: + (dynamic value) { + onZoomTypeChange( + value, model); + })), + ), + ), + ], + ), + ), + ], + ), + ) + ], + ), + ), + )), + )))); + } + + void onZoomTypeChange(String item, SampleModel model) { + setState(() { + _selectedModeType = item; + if (_selectedModeType == 'x') { + _zoomModeType = ZoomMode.x; + } + if (_selectedModeType == 'y') { + _zoomModeType = ZoomMode.y; + } + if (_selectedModeType == 'xy') { + _zoomModeType = ZoomMode.xy; + } + }); + } +} diff --git a/lib/samples/chart/user_interactions/zooming_panning/selection_zooming.dart b/lib/samples/chart/user_interactions/zooming_panning/selection_zooming.dart deleted file mode 100755 index 5a74fb3f..00000000 --- a/lib/samples/chart/user_interactions/zooming_panning/selection_zooming.dart +++ /dev/null @@ -1,573 +0,0 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -class DefaultZooming extends StatefulWidget { - const DefaultZooming(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _DefaultZoomingState createState() => _DefaultZoomingState(sample); -} - -class _DefaultZoomingState extends State { - _DefaultZoomingState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DefaultZooming oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/zooming_panning/selection_zooming.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -ZoomPanBehavior zoomingBehavior; - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - bool enableTooltip = false; - bool enableMarker = false; - bool enableDatalabel = false; - - @override - Widget build(BuildContext context) { - zoomingBehavior = - ZoomPanBehavior(enablePanning: true, enableSelectionZooming: true); - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultZoomingChart(false)), - ), - floatingActionButton: FloatingActionButton( - onPressed: () => setState(() { - zoomingBehavior.reset(); - }), - child: Icon(Icons.refresh, color: Colors.white), - backgroundColor: model.backgroundColor, - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getDefaultZoomingChart(bool isTileView) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - legend: Legend(isVisible: isTileView ? false : true, opacity: 0.8), - title: ChartTitle(text: isTileView ? '' : 'Heigth vs Weight'), - zoomPanBehavior: zoomingBehavior, - primaryXAxis: NumericAxis( - minimum: 100, - maximum: 220, - title: AxisTitle(text: isTileView ? '' : 'Height in inches'), - majorGridLines: MajorGridLines(width: 0), - edgeLabelPlacement: EdgeLabelPlacement.shift), - primaryYAxis: NumericAxis( - minimum: 50, - maximum: 80, - title: AxisTitle(text: isTileView ? '' : 'Weight in Pounds')), - series: getZoomScatterSeries(isTileView), - ); -} - -List> getZoomScatterSeries( - bool isTileView) { - return >[ - ScatterSeries<_ChartDataModel, num>( - dataSource: zoomData, - opacity: 0.8, - name: 'Male', - xValueMapper: (_ChartDataModel data, _) => data.xVal, - yValueMapper: (_ChartDataModel data, _) => data.yVal, - ), - ScatterSeries<_ChartDataModel, num>( - dataSource: zoomData1, - opacity: 0.8, - name: 'Female', - xValueMapper: (_ChartDataModel data, _) => data.xVal, - yValueMapper: (_ChartDataModel data, _) => data.yVal, - markerSettings: MarkerSettings(shape: DataMarkerType.diamond)) - ]; -} - -final List<_ChartDataModel> zoomData = <_ChartDataModel>[ - _ChartDataModel(161, 65), - _ChartDataModel(150, 65), - _ChartDataModel(155, 65), - _ChartDataModel(160, 65), - _ChartDataModel(148, 66), - _ChartDataModel(145, 66), - _ChartDataModel(137, 66), - _ChartDataModel(138, 66), - _ChartDataModel(162, 66), - _ChartDataModel(166, 66), - _ChartDataModel(159, 66), - _ChartDataModel(151, 66), - _ChartDataModel(180, 66), - _ChartDataModel(181, 66), - _ChartDataModel(174, 66), - _ChartDataModel(159, 66), - _ChartDataModel(151, 67), - _ChartDataModel(148, 67), - _ChartDataModel(141, 67), - _ChartDataModel(145, 67), - _ChartDataModel(165, 67), - _ChartDataModel(168, 67), - _ChartDataModel(159, 67), - _ChartDataModel(183, 67), - _ChartDataModel(188, 67), - _ChartDataModel(187, 67), - _ChartDataModel(172, 67), - _ChartDataModel(193, 67), - _ChartDataModel(153, 68), - _ChartDataModel(153, 68), - _ChartDataModel(147, 68), - _ChartDataModel(163, 68), - _ChartDataModel(174, 68), - _ChartDataModel(173, 68), - _ChartDataModel(160, 68), - _ChartDataModel(191, 68), - _ChartDataModel(131, 62), - _ChartDataModel(140, 62), - _ChartDataModel(149, 62), - _ChartDataModel(115, 62), - _ChartDataModel(164, 63), - _ChartDataModel(162, 63), - _ChartDataModel(167, 63), - _ChartDataModel(146, 63), - _ChartDataModel(150, 64), - _ChartDataModel(141, 64), - _ChartDataModel(142, 64), - _ChartDataModel(129, 64), - _ChartDataModel(159, 64), - _ChartDataModel(158, 64), - _ChartDataModel(162, 64), - _ChartDataModel(136, 64), - _ChartDataModel(176, 64), - _ChartDataModel(170, 64), - _ChartDataModel(167, 64), - _ChartDataModel(144, 64), - _ChartDataModel(143, 65), - _ChartDataModel(137, 65), - _ChartDataModel(137, 65), - _ChartDataModel(140, 65), - _ChartDataModel(182, 65), - _ChartDataModel(168, 65), - _ChartDataModel(181, 65), - _ChartDataModel(165, 65), - _ChartDataModel(214, 74), - _ChartDataModel(211, 74), - _ChartDataModel(166, 74), - _ChartDataModel(185, 74), - _ChartDataModel(189, 68), - _ChartDataModel(182, 68), - _ChartDataModel(181, 68), - _ChartDataModel(196, 68), - _ChartDataModel(152, 69), - _ChartDataModel(173, 69), - _ChartDataModel(190, 69), - _ChartDataModel(161, 69), - _ChartDataModel(173, 69), - _ChartDataModel(185, 69), - _ChartDataModel(141, 69), - _ChartDataModel(149, 69), - _ChartDataModel(134, 62), - _ChartDataModel(183, 62), - _ChartDataModel(155, 62), - _ChartDataModel(164, 62), - _ChartDataModel(169, 62), - _ChartDataModel(122, 62), - _ChartDataModel(161, 62), - _ChartDataModel(166, 62), - _ChartDataModel(137, 63), - _ChartDataModel(140, 63), - _ChartDataModel(140, 63), - _ChartDataModel(126, 63), - _ChartDataModel(150, 63), - _ChartDataModel(153, 63), - _ChartDataModel(154, 63), - _ChartDataModel(139, 63), - _ChartDataModel(186, 69), - _ChartDataModel(188, 69), - _ChartDataModel(148, 69), - _ChartDataModel(174, 69), - _ChartDataModel(164, 70), - _ChartDataModel(182, 70), - _ChartDataModel(200, 70), - _ChartDataModel(151, 70), - _ChartDataModel(204, 74), - _ChartDataModel(177, 74), - _ChartDataModel(194, 74), - _ChartDataModel(212, 74), - _ChartDataModel(162, 70), - _ChartDataModel(200, 70), - _ChartDataModel(166, 70), - _ChartDataModel(177, 70), - _ChartDataModel(188, 70), - _ChartDataModel(156, 70), - _ChartDataModel(175, 70), - _ChartDataModel(191, 70), - _ChartDataModel(174, 71), - _ChartDataModel(187, 71), - _ChartDataModel(208, 71), - _ChartDataModel(166, 71), - _ChartDataModel(150, 71), - _ChartDataModel(194, 71), - _ChartDataModel(157, 71), - _ChartDataModel(183, 71), - _ChartDataModel(204, 71), - _ChartDataModel(162, 71), - _ChartDataModel(179, 71), - _ChartDataModel(196, 71), - _ChartDataModel(170, 72), - _ChartDataModel(184, 72), - _ChartDataModel(197, 72), - _ChartDataModel(162, 72), - _ChartDataModel(177, 72), - _ChartDataModel(203, 72), - _ChartDataModel(159, 72), - _ChartDataModel(178, 72), - _ChartDataModel(198, 72), - _ChartDataModel(167, 72), - _ChartDataModel(184, 72), - _ChartDataModel(201, 72), - _ChartDataModel(167, 73), - _ChartDataModel(178, 73), - _ChartDataModel(215, 73), - _ChartDataModel(207, 73), - _ChartDataModel(172, 73), - _ChartDataModel(204, 73), - _ChartDataModel(162, 73), - _ChartDataModel(182, 73), - _ChartDataModel(201, 73), - _ChartDataModel(172, 73), - _ChartDataModel(189, 73), - _ChartDataModel(206, 73), - _ChartDataModel(150, 74), - _ChartDataModel(187, 74), - _ChartDataModel(153, 74), - _ChartDataModel(171, 74), -]; -final List<_ChartDataModel> zoomData1 = <_ChartDataModel>[ - _ChartDataModel(115, 57), - _ChartDataModel(138, 57), - _ChartDataModel(166, 57), - _ChartDataModel(122, 57), - _ChartDataModel(126, 57), - _ChartDataModel(130, 57), - _ChartDataModel(125, 57), - _ChartDataModel(144, 57), - _ChartDataModel(150, 57), - _ChartDataModel(120, 57), - _ChartDataModel(125, 57), - _ChartDataModel(130, 57), - _ChartDataModel(103, 58), - _ChartDataModel(116, 58), - _ChartDataModel(130, 58), - _ChartDataModel(126, 58), - _ChartDataModel(136, 58), - _ChartDataModel(148, 58), - _ChartDataModel(119, 58), - _ChartDataModel(141, 58), - _ChartDataModel(159, 58), - _ChartDataModel(120, 58), - _ChartDataModel(135, 58), - _ChartDataModel(163, 58), - _ChartDataModel(119, 59), - _ChartDataModel(131, 59), - _ChartDataModel(148, 59), - _ChartDataModel(123, 59), - _ChartDataModel(137, 59), - _ChartDataModel(149, 59), - _ChartDataModel(121, 59), - _ChartDataModel(142, 59), - _ChartDataModel(160, 59), - _ChartDataModel(118, 59), - _ChartDataModel(130, 59), - _ChartDataModel(146, 59), - _ChartDataModel(119, 60), - _ChartDataModel(133, 60), - _ChartDataModel(150, 60), - _ChartDataModel(133, 60), - _ChartDataModel(149, 60), - _ChartDataModel(165, 60), - _ChartDataModel(130, 60), - _ChartDataModel(139, 60), - _ChartDataModel(154, 60), - _ChartDataModel(118, 60), - _ChartDataModel(152, 60), - _ChartDataModel(154, 60), - _ChartDataModel(130, 61), - _ChartDataModel(145, 61), - _ChartDataModel(166, 61), - _ChartDataModel(131, 61), - _ChartDataModel(143, 61), - _ChartDataModel(162, 61), - _ChartDataModel(131, 61), - _ChartDataModel(145, 61), - _ChartDataModel(162, 61), - _ChartDataModel(115, 61), - _ChartDataModel(149, 61), - _ChartDataModel(183, 61), - _ChartDataModel(121, 62), - _ChartDataModel(139, 62), - _ChartDataModel(159, 62), - _ChartDataModel(135, 62), - _ChartDataModel(152, 62), - _ChartDataModel(178, 62), - _ChartDataModel(130, 62), - _ChartDataModel(153, 62), - _ChartDataModel(172, 62), - _ChartDataModel(114, 62), - _ChartDataModel(135, 62), - _ChartDataModel(154, 62), - _ChartDataModel(126, 63), - _ChartDataModel(141, 63), - _ChartDataModel(160, 63), - _ChartDataModel(135, 63), - _ChartDataModel(149, 63), - _ChartDataModel(180, 63), - _ChartDataModel(132, 63), - _ChartDataModel(144, 63), - _ChartDataModel(163, 63), - _ChartDataModel(122, 63), - _ChartDataModel(146, 63), - _ChartDataModel(156, 63), - _ChartDataModel(133, 64), - _ChartDataModel(150, 64), - _ChartDataModel(176, 64), - _ChartDataModel(133, 64), - _ChartDataModel(149, 64), - _ChartDataModel(176, 64), - _ChartDataModel(136, 64), - _ChartDataModel(157, 64), - _ChartDataModel(174, 64), - _ChartDataModel(131, 64), - _ChartDataModel(155, 64), - _ChartDataModel(191, 64), - _ChartDataModel(136, 65), - _ChartDataModel(149, 65), - _ChartDataModel(177, 65), - _ChartDataModel(143, 65), - _ChartDataModel(149, 65), - _ChartDataModel(184, 65), - _ChartDataModel(128, 65), - _ChartDataModel(146, 65), - _ChartDataModel(157, 65), - _ChartDataModel(133, 65), - _ChartDataModel(153, 65), - _ChartDataModel(173, 65), - _ChartDataModel(141, 66), - _ChartDataModel(156, 66), - _ChartDataModel(175, 66), - _ChartDataModel(125, 66), - _ChartDataModel(138, 66), - _ChartDataModel(165, 66), - _ChartDataModel(122, 66), - _ChartDataModel(164, 66), - _ChartDataModel(182, 66), - _ChartDataModel(137, 66), - _ChartDataModel(157, 66), - _ChartDataModel(176, 66), - _ChartDataModel(149, 67), - _ChartDataModel(159, 67), - _ChartDataModel(179, 67), - _ChartDataModel(156, 67), - _ChartDataModel(179, 67), - _ChartDataModel(186, 67), - _ChartDataModel(147, 67), - _ChartDataModel(166, 67), - _ChartDataModel(185, 67), - _ChartDataModel(140, 67), - _ChartDataModel(160, 67), - _ChartDataModel(180, 67), - _ChartDataModel(145, 68), - _ChartDataModel(155, 68), - _ChartDataModel(170, 68), - _ChartDataModel(129, 68), - _ChartDataModel(164, 68), - _ChartDataModel(189, 68), - _ChartDataModel(150, 68), - _ChartDataModel(157, 68), - _ChartDataModel(183, 68), - _ChartDataModel(144, 68), - _ChartDataModel(170, 68), - _ChartDataModel(180, 68) -]; - -class _ChartDataModel { - _ChartDataModel(this.xVal, this.yVal); - final double xVal; - final double yVal; -} diff --git a/lib/samples/chart/user_interactions/zooming_panning/selection_zooming/selection_zooming.dart b/lib/samples/chart/user_interactions/zooming_panning/selection_zooming/selection_zooming.dart new file mode 100644 index 00000000..fa5121bf --- /dev/null +++ b/lib/samples/chart/user_interactions/zooming_panning/selection_zooming/selection_zooming.dart @@ -0,0 +1,408 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; + +//ignore:must_be_immutable +class DefaultZooming extends StatefulWidget { + DefaultZooming({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _DefaultZoomingState createState() => _DefaultZoomingState(sample); +} + +class _DefaultZoomingState extends State { + _DefaultZoomingState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(null, sample, SelectionZoomingFrontPanel(sample)); + } +} + +ZoomPanBehavior zoomingPanBehavior; + +SfCartesianChart getDefaultZoomingChart(bool isTileView) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + legend: Legend(isVisible: isTileView ? false : true, opacity: 0.8), + title: ChartTitle(text: isTileView ? '' : 'Heigth vs Weight'), + zoomPanBehavior: zoomingPanBehavior, + primaryXAxis: NumericAxis( + minimum: 100, + maximum: 220, + title: AxisTitle(text: isTileView ? '' : 'Height in inches'), + majorGridLines: MajorGridLines(width: 0), + edgeLabelPlacement: EdgeLabelPlacement.shift), + primaryYAxis: NumericAxis( + minimum: 50, + maximum: 80, + title: AxisTitle(text: isTileView ? '' : 'Weight in Pounds')), + series: getZoomScatterSeries(isTileView), + ); +} + +List> getZoomScatterSeries( + bool isTileView) { + return >[ + ScatterSeries( + dataSource: zoomData, + opacity: 0.8, + name: 'Male', + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + ), + ScatterSeries( + dataSource: zoomData1, + opacity: 0.8, + name: 'Female', + xValueMapper: (ChartSampleData data, _) => data.x, + yValueMapper: (ChartSampleData data, _) => data.y, + markerSettings: MarkerSettings(shape: DataMarkerType.diamond)) + ]; +} + +final List zoomData = [ + ChartSampleData(x:161, y:65), + ChartSampleData(x:150, y:65), + ChartSampleData(x:155, y:65), + ChartSampleData(x:160, y:65), + ChartSampleData(x:148, y:66), + ChartSampleData(x:145, y:66), + ChartSampleData(x:137, y:66), + ChartSampleData(x:138, y:66), + ChartSampleData(x:162, y:66), + ChartSampleData(x:166, y:66), + ChartSampleData(x:159, y:66), + ChartSampleData(x:151, y:66), + ChartSampleData(x:180, y:66), + ChartSampleData(x:181, y:66), + ChartSampleData(x:174, y:66), + ChartSampleData(x:159, y:66), + ChartSampleData(x:151, y:67), + ChartSampleData(x:148, y:67), + ChartSampleData(x:141, y:67), + ChartSampleData(x:145, y:67), + ChartSampleData(x:165, y:67), + ChartSampleData(x:168, y:67), + ChartSampleData(x:159, y:67), + ChartSampleData(x:183, y:67), + ChartSampleData(x:188, y:67), + ChartSampleData(x:187, y:67), + ChartSampleData(x:172, y:67), + ChartSampleData(x:193, y:67), + ChartSampleData(x:153, y:68), + ChartSampleData(x:153, y:68), + ChartSampleData(x:147, y:68), + ChartSampleData(x:163, y:68), + ChartSampleData(x:174, y:68), + ChartSampleData(x:173, y:68), + ChartSampleData(x:160, y:68), + ChartSampleData(x:191, y:68), + ChartSampleData(x:131, y:62), + ChartSampleData(x:140, y:62), + ChartSampleData(x:149, y:62), + ChartSampleData(x:115, y:62), + ChartSampleData(x:164, y:63), + ChartSampleData(x:162, y:63), + ChartSampleData(x:167, y:63), + ChartSampleData(x:146, y:63), + ChartSampleData(x:150, y:64), + ChartSampleData(x:141, y:64), + ChartSampleData(x:142, y:64), + ChartSampleData(x:129, y:64), + ChartSampleData(x:159, y:64), + ChartSampleData(x:158, y:64), + ChartSampleData(x:162, y:64), + ChartSampleData(x:136, y:64), + ChartSampleData(x:176, y:64), + ChartSampleData(x:170, y:64), + ChartSampleData(x:167, y:64), + ChartSampleData(x:144, y:64), + ChartSampleData(x:143, y:65), + ChartSampleData(x:137, y:65), + ChartSampleData(x:137, y:65), + ChartSampleData(x:140, y:65), + ChartSampleData(x:182, y:65), + ChartSampleData(x:168, y:65), + ChartSampleData(x:181, y:65), + ChartSampleData(x:165, y:65), + ChartSampleData(x:214, y:74), + ChartSampleData(x:211, y:74), + ChartSampleData(x:166, y:74), + ChartSampleData(x:185, y:74), + ChartSampleData(x:189, y:68), + ChartSampleData(x:182, y:68), + ChartSampleData(x:181, y:68), + ChartSampleData(x:196, y:68), + ChartSampleData(x:152, y:69), + ChartSampleData(x:173, y:69), + ChartSampleData(x:190, y:69), + ChartSampleData(x:161, y:69), + ChartSampleData(x:173, y:69), + ChartSampleData(x:185, y:69), + ChartSampleData(x:141, y:69), + ChartSampleData(x:149, y:69), + ChartSampleData(x:134, y:62), + ChartSampleData(x:183, y:62), + ChartSampleData(x:155, y:62), + ChartSampleData(x:164, y:62), + ChartSampleData(x:169, y:62), + ChartSampleData(x:122, y:62), + ChartSampleData(x:161, y:62), + ChartSampleData(x:166, y:62), + ChartSampleData(x:137, y:63), + ChartSampleData(x:140, y:63), + ChartSampleData(x:140, y:63), + ChartSampleData(x:126, y:63), + ChartSampleData(x:150, y:63), + ChartSampleData(x:153, y:63), + ChartSampleData(x:154, y:63), + ChartSampleData(x:139, y:63), + ChartSampleData(x:186, y:69), + ChartSampleData(x:188, y:69), + ChartSampleData(x:148, y:69), + ChartSampleData(x:174, y:69), + ChartSampleData(x:164, y:70), + ChartSampleData(x:182, y:70), + ChartSampleData(x:200, y:70), + ChartSampleData(x:151, y:70), + ChartSampleData(x:204, y:74), + ChartSampleData(x:177, y:74), + ChartSampleData(x:194, y:74), + ChartSampleData(x:212, y:74), + ChartSampleData(x:162, y:70), + ChartSampleData(x:200, y:70), + ChartSampleData(x:166, y:70), + ChartSampleData(x:177, y:70), + ChartSampleData(x:188, y:70), + ChartSampleData(x:156, y:70), + ChartSampleData(x:175, y:70), + ChartSampleData(x:191, y:70), + ChartSampleData(x:174, y:71), + ChartSampleData(x:187, y:71), + ChartSampleData(x:208, y:71), + ChartSampleData(x:166, y:71), + ChartSampleData(x:150, y:71), + ChartSampleData(x:194, y:71), + ChartSampleData(x:157, y:71), + ChartSampleData(x:183, y:71), + ChartSampleData(x:204, y:71), + ChartSampleData(x:162, y:71), + ChartSampleData(x:179, y:71), + ChartSampleData(x:196, y:71), + ChartSampleData(x:170, y:72), + ChartSampleData(x:184, y:72), + ChartSampleData(x:197, y:72), + ChartSampleData(x:162, y:72), + ChartSampleData(x:177, y:72), + ChartSampleData(x:203, y:72), + ChartSampleData(x:159, y:72), + ChartSampleData(x:178, y:72), + ChartSampleData(x:198, y:72), + ChartSampleData(x:167, y:72), + ChartSampleData(x:184, y:72), + ChartSampleData(x:201, y:72), + ChartSampleData(x:167, y:73), + ChartSampleData(x:178, y:73), + ChartSampleData(x:215, y:73), + ChartSampleData(x:207, y:73), + ChartSampleData(x:172, y:73), + ChartSampleData(x:204, y:73), + ChartSampleData(x:162, y:73), + ChartSampleData(x:182, y:73), + ChartSampleData(x:201, y:73), + ChartSampleData(x:172, y:73), + ChartSampleData(x:189, y:73), + ChartSampleData(x:206, y:73), + ChartSampleData(x:150, y:74), + ChartSampleData(x:187, y:74), + ChartSampleData(x:153, y:74), + ChartSampleData(x:171, y:74), +]; +final List zoomData1 = [ + ChartSampleData(x:115, y:57), + ChartSampleData(x:138, y:57), + ChartSampleData(x:166, y:57), + ChartSampleData(x:122, y:57), + ChartSampleData(x:126, y:57), + ChartSampleData(x:130, y:57), + ChartSampleData(x:125, y:57), + ChartSampleData(x:144, y:57), + ChartSampleData(x:150, y:57), + ChartSampleData(x:120, y:57), + ChartSampleData(x:125, y:57), + ChartSampleData(x:130, y:57), + ChartSampleData(x:103, y:58), + ChartSampleData(x:116, y:58), + ChartSampleData(x:130, y:58), + ChartSampleData(x:126, y:58), + ChartSampleData(x:136, y:58), + ChartSampleData(x:148, y:58), + ChartSampleData(x:119, y:58), + ChartSampleData(x:141, y:58), + ChartSampleData(x:159, y:58), + ChartSampleData(x:120, y:58), + ChartSampleData(x:135, y:58), + ChartSampleData(x:163, y:58), + ChartSampleData(x:119, y:59), + ChartSampleData(x:131, y:59), + ChartSampleData(x:148, y:59), + ChartSampleData(x:123, y:59), + ChartSampleData(x:137, y:59), + ChartSampleData(x:149, y:59), + ChartSampleData(x:121, y:59), + ChartSampleData(x:142, y:59), + ChartSampleData(x:160, y:59), + ChartSampleData(x:118, y:59), + ChartSampleData(x:130, y:59), + ChartSampleData(x:146, y:59), + ChartSampleData(x:119, y:60), + ChartSampleData(x:133, y:60), + ChartSampleData(x:150, y:60), + ChartSampleData(x:133, y:60), + ChartSampleData(x:149, y:60), + ChartSampleData(x:165, y:60), + ChartSampleData(x:130, y:60), + ChartSampleData(x:139, y:60), + ChartSampleData(x:154, y:60), + ChartSampleData(x:118, y:60), + ChartSampleData(x:152, y:60), + ChartSampleData(x:154, y:60), + ChartSampleData(x:130, y:61), + ChartSampleData(x:145, y:61), + ChartSampleData(x:166, y:61), + ChartSampleData(x:131, y:61), + ChartSampleData(x:143, y:61), + ChartSampleData(x:162, y:61), + ChartSampleData(x:131, y:61), + ChartSampleData(x:145, y:61), + ChartSampleData(x:162, y:61), + ChartSampleData(x:115, y:61), + ChartSampleData(x:149, y:61), + ChartSampleData(x:183, y:61), + ChartSampleData(x:121, y:62), + ChartSampleData(x:139, y:62), + ChartSampleData(x:159, y:62), + ChartSampleData(x:135, y:62), + ChartSampleData(x:152, y:62), + ChartSampleData(x:178, y:62), + ChartSampleData(x:130, y:62), + ChartSampleData(x:153, y:62), + ChartSampleData(x:172, y:62), + ChartSampleData(x:114, y:62), + ChartSampleData(x:135, y:62), + ChartSampleData(x:154, y:62), + ChartSampleData(x:126, y:63), + ChartSampleData(x:141, y:63), + ChartSampleData(x:160, y:63), + ChartSampleData(x:135, y:63), + ChartSampleData(x:149, y:63), + ChartSampleData(x:180, y:63), + ChartSampleData(x:132, y:63), + ChartSampleData(x:144, y:63), + ChartSampleData(x:163, y:63), + ChartSampleData(x:122, y:63), + ChartSampleData(x:146, y:63), + ChartSampleData(x:156, y:63), + ChartSampleData(x:133, y:64), + ChartSampleData(x:150, y:64), + ChartSampleData(x:176, y:64), + ChartSampleData(x:133, y:64), + ChartSampleData(x:149, y:64), + ChartSampleData(x:176, y:64), + ChartSampleData(x:136, y:64), + ChartSampleData(x:157, y:64), + ChartSampleData(x:174, y:64), + ChartSampleData(x:131, y:64), + ChartSampleData(x:155, y:64), + ChartSampleData(x:191, y:64), + ChartSampleData(x:136, y:65), + ChartSampleData(x:149, y:65), + ChartSampleData(x:177, y:65), + ChartSampleData(x:143, y:65), + ChartSampleData(x:149, y:65), + ChartSampleData(x:184, y:65), + ChartSampleData(x:128, y:65), + ChartSampleData(x:146, y:65), + ChartSampleData(x:157, y:65), + ChartSampleData(x:133, y:65), + ChartSampleData(x:153, y:65), + ChartSampleData(x:173, y:65), + ChartSampleData(x:141, y:66), + ChartSampleData(x:156, y:66), + ChartSampleData(x:175, y:66), + ChartSampleData(x:125, y:66), + ChartSampleData(x:138, y:66), + ChartSampleData(x:165, y:66), + ChartSampleData(x:122, y:66), + ChartSampleData(x:164, y:66), + ChartSampleData(x:182, y:66), + ChartSampleData(x:137, y:66), + ChartSampleData(x:157, y:66), + ChartSampleData(x:176, y:66), + ChartSampleData(x:149, y:67), + ChartSampleData(x:159, y:67), + ChartSampleData(x:179, y:67), + ChartSampleData(x:156, y:67), + ChartSampleData(x:179, y:67), + ChartSampleData(x:186, y:67), + ChartSampleData(x:147, y:67), + ChartSampleData(x:166, y:67), + ChartSampleData(x:185, y:67), + ChartSampleData(x:140, y:67), + ChartSampleData(x:160, y:67), + ChartSampleData(x:180, y:67), + ChartSampleData(x:145, y:68), + ChartSampleData(x:155, y:68), + ChartSampleData(x:170, y:68), + ChartSampleData(x:129, y:68), + ChartSampleData(x:164, y:68), + ChartSampleData(x:189, y:68), + ChartSampleData(x:150, y:68), + ChartSampleData(x:157, y:68), + ChartSampleData(x:183, y:68), + ChartSampleData(x:144, y:68), + ChartSampleData(x:170, y:68), + ChartSampleData(x:180, y:68) +]; + +class SelectionZoomingFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + SelectionZoomingFrontPanel(this.subItemList); + final SubItem subItemList; + + @override + _SelectionZoomingFrontPanelState createState() => _SelectionZoomingFrontPanelState(subItemList); +} + +class _SelectionZoomingFrontPanelState extends State { + _SelectionZoomingFrontPanelState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + zoomingPanBehavior = + ZoomPanBehavior(enablePanning: true, enableSelectionZooming: true); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getDefaultZoomingChart(false)), + ), + floatingActionButton: FloatingActionButton( + onPressed: () => setState(() { + zoomingPanBehavior.reset(); + }), + child: Icon(Icons.refresh, color: Colors.white), + backgroundColor: model.backgroundColor, + )); + }); + } +} \ No newline at end of file diff --git a/lib/samples/chart/user_interactions/zooming_panning/zooming_with_custom_button/zooming_with_custom_buttons.dart b/lib/samples/chart/user_interactions/zooming_panning/zooming_with_custom_button/zooming_with_custom_buttons.dart new file mode 100644 index 00000000..20b6f579 --- /dev/null +++ b/lib/samples/chart/user_interactions/zooming_panning/zooming_with_custom_button/zooming_with_custom_buttons.dart @@ -0,0 +1,238 @@ +import 'package:flutter_examples/model/helper.dart'; +import 'package:flutter_examples/model/model.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:syncfusion_flutter_charts/charts.dart'; +import 'package:flutter/material.dart'; + +//ignore:must_be_immutable +class ButtonZooming extends StatefulWidget { + ButtonZooming({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _ButtonZoomingState createState() => _ButtonZoomingState(sample); +} + +ZoomPanBehavior zoomPan; +final List zoomData = [ + ChartSampleData(x: 1.5, y: 21), + ChartSampleData(x: 2.2, y: 24), + ChartSampleData(x: 3.32, y: 36), + ChartSampleData(x: 4.56, y: 38), + ChartSampleData(x: 5.87, y: 54), + ChartSampleData(x: 6.8, y: 57), + ChartSampleData(x: 8.5, y: 70), + ChartSampleData(x: 9.5, y: 21), + ChartSampleData(x: 10.2, y: 24), + ChartSampleData(x: 11.32, y: 36), + ChartSampleData(x: 14.56, y: 38), + ChartSampleData(x: 15.87, y: 54), + ChartSampleData(x: 16.8, y: 57), + ChartSampleData(x: 18.5, y: 23), + ChartSampleData(x: 21.5, y: 21), + ChartSampleData(x: 22.2, y: 24), + ChartSampleData(x: 23.32, y: 36), + ChartSampleData(x: 24.56, y: 32), + ChartSampleData(x: 25.87, y: 54), + ChartSampleData(x: 26.8, y: 12), + ChartSampleData(x: 28.5, y: 54), + ChartSampleData(x: 30.2, y: 24), + ChartSampleData(x: 31.32, y: 36), + ChartSampleData(x: 34.56, y: 38), + ChartSampleData(x: 35.87, y: 14), + ChartSampleData(x: 36.8, y: 57), + ChartSampleData(x: 38.5, y: 70), + ChartSampleData(x: 41.5, y: 21), + ChartSampleData(x: 41.2, y: 24), + ChartSampleData(x: 43.32, y: 36), + ChartSampleData(x: 44.56, y: 21), + ChartSampleData(x: 45.87, y: 54), + ChartSampleData(x: 46.8, y: 57), + ChartSampleData(x: 48.5, y: 54), + ChartSampleData(x: 49.56, y: 38), + ChartSampleData(x: 49.87, y: 14), + ChartSampleData(x: 51.8, y: 57), + ChartSampleData(x: 54.5, y: 32), + ChartSampleData(x: 55.5, y: 21), + ChartSampleData(x: 57.2, y: 24), + ChartSampleData(x: 59.32, y: 36), + ChartSampleData(x: 60.56, y: 21), + ChartSampleData(x: 62.87, y: 54), + ChartSampleData(x: 63.8, y: 23), + ChartSampleData(x: 65.5, y: 54) +]; + +class _ButtonZoomingState extends State { + _ButtonZoomingState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + zoomPan = ZoomPanBehavior( + enableDoubleTapZooming: true, + enablePanning: true, + enablePinching: true, + enableSelectionZooming: true, + ); + return getScopedModel(null, sample, ZoomingWithButtonFrontPanel(sample)); + } +} + +SfCartesianChart getButtonZoomingChart(bool isTileView) { + return SfCartesianChart( + plotAreaBorderWidth: 0, + primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)), + primaryYAxis: NumericAxis( + axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), + series: getButtonZoomingSeries(isTileView), + zoomPanBehavior: zoomPan, + ); +} + +List> getButtonZoomingSeries(bool isTileView) { + return >[ + LineSeries( + dataSource: zoomData, + xValueMapper: (ChartSampleData sales, _) => sales.x, + yValueMapper: (ChartSampleData sales, _) => sales.y, + width: 2) + ]; +} + +class ZoomingWithButtonFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + ZoomingWithButtonFrontPanel(this.subItemList); + final SubItem subItemList; + + @override + _ZoomingWithButtonFrontPanelState createState() => + _ZoomingWithButtonFrontPanelState(subItemList); +} + +class _ZoomingWithButtonFrontPanelState + extends State { + _ZoomingWithButtonFrontPanelState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getButtonZoomingChart(false)), + ), + floatingActionButton: Container( + child: Stack(children: [ + Align( + alignment: Alignment.bottomCenter, + child: Container( + height: 50, + child: InkWell( + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Padding( + padding: const EdgeInsets.fromLTRB(24, 15, 0, 0), + child: Tooltip( + message: 'Zoom In', + child: IconButton( + icon: Icon(Icons.add, + color: model.backgroundColor), + onPressed: () { + zoomPan.zoomIn(); + }, + ), + ), + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), + child: Tooltip( + message: 'Zoom Out', + child: IconButton( + icon: Icon(Icons.remove, + color: model.backgroundColor), + onPressed: () { + zoomPan.zoomOut(); + }, + ), + ), + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), + child: Tooltip( + message: 'Pan Up', + child: IconButton( + icon: Icon(Icons.keyboard_arrow_up, + color: model.backgroundColor), + onPressed: () { + zoomPan.panToDirection('top'); + }, + ), + ), + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), + child: Tooltip( + message: 'Pan Down', + child: IconButton( + icon: Icon(Icons.keyboard_arrow_down, + color: model.backgroundColor), + onPressed: () { + zoomPan.panToDirection('bottom'); + }, + ), + ), + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), + child: Tooltip( + message: 'Pan Left', + child: IconButton( + icon: Icon(Icons.keyboard_arrow_left, + color: model.backgroundColor), + onPressed: () { + zoomPan.panToDirection('left'); + }, + ), + ), + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), + child: Tooltip( + message: 'Pan Right', + child: IconButton( + icon: Icon(Icons.keyboard_arrow_right, + color: model.backgroundColor), + onPressed: () { + zoomPan.panToDirection('right'); + }, + ), + ), + ), + Padding( + padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), + child: Tooltip( + message: 'Reset', + child: IconButton( + icon: Icon(Icons.refresh, + color: model.backgroundColor), + onPressed: () { + zoomPan.reset(); + }, + ), + ), + ) + ], + ), + ), + ), + ) + ]), + )); + }); + } +} diff --git a/lib/samples/chart/user_interactions/zooming_panning/zooming_with_custom_buttons.dart b/lib/samples/chart/user_interactions/zooming_panning/zooming_with_custom_buttons.dart deleted file mode 100755 index 44dff365..00000000 --- a/lib/samples/chart/user_interactions/zooming_panning/zooming_with_custom_buttons.dart +++ /dev/null @@ -1,399 +0,0 @@ -import 'package:syncfusion_flutter_charts/charts.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -class ButtonZooming extends StatefulWidget { - const ButtonZooming(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _ButtonZoomingState createState() => _ButtonZoomingState(sample); -} - -ZoomPanBehavior zoomPan; -final List<_ChartData> chartData = <_ChartData>[ - _ChartData(1.5, 21), - _ChartData(2.2, 24), - _ChartData(3.32, 36), - _ChartData(4.56, 38), - _ChartData(5.87, 54), - _ChartData(6.8, 57), - _ChartData(8.5, 70), - _ChartData(9.5, 21), - _ChartData(10.2, 24), - _ChartData(11.32, 36), - _ChartData(14.56, 38), - _ChartData(15.87, 54), - _ChartData(16.8, 57), - _ChartData(18.5, 23), - _ChartData(21.5, 21), - _ChartData(22.2, 24), - _ChartData(23.32, 36), - _ChartData(24.56, 32), - _ChartData(25.87, 54), - _ChartData(26.8, 12), - _ChartData(28.5, 54), - _ChartData(30.2, 24), - _ChartData(31.32, 36), - _ChartData(34.56, 38), - _ChartData(35.87, 14), - _ChartData(36.8, 57), - _ChartData(38.5, 70), - _ChartData(41.5, 21), - _ChartData(41.2, 24), - _ChartData(43.32, 36), - _ChartData(44.56, 21), - _ChartData(45.87, 54), - _ChartData(46.8, 57), - _ChartData(48.5, 54), - _ChartData(49.56, 38), - _ChartData(49.87, 14), - _ChartData(51.8, 57), - _ChartData(54.5, 32), - _ChartData(55.5, 21), - _ChartData(57.2, 24), - _ChartData(59.32, 36), - _ChartData(60.56, 21), - _ChartData(62.87, 54), - _ChartData(63.8, 23), - _ChartData(65.5, 54) -]; - -class _ButtonZoomingState extends State { - _ButtonZoomingState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ButtonZooming oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - zoomPan = ZoomPanBehavior( - enableDoubleTapZooming: true, - enablePanning: true, - enablePinching: true, - enableSelectionZooming: true, - ); - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - frontHeaderHeight: 50, - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - 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( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/chart/user_interactions/zooming_panning/zooming_with_custom_buttons.dart'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 10, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Icon( - Icons.info_outline, - color: Colors.white, - ), - onPressed: () { - if (frontPanelVisible.value) - frontPanelVisible.value = false; - else - frontPanelVisible.value = true; - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getButtonZoomingChart(false)), - ), - floatingActionButton: Container( - child: Stack(children: [ - Align( - alignment: Alignment.bottomCenter, - child: Container( - height: 50, - child: InkWell( - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - Padding( - padding: const EdgeInsets.fromLTRB(24, 15, 0, 0), - child: Tooltip( - message: 'Zoom In', - child: IconButton( - icon: Icon(Icons.add, - color: model.backgroundColor), - onPressed: () { - zoomPan.zoomIn(); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), - child: Tooltip( - message: 'Zoom Out', - child: IconButton( - icon: Icon(Icons.remove, - color: model.backgroundColor), - onPressed: () { - zoomPan.zoomOut(); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), - child: Tooltip( - message: 'Pan Up', - child: IconButton( - icon: Icon(Icons.keyboard_arrow_up, - color: model.backgroundColor), - onPressed: () { - zoomPan.panToDirection('top'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), - child: Tooltip( - message: 'Pan Down', - child: IconButton( - icon: Icon(Icons.keyboard_arrow_down, - color: model.backgroundColor), - onPressed: () { - zoomPan.panToDirection('bottom'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), - child: Tooltip( - message: 'Pan Left', - child: IconButton( - icon: Icon(Icons.keyboard_arrow_left, - color: model.backgroundColor), - onPressed: () { - zoomPan.panToDirection('left'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), - child: Tooltip( - message: 'Pan Right', - child: IconButton( - icon: Icon(Icons.keyboard_arrow_right, - color: model.backgroundColor), - onPressed: () { - zoomPan.panToDirection('right'); - }, - ), - ), - ), - Padding( - padding: const EdgeInsets.fromLTRB(0, 15, 0, 0), - child: Tooltip( - message: 'Reset', - child: IconButton( - icon: Icon(Icons.refresh, - color: model.backgroundColor), - onPressed: () { - zoomPan.reset(); - }, - ), - ), - ) - ], - ), - ), - ), - ) - ]), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfCartesianChart getButtonZoomingChart(bool isTileView) { - return SfCartesianChart( - plotAreaBorderWidth: 0, - primaryXAxis: NumericAxis(majorGridLines: MajorGridLines(width: 0)), - primaryYAxis: NumericAxis( - axisLine: AxisLine(width: 0), majorTickLines: MajorTickLines(size: 0)), - series: getLineSeries(isTileView), - zoomPanBehavior: zoomPan, - ); -} - -List> getLineSeries(bool isTileView) { - return >[ - LineSeries<_ChartData, num>( - dataSource: chartData, - xValueMapper: (_ChartData sales, _) => sales.numeric, - yValueMapper: (_ChartData sales, _) => sales.sales1, - width: 2) - ]; -} - -class _ChartData { - _ChartData(this.numeric, this.sales1); - final double numeric; - final int sales1; -} diff --git a/lib/samples/gauge/animation/radial_bounce.dart b/lib/samples/gauge/animation/radial_bounce.dart new file mode 100644 index 00000000..c6d3aab0 --- /dev/null +++ b/lib/samples/gauge/animation/radial_bounce.dart @@ -0,0 +1,74 @@ +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +//ignore: must_be_immutable +class RadialBounceOutExample extends StatefulWidget { + RadialBounceOutExample({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _RadialBounceOutExampleState createState() => + _RadialBounceOutExampleState(sample); +} + +class _RadialBounceOutExampleState extends State { + _RadialBounceOutExampleState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getRadialBounceOutExample(false), sample); + } +} + +SfRadialGauge getRadialBounceOutExample(bool isTileView) { + return SfRadialGauge( + axes: [ + RadialAxis( + radiusFactor: 0.98, + startAngle: 90, + endAngle: 330, + minimum: -8, + maximum: 12, + showAxisLine: false, + majorTickStyle: MajorTickStyle( + length: 0.15, lengthUnit: GaugeSizeUnit.factor, thickness: 2), + labelOffset: 8, + axisLabelStyle: GaugeTextStyle( + fontFamily: 'Times', + fontSize: isTileView ? 10 : 12, + fontWeight: FontWeight.w800, + fontStyle: FontStyle.italic), + minorTicksPerInterval: 9, + interval: 2, + pointers: [ + NeedlePointer( + value: 0, + needleStartWidth: 2, + needleEndWidth: 2, + needleColor: const Color(0xFFF67280), + needleLength: 0.8, + lengthUnit: GaugeSizeUnit.factor, + enableAnimation: true, + animationType: AnimationType.bounceOut, + animationDuration: 1500, + knobStyle: KnobStyle( + knobRadius: 8, + sizeUnit: GaugeSizeUnit.logicalPixel, + color: const Color(0xFFF67280))) + ], + minorTickStyle: MinorTickStyle( + length: 0.08, + thickness: 1, + lengthUnit: GaugeSizeUnit.factor, + color: const Color(0xFFC4C4C4)), + axisLineStyle: AxisLineStyle( + color: const Color(0xFFDADADA), + thicknessUnit: GaugeSizeUnit.factor, + thickness: 0.1)), + ], + ); +} diff --git a/lib/samples/gauge/animation/radial_bounceout.dart b/lib/samples/gauge/animation/radial_bounceout.dart deleted file mode 100644 index 8c5d7768..00000000 --- a/lib/samples/gauge/animation/radial_bounceout.dart +++ /dev/null @@ -1,225 +0,0 @@ -import 'package:syncfusion_flutter_gauges/gauges.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -class RadialBounceOutExample extends StatefulWidget { - const RadialBounceOutExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _RadialBounceOutExampleState createState() => _RadialBounceOutExampleState(sample); -} - -class _RadialBounceOutExampleState extends State { - _RadialBounceOutExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialBounceOutExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_bounceout.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialBounceOutExample(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getRadialBounceOutExample(bool isTileView) { - return SfRadialGauge( - axes: [ - RadialAxis(radiusFactor: 0.98, startAngle: 90, - endAngle: 330, minimum: -8, maximum: 12, showAxisLine: false, - majorTickStyle: MajorTickStyle(length: 0.15, - lengthUnit: GaugeSizeUnit.factor, - thickness: 2), labelOffset: 8, - axisLabelStyle: GaugeTextStyle( - fontFamily: 'Times', fontSize: isTileView ? 10 : 12, - fontWeight: FontWeight.w800, - fontStyle: FontStyle.italic), - minorTicksPerInterval: 9, interval: 2, - pointers: [NeedlePointer(value: 0, needleStartWidth: 2, needleEndWidth: 2, - needleColor: const Color(0xFFF67280), needleLength: 0.8, lengthUnit: GaugeSizeUnit.factor, - enableAnimation: true, animationType: AnimationType.bounceOut, - animationDuration: 1500, - knobStyle: KnobStyle(knobRadius:8, sizeUnit: GaugeSizeUnit.logicalPixel, - color: const Color(0xFFF67280)) - )], - minorTickStyle: MinorTickStyle(length: 0.08, thickness: 1, - lengthUnit: GaugeSizeUnit.factor, - color: const Color(0xFFC4C4C4)), - axisLineStyle:AxisLineStyle(color: const Color(0xFFDADADA), - thicknessUnit: GaugeSizeUnit.factor, - thickness: 0.1)), - - ], - ); -} - - - - - diff --git a/lib/samples/gauge/animation/radial_easeanimation.dart b/lib/samples/gauge/animation/radial_easeanimation.dart index 4f1f35fb..f1a52c9d 100644 --- a/lib/samples/gauge/animation/radial_easeanimation.dart +++ b/lib/samples/gauge/animation/radial_easeanimation.dart @@ -1,250 +1,97 @@ -import 'dart:async'; import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +//ignore: must_be_immutable class RadialEaseExample extends StatefulWidget { - const RadialEaseExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + RadialEaseExample({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _RadialEaseExampleState createState() => _RadialEaseExampleState(sample); } class _RadialEaseExampleState extends State { _RadialEaseExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialEaseExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_easeanimation.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - Timer timer; - - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - Widget build(BuildContext context) { - setState((){ - _interval = MediaQuery.of(context).orientation == Orientation.portrait ? 1 : 2; - }); - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialEaseExample(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialEaseExample(false), sample); } } SfRadialGauge getRadialEaseExample(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis(startAngle: 0, endAngle: 360, showLabels: false, showTicks: false, - radiusFactor: 0.9, axisLineStyle: AxisLineStyle( + RadialAxis( + startAngle: 0, + endAngle: 360, + showLabels: false, + showTicks: false, + radiusFactor: 0.9, + axisLineStyle: AxisLineStyle( thicknessUnit: GaugeSizeUnit.factor, - thickness: isTileView ? 0.07 : 0.1) - ), - RadialAxis(startAngle: 170, endAngle: 170, showTicks: false, labelFormat: '{value}M', - showAxisLine: false, radiusFactor: 0.9, minimum: 0, maximum: 15, showLastLabel: false, - axisLabelStyle: GaugeTextStyle(fontSize: isTileView ? 10 : 12, fontWeight: FontWeight.w500), - labelOffset: 25, interval: isTileView ? 1: _interval, - needsRotateLabels: true, - annotations: [ - GaugeAnnotation( positionFactor: 1, axisValue: 0, - widget: Container(height: isTileView ? 30 : 45, width:isTileView ? 30 : 45, - decoration: const BoxDecoration( - image: DecorationImage( - image: ExactAssetImage('images/shotput.png'), - fit: BoxFit.fitHeight, - ), - ))), - - GaugeAnnotation(widget: Container(child: const Text('Distance', - style: TextStyle( fontSize: 20)),)) - ], - pointers: [ - RangePointer(value: 11.5, width: 0.1, color: const Color(0xFFF67280), - enableAnimation: true, sizeUnit: GaugeSizeUnit.factor, - animationType: AnimationType.ease,), - MarkerPointer(value: 11.5, markerType: MarkerType.image, - enableAnimation: true, animationType: AnimationType.ease, - imageUrl: 'images/ball.png' , markerHeight: isTileView ? 30 : 40, - markerOffset: 4, markerWidth: isTileView ? 30 : 40), - ] - ) - + thickness: isTileView ? 0.07 : 0.1)), + RadialAxis( + startAngle: 170, + endAngle: 170, + showTicks: false, + labelFormat: '{value}M', + showAxisLine: false, + radiusFactor: 0.9, + minimum: 0, + maximum: 15, + showLastLabel: false, + axisLabelStyle: GaugeTextStyle( + fontSize: isTileView ? 10 : 12, fontWeight: FontWeight.w500), + labelOffset: 25, + interval: isTileView ? 1 : _interval, + needsRotateLabels: true, + annotations: [ + GaugeAnnotation( + positionFactor: 1, + axisValue: 0, + widget: Container( + height: isTileView ? 30 : 45, + width: isTileView ? 30 : 45, + decoration: const BoxDecoration( + image: DecorationImage( + image: ExactAssetImage('images/shotput.png'), + fit: BoxFit.fitHeight, + ), + ))), + GaugeAnnotation( + widget: Container( + child: const Text('Distance', style: TextStyle(fontSize: 20)), + )) + ], + pointers: [ + RangePointer( + value: 11.5, + width: 0.1, + color: const Color(0xFFF67280), + enableAnimation: true, + sizeUnit: GaugeSizeUnit.factor, + animationType: AnimationType.ease, + gradient: const SweepGradient( + colors: [Color(0xFFFFB397), Color(0xFFF46AA0)], + stops: [0.25, 0.75]), + ), + MarkerPointer( + value: 11.5, + markerType: MarkerType.image, + enableAnimation: true, + animationType: AnimationType.ease, + imageUrl: 'images/ball.png', + markerHeight: isTileView ? 30 : 40, + markerOffset: 4, + markerWidth: isTileView ? 30 : 40), + ]) ], ); } double _interval = 1; - diff --git a/lib/samples/gauge/animation/radial_easeincirc.dart b/lib/samples/gauge/animation/radial_easeincirc.dart deleted file mode 100644 index c0183dde..00000000 --- a/lib/samples/gauge/animation/radial_easeincirc.dart +++ /dev/null @@ -1,231 +0,0 @@ -// import 'dart:async'; -import 'package:syncfusion_flutter_gauges/gauges.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -class RadialEaseInCircExample extends StatefulWidget { - const RadialEaseInCircExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _RadialEaseInCircExampleState createState() => _RadialEaseInCircExampleState(sample); -} - -class _RadialEaseInCircExampleState extends State { - _RadialEaseInCircExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialEaseInCircExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_easeincirc.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - - @override - void initState() { - super.initState(); - } - - @override - void dispose() { - super.dispose(); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialEaseInCircExample(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getRadialEaseInCircExample(bool isTileView) { - return SfRadialGauge( - axes: [ - RadialAxis(showAxisLine: false, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - interval: 10, - axisLabelStyle:GaugeTextStyle( fontSize: 12), - majorTickStyle: MajorTickStyle(length: 0.15, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1,), - minorTicksPerInterval: 4, - minorTickStyle: MinorTickStyle(length: 0.04, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1, ), - pointers: [RangePointer(width: 15, pointerOffset: 10, - value: 45, animationDuration: 1000, - animationType: AnimationType.easeInCirc, enableAnimation: true, - color: const Color(0xFFF8B195))] - ) - ], - ); -} - - - - - diff --git a/lib/samples/gauge/animation/radial_easeincric.dart b/lib/samples/gauge/animation/radial_easeincric.dart new file mode 100644 index 00000000..2c92e250 --- /dev/null +++ b/lib/samples/gauge/animation/radial_easeincric.dart @@ -0,0 +1,62 @@ +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +//ignore: must_be_immutable +class RadialEaseInCircExample extends StatefulWidget { + RadialEaseInCircExample({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _RadialEaseInCircExampleState createState() => + _RadialEaseInCircExampleState(sample); +} + +class _RadialEaseInCircExampleState extends State { + _RadialEaseInCircExampleState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getRadialEaseInCircExample(false), sample); + } +} + +SfRadialGauge getRadialEaseInCircExample(bool isTileView) { + return SfRadialGauge( + axes: [ + RadialAxis( + showAxisLine: false, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + interval: 10, + axisLabelStyle: GaugeTextStyle(fontSize: 12), + majorTickStyle: MajorTickStyle( + length: 0.15, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1, + ), + minorTicksPerInterval: 4, + minorTickStyle: MinorTickStyle( + length: 0.04, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1, + ), + pointers: [ + RangePointer( + width: 15, + pointerOffset: 10, + value: 45, + animationDuration: 1000, + gradient: const SweepGradient( + colors: [Color(0xFF3B3FF3), Color(0xFF46D0ED)], + stops: [0.25, 0.75]), + animationType: AnimationType.easeInCirc, + enableAnimation: true, + color: const Color(0xFFF8B195)) + ]) + ], + ); +} diff --git a/lib/samples/gauge/animation/radial_easeout.dart b/lib/samples/gauge/animation/radial_easeout.dart index 04e9d9f5..7d5bbe3f 100644 --- a/lib/samples/gauge/animation/radial_easeout.dart +++ b/lib/samples/gauge/animation/radial_easeout.dart @@ -1,233 +1,66 @@ -import 'dart:async'; import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +//ignore: must_be_immutable class RadialEaseOutAnimation extends StatefulWidget { - const RadialEaseOutAnimation(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialEaseOutAnimation({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _RadialEaseOutAnimationState createState() => _RadialEaseOutAnimationState(sample); + _RadialEaseOutAnimationState createState() => + _RadialEaseOutAnimationState(sample); } class _RadialEaseOutAnimationState extends State { _RadialEaseOutAnimationState(this.sample); - final SubItemList sample; - bool panelOpen; - - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialEaseOutAnimation oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_easeout.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - Timer timer; - - @override - void initState() { - super.initState(); - } - - - @override - void dispose() { - super.dispose(); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialEaseOutAnimation(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialEaseOutAnimation(false), sample); } } SfRadialGauge getRadialEaseOutAnimation(bool isTileView) { + return SfRadialGauge( axes: [ - RadialAxis(startAngle: 180, endAngle: 360, showTicks: false, - showLabels: false, centerY: 0.6, radiusFactor: 0.8, - minimum: 0, maximum: 50, - axisLineStyle: AxisLineStyle( - thickness: 40), - pointers: [ - RangePointer(enableAnimation: true, animationType: AnimationType.easeOutBack, - width: 40, color: const Color(0xFF00A8B5), value: 40), - - NeedlePointer(knobStyle: KnobStyle(knobRadius: 5, sizeUnit: GaugeSizeUnit.logicalPixel, - color: _easeOutNeedleColor), - needleColor: _easeOutNeedleColor, needleEndWidth: 2, needleStartWidth: 2, - lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.98, - value: 40, enableAnimation: true, animationType: AnimationType.easeOutBack) - ] - ) + RadialAxis( + startAngle: 180, + endAngle: 360, + showTicks: false, + showLabels: false, + centerY: 0.6, + radiusFactor: 0.8, + minimum: 0, + maximum: 50, + axisLineStyle: AxisLineStyle(thickness: 40), + pointers: [ + RangePointer( + enableAnimation: true, + animationType: AnimationType.easeOutBack, + width: 40, + color: const Color(0xFF00A8B5), + value: 40, + gradient: const SweepGradient( + colors: [Color(0xFFD046CA), Color(0xFF6094EA)], + stops: [0.25, 0.75]), + ), + NeedlePointer( + knobStyle: KnobStyle( + knobRadius: 5, + sizeUnit: GaugeSizeUnit.logicalPixel), + needleEndWidth: 2, + needleStartWidth: 2, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.98, + value: 40, + enableAnimation: true, + animationType: AnimationType.easeOutBack) + ]) ], ); } - -Color _easeOutNeedleColor = const Color(0xFF555555); - - - diff --git a/lib/samples/gauge/animation/radial_elasticout.dart b/lib/samples/gauge/animation/radial_elasticout.dart index 94b3e953..e7c079be 100644 --- a/lib/samples/gauge/animation/radial_elasticout.dart +++ b/lib/samples/gauge/animation/radial_elasticout.dart @@ -1,239 +1,70 @@ -import 'dart:async'; import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +//ignore: must_be_immutable class RadialElasticOutAnimation extends StatefulWidget { - const RadialElasticOutAnimation(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialElasticOutAnimation({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _RadialElasticOutAnimationState createState() => _RadialElasticOutAnimationState(sample); + _RadialElasticOutAnimationState createState() => + _RadialElasticOutAnimationState(sample); } class _RadialElasticOutAnimationState extends State { _RadialElasticOutAnimationState(this.sample); - final SubItemList sample; - bool panelOpen; - - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialElasticOutAnimation oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_elasticout.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - Timer timer; - - @override - void initState() { - super.initState(); - } - - - @override - void dispose() { - super.dispose(); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialElasticOutAnimation(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialElasticOutAnimation(false), sample); } } SfRadialGauge getRadialElasticOutAnimation(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis(startAngle: 180, endAngle: 360, showAxisLine: true, centerY: 0.65, - interval: 10, showLabels: false, radiusFactor: 0.9, - majorTickStyle: MajorTickStyle(length: 0.1, - lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), - minorTicksPerInterval: 4, - pointers: [RangePointer(value: 70, width: 5, - animationDuration: 2000, - enableAnimation: true, animationType: AnimationType.elasticOut, - color: const Color(0xFF00A8B5)), - NeedlePointer(value: 70, needleStartWidth: 0, - needleColor: const Color(0xFF00A8B5), - lengthUnit: GaugeSizeUnit.factor, - needleLength: 1, - enableAnimation: true, - animationDuration: 2000, animationType: AnimationType.elasticOut, - needleEndWidth: 5,knobStyle: KnobStyle(knobRadius: 0, - sizeUnit: GaugeSizeUnit.factor - )) - ], - minorTickStyle: MinorTickStyle(length: 0.04, - lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), - axisLineStyle: AxisLineStyle(color: Colors.transparent) - ) + RadialAxis( + startAngle: 180, + endAngle: 360, + showAxisLine: true, + centerY: 0.65, + interval: 10, + showLabels: false, + radiusFactor: 0.9, + majorTickStyle: MajorTickStyle( + length: 0.1, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), + minorTicksPerInterval: 4, + pointers: [ + RangePointer( + gradient: const SweepGradient( + colors: [Color(0xFFD481FF), Color(0xFF06F0E0)], + stops: [0.25, 0.75]), + value: 70, + width: 5, + animationDuration: 2000, + enableAnimation: true, + animationType: AnimationType.elasticOut, + color: const Color(0xFF00A8B5)), + NeedlePointer( + value: 70, + needleStartWidth: 0, + needleColor: const Color(0xFFD481FF), + lengthUnit: GaugeSizeUnit.factor, + needleLength: 1, + enableAnimation: true, + animationDuration: 2000, + animationType: AnimationType.elasticOut, + needleEndWidth: 5, + knobStyle: + KnobStyle(knobRadius: 0, sizeUnit: GaugeSizeUnit.factor)) + ], + minorTickStyle: MinorTickStyle( + length: 0.04, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), + axisLineStyle: AxisLineStyle(color: Colors.transparent)) ], ); } - - - - - diff --git a/lib/samples/gauge/animation/radial_linearanimation.dart b/lib/samples/gauge/animation/radial_linearanimation.dart index e7309f0c..66218d5b 100644 --- a/lib/samples/gauge/animation/radial_linearanimation.dart +++ b/lib/samples/gauge/animation/radial_linearanimation.dart @@ -1,247 +1,75 @@ -import 'dart:async'; import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +//ignore: must_be_immutable class RadialLinearAnimation extends StatefulWidget { - const RadialLinearAnimation(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialLinearAnimation({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _RadialLinearAnimationState createState() => _RadialLinearAnimationState(sample); + _RadialLinearAnimationState createState() => + _RadialLinearAnimationState(sample); } class _RadialLinearAnimationState extends State { _RadialLinearAnimationState(this.sample); - final SubItemList sample; - bool panelOpen; - - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialLinearAnimation oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_linearanimation.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(getRadialLinearAnimation(false), sample); } } -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - Timer timer; - - @override - void initState() { - super.initState(); - } - - - @override - void dispose() { - super.dispose(); - } - - @override - Widget build(BuildContext context) { - setState((){ - _radius = MediaQuery.of(context).orientation == Orientation.portrait ? 0.05 : 0.07; - }); - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialLinearAnimation(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getRadialLinearAnimation(bool isTileView) { - final SfRadialGauge _gauge = SfRadialGauge( - axes: [ - RadialAxis(startAngle: 270, endAngle: 270, showLabels: false, - radiusFactor: 0.8, - pointers: [MarkerPointer(markerHeight: 20, markerWidth: 20, - markerType: MarkerType.triangle, markerOffset: 17, value: 80, - enableAnimation: true, animationType: AnimationType.linear, - color: _linearMarkerColor), - NeedlePointer(knobStyle: KnobStyle(knobRadius: isTileView? 0.065: _radius, - color: _linearNeedleColor - - ), - needleStartWidth: 0, needleEndWidth: 5, value: 12, - enableAnimation: true,animationType: AnimationType.linear, - lengthUnit:GaugeSizeUnit.factor, - needleLength: 0.8, needleColor: _linearNeedleColor ) +Widget getRadialLinearAnimation(bool isTileView) { + return LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return SfRadialGauge( + axes: [ + RadialAxis( + startAngle: 270, + endAngle: 270, + showLabels: false, + radiusFactor: 0.8, + pointers: [ + MarkerPointer( + markerHeight: 20, + markerWidth: 20, + markerType: MarkerType.triangle, + markerOffset: 17, + value: 80, + enableAnimation: true, + animationType: AnimationType.linear, + color: _linearMarkerColor), + NeedlePointer( + knobStyle: KnobStyle( + knobRadius: isTileView ? 0.065 : + MediaQuery.of(context).orientation == + Orientation.portrait ? 0.05 : 0.07, + color: _linearNeedleColor), + needleStartWidth: 0, + needleEndWidth: 5, + value: 12, + enableAnimation: true, + animationType: AnimationType.linear, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.8, + needleColor: _linearNeedleColor) + ], + axisLineStyle: AxisLineStyle(thickness: 3), + tickOffset: 2, + majorTickStyle: MajorTickStyle( + thickness: 2, length: 0.02, lengthUnit: GaugeSizeUnit.factor), + minorTicksPerInterval: 0), ], - axisLineStyle: AxisLineStyle( - thickness: 3), tickOffset: 2, - majorTickStyle: MajorTickStyle(thickness: 2, - length: 0.02, lengthUnit:GaugeSizeUnit.factor), - minorTicksPerInterval: 0 + ); + }); - ), - ], - ); - return _gauge; } -double _radius = 0.05; Color _linearNeedleColor = const Color(0xFF355C7D); Color _linearMarkerColor = const Color(0xFFF67280); - - - - - diff --git a/lib/samples/gauge/animation/radial_slowmiddle.dart b/lib/samples/gauge/animation/radial_slowmiddle.dart index 2fe6f020..86490745 100644 --- a/lib/samples/gauge/animation/radial_slowmiddle.dart +++ b/lib/samples/gauge/animation/radial_slowmiddle.dart @@ -1,250 +1,90 @@ -import 'dart:async'; import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +//ignore: must_be_immutable class RadialSlowMiddleAnimation extends StatefulWidget { - const RadialSlowMiddleAnimation(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialSlowMiddleAnimation({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _RadialSlowMiddleAnimationState createState() => _RadialSlowMiddleAnimationState(sample); + _RadialSlowMiddleAnimationState createState() => + _RadialSlowMiddleAnimationState(sample); } class _RadialSlowMiddleAnimationState extends State { _RadialSlowMiddleAnimationState(this.sample); - final SubItemList sample; - bool panelOpen; - - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialSlowMiddleAnimation oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/animation/radial_slowmiddle.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - Timer timer; - - @override - void initState() { - super.initState(); - } - - - @override - void dispose() { - super.dispose(); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialSlowMiddleAnimation(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialSlowMiddleAnimation(false), sample); } } SfRadialGauge getRadialSlowMiddleAnimation(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis(startAngle: 270, endAngle: 270, showAxisLine: false, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, minimum: 0, maximum: 12, - interval: 1, needsRotateLabels: true, - majorTickStyle: MajorTickStyle(length: 0.15, - lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), - minorTicksPerInterval: 4, showFirstLabel: false, + RadialAxis( + startAngle: 270, + endAngle: 270, + showAxisLine: false, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + minimum: 0, + maximum: 12, + interval: 1, + needsRotateLabels: true, + majorTickStyle: MajorTickStyle( + length: 0.15, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), + minorTicksPerInterval: 4, + showFirstLabel: false, axisLabelStyle: GaugeTextStyle(fontSize: 12), - minorTickStyle: MinorTickStyle(length: 0.07, - lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), - pointers: [ - NeedlePointer(needleLength: 0.95, needleStartWidth: 0, - lengthUnit: GaugeSizeUnit.factor, - needleEndWidth: 5, needleColor: const Color(0xFFC06C84), - knobStyle: KnobStyle(knobRadius: 0), - value: 11, enableAnimation: true, animationType: AnimationType.slowMiddle - ), - NeedlePointer(needleLength: 0.7, needleStartWidth: 0, - lengthUnit: GaugeSizeUnit.factor, - needleEndWidth: 5, needleColor: const Color(0xFFF67280), - value: 2, enableAnimation: true, animationType: AnimationType.slowMiddle, - knobStyle: KnobStyle(color: const Color(0xFFF67280), - sizeUnit: GaugeSizeUnit.logicalPixel, - knobRadius: 10), - ), - NeedlePointer(needleLength: 0.8, needleStartWidth: 1, + minorTickStyle: MinorTickStyle( + length: 0.07, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), + pointers: [ + NeedlePointer( + needleLength: 0.95, + needleStartWidth: 0, + lengthUnit: GaugeSizeUnit.factor, + needleEndWidth: 5, + needleColor: const Color(0xFFC06C84), + knobStyle: KnobStyle(knobRadius: 0), + value: 11, + enableAnimation: true, + animationType: AnimationType.slowMiddle), + NeedlePointer( + needleLength: 0.7, + needleStartWidth: 0, lengthUnit: GaugeSizeUnit.factor, - needleEndWidth: 1, needleColor: _slowMiddleNeedleColor, - knobStyle: KnobStyle(knobRadius: 5, sizeUnit: GaugeSizeUnit.logicalPixel, - color: _slowMiddleNeedleColor), - value: 10.4, enableAnimation: true, animationType: AnimationType.slowMiddle - ), - ] - ) + needleEndWidth: 5, + needleColor: const Color(0xFFF67280), + value: 2, + enableAnimation: true, + animationType: AnimationType.slowMiddle, + knobStyle: KnobStyle( + color: const Color(0xFFF67280), + sizeUnit: GaugeSizeUnit.logicalPixel, + knobRadius: 10), + ), + NeedlePointer( + needleLength: 0.8, + needleStartWidth: 1, + lengthUnit: GaugeSizeUnit.factor, + needleEndWidth: 1, + needleColor: _slowMiddleNeedleColor, + knobStyle: KnobStyle( + knobRadius: 5, + sizeUnit: GaugeSizeUnit.logicalPixel, + color: _slowMiddleNeedleColor), + value: 10.4, + enableAnimation: true, + animationType: AnimationType.slowMiddle), + ]) ], ); } Color _slowMiddleNeedleColor = const Color(0xFF355C7D); - - - diff --git a/lib/samples/gauge/annotation/direct_compass.dart b/lib/samples/gauge/annotation/direct_compass.dart new file mode 100644 index 00000000..c6a394c1 --- /dev/null +++ b/lib/samples/gauge/annotation/direct_compass.dart @@ -0,0 +1,125 @@ +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +//ignore: must_be_immutable +class RadialCompass extends StatefulWidget { + RadialCompass({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _RadialCompassState createState() => _RadialCompassState(sample); +} + +class _RadialCompassState extends State { + _RadialCompassState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getRadialCompass(false), sample); + } +} + +SfRadialGauge getRadialCompass(bool isTileView) { + return SfRadialGauge( + axes: [ + RadialAxis( + showAxisLine: false, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + startAngle: 320, + endAngle: 320, + minorTicksPerInterval: 10, + minimum: 0, + maximum: 360, + showLastLabel: false, + interval: 30, + labelOffset: 20, + majorTickStyle: + MajorTickStyle(length: 0.16, lengthUnit: GaugeSizeUnit.factor), + minorTickStyle: MinorTickStyle( + length: 0.16, lengthUnit: GaugeSizeUnit.factor, thickness: 1), + axisLabelStyle: GaugeTextStyle(fontSize: 12), + pointers: [ + MarkerPointer(value: 90, markerType: MarkerType.triangle), + NeedlePointer( + value: 310, + needleLength: 0.5, + lengthUnit: GaugeSizeUnit.factor, + needleColor: const Color(0xFFC4C4C4), + needleStartWidth: 1, + needleEndWidth: 1, + knobStyle: KnobStyle(knobRadius: 0), + tailStyle: TailStyle( + color: const Color(0xFFC4C4C4), + width: 1, + lengthUnit: GaugeSizeUnit.factor, + length: 0.5)), + NeedlePointer( + value: 221, + needleLength: 0.5, + lengthUnit: GaugeSizeUnit.factor, + needleColor: const Color(0xFFC4C4C4), + needleStartWidth: 1, + needleEndWidth: 1, + knobStyle: + KnobStyle(knobRadius: 0, sizeUnit: GaugeSizeUnit.factor), + ), + NeedlePointer( + value: 40, + needleLength: 0.5, + lengthUnit: GaugeSizeUnit.factor, + needleColor: const Color(0xFFC4C4C4), + needleStartWidth: 1, + needleEndWidth: 1, + knobStyle: KnobStyle(knobRadius: 0), + ) + ], + annotations: [ + GaugeAnnotation( + angle: 230, + positionFactor: 0.38, + widget: Container( + child: Text('W', + style: TextStyle( + fontFamily: 'Times', + fontWeight: FontWeight.bold, + fontSize: isTileView ? 12 : 18)), + )), + GaugeAnnotation( + angle: 310, + positionFactor: 0.38, + widget: Container( + child: Text('N', + style: TextStyle( + fontFamily: 'Times', + fontWeight: FontWeight.bold, + fontSize: isTileView ? 12 : 18)), + )), + GaugeAnnotation( + angle: 129, + positionFactor: 0.38, + widget: Container( + child: Text('S', + style: TextStyle( + fontFamily: 'Times', + fontWeight: FontWeight.bold, + fontSize: isTileView ? 12 : 18)), + )), + GaugeAnnotation( + angle: 50, + positionFactor: 0.38, + widget: Container( + child: Text('E', + style: TextStyle( + fontFamily: 'Times', + fontWeight: FontWeight.bold, + fontSize: isTileView ? 12 : 18)), + )) + ]) + ], + ); +} diff --git a/lib/samples/gauge/annotation/direction_compass.dart b/lib/samples/gauge/annotation/direction_compass.dart deleted file mode 100644 index 995f366c..00000000 --- a/lib/samples/gauge/annotation/direction_compass.dart +++ /dev/null @@ -1,257 +0,0 @@ -import 'package:syncfusion_flutter_gauges/gauges.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -class RadialCompass extends StatefulWidget { - const RadialCompass(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _RadialCompassState createState() => _RadialCompassState(sample); -} - -class _RadialCompassState extends State { - _RadialCompassState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialCompass oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/direction_compass.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialCompass(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getRadialCompass(bool isTileView) { - return SfRadialGauge( - axes: [ - RadialAxis(showAxisLine: false, - ticksPosition: ElementsPosition.outside, - - labelsPosition: ElementsPosition.outside, - startAngle: 320, endAngle: 320, minorTicksPerInterval: 10, - minimum: 0, maximum: 360, showLastLabel: false, - interval: 30, labelOffset: 20, - majorTickStyle: MajorTickStyle(length: 0.16, - lengthUnit: GaugeSizeUnit.factor), - minorTickStyle: MinorTickStyle(length: 0.16, - lengthUnit: GaugeSizeUnit.factor, thickness: 1), - axisLabelStyle: GaugeTextStyle(fontSize: 12), - pointers: [MarkerPointer(value: 90, - markerType: MarkerType.triangle), - NeedlePointer(value: 310, needleLength: 0.5, - lengthUnit: GaugeSizeUnit.factor, - needleColor: const Color(0xFFC4C4C4), needleStartWidth: 1, - needleEndWidth: 1, knobStyle: KnobStyle(knobRadius: 0), - tailStyle: TailStyle(color: const Color(0xFFC4C4C4), width: 1, - lengthUnit: GaugeSizeUnit.factor, - length: 0.5)), - NeedlePointer(value: 221, needleLength: 0.5, - lengthUnit:GaugeSizeUnit.factor, - needleColor: const Color(0xFFC4C4C4), needleStartWidth: 1, - needleEndWidth: 1, knobStyle: KnobStyle(knobRadius: 0, - sizeUnit: GaugeSizeUnit.factor - ),), - NeedlePointer(value: 40, needleLength: 0.5, - lengthUnit: GaugeSizeUnit.factor, - needleColor: const Color(0xFFC4C4C4), needleStartWidth: 1, - needleEndWidth: 1, knobStyle: KnobStyle(knobRadius: 0),) - ], - annotations: [GaugeAnnotation(angle: 230, positionFactor: 0.38, - widget: Container(child: Text('W', - style: TextStyle( - fontFamily: 'Times', - fontWeight: FontWeight.bold, - fontSize: isTileView ? 12 : 18)),)), - GaugeAnnotation(angle: 310, positionFactor: 0.38, - widget: Container(child: Text('N', - style: TextStyle( - fontFamily: 'Times', - fontWeight: FontWeight.bold, - fontSize:isTileView ? 12 : 18)),)), - GaugeAnnotation(angle: 129, positionFactor: 0.38, - widget: Container(child: Text('S', - style: TextStyle( - fontFamily: 'Times', - fontWeight: FontWeight.bold, - fontSize:isTileView ? 12 : 18)),)), - GaugeAnnotation(angle: 50, positionFactor: 0.38, - widget: Container(child: Text('E', - style: TextStyle( - fontFamily: 'Times', - fontWeight: FontWeight.bold, - fontSize: isTileView ? 12 : 18)),)) - ] - ) - ], - ); -} - - - diff --git a/lib/samples/gauge/annotation/image_annotation.dart b/lib/samples/gauge/annotation/image_annotation.dart index 7a366758..bc18d2e1 100644 --- a/lib/samples/gauge/annotation/image_annotation.dart +++ b/lib/samples/gauge/annotation/image_annotation.dart @@ -1,227 +1,78 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class RadialImageAnnotation extends StatefulWidget { - const RadialImageAnnotation(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + RadialImageAnnotation({this.sample, Key key}) : super(key: key); + SubItem sample; + @override - _RadialImageAnnotationState createState() => _RadialImageAnnotationState(sample); + _RadialImageAnnotationState createState() => + _RadialImageAnnotationState(sample); } class _RadialImageAnnotationState extends State { _RadialImageAnnotationState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialImageAnnotation oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/image_annotation.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialImageAnnotation(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialImageAnnotation(false), sample); } } SfRadialGauge getRadialImageAnnotation(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis( interval: 10, radiusFactor: 0.95, - startAngle: 0, endAngle: 360, showTicks: false, - showLabels: false, - axisLineStyle: AxisLineStyle(thickness: 20), - pointers: [RangePointer(value: 73, - width: 20, color: const Color(0xFFFFCD60), - enableAnimation: true, - cornerStyle: CornerStyle.bothCurve)], + RadialAxis( + interval: 10, + radiusFactor: 0.95, + startAngle: 0, + endAngle: 360, + showTicks: false, + showLabels: false, + axisLineStyle: AxisLineStyle(thickness: 20), + pointers: [ + RangePointer( + value: 73, + width: 20, + color: const Color(0xFFFFCD60), + enableAnimation: true, + gradient: const SweepGradient( + colors: [Color(0xFFFCE38A), Color(0xFFF38181)], + stops: [0.25, 0.75]), + cornerStyle: CornerStyle.bothCurve) + ], annotations: [ - GaugeAnnotation(widget: Column(children: [Container( - width: isTileView ? 30.00 : 50.00 , - height: isTileView ? 30.00 : 50.00, - decoration: const BoxDecoration( - image: DecorationImage( - image: ExactAssetImage('images/sun.png'), - fit: BoxFit.fitHeight, - ), - )), - Padding(padding: const EdgeInsets.fromLTRB(0, 2, 0, 0), - child: Container(child:Text('73°F', - style: TextStyle( - fontWeight: FontWeight.bold, - fontSize:isTileView ? 15.00 : 25)) ,), - ) - ],) , angle: 270, positionFactor: 0.1) - - ] - ) + GaugeAnnotation( + widget: Column( + children: [ + Container( + width: isTileView ? 30.00 : 50.00, + height: isTileView ? 30.00 : 50.00, + decoration: const BoxDecoration( + image: DecorationImage( + image:ExactAssetImage('images/sun.png'), + fit: BoxFit.fill, + ), + )), + Padding( + padding: const EdgeInsets.fromLTRB(0, 2, 0, 0), + child: Container( + child: Text('73°F', + style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: isTileView ? 15.00 : 25)), + ), + ) + ], + ), + angle: 270, + positionFactor: 0.1) + ]) ], ); } - - - diff --git a/lib/samples/gauge/annotation/text_annotation.dart b/lib/samples/gauge/annotation/text_annotation.dart index fee28dd5..a30f650f 100644 --- a/lib/samples/gauge/annotation/text_annotation.dart +++ b/lib/samples/gauge/annotation/text_annotation.dart @@ -1,189 +1,26 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class RadialTextAnnotation extends StatefulWidget { - const RadialTextAnnotation(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + RadialTextAnnotation({this.sample, Key key}) : super(key: key); + SubItem sample; + @override - _RadialTextAnnotationState createState() => _RadialTextAnnotationState(sample); + _RadialTextAnnotationState createState() => + _RadialTextAnnotationState(sample); } class _RadialTextAnnotationState extends State { _RadialTextAnnotationState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialTextAnnotation oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/annotation/text_annotation.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} + final SubItem sample; -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialTextAnnotation(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialTextAnnotation(false), sample); } } @@ -205,22 +42,23 @@ SfRadialGauge getRadialTextAnnotation(bool isTileView) { endAngle: 50, radiusFactor: 0.9, annotations: [GaugeAnnotation( - angle: 270, positionFactor: 0, verticalAlignment: GaugeAlignment.far, + angle: 270, positionFactor: 0, verticalAlignment: GaugeAlignment.far, widget: Container(child:Text(' 63%', - style: TextStyle( - fontStyle: FontStyle.italic, - fontFamily: 'Times', - fontWeight: FontWeight.bold, - fontSize: isTileView ? 18 : 25))))], + style: TextStyle( + fontStyle: FontStyle.italic, + fontFamily: 'Times', + fontWeight: FontWeight.bold, + fontSize: isTileView ? 18 : 25))))], axisLineStyle: AxisLineStyle( color: const Color(0xFF00A8B5), + gradient: const SweepGradient( + colors: [Color(0xFF06974A), Color(0xFFF2E41F)], + stops: [0.25, 0.75] + ), thickness: 30, dashArray: [8, 10] )) ], ); } - - - diff --git a/lib/samples/gauge/axis_feature/custom_labels.dart b/lib/samples/gauge/axis_feature/custom_labels.dart index 084a7893..6d769563 100644 --- a/lib/samples/gauge/axis_feature/custom_labels.dart +++ b/lib/samples/gauge/axis_feature/custom_labels.dart @@ -1,264 +1,123 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class GaugeCustomLabels extends StatefulWidget { - const GaugeCustomLabels(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + GaugeCustomLabels({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _GaugeCustomLabelsState createState() => _GaugeCustomLabelsState(sample); } class _GaugeCustomLabelsState extends State { _GaugeCustomLabelsState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(GaugeCustomLabels oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/custom_labels.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel( getGaugeCustomLabels(false), sample); } } -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - setState((){ - _endWidth = MediaQuery.of(context).orientation == Orientation.portrait ? 18 : 10; - if(Theme.of(context).brightness == Brightness.dark){ - _cutsomLabelNeedleColor = const Color(0xFF888888); - }else{ - _cutsomLabelNeedleColor = const Color(0xFFFCACACA); - } - }); - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getGaugeCustomLabels(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), +Widget getGaugeCustomLabels(bool isTileView, [bool isIndexed]) { + return LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + final Orientation _orientation = MediaQuery.of(context).orientation; + final Brightness _brightness = Theme.of(context).brightness; + + return SfRadialGauge( + axes: [ + RadialAxis( + startAngle: 270, + endAngle: 270, + radiusFactor: 0.9, + minimum: 0, + maximum: 80, + axisLineStyle: + AxisLineStyle(thicknessUnit: GaugeSizeUnit.factor, thickness: 0.1), + interval: 10, + needsRotateLabels: true, + axisLabelStyle: GaugeTextStyle(fontSize: 12), + minorTicksPerInterval: 0, + majorTickStyle: MajorTickStyle( + thickness: 1.5, lengthUnit: GaugeSizeUnit.factor, length: 0.07), + showLabels: true, + onLabelCreated: labelCreated, + pointers: [ + NeedlePointer( + value: 70, + lengthUnit: GaugeSizeUnit.factor, + needleLength: 0.55, + needleEndWidth: isTileView ? 10 : + _orientation == Orientation.portrait ? 18: 10, + gradient: const LinearGradient(colors: [ + Color(0xFFFF6B78), + Color(0xFFFF6B78), + Color(0xFFE20A22), + Color(0xFFE20A22) + ], stops: [ + 0, + 0.5, + 0.5, + 1 + ]), + needleColor: const Color(0xFFF67280), + knobStyle: KnobStyle( + knobRadius: 0.1, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.white)), + NeedlePointer( + gradient: const LinearGradient(colors: [ + Color(0xFFE3DFDF), + Color(0xFFE3DFDF), + Color(0xFF7A7A7A), + Color(0xFF7A7A7A) + ], stops: [ + 0, + 0.5, + 0.5, + 1 + ]), + value: 30, + needleLength: 0.55, + lengthUnit: GaugeSizeUnit.factor, + needleColor: _brightness == Brightness.dark ? + const Color(0xFF888888): const Color(0xFFFCACACA), + needleEndWidth: isTileView ? 10 : + _orientation == Orientation.portrait ? 18: 10, + knobStyle: KnobStyle( + knobRadius: 0.1, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.white)) ], - ), - ), + ) + ], ); - }, - ); - } + }); } -SfRadialGauge getGaugeCustomLabels(bool isTileView) { - return SfRadialGauge( - axes: [ - RadialAxis(startAngle: 270, - endAngle: 270, radiusFactor: 0.9, - minimum: 0, maximum: 80, - axisLineStyle: AxisLineStyle( - thicknessUnit: GaugeSizeUnit.factor, - thickness: 0.1 - ), - interval: 10, needsRotateLabels: true, - axisLabelStyle: GaugeTextStyle(fontSize: 12), - minorTicksPerInterval: 0, - majorTickStyle: MajorTickStyle(thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, - length: 0.07), - showLabels: true, onLabelCreated: labelCreated, - pointers: [ - NeedlePointer(value: 70, lengthUnit: GaugeSizeUnit.factor, - needleLength: 0.55, needleEndWidth: isTileView ? 10 : _endWidth, - needleColor: const Color(0xFFF67280), knobStyle: KnobStyle(knobRadius: 0.1, - sizeUnit: GaugeSizeUnit.factor, - color: Colors.white)), - NeedlePointer(value: 30, needleLength: 0.55, - lengthUnit: GaugeSizeUnit.factor, needleColor: _cutsomLabelNeedleColor, - needleEndWidth: isTileView ? 10 : _endWidth, - knobStyle:KnobStyle(knobRadius: 0.1, - sizeUnit: GaugeSizeUnit.factor, - color: Colors.white) - ) - ], - ) - ], - ); -} - -double _endWidth = 18; -Color _cutsomLabelNeedleColor = const Color(0xFFFCACACA); - -void labelCreated(AxisLabelCreatedArgs args){ - if(args.text == '80' || args.text == '0'){ - args.text ='N'; - }else if(args.text == '10'){ - args.text ='NE'; - }else if(args.text == '20'){ - args.text ='E'; - }else if(args.text == '30'){ - args.text ='SE'; - }else if(args.text == '40'){ - args.text ='S'; - }else if(args.text == '50'){ - args.text ='SW'; - }else if(args.text == '60'){ - args.text ='W'; - }else if(args.text == '70'){ - args.text ='NW'; +void labelCreated(AxisLabelCreatedArgs args) { + if (args.text == '80' || args.text == '0') { + args.text = 'N'; + } else if (args.text == '10') { + args.text = 'NE'; + } else if (args.text == '20') { + args.text = 'E'; + } else if (args.text == '30') { + args.text = 'SE'; + } else if (args.text == '40') { + args.text = 'S'; + } else if (args.text == '50') { + args.text = 'SW'; + } else if (args.text == '60') { + args.text = 'W'; + } else if (args.text == '70') { + args.text = 'NW'; } } - - - - - - - diff --git a/lib/samples/gauge/axis_feature/default_gauge_view.dart b/lib/samples/gauge/axis_feature/default_gauge_view.dart index fce5e5d6..4156f589 100644 --- a/lib/samples/gauge/axis_feature/default_gauge_view.dart +++ b/lib/samples/gauge/axis_feature/default_gauge_view.dart @@ -1,211 +1,58 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class RadialGaugeDefault extends StatefulWidget { - const RadialGaugeDefault(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + RadialGaugeDefault({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _RadialGaugeDefaultState createState() => _RadialGaugeDefaultState(sample); } class _RadialGaugeDefaultState extends State { _RadialGaugeDefaultState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialGaugeDefault oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/default_gauge_view.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDefaultRadialGauge(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getDefaultRadialGauge(false), sample); } } SfRadialGauge getDefaultRadialGauge(bool isTileView) { - return SfRadialGauge( + return SfRadialGauge( enableLoadingAnimation: true, axes: [ - RadialAxis( interval: 10, axisLineStyle: AxisLineStyle(thickness: 0.03, - thicknessUnit: GaugeSizeUnit.factor, - ), showTicks: false, - axisLabelStyle: GaugeTextStyle(fontSize: isTileView ? 12 : 14, ), labelOffset: 25, + RadialAxis( + interval: 10, + axisLineStyle: AxisLineStyle( + thickness: 0.03, + thicknessUnit: GaugeSizeUnit.factor, + ), + showTicks: false, + axisLabelStyle: GaugeTextStyle( + fontSize: isTileView ? 12 : 14, + ), + labelOffset: 25, radiusFactor: 0.95, - pointers: [NeedlePointer(needleLength: 0.7, value: 70, - lengthUnit: GaugeSizeUnit.factor, needleColor: _needleColor, - needleStartWidth: 0, needleEndWidth: isTileView ? 3 : 4, - knobStyle: KnobStyle( sizeUnit: GaugeSizeUnit.factor, - color: _needleColor, - knobRadius: 0.05)), - ] - ) + pointers: [ + NeedlePointer( + needleLength: 0.7, + value: 70, + lengthUnit: GaugeSizeUnit.factor, + needleColor: _needleColor, + needleStartWidth: 0, + needleEndWidth: isTileView ? 3 : 4, + knobStyle: KnobStyle( + sizeUnit: GaugeSizeUnit.factor, + color: _needleColor, + knobRadius: 0.05)), + ]) ], ); } Color _needleColor = const Color(0xFFC06C84); - diff --git a/lib/samples/gauge/axis_feature/multiple_axis.dart b/lib/samples/gauge/axis_feature/multiple_axis.dart index 0330b1f9..e207032e 100644 --- a/lib/samples/gauge/axis_feature/multiple_axis.dart +++ b/lib/samples/gauge/axis_feature/multiple_axis.dart @@ -1,13 +1,13 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class MultipleAxisExample extends StatefulWidget { - const MultipleAxisExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + MultipleAxisExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override _MultipleAxisExampleState createState() => _MultipleAxisExampleState(sample); @@ -15,7 +15,7 @@ class MultipleAxisExample extends StatefulWidget { class _MultipleAxisExampleState extends State { _MultipleAxisExampleState(this.sample); - final SubItemList sample; + final SubItem sample; bool panelOpen; final ValueNotifier frontPanelVisible = ValueNotifier(true); @@ -42,205 +42,86 @@ class _MultipleAxisExampleState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/multiple_axis.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - setState((){ - _radius = MediaQuery.of(context).orientation == Orientation.portrait ? 0.6 : 0.5; - }); - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getMultipleAxisGauge(false)), - )); - }); + return getScopedModel(getMultipleAxisGauge(false), sample); } } -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} +Widget getMultipleAxisGauge(bool isTileView) { + return LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { + return SfRadialGauge( + axes: [ + + RadialAxis(minimum: 32, + maximum: 212, + interval: 36, + radiusFactor: isTileView ? 0.5 : + MediaQuery + .of(context) + .orientation == Orientation.portrait ? 0.6 : 0.5, + labelOffset: 15, + needsRotateLabels: true, + minorTickStyle: MinorTickStyle( + color: const Color(0xFF00A8B5), thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, + length: 0.07), + majorTickStyle: MajorTickStyle( + color: const Color(0xFF00A8B5), thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, + length: 0.15), + axisLineStyle: AxisLineStyle( + color: const Color(0xFF00A8B5), thickness: 3,), + axisLabelStyle: GaugeTextStyle( + color: const Color(0xFF00A8B5), fontSize: 12), -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), + ), + RadialAxis(minimum: 0, + maximum: 100, + interval: 10, + ticksPosition: ElementsPosition.outside, + labelsPosition: ElementsPosition.outside, + + minorTicksPerInterval: 5, + radiusFactor: 0.95, + labelOffset: 15, + minorTickStyle: MinorTickStyle(thickness: 1.5, + length: 0.07, lengthUnit: GaugeSizeUnit.factor), + majorTickStyle: MinorTickStyle(thickness: 1.5, + length: 0.15, lengthUnit: GaugeSizeUnit.factor,), + axisLineStyle: AxisLineStyle(thickness: 3,), + axisLabelStyle: GaugeTextStyle(fontSize: 12), + annotations: [ + GaugeAnnotation(angle: 90, positionFactor: 1, + widget: Row(children: [ + Container(child: const Text( + '33°C :', style: TextStyle(fontSize: 12, + fontWeight: FontWeight.bold, + fontFamily: 'Times'),)), + Container(child: const Text( + ' 91.4°F', style: TextStyle(fontSize: 12, + color: Color(0xFF00A8B5), + fontWeight: FontWeight.bold, + fontFamily: 'Times'),)) + ],) + ) + ], + pointers: [NeedlePointer(needleLength: 0.68, + lengthUnit: GaugeSizeUnit.factor, + needleStartWidth: 0, + needleEndWidth: 3, + value: 33, + enableAnimation: true, + knobStyle: KnobStyle(knobRadius: 6.5, + sizeUnit: GaugeSizeUnit.logicalPixel + ),) + ] + ), + ] ); - }, - ); - } -} - -SfRadialGauge getMultipleAxisGauge(bool isTileView) { - return SfRadialGauge( - axes: [ - - RadialAxis(minimum: 32 , maximum: 212, interval: 36, - radiusFactor: isTileView ? 0.5 :_radius, labelOffset: 15, needsRotateLabels: true, - minorTickStyle: MinorTickStyle(color: const Color(0xFF00A8B5), thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, - length: 0.07), - majorTickStyle: MajorTickStyle(color: const Color(0xFF00A8B5), thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor, - length: 0.15), - axisLineStyle: AxisLineStyle(color:const Color(0xFF00A8B5), thickness: 3, ), - axisLabelStyle: GaugeTextStyle(color: const Color(0xFF00A8B5), fontSize: 12), - - ), - RadialAxis(minimum: 0 , maximum: 100, interval: 10, - ticksPosition: ElementsPosition.outside, - labelsPosition: ElementsPosition.outside, - - minorTicksPerInterval: 5, - radiusFactor: 0.95, labelOffset: 15, - minorTickStyle: MinorTickStyle( thickness: 1.5, - length: 0.07, lengthUnit: GaugeSizeUnit.factor), - majorTickStyle: MinorTickStyle(thickness: 1.5, - length: 0.15, lengthUnit: GaugeSizeUnit.factor,), - axisLineStyle: AxisLineStyle( thickness: 3, ), - axisLabelStyle: GaugeTextStyle(fontSize: 12), - annotations: [ - GaugeAnnotation(angle: 90, positionFactor: 1, - widget: Row(children: [Container(child: const Text('33°C :', style: TextStyle(fontSize: 12, - fontWeight: FontWeight.bold, fontFamily: 'Times'),)), - Container(child: const Text(' 91.4°F', style: TextStyle(fontSize: 12, - color: Color(0xFF00A8B5), fontWeight: FontWeight.bold, fontFamily: 'Times'),))],) - ) - ], - pointers: [NeedlePointer(needleLength: 0.68, - lengthUnit: GaugeSizeUnit.factor, - needleStartWidth: 0, needleEndWidth: 3, value: 33, - enableAnimation: true, - knobStyle: KnobStyle(knobRadius: 6.5, - sizeUnit: GaugeSizeUnit.logicalPixel - ),)] - ), - ] - ); + }); } -double _radius = 0.6; diff --git a/lib/samples/gauge/axis_feature/non_linearable.dart b/lib/samples/gauge/axis_feature/non_linearable.dart new file mode 100644 index 00000000..14720d08 --- /dev/null +++ b/lib/samples/gauge/axis_feature/non_linearable.dart @@ -0,0 +1,166 @@ +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable +class RadialNonLinearLabel extends StatefulWidget { + RadialNonLinearLabel({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _RadialNonLinearLabelState createState() => + _RadialNonLinearLabelState(sample); +} + +class _RadialNonLinearLabelState extends State { + _RadialNonLinearLabelState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getRadialNonLinearLabel(false), sample); + } +} + +SfRadialGauge getRadialNonLinearLabel(bool isTileView) { + return SfRadialGauge(enableLoadingAnimation : true, + animationDuration: 2500, + axes: [ + CustomAxis( + labelOffset: 15, + axisLineStyle: AxisLineStyle( + thicknessUnit: GaugeSizeUnit.factor, thickness: 0.15), + radiusFactor: 0.9, + minimum: 0, + showTicks: false, + maximum: 150, + axisLabelStyle: GaugeTextStyle(fontSize: 12), + pointers: [ + NeedlePointer( + enableAnimation: true, + gradient: LinearGradient( + colors: const [Color.fromRGBO(203,126,223,0.1), Color(0xFFCB7EDF)], + stops: const [0.25, 0.75], + begin: Alignment.bottomCenter, + end: Alignment.topCenter), + animationType: AnimationType.easeOutBack, + value: 60, + lengthUnit: GaugeSizeUnit.factor, + animationDuration: 1300, + needleStartWidth: isTileView ? 3 : 4, + needleEndWidth: isTileView ? 6 : 8, + needleLength: 0.8, + knobStyle: KnobStyle( + knobRadius: 0, + )), + RangePointer( + value: 60, + width: 0.15, + sizeUnit: GaugeSizeUnit.factor, + color: _pointerColor, + animationDuration: 1300, + animationType: AnimationType.easeOutBack, + gradient: const SweepGradient( + colors: [Color(0xFF9E40DC), Color(0xFFE63B86)], + stops: [0.25, 0.75]), + enableAnimation: true) + ]) + ], + ); +} + +Color _pointerColor = const Color(0xFF494CA2); + +class CustomAxis extends RadialAxis { + CustomAxis({ + double radiusFactor = 1, + List pointers, + GaugeTextStyle axisLabelStyle, + AxisLineStyle axisLineStyle, + double minimum, + double maximum, + bool showTicks, + double labelOffset, + }) : super( + pointers: pointers ?? [], + minimum: minimum, + maximum: maximum, + showTicks: showTicks ?? true, + labelOffset: labelOffset ?? 20, + axisLabelStyle: axisLabelStyle ?? + GaugeTextStyle( + color: Colors.black, + fontSize: 15.0, + fontFamily: 'Segoe UI', + fontStyle: FontStyle.normal, + fontWeight: FontWeight.normal), + axisLineStyle: axisLineStyle ?? + AxisLineStyle( + color: Colors.grey, + thickness: 10, + ), + radiusFactor: radiusFactor, + ); + + @override + List generateVisibleLabels() { + final List _visibleLabels = []; + for (num i = 0; i < 9; i++) { + final double _value = _calculateLabelValue(i); + final CircularAxisLabel label = CircularAxisLabel( + axisLabelStyle, _value.toInt().toString(), i, false); + label.value = _value; + _visibleLabels.add(label); + } + + return _visibleLabels; + } + + @override + double valueToFactor(double value) { + if (value >= 0 && value <= 2) { + return (value * 0.125) / 2; + } else if (value > 2 && value <= 5) { + return (((value - 2) * 0.125) / (5 - 2)) + (1 * 0.125); + } else if (value > 5 && value <= 10) { + return (((value - 5) * 0.125) / (10 - 5)) + (2 * 0.125); + } else if (value > 10 && value <= 20) { + return (((value - 10) * 0.125) / (20 - 10)) + (3 * 0.125); + } else if (value > 20 && value <= 30) { + return (((value - 20) * 0.125) / (30 - 20)) + (4 * 0.125); + } else if (value > 30 && value <= 50) { + return (((value - 30) * 0.125) / (50 - 30)) + (5 * 0.125); + } else if (value > 50 && value <= 100) { + return (((value - 50) * 0.125) / (100 - 50)) + (6 * 0.125); + } else if (value > 100 && value <= 150) { + return (((value - 100) * 0.125) / (150 - 100)) + (7 * 0.125); + } else { + return 1; + } + } + + /// To return the label value based on interval + double _calculateLabelValue(num value) { + if (value == 0) { + return 0; + } else if (value == 1) { + return 2; + } else if (value == 2) { + return 5; + } else if (value == 3) { + return 10; + } else if (value == 4) { + return 20; + } else if (value == 5) { + return 30; + } else if (value == 6) { + return 50; + } else if (value == 7) { + return 100; + } else { + return 150; + } + } +} diff --git a/lib/samples/gauge/axis_feature/non_linearlabel.dart b/lib/samples/gauge/axis_feature/non_linearlabel.dart deleted file mode 100644 index 19a10f0c..00000000 --- a/lib/samples/gauge/axis_feature/non_linearlabel.dart +++ /dev/null @@ -1,318 +0,0 @@ -import 'package:syncfusion_flutter_gauges/gauges.dart'; -import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; - -class RadialNonLinearLabel extends StatefulWidget { - const RadialNonLinearLabel (this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _RadialNonLinearLabelState createState() => _RadialNonLinearLabelState(sample); -} - -class _RadialNonLinearLabelState extends State { - _RadialNonLinearLabelState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialNonLinearLabel oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/non_linearlabel.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - color: model.cardThemeColor, - titleVisibleOnPanelClosed: true, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - setState((){ - _radius = MediaQuery.of(context).orientation == Orientation.portrait ? 0.06 : 0.1; - }); - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialNonLinearLabel(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getRadialNonLinearLabel(bool isTileView) { - return SfRadialGauge( - axes: [ - CustomAxis(labelOffset: 15, - axisLineStyle: AxisLineStyle( - thicknessUnit: GaugeSizeUnit.factor, - thickness: 0.15 - ), - radiusFactor: 0.9, minimum: 0, - showTicks: false, maximum: 150, - axisLabelStyle: GaugeTextStyle( - fontSize: 12), - pointers: [NeedlePointer(enableAnimation: true, - animationType: AnimationType.easeOutBack, - value: 60, - lengthUnit: GaugeSizeUnit.factor, animationDuration: 1300, - needleStartWidth: 0, needleEndWidth: isTileView ? 5 : 7, needleLength: 0.8, - tailStyle: TailStyle(width: isTileView ? 5 : 7, lengthUnit: GaugeSizeUnit.logicalPixel, - length: 23, ), - knobStyle: KnobStyle(knobRadius: isTileView ? 0.07 : _radius, - sizeUnit: GaugeSizeUnit.factor,), - ), RangePointer(value: 60, width: 0.15, - sizeUnit: GaugeSizeUnit.factor, - color: _pointerColor, animationDuration: 1300, - animationType: AnimationType.easeOutBack, - enableAnimation: true)] - ) - ], - ); -} - -Color _pointerColor = const Color(0xFF494CA2); -double _radius = 0.06; - -class CustomAxis extends RadialAxis{ - CustomAxis({ - double radiusFactor = 1, - List pointers, - GaugeTextStyle axisLabelStyle, - AxisLineStyle axisLineStyle, - double minimum, - double maximum, - bool showTicks, - double labelOffset,}) :super( - pointers: pointers ?? [], - minimum: minimum , - maximum: maximum , - showTicks: showTicks ?? true, - labelOffset: labelOffset ?? 20, - axisLabelStyle: axisLabelStyle ?? GaugeTextStyle(color: Colors.black, - fontSize: 15.0, - fontFamily: 'Segoe UI', - fontStyle: FontStyle.normal, - fontWeight: FontWeight.normal), - axisLineStyle: axisLineStyle ?? AxisLineStyle( - color: Colors.grey, - thickness: 10,), - radiusFactor: radiusFactor, - ); - - @override - List generateVisibleLabels(){ - final List _visibleLabels = []; - for (num i = 0; i < 9; i++) { - final double _value = _calculateLabelValue(i); - final CircularAxisLabel label = - CircularAxisLabel(axisLabelStyle, _value.toInt().toString(), i, false); - label.value = _value; - _visibleLabels.add(label); - } - - return _visibleLabels; - } - - @override - double valueToFactor(double value) - { - if(value >= 0 && value <=2){ - return (value * 0.125)/2; - }else if(value > 2 && value <=5){ - return (((value - 2) * 0.125)/(5 - 2)) + (1 * 0.125); - }else if(value > 5 && value <=10){ - return (((value - 5) * 0.125)/(10 - 5)) + (2 * 0.125); - }else if(value > 10 && value <=20){ - return (((value - 10) * 0.125)/(20 - 10)) + (3 * 0.125); - }else if(value > 20 && value <=30){ - return (((value - 20) * 0.125)/(30 - 20)) + (4 * 0.125); - }else if(value > 30 && value <=50){ - return (((value - 30) * 0.125)/(50 - 30)) + (5 * 0.125); - }else if(value > 50 && value <=100){ - return (((value - 50) * 0.125)/(100 - 50)) + (6 * 0.125); - }else if(value > 100 && value <=150){ - return (((value - 100) * 0.125)/(150 - 100)) + (7 * 0.125); - }else{ - return 1; - } - } - - - /// To return the label value based on interval - double _calculateLabelValue(num value){ - if(value == 0){ - return 0; - }else if(value == 1){ - return 2; - }else if(value == 2){ - return 5; - }else if(value == 3){ - return 10; - }else if(value == 4){ - return 20; - }else if(value == 5){ - return 30; - }else if(value == 6){ - return 50; - }else if(value == 7){ - return 100; - }else{ - return 150; - } - } - -} - - - diff --git a/lib/samples/gauge/axis_feature/radiallabel_customization.dart b/lib/samples/gauge/axis_feature/radiallabel_customization.dart index 5fed0f9d..ef6c2da8 100644 --- a/lib/samples/gauge/axis_feature/radiallabel_customization.dart +++ b/lib/samples/gauge/axis_feature/radiallabel_customization.dart @@ -1,226 +1,67 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class RadialLabelCustomization extends StatefulWidget { - const RadialLabelCustomization(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + RadialLabelCustomization({this.sample, Key key}) : super(key: key); + SubItem sample; + @override - _RadialLabelCustomizationState createState() => _RadialLabelCustomizationState(sample); + _RadialLabelCustomizationState createState() => + _RadialLabelCustomizationState(sample); } class _RadialLabelCustomizationState extends State { _RadialLabelCustomizationState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialLabelCustomization oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/radiallabel_customization.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialLabelCustomization(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialLabelCustomization(false), sample); } } SfRadialGauge getRadialLabelCustomization(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis(startAngle: 180, endAngle: 360, - centerY: 0.7, interval: 10, radiusFactor: 0.95, - labelFormat: '{value}%', - labelsPosition: ElementsPosition.outside, - ticksPosition: ElementsPosition.inside, - labelOffset: 15, - minorTickStyle: MinorTickStyle(length: 0.05, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1.5), - majorTickStyle: MajorTickStyle(length: 0.1, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1.5), - minorTicksPerInterval: 5, - pointers: [NeedlePointer(value: 70, - needleStartWidth: 1, needleEndWidth: 3, needleLength: 0.8, - lengthUnit: GaugeSizeUnit.factor, - knobStyle: KnobStyle(knobRadius: 8, sizeUnit: GaugeSizeUnit.logicalPixel, - - ), tailStyle: TailStyle(width: 3, lengthUnit: GaugeSizeUnit.logicalPixel, - length: 20) - )], - axisLabelStyle: GaugeTextStyle(fontSize: 12, fontWeight: FontWeight.w500), - axisLineStyle: AxisLineStyle(thickness: 3, color: const Color(0xFF00A8B5)) - ), + RadialAxis( + startAngle: 180, + endAngle: 360, + centerY: 0.7, + interval: 10, + radiusFactor: 0.95, + labelFormat: '{value}%', + labelsPosition: ElementsPosition.outside, + ticksPosition: ElementsPosition.inside, + labelOffset: 15, + minorTickStyle: MinorTickStyle( + length: 0.05, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), + majorTickStyle: MajorTickStyle( + length: 0.1, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), + minorTicksPerInterval: 5, + pointers: [ + NeedlePointer( + value: 70, + needleStartWidth: 1, + needleEndWidth: 3, + needleLength: 0.8, + lengthUnit: GaugeSizeUnit.factor, + knobStyle: KnobStyle( + knobRadius: 8, + sizeUnit: GaugeSizeUnit.logicalPixel, + ), + tailStyle: TailStyle( + width: 3, + lengthUnit: GaugeSizeUnit.logicalPixel, + length: 20)) + ], + axisLabelStyle: + GaugeTextStyle(fontSize: 12, fontWeight: FontWeight.w500), + axisLineStyle: + AxisLineStyle(thickness: 3, color: const Color(0xFF00A8B5))), ], ); } - - - - - - diff --git a/lib/samples/gauge/axis_feature/range_colors.dart b/lib/samples/gauge/axis_feature/range_colors.dart index 2f411d75..637287c0 100644 --- a/lib/samples/gauge/axis_feature/range_colors.dart +++ b/lib/samples/gauge/axis_feature/range_colors.dart @@ -1,248 +1,75 @@ -import 'dart:async'; import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class RangeColorForLabels extends StatefulWidget { - const RangeColorForLabels(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - + RangeColorForLabels({this.sample, Key key}) : super(key: key); + SubItem sample; + @override _RangeColorForLabelsState createState() => _RangeColorForLabelsState(sample); } class _RangeColorForLabelsState extends State { _RangeColorForLabelsState(this.sample); - final SubItemList sample; - bool panelOpen; - - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RangeColorForLabels oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/range_colors.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - Timer timer; - - @override - void initState() { - super.initState(); - } + final SubItem sample; - - @override - void dispose() { - super.dispose(); - } - @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRangeColorForLabels(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRangeColorForLabels(false), sample); } } SfRadialGauge getRangeColorForLabels(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis(showAxisLine: false, + RadialAxis( + showAxisLine: false, ticksPosition: ElementsPosition.outside, labelsPosition: ElementsPosition.outside, - startAngle: 270, endAngle: 270, useRangeColorForAxis: true, - radiusFactor: 0.95, interval: 10, isInversed: true, - axisLabelStyle:GaugeTextStyle( - fontWeight: FontWeight.w500, - fontSize: 12), - majorTickStyle: MajorTickStyle(length: 0.15, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1), - minorTicksPerInterval: 4, labelOffset: 15, - minorTickStyle: MinorTickStyle(length: 0.04, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1), - ranges: [GaugeRange(startValue: 0, endValue: 35, - color: const Color(0xFFF8B195), - sizeUnit: GaugeSizeUnit.factor, - rangeOffset: 0.06, - startWidth: 0.05, endWidth: 0.25), - GaugeRange(startValue: 35, endValue: 70, + startAngle: 270, + endAngle: 270, + useRangeColorForAxis: true, + radiusFactor: 0.95, + interval: 10, + isInversed: true, + axisLabelStyle: + GaugeTextStyle(fontWeight: FontWeight.w500, fontSize: 12), + majorTickStyle: MajorTickStyle( + length: 0.15, lengthUnit: GaugeSizeUnit.factor, thickness: 1), + minorTicksPerInterval: 4, + labelOffset: 15, + minorTickStyle: MinorTickStyle( + length: 0.04, lengthUnit: GaugeSizeUnit.factor, thickness: 1), + ranges: [ + GaugeRange( + startValue: 0, + endValue: 35, + color: const Color(0xFFF8B195), + sizeUnit: GaugeSizeUnit.factor, + rangeOffset: 0.06, + startWidth: 0.05, + endWidth: 0.25), + GaugeRange( + startValue: 35, + endValue: 70, rangeOffset: 0.06, sizeUnit: GaugeSizeUnit.factor, color: const Color(0xFFC06C84), - startWidth: 0.05, endWidth: 0.25), - GaugeRange(startValue: 70, endValue: 100, + startWidth: 0.05, + endWidth: 0.25), + GaugeRange( + startValue: 70, + endValue: 100, rangeOffset: 0.06, sizeUnit: GaugeSizeUnit.factor, color: const Color(0xFF355C7D), - startWidth: 0.05, endWidth: 0.25), - ] - ) + startWidth: 0.05, + endWidth: 0.25), + ]) ], ); } - - - - - diff --git a/lib/samples/gauge/axis_feature/tick_customization.dart b/lib/samples/gauge/axis_feature/tick_customization.dart index 2f6f9404..b03217a7 100644 --- a/lib/samples/gauge/axis_feature/tick_customization.dart +++ b/lib/samples/gauge/axis_feature/tick_customization.dart @@ -1,189 +1,26 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; -class RadialTickCustomization extends StatefulWidget { - const RadialTickCustomization(this.sample, {Key key}) : super(key: key); - final SubItemList sample; - - @override - _RadialTickCustomizationState createState() => _RadialTickCustomizationState(sample); -} - -class _RadialTickCustomizationState extends State< RadialTickCustomization> { - _RadialTickCustomizationState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget( RadialTickCustomization oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/axis_feature/tick_customization.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} +import '../../../model/helper.dart'; +import '../../../model/model.dart'; -class FrontPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialTickCustomization(false)), - )); - }); - } -} +// ignore: must_be_immutable +class RadialTickCustomization extends StatefulWidget { + RadialTickCustomization({this.sample, Key key}) : super(key: key); + SubItem sample; -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; @override - _BackPanelState createState() => _BackPanelState(sample); + _RadialTickCustomizationState createState() => + _RadialTickCustomizationState(sample); } -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } +class _RadialTickCustomizationState extends State { + _RadialTickCustomizationState(this.sample); + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialTickCustomization(false), sample); } } @@ -191,35 +28,51 @@ SfRadialGauge getRadialTickCustomization(bool isTileView) { return SfRadialGauge( axes: [ RadialAxis( - radiusFactor: 0.9, - showAxisLine: false, showLastLabel: false, - startAngle: 270, endAngle: 270, needsRotateLabels: true, - labelsPosition: ElementsPosition.outside, - axisLabelStyle: GaugeTextStyle(fontSize: 12), - majorTickStyle: MajorTickStyle(length: 0.15, - lengthUnit:GaugeSizeUnit.factor, - thickness: 1, - dashArray: [2,1]), - minorTicksPerInterval: 4, interval: 10, - minorTickStyle: MinorTickStyle(length: 0.06, - thickness: 1, lengthUnit: GaugeSizeUnit.factor, - dashArray: [2,1]), - pointers: [NeedlePointer(enableAnimation: true, - animationType: AnimationType.ease, animationDuration: 1300, - value: 75, needleColor: _tickCustomizationNeedleColor, - lengthUnit: GaugeSizeUnit.factor, - needleStartWidth: 0, needleEndWidth: 3, needleLength: 0.8, - tailStyle: TailStyle(width: 3, lengthUnit: GaugeSizeUnit.logicalPixel, - length: 20, color: _tickCustomizationNeedleColor,), - knobStyle: KnobStyle(knobRadius: 8, sizeUnit: GaugeSizeUnit.logicalPixel, - color: _tickCustomizationNeedleColor, - ) - )] - ) + radiusFactor: 0.9, + showAxisLine: false, + showLastLabel: false, + startAngle: 270, + endAngle: 270, + needsRotateLabels: true, + labelsPosition: ElementsPosition.outside, + axisLabelStyle: GaugeTextStyle(fontSize: 12), + majorTickStyle: MajorTickStyle( + length: 0.15, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1, + dashArray: [2, 1]), + minorTicksPerInterval: 4, + interval: 10, + minorTickStyle: MinorTickStyle( + length: 0.06, + thickness: 1, + lengthUnit: GaugeSizeUnit.factor, + dashArray: [2, 1]), + pointers: [ + NeedlePointer( + enableAnimation: true, + animationType: AnimationType.ease, + animationDuration: 1300, + value: 75, + needleColor: _tickCustomizationNeedleColor, + lengthUnit: GaugeSizeUnit.factor, + needleStartWidth: 0, + needleEndWidth: 3, + needleLength: 0.8, + tailStyle: TailStyle( + width: 3, + lengthUnit: GaugeSizeUnit.logicalPixel, + length: 20, + color: _tickCustomizationNeedleColor, + ), + knobStyle: KnobStyle( + knobRadius: 8, + sizeUnit: GaugeSizeUnit.logicalPixel, + color: _tickCustomizationNeedleColor, + )) + ]) ], ); } Color _tickCustomizationNeedleColor = const Color(0xFF494CA2); - - diff --git a/lib/samples/gauge/pointer_interaction/radial_pointerdragging.dart b/lib/samples/gauge/pointer_interaction/radial_pointerdragging.dart index e177ff2c..45ae1cd4 100644 --- a/lib/samples/gauge/pointer_interaction/radial_pointerdragging.dart +++ b/lib/samples/gauge/pointer_interaction/radial_pointerdragging.dart @@ -1,13 +1,14 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; import 'package:url_launcher/url_launcher.dart'; +import '../../../model/model.dart'; +// ignore: must_be_immutable class RadialPointerDragging extends StatefulWidget { - const RadialPointerDragging(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialPointerDragging({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RadialPointerDraggingState createState() => _RadialPointerDraggingState(sample); @@ -15,35 +16,14 @@ class RadialPointerDragging extends StatefulWidget { class _RadialPointerDraggingState extends State { _RadialPointerDraggingState(this.sample); - final SubItemList sample; - bool panelOpen; + final SubItem sample; final ValueNotifier frontPanelVisible = ValueNotifier(true); - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialPointerDragging oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( + return ScopedModelDescendant( + builder: (BuildContext context, _, SampleModel model) => SafeArea( child: Backdrop( needCloseButton: false, panelVisible: frontPanelVisible, @@ -87,7 +67,7 @@ class _RadialPointerDraggingState extends State { class FrontPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables FrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem subItemList; @override _FrontPanelState createState() => _FrontPanelState(subItemList); @@ -95,29 +75,107 @@ class FrontPanel extends StatefulWidget { class _FrontPanelState extends State { _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; @override Widget build(BuildContext context) { - setState((){ - _interval = MediaQuery.of(context).orientation == Orientation.portrait ? 10 : 20; - }); - return ScopedModelDescendant( + if(MediaQuery.of(context).orientation == Orientation.portrait){ + _firstMarkerSize = 10; + _annotationFontSize = 25; + }else{ + _firstMarkerSize = 5; + _annotationFontSize = 15; + } + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialPointerDragging(false)), + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Column( + children: [ + Expanded( + flex: 7, // takes 30% of available width + child: SfRadialGauge( + axes: [ + RadialAxis( axisLineStyle: AxisLineStyle(thickness: 0.2, + thicknessUnit: GaugeSizeUnit.factor), + showTicks: false, showLabels: true, + onAxisTapped: onPointerValueChanged, + pointers: [RangePointer(value: _currentValue, + onValueChanged: onPointerValueChanged, + onValueChangeEnd: onPointerValueChanged, + onValueChanging: onPointerValueChanging, + enableDragging: true, + width: 0.2, sizeUnit: GaugeSizeUnit.factor + ), + MarkerPointer(value: _markerValue, + color: Colors.white, markerHeight: _firstMarkerSize, + markerWidth: _firstMarkerSize, markerType: MarkerType.circle, + ), + + ], + annotations:[ + GaugeAnnotation( widget: Row( + children: [ + Text('$_annotationValue', + style: TextStyle(fontSize: _annotationFontSize, + fontFamily: 'Times', fontWeight: FontWeight.bold, + color: const Color(0xFF00A8B5)), + ), + Text(' %', style: TextStyle(fontSize: _annotationFontSize, + fontFamily: 'Times',fontWeight: FontWeight.bold, + color: const Color(0xFF00A8B5)),) + ], + ), + positionFactor: 0.13, angle: 0 + )] + ) + ] + ), + ), + + Expanded( + flex: 3, // takes 30% of available width + child: Slider( + activeColor: const Color(0xFF02AAB0), + inactiveColor: const Color(0xFF00CDAC), + min: 5, + max: 100, + onChanged: onPointerValueChanged, + value: _currentValue , + ), + ), + ], + ) )); }); } + + void onPointerValueChanged(double value){ + if(value.toInt() > 6){ + setState(() { + _currentValue = value.roundToDouble(); + final int _value = _currentValue.toInt(); + _annotationValue = '$_value'; + _markerValue = _currentValue - 2; + }); + } + } + + void onPointerValueChanging(ValueChangingArgs args){ + if(args.value.toInt() <= 6){ + args.cancel = true; + } + } } + + class BackPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables BackPanel(this.sample); - final SubItemList sample; + final SubItem sample; @override _BackPanelState createState() => _BackPanelState(sample); @@ -125,7 +183,7 @@ class BackPanel extends StatefulWidget { class _BackPanelState extends State { _BackPanelState(this.sample); - final SubItemList sample; + final SubItem sample; final GlobalKey _globalKey = GlobalKey(); @override @@ -149,9 +207,9 @@ class _BackPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Container( color: model.backgroundColor, child: Padding( @@ -191,61 +249,49 @@ class _BackPanelState extends State { } } -SfRadialGauge getRadialPointerDragging(bool isTileView) { +Widget getRadialPointerDragging(bool isTileView) { + return SfRadialGauge( - axes:[ - RadialAxis(minimum: 0, maximum: 120, showLabels: true, - radiusFactor: 0.95, - offsetUnit: GaugeSizeUnit.factor, - interval: isTileView ? 20 : _interval, tickOffset: 0.2, labelOffset: 0.1, - minorTicksPerInterval: 7, - axisLineStyle: AxisLineStyle(thickness: 0.1, thicknessUnit: GaugeSizeUnit.factor, - color: Colors.transparent - ), - minorTickStyle: MinorTickStyle(thickness: 1, - lengthUnit: GaugeSizeUnit.factor, - length: 0.06), - majorTickStyle: MajorTickStyle(thickness: 1, length: 0.15, - lengthUnit: GaugeSizeUnit.factor), - axisLabelStyle: GaugeTextStyle(fontSize: 12), - pointers: [MarkerPointer(value: 25, enableDragging: true, - markerHeight: 30, markerWidth: 30, offsetUnit: GaugeSizeUnit.factor, - - color: Colors.white, - markerType: MarkerType.circle, borderWidth: 8,borderColor: const Color(0xFFFFCD60) - ), - ], - ranges: [GaugeRange(startValue: 0, endValue: 19.5, - color: const Color(0xFF355C7D), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.1, endWidth: 0.1), - GaugeRange(startValue: 20, endValue: 39.5, - color: const Color(0xFFC06C84), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.1, endWidth: 0.1), - GaugeRange(startValue: 40, endValue: 59.5, - color: const Color(0xFFF67280), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.1, endWidth: 0.1), - GaugeRange(startValue: 60, endValue: 79.5, - color: const Color(0xFFF8B195), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.1, endWidth: 0.1), - GaugeRange(startValue: 80, endValue: 99.5, - color: const Color(0xFF74B49B), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.1, endWidth: 0.1), - GaugeRange(startValue: 100, endValue: 120, - color: const Color(0xFF00A8B5), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.1, endWidth: 0.1), - ] - ) - ], + axes: [ + RadialAxis( axisLineStyle: AxisLineStyle(thickness: 0.2, + thicknessUnit: GaugeSizeUnit.factor), + showTicks: false, showLabels: false, + radiusFactor: 1, + pointers: [RangePointer(value: _currentValue, + width: 0.2, sizeUnit: GaugeSizeUnit.factor + ), + MarkerPointer(value: _markerValue, + color: Colors.white, markerHeight: 5, + markerWidth: 5, markerType: MarkerType.circle, + ), + + + ], + annotations:[ + GaugeAnnotation( widget: Row( + children: [ + Text('$_annotationValue', + style: const TextStyle(fontSize: 20, + fontFamily: 'Times', fontWeight: FontWeight.bold, + color: Color(0xFF00A8B5)), + ), + const Text(' %', style: TextStyle(fontSize: 20, + fontFamily: 'Times',fontWeight: FontWeight.bold, + color: Color(0xFF00A8B5)),) + ], + ), + positionFactor: 0.13, angle: 0 + )] + ) + ] ); -} -double _interval = 10; +} +double _currentValue = 60; +double _markerValue = 58; +double _firstMarkerSize = 10; +double _annotationFontSize = 25; +String _annotationValue ='60'; \ No newline at end of file diff --git a/lib/samples/gauge/pointer_interaction/radial_slider.dart b/lib/samples/gauge/pointer_interaction/radial_slider.dart new file mode 100644 index 00000000..05616022 --- /dev/null +++ b/lib/samples/gauge/pointer_interaction/radial_slider.dart @@ -0,0 +1,382 @@ +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_examples/widgets/flutter_backdrop.dart'; +import 'package:scoped_model/scoped_model.dart'; +import 'package:url_launcher/url_launcher.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable +class RadialSlider extends StatefulWidget { + RadialSlider({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _RadialSliderState createState() => _RadialSliderState(sample); +} + +class _RadialSliderState extends State { + _RadialSliderState(this.sample); + final SubItem sample; + bool panelOpen; + final ValueNotifier frontPanelVisible = ValueNotifier(true); + + @override + void initState() { + panelOpen = frontPanelVisible.value; + frontPanelVisible.addListener(_subscribeToValueNotifier); + super.initState(); + } + + void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; + + @override + void dispose() { + super.dispose(); + } + + @override + void didUpdateWidget(RadialSlider oldWidget) { + super.didUpdateWidget(oldWidget); + frontPanelVisible.removeListener(_subscribeToValueNotifier); + frontPanelVisible.addListener(_subscribeToValueNotifier); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (BuildContext context, _, SampleModel model) => SafeArea( + child: Backdrop( + needCloseButton: false, + panelVisible: frontPanelVisible, + sampleListModel: model, + frontPanelOpenPercentage: 0.28, + toggleFrontLayer: false, + appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, + appBarActions: [ + Padding( + padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), + child: Container( + height: 40, + width: 40, + child: IconButton( + icon: Image.asset(model.codeViewerIcon, + color: Colors.white), + onPressed: () { + launch( + 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointer_interaction/radial_pointerdragging.dart'); + }, + ), + ), + ), + ], + appBarTitle: AnimatedSwitcher( + duration: const Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + color: model.cardThemeColor, + borderRadius: const BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + //ignore:prefer_const_constructors_in_immutables + FrontPanel(this.subItemList); + final SubItem subItemList; + + @override + _FrontPanelState createState() => _FrontPanelState(subItemList); +} + +class _FrontPanelState extends State { + _FrontPanelState(this.sample); + final SubItem sample; + @override + Widget build(BuildContext context) { + if(MediaQuery.of(context).orientation == Orientation.portrait){ + _markerSize = 20; + _annotationFontSize = 25; + _thickness = 0.06; + _borderWidth = 5; + }else{ + _markerSize = 18; + _annotationFontSize = 15; + _thickness = 0.1; + _borderWidth = 4; + } + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: SfRadialGauge( + axes: [ + RadialAxis( axisLineStyle: AxisLineStyle(thickness: _thickness, + + thicknessUnit: GaugeSizeUnit.factor), + + minorTicksPerInterval: 4, + showFirstLabel: false, + minimum: 0, + maximum: 12, interval: 1, + startAngle: 270, endAngle: 270, + pointers: [ + MarkerPointer(value: _firstMarkerValue, + onValueChanged: onFirstPointerValueChanged, + onValueChanging: onFirstPointerValueChanging, + enableDragging: true, borderColor: const Color(0xFFFFCD60), + borderWidth: _borderWidth, color: Colors.white, + markerHeight: _markerSize, + markerWidth: _markerSize, markerType: MarkerType.circle, + ), + MarkerPointer(value: _secondMarkerValue, + onValueChanged: onSecondPointerValueChanged, + onValueChanging: onSecondPointerValueChanging, + color: Colors.white, + enableDragging: true, borderColor: const Color(0xFFFFCD60), + markerHeight: _markerSize, borderWidth: _borderWidth, + markerWidth: _markerSize, markerType: MarkerType.circle, + ), + + ], + ranges: [GaugeRange(endValue: _secondMarkerValue, + sizeUnit: GaugeSizeUnit.factor, + startValue: _firstMarkerValue, startWidth : _thickness, endWidth: _thickness)], + annotations:[ + GaugeAnnotation( widget:Row( + children: [ + Text('$_annotationValue', + style: TextStyle(fontSize: _annotationFontSize, + fontFamily: 'Times', fontWeight: FontWeight.bold, + color: const Color(0xFF00A8B5)), + ), + Text(' hr', style: TextStyle(fontSize: _annotationFontSize, + fontFamily: 'Times',fontWeight: FontWeight.bold, + color:const Color(0xFF00A8B5)),), + Text(' $_minutesValue', + style: TextStyle(fontSize: _annotationFontSize, + fontFamily: 'Times', fontWeight: FontWeight.bold, + color: const Color(0xFF00A8B5)), + ), + Text('m', style: TextStyle(fontSize: _annotationFontSize, + fontFamily: 'Times',fontWeight: FontWeight.bold, + color:const Color(0xFF00A8B5)),) + ], + ), + positionFactor: 0.1, angle: 0 + )] + ) + ] + ), + )); + }); + } + + void onFirstPointerValueChanged(double value){ + setState(() { + _firstMarkerValue = value; + final int _value = (_firstMarkerValue - _secondMarkerValue).abs().toInt(); + final String _hourValue = '$_value'; + _annotationValue = _hourValue .length == 1 ? '0' + _hourValue : + _hourValue; + _calculateMinutes(_value); + }); + } + + void onFirstPointerValueChanging(ValueChangingArgs args){ + if(args.value >= _secondMarkerValue || + (args.value - _firstMarkerValue).abs() >1){ + if(args.value >= _secondMarkerValue){ + if((args.value - _firstMarkerValue).abs() >1){ + args.cancel = true; + }else{ + _firstMarkerValue = _secondMarkerValue; + _secondMarkerValue = args.value; + } + }else{ + args.cancel = true; + } + + } + } + + void onSecondPointerValueChanging(ValueChangingArgs args){ + if(args.value <= _firstMarkerValue || + (args.value - _secondMarkerValue).abs() >1){ + if(args.value <= _firstMarkerValue){ + if((args.value - _secondMarkerValue).abs() >1){ + args.cancel = true; + }else{ + _secondMarkerValue = _firstMarkerValue; + _firstMarkerValue = args.value; + } + }else{ + args.cancel = true; + } + } + } + + void onSecondPointerValueChanged(double value){ + setState(() { + _secondMarkerValue = value; + final int _value = (_firstMarkerValue - _secondMarkerValue).abs().toInt(); + final String _hourValue = '$_value'; + _annotationValue = _hourValue .length == 1 ? '0' + _hourValue : + _hourValue; + _calculateMinutes(_value); + }); + } + + void _calculateMinutes(int _value){ + final double _minutes = (_firstMarkerValue + - _secondMarkerValue).abs() - _value; + final List _minsList = _minutes.toStringAsFixed(2).split('.'); + double _currentMinutes = double.parse(_minsList[1]); + _currentMinutes = _currentMinutes > 60 ? _currentMinutes - 60 : _currentMinutes; + final String _actualValue = _currentMinutes.toInt().toString(); + _minutesValue =_actualValue.length == 1 ? '0'+ _actualValue : _actualValue; + + } +} + + + +class BackPanel extends StatefulWidget { + //ignore:prefer_const_constructors_in_immutables + BackPanel(this.sample); + final SubItem sample; + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + _BackPanelState(this.sample); + final SubItem sample; + final GlobalKey _globalKey = GlobalKey(); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + void _afterLayout(dynamic _) { + _getSizesAndPosition(); + } + + void _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final Size size = renderBoxRed.size; + final Offset position = renderBoxRed.localToGlobal(Offset.zero); + const double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (BuildContext context, _, SampleModel model) { + return Container( + color: model.backgroundColor, + child: Padding( + padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), + child: Column( + mainAxisAlignment: MainAxisAlignment.start, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + Text( + sample.title, + textAlign: TextAlign.left, + style: const TextStyle( + fontWeight: FontWeight.bold, + fontSize: 28.0, + color: Colors.white, + letterSpacing: 0.53), + ), + Padding( + key: _globalKey, + padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), + child: Text( + sample.description, + style: const TextStyle( + fontWeight: FontWeight.normal, + fontSize: 15.0, + color: Colors.white, + letterSpacing: 0.3, + height: 1.5), + ), + ), + ], + ), + ), + ); + }, + ); + } +} + +Widget getRadialSlider(bool isTileView) { + + return SfRadialGauge( + axes: [ + RadialAxis( axisLineStyle: AxisLineStyle(thickness: 0.06, + + thicknessUnit: GaugeSizeUnit.factor), + + minorTicksPerInterval: 4, + showFirstLabel: false, + minimum: 0, + maximum: 12, interval: 1, + startAngle: 270, endAngle: 270, + pointers: [ + MarkerPointer(value: 2, + borderColor: const Color(0xFFFFCD60), + borderWidth:3, color: Colors.white, + markerHeight: 15, + markerWidth: 15, markerType: MarkerType.circle, + ), + MarkerPointer(value: 8, + + color: Colors.white, + borderColor: const Color(0xFFFFCD60), + markerHeight: 15, borderWidth: 3, + markerWidth:15, markerType: MarkerType.circle, + ), + + ], + ranges: [GaugeRange(endValue: _secondMarkerValue, + sizeUnit: GaugeSizeUnit.factor, + startValue: _firstMarkerValue, startWidth : 0.06, + endWidth: 0.06)], + annotations:[ + GaugeAnnotation( widget: const Text('6 hr 40 m', style: TextStyle(fontSize: 18, + fontFamily: 'Times',fontWeight: FontWeight.bold, + color: Color(0xFF00A8B5)),), + positionFactor: 0.05, angle: 0 + )] + ) + ] + ); + + +} + +double _borderWidth = 5; +double _firstMarkerValue = 2; +double _secondMarkerValue = 8; +double _markerSize = 25; +double _annotationFontSize = 25; +double _thickness =0.06; +String _annotationValue ='6'; +String _minutesValue ='40'; \ No newline at end of file diff --git a/lib/samples/gauge/pointers/multiple_needle.dart b/lib/samples/gauge/pointers/multiple_needle.dart index b4988ca9..486700d9 100644 --- a/lib/samples/gauge/pointers/multiple_needle.dart +++ b/lib/samples/gauge/pointers/multiple_needle.dart @@ -1,252 +1,96 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class MultipleNeedleExample extends StatefulWidget { - const MultipleNeedleExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + MultipleNeedleExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _MultipleNeedleExampleState createState() => _MultipleNeedleExampleState(sample); + _MultipleNeedleExampleState createState() => + _MultipleNeedleExampleState(sample); } class _MultipleNeedleExampleState extends State { _MultipleNeedleExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(MultipleNeedleExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/multiple_needle.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getMultipleNeedleExample(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getMultipleNeedleExample(false), sample); } } SfRadialGauge getMultipleNeedleExample(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis(showAxisLine: false, - radiusFactor: 0.5, - startAngle: 270, - endAngle: 270, - minimum: 0, - maximum: 60, - showFirstLabel: false, - interval: 5, labelOffset: 10, - minorTicksPerInterval: 5, - axisLabelStyle: GaugeTextStyle(fontSize: 10), - onLabelCreated: mainAxisLabelCreated, - minorTickStyle: MinorTickStyle( - lengthUnit: GaugeSizeUnit.factor, - length: 0.03, thickness: 1), - majorTickStyle: MajorTickStyle( - lengthUnit: GaugeSizeUnit.factor, - length: 0.1) - ), - RadialAxis(axisLineStyle: AxisLineStyle(thicknessUnit: GaugeSizeUnit.factor, - thickness: 0.08, color:const Color(0xFFFFCD60) - ), + RadialAxis( + showAxisLine: false, + radiusFactor: 0.5, + startAngle: 270, + endAngle: 270, + minimum: 0, + maximum: 60, + showFirstLabel: false, + interval: 5, + labelOffset: 10, + minorTicksPerInterval: 5, + axisLabelStyle: GaugeTextStyle(fontSize: 10), + onLabelCreated: mainAxisLabelCreated, + minorTickStyle: MinorTickStyle( + lengthUnit: GaugeSizeUnit.factor, length: 0.03, thickness: 1), + majorTickStyle: + MajorTickStyle(lengthUnit: GaugeSizeUnit.factor, length: 0.1)), + RadialAxis( + axisLineStyle: AxisLineStyle( + thicknessUnit: GaugeSizeUnit.factor, + thickness: 0.08, + color: const Color(0xFFFFCD60)), startAngle: 270, endAngle: 270, minimum: 0, - maximum: 12, radiusFactor: 0.9, + maximum: 12, + radiusFactor: 0.9, showFirstLabel: false, - interval: 1, labelOffset: 10, + interval: 1, + labelOffset: 10, axisLabelStyle: GaugeTextStyle(fontSize: isTileView ? 10 : 12), minorTicksPerInterval: 5, onLabelCreated: mainAxisLabelCreated, minorTickStyle: MinorTickStyle( - lengthUnit: GaugeSizeUnit.factor, - length: 0.05, thickness: 1), - majorTickStyle: MajorTickStyle( - lengthUnit: GaugeSizeUnit.factor, - length: 0.1), + lengthUnit: GaugeSizeUnit.factor, length: 0.05, thickness: 1), + majorTickStyle: + MajorTickStyle(lengthUnit: GaugeSizeUnit.factor, length: 0.1), pointers: [ - - NeedlePointer(value: 8, needleLength: 0.35, needleColor: const Color(0xFFF67280), + NeedlePointer( + value: 8, + needleLength: 0.35, + needleColor: const Color(0xFFF67280), lengthUnit: GaugeSizeUnit.factor, - needleStartWidth: 0, needleEndWidth: isTileView ? 3 : 5, enableAnimation: true, + needleStartWidth: 0, + needleEndWidth: isTileView ? 3 : 5, + enableAnimation: true, knobStyle: KnobStyle(knobRadius: 0), animationType: AnimationType.ease), - NeedlePointer(value: 3, needleLength: 0.85, - lengthUnit: GaugeSizeUnit.factor, + NeedlePointer( + value: 3, + needleLength: 0.85, + lengthUnit: GaugeSizeUnit.factor, needleColor: const Color(0xFFF67280), - needleStartWidth: 0, needleEndWidth: isTileView ? 3 : 5, enableAnimation: true, + needleStartWidth: 0, + needleEndWidth: isTileView ? 3 : 5, + enableAnimation: true, animationType: AnimationType.ease, - knobStyle: KnobStyle( borderColor: const Color(0xFFF67280), - borderWidth: 0.015, color: Colors.white, + knobStyle: KnobStyle( + borderColor: const Color(0xFFF67280), + borderWidth: 0.015, + color: Colors.white, sizeUnit: GaugeSizeUnit.factor, knobRadius: isTileView ? 0.04 : 0.05)), - ] - ), - - + ]), ], ); } @@ -256,7 +100,3 @@ void mainAxisLabelCreated(AxisLabelCreatedArgs args) { args.text = '12h'; } } - - - - diff --git a/lib/samples/gauge/pointers/multiple_ranges.dart b/lib/samples/gauge/pointers/multiple_ranges.dart index fb04098d..c60c42b7 100644 --- a/lib/samples/gauge/pointers/multiple_ranges.dart +++ b/lib/samples/gauge/pointers/multiple_ranges.dart @@ -1,13 +1,13 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class MultipleRangePointerExample extends StatefulWidget { - const MultipleRangePointerExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + MultipleRangePointerExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override _MultipleRangePointerExampleState createState() => _MultipleRangePointerExampleState(sample); @@ -15,178 +15,14 @@ class MultipleRangePointerExample extends StatefulWidget { class _MultipleRangePointerExampleState extends State { _MultipleRangePointerExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(MultipleRangePointerExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - + final SubItem sample; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/multiple_ranges.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(getMultipleRangePointerExampleGauge(false), sample); } } -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getMultipleRangePointerExampleGauge(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} SfRadialGauge getMultipleRangePointerExampleGauge(bool isTileView) { return SfRadialGauge( @@ -200,7 +36,7 @@ SfRadialGauge getMultipleRangePointerExampleGauge(bool isTileView) { thickness: 0.15), annotations: [GaugeAnnotation(angle: 180, widget: Row(children: [Container( - child: Text('50', style: TextStyle(color: const Color(0xFF00A8B5), + child: Text('50', style: TextStyle( fontFamily: 'Times', fontSize: isTileView ? 18 : 22, fontWeight: FontWeight.w400, fontStyle: FontStyle.italic ),), @@ -214,6 +50,10 @@ SfRadialGauge getMultipleRangePointerExampleGauge(bool isTileView) { pointers:[RangePointer(value: 50, cornerStyle: CornerStyle.bothCurve, enableAnimation: true, animationDuration: 1200, animationType: AnimationType.ease, sizeUnit: GaugeSizeUnit.factor, + gradient: const SweepGradient( + colors:[Color(0xFF6A6EF6), Color(0xFFDB82F5)], + stops: [0.25, 0.75] + ), color: const Color(0xFF00A8B5), width: 0.15), ] ), diff --git a/lib/samples/gauge/pointers/radial_marker.dart b/lib/samples/gauge/pointers/radial_marker.dart index ffc4f5e0..68d7765f 100644 --- a/lib/samples/gauge/pointers/radial_marker.dart +++ b/lib/samples/gauge/pointers/radial_marker.dart @@ -1,13 +1,13 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class RadialMarkerExample extends StatefulWidget { - const RadialMarkerExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialMarkerExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RadialMarkerExampleState createState() => _RadialMarkerExampleState(sample); @@ -15,225 +15,74 @@ class RadialMarkerExample extends StatefulWidget { class _RadialMarkerExampleState extends State { _RadialMarkerExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialMarkerExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/radial_marker.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialMarkerExample(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialMarkerExample(false), sample); } } SfRadialGauge getRadialMarkerExample(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis(startAngle: 180, endAngle: 360, - radiusFactor: 0.9, centerY: 0.6, interval: 10, - showLabels: false, showAxisLine: false, - pointers: [MarkerPointer(value: 70, - markerWidth: 20, markerHeight: 20, - color: const Color(0xFFF67280), - markerType: MarkerType.invertedTriangle, - markerOffset: -7 - )], - annotations: [GaugeAnnotation( - angle: 175, positionFactor: 0.8 , - widget: Container(child: - Text('Min', style:TextStyle(fontSize: isTileView ? 12 : 16, - fontWeight: FontWeight.bold - ))) - ),GaugeAnnotation( - angle: 270, positionFactor: 0.1 , - widget: Container(child: - Text('70%', style:TextStyle(fontSize: isTileView ? 12 : 16, - fontWeight: FontWeight.bold - ))) - ), + RadialAxis( + startAngle: 180, + endAngle: 360, + radiusFactor: 0.9, + centerY: 0.6, + interval: 10, + showLabels: false, + showAxisLine: false, + pointers: [ + MarkerPointer( + value: 70, + markerWidth: 20, + markerHeight: 20, + color: const Color(0xFFF67280), + markerType: MarkerType.invertedTriangle, + markerOffset: -7) + ], + annotations: [ GaugeAnnotation( - angle: 5, positionFactor: 0.8 , - widget: Container(child: - Text('Max', style:TextStyle(fontSize: isTileView ? 12 : 16, - fontWeight: FontWeight.bold - ))) + angle: 175, + positionFactor: 0.8, + widget: Container( + child: Text('Min', + style: TextStyle( + fontSize: isTileView ? 12 : 16, + fontWeight: FontWeight.bold)))), + GaugeAnnotation( + angle: 270, + positionFactor: 0.1, + widget: Container( + child: Text('70%', + style: TextStyle( + fontSize: isTileView ? 12 : 16, + fontWeight: FontWeight.bold)))), + GaugeAnnotation( + angle: 5, + positionFactor: 0.8, + widget: Container( + child: Text('Max', + style: TextStyle( + fontSize: isTileView ? 12 : 16, + fontWeight: FontWeight.bold)))) + ], + ranges: [ + GaugeRange( + startValue: 0, + endValue: 100, + sizeUnit: GaugeSizeUnit.factor, + gradient: const SweepGradient( + colors: [Color(0xFFAB64F5), Color(0xFF62DBF6)], + stops: [0.25, 0.75]), + startWidth: 0.4, + endWidth: 0.4, + color: const Color(0xFF00A8B5), ) ], - ranges: [GaugeRange(startValue: 0, endValue: 100, - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.4, endWidth: 0.4, - color: const Color(0xFF00A8B5), - )], showTicks: false), ], ); } - - - - -// void _valueChanged(ValueChangedArgs args){ - -// } diff --git a/lib/samples/gauge/pointers/text_pointer.dart b/lib/samples/gauge/pointers/text_pointer.dart index d68e9cfc..802d37a0 100644 --- a/lib/samples/gauge/pointers/text_pointer.dart +++ b/lib/samples/gauge/pointers/text_pointer.dart @@ -1,13 +1,13 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class RadialTextPointer extends StatefulWidget { - const RadialTextPointer(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RadialTextPointer({this.sample, Key key}) : super(key: key); + SubItem sample; @override _RadialTextPointerState createState() => _RadialTextPointerState(sample); @@ -15,242 +15,123 @@ class RadialTextPointer extends StatefulWidget { class _RadialTextPointerState extends State { _RadialTextPointerState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RadialTextPointer oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/pointers/text_pointer.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRadialTextPointer(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRadialTextPointer(false), sample); } } SfRadialGauge getRadialTextPointer(bool isTileView) { return SfRadialGauge( - axes:[ - RadialAxis(showAxisLine:false,showLabels:false,showTicks:false, - startAngle:180,endAngle:360,minimum:0,maximum:120, - centerY:0.65, radiusFactor: 0.79, - pointers: [NeedlePointer(needleStartWidth:1, - lengthUnit: GaugeSizeUnit.factor, - needleEndWidth:5,needleLength:0.7, value: 82, - knobStyle:KnobStyle(knobRadius:0)),], - - ranges:[ - GaugeRange(startValue:0,endValue:20,startWidth:0.45,endWidth:0.45, + axes: [ + RadialAxis( + showAxisLine: false, + showLabels: false, + showTicks: false, + startAngle: 180, + endAngle: 360, + minimum: 0, + maximum: 120, + centerY: 0.65, + radiusFactor: 0.79, + pointers: [ + NeedlePointer( + needleStartWidth: 1, + lengthUnit: GaugeSizeUnit.factor, + needleEndWidth: 5, + needleLength: 0.7, + value: 82, + knobStyle: KnobStyle(knobRadius: 0)), + ], + ranges: [ + GaugeRange( + startValue: 0, + endValue: 20, + startWidth: 0.45, + endWidth: 0.45, sizeUnit: GaugeSizeUnit.factor, - color:const Color(0xFFDD3800)), - GaugeRange(startValue:20.5,endValue:40,startWidth:0.45, + color: const Color(0xFFDD3800)), + GaugeRange( + startValue: 20.5, + endValue: 40, + startWidth: 0.45, sizeUnit: GaugeSizeUnit.factor, - endWidth:0.45,color:const Color(0xFFFF4100)), - GaugeRange(startValue:40.5,endValue:60,startWidth:0.45, + endWidth: 0.45, + color: const Color(0xFFFF4100)), + GaugeRange( + startValue: 40.5, + endValue: 60, + startWidth: 0.45, sizeUnit: GaugeSizeUnit.factor, - endWidth:0.45,color:const Color(0xFFFFBA00)), - GaugeRange(startValue:60.5,endValue:80,startWidth:0.45, + endWidth: 0.45, + color: const Color(0xFFFFBA00)), + GaugeRange( + startValue: 60.5, + endValue: 80, + startWidth: 0.45, sizeUnit: GaugeSizeUnit.factor, - endWidth:0.45,color:const Color(0xFFFFDF10)), - GaugeRange(startValue:80.5,endValue:100, sizeUnit: GaugeSizeUnit.factor, - startWidth:0.45,endWidth:0.45,color:const Color(0xFF8BE724)), - GaugeRange(startValue:100.5,endValue:120,startWidth:0.45,endWidth:0.45, + endWidth: 0.45, + color: const Color(0xFFFFDF10)), + GaugeRange( + startValue: 80.5, + endValue: 100, + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.45, + endWidth: 0.45, + color: const Color(0xFF8BE724)), + GaugeRange( + startValue: 100.5, + endValue: 120, + startWidth: 0.45, + endWidth: 0.45, sizeUnit: GaugeSizeUnit.factor, color: const Color(0xFF64BE00)), - - - ] - ), - RadialAxis(showAxisLine:false,showLabels:false,showTicks:false, - startAngle:180,endAngle:360,minimum:0,maximum:120, radiusFactor: 0.85, centerY:0.65, - pointers:[ - MarkerPointer(markerType: MarkerType.text, text: 'Poor', value: 20.5, - textStyle: GaugeTextStyle(fontWeight: - FontWeight.bold, fontSize: isTileView ? 14 : 18, + ]), + RadialAxis( + showAxisLine: false, + showLabels: false, + showTicks: false, + startAngle: 180, + endAngle: 360, + minimum: 0, + maximum: 120, + radiusFactor: 0.85, + centerY: 0.65, + pointers: [ + MarkerPointer( + markerType: MarkerType.text, + text: 'Poor', + value: 20.5, + textStyle: GaugeTextStyle( + fontWeight: FontWeight.bold, + fontSize: isTileView ? 14 : 18, fontFamily: 'Times'), offsetUnit: GaugeSizeUnit.factor, markerOffset: -0.12), - MarkerPointer(markerType: MarkerType.text, text: 'Average', value: 60.5, - textStyle: GaugeTextStyle(fontWeight: - FontWeight.bold, fontSize: isTileView ? 14 : 18, + MarkerPointer( + markerType: MarkerType.text, + text: 'Average', + value: 60.5, + textStyle: GaugeTextStyle( + fontWeight: FontWeight.bold, + fontSize: isTileView ? 14 : 18, fontFamily: 'Times'), offsetUnit: GaugeSizeUnit.factor, markerOffset: -0.12), - MarkerPointer(markerType: MarkerType.text, text: 'Good', value: 100.5, - textStyle: GaugeTextStyle(fontWeight: - FontWeight.bold, fontSize: isTileView ? 14 : 18, - fontFamily: 'Times'), + MarkerPointer( + markerType: MarkerType.text, + text: 'Good', + value: 100.5, + textStyle: GaugeTextStyle( + fontWeight: FontWeight.bold, + fontSize: isTileView ? 14 : 18, + fontFamily: 'Times'), offsetUnit: GaugeSizeUnit.factor, markerOffset: -0.12) ], - ), - ], ); } - - - - - diff --git a/lib/samples/gauge/ranges/multiple_ranges.dart b/lib/samples/gauge/ranges/multiple_ranges.dart index 0797008e..090e20f7 100644 --- a/lib/samples/gauge/ranges/multiple_ranges.dart +++ b/lib/samples/gauge/ranges/multiple_ranges.dart @@ -1,13 +1,13 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class MultipleRangesExample extends StatefulWidget { - const MultipleRangesExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + MultipleRangesExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override _MultipleRangesExampleState createState() => _MultipleRangesExampleState(sample); @@ -15,212 +15,75 @@ class MultipleRangesExample extends StatefulWidget { class _MultipleRangesExampleState extends State { _MultipleRangesExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(MultipleRangesExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/multiple_ranges.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; - - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} + final SubItem sample; + -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; @override Widget build(BuildContext context) { - setState((){ - _endWidth = MediaQuery.of(context).orientation == Orientation.portrait ? 10 : 6; - }); - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getMultipleRangesExampleGauge(false)), - )); - }); + return getScopedModel(getMultipleRangesExampleGauge(false), sample); } } -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getMultipleRangesExampleGauge(bool isTileView) { +Widget getMultipleRangesExampleGauge(bool isTileView) { + return LayoutBuilder( + builder: (BuildContext context, BoxConstraints constraints) { return SfRadialGauge( axes: [ - RadialAxis(showAxisLine: false, showLabels: false, showTicks: false, - startAngle: 180, endAngle: 360, minimum: 0, maximum: 80, - centerY: 0.7, radiusFactor: 0.95, - pointers:[NeedlePointer(needleStartWidth:1, value: 30, - needleEndWidth: isTileView ? 5 : _endWidth,needleLength:0.7, lengthUnit: GaugeSizeUnit.factor, - knobStyle:KnobStyle(knobRadius: 0.08, sizeUnit: GaugeSizeUnit.factor, - ))], + RadialAxis(showAxisLine: false, + showLabels: false, + showTicks: false, + startAngle: 180, + endAngle: 360, + minimum: 0, + maximum: 80, + centerY: 0.7, + radiusFactor: 0.95, + pointers: [ + NeedlePointer(needleStartWidth: 1, + value: 30, + needleEndWidth: isTileView ? 5 : MediaQuery.of(context).orientation + == Orientation.portrait ? 10 : 6, + needleLength: 0.7, + lengthUnit: GaugeSizeUnit.factor, + knobStyle: KnobStyle( + knobRadius: 0.08, sizeUnit: GaugeSizeUnit.factor, + )) + ], ranges: [ - GaugeRange(startValue: 0, endValue: 18, sizeUnit: GaugeSizeUnit.factor, - startWidth: 0, endWidth: 0.1, color: const Color(0xFFA8AAE2) ), - GaugeRange(startValue: 20, endValue: 38, startWidth: 0.1, sizeUnit: GaugeSizeUnit.factor, - endWidth: 0.15, color: const Color.fromRGBO(168, 170, 226, 1)), - GaugeRange(startValue: 40, endValue: 58 ,startWidth: 0.15, + GaugeRange(startValue: 0, + endValue: 18, + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0, + endWidth: 0.1, + color: const Color(0xFFA8AAE2)), + GaugeRange(startValue: 20, + endValue: 38, + startWidth: 0.1, + sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.15, + color: const Color.fromRGBO(168, 170, 226, 1)), + GaugeRange(startValue: 40, + endValue: 58, + startWidth: 0.15, sizeUnit: GaugeSizeUnit.factor, - endWidth: 0.2, color: const Color(0xFF7B7DC7)), - GaugeRange(startValue: 60, endValue: 78, startWidth: 0.2, + endWidth: 0.2, + color: const Color(0xFF7B7DC7)), + GaugeRange(startValue: 60, + endValue: 78, + startWidth: 0.2, sizeUnit: GaugeSizeUnit.factor, - endWidth: 0.25, color: const Color.fromRGBO(73, 76, 162, 1)), + endWidth: 0.25, + color: const Color.fromRGBO(73, 76, 162, 1)), ] ), ], ); +}); } -double _endWidth = 10; diff --git a/lib/samples/gauge/ranges/range_datalabels.dart b/lib/samples/gauge/ranges/range_datalabels.dart new file mode 100644 index 00000000..26c44d29 --- /dev/null +++ b/lib/samples/gauge/ranges/range_datalabels.dart @@ -0,0 +1,94 @@ +import 'package:syncfusion_flutter_gauges/gauges.dart'; +import 'package:flutter/material.dart'; + +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable +class RangeDataLabelExample extends StatefulWidget { + RangeDataLabelExample({this.sample, Key key}) : super(key: key); + SubItem sample; + + @override + _RangeDataLabelExampleState createState() => + _RangeDataLabelExampleState(sample); +} + +class _RangeDataLabelExampleState extends State { + _RangeDataLabelExampleState(this.sample); + final SubItem sample; + + @override + Widget build(BuildContext context) { + return getScopedModel(getRangeDataLabelExample(false), sample); + } +} + +SfRadialGauge getRangeDataLabelExample(bool isTileView) { + return SfRadialGauge( + axes: [ + RadialAxis( + showLabels: false, + showAxisLine: false, + showTicks: false, + minimum: 0, + maximum: 99, + radiusFactor: 0.9, + ranges: [ + GaugeRange( + startValue: 0, + endValue: 33, + color: const Color(0xFFFE2A25), + label: 'Slow', + sizeUnit: GaugeSizeUnit.factor, + labelStyle: GaugeTextStyle( + fontFamily: 'Times', fontSize: isTileView ? 16 : 20), + startWidth: 0.65, + endWidth: 0.65), + GaugeRange( + startValue: 33, + endValue: 66, + color: const Color(0xFFFFBA00), + label: 'Moderate', + labelStyle: GaugeTextStyle( + fontFamily: 'Times', fontSize: isTileView ? 16 : 20), + startWidth: 0.65, + endWidth: 0.65, + sizeUnit: GaugeSizeUnit.factor, + ), + GaugeRange( + startValue: 66, + endValue: 99, + color: const Color(0xFF00AB47), + label: 'Fast', + labelStyle: GaugeTextStyle( + fontFamily: 'Times', fontSize: isTileView ? 16 : 20), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.65, + endWidth: 0.65, + ), + GaugeRange( + startValue: 0, + endValue: 99, + color: const Color.fromRGBO(155, 155, 155, 0.3), + rangeOffset: 0.5, + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.15, + endWidth: 0.15, + ), + ], + pointers: [ + NeedlePointer( + value: 60, + needleLength: 0.7, + lengthUnit: GaugeSizeUnit.factor, + needleStartWidth: 1, + needleEndWidth: 10, + knobStyle: KnobStyle( + knobRadius: 12, + sizeUnit: GaugeSizeUnit.logicalPixel, + )) + ]) + ], + ); +} diff --git a/lib/samples/gauge/ranges/range_thickness.dart b/lib/samples/gauge/ranges/range_thickness.dart index 9a181fdd..af758e07 100644 --- a/lib/samples/gauge/ranges/range_thickness.dart +++ b/lib/samples/gauge/ranges/range_thickness.dart @@ -1,224 +1,83 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class RangeThicknessExample extends StatefulWidget { - const RangeThicknessExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + RangeThicknessExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _RangeThicknessExampleState createState() => _RangeThicknessExampleState(sample); + _RangeThicknessExampleState createState() => + _RangeThicknessExampleState(sample); } class _RangeThicknessExampleState extends State { _RangeThicknessExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(RangeThicknessExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/range_thickness.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); - } -} - -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem sample; - @override - _FrontPanelState createState() => _FrontPanelState(subItemList); -} - -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRangeThicknessExampleGauge(false)), - )); - }); - } -} - -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - - @override - _BackPanelState createState() => _BackPanelState(sample); -} - -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); + return getScopedModel(getRangeThicknessExampleGauge(false), sample); } } SfRadialGauge getRangeThicknessExampleGauge(bool isTileView) { return SfRadialGauge( axes: [ - RadialAxis(showAxisLine: false, - minimum: 0, maximum: 100, ticksPosition: ElementsPosition.outside, + RadialAxis( + showAxisLine: false, + minimum: 0, + maximum: 100, + ticksPosition: ElementsPosition.outside, labelsPosition: ElementsPosition.outside, - radiusFactor: 0.9, needsRotateLabels: true, - majorTickStyle: MajorTickStyle(length: 0.1, - thickness: 1.5, lengthUnit: GaugeSizeUnit.factor,), - minorTickStyle: MinorTickStyle(length: 0.04, thickness: 1.5, - lengthUnit: GaugeSizeUnit.factor,), - minorTicksPerInterval: 5, interval: 10, labelOffset: 15, - axisLabelStyle: GaugeTextStyle(fontSize: 12), useRangeColorForAxis: true, - pointers:[NeedlePointer( - needleStartWidth:1, enableAnimation: true, value: 70, - tailStyle: TailStyle(length: 0.2, width: 5, lengthUnit: GaugeSizeUnit.factor), - needleEndWidth: 5,needleLength:0.7, lengthUnit: GaugeSizeUnit.factor, - knobStyle:KnobStyle(knobRadius:0.08, sizeUnit: GaugeSizeUnit.factor, - ))], + radiusFactor: 0.9, + needsRotateLabels: true, + majorTickStyle: MajorTickStyle( + length: 0.1, + thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, + ), + minorTickStyle: MinorTickStyle( + length: 0.04, + thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, + ), + minorTicksPerInterval: 5, + interval: 10, + labelOffset: 15, + axisLabelStyle: GaugeTextStyle(fontSize: 12), + useRangeColorForAxis: true, + pointers: [ + NeedlePointer( + needleStartWidth: 1, + enableAnimation: true, + value: 70, + tailStyle: TailStyle( + length: 0.2, width: 5, lengthUnit: GaugeSizeUnit.factor), + needleEndWidth: 5, + needleLength: 0.7, + lengthUnit: GaugeSizeUnit.factor, + knobStyle: KnobStyle( + knobRadius: 0.08, + sizeUnit: GaugeSizeUnit.factor, + )) + ], ranges: [ - GaugeRange(startValue: 30, endValue: 100, startWidth: 0.05, - color : const Color(0xFF00A8B5), rangeOffset: 0.08, - endWidth: 0.2, sizeUnit: GaugeSizeUnit.factor) - ] - ), - + GaugeRange( + startValue: 30, + endValue: 100, + startWidth: 0.05, + gradient: const SweepGradient( + colors: [Color(0xFF289AB1), Color(0xFF43E695)], + stops: [0.25, 0.75]), + color: const Color(0xFF289AB1), + rangeOffset: 0.08, + endWidth: 0.2, + sizeUnit: GaugeSizeUnit.factor) + ]), ], ); } - - - - - diff --git a/lib/samples/gauge/showcase/clock_sample.dart b/lib/samples/gauge/showcase/clock_sample.dart index f7980c2d..c517e80c 100644 --- a/lib/samples/gauge/showcase/clock_sample.dart +++ b/lib/samples/gauge/showcase/clock_sample.dart @@ -1,14 +1,15 @@ import 'dart:async'; +import 'package:scoped_model/scoped_model.dart'; import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; -import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class ClockExample extends StatefulWidget { - const ClockExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + ClockExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override _ClockExampleState createState() => _ClockExampleState(sample); @@ -16,87 +17,27 @@ class ClockExample extends StatefulWidget { class _ClockExampleState extends State { _ClockExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(ClockExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/showcase/clock_sample.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, ClockExampleFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; +class ClockExampleFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + ClockExampleFrontPanel(this.sampleList); + final SubItem sampleList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _ClockExampleFrontPanelState createState() => _ClockExampleFrontPanelState(sampleList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _ClockExampleFrontPanelState extends State { + _ClockExampleFrontPanelState(this.sample); + final SubItem sample; + bool isIndexed = true; Timer timer; @override @@ -124,107 +65,33 @@ class _FrontPanelState extends State { timer.cancel(); } - @override Widget build(BuildContext context) { setState((){ _centerX = MediaQuery.of(context).orientation == Orientation.portrait ? 0.3 : 0.45; }); - - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getClockExample(false)), - )); + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getClockExample(false, isIndexed)), + ), + ); }); } -} -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); } -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getClockExample(bool isTileView) { +SfRadialGauge getClockExample(bool isTileView, [bool isIndexed]) { return SfRadialGauge( axes: [ - RadialAxis(startAngle: 270, + RadialAxis( + startAngle: 270, endAngle: 270, radiusFactor: 0.2, axisLabelStyle: GaugeTextStyle(fontSize: 6), @@ -238,28 +105,30 @@ SfRadialGauge getClockExample(bool isTileView) { minorTicksPerInterval: 5, labelOffset: 0.2, minorTickStyle: MinorTickStyle( - length: 0.09, lengthUnit: GaugeSizeUnit.factor, - thickness: 0.5), - majorTickStyle: MajorTickStyle(length: 0.15, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1), + length: 0.09, lengthUnit: GaugeSizeUnit.factor, thickness: 0.5), + majorTickStyle: MajorTickStyle( + length: 0.15, lengthUnit: GaugeSizeUnit.factor, thickness: 1), axisLineStyle: AxisLineStyle( - thickness: 0.03, thicknessUnit: GaugeSizeUnit.factor - ), + thickness: 0.03, thicknessUnit: GaugeSizeUnit.factor), pointers: [ - NeedlePointer(value: 5, + NeedlePointer( + value: 5, needleLength: 0.7, lengthUnit: GaugeSizeUnit.factor, needleColor: const Color(0xFF00A8B5), needleStartWidth: 0.5, needleEndWidth: 1, - knobStyle: KnobStyle(knobRadius: 0,), + knobStyle: KnobStyle( + knobRadius: 0, + ), ) - ] - ), - RadialAxis(startAngle: 270, + ]), + RadialAxis( + startAngle: 270, endAngle: 270, - axisLabelStyle: GaugeTextStyle(fontSize: 6,), + axisLabelStyle: GaugeTextStyle( + fontSize: 6, + ), radiusFactor: 0.2, labelOffset: 0.2, offsetUnit: GaugeSizeUnit.factor, @@ -270,18 +139,18 @@ SfRadialGauge getClockExample(bool isTileView) { centerX: isTileView ? 0.39 : _centerX, minorTicksPerInterval: 5, tickOffset: 0.03, - minorTickStyle: MinorTickStyle(length: 0.09, - lengthUnit: GaugeSizeUnit.factor, - thickness: 0.5), - majorTickStyle: MajorTickStyle(length: 0.15, + minorTickStyle: MinorTickStyle( + length: 0.09, lengthUnit: GaugeSizeUnit.factor, thickness: 0.5), + majorTickStyle: MajorTickStyle( + length: 0.15, lengthUnit: GaugeSizeUnit.factor, - thickness: 1,), - axisLineStyle: AxisLineStyle( - thicknessUnit: GaugeSizeUnit.factor, - thickness: 0.03 + thickness: 1, ), + axisLineStyle: AxisLineStyle( + thicknessUnit: GaugeSizeUnit.factor, thickness: 0.03), pointers: [ - NeedlePointer(value: 8, + NeedlePointer( + value: 8, needleLength: 0.7, lengthUnit: GaugeSizeUnit.factor, needleColor: const Color(0xFF00A8B5), @@ -289,9 +158,9 @@ SfRadialGauge getClockExample(bool isTileView) { needleEndWidth: 1, knobStyle: KnobStyle(knobRadius: 0), ) - ] - ), - RadialAxis(startAngle: 270, + ]), + RadialAxis( + startAngle: 270, endAngle: 270, minimum: 0, maximum: 12, @@ -302,38 +171,35 @@ SfRadialGauge getClockExample(bool isTileView) { offsetUnit: GaugeSizeUnit.factor, minorTicksPerInterval: 4, tickOffset: 0.03, - minorTickStyle: MinorTickStyle(length: 0.06, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1), - majorTickStyle: MajorTickStyle(length: 0.1, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1.5), + minorTickStyle: MinorTickStyle( + length: 0.06, lengthUnit: GaugeSizeUnit.factor, thickness: 1), + majorTickStyle: MajorTickStyle( + length: 0.1, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), axisLabelStyle: GaugeTextStyle(fontSize: isTileView ? 12 : 14), axisLineStyle: AxisLineStyle( - thickness: 0.01, thicknessUnit: GaugeSizeUnit.factor - ), + thickness: 0.01, thicknessUnit: GaugeSizeUnit.factor), pointers: [ - - - NeedlePointer(needleLength: 0.6, + NeedlePointer( + needleLength: 0.6, lengthUnit: GaugeSizeUnit.factor, needleStartWidth: 1, needleEndWidth: 2, value: 10, - needleColor: _needleColor, - knobStyle: KnobStyle(knobRadius: 0) - ), - NeedlePointer(needleLength: 0.85, + needleColor: _needleColor, + knobStyle: KnobStyle(knobRadius: 0)), + NeedlePointer( + needleLength: 0.85, lengthUnit: GaugeSizeUnit.factor, needleStartWidth: 0.5, needleEndWidth: 1.5, value: 2, - knobStyle: KnobStyle(color: const Color(0xFF00A8B5), + knobStyle: KnobStyle( + color: const Color(0xFF00A8B5), sizeUnit: GaugeSizeUnit.factor, knobRadius: 0.05), - needleColor: _needleColor - ), - NeedlePointer(needleLength: 0.9, + needleColor: _needleColor), + NeedlePointer( + needleLength: 0.9, lengthUnit: GaugeSizeUnit.factor, enableAnimation: true, animationType: AnimationType.bounceOut, @@ -341,15 +207,16 @@ SfRadialGauge getClockExample(bool isTileView) { needleEndWidth: 0.8, value: _value, needleColor: const Color(0xFF00A8B5), - tailStyle: TailStyle(width: 0.8, length: 0.2, + tailStyle: TailStyle( + width: 0.8, + length: 0.2, lengthUnit: GaugeSizeUnit.factor, color: const Color(0xFF00A8B5)), - knobStyle: KnobStyle(knobRadius: 0.03, + knobStyle: KnobStyle( + knobRadius: 0.03, sizeUnit: GaugeSizeUnit.factor, - color: Colors.white) - ), - ] - ), + color: Colors.white)), + ]), ], ); } @@ -357,8 +224,3 @@ SfRadialGauge getClockExample(bool isTileView) { double _value = 0; double _centerX = 0.3; Color _needleColor = const Color(0xFF355C7D); - - - - - diff --git a/lib/samples/gauge/showcase/distance_tracker.dart b/lib/samples/gauge/showcase/distance_tracker.dart index f77904c2..63d7464d 100644 --- a/lib/samples/gauge/showcase/distance_tracker.dart +++ b/lib/samples/gauge/showcase/distance_tracker.dart @@ -1,227 +1,113 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class DistanceTrackerExample extends StatefulWidget { - const DistanceTrackerExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + DistanceTrackerExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _DistanceTrackerExampleState createState() => _DistanceTrackerExampleState(sample); + _DistanceTrackerExampleState createState() => + _DistanceTrackerExampleState(sample); } class _DistanceTrackerExampleState extends State { _DistanceTrackerExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(DistanceTrackerExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/showcase/distance_tracker.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, DistanceTrackerExampleFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; +class DistanceTrackerExampleFrontPanel extends StatefulWidget { + //ignore: prefer_const_constructors_in_immutables + DistanceTrackerExampleFrontPanel(this.sampleList); + final SubItem sampleList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _DistanceTrackerExampleFrontPanelState createState() => _DistanceTrackerExampleFrontPanelState(sampleList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _DistanceTrackerExampleFrontPanelState extends State { + _DistanceTrackerExampleFrontPanelState(this.sample); + final SubItem sample; + bool isIndexed = true; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( + setState((){ + if(MediaQuery.of(context).orientation == Orientation.portrait){ + _markerValue = 138; + }else{ + _markerValue = 136; + } + }); + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getDistanceTrackerExample(false)), - )); + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container( + child: getDistanceTrackerExample(false, isIndexed)), + ), + ); }); } -} -class BackPanel extends StatefulWidget { - //ignore:prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); } -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getDistanceTrackerExample(bool isTileView) { +SfRadialGauge getDistanceTrackerExample(bool isTileView, [bool isIndexed]) { return SfRadialGauge( + enableLoadingAnimation: true, axes: [ RadialAxis(showLabels: false, showTicks: false, radiusFactor: 0.8, - minimum: 0, maximum: 240, + minimum: 0, maximum: 240, axisLineStyle:AxisLineStyle( cornerStyle: CornerStyle.startCurve, thickness: 5), - annotations: [GaugeAnnotation(angle: 90, positionFactor: 0, - widget: Column(children: [ Text('142', - style: TextStyle(fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, fontSize: isTileView ? 20 : 30 - )), - Padding(padding: const EdgeInsets.fromLTRB(0,2,0,0), - child: Text('km/h', - style: TextStyle(fontWeight: FontWeight.bold, - fontStyle: FontStyle.italic, fontSize: isTileView ? 12 : 14 - ),), - ) - ],) - ), - GaugeAnnotation(angle: 124, positionFactor: 1.1, widget: Container(child: Text('0', - style: TextStyle( fontSize: isTileView ? 12 : 14 - )),)), - GaugeAnnotation(angle: 54, positionFactor: 1.1, widget: Container(child: Text('240', - style: TextStyle( fontSize: isTileView ? 12 : 14 - )),)), - ], - pointers: [RangePointer(value: 142, - width: 17, pointerOffset: -2, enableAnimation: true, - cornerStyle: CornerStyle.bothCurve, - color: const Color(0xFFF67280), - )] + annotations: [GaugeAnnotation(angle: 90, positionFactor: 0, + widget: Column(children: [ Text('142', + style: TextStyle(fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, fontSize: isTileView ? 20 : 30 + )), + Padding(padding: const EdgeInsets.fromLTRB(0,2,0,0), + child: Text('km/h', + style: TextStyle(fontWeight: FontWeight.bold, + fontStyle: FontStyle.italic, fontSize: isTileView ? 12 : 14 + ),), + ) + ],) + ), + GaugeAnnotation(angle: 124, positionFactor: 1.1, widget: Container(child: Text('0', + style: TextStyle( fontSize: isTileView ? 12 : 14 + )),)), + GaugeAnnotation(angle: 54, positionFactor: 1.1, widget: Container(child: Text('240', + style: TextStyle( fontSize: isTileView ? 12 : 14 + )),)), + ], + pointers: [ + + RangePointer(value: 142, + width: 18, pointerOffset: -3, + cornerStyle: CornerStyle.bothCurve, + color: const Color(0xFFF67280), + gradient: const SweepGradient( + colors: [Color(0xFFFF7676), Color(0xFFF54EA2)], + stops: [0.25, 0.75] + ), + ),MarkerPointer(value: isTileView ? 136 : _markerValue, + color: Colors.white, markerType: MarkerType.circle, ), + ] ), @@ -229,6 +115,4 @@ SfRadialGauge getDistanceTrackerExample(bool isTileView) { ); } - - - +double _markerValue = 138; \ No newline at end of file diff --git a/lib/samples/gauge/ranges/range_dataLabel.dart b/lib/samples/gauge/showcase/gauge_compass.dart similarity index 51% rename from lib/samples/gauge/ranges/range_dataLabel.dart rename to lib/samples/gauge/showcase/gauge_compass.dart index 5616cdaf..829a9ba9 100644 --- a/lib/samples/gauge/ranges/range_dataLabel.dart +++ b/lib/samples/gauge/showcase/gauge_compass.dart @@ -1,21 +1,23 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; import 'package:url_launcher/url_launcher.dart'; +import '../../../model/model.dart'; -class RangeDataLabelExample extends StatefulWidget { - const RangeDataLabelExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; +// ignore: must_be_immutable +class GaugeCompassExample extends StatefulWidget { + // ignore: prefer_const_constructors_in_immutables + GaugeCompassExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _RangeDataLabelExampleState createState() => _RangeDataLabelExampleState(sample); + _GaugeCompassExampleState createState() => _GaugeCompassExampleState(sample); } -class _RangeDataLabelExampleState extends State { - _RangeDataLabelExampleState(this.sample); - final SubItemList sample; +class _GaugeCompassExampleState extends State { + _GaugeCompassExampleState(this.sample); + final SubItem sample; bool panelOpen; final ValueNotifier frontPanelVisible = ValueNotifier(true); @@ -34,7 +36,7 @@ class _RangeDataLabelExampleState extends State { } @override - void didUpdateWidget(RangeDataLabelExample oldWidget) { + void didUpdateWidget(GaugeCompassExample oldWidget) { super.didUpdateWidget(oldWidget); frontPanelVisible.removeListener(_subscribeToValueNotifier); frontPanelVisible.addListener(_subscribeToValueNotifier); @@ -42,8 +44,8 @@ class _RangeDataLabelExampleState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( + return ScopedModelDescendant( + builder: (BuildContext context, _, SampleModel model) => SafeArea( child: Backdrop( needCloseButton: false, panelVisible: frontPanelVisible, @@ -62,7 +64,7 @@ class _RangeDataLabelExampleState extends State { color: Colors.white), onPressed: () { launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/ranges/range_dataLabel.dart'); + 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/showcase/distance_tracker.dart'); }, ), ), @@ -76,7 +78,7 @@ class _RangeDataLabelExampleState extends State { sideDrawer: null, headerClosingHeight: 350, titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, + color: const Color(0xFF484848), borderRadius: const BorderRadius.vertical( top: Radius.circular(12), bottom: Radius.circular(0)), ), @@ -87,7 +89,7 @@ class _RangeDataLabelExampleState extends State { class FrontPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables FrontPanel(this.subItemList); - final SubItemList subItemList; + final SubItem subItemList; @override _FrontPanelState createState() => _FrontPanelState(subItemList); @@ -95,18 +97,48 @@ class FrontPanel extends StatefulWidget { class _FrontPanelState extends State { _FrontPanelState(this.sample); - final SubItemList sample; + final SubItem sample; + @override Widget build(BuildContext context) { - return ScopedModelDescendant( + + setState((){ + if(MediaQuery.of(context).orientation == Orientation.portrait){ + _annotationTextSize = 22; + _markerOffset = 0.71; + _positionFactor = 0.025; + _markerHeight = 10; + _markerWidth = 15; + _labelfontSize = 11; + }else{ + _annotationTextSize = 16; + _markerOffset = 0.69; + _positionFactor = 0.05; + _markerHeight = 5; + _markerWidth = 10; + _labelfontSize = 10; + } + }); + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, - body: Padding( - padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getRangeDataLabelExample(false)), - )); + backgroundColor: model.cardThemeColor, + // backgroundColor: const Color(0xFF484848), + body:Container( + decoration: BoxDecoration( + gradient: LinearGradient( + colors: const [Color(0xFF484848), Color(0xFF030303)], + begin: Alignment.topCenter, + end: Alignment.bottomCenter + ), + ), + child: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getGaugeCompassExample(false)), + )) + ); + }); } } @@ -114,7 +146,7 @@ class _FrontPanelState extends State { class BackPanel extends StatefulWidget { //ignore:prefer_const_constructors_in_immutables BackPanel(this.sample); - final SubItemList sample; + final SubItem sample; @override _BackPanelState createState() => _BackPanelState(sample); @@ -122,7 +154,7 @@ class BackPanel extends StatefulWidget { class _BackPanelState extends State { _BackPanelState(this.sample); - final SubItemList sample; + final SubItem sample; final GlobalKey _globalKey = GlobalKey(); @override @@ -146,9 +178,9 @@ class _BackPanelState extends State { @override Widget build(BuildContext context) { - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Container( color: model.backgroundColor, child: Padding( @@ -188,46 +220,61 @@ class _BackPanelState extends State { } } -SfRadialGauge getRangeDataLabelExample(bool isTileView) { + +SfRadialGauge getGaugeCompassExample(bool isTileView) { + _isTileView = isTileView; return SfRadialGauge( - axes:[ - RadialAxis(showLabels: false, showAxisLine: false, showTicks: false, - minimum: 0, maximum: 99, radiusFactor: 0.9, - ranges: [GaugeRange(startValue: 0, endValue: 33, - color: const Color(0xFFFE2A25), label: 'Slow', - sizeUnit: GaugeSizeUnit.factor, - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: isTileView ? 16 : 20), - startWidth: 0.65, endWidth: 0.65 - ),GaugeRange(startValue: 33, endValue: 66, - color: const Color(0xFFFFBA00), label: 'Moderate', - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: isTileView ? 16 : 20), - startWidth: 0.65, endWidth: 0.65, sizeUnit: GaugeSizeUnit.factor, - ), - GaugeRange(startValue: 66, endValue: 99, - color: const Color(0xFF00AB47), label: 'Fast', - labelStyle: GaugeTextStyle(fontFamily: 'Times', fontSize: isTileView ? 16 : 20), - sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.65, endWidth: 0.65, - ), - GaugeRange(startValue: 0, endValue: 99, - color: const Color.fromRGBO(155, 155, 155, 0.3), - rangeOffset: 0.5, sizeUnit: GaugeSizeUnit.factor, - startWidth: 0.15, endWidth: 0.15, - ), - ], - pointers: [NeedlePointer(value: 60, needleLength: 0.7, - lengthUnit: GaugeSizeUnit.factor, - needleStartWidth: 1, needleEndWidth: 10, - knobStyle: KnobStyle(knobRadius: 12, - sizeUnit: GaugeSizeUnit.logicalPixel, - ) - )] + axes: [ + + RadialAxis(showAxisLine: false, radiusFactor: 1,showLastLabel: false, + needsRotateLabels: true, tickOffset: 0.32, offsetUnit: GaugeSizeUnit.factor, + + onLabelCreated: axisLabelCreated, startAngle: 270, endAngle: 270,labelOffset: 0.05, + maximum: 360, minimum: 0, interval: 30, minorTicksPerInterval: 4, + axisLabelStyle: GaugeTextStyle(color: const Color(0xFF949494), fontSize: isTileView ? 10 : _labelfontSize), + minorTickStyle: MinorTickStyle(color: const Color(0xFF616161), + thickness: 1.6, length: 0.058, lengthUnit: GaugeSizeUnit.factor), + majorTickStyle: MajorTickStyle(color: const Color(0xFF949494), + thickness: 2.3, length: 0.087, lengthUnit: GaugeSizeUnit.factor), + backgroundImage:const AssetImage('images/dark_theme_gauge.png'), + pointers: [MarkerPointer(value: 90, color: const Color(0xFFDF5F2D), + enableAnimation: true, animationDuration: 1200, + markerOffset: isTileView ? 0.69 : _markerOffset , offsetUnit: GaugeSizeUnit.factor, + markerType: MarkerType.triangle, markerHeight: isTileView ? 8 : _markerHeight, + markerWidth: isTileView ? 8 : _markerWidth)], + annotations: [GaugeAnnotation( angle: 270, positionFactor: _positionFactor, + widget: Text('90', + style: TextStyle(color: const Color(0xFFDF5F2D), fontWeight: FontWeight.bold, fontSize: isTileView ? 16 : _annotationTextSize),))] ) + ], ); } +void axisLabelCreated(AxisLabelCreatedArgs args) { + if (args.text == '90') { + args.text = 'E'; + args.labelStyle = GaugeTextStyle(color: const Color(0xFFDF5F2D), + fontSize: _isTileView ? 10 : _labelfontSize); + }else{ + if (args.text == '0') { + args.text = 'N'; + }else if (args.text == '180') { + args.text = 'S'; + } else if (args.text == '270') { + args.text = 'W'; + } + args.labelStyle = GaugeTextStyle(color: const Color(0xFFFFFFFF), + fontSize: _isTileView ? 10 : _labelfontSize + ); + } +} - - +double _annotationTextSize = 22; +double _positionFactor = 0.025; +double _markerHeight = 10; +double _markerWidth = 15; +double _markerOffset = 0.71; +bool _isTileView = true; +double _labelfontSize = 10; \ No newline at end of file diff --git a/lib/samples/gauge/showcase/gauge_overview.dart b/lib/samples/gauge/showcase/gauge_overview.dart index 9fd68421..00a5f22d 100644 --- a/lib/samples/gauge/showcase/gauge_overview.dart +++ b/lib/samples/gauge/showcase/gauge_overview.dart @@ -1,289 +1,165 @@ import 'package:syncfusion_flutter_gauges/gauges.dart'; import 'package:flutter/material.dart'; -import 'package:flutter_examples/model/model.dart'; -import 'package:flutter_examples/widgets/flutter_backdrop.dart'; import 'package:scoped_model/scoped_model.dart'; -import 'package:url_launcher/url_launcher.dart'; +import '../../../model/helper.dart'; +import '../../../model/model.dart'; + +// ignore: must_be_immutable class GaugeOverviewExample extends StatefulWidget { - const GaugeOverviewExample(this.sample, {Key key}) : super(key: key); - final SubItemList sample; + GaugeOverviewExample({this.sample, Key key}) : super(key: key); + SubItem sample; @override - _GaugeOverviewExampleState createState() => _GaugeOverviewExampleState(sample); + _GaugeOverviewExampleState createState() => + _GaugeOverviewExampleState(sample); } class _GaugeOverviewExampleState extends State { _GaugeOverviewExampleState(this.sample); - final SubItemList sample; - bool panelOpen; - final ValueNotifier frontPanelVisible = ValueNotifier(true); - - @override - void initState() { - panelOpen = frontPanelVisible.value; - frontPanelVisible.addListener(_subscribeToValueNotifier); - super.initState(); - } - - void _subscribeToValueNotifier() => panelOpen = frontPanelVisible.value; - - @override - void dispose() { - super.dispose(); - } - - @override - void didUpdateWidget(GaugeOverviewExample oldWidget) { - super.didUpdateWidget(oldWidget); - frontPanelVisible.removeListener(_subscribeToValueNotifier); - frontPanelVisible.addListener(_subscribeToValueNotifier); - } + final SubItem sample; @override Widget build(BuildContext context) { - return ScopedModelDescendant( - builder: (BuildContext context, _, SampleListModel model) => SafeArea( - child: Backdrop( - needCloseButton: false, - panelVisible: frontPanelVisible, - sampleListModel: model, - frontPanelOpenPercentage: 0.28, - toggleFrontLayer: false, - appBarAnimatedLeadingMenuIcon: AnimatedIcons.close_menu, - appBarActions: [ - Padding( - padding: const EdgeInsets.fromLTRB(0, 0, 0, 0), - child: Container( - height: 40, - width: 40, - child: IconButton( - icon: Image.asset(model.codeViewerIcon, - color: Colors.white), - onPressed: () { - launch( - 'https://github.com/syncfusion/flutter-examples/blob/master/lib/samples/gauge/showcase/gauge_overview.dart'); - }, - ), - ), - ), - ], - appBarTitle: AnimatedSwitcher( - duration: const Duration(milliseconds: 1000), - child: Text(sample.title.toString())), - backLayer: BackPanel(sample), - frontLayer: FrontPanel(sample), - sideDrawer: null, - headerClosingHeight: 350, - titleVisibleOnPanelClosed: true, - color: model.cardThemeColor, - borderRadius: const BorderRadius.vertical( - top: Radius.circular(12), bottom: Radius.circular(0)), - ), - )); + return getScopedModel(null, sample, GaugeOverviewFrontPanel(sample)); } } -class FrontPanel extends StatefulWidget { +class GaugeOverviewFrontPanel extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables - FrontPanel(this.subItemList); - final SubItemList subItemList; + GaugeOverviewFrontPanel(this.sampleList); + final SubItem sampleList; @override - _FrontPanelState createState() => _FrontPanelState(subItemList); + _GaugeOverviewFrontPanelState createState() => _GaugeOverviewFrontPanelState(sampleList); } -class _FrontPanelState extends State { - _FrontPanelState(this.sample); - final SubItemList sample; +class _GaugeOverviewFrontPanelState extends State { + _GaugeOverviewFrontPanelState(this.sample); + final SubItem sample; + bool isIndexed = true; + @override Widget build(BuildContext context) { setState((){ _interval = MediaQuery.of(context).orientation == Orientation.portrait ? 10 : 20; }); - return ScopedModelDescendant( + return ScopedModelDescendant( rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { + builder: (BuildContext context, _, SampleModel model) { return Scaffold( - backgroundColor: model.cardThemeColor, + backgroundColor: model.cardThemeColor, body: Padding( padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), - child: Container(child: getGaugeOverviewExample(false)), - )); + child: Container( + child: getGaugeOverviewExample(false, isIndexed)), + ), + ); }); } -} -class BackPanel extends StatefulWidget { - //ignore: prefer_const_constructors_in_immutables - BackPanel(this.sample); - final SubItemList sample; - @override - _BackPanelState createState() => _BackPanelState(sample); } -class _BackPanelState extends State { - _BackPanelState(this.sample); - final SubItemList sample; - final GlobalKey _globalKey = GlobalKey(); - - @override - void initState() { - WidgetsBinding.instance.addPostFrameCallback(_afterLayout); - super.initState(); - } - - void _afterLayout(dynamic _) { - _getSizesAndPosition(); - } - - void _getSizesAndPosition() { - final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); - final Size size = renderBoxRed.size; - final Offset position = renderBoxRed.localToGlobal(Offset.zero); - const double appbarHeight = 60; - BackdropState.frontPanelHeight = - position.dy + (size.height - appbarHeight) + 20; - } - - @override - Widget build(BuildContext context) { - return ScopedModelDescendant( - rebuildOnChange: true, - builder: (BuildContext context, _, SampleListModel model) { - return Container( - color: model.backgroundColor, - child: Padding( - padding: const EdgeInsets.fromLTRB(10, 0, 0, 0), - child: Column( - mainAxisAlignment: MainAxisAlignment.start, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - Text( - sample.title, - textAlign: TextAlign.left, - style: const TextStyle( - fontWeight: FontWeight.bold, - fontSize: 28.0, - color: Colors.white, - letterSpacing: 0.53), - ), - Padding( - key: _globalKey, - padding: const EdgeInsets.fromLTRB(0, 10, 0, 0), - child: Text( - sample.description, - style: const TextStyle( - fontWeight: FontWeight.normal, - fontSize: 15.0, - color: Colors.white, - letterSpacing: 0.3, - height: 1.5), - ), - ), - ], - ), - ), - ); - }, - ); - } -} - -SfRadialGauge getGaugeOverviewExample(bool isTileView) { - return SfRadialGauge( +SfRadialGauge getGaugeOverviewExample(bool isTileView, [bool isIndexed]) { + return SfRadialGauge( animationDuration: 3500, enableLoadingAnimation: true, axes: [ - RadialAxis(startAngle: 130, + RadialAxis( + startAngle: 130, endAngle: 50, minimum: -50, maximum: 150, - interval: isTileView ? 20 : _interval, + interval: isTileView ? 20 : _interval, minorTicksPerInterval: 9, showAxisLine: false, radiusFactor: 0.9, labelOffset: 8, ranges: [ - GaugeRange(startValue: -50, + GaugeRange( + startValue: -50, endValue: 0, startWidth: 0.265, sizeUnit: GaugeSizeUnit.factor, endWidth: 0.265, - color: const Color.fromRGBO(34,144,199, 0.75)), - GaugeRange(startValue: 0, + color: const Color.fromRGBO(34, 144, 199, 0.75)), + GaugeRange( + startValue: 0, endValue: 10, startWidth: 0.265, sizeUnit: GaugeSizeUnit.factor, endWidth: 0.265, - color: const Color.fromRGBO(34,195,199, 0.75)), - GaugeRange(startValue: 10, + color: const Color.fromRGBO(34, 195, 199, 0.75)), + GaugeRange( + startValue: 10, endValue: 30, startWidth: 0.265, sizeUnit: GaugeSizeUnit.factor, endWidth: 0.265, - color: const Color.fromRGBO(123,199,34, 0.75)), - GaugeRange(startValue: 30, + color: const Color.fromRGBO(123, 199, 34, 0.75)), + GaugeRange( + startValue: 30, endValue: 40, startWidth: 0.265, sizeUnit: GaugeSizeUnit.factor, endWidth: 0.265, - color: const Color.fromRGBO(238,193,34, 0.75)), - GaugeRange(startValue: 40, + color: const Color.fromRGBO(238, 193, 34, 0.75)), + GaugeRange( + startValue: 40, endValue: 150, startWidth: 0.265, sizeUnit: GaugeSizeUnit.factor, endWidth: 0.265, - color: const Color.fromRGBO(238,79,34, 0.65)), + color: const Color.fromRGBO(238, 79, 34, 0.65)), ], annotations: [ - GaugeAnnotation(angle: 90, positionFactor: 0.35, - widget: Container(child: const Text( - 'Temp.°C', style: TextStyle(color: Color(0xFFF8B195), - fontSize: 16)))), - GaugeAnnotation(angle: 90, positionFactor: 0.8, + GaugeAnnotation( + angle: 90, + positionFactor: 0.35, widget: Container( - child: const Text(' 22.5 ', style: TextStyle( - fontWeight: FontWeight.bold, - fontSize: 20),), - ) - ) + child: const Text('Temp.°C', + style: TextStyle( + color: Color(0xFFF8B195), fontSize: 16)))), + GaugeAnnotation( + angle: 90, + positionFactor: 0.8, + widget: Container( + child: const Text( + ' 22.5 ', + style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20), + ), + )) ], - pointers: [ - NeedlePointer(value: 22.5, + NeedlePointer( + value: 22.5, needleLength: 0.6, lengthUnit: GaugeSizeUnit.factor, needleStartWidth: isTileView ? 0 : 1, - needleEndWidth:isTileView ? 5 : 8, + needleEndWidth: isTileView ? 5 : 8, animationType: AnimationType.easeOutBack, enableAnimation: true, animationDuration: 1200, - knobStyle: KnobStyle(knobRadius: isTileView ? 0.06 : 0.09, + knobStyle: KnobStyle( + knobRadius: isTileView ? 0.06 : 0.09, sizeUnit: GaugeSizeUnit.factor, borderColor: const Color(0xFFF8B195), color: Colors.white, borderWidth: isTileView ? 0.035 : 0.05), - tailStyle: TailStyle(color: const Color(0xFFF8B195), - width:isTileView ? 4 : 8, + tailStyle: TailStyle( + color: const Color(0xFFF8B195), + width: isTileView ? 4 : 8, lengthUnit: GaugeSizeUnit.factor, length: isTileView ? 0.15 : 0.2), - needleColor: const Color(0xFFF8B195),) + needleColor: const Color(0xFFF8B195), + ) ], axisLabelStyle: GaugeTextStyle(fontSize: isTileView ? 10 : 12), majorTickStyle: MajorTickStyle( - length: 0.25, lengthUnit: GaugeSizeUnit.factor, - thickness: 1.5), - minorTickStyle: MinorTickStyle(length: 0.13, - lengthUnit: GaugeSizeUnit.factor, - thickness: 1) - ) - + length: 0.25, lengthUnit: GaugeSizeUnit.factor, thickness: 1.5), + minorTickStyle: MinorTickStyle( + length: 0.13, lengthUnit: GaugeSizeUnit.factor, thickness: 1)) ], ); } double _interval = 10; - - - - diff --git a/lib/widgets/flutter_backdrop.dart b/lib/widgets/flutter_backdrop.dart index 0c3b2998..1508e4a1 100755 --- a/lib/widgets/flutter_backdrop.dart +++ b/lib/widgets/flutter_backdrop.dart @@ -2,8 +2,6 @@ import 'dart:math' as math; import 'package:flutter/material.dart'; import 'package:flutter_examples/model/model.dart'; -const num _flingVelocity = 2.0; - // ignore: must_be_immutable class Backdrop extends StatefulWidget { Backdrop({ @@ -169,7 +167,7 @@ class Backdrop extends StatefulWidget { AnimationController controller; - final SampleListModel sampleListModel; + final SampleModel sampleListModel; final double frontPanelOpenPercentage; @@ -186,14 +184,15 @@ class Backdrop extends StatefulWidget { class BackdropState extends State with SingleTickerProviderStateMixin { BackdropState( - AnimationController _controller, SampleListModel _sampleListModel, + AnimationController _controller, SampleModel _sampleListModel, {this.test = false}) { // ignore: prefer_initializing_formals controller = _controller; // ignore: prefer_initializing_formals sampleListModel = _sampleListModel; } - + + final num _flingVelocity = 2.0; static double frontPanelHeight = 0; bool panelVisible; final dynamic _backDropKey = GlobalKey(debugLabel: 'Backdrop'); @@ -201,7 +200,7 @@ class BackdropState extends State AnimationController controller; final GlobalKey _scaffoldKey = GlobalKey(debugLabel: 'Scaffold'); - SampleListModel sampleListModel; + SampleModel sampleListModel; @override void initState() { diff --git a/lib/widgets/search_bar.dart b/lib/widgets/search_bar.dart index 55a43c6a..d9d340ab 100755 --- a/lib/widgets/search_bar.dart +++ b/lib/widgets/search_bar.dart @@ -4,7 +4,7 @@ import 'package:flutter_examples/model/model.dart'; class SearchBar extends StatefulWidget { //ignore: prefer_const_constructors_in_immutables SearchBar({Key key, this.sampleListModel}) : super(key: key); - final SampleListModel sampleListModel; + final SampleModel sampleListModel; @override _SearchBarState createState() => _SearchBarState(sampleListModel); @@ -13,24 +13,24 @@ class SearchBar extends StatefulWidget { class _SearchBarState extends State with WidgetsBindingObserver { _SearchBarState(this.sampleListModel); - final SampleListModel sampleListModel; + final SampleModel sampleListModel; TextEditingController editingController = TextEditingController(); - List duplicateControlItems; + List duplicateControlItems; - List duplicateSampleItems; + List duplicateSampleItems; //ignore: prefer_collection_literals - List items = List(); + List items = List(); Widget searchIcon = Icon(Icons.search, color: Colors.grey); final FocusNode _isFocus = FocusNode(); bool isOpen = false; @override void initState() { - duplicateControlItems = sampleListModel.searchControlListItems; - duplicateSampleItems = sampleListModel.searchSampleListItems; + duplicateControlItems = sampleListModel.searchControlItems; + duplicateSampleItems = sampleListModel.searchSampleItems; super.initState(); WidgetsBinding.instance.addObserver(this); } @@ -55,36 +55,36 @@ class _SearchBarState extends State with WidgetsBindingObserver { void filterSearchResults(String query) { // ignore: prefer_collection_literals - final List dummySearchControlList = List(); - dummySearchControlList.addAll(duplicateControlItems); + final List dummySearchControl = List(); + dummySearchControl.addAll(duplicateControlItems); // ignore: prefer_collection_literals - final List dummySearchSamplesList = List(); + final List dummySearchSamplesList = List(); dummySearchSamplesList.addAll(duplicateSampleItems); if (query.isNotEmpty) { searchIcon = null; // ignore: prefer_collection_literals - final List dummyControlListData = List(); - for (int i = 0; i < dummySearchControlList.length; i++) { - final SampleList item = dummySearchControlList[i]; + final List dummyControlData = List(); + for (int i = 0; i < dummySearchControl.length; i++) { + final Control item = dummySearchControl[i]; if (item.title.toLowerCase().contains(query.toLowerCase())) { - dummyControlListData.add(item); + dummyControlData.add(item); } } // ignore: prefer_collection_literals - final List dummySampleListData = List(); + final List dummySampleData = List(); for (int i = 0; i < dummySearchSamplesList.length; i++) { - final SubItemList item = dummySearchSamplesList[i]; + final SubItem item = dummySearchSamplesList[i]; if (item.title.toLowerCase().contains(query.toLowerCase())) { - dummySampleListData.add(item); + dummySampleData.add(item); } } sampleListModel.controlList.clear(); - sampleListModel.controlList.addAll(dummyControlListData); + sampleListModel.controlList.addAll(dummyControlData); sampleListModel.sampleList.clear(); - sampleListModel.sampleList.addAll(dummySampleListData); + sampleListModel.sampleList.addAll(dummySampleData); // ignore: invalid_use_of_protected_member sampleListModel.notifyListeners(); return; diff --git a/pubspec.yaml b/pubspec.yaml index 38bcb917..5e73da80 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -1,7 +1,8 @@ name: flutter_examples description: This project contains the Syncfusion Flutter UI widgets examples. - -version: 1.0.0+1 +version: 17.4.40 +author: Syncfusion +homepage: https://github.com/syncfusion/flutter-examples environment: sdk: ">=2.1.0 <3.0.0" @@ -15,13 +16,16 @@ dependencies: flutter_gallery_assets: 0.1.8 url_launcher: ^5.0.3 intl: ^0.16.0 - syncfusion_flutter_charts: ^17.3.14 - syncfusion_flutter_gauges: 17.3.14-beta.1 - + syncfusion_flutter_calendar: ^17.4.40-beta + syncfusion_flutter_charts: ^17.4.40 + syncfusion_flutter_gauges: ^17.4.40-beta + syncfusion_flutter_core: ^17.4.40 + flutter: uses-material-design: true assets: - images/ + - lib/sample_details.json fonts: - family: MontserratBold fonts: