Access to XMLHttpRequest at '***' from origin 'http://localhost:6715' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

可以把Flutter升级到3.3.0版本或以上版本，就可以使用下面的命令关闭CORS：

flutter run -d chrome --web-browser-flag "--disable-web-security"

那如何用局域网其他设备访问这个网站呢？例如PC（IP: 192.168.0.100）运行下面命令

flutter run -d chrome --web-browser-flag "--disable-web-security" --web-hostname 192.168.0.100 --web-port 13001

运行起来之后，可以在其他设备的浏览器中直接输入http://192.168.0.100:13001就可以访问网站

如果你使用vscode调试，可以在launch.json中加入以下配置：

"version": "0.2.0",
"configurations": [
    {
        "name": "test",
        "request": "launch",
        "type": "dart",
        "flutterMode": "debug",
        "args": [
            "-d",
            "chrome",
            "--web-renderer",
            "html",
            "--web-browser-flag",
            "--disable-web-security"
        ]
    }
]

Flutter（十五）| Web本地测试跨域问题最先出现在wqh博客。

之前我们学过使用Row，Column来拼出这样的标签栏，其实Flutter提供了标准的组件来完成这项功能，那就是ListTile.

ListTile

一起来看一下ListTile组件中经常用的属性：

ListTile ListTile({
  Key? key,
  Widget? leading,
  Widget? title,
  Widget? subtitle,
  Widget? trailing,
  bool isThreeLine = false,
  bool? dense,
  VisualDensity? visualDensity,
  ShapeBorder? shape,
  ListTileStyle? style,
  Color? selectedColor,
  Color? iconColor,
  Color? textColor,
  EdgeInsetsGeometry? contentPadding,
  bool enabled = true,
  void Function()? onTap,
  void Function()? onLongPress,
  MouseCursor? mouseCursor,
  bool selected = false,
  Color? focusColor,
  Color? hoverColor,
  FocusNode? focusNode,
  bool autofocus = false,
  Color? tileColor,
  Color? selectedTileColor,
  bool? enableFeedback,
  double? horizontalTitleGap,
  double? minVerticalPadding,
  double? minLeadingWidth,
})

leading：对应上图中的1号位置。

title：对应上图中的2号位置。

subtitle：对应上图中的3号位置。

trailing：对应上图中的4号位置。

可以看到这4个属性传入的类型是Widget，这样就标签栏就可以很灵活的显示各种组件。

onTap：点击触发的回调函数。

onLongPress：长按触发的回调函数。

random_password.dart

接下来，我们来修改random_password中的组件，例如_switchLowercase函数，修改为：

Widget _switchLowercase() {
    return ListTile(
      title: Text(
        'lowercaseLetter'.tr,
        style: TextStyle(fontSize: 17),
      ),
      trailing: Switch(
        value: _lowercase,
        onChanged: (value) {
          setState(() {
            _lowercase = value;
          });
        },
      ),
    );
  }

其他_switchUppercase、_switchNumber、_switchSpecial函数以此类推。

但是修改_textLength函数时要注意，不能直接把TextField放到trailing中，因为TextField的宽度默认比trailing大。

所以如果要把TextField放到trailing中的时候，应用用SizeBox包裹一层：

SizedBox(
	width: 100,
	child: TextField(
	  controller: TextEditingController(text: _length),
	  textAlign: TextAlign.center,
	  decoration: InputDecoration(
		hintText: 'Enter length',
	  ),
	  keyboardType: TextInputType.number,
	  inputFormatters: [
		FilteringTextInputFormatter.digitsOnly,
		LengthLimitingTextInputFormatter(2)
	  ],
	  onChanged: (text) {
		_length = text;
	  },
	),
),

或者可以采用leading和title来达到目的：

