【Flutter】gen_lang을 사용해 본다

10955 단어 DartFlutter

전치



튜토리얼의 국제화를 읽고, 그렇게 하면 좋을지도 모르지만, plugin에서 좋은 것을 발견했으므로, 그것을 사용해 보겠습니다.
pub.dev에 기재되어 있는 채, 실시해 쓰고 있습니다.
한 곳만, 기재가 잘못되어 있기 때문에(알기 어렵다), 차이는 그 정도.

플러그인



이번에 사용하는 것은 이것.
gen_lang
htps // 푸 b. V / Pac 카게 s / 겐 _ ぁ g

자꾸 설명



지정된 디렉토리에 json 형식으로 문자열을 정의해두고 generate하면 ​​좋은 느낌으로 사용할 수 있게 된다.
언어는 스마트폰의 설정을 바탕으로 전환해 준다. (답다)
파일은 이런 느낌의 이름으로 준비한다.
string_en.json
string_ko.json

구현


  • 프로젝트 만들기
  • pubspec.yaml에 추가
  • 파일 준비
  • generate 명령 구현
  • 소스 수정

  • 프로젝트 만들기



    Android Studio에서 Flutter 프로젝트를 만듭니다.

    pubspec.yaml에 추가



    dependencies와 dev_dependencies에 다음과 같이 추가하십시오.
    dependencies: 
        flutter_localizations: 
            sdk: flutter 
    dev_dependencies:
        gen_lang: 0.1.3
    

    추가하고 저장하면 오른쪽 상단의 "Pub get"을 클릭하여 가져옵니다.
    버전은 새로운 것이 나올 수 있으므로 확인하십시오.

    파일 준비



    언어 파일을 준비합니다. 이번은 일본어만.
    |--- lib 
    |--- res 
         |--- string 
             |--- string_ja.json 
    

    string_ko.json을 다음 내용으로 만듭니다.
    {
      "message": "あなたがボタンを押した回数"
    }
    

    generate 명령 구현



    여기가 Pub.dev보고, 그대로 실행하면 오류가 발생했습니다. Flutter 하고 있는 사람이라면 곧 깨닫는다고 생각하지만・・・
    Android Studio의 Terminal 탭을 열고 다음을 수행합니다.
    flutter pub run gen_lang:generate
    

    실행하면 lib/generate가 작성되어, 안에 2 파일 작성되고 있을 것.
    messages_all.dart
    i18n.dart

    소스 수정



    main.dart
    import 'package:gen_lang_sample/generated/i18n.dart';
    import 'package:flutter_localizations/flutter_localizations.dart';
    

    gen_lang_sample을 직접 만든 프로젝트 이름으로 바꿉니다.

    13행의 다음 행에 다음을 추가(return MaterialApp의 다음 행)

    main.dart
          localizationsDelegates: [
            S.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate
          ],
          supportedLocales: S.delegate.supportedLocales,
    

    109행의 텍스트 내용을 변경합니다.
    변경 전

    main.dart
                  'You have pushed the button this many times:',
    

    변경 후

    main.dart
                  S.of(context).message,
    

    main.dart를 저장합니다.

    에뮬레이터로 확인



    실행하면 이런 느낌이 있다고 생각합니다.


    main.dart의 전량



    코멘트 행소하고 있습니다.

    main.dart
    import 'package:flutter/material.dart';
    import 'package:gen_lang_sample/generated/i18n.dart';
    import 'package:flutter_localizations/flutter_localizations.dart';
    
    void main() {
      runApp(MyApp());
    }
    
    class MyApp extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return MaterialApp(
          localizationsDelegates: [
            S.delegate,
            GlobalMaterialLocalizations.delegate,
            GlobalWidgetsLocalizations.delegate
          ],
          supportedLocales: S.delegate.supportedLocales,
          title: 'Flutter Demo',
          theme: ThemeData(
            primarySwatch: Colors.blue,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          home: MyHomePage(title: 'Flutter Demo Home Page'),
        );
      }
    }
    
    class MyHomePage extends StatefulWidget {
      MyHomePage({Key key, this.title}) : super(key: key);
    
      final String title;
    
      @override
      _MyHomePageState createState() => _MyHomePageState();
    }
    
    class _MyHomePageState extends State<MyHomePage> {
      int _counter = 0;
    
      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  S.of(context).message,
                ),
                Text(
                  '$_counter',
                  style: Theme.of(context).textTheme.headline4,
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ), // This trailing comma makes auto-formatting nicer for build methods.
        );
      }
    }
    

    마지막으로



    읽어 주셔서 감사합니다.
    Flutter는 아직 공부 중이므로 잘못되었거나 더 좋은 방법이있을 수 있습니다.

    좋은 웹페이지 즐겨찾기