管理しやすい(と思う)Flutterプロジェクトのディレクトリ構造 #Flutter

プロジェクト構造

それは、生産性に直結する重要なファクターであり、特にドキュメントがない(できれば作って欲しい)ので、オープンソースのプロジェクト参考にしたり、フレームワークに則って構築する

※Laravelのプロジェクトを参考にした節があります

ルート階層はFlutterが自動生成したもので、 lib以下の構造について書きます

よく使うWidgetは共通Widgetとして切り出してここに配置します

web系でいう、view(ページ)に当たる部分です。

更に下はviewごとにディレクトリがあり、ほかに app.dart と importer.dart を配置しています。

例

components
├ home/
├ goods/
├ app.dart
└ importer.dart

ディレクトリ構造とは離れますが、一応説明

ここでは MaterialApp を返しています

おいおい説明しますが、はじめに呼ばれる lib/main.dart はほとんど runApp してるだけです。

大体のcomponentで使用されるライブラリはここで全部 exportさせておきます

importer.dart

export 'package:flutter/material.dart';
export 'package:fluro/fluro.dart' show TransitionType;

...

でcomponentたちに

import '../importer.dart';

importして、スッキリします

ここではグローバルな変数/定数を扱います

変数だと


class App {
  static Router router;
  static AppPreference preference;
}

定数だと

class AppColor {
  static const mainColor = const Color(0xFF315D79);
  static const main2Color = const Color(0xFF707070);
}

みたいにしておきます。

前者の　App クラスはシングルトンに扱うものは全部ここで管理すると楽です

staticな関数を配置します


import 'dart:io' show Platform;

class FontHelper {
  static double size(double size) => Platform.isAndroid ? size - 2.0 : size;
}

モデルクラスを配置します

DBアクセスを使用するアプリの場合にはRepositoryを配置します

Flutterだと sqliteになると思いますが、

ORマッパーがないので、自作してここに置いてあります。

ルーティングの設定はここに配置します。

fluro 使ってしかRoutingしたことないんですが、ここに fluro のconfigureとか買いえます。

サービスはここに配置します

先程#configsで説明した Appクラスにシングルトンなサービスを閉じ込めてどこでもアクセスできるようにしています

#components項でも触れましたが、基本的に runAppしかしてないです。

あとはここでしかできないことはここでやります(FlutterCrashlyticsの設定とか)

参考になると嬉しいです。