Widget _textLength() {
	return ListTile(
	  leading: Text(
		'length'.tr,
		style: TextStyle(fontSize: 17),
	  ),
	  title: TextField(
		controller: TextEditingController(text: _length),
		textAlign: TextAlign.center,
		decoration: InputDecoration(
		  hintText: 'Enter length',
		),
		keyboardType: TextInputType.number,
		inputFormatters: [
		  FilteringTextInputFormatter.digitsOnly,
		  LengthLimitingTextInputFormatter(2)
		],
		onChanged: (text) {
		  _length = text;
		},
	  ),
	);
}

Flutter（十四）| ListTile组件最先出现在wqh博客。

snackbar

把我们的_snackBar函数修改使用Get包的snackbar，代码如下：

 Get.snackbar(
      '',
      'passwordClipboard'.tr,
      backgroundColor: Colors.blue,
      snackPosition: SnackPosition.BOTTOM,
      margin: const EdgeInsets.all(10),
      titleText: const Text(
        '',
        style: TextStyle(
          fontSize: 0,
        ),
      ),
      messageText: Text(
        'passwordClipboard'.tr,
        textAlign: TextAlign.center,
        style: const TextStyle(
          color: Colors.white,
          fontWeight: FontWeight.w800,
          fontSize: 20,
        ),
      ),
    );

这里的第一行是title，我们暂时不用标题，但这个属性是必填项，我们用空字符串代替即可。

第二行是message，就是提示信息，这个属性也是必填项。

snackPosition：提示框显示位置，这里我们显示在底部。

backgroundColor：就是提示框的背景颜色。

titleText：对标题内容的属性进行修改，如果不用标题就把字体大小设为0，如果这里不设为0，即使标题是空字符串也是占用空间，影响美观。

messageText：对信息内容的属性进行修改。

closeCurrentSnackbar

对应之前的removeCurrentSnackBar，这里用Get.closeCurrentSnackbar()代替。

完成之后我们就可以跑起来试一下，效果和之前的ScaffoldMessenger方法是一样的。

Flutter（十三）| Get包的Snackbar最先出现在wqh博客。

localizations.dart

在根目录下面新建一个localizations.dart文件，这个文件就是把之前app_en.arb和app_zh.arb合成一个文件，代码如下 ：

import 'package:get/get.dart';

class AppLocalizations extends Translations {
  @override
  Map<String, Map<String, String>> get keys => {
        'zh_CN': {
          "generate": "生成",
          "lowercaseLetter": "小写字母",
          "uppercaseLetter": "大写字母",
          "arabicNumeral": "阿拉伯数字",
          "specialCharacter": "特殊字符",
          "length": "长度",
          "randomPassword": "随机密码",
          "passwordClipboard": "密码已经复制到剪贴板"
        },
        'en_US': {
          "generate": "Generate",
          "lowercaseLetter": "Lowercase Letter",
          "uppercaseLetter": "Uppercase Letter",
          "arabicNumeral": "Arabic Numeral",
          "specialCharacter": "Special Character",
          "length": "Length",
          "randomPassword": "Random Password",
          "passwordClipboard": "The password has been copied to the clipboard"
        }
      };
}

main.dart

修改main.dart文件，把build中的代码替换为下面的代码：

Widget build(BuildContext context) {
    SystemChrome.setPreferredOrientations([
      DeviceOrientation.portraitUp,
    ]);
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      statusBarColor: Colors.transparent,
    ));
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      translations: AppLocalizations(),
      locale: Get.deviceLocale,
      home: RandomPasswordPage(),
    );
  }

GetMaterialApp是get包提供的一个函数。

translations：就是读取我们定义的AppLocalizations。

locale：就是读取系统的语言，这里使用Get.deviceLocale获取设备的语言，这样如果设备更改了语言，应用也会跟随变化，当然前提是我们的AppLocalizations类中定义了对应的语言。

random_password.dart

准备好语言环境之后，就可以修改对应的代码部分，把之前AppLocalizations.of(context).randomPassword直接替换成'randomPassword'.tr，这样当执行到tr关键字时，系统会去AppLocalizations寻找对应的key（这里就是randomPassword），然后显示对应的value值。

