diff --git a/README.md b/README.md index 1eea9ea8..9666887f 100644 --- a/README.md +++ b/README.md @@ -38,11 +38,17 @@ This repository contains sample browser project. Each widgets sample will be fou ## Screenshots ## +### Chart types

Chart Types -

+

+ +### Axis types +

Axis Types

+ +### User interactions

User Interaction

@@ -54,4 +60,4 @@ Syncfusion has no liability for any damage or consequence that may arise by the ## About Syncfusion ## Founded in 2001 and headquartered in Research Triangle Park, N.C., Syncfusion has more than 20,000 customers and more than 1 million users, including large financial institutions, Fortune 500 companies, and global IT consultancies. -Today we provide 1,000+ controls and frameworks for web ([ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls), [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), and [Blazor](https://www.syncfusion.com/blazor-components), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls), [UWP](https://www.syncfusion.com/uwp-ui-controls), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls), [WPF](https://www.syncfusion.com/products/wpf-ui-controls), and [UWP](https://www.syncfusion.com/uwp-ui-controls)). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software. \ No newline at end of file +Today we provide 1,000+ controls and frameworks for web ([ASP.NET Core](https://www.syncfusion.com/aspnet-core-ui-controls), [ASP.NET MVC](https://www.syncfusion.com/aspnet-mvc-ui-controls), [ASP.NET WebForms](https://www.syncfusion.com/jquery/aspnet-web-forms-ui-controls), [JavaScript](https://www.syncfusion.com/javascript-ui-controls), [Angular](https://www.syncfusion.com/angular-ui-components), [React](https://www.syncfusion.com/react-ui-components), [Vue](https://www.syncfusion.com/vue-ui-components), and [Blazor](https://www.syncfusion.com/blazor-components), mobile ([Xamarin](https://www.syncfusion.com/xamarin-ui-controls), [Flutter](https://www.syncfusion.com/flutter-widgets), [UWP](https://www.syncfusion.com/uwp-ui-controls), and [JavaScript](https://www.syncfusion.com/javascript-ui-controls)), and desktop development ([WinForms](https://www.syncfusion.com/winforms-ui-controls), [WPF](https://www.syncfusion.com/products/wpf-ui-controls), and [UWP](https://www.syncfusion.com/uwp-ui-controls)). We provide ready-to deploy enterprise software for dashboards, reports, data integration, and big data processing. Many customers have saved millions in licensing fees by deploying our software. \ No newline at end of file diff --git a/lib/model/helper.dart b/lib/model/helper.dart index 39e0bc9a..8acdd38a 100755 --- a/lib/model/helper.dart +++ b/lib/model/helper.dart @@ -109,6 +109,34 @@ import 'package:flutter_examples/samples/chart/user_interactions/zooming_panning 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 'model.dart'; void onTapControlItem( @@ -801,6 +829,180 @@ void onTapSampleItem(BuildContext context, SubItemList sample) { builder: (BuildContext context) => DefaultSelection(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))); + } + } } String getStatus(List model) { diff --git a/lib/model/model.dart b/lib/model/model.dart index 260daf78..35b5604b 100755 --- a/lib/model/model.dart +++ b/lib/model/model.dart @@ -98,6 +98,34 @@ import 'package:flutter_examples/samples/chart/user_interactions/trackball/chart 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:scoped_model/scoped_model.dart'; class SampleList { @@ -207,7 +235,15 @@ class SampleListModel extends Model { List pyramidSeriesSubItemList; List funnelSeriesSubItemList; - + //Radial gauge examples + List> radialGaugeSubItemList; + List radialAxisSubItemList; + List radialPointersSubItemList; + List radialRangesSubItemList; + List radialAnnotationSubItemList; + List radialInteractionSubItemList; + List radialAnimationSubItemList; + List radialShowCaseSubItemList; SampleListModel() { controlList = []; @@ -981,6 +1017,221 @@ class SampleListModel extends Model { '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); @@ -1017,6 +1268,22 @@ class SampleListModel extends Model { dynamicUpdatesSubItemList.add(liveVerticalSubItemList); dynamicUpdatesSubItemList.add(randomUpdateDataSubItemList); + // 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')); + controlList.add(SampleList( 'Cartesian Charts', 'Demos of various chart types supported in cartesian axes', diff --git a/lib/samples/gauge/animation/radial_bounceout.dart b/lib/samples/gauge/animation/radial_bounceout.dart new file mode 100644 index 00000000..b9f6a0f1 --- /dev/null +++ b/lib/samples/gauge/animation/radial_bounceout.dart @@ -0,0 +1,223 @@ +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 { + final SubItemList sample; + const RadialBounceOutExample(this.sample, {Key key}) : super(key: key); + + @override + _RadialBounceOutExampleState createState() => _RadialBounceOutExampleState(sample); +} + +class _RadialBounceOutExampleState extends State { + final SubItemList sample; + _RadialBounceOutExampleState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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: Color(0xFFF67280), needleLength: 0.8, lengthUnit: GaugeSizeUnit.factor, + enableAnimation: true, animationType: AnimationType.bounceOut, + animationDuration: 1500, + knobStyle: KnobStyle(knobRadius:8, sizeUnit: GaugeSizeUnit.logicalPixel, + color: Color(0xFFF67280)) + )], + minorTickStyle: MinorTickStyle(length: 0.08, thickness: 1, + lengthUnit: GaugeSizeUnit.factor, + color: Color(0xFFC4C4C4)), + axisLineStyle:AxisLineStyle(color: 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 new file mode 100644 index 00000000..824cd921 --- /dev/null +++ b/lib/samples/gauge/animation/radial_easeanimation.dart @@ -0,0 +1,249 @@ +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 RadialEaseExample extends StatefulWidget { + final SubItemList sample; + const RadialEaseExample(this.sample, {Key key}) : super(key: key); + + @override + _RadialEaseExampleState createState() => _RadialEaseExampleState(sample); +} + +class _RadialEaseExampleState extends State { + final SubItemList sample; + _RadialEaseExampleState(this.sample); + bool panelOpen; + + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + Timer timer; + + @override + void initState() { + super.initState(); + } + + + @override + void dispose() { + super.dispose(); + } + + + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + setState((){ + _interval = MediaQuery.of(context).orientation == Orientation.portrait ? 1 : 2; + }); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 getRadialEaseExample(bool isTileView) { + return SfRadialGauge( + axes: [ + 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: new BoxDecoration( + image: new DecorationImage( + image: ExactAssetImage('images/shotput.png'), + fit: BoxFit.fitHeight, + ), + ))), + + GaugeAnnotation(widget: Container(child: Text('Distance', + style: TextStyle( fontSize: 20)),)) + ], + pointers: [ + RangePointer(value: 11.5, width: 0.1, color: 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), + ] + ) + + ], + ); +} + +double _interval = 1; + diff --git a/lib/samples/gauge/animation/radial_easeincirc.dart b/lib/samples/gauge/animation/radial_easeincirc.dart new file mode 100644 index 00000000..5a226604 --- /dev/null +++ b/lib/samples/gauge/animation/radial_easeincirc.dart @@ -0,0 +1,230 @@ +// 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 { + final SubItemList sample; + const RadialEaseInCircExample(this.sample, {Key key}) : super(key: key); + + @override + _RadialEaseInCircExampleState createState() => _RadialEaseInCircExampleState(sample); +} + +class _RadialEaseInCircExampleState extends State { + final SubItemList sample; + _RadialEaseInCircExampleState(this.sample); + bool panelOpen; + + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + + @override + void initState() { + super.initState(); + } + + + @override + void dispose() { + super.dispose(); + } + + + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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: Color(0xFFF8B195))] + ) + ], + ); +} + + + + + diff --git a/lib/samples/gauge/animation/radial_easeout.dart b/lib/samples/gauge/animation/radial_easeout.dart new file mode 100644 index 00000000..a99861bf --- /dev/null +++ b/lib/samples/gauge/animation/radial_easeout.dart @@ -0,0 +1,231 @@ +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 RadialEaseOutAnimation extends StatefulWidget { + final SubItemList sample; + const RadialEaseOutAnimation(this.sample, {Key key}) : super(key: key); + + @override + _RadialEaseOutAnimationState createState() => _RadialEaseOutAnimationState(sample); +} + +class _RadialEaseOutAnimationState extends State { + final SubItemList sample; + _RadialEaseOutAnimationState(this.sample); + bool panelOpen; + + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + Timer timer; + + @override + void initState() { + super.initState(); + } + + + @override + void dispose() { + super.dispose(); + } + + + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: 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) + ] + ) + ], + ); +} + +Color _easeOutNeedleColor = const Color(0xFF555555); + + + diff --git a/lib/samples/gauge/animation/radial_elasticout.dart b/lib/samples/gauge/animation/radial_elasticout.dart new file mode 100644 index 00000000..f3b91e50 --- /dev/null +++ b/lib/samples/gauge/animation/radial_elasticout.dart @@ -0,0 +1,237 @@ +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 RadialElasticOutAnimation extends StatefulWidget { + final SubItemList sample; + const RadialElasticOutAnimation(this.sample, {Key key}) : super(key: key); + + @override + _RadialElasticOutAnimationState createState() => _RadialElasticOutAnimationState(sample); +} + +class _RadialElasticOutAnimationState extends State { + final SubItemList sample; + _RadialElasticOutAnimationState(this.sample); + bool panelOpen; + + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + Timer timer; + + @override + void initState() { + super.initState(); + } + + + @override + void dispose() { + super.dispose(); + } + + + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: Color(0xFF00A8B5)), + NeedlePointer(value: 70, needleStartWidth: 0, + needleColor: 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) + ) + ], + ); +} + + + + + diff --git a/lib/samples/gauge/animation/radial_linearanimation.dart b/lib/samples/gauge/animation/radial_linearanimation.dart new file mode 100644 index 00000000..3bf8eeaa --- /dev/null +++ b/lib/samples/gauge/animation/radial_linearanimation.dart @@ -0,0 +1,245 @@ +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 RadialLinearAnimation extends StatefulWidget { + final SubItemList sample; + const RadialLinearAnimation(this.sample, {Key key}) : super(key: key); + + @override + _RadialLinearAnimationState createState() => _RadialLinearAnimationState(sample); +} + +class _RadialLinearAnimationState extends State { + final SubItemList sample; + _RadialLinearAnimationState(this.sample); + bool panelOpen; + + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + Timer timer; + + @override + void initState() { + super.initState(); + } + + + @override + void dispose() { + super.dispose(); + } + + + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + setState((){ + _radius = MediaQuery.of(context).orientation == Orientation.portrait ? 0.05 : 0.07; + }); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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) { + 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 ) + ], + 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 new file mode 100644 index 00000000..574d764b --- /dev/null +++ b/lib/samples/gauge/animation/radial_slowmiddle.dart @@ -0,0 +1,248 @@ +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 RadialSlowMiddleAnimation extends StatefulWidget { + final SubItemList sample; + const RadialSlowMiddleAnimation(this.sample, {Key key}) : super(key: key); + + @override + _RadialSlowMiddleAnimationState createState() => _RadialSlowMiddleAnimationState(sample); +} + +class _RadialSlowMiddleAnimationState extends State { + final SubItemList sample; + _RadialSlowMiddleAnimationState(this.sample); + bool panelOpen; + + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + Timer timer; + + @override + void initState() { + super.initState(); + } + + + @override + void dispose() { + super.dispose(); + } + + + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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, + 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: 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: Color(0xFFF67280), + value: 2, enableAnimation: true, animationType: AnimationType.slowMiddle, + knobStyle: KnobStyle(color: 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/direction_compass.dart b/lib/samples/gauge/annotation/direction_compass.dart new file mode 100644 index 00000000..58279d05 --- /dev/null +++ b/lib/samples/gauge/annotation/direction_compass.dart @@ -0,0 +1,255 @@ +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 { + final SubItemList sample; + const RadialCompass(this.sample, {Key key}) : super(key: key); + + @override + _RadialCompassState createState() => _RadialCompassState(sample); +} + +class _RadialCompassState extends State { + final SubItemList sample; + _RadialCompassState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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: Color(0xFFC4C4C4), needleStartWidth: 1, + needleEndWidth: 1, knobStyle: KnobStyle(knobRadius: 0), + tailStyle: TailStyle(color: Color(0xFFC4C4C4), width: 1, + lengthUnit: GaugeSizeUnit.factor, + length: 0.5)), + NeedlePointer(value: 221, needleLength: 0.5, + lengthUnit:GaugeSizeUnit.factor, + needleColor: Color(0xFFC4C4C4), needleStartWidth: 1, + needleEndWidth: 1, knobStyle: KnobStyle(knobRadius: 0, + sizeUnit: GaugeSizeUnit.factor + ),), + NeedlePointer(value: 40, needleLength: 0.5, + lengthUnit: GaugeSizeUnit.factor, + needleColor: 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 new file mode 100644 index 00000000..a2117ced --- /dev/null +++ b/lib/samples/gauge/annotation/image_annotation.dart @@ -0,0 +1,225 @@ +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 RadialImageAnnotation extends StatefulWidget { + final SubItemList sample; + const RadialImageAnnotation(this.sample, {Key key}) : super(key: key); + + @override + _RadialImageAnnotationState createState() => _RadialImageAnnotationState(sample); +} + +class _RadialImageAnnotationState extends State { + final SubItemList sample; + _RadialImageAnnotationState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: Color(0xFFFFCD60), + enableAnimation: true, + cornerStyle: CornerStyle.bothCurve)], + annotations: [ + GaugeAnnotation(widget: Column(children: [Container( + width: isTileView ? 30.00 : 50.00 , + height: isTileView ? 30.00 : 50.00, + decoration: new BoxDecoration( + image: new DecorationImage( + image: ExactAssetImage('images/sun.png'), + fit: BoxFit.fitHeight, + ), + )), + Padding(padding: 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 new file mode 100644 index 00000000..7431d86c --- /dev/null +++ b/lib/samples/gauge/annotation/text_annotation.dart @@ -0,0 +1,225 @@ +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 RadialTextAnnotation extends StatefulWidget { + final SubItemList sample; + const RadialTextAnnotation(this.sample, {Key key}) : super(key: key); + + @override + _RadialTextAnnotationState createState() => _RadialTextAnnotationState(sample); +} + +class _RadialTextAnnotationState extends State { + final SubItemList sample; + _RadialTextAnnotationState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 getRadialTextAnnotation(bool isTileView) { + return SfRadialGauge( + axes: [ + RadialAxis(showTicks: false, + showLabels: false, + startAngle: 180, + endAngle: 180, + radiusFactor: 0.9, + axisLineStyle: AxisLineStyle( + thickness: 30, dashArray: [8, 10] + ), + ), + RadialAxis(showTicks: false, + showLabels: false, + startAngle: 180, + endAngle: 50, + radiusFactor: 0.9, + annotations: [GaugeAnnotation( + 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))))], + axisLineStyle: AxisLineStyle( + color: Color(0xFF00A8B5), + 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 new file mode 100644 index 00000000..97cd1a31 --- /dev/null +++ b/lib/samples/gauge/axis_feature/custom_labels.dart @@ -0,0 +1,262 @@ +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 GaugeCustomLabels extends StatefulWidget { + final SubItemList sample; + const GaugeCustomLabels(this.sample, {Key key}) : super(key: key); + + @override + _GaugeCustomLabelsState createState() => _GaugeCustomLabelsState(sample); +} + +class _GaugeCustomLabelsState extends State { + final SubItemList sample; + _GaugeCustomLabelsState(this.sample); + bool panelOpen; + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.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: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: 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'; + } +} + + + + + + + diff --git a/lib/samples/gauge/axis_feature/default_gauge_view.dart b/lib/samples/gauge/axis_feature/default_gauge_view.dart new file mode 100644 index 00000000..663484e8 --- /dev/null +++ b/lib/samples/gauge/axis_feature/default_gauge_view.dart @@ -0,0 +1,210 @@ +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 RadialGaugeDefault extends StatefulWidget { + final SubItemList sample; + const RadialGaugeDefault(this.sample, {Key key}) : super(key: key); + + @override + _RadialGaugeDefaultState createState() => _RadialGaugeDefaultState(sample); +} + +class _RadialGaugeDefaultState extends State { + final SubItemList sample; + _RadialGaugeDefaultState(this.sample); + bool panelOpen; + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 getDefaultRadialGauge(bool isTileView) { + return SfRadialGauge( + axes: [ + 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)), + ] + ) + ], + ); +} + +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 new file mode 100644 index 00000000..d96a3b0c --- /dev/null +++ b/lib/samples/gauge/axis_feature/multiple_axis.dart @@ -0,0 +1,246 @@ +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 MultipleAxisExample extends StatefulWidget { + final SubItemList sample; + const MultipleAxisExample(this.sample, {Key key}) : super(key: key); + + @override + _MultipleAxisExampleState createState() => _MultipleAxisExampleState(sample); +} + +class _MultipleAxisExampleState extends State { + final SubItemList sample; + _MultipleAxisExampleState(this.sample); + bool panelOpen; + final 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(MultipleAxisExample oldWidget) { + super.didUpdateWidget(oldWidget); + frontPanelVisible.removeListener(_subscribeToValueNotifier); + frontPanelVisible.addListener(_subscribeToValueNotifier); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + setState((){ + _radius = MediaQuery.of(context).orientation == Orientation.portrait ? 0.6 : 0.5; + }); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getMultipleAxisGauge(false)), + )); + }); + } +} + +class BackPanel extends StatefulWidget { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: Color(0xFF00A8B5), thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, + length: 0.07), + majorTickStyle: MajorTickStyle(color: Color(0xFF00A8B5), thickness: 1.5, + lengthUnit: GaugeSizeUnit.factor, + length: 0.15), + axisLineStyle: AxisLineStyle(color:Color(0xFF00A8B5), thickness: 3, ), + axisLabelStyle: GaugeTextStyle(color: 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: Text('33°C :', style: TextStyle(fontSize: 12, + fontWeight: FontWeight.bold, fontFamily: 'Times'),)), + Container(child: 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_linearlabel.dart b/lib/samples/gauge/axis_feature/non_linearlabel.dart new file mode 100644 index 00000000..99af6050 --- /dev/null +++ b/lib/samples/gauge/axis_feature/non_linearlabel.dart @@ -0,0 +1,318 @@ +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 { + final SubItemList sample; + const RadialNonLinearLabel (this.sample, {Key key}) : super(key: key); + + @override + _RadialNonLinearLabelState createState() => _RadialNonLinearLabelState(sample); +} + +class _RadialNonLinearLabelState extends State { + final SubItemList sample; + _RadialNonLinearLabelState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + setState((){ + _radius = MediaQuery.of(context).orientation == Orientation.portrait ? 0.06 : 0.1; + }); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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, + double centerX = 0.5, + 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++) { + 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 new file mode 100644 index 00000000..9545d76c --- /dev/null +++ b/lib/samples/gauge/axis_feature/radiallabel_customization.dart @@ -0,0 +1,224 @@ +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 RadialLabelCustomization extends StatefulWidget { + final SubItemList sample; + const RadialLabelCustomization(this.sample, {Key key}) : super(key: key); + + @override + _RadialLabelCustomizationState createState() => _RadialLabelCustomizationState(sample); +} + +class _RadialLabelCustomizationState extends State { + final SubItemList sample; + _RadialLabelCustomizationState(this.sample); + bool panelOpen; + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: Color(0xFF00A8B5)) + ), + ], + ); +} + + + + + + diff --git a/lib/samples/gauge/axis_feature/range_colors.dart b/lib/samples/gauge/axis_feature/range_colors.dart new file mode 100644 index 00000000..56141422 --- /dev/null +++ b/lib/samples/gauge/axis_feature/range_colors.dart @@ -0,0 +1,246 @@ +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 RangeColorForLabels extends StatefulWidget { + final SubItemList sample; + const RangeColorForLabels(this.sample, {Key key}) : super(key: key); + + @override + _RangeColorForLabelsState createState() => _RangeColorForLabelsState(sample); +} + +class _RangeColorForLabelsState extends State { + final SubItemList sample; + _RangeColorForLabelsState(this.sample); + bool panelOpen; + + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + Timer timer; + + @override + void initState() { + super.initState(); + } + + + @override + void dispose() { + super.dispose(); + } + + + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 getRangeColorForLabels(bool isTileView) { + return SfRadialGauge( + axes: [ + 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: 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: Color(0xFFC06C84), + startWidth: 0.05, endWidth: 0.25), + GaugeRange(startValue: 70, endValue: 100, + rangeOffset: 0.06, + sizeUnit: GaugeSizeUnit.factor, + color: Color(0xFF355C7D), + 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 new file mode 100644 index 00000000..ed91a417 --- /dev/null +++ b/lib/samples/gauge/axis_feature/tick_customization.dart @@ -0,0 +1,224 @@ +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 { + final SubItemList sample; + const RadialTickCustomization(this.sample, {Key key}) : super(key: key); + + @override + _RadialTickCustomizationState createState() => _RadialTickCustomizationState(sample); +} + +class _RadialTickCustomizationState extends State< RadialTickCustomization> { + final SubItemList sample; + _RadialTickCustomizationState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getRadialTickCustomization(false)), + )); + }); + } +} + +class BackPanel extends StatefulWidget { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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, + ) + )] + ) + ], + ); +} + +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 new file mode 100644 index 00000000..a838eabd --- /dev/null +++ b/lib/samples/gauge/pointer_interaction/radial_pointerdragging.dart @@ -0,0 +1,249 @@ +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 RadialPointerDragging extends StatefulWidget { + final SubItemList sample; + const RadialPointerDragging(this.sample, {Key key}) : super(key: key); + + @override + _RadialPointerDraggingState createState() => _RadialPointerDraggingState(sample); +} + +class _RadialPointerDraggingState extends State { + final SubItemList sample; + _RadialPointerDraggingState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + setState((){ + _interval = MediaQuery.of(context).orientation == Orientation.portrait ? 10 : 20; + }); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getRadialPointerDragging(false)), + )); + }); + } +} + +class BackPanel extends StatefulWidget { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: Color(0xFFFFCD60) + ), + ], + ranges: [GaugeRange(startValue: 0, endValue: 19.5, + color: Color(0xFF355C7D), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.1, endWidth: 0.1), + GaugeRange(startValue: 20, endValue: 39.5, + color: Color(0xFFC06C84), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.1, endWidth: 0.1), + GaugeRange(startValue: 40, endValue: 59.5, + color: Color(0xFFF67280), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.1, endWidth: 0.1), + GaugeRange(startValue: 60, endValue: 79.5, + color: Color(0xFFF8B195), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.1, endWidth: 0.1), + GaugeRange(startValue: 80, endValue: 99.5, + color: Color(0xFF74B49B), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.1, endWidth: 0.1), + GaugeRange(startValue: 100, endValue: 120, + color: Color(0xFF00A8B5), + sizeUnit: GaugeSizeUnit.factor, + startWidth: 0.1, endWidth: 0.1), + ] + ) + ], + ); +} + +double _interval = 10; + + + diff --git a/lib/samples/gauge/pointers/multiple_needle.dart b/lib/samples/gauge/pointers/multiple_needle.dart new file mode 100644 index 00000000..50925bf3 --- /dev/null +++ b/lib/samples/gauge/pointers/multiple_needle.dart @@ -0,0 +1,260 @@ +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 MultipleNeedleExample extends StatefulWidget { + final SubItemList sample; + const MultipleNeedleExample(this.sample, {Key key}) : super(key: key); + + @override + _MultipleNeedleExampleState createState() => _MultipleNeedleExampleState(sample); +} + +class _MultipleNeedleExampleState extends State { + final SubItemList sample; + _MultipleNeedleExampleState(this.sample); + bool panelOpen; + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: Color(0xFFFFCD60) + ), + startAngle: 270, + endAngle: 270, + minimum: 0, + maximum: 12, radiusFactor: 0.9, + showFirstLabel: false, + 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), + pointers: [ + + NeedlePointer(value: 8, needleLength: 0.35, needleColor: Color(0xFFF67280), + lengthUnit: GaugeSizeUnit.factor, + needleStartWidth: 0, needleEndWidth: isTileView ? 3 : 5, enableAnimation: true, + knobStyle: KnobStyle(knobRadius: 0), + animationType: AnimationType.ease), + NeedlePointer(value: 3, needleLength: 0.85, + lengthUnit: GaugeSizeUnit.factor, + needleColor: Color(0xFFF67280), + needleStartWidth: 0, needleEndWidth: isTileView ? 3 : 5, enableAnimation: true, + animationType: AnimationType.ease, + knobStyle: KnobStyle( borderColor: Color(0xFFF67280), + borderWidth: 0.015, color: Colors.white, + sizeUnit: GaugeSizeUnit.factor, + knobRadius: isTileView ? 0.04 : 0.05)), + ] + ), + + + ], + ); +} + +void mainAxisLabelCreated(AxisLabelCreatedArgs args) { + if (args.text == '12') { + args.text = '12h'; + } +} + + + + diff --git a/lib/samples/gauge/pointers/multiple_ranges.dart b/lib/samples/gauge/pointers/multiple_ranges.dart new file mode 100644 index 00000000..9f3c710f --- /dev/null +++ b/lib/samples/gauge/pointers/multiple_ranges.dart @@ -0,0 +1,226 @@ +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 MultipleRangePointerExample extends StatefulWidget { + final SubItemList sample; + const MultipleRangePointerExample(this.sample, {Key key}) : super(key: key); + + @override + _MultipleRangePointerExampleState createState() => _MultipleRangePointerExampleState(sample); +} + +class _MultipleRangePointerExampleState extends State { + final SubItemList sample; + _MultipleRangePointerExampleState(this.sample); + bool panelOpen; + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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( + axes: [ + + RadialAxis( showLabels: false, showTicks: false, + startAngle: 270, endAngle: 270, minimum: 0, maximum: 100, + radiusFactor: 0.8, + axisLineStyle: AxisLineStyle( + thicknessUnit: GaugeSizeUnit.factor, + thickness: 0.15), + annotations: [GaugeAnnotation(angle: 180, + widget: Row(children: [Container( + child: Text('50', style: TextStyle(color: Color(0xFF00A8B5), + fontFamily: 'Times', + fontSize: isTileView ? 18 : 22, fontWeight: FontWeight.w400, fontStyle: FontStyle.italic + ),), + ), + Container(child: Text(' / 100', style: TextStyle( + fontFamily: 'Times', + fontSize: isTileView ? 18 : 22, fontWeight: FontWeight.w400, fontStyle: FontStyle.italic + ),),) + ],)), + ], + pointers:[RangePointer(value: 50, cornerStyle: CornerStyle.bothCurve, + enableAnimation: true, animationDuration: 1200, animationType: AnimationType.ease, + sizeUnit: GaugeSizeUnit.factor, + color: Color(0xFF00A8B5), width: 0.15), + ] + ), + ], + ); +} + + + + + + diff --git a/lib/samples/gauge/pointers/radial_marker.dart b/lib/samples/gauge/pointers/radial_marker.dart new file mode 100644 index 00000000..fcd95b05 --- /dev/null +++ b/lib/samples/gauge/pointers/radial_marker.dart @@ -0,0 +1,237 @@ +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 RadialMarkerExample extends StatefulWidget { + final SubItemList sample; + const RadialMarkerExample(this.sample, {Key key}) : super(key: key); + + @override + _RadialMarkerExampleState createState() => _RadialMarkerExampleState(sample); +} + +class _RadialMarkerExampleState extends State { + final SubItemList sample; + _RadialMarkerExampleState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: 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 + ))) + ), + 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, + startWidth: 0.4, endWidth: 0.4, + color: 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 new file mode 100644 index 00000000..5e2c83dd --- /dev/null +++ b/lib/samples/gauge/pointers/text_pointer.dart @@ -0,0 +1,254 @@ +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 RadialTextPointer extends StatefulWidget { + final SubItemList sample; + const RadialTextPointer(this.sample, {Key key}) : super(key: key); + + @override + _RadialTextPointerState createState() => _RadialTextPointerState(sample); +} + +class _RadialTextPointerState extends State { + final SubItemList sample; + _RadialTextPointerState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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, + sizeUnit: GaugeSizeUnit.factor, + color:Color(0xFFDD3800)), + GaugeRange(startValue:20.5,endValue:40,startWidth:0.45, + sizeUnit: GaugeSizeUnit.factor, + endWidth:0.45,color:Color(0xFFFF4100)), + GaugeRange(startValue:40.5,endValue:60,startWidth:0.45, + sizeUnit: GaugeSizeUnit.factor, + endWidth:0.45,color:Color(0xFFFFBA00)), + GaugeRange(startValue:60.5,endValue:80,startWidth:0.45, + sizeUnit: GaugeSizeUnit.factor, + endWidth:0.45,color:Color(0xFFFFDF10)), + GaugeRange(startValue:80.5,endValue:100, sizeUnit: GaugeSizeUnit.factor, + startWidth:0.45,endWidth:0.45,color:Color(0xFF8BE724)), + GaugeRange(startValue:100.5,endValue:120,startWidth:0.45,endWidth:0.45, + sizeUnit: GaugeSizeUnit.factor, + color: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, + 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, + 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'), + offsetUnit: GaugeSizeUnit.factor, + markerOffset: -0.12) + ], + + ), + + ], + ); +} + + + + + diff --git a/lib/samples/gauge/ranges/multiple_ranges.dart b/lib/samples/gauge/ranges/multiple_ranges.dart new file mode 100644 index 00000000..31698090 --- /dev/null +++ b/lib/samples/gauge/ranges/multiple_ranges.dart @@ -0,0 +1,226 @@ +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 MultipleRangesExample extends StatefulWidget { + final SubItemList sample; + const MultipleRangesExample(this.sample, {Key key}) : super(key: key); + + @override + _MultipleRangesExampleState createState() => _MultipleRangesExampleState(sample); +} + +class _MultipleRangesExampleState extends State { + final SubItemList sample; + _MultipleRangesExampleState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + setState((){ + _endWidth = MediaQuery.of(context).orientation == Orientation.portrait ? 10 : 6; + }); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getMultipleRangesExampleGauge(false)), + )); + }); + } +} + +class BackPanel extends StatefulWidget { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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) { + 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, + ))], + ranges: [ + GaugeRange(startValue: 0, endValue: 18, sizeUnit: GaugeSizeUnit.factor, + startWidth: 0, endWidth: 0.1, color: Color(0xFFA8AAE2) ), + GaugeRange(startValue: 20, endValue: 38, startWidth: 0.1, sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.15, color: Color.fromRGBO(168, 170, 226, 1)), + GaugeRange(startValue: 40, endValue: 58 ,startWidth: 0.15, + sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.2, color: Color(0xFF7B7DC7)), + GaugeRange(startValue: 60, endValue: 78, startWidth: 0.2, + sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.25, color: Color.fromRGBO(73, 76, 162, 1)), + ] + ), + + ], + ); +} + +double _endWidth = 10; + + + + + + diff --git a/lib/samples/gauge/ranges/range_dataLabel.dart b/lib/samples/gauge/ranges/range_dataLabel.dart new file mode 100644 index 00000000..fcb87218 --- /dev/null +++ b/lib/samples/gauge/ranges/range_dataLabel.dart @@ -0,0 +1,231 @@ +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 RangeDataLabelExample extends StatefulWidget { + final SubItemList sample; + const RangeDataLabelExample(this.sample, {Key key}) : super(key: key); + + @override + _RangeDataLabelExampleState createState() => _RangeDataLabelExampleState(sample); +} + +class _RangeDataLabelExampleState extends State { + final SubItemList sample; + _RangeDataLabelExampleState(this.sample); + bool panelOpen; + final 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(RangeDataLabelExample oldWidget) { + super.didUpdateWidget(oldWidget); + frontPanelVisible.removeListener(_subscribeToValueNotifier); + frontPanelVisible.addListener(_subscribeToValueNotifier); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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_dataLabel.dart'); + }, + ), + ), + ), + ], + appBarTitle: AnimatedSwitcher( + duration: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getRangeDataLabelExample(false)), + )); + }); + } +} + +class BackPanel extends StatefulWidget { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 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: 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: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: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: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 new file mode 100644 index 00000000..5d1b93af --- /dev/null +++ b/lib/samples/gauge/ranges/range_thickness.dart @@ -0,0 +1,222 @@ +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 RangeThicknessExample extends StatefulWidget { + final SubItemList sample; + const RangeThicknessExample(this.sample, {Key key}) : super(key: key); + + @override + _RangeThicknessExampleState createState() => _RangeThicknessExampleState(sample); +} + +class _RangeThicknessExampleState extends State { + final SubItemList sample; + _RangeThicknessExampleState(this.sample); + bool panelOpen; + final 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: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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 getRangeThicknessExampleGauge(bool isTileView) { + return SfRadialGauge( + axes: [ + 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, + ))], + ranges: [ + GaugeRange(startValue: 30, endValue: 100, startWidth: 0.05, + color : Color(0xFF00A8B5), 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 new file mode 100644 index 00000000..9ffa1b16 --- /dev/null +++ b/lib/samples/gauge/showcase/clock_sample.dart @@ -0,0 +1,362 @@ +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 ClockExample extends StatefulWidget { + final SubItemList sample; + const ClockExample(this.sample, {Key key}) : super(key: key); + + @override + _ClockExampleState createState() => _ClockExampleState(sample); +} + +class _ClockExampleState extends State { + final SubItemList sample; + _ClockExampleState(this.sample); + bool panelOpen; + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + Timer timer; + _FrontPanelState(this.sample); + + @override + void initState() { + super.initState(); + this.timer = Timer.periodic(Duration(milliseconds: 1000), updateData); + } + + void updateData(Timer timer){ + final double _previousValue = _value; + setState((){ + if(_previousValue >= 0 &&_previousValue < 12){ + _value = _value + 0.2; + } + else { + + _value = 0.2; + } + }); + } + + @override + void dispose() { + super.dispose(); + timer.cancel(); + } + + + @override + Widget build(BuildContext context) { + setState((){ + _centerX = MediaQuery.of(context).orientation == Orientation.portrait ? 0.3 : 0.45; + }); + + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getClockExample(false)), + )); + }); + } +} + +class BackPanel extends StatefulWidget { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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) { + return SfRadialGauge( + axes: [ + RadialAxis(startAngle: 270, + endAngle: 270, + radiusFactor: 0.2, + axisLabelStyle: GaugeTextStyle(fontSize: 6), + minimum: 0, + maximum: 12, + showFirstLabel: false, + offsetUnit: GaugeSizeUnit.factor, + interval: 2, + centerY: 0.65, + tickOffset: 0.03, + 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), + axisLineStyle: AxisLineStyle( + thickness: 0.03, thicknessUnit: GaugeSizeUnit.factor + ), + pointers: [ + NeedlePointer(value: 5, + needleLength: 0.7, + lengthUnit: GaugeSizeUnit.factor, + needleColor: Color(0xFF00A8B5), + needleStartWidth: 0.5, + needleEndWidth: 1, + knobStyle: KnobStyle(knobRadius: 0,), + ) + ] + ), + RadialAxis(startAngle: 270, + endAngle: 270, + axisLabelStyle: GaugeTextStyle(fontSize: 6,), + radiusFactor: 0.2, + labelOffset: 0.2, + offsetUnit: GaugeSizeUnit.factor, + minimum: 0, + maximum: 12, + showFirstLabel: false, + interval: 2, + 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, + lengthUnit: GaugeSizeUnit.factor, + thickness: 1,), + axisLineStyle: AxisLineStyle( + thicknessUnit: GaugeSizeUnit.factor, + thickness: 0.03 + ), + pointers: [ + NeedlePointer(value: 8, + needleLength: 0.7, + lengthUnit: GaugeSizeUnit.factor, + needleColor: Color(0xFF00A8B5), + needleStartWidth: 0.5, + needleEndWidth: 1, + knobStyle: KnobStyle(knobRadius: 0), + ) + ] + ), + RadialAxis(startAngle: 270, + endAngle: 270, + minimum: 0, + maximum: 12, + showFirstLabel: false, + interval: 1, + radiusFactor: 0.95, + labelOffset: 0.1, + 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), + axisLabelStyle: GaugeTextStyle(fontSize: isTileView ? 12 : 14), + axisLineStyle: AxisLineStyle( + thickness: 0.01, thicknessUnit: GaugeSizeUnit.factor + ), + pointers: [ + + + NeedlePointer(needleLength: 0.6, + lengthUnit: GaugeSizeUnit.factor, + needleStartWidth: 1, + needleEndWidth: 2, + value: 10, + needleColor: _needleColor, + knobStyle: KnobStyle(knobRadius: 0) + ), + NeedlePointer(needleLength: 0.85, + lengthUnit: GaugeSizeUnit.factor, + needleStartWidth: 0.5, + needleEndWidth: 1.5, + value: 2, + knobStyle: KnobStyle(color: Color(0xFF00A8B5), + sizeUnit: GaugeSizeUnit.factor, + knobRadius: 0.05), + needleColor: _needleColor + ), + NeedlePointer(needleLength: 0.9, + lengthUnit: GaugeSizeUnit.factor, + enableAnimation: true, + animationType: AnimationType.bounceOut, + needleStartWidth: 0.8, + needleEndWidth: 0.8, + value: _value, + needleColor: Color(0xFF00A8B5), + tailStyle: TailStyle(width: 0.8, length: 0.2, + lengthUnit: GaugeSizeUnit.factor, + color: Color(0xFF00A8B5)), + knobStyle: KnobStyle(knobRadius: 0.03, + sizeUnit: GaugeSizeUnit.factor, + color: Colors.white) + ), + ] + ), + ], + ); +} + +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 new file mode 100644 index 00000000..74594a64 --- /dev/null +++ b/lib/samples/gauge/showcase/distance_tracker.dart @@ -0,0 +1,232 @@ +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 DistanceTrackerExample extends StatefulWidget { + final SubItemList sample; + const DistanceTrackerExample(this.sample, {Key key}) : super(key: key); + + @override + _DistanceTrackerExampleState createState() => _DistanceTrackerExampleState(sample); +} + +class _DistanceTrackerExampleState extends State { + final SubItemList sample; + _DistanceTrackerExampleState(this.sample); + bool panelOpen; + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getDistanceTrackerExample(false)), + )); + }); + } +} + +class BackPanel extends StatefulWidget { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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) { + return SfRadialGauge( + axes: [ + + RadialAxis(showLabels: false, showTicks: false, radiusFactor: 0.8, + 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: 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: Color(0xFFF67280), + )] + ), + + + ], + ); +} + + + + diff --git a/lib/samples/gauge/showcase/gauge_overview.dart b/lib/samples/gauge/showcase/gauge_overview.dart new file mode 100644 index 00000000..e01e1bb0 --- /dev/null +++ b/lib/samples/gauge/showcase/gauge_overview.dart @@ -0,0 +1,287 @@ +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 GaugeOverviewExample extends StatefulWidget { + final SubItemList sample; + const GaugeOverviewExample(this.sample, {Key key}) : super(key: key); + + @override + _GaugeOverviewExampleState createState() => _GaugeOverviewExampleState(sample); +} + +class _GaugeOverviewExampleState extends State { + final SubItemList sample; + _GaugeOverviewExampleState(this.sample); + bool panelOpen; + final 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); + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + builder: (context, _, 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: Duration(milliseconds: 1000), + child: Text(sample.title.toString())), + backLayer: BackPanel(sample), + frontLayer: FrontPanel(sample), + sideDrawer: null, + headerClosingHeight: 350, + titleVisibleOnPanelClosed: true, + borderRadius: BorderRadius.vertical( + top: Radius.circular(12), bottom: Radius.circular(0)), + ), + )); + } +} + +class FrontPanel extends StatefulWidget { + final SubItemList subItemList; + FrontPanel(this.subItemList); + + @override + _FrontPanelState createState() => _FrontPanelState(this.subItemList); +} + +class _FrontPanelState extends State { + final SubItemList sample; + _FrontPanelState(this.sample); + @override + Widget build(BuildContext context) { + setState((){ + _interval = MediaQuery.of(context).orientation == Orientation.portrait ? 10 : 20; + }); + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, model) { + return Scaffold( + backgroundColor: model.cardThemeColor, + body: Padding( + padding: const EdgeInsets.fromLTRB(5, 0, 5, 50), + child: Container(child: getGaugeOverviewExample(false)), + )); + }); + } +} + +class BackPanel extends StatefulWidget { + final SubItemList sample; + + BackPanel(this.sample); + + @override + _BackPanelState createState() => _BackPanelState(sample); +} + +class _BackPanelState extends State { + final SubItemList sample; + GlobalKey _globalKey = GlobalKey(); + _BackPanelState(this.sample); + + @override + void initState() { + WidgetsBinding.instance.addPostFrameCallback(_afterLayout); + super.initState(); + } + + _afterLayout(_) { + _getSizesAndPosition(); + } + + _getSizesAndPosition() { + final RenderBox renderBoxRed = _globalKey.currentContext.findRenderObject(); + final size = renderBoxRed.size; + final position = renderBoxRed.localToGlobal(Offset.zero); + double appbarHeight = 60; + BackdropState.frontPanelHeight = + position.dy + (size.height - appbarHeight) + 20; + } + + @override + Widget build(BuildContext context) { + return ScopedModelDescendant( + rebuildOnChange: true, + builder: (context, _, 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( + axes: [ + RadialAxis(startAngle: 130, + endAngle: 50, + minimum: -50, + maximum: 150, + interval: isTileView ? 20 : _interval, + minorTicksPerInterval: 9, + showAxisLine: false, + radiusFactor: 0.9, + labelOffset: 8, + ranges: [ + GaugeRange(startValue: -50, + endValue: 0, + startWidth: 0.265, + sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.265, + color: Color.fromRGBO(34,144,199, 0.75)), + GaugeRange(startValue: 0, + endValue: 10, + startWidth: 0.265, + sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.265, + color: Color.fromRGBO(34,195,199, 0.75)), + GaugeRange(startValue: 10, + endValue: 30, + startWidth: 0.265, + sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.265, + color: Color.fromRGBO(123,199,34, 0.75)), + GaugeRange(startValue: 30, + endValue: 40, + startWidth: 0.265, + sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.265, + color: Color.fromRGBO(238,193,34, 0.75)), + GaugeRange(startValue: 40, + endValue: 150, + startWidth: 0.265, + sizeUnit: GaugeSizeUnit.factor, + endWidth: 0.265, + color: Color.fromRGBO(238,79,34, 0.65)), + ], + annotations: [ + GaugeAnnotation(angle: 90, positionFactor: 0.35, + widget: Container(child: Text( + 'Temp.°C', style: TextStyle(color: Color(0xFFF8B195), + fontSize: 16)))), + GaugeAnnotation(angle: 90, positionFactor: 0.8, + widget: Container( + child: Text(' 22.5 ', style: TextStyle( + fontWeight: FontWeight.bold, + fontSize: 20),), + ) + ) + ], + + pointers: [ + NeedlePointer(value: 22.5, + needleLength: 0.6, + lengthUnit: GaugeSizeUnit.factor, + needleStartWidth: isTileView ? 0 : 1, + needleEndWidth:isTileView ? 5 : 8, + animationType: AnimationType.easeOutBack, + enableAnimation: true, + animationDuration: 1200, + knobStyle: KnobStyle(knobRadius: isTileView ? 0.06 : 0.09, + sizeUnit: GaugeSizeUnit.factor, + borderColor: Color(0xFFF8B195), + color: Colors.white, + borderWidth: isTileView ? 0.035 : 0.05), + tailStyle: TailStyle(color: Color(0xFFF8B195), + width:isTileView ? 4 : 8, + lengthUnit: GaugeSizeUnit.factor, + length: isTileView ? 0.15 : 0.2), + needleColor: 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) + ) + + ], + ); +} + +double _interval = 10; + + + + diff --git a/pubspec.yaml b/pubspec.yaml index 2b204255..8ee6b15f 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -15,6 +15,7 @@ dependencies: url_launcher: ^5.0.3 intl: ^0.16.0 syncfusion_flutter_charts: ^1.0.0-beta.5 + syncfusion_flutter_gauges: ^1.0.0-beta dev_dependencies: flutter_test: