Flutter project structure - Mini App: Build & Ship

Build: Project Structure Overview

This screen shows the main folders and files of a Flutter project with simple descriptions.

Target UI

Flutter Project Structure

- android/       (Android native code)
- ios/           (iOS native code)
- lib/           (Dart code folder)
  - main.dart    (App entry point)
- test/          (Test files)
- pubspec.yaml   (Project config and dependencies)

Display a vertical list of main Flutter project folders and files

Each item shows the name and a short description

Use simple text widgets with clear spacing

Screen has a title at the top

Starter Code

Flutter

import 'package:flutter/material.dart';

class ProjectStructureScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Project Structure'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // TODO: Add list of folders and files here
          ],
        ),
      ),
    );
  }
}

Task 1

Task 2

Task 3

Solution

Flutter

import 'package:flutter/material.dart';

class ProjectStructureScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Project Structure'),
      ),
      body: Padding(
        padding: EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text('android/', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
            SizedBox(height: 4),
            Text('Android native code', style: TextStyle(color: Colors.grey[700])),
            SizedBox(height: 16),
            Text('ios/', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
            SizedBox(height: 4),
            Text('iOS native code', style: TextStyle(color: Colors.grey[700])),
            SizedBox(height: 16),
            Text('lib/', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
            SizedBox(height: 4),
            Text('Dart code folder', style: TextStyle(color: Colors.grey[700])),
            SizedBox(height: 8),
            Padding(
              padding: EdgeInsets.only(left: 16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Text('main.dart', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16)),
                  SizedBox(height: 2),
                  Text('App entry point', style: TextStyle(color: Colors.grey[700])),
                ],
              ),
            ),
            SizedBox(height: 16),
            Text('test/', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
            SizedBox(height: 4),
            Text('Test files', style: TextStyle(color: Colors.grey[700])),
            SizedBox(height: 16),
            Text('pubspec.yaml', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
            SizedBox(height: 4),
            Text('Project config and dependencies', style: TextStyle(color: Colors.grey[700])),
          ],
        ),
      ),
    );
  }
}

This screen uses a Column to list the main folders and files of a Flutter project.

Each item has a bold title and a smaller description below it with some spacing for clarity.

The Padding widget adds space around the content so it doesn't touch screen edges.

This simple layout helps beginners understand the basic Flutter project structure visually.

Final Result

Completed Screen

Flutter Project Structure

android/
  Android native code

ios/
  iOS native code

lib/
  Dart code folder
    main.dart
      App entry point

test/
  Test files

pubspec.yaml
  Project config and dependencies

Screen shows a scrollable list of project folders and files

User can read folder names and their descriptions clearly

Stretch Goal

Make the list scrollable for smaller screens

💡 Hint

Wrap the Column inside a SingleChildScrollView widget