We have all come across a few investment planning applications and webpages. Major portions of them include interactive sliders and a radial gauge to show the output, along with some text widgets.
To design a systematic investment plan (SIP) calculator, we need interactive widgets that provide a smooth UI and a rich set of customization options.
The Syncfusion Flutter Slider is a highly interactive UI widget. It allows users to select a value from a larger data set. It provides rich features, such as numeric and date-time labels, a thumb icon, ticks, dividers, and tooltips.
Our Flutter Radial Gauge is a data visualization widget. It displays numerical values on a circular scale. Its rich set of features, such as axes, ranges, pointers, and annotations, are fully customizable and extendable.
Let’s create an attractive systematic investment calculator using our Slider and Radial Gauge widgets.
Note: If you are new to our Flutter widgets, please refer to the Flutter Slider and Radial Gauge documentation to get started with them.
Follow these steps to create an investment (SIP) calculator in your Flutter application:
dependencies: flutter pub add syncfusion_flutter_sliders: ^xx.x.xx
import 'package:syncfusion_flutter_sliders/sliders.dart';
dependencies: flutter pub add syncfusion_flutter_gauges: ^xx.x.xx
import 'package:syncfusion_flutter_gauges/gauges.dart';
We are going to render the Slider widget to get the initial investment data and a text field to display the selected value.
The following code explains how to render a default Slider widget in your application.
double _value = 0.5;
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: SfSlider(
value: _value,
onChanged: (dynamic newValue){
setState(() {
_value = newValue;
});
},
),
),
);
} There are plenty of customization options available in our Flutter Slider widget. We are going to set the size and color of this slider. We will define the minimum and maximum values for the investment option, too.
Refer to the following code example.
SfSliderTheme(
data: SfSliderThemeData(
activeTrackHeight: 5,
inactiveTrackHeight: 5,
activeTrackColor: const Color(0xff00d09c),
inactiveTrackColor: Colors.black12,
thumbColor: Colors.white,
trackCornerRadius: 0,
thumbRadius: 15,
),
child: SfSlider(
min: 500,
max: 100000,
// We will change this value later
value: 800,
),
) Next, add the slider values to the text field like in the following code example.
NumberFormat decimalFormat = NumberFormat.decimalPattern('en_us');
double _monthlyInvestment = 500;
_controller.text = '\ Then, use the onChanged callback to dynamically change the text field.
Refer to the following code example.
final TextEditingController _controller = TextEditingController();
TextField(
controller: _controller,
decoration: const InputDecoration(
fillColor: Color(0xffe5faf5),
filled: true,
contentPadding: EdgeInsets.all(15),
border: OutlineInputBorder(
borderSide: BorderSide.none
),
),
style: const TextStyle(
fontSize: 17,
fontWeight: FontWeight.bold,
color: Colors.green
),
),
SfSlider(
min: 500,
max: 100000,
value: _monthlyInvestment,
onChanged: (dynamic value) {
setState(() {
_monthlyInvestment = value;
_controller.text = '\ For this application, we need to add two more Slider widgets for the expected return rate and time period. Repeat the previous steps to render these sliders. After adding all the sliders, the UI will look like the following GIF image.
Now, add the Flutter Radial Gauge widget and show the Sliders’ values in it.
Refer to the following code example.
SfRadialGauge(
axes: <RadialAxis>[
RadialAxis(
minimum: 0,
maximum: 30,
useRangeColorForAxis: true,
startAngle: 270,
endAngle: 270,
showLabels: false,
showTicks: false,
axisLineStyle: const AxisLineStyle(
thicknessUnit: GaugeSizeUnit.factor,
thickness: 0.35,
color: Color(0xFF98a4ff)),
ranges: <GaugeRange>[
GaugeRange(
startValue: 0,
endValue: 17,
color: const Color(0xFF98a4ff),
sizeUnit: GaugeSizeUnit.factor,
startWidth: 0.35,
endWidth: 0.35),
GaugeRange(
// This will update the gauge based on returns.
startValue: _expectedReturnRate,
endValue: 30,
sizeUnit: GaugeSizeUnit.factor,
color: const Color(0xFF5367ff),
startWidth: 0.35,
endWidth: 0.35),
],
),
],
), So, the major UI part is done. Now, we create labels to show the results from our data visualization widgets. This is just a business logic that involves simple calculations.
For more details, check the Flutter SIP Calculator project.
Once done, the web UI will look like the following GIF image.
The mobile layout will look like the following GIF image.
Thanks for reading! I hope this post was useful and you enjoyed creating a SIP calculator in your app using Syncfusion Flutter widgets.
Try out the steps in this blog post and easily estimate your investment returns with an elegant user experience!
Browse our documentation to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play, App Store, Web, Windows Store, macOS, and Snapcraft (Linux).
If you aren’t a customer yet, you can try our 30-day free trial to check out these features.
You can contact us through our support forum, feedback portal, or support tickets. We are always happy to assist you!
+ decimalFormat.format(_monthlyInvestment.floor()); TextField( controller: _controller, decoration: const InputDecoration( fillColor: Color(0xffe5faf5), filled: true, contentPadding: EdgeInsets.all(15), border: OutlineInputBorder( borderSide: BorderSide.none ), ), style: const TextStyle( fontSize: 17, fontWeight: FontWeight.bold, color: Colors.green ), ), SfSlider( min: 500, max: 100000, value: _monthlyInvestment, ),
Then, use the onChanged callback to dynamically change the text field.
Refer to the following code example.
For this application, we need to add two more Slider widgets for the expected return rate and time period. Repeat the previous steps to render these sliders. After adding all the sliders, the UI will look like the following GIF image.
Now, add the Flutter Radial Gauge widget and show the Sliders’ values in it.
Refer to the following code example.
So, the major UI part is done. Now, we create labels to show the results from our data visualization widgets. This is just a business logic that involves simple calculations.
For more details, check the Flutter SIP Calculator project.
Once done, the web UI will look like the following GIF image.
The mobile layout will look like the following GIF image.
Thanks for reading! I hope this post was useful and you enjoyed creating a SIP calculator in your app using Syncfusion Flutter widgets.
Try out the steps in this blog post and easily estimate your investment returns with an elegant user experience!
Browse our documentation to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play, App Store, Web, Windows Store, macOS, and Snapcraft (Linux).
If you aren’t a customer yet, you can try our 30-day free trial to check out these features.
You can contact us through our support forum, feedback portal, or support tickets. We are always happy to assist you!
+ decimalFormat.format(_monthlyInvestment.floor()); }); } )
For this application, we need to add two more Slider widgets for the expected return rate and time period. Repeat the previous steps to render these sliders. After adding all the sliders, the UI will look like the following GIF image.
Now, add the Flutter Radial Gauge widget and show the Sliders’ values in it.
Refer to the following code example.
So, the major UI part is done. Now, we create labels to show the results from our data visualization widgets. This is just a business logic that involves simple calculations.
For more details, check the Flutter SIP Calculator project.
Once done, the web UI will look like the following GIF image.
The mobile layout will look like the following GIF image.
Thanks for reading! I hope this post was useful and you enjoyed creating a SIP calculator in your app using Syncfusion Flutter widgets.
Try out the steps in this blog post and easily estimate your investment returns with an elegant user experience!
Browse our documentation to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play, App Store, Web, Windows Store, macOS, and Snapcraft (Linux).
If you aren’t a customer yet, you can try our 30-day free trial to check out these features.
You can contact us through our support forum, feedback portal, or support tickets. We are always happy to assist you!
+ decimalFormat.format(_monthlyInvestment.floor()); TextField( controller: _controller, decoration: const InputDecoration( fillColor: Color(0xffe5faf5), filled: true, contentPadding: EdgeInsets.all(15), border: OutlineInputBorder( borderSide: BorderSide.none ), ), style: const TextStyle( fontSize: 17, fontWeight: FontWeight.bold, color: Colors.green ), ), SfSlider( min: 500, max: 100000, value: _monthlyInvestment, ),
Then, use the onChanged callback to dynamically change the text field.
Refer to the following code example.
For this application, we need to add two more Slider widgets for the expected return rate and time period. Repeat the previous steps to render these sliders. After adding all the sliders, the UI will look like the following GIF image.
Now, add the Flutter Radial Gauge widget and show the Sliders’ values in it.
Refer to the following code example.
So, the major UI part is done. Now, we create labels to show the results from our data visualization widgets. This is just a business logic that involves simple calculations.
For more details, check the Flutter SIP Calculator project.
Once done, the web UI will look like the following GIF image.
The mobile layout will look like the following GIF image.
Thanks for reading! I hope this post was useful and you enjoyed creating a SIP calculator in your app using Syncfusion Flutter widgets.
Try out the steps in this blog post and easily estimate your investment returns with an elegant user experience!
Browse our documentation to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this GitHub repo. Don’t miss our demo app in Google Play, App Store, Web, Windows Store, macOS, and Snapcraft (Linux).
If you aren’t a customer yet, you can try our 30-day free trial to check out these features.
You can contact us through our support forum, feedback portal, or support tickets. We are always happy to assist you!