[flutter] Flutter Riverpod에서 번역기 앱 만들기

14 Dec 2023

flutter

Flutter와 Riverpod를 사용하여 간단한 번역기 앱을 만들어보겠습니다. 이 앱은 사용자가 입력한 문장을 다른 언어로 번역해줍니다.

필요한 패키지 설치

먼저, pubspec.yaml 파일 안에 다음과 같이 http와 riverpod 패키지를 추가합니다.

dependencies:
  flutter:
    sdk: flutter
  http: ^0.13.3
  riverpod: ^1.0.3

API 키 획득

Google Cloud Translation API를 사용하여 번역 기능을 구현할 것이므로, Google Cloud Console에서 API 키를 얻어야 합니다. 참고: Google Cloud Translation API

Riverpod 프로바이더 생성

다음으로, 번역 서비스를 제공하는 Riverpod 프로바이더를 생성합니다.

import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:http/http.dart' as http;

final translationServiceProvider = Provider((ref) => TranslationService());

class TranslationService {
  Future<String> translateText(String text, String targetLanguage) async {
    // API 요청을 보내고 결과를 반환
  }
}

UI 작성

이제 UI를 작성하여 사용자가 텍스트를 입력하고 번역 결과를 확인할 수 있도록 합니다.

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';

void main() {
  runApp(ProviderScope(
    child: MyApp(),
  ));
}

final textEditingController = TextEditingController();

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('번역기'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              TextField(
                controller: textEditingController,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: '번역할 문장을 입력하세요',
                ),
              ),
              ElevatedButton(
                onPressed: () {
                  context.read(translationServiceProvider).translateText(textEditingController.text, 'en');
                },
                child: Text('번역'),
              ),
              Consumer(
                builder: (context, watch, child) {
                  final translation = watch(translationServiceProvider);
                  return translation.when(
                    data: (value) => Text(value),
                    loading: () => CircularProgressIndicator(),
                    error: (err, stack) => Text('번역 실패: $err'),
                  );
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

이제 기본적인 번역기 애플리케이션이 준비되었습니다. 사용자가 입력한 텍스트를 번역하여 화면에 출력하는 기능이 정상적으로 동작합니다. 더 나아가서, 여러 언어로의 번역, 번역 히스토리 관리, 사용자 설정 등 추가 기능을 구현할 수 있습니다.

이상으로 Flutter Riverpod를 활용하여 번역기 앱을 만드는 방법에 대해 알아보았습니다.

참고 자료: