[flutter] 플러터 스택드 위젯에서 번역 앱 개발하는 방법

15 Dec 2023

flutter

이번 포스트에서는 플러터(Flutter)로 간단한 번역 앱을 만드는 방법에 대해 알아보겠습니다. 스택드(Stacked) 위젯을 활용하여 화면을 구성하고, Dart 언어를 사용하여 번역 기능을 구현할 것입니다.

1. 필요한 패키지 설치

먼저, 번역 기능을 위해 translator 패키지를 설치해야 합니다.

dependencies:
  translator: ^0.6.1

터미널에서 flutter pub get 명령어를 사용하여 패키지를 설치합니다.

2. 스택드 위젯으로 화면 구성하기

간단한 디자인을 위해 Column과 Container를 사용합니다. 번역할 텍스트를 입력받는 TextField와 번역 결과를 표시하는 Text 위젯을 추가합니다.

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: [
    Container(
      padding: EdgeInsets.all(8.0),
      child: TextField(
        controller: _textController,
        decoration: InputDecoration(
          labelText: '번역할 문장 입력',
          border: OutlineInputBorder(),
        ),
      ),
    ),
    SizedBox(height: 20),
    Container(
      padding: EdgeInsets.all(8.0),
      child: Text(
        _translatedText,
        style: TextStyle(fontSize: 18),
      ),
    ),
  ],
)

3. API를 이용한 번역 기능 구현

번역 기능을 구현하기 위해 translator 패키지를 사용할 것입니다. 사용법은 매우 간단합니다. 아래는 한국어를 영어로 번역하는 예제입니다.

void _translateText() {
  GoogleTranslator translator = GoogleTranslator();
  translator
      .translate(_textController.text, to: 'en')
      .then((value) {
    setState(() {
      _translatedText = value;
    });
  });
}

4. 앱 실행 및 테스트

이제 모든 구현이 끝났습니다. 앱을 실행하여 번역 기능을 테스트해보세요. TextField에 문장을 입력하고 번역 버튼을 누르면 번역된 결과가 표시될 것입니다.

이상으로, 플러터 스택드 위젯을 사용한 간단한 번역 앱 만들기에 대해 알아보았습니다. 어려움이 있다면 공식 문서를 참고하시기 바랍니다.

목차

1. 필요한 패키지 설치

2. 스택드 위젯으로 화면 구성하기

3. API를 이용한 번역 기능 구현

4. 앱 실행 및 테스트