Flutter

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


プロジェクト構造

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


どんなの?

スクリーンショット_2018-12-24_1_01_05-2.png

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


説明

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


common

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


components

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

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

components

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


app.dart

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

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

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


importer.dart

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


importer.dart

export 'package:flutter/material.dart';

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

...


でcomponentたちに

import '../importer.dart';

importして、スッキリします


configs

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

変数だと


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

定数だと

class AppColor {

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

みたいにしておきます。

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


helpers

staticな関数を配置します


import 'dart:io' show Platform;

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


models

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


repositories

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

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

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


routes

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

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


services

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

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


main.dart

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

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


終わりに

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