2020/10/20 Flutter : GitHubのプロジェクトを自分のパソコンにダウンロードして、サンプルプロジェクトを実行する方法

GitHubのプロジェクトを自分のパソコンにダウンロードする方法

https://flutter.dev/docs/development/ui/layout

https://flutter.dev/docs/development/ui/layout

https://github.com/flutter/website/tree/master/examples/layout/sizing

に行きます。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

一番上のディレクトリ「website」のページに行きます。

(https://github.com/flutter/website)

緑色の「⬇︎Code🔻」ボタンを押します。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

表示されているURLをコピーします。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

android studioのウェルカム画面の「Get from Version Control」を選択します。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

URL欄に先ほどコピーしたURLを貼り付けます。

Directory欄に保存するダウンロードしたいディレクトリを指定します。(Flutterフレームワークのディレクトリがあるディレクトリ)

「Clone」ボタンを押します。

これで自分のパソコンにサンプルプロジェクトをダウンロード(クローン)できました。


サンプルプログラムを自分のプロジェクトで実行する方法

website/examples/layout/sizingプロジェクトを実行してみます。

website/examples/layout/sizing/imagesディレクトリに三つの画像がありますので、それを自分のプロジェクトのimagesディレクトリに追加します。

まず自分のプロジェクトにimagesディレクトリを新規作成します。

自分のプロジェクト(上記例ではflu_1015)のルートにカーソルを合わせて右クリック >> [ New ] >>[ Directory ]を選択します。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

imagesディレクトリを新規作成するので「images」と入力しエンターキーを押します。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

プロジェクトルート直下にimagesディレクトリが作成されました。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

ダウンロードした、website/examples/layout/sizing/imagesディレクトリの三つの画像を選択して、今新規作成した自分のプロジェクトのimagesディレクトリにドラッグアンドドロップして移動させます。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

三つの画像をimagesディレクトリに移動できました。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

pubspec.yamlファイル開きます。(選択してダブルクリックします)

 ダブルクリック。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

pubspec.yamlファイルのflutterセクションに上記のようにアセット読み込み用のコードを追加します。(インデントがずれるとエラーが出るようなので注意してください。)

そして[ pub get ]をクリックします。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

自分のプロジェクトのmain.dartファイルに

https://github.com/flutter/website/blob/master/examples/layout/sizing/lib/main.dart

上記ページのサンプルコードをコピーペーストします。

 

19行目がbuildExpandedImages()メソッドになっているので

body: Center(child: buildOverflowingRow()),

に書き換えて実行します。

一つ一つの画像の幅が300pxで、Expandedウィジェットでラップしていないので、はみ出してしまいます。

  Widget buildOverflowingRow() =>
      // #docregion overflowing-row
  Row(
    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
    children: [
      Image.asset('images/pic1.jpg'),
      Image.asset('images/pic2.jpg'),
      Image.asset('images/pic3.jpg'),
    ],
  );

 


19行目を

body: Center(child: buildExpandedImages()),

に書き換えて実行します。

Expandedウィジェットでラップしたことで、利用可能領域内におさまるように調整されました。

  Widget buildExpandedImages() =>
      // #docregion expanded-images
  Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      Expanded(
        child: Image.asset('images/pic1.jpg'),
      ),
      Expanded(
        child: Image.asset('images/pic2.jpg'),
      ),
      Expanded(
        child: Image.asset('images/pic3.jpg'),
      ),
    ],
  );

19行目を

body: Center(child: buildExpandedImagesWithFlex()),

に変更して実行します。

 1:2:1のサイズに調整された。

flexプロパティを指定したことで、それぞれのウィジェットのサイズがflexプロパティに基づいて調整されました。

Widget buildExpandedImagesWithFlex() =>
    // #docregion expanded-images-with-flex
Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: Image.asset('images/pic1.jpg'),
    ),
    Expanded(
      flex: 2,
      child: Image.asset('images/pic2.jpg'),
    ),
    Expanded(
      child: Image.asset('images/pic3.jpg'),
    ),
  ],
);

 

 

 

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です