從最初練習製作的小程式中，觀察最後完成時的程式碼，應該已經有人開始覺得好像有點亂，要編輯部份物件已經開始要使用搜尋功能查找他們的位置了是吧。那麼，一個擁有著完整功能的應用程式，或應該說一個中小型規模的程式，如果要將所有程式碼都塞在main.dart中，肯定會變得很亂，且難以維護。
若有瀏覽過其他人所寫的程式，肯定會發現他們許多程式碼都會放在其他的文件夾中，且那些文件夾通常不是隨便命名的，他們其實有著一個極具邏輯性且被完整規劃過得結構與名稱。今天，筆者想帶著大家一起研究開發時該如何做文件分類，以為將來的程式做規劃整理。

文件夾內有什麼？

通常，我們都會希望我們的資料夾的邏輯結構清晰，其他人看一眼就能大致猜到裡面的檔案類型，因此，命名的方式就非常重要。幸運的是，我們不必去煩惱文件夾該如何命名，現在已經有被廣泛使用的一套模式，我們只需要去學習他們就可以啦。

assets/

這個資料夾內的東西比較是與程式碼沒有直接關聯，而是應用程式所需要用到的其他資料，像是圖示，或是一些其他檔案類型。在flutter中，若想在程式中增加Icon與Logo，也是將他們放入assets資料夾（很可能須自行建立一個），之後再於pubspec.yaml中將他們加入應用程式之中。
詳細說明請點此。

myProject
├── /assets
│   ├── /icons
│   │   ├── /brands
│   │   ├── /categories
│   │   └── /payment_methods
│   ├── /images
│   └── /logos
│       └── ...
└── /fonts
│   └── ... 
└── /lib
    └── ... 

fonts/

這應該很容易理解，此資料夾內包含著程式所需要的自訂字體。建立一個在專案root的fonts資料夾，將字體檔案移入，並於pubspec.yaml做設定，便可以新增可用字體。
詳細說明請點此。

lib/

這個就是我們要編輯的程式碼所在位置。在我們新建立的flutter專案中，不是也會自動將main.dart建立在lib的資料夾內嗎。除了main.dart，其他會用到的程式檔案都將放在這裡。

全都在src/

這個資料夾內用於放source file，也就是main.dart會使用到的內容。對於內容較多的應用程式，src/內還會有其他的資料夾，以下為一種資料夾結構：

lib/
├── main.dart
└── src/
   ├── controllers/
   ├── routes/
   ├── models/
   ├── services/
   ├── themes/
   ├── utils/
   ├── views/
   └── widgets/

1. controllers/ and routes/：這兩個部份放著與API的詳細運作與優化的相關檔案，詳細說明可見此連結
2. models/：包含著一些程式所需要用到的data models跟class
3. services/：有著程式可能需要用到的額外api與service
4. themes/：程式介面的主題，像是顏色、字體等等
5. utils/：一些functions、功能等幫助我們程式的編寫與運作
6. views/：程式介面的一些元素，像是pages
7. widgets/：程式中可重複運用的一些widgets

大分類

以下也是一個實用的分類方式，不是將東西都放入src/中，而是在lib/先分成4大類(不包含routes/ services/)，再進一步細分。

    lib/ 
     ├── main.dart 
     ├── core/ 
     │    ├── config/ 
     │    ├── constants/ 
     │    ├── utils/ 
     │    └── errors/ 
     ├── data/ 
     │    ├── models/ 
     │    ├── repositories/ 
     │    └── providers/ 
     ├── domain/ 
     │    ├── entities/ 
     │    ├── usecases/ 
     │    └── repositories/ 
     ├── presentation/ 
     │    ├── pages/ 
     │    ├── widgets/ 
     │    ├── blocs/ (or cubits/ for Bloc package users) 
     │    └── controllers/ (for MVC pattern or GetX) 
     └── routes/ 
     └── services/ 

1. core/：整個程式所需用到的程式碼，也就是程式的核心
2. data/：放置所有與data相關的內容及operations，例如：API requests, data models, and repository patterns
3. domain：依照clean architecture或是將business logic相關的程式碼與data/與presentation/分離放置
4. presentation：介面的呈現方式，任何與UI相關的內容

依照feature分類

有些大型程式中，每個功能各自擁有一大堆的程式碼，那麼，上面的分類方式就會不夠用了。因此，這時候我們將先依照功能feature分類，再將與那功能相關的程式碼放入該資料夾中。這種分類方式稱作feature-first，與之相對的則是layer-first。

lib/ 
 ├── features/ 
 │    ├── authentication/ 
 │    │    ├── data/ 
 │    │    ├── domain/ 
 │    │    └── presentation/ 
 │    └── home/ 
 │         ├── data/ 
 │         ├── domain/ 
 │         └── presentation/ 
 ├── core/ 
 └── routes/ 

lib/
├── feature_1/
│   ├── screens/
│   ├── widgets/
│   ├── models/
│   ├── services/
│   └── view_models/
├── feature_2/
│   ├── screens/
│   ├── widgets/
│   ├── models/
│   ├── services/
│   └── view_models/
└── ...

Conclusion

其實，資料夾結構沒有一個既定的格式，重點僅在於讓程式好維護與編輯。在團隊專案中，有著一致的結構規則也有助於保持程式簡潔不雜亂。而其中，大多數採用的分類方式都有著一個主要重點，便是小程式->layer-first，大專案->feature-first。

有任何問題或是想說的，都歡迎留言或email。謝謝看到這裡的讀者，明天會繼續加油更新的！

p.s. 想快速讓自己的資料夾結構以上方的樹狀圖印出，可於自己電腦中的package manager中下載tree，順帶一題，筆者平常用的是eza-community/eza，一個快速且可美化tree跟ls的小工具。

以下為本文的參考文章：

1. A Comprehensive Guide to Creating a Scalable Folder Structure for Flutter Apps
2. Which is the best folder structure for Flutter app development?
3. Flutter Professional Folder Structure: Feature-first or Layer-first?