get

get包提供的国际化非常方便，而且直接融入了dart代码。

get的功能非常强大，应该是Flutter开发中必须掌握的package，后面我会把其他功能一一的展开介绍。

Flutter（十二）| Get包的国际化最先出现在wqh博客。

先要安装Flutter开发环境，还没有安装的小伙伴可以先看这篇文章

安装protoc

下载地址：https://github.com/protocolbuffers/protobuf/releases，找到Latest版本，这里是protoc-3.19.4-win64.zip，下载完成之后，解压到对应目录。

安装proto插件

在cmd下面执行flutter pub global activate protoc_plugin

系统环境变量

打开系统环境变量，在Path中新增下面路径：

D:\Program Files\Protoc\bin (这是protoc的bin目录)
C:\Users\wqh\AppData\Local\Pub\Cache\bin (这是proto插件的目录)
D:\Program Files\Flutter\bin\cache\dart-sdk\bin (这是dart的bin目录)

生成.dart文件

在cmd下面打开proto文件所在目录，执行下面命令：

protoc --dart_out=. test.proto

会自动生成test.pb.proto文件。

安装dart插件

打开项目的pubspec.yaml文件，在dependencies下面新增protobuf: ^2.0.1。

这样就可以在Flutter项目中使用Protobuf了。

FAQ

在使用protobuf过程中碰到Can’t load Kernel binary: Invalid SDK hash的问题，原来是使用flutter upgrade升级之后，需要重新执行一下flutter pub global activate protoc_plugin的命令

Flutter（十一）| 使用Protobuf最先出现在wqh博客。

锁定App方向

在使用App的时候，有时候我们需要锁定App横屏或竖屏，可以修改main.dart文件中的build接口：

SystemChrome.setPreferredOrientations([
   DeviceOrientation.portraitUp,
]);

DeviceOrientation一共有4个选项，可以多项：

enum DeviceOrientation {
  /// If the device shows its boot logo in portrait, then the boot logo is shown
  /// in [portraitUp]. Otherwise, the device shows its boot logo in landscape
  /// and this orientation is obtained by rotating the device 90 degrees
  /// clockwise from its boot orientation.
  portraitUp,

  /// The orientation that is 90 degrees clockwise from [portraitUp].
  ///
  /// If the device shows its boot logo in landscape, then the boot logo is
  /// shown in [landscapeLeft].
  landscapeLeft,

  /// The orientation that is 180 degrees from [portraitUp].
  portraitDown,

  /// The orientation that is 90 degrees counterclockwise from [portraitUp].
  landscapeRight,
}

App标题栏

App标题栏和手机最上面的状态栏使用同一颜色，也是修改main.dart文件中的build接口：

SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
));

消除右上角Debug标志

修改main.dart文件中的build接口，在MaterialApp下面新增一行代码：

debugShowCheckedModeBanner: false,

Release版

flutter run默认是运行debug版本，如果要发布release版，使用下面的命令：

flutter build apk 打包apk
flutter build web 打包web版本

apk所在目录build\app\outputs\apk\release\app-release.apk。

web所在目录build\web

Bottom Overflow

当打开屏幕键盘的时候，body和Scaffold会自行调整大小，如果手机屏幕太小，有可能导致Widget超出屏幕，报”bottom overflowed by pixels”的错误，可以修改build接口下的Scaffold：

home: Scaffold(
	resizeToAvoidBottomInset: false,
	...
),

设置为false之后，再打开屏幕键盘，就不会报错了，但是有可能屏幕键盘会遮挡住文本输入框。

而且这个错误只会在debug版本中显示，在release版本中不会显示错误，所以大可不必处理。

Gradle错误

使用verbose查看详细日志

flutter run --verbose

Exception in thread "main" java.net.ConnectException: Connection timed out: connect

