In a traditional Web project, developers reuse common materials in the project: code snippets such as components, interfaces, CSS styles, types (TypeScript projects), resources such as images, ICONS, etc. For public pages, it is preferred to maintain them as common components, because pages are the most advanced and heaviest container in a Web project, and using common components can reduce page deployment times and invocation costs. For the light and medium weight Flutter project, the page is the basic container, and the flat page management will become more difficult to maintain as the number of pages increases. Therefore, it is suggested to design the directory structure based on the actual business architecture of the project to improve the readability of the project code.

Take Apple Music, for example. It looks like this:

We can disassemble the following business modules from the interface design:

Page entry The page content The page or module involved
To explore the page Recommend a personalized library to the user Album details page, singer details page, play page, etc
list Hit songs in different dimensions Album details page, singer details page, play page, etc
Search page Personalized database search Search results page
The music library Classified music library Playlist details page, member page
Settings page User Settings pages, such as song preferences Login page, user information setting page, member page

The four page entrances are relatively independent, and there is no heavy business logic in themselves, but more about displaying the information of common modules. Take [Exploration page] as an example, show the user personalized album, singer is the core logic of the page, the login page is the prerequisite to complete the process, album module, singer module, player module is the necessary material to realize the logic. Taking the Settings page as an example, the Settings page is just a collection of entries and information from different pages (these sub-pages may also jump to each other).

To sum up, we can design the following business structure diagram:

The concepts of the four modules in the figure above are defined as follows:

The module The module definition Folder abbreviation
Basic module The basic material has no logic of its own base
General module A reusable module with its own business logic and guaranteed to be independent common
General page Reusable pages, such as login page, search page. Or through the multilink display page public
Business page Level 1 page, users do not need to interact with the page can view The business name

The directory structure is as follows:

| 一 images                       // Image resources
| 一 assets                       // Other resources, such as icon/ SVG/audio files
| 一 test                         // Test the directory
| 一 lib                          // Resource directory| config one by one// Configure environment variables| to the router// Route management| common one by one// Generic module└ ─ ─ the network/ / network library└ ─ ─ API// Set of interfaces└ ─ ─ the components/ / component library| public one by one// Common page└ ─ ─ login// Login module└ ─ ─ login_page/ / login page└ ─ ─ the login. The dart | pages one by one// Business page├ ─ Explore ├ ── Setting ├ ── Trending. Dart ├ ─ Trending_list. Dart// In the same service, the name of the secondary file is inherited, using '_' connection└ ─ ─ Libarary └ ─ ─ Search | helper// Tool folder collection└ ─ ─ format. The dart// Various utility functions
Copy the code

Directory parsing:

  • The directory is divided into four branches according to the business. The developer only needs to care about the business logic under the current branch.
  • In the above development scenario, when it comes to public page modification, the developer needs to go inpublicFile modification, improve the caution of modification;
  • What is multi-link? If a page has only one path to open, then the page needs to be placed inpagesIn the corresponding service page; If a page has more than or equal to two paths to view, that is, multiple links, you need to move the page topublicFolder;

In summary, this directory is a good fit for the initialization of a medium-sized project.