How to Display Currency Format with Separators in EMI Calculator in Flutter

I build a EMI calculator in flutter, but my results display as e.g 1250568.00 but wan it to display as N$ 1,250,568.00

i have tries the intl package but get a error on Text(f.format(_tiResults)), as explained how to implement it. also tried the MoneyMask package to no avail.

import 'package:homenet/pages/home_page.dart';
import 'dart:math';

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List _durationTypes = ['Month(s)', 'Year(s)'];
  String _durationType = "Year(s)";
  String _miResult = "";
  String _tiResult = "";
  String _tcResult = "";
  bool _switchValue = true;

  final TextEditingController _principalAmount = TextEditingController();
  final TextEditingController _interestRate = TextEditingController();
  final TextEditingController _loanDuration = TextEditingController();

  _onClear(){
    setState(() {
      _principalAmount.text = "";
      _interestRate.text = "";
      _loanDuration.text = "";
      _miResult = "";
      _tiResult = "";
      _tcResult = "";
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      resizeToAvoidBottomPadding: false,
      appBar: AppBar(
        backgroundColor: new Color(0xFFFA983A),
        title: InkWell(
          onTap: (){
            Navigator.push(context,
              MaterialPageRoute(builder: (context) => new HomePage()));},
          child: Image.asset(
            'assets/images/logo_white.png',
            fit: BoxFit.cover,
          ),
        ),
        elevation: 0.0,
        centerTitle: true,
        actions: <Widget>[
          new IconButton(
            icon: new Icon(Icons.cancel, size: 30,),
            onPressed: () {
              _onClear();
            },
          ),
        ],
      ),
      body: Center(
        child: Container(
          margin: EdgeInsets.all(24),
          child: Column(
            children: <Widget>[
              Container(
                child: TextField(
                  cursorColor: Color(0xFFFA983A),
                  controller: _principalAmount,
                  decoration:
                      InputDecoration(
                  icon: Icon(Icons.monetization_on),
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(25),
                  gapPadding: 5),
                  labelText: "Enter Principal Amount"),

                  keyboardType: TextInputType.numberWithOptions(),
                ),
              ),
              SizedBox(
                height: 12,
              ),
              Container(
                child: TextField(
                  cursorColor: Color(0xFFFA983A),
                  controller: _interestRate,
                  decoration:
                      InputDecoration(
                          icon: Icon(Icons.show_chart),
                          border: OutlineInputBorder(
                              borderRadius: BorderRadius.circular(25),
                              gapPadding: 5),
                          labelText: "Interest Rate per Annum %"),
                  keyboardType: TextInputType.numberWithOptions(),
                ),
              ),
              SizedBox(
                height: 12,
              ),
              Row(
                children: <Widget>[
                  Flexible(
                    flex: 3,
                    child: Container(
                      child: TextField(
                        cursorColor: Color(0xFFFA983A),
                        controller: _loanDuration,
                        decoration: InputDecoration(
                            icon: Icon(Icons.date_range),
                            border: OutlineInputBorder(
                                borderRadius: BorderRadius.circular(25),
                                gapPadding: 5),
                            labelText: "Loan Duration"),
                        keyboardType: TextInputType.numberWithOptions(),
                      ),
                    ),
                  ),
//                  TODO: ========= SWITCH ================
                  Flexible(
                    flex: 1,
                    child: Column(
                      children: <Widget>[
                        Text(
                          _durationType,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Switch(
                            activeColor: Color(0xFFFA983A),
                            value: _switchValue,
                            onChanged: (bool value) {
                              print(value);

                              if (value) {
                                _durationType = _durationTypes[1];
                              } else {
                                _durationType = _durationTypes[0];
                              }

                              setState(() {
                                _switchValue = value;
                              });
                            }),
                      ],
                    ),
                  ),
                ],
              ),
              SizedBox(
                height: 12,
              ),
//              TODO: ============== Button ============
              Flexible(
                child: FlatButton(
                  padding: EdgeInsets.fromLTRB(48, 8, 48, 8),
                  onPressed: _handleCalculation,
                  child: Text(
                    "CALCULATE",
                    style: TextStyle(color: Colors.white),
                  ),
                  color: Color(0xFFFA983A),
                ),
              ),
              SizedBox(
                height: 12,
              ),
//              TODO: Results Widget =====================================
              monthlyInstalmentsResult(_miResult),
              SizedBox(
                height: 12,
              ),
              totalInterestResult(_tiResult),
              SizedBox(
                height: 12,
              ),
              totalCostResult(_tcResult),
              SizedBox(
                height: 12,
              ),
              Container(
                child: Text(
                  "Disclaimer* This is just an approximate amount"
                  "and in no way reflect the exact figures, please consult your bank.",
                  style: TextStyle(
                    color: Colors.grey,
                    fontSize: 10,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  void _handleCalculation() {
//    TODO: Amortization
    //    TODO: A = Payment amount per period
    //    TODO: P = Initial Principal (Loan Amount)
    //    TODO: r = interest Rate
    //    TODO: n = Total number of payments

    double A = 0.0;
    double I = 0.0;
    double T = 0.0;
    double P = double.parse(_principalAmount.text);
    double r = double.parse(_interestRate.text) / 12 / 100;
    int n = _durationType == "Year(s)"
        ? int.parse(_loanDuration.text) * 12
        : int.parse(_loanDuration.text);

    A = (P * r * pow((1 + r), n) / (pow((1 + r), n) - 1));
    T = (A * n);
    I = (T - P);

    _miResult = A.toStringAsFixed(2);
    setState(() {});
    _tiResult = I.toStringAsFixed(2);
    setState(() {});
    _tcResult = T.toStringAsFixed(2);
    setState(() {});
  }

  Widget monthlyInstalmentsResult(miResults) {

//    var f = new NumberFormat("#,###,###.0#");
//    var f = new NumberFormat("###.0#", "en_US");
    bool canShow = false;
    String _miResults = miResults;

    if (_miResults.length > 0) {
      canShow = true;
    }
    return Container(

        child: canShow
            ? Row(
                children: <Widget>[
                  Text(
                    "Monthly Instalments: ",
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 18,
                    ),
                  ),
                  Text(
                    "N\$ ",
                    style: TextStyle(
                      color: Color(0xFFFA983A),
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    _miResult,
                    style: TextStyle(
                      color: Color(0xFFFA983A),
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  )
                ],
              )
            : Row());
  }

  Widget totalInterestResult(tiResults) {
    bool canShow = false;
    String _miResults = tiResults;

    if (_miResults.length > 0) {
      canShow = true;
    }
    return Container(
        child: canShow
            ? Row(
                children: <Widget>[
                  Text(
                    "Total Interest: ",
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 18,
                    ),
                  ),
                  Text(
                    "N\$ ",
                    style: TextStyle(
                      color: Color(0xFFFA983A),
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    _tiResult,
                    style: TextStyle(
                      color: Color(0xFFFA983A),
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  )
                ],
              )
            : Row());
  }

  Widget totalCostResult(tcResults) {
    bool canShow = false;
    String _miResults = tcResults;

    if (_miResults.length > 0) {
      canShow = true;
    }
    return Container(
        child: canShow
            ? Row(
                children: <Widget>[
                  Text(
                    "Total Cost: ",
                    style: TextStyle(
                      color: Colors.grey,
                      fontSize: 18,
                    ),
                  ),
                  Text(
                    "N\$ ",
                    style: TextStyle(
                      color: Color(0xFFFA983A),
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  ),
                  Text(
                    _tcResult,
                    style: TextStyle(
                      color: Color(0xFFFA983A),
                      fontSize: 24,
                      fontWeight: FontWeight.bold,
                    ),
                  )
                ],
              )
            : Row());
  }
}

The code is reproducable exactly as i have it inmy app.... I want the results (miResults ,tiResults and tcResults) display in financial/currency format. thank you.

1 answer

  • answered 2019-05-21 13:56 Richard Heap

    Try this:

      void _handleCalculation() {
        //    TODO: Amortization
        //    TODO: A = Payment amount per period
        //    TODO: P = Initial Principal (Loan Amount)
        //    TODO: r = interest Rate
        //    TODO: n = Total number of payments
    
        double A = 0.0;
        double I = 0.0;
        double T = 0.0;
        double P = double.parse(_principalAmount.text);
        double r = double.parse(_interestRate.text) / 12 / 100;
        int n = _durationType == "Year(s)"
            ? int.parse(_loanDuration.text) * 12
            : int.parse(_loanDuration.text);
    
        A = (P * r * pow((1 + r), n) / (pow((1 + r), n) - 1));
        T = (A * n);
        I = (T - P);
    
        NumberFormat format = NumberFormat('#,###,###.00');
        setState(() {
          _miResult = format.format(A);
          _tiResult = format.format(I);
          _tcResult = format.format(T);
        });
      }