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
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:
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.
