How to create a Offline Internationalization App:Build the project structure
Tags: flutter, sqlite, strapi, offline
Published: 2021-10-10 11:43:30

### The first step, use get cli to generate the basic project structure

> https://pub.dev/packages/get_cli

```bash
get create project:strapi_flutter_internation_poc
  1) Flutter Project
  2) Get Server
1
? What is your company's domain?  Example: com.yourcompany  com.nasawz.strapi_flutter_internation_poc

what language do you want to use on ios?

  1) Swift
  2) Objective-C
1

what language do you want to use on android?

  1) Kotlin
  2) Java
1

Do you want to use null safe?

  1) Yes!
  2) No
1

do you want to use some linter?

  1) no
  2) Pedantic [Deprecated]
  3) Effective Dart [Deprecated]
  4) Dart Recommended
1

Running `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 run

Your 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_poc

See 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)
1

Your lib folder is not empty. Are you sure you want to overwrite your application?
 WARNING: This action is irreversible

  1) 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...
```

So far we have a Flutter-based project structure.

Next, let us incorporate Strapi into the project.

### Step two, integrate into Strapi

> https://strapi.io/

Enter the project directory

```bash
 cd .\strapi_flutter_internation_poc
```

Use "create-strapi-app" to initialize the project

```bash
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.43s

Running your Strapi application.
```

Here Strapi is installed successfully and started locally [http://localhost:1337](http://localhost:1337/admin/auth/register-admin) 

![微信截图_20211009150439-20211009150710-govdypc](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5zffg5le1nh323oletox.png)

After you can see this interface, you can pause it first, and modify the configuration of Strapi first. Point the address of the default Sqlite database in Strapi to the assets folder of the Flutter project.

First create the corresponding folder assets/db

edit `[project_root]/strapi/config/database.js`

```js
module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'sqlite',
        filename: env('DATABASE_FILENAME', '../assets/db/data.db'),
      },
      options: {
        useNullAsDefault: true,
      },
    },
  },
});
```

Restart the Strapi project after the modification is completed

```js
npm run develop
```

Register an administrator account


```js
admin@poc.com
nrVABVAAYq9geTY
```
 ![image-20211009152528-42y7qll](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ky625z2zlkyj8v2d4e54.png)

Modify the configuration file `pubspec.yaml` of the Flutter project and put the path of the database under assets
 
```yaml
flutter: 
  assets: 
    - assets/db/
  uses-material-design: true
```

In subsequent developments, Flutter can use Strapi's database files.

Now see the project structure as shown below

![image-20211009153140-npnc6t0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4epaoh2s3m5fpfbsu2x.png)
 
---

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lfajbsflhz9t8zpfm7ap.png)
 

[![Play Store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ocrcqncrb8uyhym5m2so.png)](https://play.google.com/store/apps/details?id=com.nasawz.diet_therap)


[![Apple Store](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e6gwvms69chncj8lf5qe.png)](https://apps.apple.com/us/app/%E8%94%AC%E6%9E%9C%E9%A3%9F%E7%96%97/id1588683566)