TextField(
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      filled: true,
      hintStyle: TextStyle(color: Colors.grey[800]),
      hintText: "Type in your text",
      fillColor: Colors.white70),
)

 

 

 

 

 

 

 

 

 

 

flutter 에서 다국어를 쉽게 적용 할 수 있는 방법을 알아보도록 하겠습니다.

 

우선 아래 사이트에서 한번 살펴 보는 것도 좋을 듯 싶습니다.

 

패키지는 easy_localization 을 사용할 겁니다. 말 그대로 '쉬운 다국어' 이네요.

 

현재 버전은 easy_localization 2.3.2 입니다.

 

 

easy_localization | Flutter Package

Easy and Fast internationalizing and localization your Flutter Apps, this package simplify the internationalizing process .

pub.dev

1. 디펜던시스 에 추가

dependencies:
	easy_localization: ^2.3.2

 

2. 다국어를 쓸수 있게 파일을 작성

   - 프로젝트 폴더 밑에 assets / translations / 폴더를 차례대로 만들고 json 파일 두개를 아래와 같이 만듭니다.

 

3. 그다음엔 다국어 파일의 내용을 작성해야겠죠

   - 길어서 짤렸습니다. 쌍따움표로 묶고 마지막에 , 찍으면 됩니다.

 

4. main.dart 로 돌아와서 내용을 추가해줍니다.

  - 기존 MyApp() 가 child 로 들어갑니다.

void main() {
  runApp(EasyLocalization(
      supportedLocales: [Locale('en', 'US'), Locale('ko', 'KR')],
      path: 'assets/translations',
      fallbackLocale: Locale('en', 'US'),
      child: MyApp()));
}

 

5. MyApp 클래스의 build() 추가해줍니다. 다국어 설정이 바꼈을 때 앱내에서 변환할 수 있도록

  - localizationsDelegates ~~ local: context.locale, 까지입니다.  그 밑은 네비게이터 코드입니다.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      localizationsDelegates: context.localizationDelegates,
      supportedLocales: context.supportedLocales,
      locale: context.locale,
      routes: <String, WidgetBuilder>{
        // Set routes for using the Navigator.
        '/': (BuildContext context) => Landing(),
        '/home': (BuildContext context) => DashBoard(Colors.white),
        '/login': (BuildContext context) => LoginPage()
      },
    );
  }
}

 

6. 그럼 잊지말고 import 를 추가해줘야 겠죠

import 'package:easy_localization/easy_localization.dart';

 

7. pubspec.yaml 에 assets 을 알려줘야 합니다. 이것도 잊지말고 잘 추가해주세요.

  # To add assets to your application, add an assets section, like this:
  assets:
    - assets/translations/ko-KR.json
    - assets/translations/en-US.json

 

8. 이제 코드에 적용하면 됩니다.

    - 사용 하는 곳에도 import 해주세요

showAlertDialog(context, "failed_login".tr());

 

 

 

 

 

 

 

 

 

 

+ Recent posts