DEV Community

Cover image for Simple Steps to Create an Investment (SIP) Calculator in Flutter
Suresh Mohan for Syncfusion, Inc.

Posted on • Originally published at syncfusion.com on

Simple Steps to Create an Investment (SIP) Calculator in Flutter

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.

Creating an Investment (SIP) Calculator in Flutter

Creating an Investment (SIP) Calculator in Flutter

Note: If you are new to our Flutter widgets, please refer to the Flutter Slider and Radial Gauge documentation to get started with them.

Creating an investment (SIP) calculator in Flutter

Follow these steps to create an investment (SIP) calculator in your Flutter application:

  1. Install and configure the Flutter widgets.
  2. Add and configure the Flutter Slider widget.
  3. Add the Radial Gauge widget to show results.
  4. Add text widgets to show results.

Step #1: Install and configure the Flutter widgets

  1. First, create a simple Flutter project using the instructions given in the Getting Started with your first Flutter app documentation.
  2. Then, add the Syncfusion Flutter Slider dependency in the pubspec.yaml file with the current version of the Syncfusion Flutter Sliders package. Refer to the following code.
dependencies:
flutter pub add syncfusion_flutter_sliders: ^xx.x.xx
Enter fullscreen mode Exit fullscreen mode
  1. Now, import the Slider library using the following code.
import 'package:syncfusion_flutter_sliders/sliders.dart';
Enter fullscreen mode Exit fullscreen mode
  1. Add the Syncfusion Flutter Gauges dependency in the pubspec.yaml file with the current version of the Syncfusion Flutter Gauges package. Refer to the following code.
dependencies:
flutter pub add syncfusion_flutter_gauges: ^xx.x.xx
Enter fullscreen mode Exit fullscreen mode
  1. Now, import the Gauges library using the following code.
import 'package:syncfusion_flutter_gauges/gauges.dart';
Enter fullscreen mode Exit fullscreen mode

Step #2: Add and configure the Flutter Slider wdget

We are going to render the Slider widget to get the initial investment data and a text field to display the selected value.

Slider Displaying Investment Data

Slider Displaying Investment Data

Default slider

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;
          });
        },
      ),
    ),
  );
}
Enter fullscreen mode Exit fullscreen mode

Rendering a Default Slider in a Flutter App

Rendering a Default Slider in a Flutter App

Customize Slider appearance

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, 
         ),
 )
Enter fullscreen mode Exit fullscreen mode

Customizing the Slider Appearance in Flutter SIP Calculator

Customizing the Slider Appearance in Flutter SIP Calculator

Add the slider values to the text field

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 = '\$' + 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,
),
Enter fullscreen mode Exit fullscreen mode

Adding Slider Values to the Text Field in Flutter SIP Calculator

Adding Slider Values to the Text Field in Flutter SIP Calculator

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 = '\$' + decimalFormat.format(_monthlyInvestment.floor());
             }); 
          }
)
Enter fullscreen mode Exit fullscreen mode

Dynamically changing the Slider Values in the Text Field of the Flutter SIP Calculator

Dynamically changing the Slider Values in the Text Field of the Flutter SIP Calculator

Create other sliders

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.

Adding and Configuring Sliders in Flutter SIP Calculator

Adding and Configuring Sliders in Flutter SIP Calculator

Step #3: Add the Flutter Radial Gauge widget to show the results

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),
                ],
              ),
            ],
          ),
Enter fullscreen mode Exit fullscreen mode

Changing Radial Gauge Values with Respect to Slider in Flutter SIP Calculator

Changing Radial Gauge Values with Respect to Slider in Flutter SIP Calculator

Step #4: Add labels to show the results

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.

Web View of Investment (SIP) Calculator in Flutter

Web View of Investment (SIP) Calculator in Flutter

Mobile View of Investment (SIP) Calculator in Flutter

Mobile View of Investment (SIP) Calculator in Flutter

The mobile layout will look like the following GIF image.

Conclusion

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!

Related blogs

Discussion (0)