How to structure a simple Dart web app

2
votes

For Dart starters I'm working on a simple web which consists of less than 10 classes. I'm totally confused as for how to organized them in files, folders (and packages? and libraries?).

Currently I have

web/
  img/
    *.png
  styles/
    main.css
  index.html
  main.dart
  *.dart

All but one Dart file contain a single class. Imports are done through import 'a.dart'; (e.g. in b.dart).

This is obviously wrong because the Dart Editor complains about

The imported libraries 'c.dart' and 'd.dart' should not have the same name ''

I went through the respective sections in pub documentation and read about possible app structures in the Polymer docs. I also looked at the structure of the pop_pop_win sample application that comes with Dart. It's all a bit overwhelming because there are so many variations, options and combinations.

1
dart
See stackoverflow.com/questions/16695634/…. It sounds like this is your real issue, not any problem with folder structure. – Pixel Elephant
Thanks. So, if I got that right I can add library foo; part 'a.dart';... to main.dart and then add part of foo; to the other Dart files. Works, but means I have to have all imports in main.dart because part files can't have individual imports...not nice. Or I can add library X; to each Dart file. That's even worse because 1 class in 1 file doesn't make a "library" yet. Hhhmm, I feel there must be a better way... – Marcel Stör

1 Answers

1
votes

If I were you, I would create libraries and imports like so:

awesomeLibrary.dart

library awesome;

part 'foo.dart';
part 'bar.dart';

foo.dart

part of awesome;

class Foo
{
    static function Baz() {}
}

bar.dart

part of awesome;

class Bar
{
    ...
}

main.dart

import 'awesomeLibrary.dart';

void main()
{
    Foo.Baz();  // Imported library function
}