从零快速搭建flutter APP脚手架,集成常用的必备功能以及示例,这样以后新建app的时候也快,可以快速地得到一个可以运行的版本;我目前使用flutter使用的是 stable channel ,本来用的是 dev 分支的,但是后来发现有的库对 dev 分支支持得不是很好,因此就选择了 stable 分支。

初始化项目

什么是applicationId

applicationId用来标识APP的唯一性,一般是格式是这样的 net.dieya.app

  • net.dieya 是组织的名字,例如net.dieya
  • app app的名字,一般都是简写或者缩写,这样取名字的时候就不要用下划线了

由于我这里是搭建的脚手架,为了后面引入其它文件的时候方便,这里我们取名为 net.dieya.app ,这个参考 修改APP基本信息是可以通过命令来修改的。

例如,在flutter里面我们引入自己的一个文件的时候一般这样写:

1
import 'package:app/app_theme.dart';

这里的 package:app 其实就是 pubspec.yaml 里面的 name 字段, 这个字段不要修改 ,这样我们就能一直这样引入文件,也方便了我们以后写App的时候能直接fork脚手架就用。

创建项目

1
2
3
4
5
6
flutter create --org net.dieya app
mv app flutter-scaffold
cd flutter-scaffold
git init
git add .
git ci -m "init project"

模拟器运行

查看目前哪些device可以用来运行

一般开发的时候也就选一个设备来进行运行

1
flutter devices

下面就列出来有哪些设备可以运行

1
2
3
4
2 connected devices:
vinurs6s plus (mobile) • xxxxxxxxxxxxxxxxxxxxxxxxxxx • ios • iOS 13.6
iPhone 11 (mobile)     •  xxxxxxxxxxxxxxxxxxxxxxxxxxx    • ios •
com.apple.CoreSimulator.SimRuntime.iOS-13-6 (simulator)

运行

根据上面列出来的设备选择一个来运行就好了,例如我这里选择的是iPhone 11模拟器

1
flutter run -d 'vinurs-11promax'

如果想在所有设备上一起运行,那么就执行

1
flutter run -d all

一般刚初始化好项目以后最好在ios、Android的模拟器上都运行一遍,确保没有什么问题,如果出错了,那么可以参考后面的出错章节的处理。

热加载

Emacs

我用的是doom emacs配额,打开里面的flutter配置模块,然后打开代码文件 SPC m r 就可以了。

vscode

用vscode打开项目,然后启动调试,就可以每次修改代码以后自动生效了,用vscode来写flutter还是挺方便的

修改APP基本信息

修改applicationId/名称

因为我们是通过脚手架来建立新的APP的,所以我们必然会需要修改 applicationId ,这个我们可以通过 rename 这个命令来完成

  1. 安装rename包

    1
    
    flutter pub global activate rename
    

    然后把rename的命令加到zsh的配置的文件里面去

    1
    
    export PATH="$PATH":"$HOME/.pub-cache/bin"
    
  2. 修改applicationId以及名称 在项目的根目录下面执行下面的命令就可以了

    1
    2
    3
    4
    
    # 修改APP的名称
    rename --appname "脚手架"
    # 修改APP的applicationId
    rename --bundleId net.dieya.scaffold
    

APP名称手动修改

通过上面的命令就可以直接自动修改名称,这里是手动修改的方法,基本可以忽略。

  • Android 修改 android/app/src/main/AndroidManifest.xml 里面的 android:label 字段
  • Ios 修改 ios/Runner/Info.plist 里面的 CFBundleName 字段

此外,还需要修改 lib/main.dart 里面的 MaterialApp 里面的 title 部分为APP的名字

APP icon修改

https://icon.wuruihong.com/ 通过这个页面生成icon,logo一般是设计的时候是1024x1024, 记得安卓选择mipmap格式的同时选择自动圆角

另外,在脚手架里面我把原始的1024x1024的logo的图片存放在项目的根目录下面,生成的icons跟splash也是放在根目录下面

文件拷贝到对应的目录以后记得删除原来的图标

Android

把安卓相关的icon拷贝到 android/app/src/main/res 目录下面

iOS

