Flutter语言构建插件language_builder的使用

Flutter语言构建插件language_builder的使用

Getting started

这个包是为了方便你轻松地在自定义的语言选项之间切换应用程序的语言。

• 你的应用程序将支持你在 language.dart 文件中添加的所有语言。
• 在使用部分你会找到关于 Language 类的解释，你需要创建这个类。

Usage

使用这个包非常简单。只需将你的根 widget 包裹在 LanguageBuilder 中。

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Language Builder Example',
      home: LanguageBuilder(
        useDeviceLanguage: false,
        defaultLanguage: 'en',
        textsMap: Languages.languages,
        child: MainPage(),
        //splash: Container(),
      ),
    ),
  );
}

• useDeviceLanguage – 如果这个参数为 true，那么应用将使用手机的语言。如果为 false，则可以从应用内部切换语言。
• defaultLanguage – 这个字符串值应该是你希望默认使用的语言的缩写。并且当然，该语言配置必须添加到你的自定义 Language 类中。
• textsMap – 这一部分你要告诉 LanguageBuilder 它应该使用哪些语言和准备好的文本。
• child – 这是你根 widget。
• splash – 这个 widget 可以用于启动时的 splash 屏幕。默认为空 widget。（可选）

Information About Language Class

为了创建自定义的语言配置，你应该在项目路径下创建一个 dart 文件。例如，创建 language.dart 文件并使用以下格式插入配置。

class Languages {
  static Map<String, String> languages = {
    "tr": """{
        "main_page": {
            "title": "Ana Sayfa",
            "second_page": "İkinci Sayfa"
        },
        "second_page": {
            "title": "İkinci Sayfa",
            "main_page": "Ana Sayfa",
            "message":"Bu sayfa 2. sayfadır."
        }
    }""",
    "en": """{
        "main_page": {
            "title": "Main Page",
            "second_page": "Second Page"
        },
        "second_page": {
            "title": "Second Page",
            "main_page": "Main Page",
            "message":"This is 2nd page."
        }
    }""",
    "de": """{
        "main_page": {
            "title": "Hauptseite",
            "second_page": "Zweite Seite"
        },
        "second_page": {
            "title": "Zweite Seite",
            "main_page": "Hauptseite",
            "message":"Dies ist die 2. Seite."
        }
    }"""
  };
}

我们有三种语言选项：土耳其 (tr)、英语 (en) 和德语 (de)。这个结构基本上是一个 Map。 [键: 语言代码, 值: 页面文本的 JSON 数据]。 LanguageBuilder 解析这种格式，并在应用中设置你的文本。

Additional information

你可以获取此包的源文件，请访问：

https://github.com/aedemirsen/language_builder

此包仍在开发中。欢迎贡献。如果你遇到任何错误或异常，请发送邮件给我。

示例代码

// ignore_for_file: prefer_const_constructors

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:language_builder/language_builder.dart';
import 'languages.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Language Builder Example',
      home: LanguageBuilder(
        useDeviceLanguage: false,
        defaultLanguage: 'en',
        textsMap: Languages.textsBylanguages,
        child: MainPage(),
        splash: Container(),
      ),
    ),
  );
}

// ignore: must_be_immutable
class MainPage extends StatelessWidget {
  //1st method
  //Define _texts here to reach from whole MainPage widget
  //But assigning must be done in the build method.(38th line)
  Map<String, dynamic> _texts = {};

  MainPage({Key? key}) : super(key: key);

  //2nd method
  //Or just use the LanguageBuilder's static field called 'texts'
  //Example --&gt; LanguageBuilder.texts['main_page']['title'];
  //this example gives us the title text at the main_page.

  [@override](/user/override)
  Widget build(BuildContext context) {
    //
    _texts = LanguageBuilder.texts!['main_page'];
    //
    return Scaffold(
      appBar: AppBar(
        title: Text(LanguageBuilder.texts!['main_page']['title']),
      ),
      floatingActionButton: ElevatedButton(
        child: Text(LanguageBuilder.texts!['main_page']['second_page']),
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(builder: (context) =&gt; SecondPage()),
          );
        },
      ),
      body: Flex(
        direction: Axis.vertical,
        //we get the number of available language configs at our custom language.dart file.
        //for this example we have 3 language options. [turkish,english,german]
        children: LanguageBuilder.getAvailableLanguages().map((e) {
          return Column(
            children: [
              SizedBox(
                height: 50,
                child: TextButton(
                  onPressed: () {
                    //if click at the current language do nothing.
                    if (e != LanguageBuilder.getCurrentLang()) {
                      LanguageBuilder.changeLanguage(e, context);
                    }
                  },
                  child: Builder(
                    builder: (context) {
                      if (e == 'tr') {
                        return Text('Türkçe');
                      } else if ( e == 'en') {
                        return Text('English');
                      } else if (e == ' de') {
                        return Text('Deutsch');
                      } else {
                        return Text('NULL');
                      }
                    },
                  ),
                ),
              ),
              Divider(
                height: 0,
              ),
            ],
          );
        }).toList(),
      ),
    );
  }
}

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

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(LanguageBuilder.texts!['second_page']['title']),
      ),
      body: Center(
        child: Text(LanguageBuilder.texts!['second_page']['message']),
      ),
      floatingActionButton: ElevatedButton(
        child: Text(LanguageBuilder.texts!['second_page']['main_page']),
        onPressed: () {
          Navigator.pop(
            context,
          );
        },
      ),
    );
  }
}