Dependency diagram in Dart/Flutter?

Question

Is there a way to see how packages in my flutter project depend on each other? Under packages, I mean internal packages: folders under 'lib'. Also, it would be great to check for circular dependencies between the packages.

Solution 1

You can use below command to see your flutter app's dependency graph.

flutter pub deps

The dependency information is printed as a tree, a list, or a compact list.

Solution 2

I was also looking for a tool to show internal dependencies but couldn't find one. So I wrote a tool called Lakos to visualize Dart/Flutter library dependencies in Graphviz. Lakos will visualize dependencies inside your project, not external package dependencies. Lakos will also warn about dependency cycles with an exit code.

https://pub.dev/packages/lakos

Example usage:

lakos --metrics . | dot -Tpng -Gdpi=200 -o lakos_example.png

The output will look similar to this:

Solution 3

While I did not find a tool to detect dependencies, I prefix my folders with numbers, ordering them by abstraction level: higher level at the top, and lower level at the bottom.

And, to avoid circular dependencies, I watch the packages to reference only larger numbers, not smaller:

Comments

[polina-c]

It is very interesting to know. However, I am interested to see internal dependencies in my application, not external. I updated my question to make it clear.

[Renato]

Pass the --no-dev option to hide dev_dependencies.

[Daniel]

Awesome, thanks mate!

[Brandon]

Beautiful! This worked great for me to understand the screens hierarchy of a new project.

[user18184]

This is really great @Oleg Alexander, exactly what I was looking for! However, the graphs tend to get very hairy for larger projects. Is there a way to produce a graph only at the coarser level of subdirectories (I believe you call them "subgraphs" in lakos)?

[Oleg Alexander]

@user18184 Thanks for the kind words. Unfortunately, there's no way to treat the subdirectories as nodes themselves. But you could try rendering the nodes as points, like this: lakos . | dot -Tpng -Gdpi=200 -Nshape=point -o example.png