In this article, we will be building a currency converter application in . You can find a youtube video at the end of the article with my step-by-step process. Flutter Let’s dive straight into the code. main.dart import 'package:flutter/material.dart'; import 'package:testapp/dollar_to_inr.dart'; import 'package:testapp/inr_to_dollar.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: CurrencyConverter(), ); } } class CurrencyConverter extends StatelessWidget { const CurrencyConverter({super.key}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Currency Converter'), ), body: Center( child: Column( //for the buttons to be in center mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () { //on pressing dollar to INr we should navigate //to the dollar_to_inr widget Navigator.of(context).push( MaterialPageRoute(builder: (context) => DollarToINR())); }, child: Text('Dollar To INR'), ), //create sized box for space between //two buttons const SizedBox( height: 30, ), //another elevated button for inr to dollar ElevatedButton( onPressed: () { //on pressing this button //we should naviaget to inr_to_dollar.dart //widget Navigator.of(context).push( MaterialPageRoute(builder: (context) => InrToDollar())); }, child: Text( 'INR to Dollar', ), ) ], ), ), ); } } inr_to_dollar.dart import 'package:flutter/material.dart'; import 'package:flutter/src/widgets/framework.dart'; import 'package:flutter/src/widgets/placeholder.dart'; class InrToDollar extends StatefulWidget { const InrToDollar({super.key}); @override State<InrToDollar> createState() => _InrToDollarState(); } class _InrToDollarState extends State<InrToDollar> { //create controller for inr TextEditingController inrController = TextEditingController(); //creating the varibale to store the dollar value double dollar = 0.0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Inr to Dollar Converter'), ), body: Container( //give some padding padding: EdgeInsets.all(20), //here we need to create //one text filed to take input form user //and one button //so we will use here column widget child: Column( children: [ TextField( controller: inrController, //some box around text field decoration: const InputDecoration( border: OutlineInputBorder(), //labele text labelText: 'Enter Inr', ), ), //need some space between //textfield and button const SizedBox( height: 30, ), //create convert button ElevatedButton( onPressed: () { //on pressing the convert we //should convert the inr to dollar setState(() { dollar = double.parse(inrController.text) * 0.012; }); }, child: Text("Convert"), ), //for some space between button and text SizedBox( height: 30, ), //now we have to show dollar on screen //so we will use here text widget Text( "Dollar : " + dollar.toString(), //increse some font size style: TextStyle( fontSize: 30, ), ), ], ), ), ); } } dollar_to_inr.dart import 'package:flutter/src/widgets/framework.dart'; import 'package:flutter/src/widgets/placeholder.dart'; import 'package:flutter/material.dart'; class DollarToINR extends StatefulWidget { const DollarToINR({super.key}); @override State<DollarToINR> createState() => _DollarToINRState(); } class _DollarToINRState extends State<DollarToINR> { //create controller for dollar TextEditingController dollarController = TextEditingController(); //creating the varibale to store the inr value double inr = 0.0; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Dollar to inr Converter'), ), body: Container( //give some padding padding: EdgeInsets.all(20), //here we need to create //one text filed to take input form user //and one button //so we will use here column widget child: Column( children: [ TextField( controller: dollarController, //some box around text field decoration: const InputDecoration( border: OutlineInputBorder(), //labele text labelText: 'Enter Dollar', ), ), //need some space between //textfield and button const SizedBox( height: 30, ), //create convert button ElevatedButton( onPressed: () { //on pressing the convert we //should convert the inr to dollar setState(() { inr = double.parse(dollarController.text) * 82.40; }); }, child: Text("Convert"), ), //for some space between button and text SizedBox( height: 30, ), //now we have to show dollar on screen //so we will use here text widget Text( "Inr : " + inr.toString(), //increse some font size style: TextStyle( fontSize: 30, ), ), ], ), ), ); } } Step-by-step process https://youtu.be/705GO3kj9FU?embedable=true Also published here. The lead image for this article was generated by HackerNoon's AI Image Generator via the prompt "currency converter".
