Best practices for folder structure

đź“š Official Books Flutter Apprentice
1

Hi Folks,

What are some good best practices to structure project folders for midsize projects.

In the apprentice book networking for example has a separate folder with corresponding models within it. Does it make sense to group models, nav, networking seperatly; group by screens? Are there any general recommendations?

Thanks

1 Like
2

I’ve been wondering that also … but for smaller projects.

3

It’s really up to each developer. That said, I recommend using separate folders for your projects, regardless of size. This helps if your app grows, but also helps you keep things organized.

Here’s an example from an app I’m currently working on with Simon Lightfoot.
Screen Shot 2021-10-15 at 13.59.17

The feature sub-folders are for each screen. You’ll also notice that the assets folder is also separated into different folders.

You might wonder why there is an app_icon.png at the root level instead of inside the iOS and Android folders. It is in those respective folders. This file is used for the main menu which is built various using widgets.

Hope this helps,
Stef

2 Likes
4

Thanks Stef! This actually helps a lot.

How do you typically handle route/navigation files?

1 Like
5

@spgms … What types of things are in the resources.dart and the info and utils folders? Where are the constants placed?

6

Hi @jefff9511. Here are the details about each of the things you asked about.

  • resources.dart is where game resources are defined:
class GameResources {
  const GameResources._();

  // Effects

  // Fonts

  // Images

  // Music
  static const musicTrashyAliens = 'assets/music/trashy_aliens.mp3';
}

  • The info folder pertains details displayed on my info screen (I’m using “info” instead of “about”).

  • The utils folder currently holds common.dart and math.dart which each contain const definitions that are used in multiple places:

common.dart

import 'package:flutter/material.dart';

const verticalPadding4 = EdgeInsets.symmetric(vertical: 4.0);
const verticalPadding8 = EdgeInsets.symmetric(vertical: 8.0);
const verticalPadding12 = EdgeInsets.symmetric(vertical: 12.0);
const verticalPadding16 = EdgeInsets.symmetric(vertical: 16.0);
const verticalPadding24 = EdgeInsets.symmetric(vertical: 24.0);
const verticalPadding32 = EdgeInsets.symmetric(vertical: 32.0);

const horizontalPadding4 = EdgeInsets.symmetric(horizontal: 4.0);
const horizontalPadding8 = EdgeInsets.symmetric(horizontal: 8.0);
const horizontalPadding12 = EdgeInsets.symmetric(horizontal: 12.0);
const horizontalPadding16 = EdgeInsets.symmetric(horizontal: 16.0);
const horizontalPadding24 = EdgeInsets.symmetric(horizontal: 24.0);
const horizontalPadding32 = EdgeInsets.symmetric(horizontal: 32.0);

const allPadding4 = EdgeInsets.all(4.0);
const allPadding8 = EdgeInsets.all(8.0);
const allPadding12 = EdgeInsets.all(12.0);
const allPadding16 = EdgeInsets.all(16.0);
const allPadding24 = EdgeInsets.all(16.0);
const allPadding32 = EdgeInsets.all(32.0);

math.dart

import 'dart:math' as math show pi;

double degrees2radians(double degrees) {
  return degrees * (math.pi / 180.0);
}

I hope this helps.

Stef

2 Likes
7

@sarav1n route/navigation is currently setup in the main_menu.dart file.

8

@spgms … it REALLY helped to see what you did with the constants. THANKS!!

1 Like
9

@jefff9511 I’m glad I was able to help.

One thing to note, see on the math.dart import statement where there is as math and show pi?

import 'dart:math' as math show pi;

First, the show pi instructs Dart to only expose pi. There is no reason to expose all the other constants and functions because you’re not going to use them.

The as math let’s you reference the objects within dart:math by using math., as shown in the usage of pi:

return degrees * (math.pi / 180.0);

1 Like