How to organize dart code inside web folder

StackOverflow https://stackoverflow.com/questions/16147520

  •  11-04-2022
  •  | 
  •  

Pergunta

According to the Package layout conventions the web folder should contain the following:

HTML, CSS, images, and, heck, probably even some JavaScript. All of that goes into your package’s web directory. You’re free to organize the contents of that to your heart’s content. Go crazy with subdirectories if that makes you happy.

So my web directory looks something like this:

web/data_access
web/model
web/ui
web/ui/navigation
etc.

Now, how to I manage all those import statements. I get a lot of statements like:

import '../../model/my_model.dart';
import '../../data_access/mock_dao.dart';
etc.

I don't like using that many ../ in my imports because this is fragile and I get problems whenever I change anything in my folder structure.

Is there a better way to organize code inside the web folder?

or

Is there another way to do the imports?

Foi útil?

Solução 2

Unfortunately, no. There is an open feature request addressing this, but implementing this may take a while. The best way to work around this is to bundle multiple classes into one file, or multiple files into a library - effectively reducing the number of import statements. I went as far as making my entire application one big library with part of statements so I wouldn't have to deal with import statements. While this doesn't eliminate the underlying problem, it works for now.

Also, refactoring instead of simply renaming when changing the folder structure changes affected import statements, eliminating the pain of manually adjusting them.

Web components could be imported into a library, just to be re-exported using the export statement, thus bundling them into a single import.

Outras dicas

I put almost all of my app's code into lib, to avoid the issues you're seeing. This works even for web components.

See this components from widget.dart: https://github.com/kevmoo/widget.dart/tree/master/lib/components

I usually only put app.dart into web/, which simply pulls in libraries from lib and initializes the app.

See this example of an app that pulls in a pub package that has components: https://github.com/sethladd/catpic-app

This is what my HTML file looks like. Notice the inclusion of packages in the path:

<!DOCTYPE html>
<html>
<head>
  <title>Your life is complete</title>
  <link rel="components" href="packages/catpic/components/cat_pic.html">
  <link rel="components" href="packages/frame/components/frame.html">
  <link rel="stylesheet" href="styles.css">
</head>
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top