You are currently viewing Flutter Currency Picker Example

Flutter Currency Picker Example

This tutorial will explore examples related to picking a currency. Rather than manually adding currencies in your app, you could simply use ready-made packages that allow you such a feature.

Example 1: Flutter Currency Picker

This example utilizes the flutter_currency_picker package.

flutter_currency_picker is a flutter package to select a currency from a list of currencies.

Here's the demo of the example created using this package:

Flutter Currency Picker Example

Step 1: Create Project

Start by creating an empty flutter project.

Step 2: Install library

Install the Currency Picker library by declaring it as a dependency in your pubspec.yaml:

    currency_picker: ^2.0.5

Step 3: Show Currency Picker

Start by adding import:

import 'package:currency_picker/currency_picker.dart';

Then to show the currency picker simply invoke the showCurrencyPicker() function:

showCurrencyPicker(
   context: context,
   showFlag: true,
   showCurrencyName: true,
   showCurrencyCode: true,
   onSelect: (Currency currency) {
      print('Select currency: ${currency.name}');
   },
);

Full Example

Here's a full example.

Step 1: Create Project

Create a project or download the one provided.

Step 2: Install Library

Install the library as has been discussed.

Step 3: Write Code

Replace your main.dart with the following code:

main.dart

import 'package:currency_picker/currency_picker.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo for currency picker package',
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      home: const HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Demo for currency picker')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            showCurrencyPicker(
              context: context,
              showFlag: true,
              showCurrencyName: true,
              showCurrencyCode: true,
              onSelect: (Currency currency) {
                print('Select currency: ${currency.name}');
              },
              favorite: ['SEK'],
            );
          },
          child: const Text('Show currency picker'),
        ),
      ),
    );
  }
}

Run

Copy the code or download it in the link below, build and run.

Reference

Here are the reference links:

Number Link
1. Download Example
2. Read more
3. Follow code author

Leave a Reply