gradle-wrapper.properties配置文件中，通过distributionUrl的下载超时：

distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.3-all.zip

我们可以从https://services.gradle.org/distributions/手动下载对应的包，然后指定路径即可：

distributionUrl=file:///D:/download/gradle-7.6.3-all.zip

或者也可以把下载后的压缩包放到对应的下载路径，aocdy2d2z8kodnny3rsumj8i8是随机生成的：

C:\Users\登录账号\.gradle\wrapper\dists\gradle-7.6.3-all\aocdy2d2z8kodnny3rsumj8i8

Gradle编译慢

使用阿里云镜像仓库：https://developer.aliyun.com/mvn/guide

修改android\settings.gradle

repositories {
        maven { url 'https://maven.aliyun.com/repository/google' }
        maven { url 'https://maven.aliyun.com/repository/public' }
        maven { url 'https://maven.aliyun.com/repository/central' }
        maven { url 'https://maven.aliyun.com/repository/gradle-plugin' }
        mavenLocal()
        // google()
        // mavenCentral()
        // gradlePluginPortal()
}

然后执行命令

cd .\android\
.\gradlew dependencies

如果是新版本，可能文件名是settings.gradle.kts

repositories {
	maven { url = uri("https://maven.aliyun.com/repository/public") }
	maven { url = uri("https://mirrors.tencent.com/nexus/repository/maven-public/") }
	maven { url = uri("https://repo.huaweicloud.com/repository/maven/") }
	// google()
	// mavenCentral()
	// gradlePluginPortal()
}

设置VPN

如果能后翻墙，也可以使用proxy

$env:HTTP_PROXY="socks5://127.0.0.1:1080"
$env:HTTPS_PROXY="socks5://127.0.0.1:1080"
或者
$env:GRADLE_OPTS="-DsocksProxyHost=127.0.0.1 -DsocksProxyPort=1080"

然后刷新依赖

.\gradlew.bat clean --refresh-dependencies --info

如何获取包名

使用 aapt 命令（已安装的APK）

查看APK文件的包名
aapt dump badging your-app.apk | findstr "package: name"

或者使用 aapt2
aapt2 dump packagename your-app.apk

SHA-1证书指纹

使用 keytool 命令

正式apk
keytool -list -v -keystore upload-keystore.jks -alias upload

debug apk
keytool -list -v -keystore C:/Users/adminstrator/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android

Flutter（十）| FAQ最先出现在wqh博客。

l10n.yaml

首先把上一节中的插件卸载掉，重新加载VSCode，删掉generated文件夹。

然后在根目录下面新建一个l10n.yaml文件，内容如下 ：

arb-dir: lib/l10n
template-arb-file: app_en.arb
output-localization-file: app_localizations.dart

arb文件还是放在lib/l10n下面，所以并没有删除之前的文件，但是需要把文件名修改为app_前缀，这里是app_en.arb和app_zh.arb。

如果之前没有l10n目录，需要手动创建目录及下面的arb文件。

执行消除命令flutter clean。

pubspec.yaml

修改pubspec.yaml文件：

flutter_localizations:
    sdk: flutter
intl: ^0.17.0

flutter:
  generate: true

intl要使用最新版，可以通过链接查看最新版本：https://pub.dev/packages/intl/install

保存修改之后，可以看到.dart_tool目录下，自动生成了flutter_gen\gen_l10n：

├─flutter_gen
│ └─gen_l10n
│       └─app_localizations_en.dart
│       └─app_localizations_zh.dart
│       └─app_localizations.dart
│ └─pubspec.yaml

注意：这些文件都是自动生成，不需要修改。

main.dart

文件生成之后，修改main.dart文件：

import 'package:flutter/material.dart';
import 'package:random_app/random/random_password.dart';
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: AppLocalizations.localizationsDelegates,
      supportedLocales: AppLocalizations.supportedLocales,
      home: RandomPasswordPage(),
    );
  }
}

