How to Create a Fuel Calculator in Flutter : Step-by-Step Guide

Building a Fuel Calculator in Flutter is an exciting and practical way to learn app development. In this tutorial, we’ll walk you through the steps to create a simple fuel cost calculator app. This app calculates daily, monthly, and yearly fuel costs based on user inputs. Let’s dive into the process of making a Fuel Calculator in Flutter.

Prerequisites for Fuel Calculator (Flutter)

Before starting, ensure you have Flutter installed and set up on your system. You can download it from Flutter’s official site. Also, use a code editor like VS Code or Android Studio for a seamless coding experience.

Step-by-Step Guide

1. Create a Flutter Project

Start by creating a new Flutter project using the command:

flutter create fuel_calculator

Navigate to the project directory:

cd fuel_calculator

2. Define the Main Entry Point (Fuel Calculator )

Add the following code to main.dart to set up the app structure:

import 'package:flutter/material.dart';

void main() => runApp(const FuelCalculatorApp());

class FuelCalculatorApp extends StatelessWidget {
  const FuelCalculatorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const FuelCalculatorScreen(),
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}

3. Build the User Interface

The user interface will consist of text fields for distance, fuel efficiency, and price. Add a button to calculate costs and display the results.

class FuelCalculatorScreen extends StatefulWidget {
  const FuelCalculatorScreen({super.key});

  @override
  _FuelCalculatorScreenState createState() => _FuelCalculatorScreenState();
}

class _FuelCalculatorScreenState extends State<FuelCalculatorScreen> {
  final TextEditingController _distanceController = TextEditingController();
  final TextEditingController _efficiencyController = TextEditingController();
  final TextEditingController _priceController = TextEditingController();

  double dailyCost = 0.0;
  double monthlyCost = 0.0;
  double yearlyCost = 0.0;

  void calculateCost() {
    final distance = double.tryParse(_distanceController.text) ?? 0;
    final efficiency = double.tryParse(_efficiencyController.text) ?? 0;
    final price = double.tryParse(_priceController.text) ?? 0;

    if (efficiency > 0) {
      setState(() {
        dailyCost = (distance / efficiency) * price;
        monthlyCost = dailyCost * 30;
        yearlyCost = dailyCost * 365;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Fuel Cost Calculator"),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            _buildTextField("Distance (KM)", _distanceController),
            _buildTextField("Fuel Efficiency (KM/L)", _efficiencyController),
            _buildTextField("Fuel Price (₹/L)", _priceController),
            ElevatedButton(
              onPressed: calculateCost,
              child: const Text("Calculate Cost"),
            ),
            Text("Daily Cost: ₹${dailyCost.toStringAsFixed(2)}"),
            Text("Monthly Cost: ₹${monthlyCost.toStringAsFixed(2)}"),
            Text("Yearly Cost: ₹${yearlyCost.toStringAsFixed(2)}"),
          ],
        ),
      ),
    );
  }

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

    final distance = double.tryParse(_distanceController.text) ?? 0;
    final efficiency = double.tryParse(_efficiencyController.text) ?? 0;
    final price = double.tryParse(_priceController.text) ?? 0;

The tryParse method attempts to convert the text input (a string) into a double. If the conversion fails (e.g., the input is invalid or empty), it returns null. The ?? 0 operator ensures that if tryParse returns null, the variable is assigned a default value of 0 instead of causing an error. This approach is robust, handling invalid inputs gracefully without crashing the app. Each line corresponds to a specific input: distance, fuel efficiency, and fuel price, preparing these values for further calculations.

4. Let’s finish the code

main.dart (Complete code)

import 'package:flutter/material.dart';


void main() => runApp(const FuelCalculatorApp());

class FuelCalculatorApp extends StatelessWidget {
  const FuelCalculatorApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: const FuelCalculatorScreen(),
      theme: ThemeData(primarySwatch: Colors.green),
    );
  }
}

class FuelCalculatorScreen extends StatefulWidget {
  const FuelCalculatorScreen({super.key});

  @override
  _FuelCalculatorScreenState createState() => _FuelCalculatorScreenState();
}

class _FuelCalculatorScreenState extends State<FuelCalculatorScreen> {
  final TextEditingController _distanceController = TextEditingController();
  final TextEditingController _efficiencyController = TextEditingController();
  final TextEditingController _priceController = TextEditingController();

  double dailyCost = 0.0;
  double monthlyCost = 0.0;
  double yearlyCost = 0.0;

  void calculateCost() {
    final distance = double.tryParse(_distanceController.text) ?? 0;
    final efficiency = double.tryParse(_efficiencyController.text) ?? 0;
    final price = double.tryParse(_priceController.text) ?? 0;

    if (efficiency > 0) {
      setState(() {
        dailyCost = (distance / efficiency) * price;
        monthlyCost = dailyCost * 30;
        yearlyCost = dailyCost * 365;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Fuel Cost Calculator"),
      ),
      body: SafeArea(
  child: SingleChildScrollView(
    child: Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
         
          const SizedBox(height: 20),
          Table(
            columnWidths: const {
              0: FixedColumnWidth(150),
            },
            children: [
              _buildTableRow("Distance (KM)", _distanceController),
              _buildTableRow("Fuel Efficiency (KM/L)", _efficiencyController),
              _buildTableRow("Fuel Price (₹/L)", _priceController),
            ],
          ),
          const SizedBox(height: 20),
          ElevatedButton(
            onPressed: calculateCost,
            child: const Center(child:Text("Calculate Cost"), ) 
          ),
          const SizedBox(height: 20),

          Text("Daily Cost: ₹${dailyCost.toStringAsFixed(2)}"),
          Text("Monthly Cost: ₹${monthlyCost.toStringAsFixed(2)}"),
          Text("Yearly Cost: ₹${yearlyCost.toStringAsFixed(2)}"),
        ],
      ),
    ),
  ),
),

    );
  }

  TableRow _buildTableRow(String label, TextEditingController controller) {
    return TableRow(
      children: [
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text(label),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: TextField(
            controller: controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              border: const OutlineInputBorder(),
              hintText: "Enter $label",
            ),
          ),
        ),
      ],
    );
  }
}

5. Run the app

Use the command below to run your app on an emulator or device:

flutter run

Conclusion

You’ve successfully built a Fuel Calculator in Flutter! This project demonstrates the basics of using Flutter for input handling and performing calculations. You can further enhance this app by adding features like dark mode or saving calculation history.

By following this tutorial, you’ve taken another step forward in mastering Flutter development. Keep experimenting and learning!