Flutter象棋：1.开发环境

无论做什么，都要先准备好工具，这样子才能做到事半功倍的效率。同样用Flutter开发象棋APP也是先弄好Flutter的开发环境！

为何选择 Flutter 作为前端
前端太多框架了，我们为什么需要学习一种新的？
简单点，肯定是选择跨平台的解决方案，做一套应用，可以在 iOS、Android、WEB、MacOS、Windows、Linux 多端运行
调试期间的热加载，不需要每次都编译代码，能极大地提升开始发效率；
更先进的界面布局理念，上手后做同样的界面花费的代价低于 iOS 或是 Android；

这是一个以Flutter写一个“将帅象棋”的中国象棋APP.

先为XUbunt安装Flutter。官网安装教程：https://docs.flutter.dev/get-started/install/linux

到官网这里选择最新版（3.7.12 ）

		elapse@elapse-PC:~$ wget https://storage.googleapis.com/flutter_infra_release/releases/stable/linux/flutter_linux_3.7.12-stable.tar.xz
		elapse@elapse-PC:~$ tar xfv flutter_linux_3.7.12-stable.tar.xz  
		elapse@elapse-PC:~$ mv flutter ~/soft/flutter
		elapse@elapse-PC:~$ wget https://download.oracle.com/java/17/archive/jdk-17_linux-x64_bin.tar.gz
		elapse@elapse-PC:~$ tar -zxvf jdk-17_linux-x64_bin.tar.gz
		elapse@elapse-PC:~$ mv jdk-17 ~/soft/jdk-17

设置Flutter环境变量