然后修改random_password.dart中需要国际化的地方，例如：

把S.of(context)或S.current全部修改为
AppLocalizations.of(context)

并引入包
import 'package:flutter_gen/gen_l10n/app_localizations.dart';

修改完之后，重新运行flutter run，可以看到实现了同样的效果，并且切换系统语言之后，界面也会变化。

相比这2种方法，个人更推荐第3种方法，使用Get包中的国际化

Flutter（九）| 官方推荐的国际化最先出现在wqh博客。

Flutter Intl插件

打开VSCode，在扩展中探索Intl并安装，插件链接：https://marketplace.visualstudio.com/items?itemName=localizely.flutter-intl

安装好插件之后，按下Ctrl+Shift+P，在命令中输入intl，首先执行命令Flutter Intl: Initialize。

插件会在lib目录下，自动生成国际化所需要有文件。

├─generated
│ └─intl
│      └─messages_all.dart
│      └─messages_en.dart
│ └─l10n.dart
├─l10n
│ └─intl_en.arb
└─random

l10n目录下的arb就是配置文件。

generated目录下的就是对应配置文件的dart文件。

pubspec.yaml

自动生成文件之后，需要引入国际化包。

修改pubspec.yaml文件，在dependencies下新增包：

flutter_localizations:
  sdk: flutter

保存文件，等待Flutter自动下载包。

intl_en.arb

修改配置文件，配置需要进行翻译的文字内容：

{
	"generate": "Generate",
	"lowercaseLetter": "Lowercase Letter",
	"uppercaseLetter": "Uppercase Letter",
	"arabicNumeral": "Arabic Numeral",
	"specialCharacter": "Special Character",
	"length": "Length",
	"randomPassword": "Random Password",
	"passwordClipboard": "The password has been copied to the clipboard"
}

当保存修改之后，可以看到插件会自动生成messages_en.dart文件：

class MessageLookup extends MessageLookupByLibrary {
  String get localeName => 'en';

  final messages = _notInlinedMessages(_notInlinedMessages);
  static _notInlinedMessages(_) => <String, Function> {
    "arabicNumeral" : MessageLookupByLibrary.simpleMessage("Arabic Numeral"),
    "generate" : MessageLookupByLibrary.simpleMessage("Generate"),
    "length" : MessageLookupByLibrary.simpleMessage("Length"),
    "lowercaseLetter" : MessageLookupByLibrary.simpleMessage("Lowercase Letter"),
    "passwordClipboard" : MessageLookupByLibrary.simpleMessage("The password has been copied to the clipboard"),
    "randomPassword" : MessageLookupByLibrary.simpleMessage("Random Password"),
    "specialCharacter" : MessageLookupByLibrary.simpleMessage("Special Character"),
    "uppercaseLetter" : MessageLookupByLibrary.simpleMessage("Uppercase Letter")
  };
}

注意：generated目录下的文件不需要去修改，只需要修改l10n目录下的arb文件即可。

Add locale

那如何新增一个语言呢？

按下Ctrl+Shift+P，在命令中输入intl，执行命令Flutter Intl: Add locale，在弹出的输入框中输入zh，表示要加入中文的支持。

插件会自动生成messages_zh.dart和intl_zh.arb文件，修改intl_zh.arb文件：

{
	"generate": "生成",
	"lowercaseLetter": "小写字母",
	"uppercaseLetter": "大写字母",
	"arabicNumeral": "阿拉伯数字",
	"specialCharacter": "特殊字符",
	"length": "长度",
	"randomPassword": "随机密码",
	"passwordClipboard": "密码已经复制到剪贴板"
}

应用国际化

到这一步，国际化所需要的文件都已经准备好了，接下来修改代码使用。

首先修改main.dart文件：

