Flutterexperts

Empowering Vision with FlutterExperts' Expertise
Length Converter In Flutter

The objective of this tutorial is to acquaint you with a portion of Flutter’s fundamental building blocks By making this application, you will acquire involved experience that can be applied to your future projects.

This blog will explore the Length Converter In Flutter. We see how to execute a demo program. We will show you the best way to make a straightforward length converter application and figure out how to execute the conversion features, use dropdown choice, and show results in your Flutter applications.

If you’re looking for the best Flutter app development company for your mobile application then feel free to contact us at — support@flutterdevs.com.

Table Of Contents::

Introduction

Code Implement

Code File

Conclusion



Introduction:

The below demo video shows how to create a length converter app in a flutter. It shows how the length converter will work in your Flutter applications. It shows when the user enters the number and then presses the convert button and the output will display on your screen.

Demo Module :


How to implement code in dart file :

You need to implement it in your code respectively:

Create a new dart file called main.dart inside the lib folder.

In the main .dart file, we will add a new class LengthConverterDemo. In this class, first, we will add to use this variable to store the selected unit.

String dropdownValue = 'Mile to km';

We will add to use double for the result and input.

double result = 0.0;
double input = 0.0;

We will create a convert() methodIn this method, we will convert the input value to the selected unit and then display the result.

void convert() {
setState(() {
if (dropdownValue == 'Mile to km') {
result = input * 1.60934;
} else if (dropdownValue == 'Km to mile') {
result = input * 0.621371;
} else if (dropdownValue == 'Inch to cm') {
result = input * 2.54;
} else if (dropdownValue == 'Cm to inch') {
result = input * 0.393701;
}
});
}

In the body, we will add DropdownButton() method. In this method, we will add value to was dropdownValue, onChangeditems were several lists of strings and map DropdownMenuItem then returns DropdownMenuItem.

DropdownButton<String>(
value: dropdownValue,
onChanged: (String? newValue) {
setState(() {
if (newValue != null) {
dropdownValue = newValue;
}
});
},
items: <String>[
'Mile to km',
'Km to mile',
'Inch to cm',
'Cm to inch'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w500),
),
);
}).toList(),
),

Below the dropdown, we will add a TextField() widget. In this widget, we will add use TextField to get the input value.

TextField(
onChanged: (text) {
input = double.tryParse(text) ?? 0;
},
decoration: const InputDecoration(
hintText: 'Enter a number',
),
keyboardType: TextInputType.number,
),

Below the TextField, we will add an ElevatedButton() widget. In this widget, when this button gets pressed, the convert function will be called. For its child, we will add the text ‘Convert’.

ElevatedButton(
onPressed: convert,
child: const Text('Convert'),
),

And last below the ElevatedButton, we will add a Card() widget. In this widget, we will display the result. We will add an elevation was 5 and add a Container widget. in this widget, we will add FittedBox, and inside a Text was a result.toString().

Card(
elevation: 5,
child: Container(
padding: const EdgeInsets.all(8),
color: Colors.tealAccent.withOpacity(.4),
width: double.infinity,
height: 200,
child: Center(
child: FittedBox(
child: Text(
result.toString(),
style: const TextStyle(
fontSize: 50.0,
color: Colors.black,
),
),
),
),
),
),

When we run the application, we ought to get the screen’s output like the underneath screen capture.

Final Output

Code File:

import 'package:flutter/material.dart';
import 'package:flutter_length_converter_demo/splash_screen.dart';

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

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

@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: Splash(),
);
}
}

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

@override
State<LengthConverterDemo> createState() => _LengthConverterDemoState();
}

class _LengthConverterDemoState extends State<LengthConverterDemo> {
String dropdownValue = 'Mile to km';
double result = 0.0;
double input = 0.0;

void convert() {
setState(() {
if (dropdownValue == 'Mile to km') {
result = input * 1.60934;
} else if (dropdownValue == 'Km to mile') {
result = input * 0.621371;
} else if (dropdownValue == 'Inch to cm') {
result = input * 2.54;
} else if (dropdownValue == 'Cm to inch') {
result = input * 0.393701;
}
});
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
automaticallyImplyLeading: false,
backgroundColor: Colors.tealAccent.withOpacity(.3),
title: const Text('Flutter Length Converter Demo'),
),
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(18.0),
child: Column(
children: [
Image.asset("assets/logo.png",height: 150),
const SizedBox(height: 20,),
DropdownButton<String>(
value: dropdownValue,
onChanged: (String? newValue) {
setState(() {
if (newValue != null) {
dropdownValue = newValue;
}
});
},
items: <String>[
'Mile to km',
'Km to mile',
'Inch to cm',
'Cm to inch'
].map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(
value,
style: const TextStyle(
color: Colors.black, fontWeight: FontWeight.w500),
),
);
}).toList(),
),
Padding(
padding: const EdgeInsets.only(top: 16.0),
// we will use TextField to get the input value
child: TextField(
onChanged: (text) {
Length Converter input = double.tryParse(text) ?? 0;
},
decoration: const InputDecoration(
hintText: 'Enter a number',
),
keyboardType: TextInputType.number,
),
),
Padding(
padding: const EdgeInsets.only(top: 16.0),
child: ElevatedButton(
onPressed: convert,
child: const Text('Convert'),
),
),
const SizedBox(
height: 30,
),
Card(
elevation: 5,
child: Container(
padding: const EdgeInsets.all(8),
color: Colors.tealAccent.withOpacity(.4),
width: double.infinity,
height: 200,
child: Center(
child: FittedBox(
child: Text(
result.toString(),
style: const TextStyle(
fontSize: 50.0,
color: Colors.black,
),
),
),
),
),
),
],
),
),
),
);
}
}

Conclusion:

In the article, I have explained the Length Converter basic structure in a flutter; you can modify this code according to your choice. This was a small introduction to Length Converter On User Interaction from my side, and it’s working using Flutter.

I hope this blog will provide you with sufficient information on Trying the Length Converter in your Flutter projectsWe will show you what the Introduction is. Make a demo program for a working Length Converter in your Flutter applications. So please try it.

❤ ❤ Thanks for reading this article ❤❤

If I got something wrong? Let me know in the comments. I would love to improve.

Clap 👏 If this article helps you.


Feel free to connect with us:
And read more articles from FlutterDevs.com.

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a Flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on FacebookGitHubTwitter, and LinkedIn.

We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.


Leave comment

Your email address will not be published. Required fields are marked with *.