Flutter,Github Flutterの公式チュートリアルのサンプルをGithubのページからクローンして動かしたい

Question

https://flutter.dev/docs/development/ui/layout#common-layout-widgets
上記のドキュメントを読んでいて、

App source: sizing
上記のリンクを踏むとGitHubのページに行くのですが、これってこのページからダウンロード?、クローン?かわかりませんが、自分のパソコンにこのページのディレクトリを持ってきて動かす、ということですよね?

その方法がわからないのですが、どうしたら良いでしょうか?

Comments

[hoshi-takanori]

プロジェクトのトップページ https://github.com/flutter/website に緑のダウンロードボタンがあるので、Download ZIP を押すとプロジェクト全体を固めた ZIP ファイルが落ちてきます。クローンするには git というバージョン管理のツールが必要です。

[moriman]

回答を頂きましてありがとうございます。
zipファイルをダウンロードして解凍するといろいろなファイル、ディレクトリができたのですが、その後どうすればサンプルコードを動かせるのかわかりません。
どうすれば良いでしょうか?

[hoshi-takanori]

examples/layout/sizing に移動して README.md に書いてあるコマンド打てば良いのでは？

[moriman]

ターミナルで
cd examples/layout/sizing
でsizingディレクトリに移動して、
flutter create --no-overwrite examples/layout/sizing
と打つと、
-bash: flutter: command not found
と表示されました。
どうすれば良いでしょうか。

[hoshi-takanori]

えっと、flutter はインストール済みでしょうか？ ってか flutter とは何かご存知ですか？

ちなみに、よく見たら repo root でコマンドを実行しろと書いてあるので、examples/layout/sizing に移動する必要はなかったようです。失礼しました。

[moriman]

一応Android Studioでflutterアプリのプロジェクトを作って公式チュートリアルを動かしたりしている状態です。
よくわからないのですが、MacOSのアップデートが関係あったりするんでしょうか。

[popobot]

Flutterがインストール済みなら、PATHが通ってないのかもしれないですね

Flutterのインストールを見直してみたらいかがでしょうか
https://flutter.dev/docs/get-started/install/macos

[moriman]

pathを通して
flutter create --no-overwrite examples/layout/grid_and_list
を実行すると
examples/layout/grid_and_list
というディレクトリができたのですが、その後
cd examples/layout/grid_and_list
flutter run
で実行するとflutterチュートリアルの一番最初のカウンターが起動します。
main.dartを見てもやはりカウンターのソースコードなので、意味がありません。

[popobot]

flutter create --no-overwrite $PROJECT の $PROJECT にはダウンロードしたソースコードのディレクトリを指定する必要があります。
なお、このコマンドは、ソースコードを上書きせずにFlutterプロジェクトを作ることを意味しています。空のディレクトリを指定すると、ソースコードがないので一番最初のカウンターが生成されます。

[moriman]

すみません。もう少しお付き合い頂けますでしょうか。
grid_and_listの場合、現在
/Users/userno1/downloads/website-master/examples/layout/grid_and_list/
にダウンロードしたディレクトリがあるのですが、この状況で、
cd /Users/userno1/downloads/website-master/examples/layout/grid_and_list/
でこのディレクトリまで行って、
flutter create --no-overwrite grid_and_list
を実行すると
/Users/userno1/downloads/website-master/examples/layout/grid_and_list/grid_and_list
ディレクトリが作成されるのですが、ここから具体的にどうすれば良いでしょうか?

[popobot]

以下のようにやればうまくいくと思います。

cd /Users/userno1/downloads/website-master/examples/layout
flutter create --no-overwrite grid_and_list

[moriman]

できました。ありがとうございました。

[popobot]

よかったです。

可能でしたら、自己解決として、うまく行ったの手順を回答欄に記載してください。

Answer 1

popobot様に示して頂いた通り、

cd /Users/userno1/downloads/website-master/examples/layout
flutter create --no-overwrite grid_and_list

で動かせました。