Flutter开关标志插件simple_flag_toggle的使用

Flutter 开关标志插件 simple_flag_toggle 的使用

simple_flag_toggle 是一个可以在应用中任意位置放置的简单标志切换组件，非常适合用于国际化（i18n）。

简单的国家/地区旗帜切换

特性

• 提供了378个旗帜选择（来自 HatScripts/circle-flags 项目）。
• 切换时有漂亮的滚动动画效果（来自 animated_toggle_switch 项目）。

平台支持

使用步骤

1. 导入 simple_flag_toggle 包

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  simple_flag_toggle: ^1.0.0

然后运行 flutter pub get 命令以获取该包。

2. 定义标志列表并初始化

// 定义你想要使用的标志列表
static final List<String> flagList = ["us", "br", "ca"];

// 初始化标志切换组件
FlagBar myToggle = FlagBar(
  flagList: flagList,
  initialIndex: 0,
  onChanged: (index) {
    print("Toggle changed to: index = $index and value = ${flagList[index]}");
  },
);

3. 在应用中使用

在你的 main.dart 文件中使用 FlagBar 组件。以下是一个完整的示例：

// ignore_for_file: avoid_print

import 'package:flutter/material.dart';
import 'package:simple_flag_toggle/simple_flag_toggle.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Example(),
    );
  }
}

class Example extends StatefulWidget {
  const Example({super.key});
  [@override](/user/override)
  State<Example> createState() => _ExampleState();
}

class _ExampleState extends State<Example> {
  // 定义标志列表
  static final List<String> _flagList = ["us", "br", "ca"];

  // 初始化应用栏上的标志切换组件
  FlagBar appBarToggle = FlagBar(
    flagList: _flagList,
    initialIndex: 1,
    onChanged: (index) {
      print(
          "AppBar toggle used, changed to: index = $index and value = ${_flagList[index]}");
    },
  );

  // 初始化主体部分的标志切换组件
  FlagBar bodyToggle = FlagBar(
    flagList: _flagList,
    initialIndex: 0,
    onChanged: (index) {
      print(
          "Scaffold's body toggle used, changed to: index = $index and value = ${_flagList[index]}");
    },
  );

  // 初始化弹出框中的标志切换组件
  FlagBar alertToggle = FlagBar(
    flagList: _flagList,
    initialIndex: 1,
    onChanged: (index) {
      print(
          "Alert toggle used, changed to: index = $index and value = ${_flagList[index]}");
    },
  );

  // 显示语言选择对话框
  void showLanguages(BuildContext context) async {
    return showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: const Text("Change Language Example"),
          content: Container(
            padding: const EdgeInsets.only(top: 15),
            child: Center(
              heightFactor: 1,
              child: SizedBox(
                height: 50,
                width: 100,
                child: alertToggle,
              ),
            ),
          ),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: const Text("Close"),
            ),
          ],
        );
      },
    );
  }

  // 应用抽屉菜单
  Widget _appDrawer(BuildContext context) {
    return Drawer(
      child: ListView(
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(color: Colors.blue),
            child: Center(child: Text("Example")),
          ),
          ListTile(
            leading: const Icon(Icons.language_outlined),
            title: const Text('Change Language'),
            onTap: () {
              showLanguages(context);
            },
          ),
        ],
      ),
    );
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Example"), actions: [appBarToggle]),
      drawer: _appDrawer(context),
      body: Center(child: bodyToggle),
    );
  }
}