How to Convert Celsius to Fahrenheit in Flutter?

In this blog, we will create a simple Build an app to convert Celsius to Fahrenheit in Flutter. The app will feature an input field for the user to enter a temperature in Celsius and a button to trigger the conversion. The converted temperature in Fahrenheit will be displayed on the screen.

Table of Contents

• Convert Celsius to Fahrenheit in Flutter
  • Step 1: Set Up – Flutter Celsius to Fahrenheit
  • Step 2: Create a New Flutter Celsius to Fahrenheit
  • Step 3: Update main.dart
  • Step 4: Run Your App
• Conclusion

Convert Celsius to Fahrenheit in Flutter

Here’s a step-by-step guide to building this app:

Step 1: Set Up – Flutter Celsius to Fahrenheit

First, ensure you have Flutter installed on your machine. You can follow the official installation guide if you haven’t set up Flutter yet.

Step 2: Create a New Flutter Celsius to Fahrenheit

Open your terminal and run the following command to create a new Flutter project:

flutter create temperature_converter

Navigate into the project directory:

cd temperature_converter

Step 3: Update main.dart

Replace the contents of lib/main.dart with the following code:

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Temperature Converter',
      home: TemperatureConverter(),
    );
  }
}

class TemperatureConverter extends StatefulWidget {
  @override
  _TemperatureConverterState createState() => _TemperatureConverterState();
}

class _TemperatureConverterState extends State<TemperatureConverter> {
  final _controller = TextEditingController();
  double _celsius = 0.0;
  double _fahrenheit = 0.0;

  void _convertTemperature() {
    setState(() {
      try {
        _celsius = double.parse(_controller.text);
        _fahrenheit = (_celsius * 9 / 5) + 32;
      } catch (e) {
        // Handle invalid input
        _fahrenheit = 0.0; // Reset Fahrenheit value on error
        showDialog(
          context: context,
          builder: (context) => AlertDialog(
            title: Text('Error'),
            content: Text('Please enter a valid number for Celsius.'),
            actions: [
              TextButton(
                onPressed: () => Navigator.pop(context),
                child: Text('OK'),
              ),
            ],
          ),
        );
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Temperature Converter'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            TextField(
              controller: _controller,
              keyboardType: TextInputType.numberWithOptions(decimal: true),
              decoration: InputDecoration(
                labelText: 'Enter Celsius',
              ),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: _convertTemperature,
              child: Text('Convert'),
            ),
            SizedBox(height: 20),
            Text(
              'Fahrenheit: ${_fahrenheit.toStringAsFixed(2)}',
              style: TextStyle(fontSize: 20),
            ),
          ],
        ),
      ),
    );
  }
}

Now, you should see a simple UI with an input field for Celsius, a convert button, and a text field displaying the converted temperature in Fahrenheit.

Step 4: Run Your App

Use the following command to run your app:

flutter run

Also read:

• How to Print the Multiplication Table in Flutter?
• Create a Flutter app to check a leap year

Conclusion

You’ve successfully created a Flutter app to convert Celsius to Fahrenheit! This app demonstrates the basics of Flutter, including creating widgets, managing state, handling user input, and displaying results.

You can further enhance this app by adding more features such as converting Fahrenheit to Celsius, improving the UI, or handling more edge cases.