Strapi助力Flutter开发国际化App|Strapi助力Flutter开发国际化App - 搭建项目结构
搭建项目结构
第一步、使用get cli生成基础的项目结构
https://pub.dev/packages/get_cli项目类型为Flutter Project,iOS语言选swift、Andoid语言选Kotlin,并且启用null safe特性,Getx的模板选择“GetX Pattern”。
get create project:strapi_flutter_internation_poc
1) Flutter Project
2) Get Server
1
? What is your company's domain?Example: com.yourcompanycom.nasawz.strapi_flutter_internation_pocwhat language do you want to use on ios?1) Swift
2) Objective-C
1what language do you want to use on android?1) Kotlin
2) Java
1Do you want to use null safe?1) Yes!
2) No
1do you want to use some linter?1) no
2) Pedantic [Deprecated]
3) Effective Dart [Deprecated]
4) Dart Recommended
1Running `flutter create D:\poc\strapi_flutter_internation_poc` …$ flutter create --no-pub -i swift -a kotlin --org com.nasawz.strapi_flutter_internation_poc D:\poc\strapi_flutter_internation_poc
Creating project ....
lib\main.dart (created)
pubspec.yaml (created)
README.md (created)
test\widget_test.dart (created)
.gitignore (created)
.idea\libraries\Dart_SDK.xml (created)
.idea\libraries\KotlinJavaRuntime.xml (created)
.idea\modules.xml (created)
.idea\runConfigurations\main_dart.xml (created)
.idea\workspace.xml (created)
.metadata (created)
.......
........
Wrote 81 files.All done!
In order to run your application, type:$ cd .
$ flutter runYour application code is in .\lib\main.dart.Running `flutter pub get` …$ flutter pub get
Running "flutter pub get" in strapi_flutter_internation_poc...2,666ms
$ dart migrate --apply-changes --skip-import-check
Migrating D:\poc\strapi_flutter_internation_pocSee https://dart.dev/go/null-safety-migration for a migration guide.Analyzing project...
All sources appear to be already migrated.Nothing to do.
?File: analysis_options.yaml created successfully at path: analysis_options.yaml
1) GetX Pattern (by Kauê)
2) CLEAN (by Arktekko)
1Your lib folder is not empty. Are you sure you want to overwrite your application?
WARNING: This action is irreversible1) Yes!
2) No
1
?'Package: get installed!
?File: main.dart created successfully at path: lib\\main.dart
?File: home_controller.dart created successfully at path: ./lib\app\modules\home\\controllers\\home_controller.dart
?File: home_view.dart created successfully at path: ./lib\app\modules\home\\views\\home_view.dart
?File: home_binding.dart created successfully at path: ./lib\app\modules\home\\bindings\\home_binding.dart
?File: app_routes.dart created successfully at path: lib\\app\\routes\\app_routes.dart
?File: app_pages.dart created successfully at path: lib\\app\\routes\\app_pages.dart
?home route created successfully.
?Home page created successfully.
?GetX Pattern structure successfully generated.Running `flutter pub get` …$ flutter pub get
Running "flutter pub get" in strapi_flutter_internation_poc...
【Strapi助力Flutter开发国际化App|Strapi助力Flutter开发国际化App - 搭建项目结构】至此 我们已经有了一个Flutter基础的项目结构。
接下来,让我们将Strapi融入到项目中。
第二步、融入Strapi
https://strapi.io/进入项目目录
cd .\strapi_flutter_internation_poc
使用"create-strapi-app"来初始化项目
npx create-strapi-app strapi
npx: installed 146 in 14.856s
? Choose your installation type Quickstart (recommended)
? Would you like to use a template? (Templates are Strapi configurations designed for a specific use case) No
Creating a quickstart project.
Creating a new Strapi application at D:\poc\strapi_flutter_internation_poc\strapi.
Creating files.
Dependencies installed successfully.Your application was created at D:\poc\strapi_flutter_internation_poc\strapi.Available commands in your project:yarn develop
Start Strapi in watch mode.yarn start
Start Strapi without watch mode.yarn build
Build Strapi admin panel.yarn strapi
Display all available commands.You can start by doing:cd D:\poc\strapi_flutter_internation_poc\strapi
yarn develop> strapi@0.1.0 build D:\poc\strapi_flutter_internation_poc\strapi
> strapi build "--no-optimization"Building your admin UI with development configuration ...√ Webpack
Compiled successfully in 27.43sRunning your Strapi application.
到这里 Strapi安装成功并启动在本地的 http://localhost:1337 端口上。
文章图片
能看到这个界面后可以先暂停下,先修改下Strapi的配置。将Strapi中默认的Sqlite数据库的地址指向到Flutter项目的assets文件夹中。
先将对应的文件夹建立好 assets/db
修改
[project_root]/strapi/config/database.js
module.exports = ({ env }) => ({
defaultConnection: 'default',
connections: {
default: {
connector: 'bookshelf',
settings: {
client: 'sqlite',
filename: env('DATABASE_FILENAME', '../assets/db/data.db'),
},
options: {
useNullAsDefault: true,
},
},
},
});
修改完成后重新启动Strapi项目
npm run develop
注册一个管理员账号
admin@poc.com
nrVABVAAYq9geTY
文章图片
修改Flutter项目的配置文件
pubspec.yaml
将数据库的路径放到assets下flutter:
assets:
- assets/db/
uses-material-design: true
在之后的开发中 Flutter 就可以利用Strapi的数据库文件了。
现在看到项目结构如下图
文章图片
上一篇:技术选型
推荐阅读
- 游乐园系统,助力游乐园管理
- 康恩赫助力线头公益#义卖星推官#,分享你最喜爱的义卖明星
- Flutter的ListView
- 运用flutter|运用flutter 构建一个发布版(release)APK
- Flutter自定义view|Flutter自定义view —— 闯关进度条
- Flutter|Flutter SwiftUI React 对比
- flutter设置沉浸式状态栏
- 2019-12-02|2019-12-02 flutter的环境配置
- Flutter开发之布局Widget
- 戒烟后,出现4个不适,是身体在变好,坚持5件事,助力成功戒烟