可以直接在/etc/profile末尾在里面添加‘PATH="$PATH:/home/elapse/soft/flutter/bin" ’ , 但我看到XUbuntu的/etc/profile文件里面并没有直接给PATH设置值， 但看到了“for i in /etc/profile.d/*.sh; do”这一行， 说明包含/etc/profile.d/文件夹下面的所有sh结尾的文件， 所以我在/etc/profile.d/文件夹下面， 新建一个“flutter.sh”文件来设置Flutter的环境变量 flutter.sh文件如下： 

		# Flutter的源码路径
		FLUTTER_HOME=/home/elapse/soft/flutter
		export PATH="$PATH:$FLUTTER_HOME/bin"
		
		#flutter国内用户镜像环境
		export PUB_HOSTED_URL=https://pub.flutter-io.cn
		export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
		
		#java下载地址无法下载: https://download.oracle.com/otn-pub/java/jdk/15.0.2%2B7/0d1cfde4252546c6931946de8db48ee2/jdk-15.0.2_linux-x64_bin.tar.gz
		#java下载地址: https://download.oracle.com/java/17/archive/jdk-17_linux-x64_bin.tar.gz
		JAVA_HOME=/home/vagi/soft/jdk-17/
		export PATH="$PATH:$JAVA_HOME/bin"
更新环境变量（重新启动计算机），使其生效后，再确认 flutter 命令可以执行： 

		elapse@elapse-PC:/etc/profile.d$ source /etc/profile
		elapse@elapse-PC:/etc/profile.d$ echo $PATH
		/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games:/snap/bin:/home/elapse/soft/flutter/bin
		elapse@elapse-PC:/etc/profile.d$ which flutter
		/home/elapse/soft/flutter/bin/flutter
		elapse@elapse-PC:/etc/profile.d$
接下来要先安装Android Studio：
错误参考：https://segmentfault.com/a/1190000042984453
1.下载并安装 Android Studio。
2.运行 Android Studio，并进入 ‘Android Studio Setup Wizard’，这会安装最新的 Android SDK， Android SDK Platform-Tools 以及 Android SDK Build-Tools，这些都是在开发 Android Flutter 应用时所需要的。
3.运行 flutter doctor 确保 Flutter 已经定位到了你的 Android Studio 的安装位置。如果 Flutter 并未定位到，运行 flutter config --android-studio-dir 设置你的 Android Studio 的安装目录。(这条) 提前下载二进制开发文件: 

		   
		    elapse@elapse-PC:/etc/profile.d$ flutter precache
		    Downloading Android Maven dependencies...                          29.4s
		    elapse@elapse-PC:/etc/profile.d$ 
		    
		    
		    elapse@elapse-PC:/etc/profile.d$ flutter doctor
		    
		      ╔════════════════════════════════════════════════════════════════════════════╗
		      ║                 Welcome to Flutter! - https://flutter.dev                  ║
		      ║                                                                            ║
		      ║ The Flutter tool uses Google Analytics to anonymously report feature usage ║
		      ║ statistics and basic crash reports. This data is used to help improve      ║
		      ║ Flutter tools over time.                                                   ║
		      ║                                                                            ║
		      ║ Flutter tool analytics are not sent on the very first run. To disable      ║
		      ║ reporting, type 'flutter config --no-analytics'. To display the current    ║
		      ║ setting, type 'flutter config'. If you opt out of analytics, an opt-out    ║
		      ║ event will be sent, and then no further information will be sent by the    ║
		      ║ Flutter tool.                                                              ║
		      ║                                                                            ║
		      ║ By downloading the Flutter SDK, you agree to the Google Terms of Service.  ║
		      ║ Note: The Google Privacy Policy describes how data is handled in this      ║
		      ║ service.                                                                   ║
		      ║                                                                            ║
		      ║ Moreover, Flutter includes the Dart SDK, which may send usage metrics and  ║
		      ║ crash reports to Google.                                                   ║
		      ║                                                                            ║
		      ║ Read about data we send with crash reports:                                ║
		      ║ https://flutter.dev/docs/reference/crash-reporting                         ║
		      ║                                                                            ║
		      ║ See Google's privacy policy:                                               ║
		      ║ https://policies.google.com/privacy                                        ║
		      ╚════════════════════════════════════════════════════════════════════════════╝
		    
		    
		    Doctor summary (to see all details, run flutter doctor -v):
		    [✓] Flutter (Channel stable, 1.20.4, on Linux, locale zh_CN.UTF-8)
		     
		    [✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
		    [✓] Android Studio (version 3.6)
		    [✓] VS Code (version 1.49.0)
		    [!] Connected device
		        ! No devices available
		    
		    ! Doctor found issues in 1 category.
		    elapse@elapse-PC:/etc/profile.d$
至此开发环境算是完成了，还要安装（开发工具：VSCode 1.48.0、Android Studio），这个不再做安装记录。
确认使用的开发环境如下：
系统：Xubuntu 20.04 LTS
Flutter： 1.20.2
主力开发工具：VSCode 1.48.0、Android Studio
环境可以用自己喜欢的，但都差不了多少,只是在打包和发布 iOS 应用的时候，你需要使用 mac 电脑配合 xcode 一起工作。

如果你还没有配置好 Flutter 开发环境，请参考此文档；
VSCode 配置好必要插件后，是极理想的 Flutter 开发利器，你可以从这里下载它。
此文档引导你完成 Flutter 插件及环境的安装。
如果你使用 Android Studio 开发也没有问题，此文档引导你完成 Android Studio 的插件配置。
无论你在 Windows 下还是使用一其它什么软件环境或版，请使用以下命令行指确认自己的 Flutter 开发环境：

		elapse@elapse-PC:~$ flutter doctor
		Doctor summary (to see all details, run flutter doctor -v):
		[✓] Flutter (Channel stable, 1.20.2, on Linux, locale zh_CN.UTF-8)
		 
		[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.3)
		[✓] Android Studio (version 3.6)
		[✓] VS Code (version 1.48.0)
		[!] Connected device
		    ! No devices available
		
		! Doctor found issues in 1 category.
		elapse@elapse-PC:~$
打开VSCode后，通过快捷键：Ctrl+Shit+p 键打开后选择”Flutter New Project“来创建一个Flutter项目，

输入项目名”chinese_chess“,回车后会让你选择保存项目的路径。选择好保存路径后，VSCode会自动打到当前项目。


项目创建好后应该为其添加版本控制

先去Git创建好账号，创建好项目。

之后再在本地项目把代码初始化到Git上面（我的git项目地址：https://rocketgit.com/user/elapse/chinese_chess）

在VSCode中用快捷键” Ctrl+` “打开命令窗口:


		elapse@elapse-PC:~/Language/Flutter/chinese_chess$ git init
		已初始化空的 Git 仓库于 /home/elapse/Language/Flutter/chinese_chess/.git/
		elapse@elapse-PC:~/Language/Flutter/chinese_chess$ git add .
		elapse@elapse-PC:~/Language/Flutter/chinese_chess$ git commit -m '初始化项目'
		[master （根提交） 355a429] 初始化项目
		 62 files changed, 1633 insertions(+)
		 create mode 100644 .gitignore
		 create mode 100644 .metadata
		 create mode 100644 README.md
		 create mode 100644 android/.gitignore
		 create mode 100644 android/app/build.gradle
		 create mode 100644 android/app/src/debug/AndroidManifest.xml
		 create mode 100644 android/app/src/main/AndroidManifest.xml
		 create mode 100644 android/app/src/main/kotlin/com/example/chinese_chess/MainActivity.kt
		 create mode 100644 android/app/src/main/res/drawable/launch_background.xml
		 create mode 100644 android/app/src/main/res/mipmap-hdpi/ic_launcher.png
		 create mode 100644 android/app/src/main/res/mipmap-mdpi/ic_launcher.png
		 create mode 100644 android/app/src/main/res/mipmap-xhdpi/ic_launcher.png
		 create mode 100644 android/app/src/main/res/mipmap-xxhdpi/ic_launcher.png
		 create mode 100644 android/app/src/main/res/mipmap-xxxhdpi/ic_launcher.png
		 create mode 100644 android/app/src/main/res/values/styles.xml
		 create mode 100644 android/app/src/profile/AndroidManifest.xml
		 create mode 100644 android/build.gradle
		 create mode 100644 android/gradle.properties
		 create mode 100644 android/gradle/wrapper/gradle-wrapper.properties
		 create mode 100644 android/settings.gradle
		 create mode 100644 ios/.gitignore
		 create mode 100644 ios/Flutter/AppFrameworkInfo.plist
		 create mode 100644 ios/Flutter/Debug.xcconfig
		 create mode 100644 ios/Flutter/Release.xcconfig
		 create mode 100644 ios/Runner.xcodeproj/project.pbxproj
		 create mode 100644 ios/Runner.xcodeproj/project.xcworkspace/contents.xcworkspacedata
		 create mode 100644 ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
		 create mode 100644 ios/Runner.xcodeproj/project.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
		 create mode 100644 ios/Runner.xcodeproj/xcshareddata/xcschemes/Runner.xcscheme
		 create mode 100644 ios/Runner.xcworkspace/contents.xcworkspacedata
		 create mode 100644 ios/Runner.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist
		 create mode 100644 ios/Runner.xcworkspace/xcshareddata/WorkspaceSettings.xcsettings
		 create mode 100644 ios/Runner/AppDelegate.swift
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/Contents.json
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/AppIcon.appiconset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/LaunchImage.imageset/Contents.json
		 create mode 100644 ios/Runner/Assets.xcassets/LaunchImage.imageset/LaunchImage.png
		 create mode 100644 ios/Runner/Assets.xcassets/LaunchImage.imageset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/LaunchImage.imageset/[email protected]
		 create mode 100644 ios/Runner/Assets.xcassets/LaunchImage.imageset/README.md
		 create mode 100644 ios/Runner/Base.lproj/LaunchScreen.storyboard
		 create mode 100644 ios/Runner/Base.lproj/Main.storyboard
		 create mode 100644 ios/Runner/Info.plist
		 create mode 100644 ios/Runner/Runner-Bridging-Header.h
		 create mode 100644 lib/main.dart
		 create mode 100644 pubspec.lock
		 create mode 100644 pubspec.yaml
		 create mode 100644 test/widget_test.dart
		elapse@elapse-PC:~/Language/Flutter/chinese_chess$ git remote add origin https://rocketgit.com/user/elapse/chinese_chess
		elapse@elapse-PC:~/Language/Flutter/chinese_chess$ sudo git push -u origin master
		Username for 'https://github.com': [email protected]
		Password for 'https://[email protected]@github.com': 
		枚举对象: 88, 完成.
		对象计数中: 100% (88/88), 完成.
		使用 4 个线程进行压缩
		压缩对象中: 100% (69/69), 完成.
		写入对象中: 100% (88/88), 53.76 KiB | 5.97 MiB/s, 完成.
		总共 88 （差异 3），复用 0 （差异 0）
		remote: Resolving deltas: 100% (3/3), done.
		To https://github.com/vagicc/chinese_chess.git
		 * [new branch]      master -> master
		分支 'master' 设置为跟踪来自 'origin' 的远程分支 'master'。
		elapse@elapse-PC:~/Language/Flutter/chinese_chess$
项目初始化完成后，第一眇先修改APP在设备安装后的名字：

Android：android/app/src/main/AndroidManifest.xml 

修改文件中：android:label="将帅象棋" 

IOS：ios/Runner/Info.plist

修改文件：CFBundleName 中下一行的string里的值，修改后如下

<key>CFBundleName key>

<string>将帅象棋 string>

如此APP安装后的名字就改成了”将帅象棋“。

预先定义自己的颜色类：

在项目的根目录下，lib 是我们 flutter 代码的集中地。我们创建 lib/common 文件夹，并在其下创建 color-consts.dart 文件：


		import 'package:flutter/material.dart';
		
		class ColorConsts {
		  // Logo 的颜色，一般都是品牌色
		  static const LogoColor = Color(0xFF6D000D);
		
		  // 主色，App 定调的颜色，一般从 Logo 中提升
		  static const Primary = Color(0xFF461220);
		  // 辅助色
		  static const Secondary = Color(0x99461220);
		
		  // 深色背景
		  static const DarkBackground = Colors.brown;
		  // 浅色背景
		  static const LightBackground = Color(0xFFEEE0CB);
		
		  // 棋盘颜色
		  static const BoardBackground = Color(0xFFEBC38D);
		
		  static const DarkTextPrimary = Colors.white;
		  static const DarkTextSecondary = Color(0x99FFFFFF);
		
		  // 棋盘线颜色
		  static const BoardLine = Color(0x996D000D);
		
		  // 棋盘上的路数、河界提示文字颜色
		  static const BoardTips = Color(0x666D000D);
		
		  static const LightLine = Color(0x336D000D);
		
		  // 棋盘上的移动位置指示
		  static const FocusPosition = Color(0x99FFFFFF);
		  static const BlurPosition = Color(0x99FFFFFF);
		
		  // 黑棋子颜色
		  static const BlackPieceColor = Color.fromARGB(0xFF, 0x00, 0x00, 0x00);
		  static const BlackPieceBorderColor = Color.fromARGB(0xFF, 0x22, 0x22, 0x22);
		
		  // 红棋子颜色
		  static const RedPieceColor = Color.fromARGB(0xFF, 0x7B, 0x00, 0x00);
		  static const RedPieceBorderColor = Color.fromARGB(0xFF, 0x66, 0x00, 0x00);
		
		  // 棋子文字颜色
		  static const PieceTextColor = Color.fromARGB(0xCC, 0xFF, 0xFF, 0xFF);
		}

在这儿我们定义了一组可以使用的颜色常量，实际项目推进中，颜色常量是一点一点地根据当时的需求添加进来的。


提交我们的代码到 git 仓库：


		elapse@elapse-PC:~/Language/Flutter/chinese_chess$ git add .
		elapse@elapse-PC:~/Language/Flutter/chinese_chess$ git commit -m '增加颜色'
		[master edd1e70] 增加颜色
		 1 file changed, 45 insertions(+)
		 create mode 100644 lib/common/color-consts.dart
		elapse@elapse-PC:~/Language/Flutter/chinese_chess$ sudo git push
		[sudo] elapse 的密码： 
		Username for 'https://rocketgit.com': vagi
		Password for 'https://[email protected]': 
		枚举对象: 7, 完成.
		对象计数中: 100% (7/7), 完成.
		使用 4 个线程进行压缩
		压缩对象中: 100% (4/4), 完成.
		写入对象中: 100% (5/5), 945 字节 | 945.00 KiB/s, 完成.
		总共 5 （差异 1），复用 0 （差异 0）
		remote: RocketGit: Info: == Welcome to RocketGit! ==
		remote: RocketGit: Info: you are connecting from IP 2408:8256:684:8dfe:998c:3cd8:41b5:d73d.
		remote: RocketGit: Info: date/time: 2020-08-22 12:32:24 (UTC), debug id 679e6d.
		To https://rocketgit.com/user/vagi/chinese_chess
		   1fbba4d..edd1e70  master -> master
		elapse@elapse-PC:~/Language/Flutter/chinese_chess$
到此本小节已完。下节继续！！

在此可以插入一点点时间来学下Dart语法：

40分钟快速入门Dart基础

40分钟快速入门Dart基础（中）