Flutter语言选择插件language_picker_native_tongue的使用

language_picker_native_tongue 是一个语言选择对话框插件，用于在应用中选择语言。它以英语和本地语言名称显示语言选项，例如法语 / Français。

安装与配置

首先，在你的 pubspec.yaml 文件中添加 language_picker_native_tongue 和 languages_dart 依赖：

dependencies:
  flutter:
    sdk: flutter
  language_picker_native_tongue: ^版本号
  languages_dart: ^版本号

然后运行 flutter pub get 来安装这些依赖。

使用示例

下面是一个完整的示例代码，展示了如何在 Flutter 应用中使用 language_picker_native_tongue 插件。

示例代码

import 'package:flutter/material.dart';

import 'package:language_picker_native_tongue/language_picker_native_tongue.dart';
import 'package:languages_dart/languages_dart.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'language_picker Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'language_picker Example'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  Language _selectedDialogLanguage = Languages.korean;

  // 构建对话框项
  Widget _buildDialogItem(Language language) => Row(
        children: <Widget>[
          Text(language.name),
          SizedBox(width: 8.0),
          Flexible(child: Text("(${language.localeIntl.locale.countryCode})"))
        ],
      );

  // 打开语言选择对话框
  void _openLanguagePickerDialog() => showDialog(
        context: context,
        builder: (context) => Theme(
            data: Theme.of(context).copyWith(primaryColor: Colors.pink),
            child: LanguagePickerDialog(
                titlePadding: EdgeInsets.all(8.0),
                searchCursorColor: Colors.pinkAccent,
                searchInputDecoration: InputDecoration(hintText: '搜索...'),
                isSearchable: true,
                title: Text('选择您的语言'),
                onValuePicked: (Language language) => setState(() {
                      _selectedDialogLanguage = language;
                      print(_selectedDialogLanguage.name);
                      print(_selectedDialogLanguage.localeIntl.locale.countryCode);
                    }),
                itemBuilder: _buildDialogItem)),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                child: Center(
                  child: MaterialButton(
                    child: Text("点击选择语言"),
                    onPressed: _openLanguagePickerDialog,
                  ),
                ),
              ),
            ]),
      ), // 这个尾随逗号使自动格式化更美观
    );
  }
}

解释

1. 导入库：

   import 'package:flutter/material.dart';
   import 'package:language_picker_native_tongue/language_picker_native_tongue.dart';
   import 'package:languages_dart/languages_dart.dart';
   

2. 定义主应用：

   void main() => runApp(MyApp());
   

3. 创建主应用类：

   class MyApp extends StatelessWidget {
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'language_picker Example',
         theme: ThemeData(
           primarySwatch: Colors.blue,
         ),
         home: MyHomePage(title: 'language_picker Example'),
       );
     }
   }
   

4. 创建主页状态类：

   class MyHomePage extends StatefulWidget {
     MyHomePage({Key? key, required this.title}) : super(key: key);
   
     final String title;
   
     @override
     _MyHomePageState createState() => _MyHomePageState();
   }
   

5. 定义状态类：

   class _MyHomePageState extends State<MyHomePage> {
     Language _selectedDialogLanguage = Languages.korean;
   
     // 构建对话框项
     Widget _buildDialogItem(Language language) => Row(
           children: <Widget>[
             Text(language.name),
             SizedBox(width: 8.0),
             Flexible(child: Text("(${language.localeIntl.locale.countryCode})"))
           ],
         );
   
     // 打开语言选择对话框
     void _openLanguagePickerDialog() => showDialog(
           context: context,
           builder: (context) => Theme(
               data: Theme.of(context).copyWith(primaryColor: Colors.pink),
               child: LanguagePickerDialog(
                   titlePadding: EdgeInsets.all(8.0),
                   searchCursorColor: Colors.pinkAccent,
                   searchInputDecoration: InputDecoration(hintText: '搜索...'),
                   isSearchable: true,
                   title: Text('选择您的语言'),
                   onValuePicked: (Language language) => setState(() {
                         _selectedDialogLanguage = language;
                         print(_selectedDialogLanguage.name);
                         print(_selectedDialogLanguage.localeIntl.locale.countryCode);
                       }),
                   itemBuilder: _buildDialogItem)),
         );
   
     @override
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
               mainAxisAlignment: MainAxisAlignment.center,
               children: <Widget>[
                 Expanded(
                   child: Center(
                     child: MaterialButton(
                       child: Text("点击选择语言"),
                       onPressed: _openLanguagePickerDialog,
                     ),
                   ),
                 ),
               ]),
         ),
       );
     }
   }