Interest Calculator App

Create Free Backend With Appwrite

Simple Interest Calculator App Using Flutter

This guide will help you create a Simple Interest Calculator using Flutter. You’ll learn to build a user interface for inputting values, calculate simple interest, and display the result.

1. Setup and Project Creation

Ensure Flutter is installed on your system. Begin by creating a new Flutter project:

flutter create simple_interest_calculator

2. Designing the User Interface

Navigate to lib/main.dart and replace its content with the following code to design the interface:

import 'package:flutter/material.dart';

void main() => runApp(SimpleInterestApp());

class SimpleInterestApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Simple Interest Calculator',
      home: InterestCalculatorScreen(),
    );
  }
}

class InterestCalculatorScreen extends StatefulWidget {
  @override
  _InterestCalculatorScreenState createState() => _InterestCalculatorScreenState();
}

class _InterestCalculatorScreenState extends State<InterestCalculatorScreen> {
  final TextEditingController principalController = TextEditingController();
  final TextEditingController rateController = TextEditingController();
  final TextEditingController timeController = TextEditingController();
  String result = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Simple Interest Calculator')),
      body: Container(
        padding: EdgeInsets.all(20),
        child: Column(
          children: [
            _buildTextField(principalController, 'Principal'),
            _buildTextField(rateController, 'Rate of Interest'),
            _buildTextField(timeController, 'Time in Years'),
            SizedBox(height: 20),
            MaterialButton(
              child: Text('Calculate'),
              onPressed: _calculateInterest,
            ),
            SizedBox(height: 20),
            Text(result, style: TextStyle(fontSize: 20)),
          ],
        ),
      ),
    );
  }

  Widget _buildTextField(TextEditingController controller, String label) {
    return TextField(
      controller: controller,
      decoration: InputDecoration(labelText: label),
      keyboardType: TextInputType.number,
    );
  }

  void _calculateInterest() {
    double principal = double.tryParse(principalController.text) ?? 0.0;
    double rate = double.tryParse(rateController.text) ?? 0.0;
    double time = double.tryParse(timeController.text) ?? 0.0;

    double interest = principal * rate * time / 100;

    setState(() {
      result = 'Simple Interest: \$${interest.toStringAsFixed(2)}';
    });
  }
}

Run Online

Explanation

SimpleInterestApp: The root widget that sets up the MaterialApp.
InterestCalculatorScreen: A StatefulWidget that contains the UI for the calculator.
TextEditingController: Controllers for handling text input.
_calculateInterest: Function to calculate the simple interest.

User Interface Components

Text fields for entering the principal amount, rate of interest, and time.
A button to trigger the calculation.
A text widget to display the result.

Run the App

To run the application in Visual Studio Code, press F5 or navigate to Run > Start Debugging. Alternatively, use the following command in your terminal:

flutter run

Challenge

Create a new screen to display the result in a more visually appealing manner. You can use a Card widget to display the result.