Project Organization How to structure a complex Flutter app

This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
Get Unlimited PRO Access


*Enrollment provides full access to this course (and updates) for life.


Create a directory and file for each screen in the app.

  • about
  • home
  • login
  • profile
  • quiz
  • topics

Provide each file with a Stateless Widget. For example:

file_type_flutter home.dart
import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({ Key? key }) : super(key: key);

  Widget build(BuildContext context) {
    return Scaffold(

Project Structure

  • login/, quiz/, etc. contains the app’s main UI features or screens.
  • shared/ contains the app’s shared UI, like navigation menus and loading indicators.
  • services/ contains the app’s shared business logic, like user auth and database code.


Ask questions via GitHub below OR chat on Slack #questions