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'),
),
],
);
