Added one click install command feature

[ebenjs]

This PR is targeting issue #7122

We're used to having the ability to easily install packages by copying the install code and pasting it directly into the console. This is especially helpful when you need to quickly install a package. Popular platforms like https://www.npmjs.com/package/axios, https://crates.io/crates/http, and https://pypi.org/project/http1/ all employ this design.

Currently, there's something similar in the header section of the package page after the package name. However, this command only allows you to copy text that's intended to be pasted in the pubspec.yml file and manually run 'pub get install.'

Therefore, I suggest adding this feature as it would be a time-saving feature for all developers.

Here is a screenshot

• I’ve reviewed the contributor guide and applied the relevant portions to this PR.

Contribution guidelines:

• See our contributor guide for general expectations for PRs.
• Larger or significant changes should be discussed in an issue before creating a PR.
• Contributions to our repos should follow the Dart style guide and use dart format.
• Most changes should add an entry to the changelog and may need to rev the pubspec package version.
• Changes to packages require corresponding tests.

Note that many Dart repos have a weekly cadence for reviewing PRs - please allow for some latency before initial review feedback.

[isoos]

Note: I've pushed this to the staging site:
https://isoos-dot-dartlang-pub-dev.appspot.com/packages/email_validator

I find the gray background a bit off in the sidebar, I think we should look for a more blended-in design.

/cc @jonasfj @szakarias @sigurdm

[Levi-Lesches]

I like the concept -- a lot of packages know they have an installation tab but still include the command on the front page because it's what people will see first. But I think longer package names will be cut off if used on the sidebar. What about here?

[sigurdm]

We could have the copy button open a drop down, so you could copy either for the pubspec or the command line.

Something like

[Levi-Lesches]

Hm, actually, wouldn't it be better to just copy the dart pub add command, and not package: ^version? Because the add command would just insert that into the pubspec the same way, right?

Maybe if the non-latest version is being viewed, the add command could be modified to include the version as a flag

[sigurdm]

If we do this, it is either the drop-down or switching the copied text from the current copy-button.

Closing this. @ebenjs if you want to work on one of the other options feel free, otherwise thanks for your contribution - sorry for the delayed decision.