Trouble understanding how to learn how certain properties and classes work together

[jefff9511]

I am having trouble understanding how to learn how certain properties and classes work together. Over time, I guess I’ll memorize them … but for example …

How should I learn that decoration uses a BoxDecoration vs a Decoration since the property decoration is a property of Decoration … how would I even know that? … When I hover over decoration, I see {Decoration? decoration} … I don’t see any mention of BoxDecoration.

And the image property is a property of ImageProvider … how would I know to use AssetImage since when I hover over image I see {required ImageProvider image} with no mention of AssetImage.

And that one of the image properties is a property of DecorationImage while the other image is a property of AssetImage.

decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/mag5.png'),
          ),
        ),

[kevindmoore]

That is a great question! I had the same problem as you. Basically, in looking at sample code, and doing Google searches, I find examples of what I need to do. I then copy it, try it out and then command-click into the class to see what properties it has. I would never have known about BoxDecoration if I hadn’t seen someone else use it. There is the official docs that give a high level view of all the components, but I’ve found that there is so many examples out there, that seeing what others have done is the best way to learn.

[jefff9511]

@kevindmoore … I also seem to have better luck with examples using Google search and staying away from the official Flutter Docs. In general, the docs just get me further confused.

[funkyboy]

@jefff9511 It’s two different use cases.

Building something from scratch by looking only at the docs is probably not efficient, as you get lost within the haystack of classes. So to get started you probably need an example of something similar to what you want to build.
Docs are important too, but their value is more evident when you already have something working and you want to tweak it or make it do something more/different.

Makes sense?

[jefff9511]

@funkyboy … Yes it makes sense … only then I get lost in the Google search itself … for example …

• what’s been outdated by Flutter 2.5 …
• what 's a “Best Practice” vs something that someone fairly new wrote vs things that are too complicated for me to understand at my level
• not to mention the perennial rabbit hole of “that looks really cool - I should look up more information on that”.

Oh well … At least I’m having fun

[spgms]

@jefff9511 as @kevindmoore mentioned you can command-click (control-click on Windows) to get to the definition. You can continue to dive into the framework without leaving your IDE or getting lost in internet search results.

To help me learn, I often will then continue to command-click to dig further into the definitions. I use Android Studio, but you see the same/similar behavior in VSCode and IntelliJ.

For example, in card2.dart you hover over the decoration and as you saw you see a description {Decoration? decoration}.

From there, command-click on decoration and the Container widget code is displayed and positioned at the decoration property. This is where you can research what the class does or you can continue to dive deeper into the framework (this is because Flutter is open source).

Now, command-click on Decoration and then the Decoration class is opened.

From there you are able to see that the comments about the Decoration class description very closely match what you see when you hover over Decoration. You can also read the comments pertaining to the class.

If you want to continue to dig and do the command-click on Decoration then you can see where it’s used within the framework. In this case this list is 106 usages.

Of course, you can then look at the Flutter and Dart docs, here on our site, and of course search the internet for even more details.

I hope this helps!
Stef