Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (161).NET Core  (29).NET MAUI  (63)Angular  (74)ASP.NET  (50)ASP.NET Core  (79)ASP.NET MVC  (88)Azure  (36)Blazor  (152)DocIO  (23)Essential JS 2  (84)Essential Studio  (172)File Formats  (28)Flutter  (123)JavaScript  (186)Microsoft  (113)PDF  (67)React  (61)Succinctly series  (128)Syncfusion  (609)TypeScript  (31)Uno Platform  (3)UWP  (4)Vue  (39)Webinar  (35)Windows Forms  (59)WinUI  (52)WPF  (138)Xamarin  (155)XlsIO  (25)Other CategoriesBarcode  (5)BI  (29)Bold BI  (5)Build conference  (6)Business intelligence  (54)Button  (4)C#  (119)Chart  (57)Cloud  (12)Company  (445)Dashboard  (8)Data Science  (3)Data Validation  (6)DataGrid  (55)Development  (394)Doc  (7)DockingManager  (1)eBook  (96)Enterprise  (22)Entity Framework  (5)Essential Tools  (14)Excel  (23)Extensions  (18)File Manager  (4)Gantt  (11)Gauge  (11)Git  (4)Grid  (28)HTML  (10)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (311)Mobile MVC  (9)OLAP server  (1)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (30)Performance  (9)PHP  (1)PivotGrid  (4)Predictive Analytics  (6)Report Server  (3)Reporting  (10)Reporting / Back Office  (11)Rich Text Editor  (7)Road Map  (10)Scheduler  (36)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (22)Solution Services  (3)Spreadsheet  (11)SQL  (8)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (11)Tips and Tricks  (92)UI  (224)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (23)Visual Studio Code  (16)Web  (371)What's new  (213)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Share on twitter
Share on facebook
Share on linkedin
Simple Steps to Create an Investment (SIP) Calculator in Flutter

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
  3. Now, import the Slider library using the following code.
    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 package.
    Refer to the following code.

    dependencies:
    flutter pub add syncfusion_flutter_gauges: ^xx.x.xx
  5. Now, import the Gauges library using the following code.
    import 'package:syncfusion_flutter_gauges/gauges.dart';

Step #2: Add and configure the Flutter Slider widget

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;
          });
        },
      ),
    ),
  );
}
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, 
         ),
 )
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,
),
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());
             }); 
          }
)
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),
                ],
              ),
            ],
          ),
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

The mobile layout will look like the following GIF image.

Mobile View of Investment (SIP) Calculator in Flutter
Mobile View of Investment (SIP) Calculator in Flutter

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 PlayApp StoreWebWindows StoremacOS, 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 forumfeedback portal, or support tickets. We are always happy to assist you! 

Related blogs

Tags:

Share this post:

Share on twitter
Share on facebook
Share on linkedin
Popular Now

Be the first to get updates

Subscribe RSS feed
Scroll To Top