import 'package:flutter/material.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:random_app/generated/l10n.dart';
import 'package:random_app/random/random_password.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      localizationsDelegates: const [
        S.delegate,
        GlobalMaterialLocalizations.delegate,
        GlobalWidgetsLocalizations.delegate,
        GlobalCupertinoLocalizations.delegate,
      ],
      supportedLocales: S.delegate.supportedLocales,
      home: RandomPasswordPage(),
    );
  }
}

然后修改random_password.dart中需要国际化的地方，例如：

title: Text('Random Password'),
修改为
title: Text(S.of(context).randomPassword),

'Generate',
修改为
S.current.generate,

不要忘记引入包
import 'package:random_app/generated/l10n.dart';

S类有2个方法可以调用get方法，是用of(context)还是current取决于接口中有没有传入context，其他的依此类推修改即可。

修改完成之后，运行flutter run查看，会发现界面已经显示成了中文；更神奇的是，当你把手机的系统语言改成英文的时候，界面也自动变成了英文。

在下一节中，我们将学习另外一种国际化的方法，不使用intl插件，也是官方推荐的方法

Flutter（八）| 用Intl插件国际化最先出现在wqh博客。

Clipboard

密码生成之后，用户可能需要复制粘贴，那如何把生成好的密码复制到剪贴板呢？

Flutter早就想到了这个问题，只需要使用Clipboard.setData就可以在剪贴板上设置数据。

修改_generatePassword中的setState，在生成密码之后，把密码设置到Clipboard：

setState(() {
  _password = String.fromCharCodes(tmpPassword);
  Clipboard.setData(ClipboardData(text: _password));
});

重新run之后，当点击Generate按钮之后，不仅可以显示在文本框，还可以切换到基本应用中，复制粘贴新生成的密码。

SnackBar

在使用剪贴板的时候，经常会看到这样一句提示’密码已经复制到剪贴板’，用来提示用户。

在Flutter中，可以通过SnackBar来实现：

void _snackBar() {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        backgroundColor: Colors.blue,
        content: Text(AppLocalizations.of(context).passwordClipboard,
            textAlign: TextAlign.center),
      ),
    );
  }

修改build中的MaterialApp，加入scaffoldMessengerKey管理：

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(AppLocalizations.of(context).randomPassword),
        centerTitle: true,
      ),
      body: Column(
        children: <Widget>[
          _switchLowercase(),
          _switchUppercase(),
          _switchNumber(),
          _switchSpecial(),
          _textLength(),
          _textShow(),
          _buttonGenerate(),
        ],
      ),
    );
  }

热加载一个，就可以看到当点击Generate按钮的时候，在最下面会弹出一个提示框，提示用户密码已经复制到粘贴板，过了几秒之后，提示框自动消失。

SnackBar优化

在使用SnackBar中会发现一个问题，就是当连续点击Generate按钮的时候，SnackBar会一个个出来，显得很卡，这是因为SnackBar是用一个队列管理，每一次点击按钮的时候，setData都会在队列中插入一条数据，然后由管理器一个个显示。

可以在setData的时候，调用removeCurrentSnackBar立即删除之前的数据：

void _snackBar() {
    ScaffoldMessenger.of(context).removeCurrentSnackBar();
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        backgroundColor: Colors.blue,
        content: Text(AppLocalizations.of(context).passwordClipboard,
            textAlign: TextAlign.center),
      ),
    );
  }

这样连续点击的时候，提示框会立即出现。

在下一节中，我们将学习如何使用国际化？

Flutter（七）| Clipboard剪贴板最先出现在wqh博客。

Random

基本上任何语言都会提供一个随机函数，Dart也不例外，在dart:math包中定义了Random类：

/// A generator of random bool, int, or double values.
///
/// The default implementation supplies a stream of pseudo-random bits that are
/// not suitable for cryptographic purposes.
///
/// Use the [Random.secure]() constructor for cryptographic purposes.
abstract class Random {
  /// Creates a random number generator.
  ///
  /// The optional parameter [seed] is used to initialize the
  /// internal state of the generator. The implementation of the
  /// random stream can change between releases of the library.
  external factory Random([int? seed]);