ios的icon拷贝到 ios/Runner/Assets.xcassets 目录下面

启动页

启动页一般就是放一张图,可以参考这里的介绍更新启动页这里直接生成启动图,选一张3倍图(1125x2001),然后这里选择375x667,然后进行缩放来生成就可以了

如果没有启动图,那么还可以来这里下载

注意这里的图片不要太大,直接用3倍图就可以,要不然会生成不成功

Android

生成的图放到 android/app/src/main/res 目录下面, 然后修改drawable下面的launch_background.xml,代码如下:主要是红色粗体部分做了修改

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
  <item android:drawable="@android:color/white" />

  <!-- You can insert your own image assets here -->
  <item>
    <bitmap
        android:gravity="fill"
        android:mipMap="true"
        android:src="@drawable/screen" />
  </item>
</layer-list>

同时把 drawable-port-xxxhdpi 下面的 screen 文件copy到 drawable 里面

IOS

iOS的启动图目录里面的内容拷贝到 ios/Runner/Assets.xcassets/LaunchImage.imageset 这个目录下面就可以了,注意目录名称,别弄错了,因为生成的名字是 LaunchImage.launchimage

flutter切图

设计的时候一倍图的尺寸是375x667,导出图片的时候现在一般都是直接导出一套图就可以了,也就是3倍图,其它的一倍图、两倍图可以通过命令来进行生成。

在sketch里面安装插件sketch measure,然后按照下面的方式来进行导出。

_20210224_095010Untitled.png_20210224_095143Untitled.png

导出之前先点击这里设置一下,因为我写代码画图的时候就是以375作为基本的参照的,所以这里直接就是1就可以了,1表示相对于设计图的倍率,一般的话只需要导出三倍图,因为我们可以通过命令来自动切除一倍图、两倍图。

一般我们开发APP的时候都是需要一倍图、两倍图、三倍图的,其实我们只需要美工给我们一套三倍图就可以了,其它的我们可以通过命令来自动生成对应的倍图,这样他们也省事。

三倍图一般命名是[email protected],我们只需要把这些文件放在一个单独的目录下面,然后在这个目录下面通过下面的脚本来执行就可以生成对应的@2x以及一倍图文件:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
#!/usr/bin/env bash

# Ensure we're running in location of script.
cd "`dirname $0`"

for f in *; do
    if [[ $f == *@3x* ]];
    then
        echo "$f -> ${f//@3x/@2x}, ${f//@3x/}"
        convert "$f" -resize 66.66666% "${f//@3x/@2x}"
        convert "$f" -resize 33.33333% "${f//@3x/}"
    fi
done

echo "Complete"

flutter里面的切图我都存放在assets/imgs目录下面,那么imgs目录下面存放的就是一倍图,imgs/2.0x、imgs/3.0x下面就是存放的三倍图,我们把对应的文件移动到上面两个目录里面就可以了

1
2
3
4
5
6
mv *3x.png 3.0x
rm -rf *.png
for f in *; do
    newname=$(echo "${f%@3x.*}")".png"
      mv $f $newname
done

注意 : 无论如何一倍图的目录下面需要有对应的文件,要不然flutter会报找不到这个资源,仅仅有三倍图而一倍图没有的话flutter会找不到这个文件,除非显式地引用三倍图的目录

这个我已经写成了脚本 resize-imgs.sh 放在了项目的根目录下面

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
#!/usr/bin/env bash
#
# Ensure we're running in location of script.
# 将3倍图转成1x、2x图

# 3倍图一般命名是[email protected]: 拖拽@3x.png

cd assets/images/3.0x

# 先把3倍图的名称修改一下,去掉@3x
for f in *; do
    if [[ $f == *@3x* ]];
    then
        newname=$(echo "${f%@3x.*}")".png"
          mv $f $newname
    fi
done

# 生成1x、2x图
for f in *; do
    # echo  $f
    # echo "$f -> ${f//@3x/@2x}, ${f//@3x/}"
    convert "$f" -resize 66.66666% ../2.0x/"$f"
    convert "$f" -resize 33.33333% ../"$f"
done


echo "生成1倍2倍图结束"
cd -

更新历史

2021/02/24

  • 初稿