156
110

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-12-23

プロジェクト構造

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

どんなの?

スクリーンショット_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の設定とか)

終わりに

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

156
110
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
156
110