  /// Creates a cryptographically secure random number generator.
  ///
  /// If the program cannot provide a cryptographically secure
  /// source of random numbers, it throws an [UnsupportedError].
  external factory Random.secure();

  /// Generates a non-negative random integer uniformly distributed in the range
  /// from 0, inclusive, to [max], exclusive.
  ///
  /// Implementation note: The default implementation supports [max] values
  /// between 1 and (1<<32) inclusive.
  int nextInt(int max);

  /// Generates a non-negative random floating point value uniformly distributed
  /// in the range from 0.0, inclusive, to 1.0, exclusive.
  double nextDouble();

  /// Generates a random boolean value.
  bool nextBool();
}

有了Random就可以写出随机密码程序了。

_generatePassword

定义一个名叫_generatePassword的接口，随机密码有很多种方法，下面是我写的方法，核心思想就是：

1. 根据需要引入的元素生成一个足够长的字符串，把这个字符串随机乱序。
2. 再根据要生成的密码长度生成一个索引链表，把这个索引链表随机乱序。
3. 遍历索引链表，根据索引取字符串中对应的字符

内容如下：

static const String LowerCase = 'abcdefghijklmnopqistuvwxyz';
static const String UpperCase = 'ABCDEFGHIJKLMNOPQISTUVWXYZ';
static const String ArabicNumeral = '01234567890123456789';
static const String SpeicalCharacter = '!@#%^&*()-+=|[]~<>.';

void _generatePassword() {
    int length = int.parse(_length);
    if (length <= 0 || (!_lowercase && !_uppercase && !_number && !_speical)) {
      return;
    }

    List<int> tmpPassword = [];
    List<int> tmpProp = [];
    List<int> propStr = [];

    Random random = Random(DateTime.now().millisecondsSinceEpoch);

    if (_lowercase) {
      propStr.addAll(LowerCase.runes.toList());
    }
    if (_uppercase) {
      propStr.addAll(UpperCase.runes.toList());
    }
    if (_number) {
      propStr.addAll(ArabicNumeral.runes.toList());
    }
    if (_speical) {
      propStr.addAll(SpeicalCharacter.runes.toList());
    }

    while (propStr.length < length * 2) {
      List<int> tmpList = List.from(propStr);
      propStr.addAll(tmpList);
    }

    propStr.shuffle(random);
    for (int i = 0; i < propStr.length; i++) {
      tmpProp.add(i);
    }
    tmpProp.shuffle(random);
    for (int item in tmpProp.getRange(0, length)) {
      tmpPassword.add(propStr[item]);
    }
    setState(() {
      _password = String.fromCharCodes(tmpPassword);
    });
  }

Random random = Random(DateTime.now().millisecondsSinceEpoch) 使用当前时间做为随机种子。

根据Switch开关的值，来引入对应的密码元素。

runes 是dart中表示utf-32格式字符的编码单元，可以把字符串变成List，有了List就可以使用自带的shuffle接口，shuffle可以把一个List随机打乱顺序。

while (propStr.length < length * 2) 是为了防止引入的元素少于密码生成长度引起的Bug，例如如果用户只引入小写字母来生成长度99的密码，小写字母只有26个长度，所以我们要把小写字母扩展到比99更长。

propStr.shuffle(random) 随机字符串。

tmpProp.shuffle(random) 随机索引。

tmpPassword.add(propStr[item]) 根据索引取字符串中的字符。

setState 把生成的密码放到_password中保存。

onPressed

修改_buttonGenerate接口中的onPressed，点击按钮时，调用_generatePassword接口：

onPressed: () {
  _generatePassword();
},

运行热加载，点击Generate按钮，就可以在文本框中看到生成的随机密码。

在下一切中，我们将学习如何使用剪贴板复制粘贴生成的密码？

Flutter（六）| 随机密码最先出现在wqh博客。