Flutter 组件化开发之package从创建到上传到github完整流程

创建一个flutter package

• 步骤1：选择File 里面的New flutter project

  
  
  image.png

• 步骤2：选择第三个flutter package，并且一路next

  
  
  image.png

• 步骤3：设置项目名，并指定Flutter SDK path，以及项目地址，最后finish

  
  
  image.png

• 步骤4：在package的yaml文件里设置package 模块的资源目录，assets/images是自定义的文件夹，你可以定义成别的，注意：这里package里调用的时候格式如下'packages/项目名/assets/images/图片名'

  
  
  image.png

创建一个flutter example

到目前为止，package已经创建完毕，单独的package是没有main.dart文件的，也就意味着无法独立运行起来，为了能及时看到package的项目效果，我们需要在项目里创建个example模块，该模块是完整flutter结构，可以调用package里面的页面运行起来

• 在as的控制台里输入 flutter create example

  
  
  image.png

此时我们的项目结构如下，包含lib目录以及example目录，lib目录是我们写package代码的地方，example可以关联package目录，然后可以模拟调用package的页面看看功能是否正常

image.png

• 将example和package关联起来，在example的yaml文件里指定package的路径，我打码的地方是package的项目名，在package项目里的yaml文件的name

  
  
  image.png
  
  
  image.png

• 在package的最外层与项目名相同的dart文件里将需要提供给example调用的文件导出，我导出的是一个路由工具类，给其他页面提供跳转，有其他需要给外部使用的页面再自行导出，不导出的话外部无法使用你的文件

  
  
  image.png
• 在example的main.dart文件里导入package的同名文件，此时两模块已经成功关联起来，example可通过我上一个步骤里导出的路由自由的跳转的package里的指定页面(package内部互相跳转是不需要提供到外部去的)

接下来就是将项目放到github去了

• 步骤1：确认自己的git以及as里的github配置无误。

• 步骤2：创建本地仓库，与在文件夹里直接用命令行git init是一样的

  
  
  image.png

• 步骤3：将代码添加到git管理，设置忽略，为了减少项目的体积，我只把assets目录，example里的lib目录，yaml文件，readme文件，以及package本身的lib目录，yaml文件以及readme文件添加进了git，其他的全部忽略调了，此时全部文件都从红色变成了绿色，说明已经添加到git里了。

  
  
  image.png

• 步骤4：设置远程路径，如果不设置的话，默认是github的个人仓库路径

  
  
  image.png
  
  
  image.png