【Flutter入門】fixerAPIを用いた為替レート変換アプリ作成

## はじめに

Flutterを始めるにあたって、簡単なアプリを作成してみたいと思います。

fixerのAPIを用いて、為替レート変換を行うアプリです。

### 事前準備

事前にfixerのAPIキーを取得して控えておきます。

以下のURLからfixerの無料アカウントを作成します。

https://fixer.io/

以下のplanページから$0プランのサブスクライブに進みます。

諸々の情報を入力することでアカウント作成が完了しAPIキーが発行されます。

https://fixer.io/#pricing_plan

以下のダッシュボードからAPIキーを確認できます。

https://fixer.io/dashboard

無料プランでは1ヶ月あたり100リクエストまでなので、個人の検証用途になるかと思います。

## 手順

1. Flutterのインストール
2. Flutterプロジェクトの作成
3. コードの記述
4. 動作確認

## 1.Flutterのインストール

以下のコマンドを実行します。

### mac

https://formulae.brew.sh/cask/flutter

```bash
brew install --cask flutter
```

### windows

https://community.chocolatey.org/packages/flutter

```bash
choco install flutter
```

必要に応じてPATHの設定をしておきます。

### Flutterのセットアップ

以下のコマンドを実行して、セットアップを完了させます。

```bash
flutter doctor
```

[✗] と表示されている項目はセットアップ未完了ですので、掲示されるコマンドの実行や必要なソフトのインストールを行います。

## 2.Flutterプロジェクトの作成

任意の作業ディレクトリを作成してcdしておきます。

該当のディレクトリにて以下のコマンドを実行します。

作業ディレクトリ配下にflutterプロジェクトの雛形がダウンロードされます。

```bash
user/work > flutter create exchange-rate
```

## 3.コードの記述

以下のファイルを作成してコードを記述します。

exchange-rate/lib/screens/exchange_rate_screen.dart

```dart
import 'package:flutter/material.dart';
import '../services/exchange_rate_service.dart';

class ExchangeRateScreen extends StatefulWidget {
  @override
  _ExchangeRateScreenState createState() => _ExchangeRateScreenState();
}

class _ExchangeRateScreenState extends State<ExchangeRateScreen> {
  String? _fromCurrency = 'USD';
  String? _toCurrency = 'JPY';
  double? _exchangeRate;
  final TextEditingController _amountController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('為替レート変換アプリ')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            TextField(
              controller: _amountController,
              decoration: const InputDecoration(labelText: '金額を入力'),
              keyboardType: TextInputType.number,
            ),
            const SizedBox(height: 16),
            DropdownButton<String>(
              value: _fromCurrency,
              items: ['USD', 'EUR', 'JPY']
                  .map((currency) =>
                      DropdownMenuItem(value: currency, child: Text(currency)))
                  .toList(),
              onChanged: (value) {
                setState(() {
                  _fromCurrency = value;
                });
              },
              hint: const Text('送金元通貨を選択'),
            ),
            DropdownButton<String>(
              value: _toCurrency,
              items: ['USD', 'EUR', 'JPY']
                  .map((currency) =>
                      DropdownMenuItem(value: currency, child: Text(currency)))
                  .toList(),
              onChanged: (value) {
                setState(() {
                  _toCurrency = value;
                });
              },
              hint: const Text('送金先通貨を選択'),
            ),
            const SizedBox(height: 16),
            ElevatedButton(
              onPressed: () async {
                if (_fromCurrency != null &&
                    _toCurrency != null &&
                    _amountController.text.isNotEmpty) {
                  try {
                    final rate = await ExchangeRateService.fetchExchangeRate(
                        _fromCurrency!, _toCurrency!);
                    setState(() {
                      _exchangeRate = rate;
                    });
                  } catch (e) {
                    ScaffoldMessenger.of(context).showSnackBar(
                      SnackBar(content: Text('エラーが発生しました: $e')),
                    );
                  }
                } else {
                  ScaffoldMessenger.of(context).showSnackBar(
                    const SnackBar(content: Text('すべての項目を入力してください')),
                  );
                }
              },
              child: const Text('変換'),
            ),
            const SizedBox(height: 16),
            if (_exchangeRate != null)
              Text(
                '変換レート: $_exchangeRate',
                style: const TextStyle(fontSize: 18),
              ),
          ],
        ),
      ),
    );
  }
}
```

exchange-rate/lib/services/exchange_rate_service.dart

```dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class ExchangeRateService {
  static const String _baseUrl = 'https://data.fixer.io/api/latest';
  static const String _apiKey = 'your-api-key'; // FixerのAPIキーを設定してください

  // 為替レートを取得する関数
  static Future<double?> fetchExchangeRate(String from, String to) async {
    final url = Uri.parse(
      '$_baseUrl?access_key=$_apiKey&base=$from&symbols=$to',
    );

    final response = await http.get(url);

    if (response.statusCode == 200) {
      final data = json.decode(response.body);
      if (data['success'] == true) {
        return data['rates'][to];
      } else {
        throw Exception('API Error: ${data['error']['info']}');
      }
    } else {
      throw Exception('Failed to fetch exchange rate: ${response.statusCode}');
    }
  }
}
```

exchange-rate/lib/main.dart

```dart
import 'package:flutter/material.dart';
import 'screens/exchange_rate_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '為替レート変換アプリ',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: ExchangeRateScreen(),
    );
  }
}
```

## 4.動作確認

以下のコマンドを実行します。

```dart
$ flutter run
Checking for wireless devices...

[1]: macOS (macos)
[2]: Mac Designed for iPad (mac-designed-for-ipad)
[3]: Chrome (chrome)
Please choose one (or "q" to quit): 3
```

devices(エミュレーター)を選択するために任意の数字(1~3)を入力します。

3(chrome)を選択したので、以下のような画面が開きます。

(開発者ツールの設定を変更することでiosの画面サイズで確認できます)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/b25393ef-70f7-bcd8-713a-cfad05ae90be.png)

金額を入力して変換元をEUR,変換先をUSDにして変換を選択すると結果が表示されました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/692063/e2fdf2d5-f8ba-49b8-515f-968cc2f1c815.png)

## まとめ

今回は、Flutterで簡単なアプリを作成してみました。サーバーが必要なアプリの作成も試していきたいと思います〜

無料プランだと変換元にEURしか使えないようでした。。orz