Simple Steps to Create an Investment (SIP) Calculator in Flutter
Tags: flutter, webdev, mobile, dart
Published: 2022-01-25 14:03:27

---
title: Simple Steps to Create an Investment (SIP) Calculator in Flutter
published: true
date: 2022-01-25 12:03:47 UTC
tags: flutter, webdev, mobile, dart
canonical_url: https://www.syncfusion.com/blogs/post/simple-steps-to-create-an-investment-sip-calculator-in-flutter.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ba6643gatig1bvh4zd4u.png
---

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)](https://en.wikipedia.org/wiki/Systematic_Investment_Plan "Wikipedia page for Systematic Investment Plan") calculator, we need interactive widgets that provide a smooth UI and a rich set of customization options.

The Syncfusion [Flutter Slider](https://www.syncfusion.com/flutter-widgets/flutter-slider "Flutter Slider widget") 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](https://www.syncfusion.com/flutter-widgets/flutter-radial-gauge "Flutter Radial Gauge widget") 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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Creating-an-Investment-SIP-Calculator-in-Flutter-1.gif)
<figcaption>Creating an Investment (SIP) Calculator in Flutter</figcaption>

**Note:** If you are new to our Flutter widgets, please refer to the [Flutter Slider](https://help.syncfusion.com/flutter/slider/overview "Flutter Slider widget documentation") and [Radial Gauge documentation](https://help.syncfusion.com/flutter/radial-gauge/overview "Flutter 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](https://flutter.dev/docs/get-started/test-drive?tab=vscode#create-app "Documentation to create a 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](https://pub.dev/packages/syncfusion_flutter_sliders "Flutter Sliders library on pub.dev") package.  
Refer to the following code.
```dart
dependencies:
flutter pub add syncfusion_flutter_sliders: ^xx.x.xx
```
3. Now, import the Slider library using the following code.
```dart
import 'package:syncfusion_flutter_sliders/sliders.dart';
```
4. Add the Syncfusion Flutter Gauges dependency in the pubspec.yaml file with the current version of the [Syncfusion Flutter Gauges](https://pub.dev/packages/syncfusion_flutter_gauges "Flutter Gauges library on pub.dev") package.  
Refer to the following code.
```dart
dependencies:
flutter pub add syncfusion_flutter_gauges: ^xx.x.xx
```
5. Now, import the Gauges library using the following code.
```dart
import 'package:syncfusion_flutter_gauges/gauges.dart';
```

### 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](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Slider-Displaying-Investment-Data-1.png)
<figcaption>Slider Displaying Investment Data</figcaption>

#### Default slider

The following code explains how to render a default Slider widget in your application.

```dart
double _value = 0.5;

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Center(
      child: SfSlider(
        value: _value,
        onChanged: (dynamic newValue){
          setState(() {
            _value = newValue;
          });
        },
      ),
    ),
  );
}
```

![Rendering a Default Slider in a Flutter App](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Rendering-a-Default-Slider-in-a-Flutter-App.png)
<figcaption>Rendering a Default Slider in a Flutter App</figcaption>

#### 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.

```dart
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, 
         ),
 )
```

![Customizing the Slider Appearance in Flutter SIP Calculator](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Customizing-the-Slider-Appearance-in-SIP-Calculator.png)
<figcaption>Customizing the Slider Appearance in Flutter SIP Calculator</figcaption>

#### Add the slider values to the text field

Next, add the slider values to the text field like in the following code example.

```dart
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,
),
```

![Adding Slider Values to the Text Field in Flutter SIP Calculator](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Adding-Slider-Values-to-the-Text-Field-in-Flutter-SIP-Calculator.png)
<figcaption>Adding Slider Values to the Text Field in Flutter SIP Calculator</figcaption>

Then, use the [onChanged](https://pub.dev/documentation/syncfusion_flutter_sliders/latest/sliders/SfRangeSelector/onChanged.html "onChanged property of Flutter Slider") callback to dynamically change the text field.

Refer to the following code example.

```dart
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());
             }); 
          }
)
```

![Dynamically changing the Slider Values in the Text Field of the Flutter SIP Calculator](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Dynamically-changing-the-Slider-Values-in-the-Text-Field-of-the-Flutter-SIP-Calculator.gif)
<figcaption>Dynamically changing the Slider Values in the Text Field of the Flutter SIP Calculator</figcaption>

#### 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  ](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Adding-and-Configuring-Sliders-in-Flutter-SIP-Calculator-.png)
<figcaption>Adding and Configuring Sliders in Flutter SIP Calculator</figcaption>

### 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.

```dart
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),
                ],
              ),
            ],
          ),
```

![Changing Radial Gauge Values with Respect to Slider in Flutter SIP Calculator](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Changing-Radial-Gauge-Values-with-Respect-to-Slider-in-Flutter-SIP-Calculator.gif)
<figcaption>Changing Radial Gauge Values with Respect to Slider in Flutter SIP Calculator</figcaption>

### Step #4: Add labels to show the results

So, the major UI part is done. Now, we create [labels](https://api.flutter.dev/flutter/material/InputDecoration/label.html "label property in Flutter") 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](https://github.com/SyncfusionExamples/flutter_sip_calculator "Flutter SIP Calculator project on GitHub").

Once done, the web UI will look like the following GIF image.

![Web View of Investment (SIP) Calculator in Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Web-View-of-Investment-SIP-Calculator-in-Flutter.gif)
<figcaption>Web View of Investment (SIP) Calculator in Flutter</figcaption>

![Mobile View of Investment (SIP) Calculator in Flutter](https://www.syncfusion.com/blogs/wp-content/uploads/2022/01/Mobile-View-of-Investment-SIP-Calculator-in-Flutter-1.gif)
<figcaption>Mobile View of Investment (SIP) Calculator in Flutter</figcaption>

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](https://www.syncfusion.com/flutter-widgets "Syncfusion Flutter widgets") widgets.

Try out the steps in this blog post and easily estimate your investment returns with an elegant user experience!

Browse our [documentation](https://help.syncfusion.com/flutter/introduction/overview "Introduction to Syncfusion Flutter Widgets") to learn more about our other Flutter widgets. You can also see our Syncfusion Flutter app with many examples in this [GitHub repo](https://github.com/syncfusion/flutter-examples "Flutter demos on GitHub"). Don’t miss our demo app in [Google Play](https://play.google.com/store/apps/details?id=com.syncfusion.flutter.examples&hl=en "Syncfusion Flutter UI Widgets on Google Play Store"), [App Store](https://apps.apple.com/in/app/syncfusion-flutter-ui-widgets/id1475231341 "Syncfusion Flutter UI Widgets on the App Store"), [Web](https://flutter.syncfusion.com/ "Syncfusion Flutter UI Widgets online demos"), [Windows Store](https://www.microsoft.com/en-in/p/syncfusion-flutter-gallery/9nhnbwcsf85d#activetab=pivot:overviewtab "Syncfusion Flutter UI Widgets on the Windows Store"), [macOS](https://install.appcenter.ms/orgs/syncfusion-demos/apps/syncfusion-flutter-gallery/distribution_groups/release "Syncfusion Flutter UI Widgets on the App Center"), and [Snapcraft (Linux)](https://snapcraft.io/syncfusion-flutter-gallery "Syncfusion Flutter UI Widgets on the SnapCraft").

If you aren’t a customer yet, you can try our 30-day [free trial](https://www.syncfusion.com/downloads "Free evaluation of the Syncfusion Essential Studio") to check out these features.

You can contact us through our [support forum](https://www.syncfusion.com/forums "Syncfusion support forum"), [feedback portal](https://www.syncfusion.com/feedback "Syncfusion Feedback Portal"), or [support tickets](https://support.syncfusion.com/ "Syncfusion support portal"). We are always happy to assist you!

## Related blogs

- [What’s New in 2021 Volume 4: Flutter PDF Viewer](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-4-flutter-pdf-viewer.aspx "What’s New in 2021 Volume 4: Flutter PDF Viewer blog")
- [What’s New in 2021 Volume 4: Flutter](https://www.syncfusion.com/blogs/post/whats-new-in-2021-volume-4-flutter.aspx "What’s New in 2021 Volume 4: Flutter blog")
- [Customizing Axes in Flutter Charts: A Complete Guide](https://www.syncfusion.com/blogs/post/customizing-axes-in-flutter-charts-a-complete-guide.aspx "Customizing Axes in Flutter Charts: A Complete Guide blog")
- [How to Update Markers in Flutter Maps from Firebase Database](https://www.syncfusion.com/blogs/post/how-to-update-markers-in-flutter-maps-from-firebase-database.aspx "How to Update Markers in Flutter Maps from Firebase Database blog")