Flutter - File & Folder Structures

Key Files & Folders

Before getting into the coding lets refresh on the core concepts

• Lib: the core source files are under /lib
• Main.dart: Typically there’s a minimal main.dart file
• Pubspec: the main config file is /pubspec.yaml
  • Contains the package name of this app
  • Contains dependency definitions

[[../../../_notes/_tech/Flutter/Flutter|Back to Flutter]]

Folder structure convention

[!note] Note - personal convention I’ve moved to using “Screens” and “Components” Screens instead of Pages. Screens have skaffold - easy to remember Components not widgets. Components are a broader industry term

Generally apps seem to break up the folder structure like so:

lib/
- main.dart
- routes.dart
- screens/
    - screen_name
        - index.dart
        - widgets
            - widget_name
                index.dart
- widgets/ 
    - widget_name
        index.dart
- util/
- models/
- services/

This structure provides app level widgets and screen level widgets which helps keep things organized.

the routes.dart file contains the navigation routes of your application and imports all screens.

[[../../../_notes/_tech/Flutter/Flutter|Back to Flutter]]