Flutterで簡易コーポレートサイト（アプリ）を作成する #1 -TOP画面編-

# 概要
Flutterでウェブサイトを再現してみます。
Dartというプログラミング言語を使って記述します。

# 完成イメージ
<img width="300" alt="000001.jpg" src="https://dl.dropbox.com/s/t5z1ry01ao9ai33/000050.jpg">

# プロジェクト作成
## Flutterのインストール

[Flutter download](https://docs.flutter.dev/get-started/install/macos)
適当なところでファイルをunzipし、PATHに追加します。.zshrcまたは、.bash_profile
```
export PATH="$PATH:`pwd`/flutter/bin"
```
完成したら、```flutter doctor```を実行して、問題なければインストール完成です。

Apple Silicon Macの場合は事前に下記をインストールします。
```
sudo softwareupdate --install-rosetta --agree-to-license
```

## VisualStudioCodeでFlutterPluginをインストール

プロジェクトをスムーズに作成したりコマンドを利用するために、VisualStudioCodeにPluginをインストールします。

<img width=600 src=https://dl.dropbox.com/s/flkkhfhpm823ezr/000060.jpg alt="000060.jpg"/>

## プロジェクトの作成

Cmd + Shift + Pを使って、flutterを入力すると、Flutter: New Project オプションを使います。
<img width=600 src="https://dl.dropbox.com/s/r3covpezos5gb01/000001.jpg" alt="000001.jpg" />

「Application」を選択します。
<img width=600 src="https://dl.dropbox.com/s/vxx3hc0jkxuxwqp/000010.jpg" alt="000010.jpg" />

保存場所とアプリケーションの名前を設定して作成を進めます。
今回は「flutter_website」という名前にしました。
できたら、エミュレータで確認してみます。
確認したい端末を起動させた状態でメニューから「実行」>「デバックの開始」をクリックします。
<img width=600 src="https://dl.dropbox.com/s/h6krvw82k0esruh/000020.jpg" alt="000020.jpg" />

AndroidのNexus 6で確認した場合このようになります。
<img width=300 src="https://dl.dropbox.com/s/mj380c1sp1o51ys/000030.jpg" alt="000030.jpg" />

# TOPページ作成
ページごとにファイルを作成します。
libフォルダの中にtop.dartを作成します。

material.dartをインポートして、FlutterのMaterial Design GUIライブラリを利用できるようにします。
まず、FlutterではWidgetを組み合わせて画面に表示する要素を構成していきます。
TOPページは動的に変更が加わらないページなので、StatelessWidgetで記述していきます。
Buildメソッドを使ってフレームワークが画面上にレンダリングするWidgetツリーを返します。
Scaffoldは画面構成を実装する基礎となる部分です。Scafflodにの上に構成を載せていきます。
Scaffoldの中にメインとなる画面のbodyを記述していきます。

## 画像表示
picsumから画像を取得して表示します。

```top.dart
import 'package:flutter/material.dart';

class TopPage extends StatelessWidget {
  const TopPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height / 4,
              decoration: const BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage("https://picsum.photos/1000/400"),
                    fit: BoxFit.cover),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

```

## 確認
確認のため、main.dartでTopページを表示できるようにします。

```main.dart
import 'package:flutter/material.dart';

import 'top.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Website',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TopPage(),
    );
  }
}

```

シミュレータで下記の感じです。

<img width=300 src="https://dl.dropbox.com/s/ul7g87jymsk916l/000040.jpg" alt="000040.jpg"/>


## メインタイトル追加
Bluecode, Lifestyle developer.を追加します。

```diff_dart:top.dart
  import 'package:flutter/material.dart';

  class TopPage extends StatelessWidget {
    const TopPage({super.key});

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 4,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage("https://picsum.photos/1000/400"),
                      fit: BoxFit.cover),
                ),
+               child: const Center(
+                 child: Text(
+                   "bluecode, Lifestyle developer.",
+                   textAlign: TextAlign.center,
+                   style: TextStyle(color: Colors.white),
+                 ),
+               ),
              ),
            ],
          ),
        ),
      );
    }
  }

```

```dart:コピペ用
child: const Center(
 child: Text(
   "bluecode, Lifestyle developer.",
   textAlign: TextAlign.center,
   style: TextStyle(color: Colors.white),
 ),
),
```
同様の手順でその下も追加します。

```diff_dart:top.dart
  import 'package:flutter/material.dart';

  class TopPage extends StatelessWidget {
    const TopPage({super.key});

    @override
    Widget build(BuildContext context) {
      return Scaffold(
        body: Center(
          child: Column(
            children: <Widget>[
              Container(
                width: MediaQuery.of(context).size.width,
                height: MediaQuery.of(context).size.height / 4,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                      image: NetworkImage("https://picsum.photos/1000/400"),
                      fit: BoxFit.cover),
                ),
                child: const Center(
                  child: Text(
                    "bluecode, Lifestyle developer.",
                    textAlign: TextAlign.center,
                    style: TextStyle(color: Colors.white),
                  ),
                ),
              ),
+             Container(
+               margin: const EdgeInsets.only(top: 20),
+               child: Column(
+                 children: const [
+                   Text('websiteの最新情報'),
+                   Text('最新情報をご案内します。'),
+                 ],
+               ),
+             ),
            ],
          ),
        ),
      );
    }
  }
```

```dart:コピペ用
Container(
  margin: const EdgeInsets.only(top: 20),
  child: Column(
    children: const [
      Text('websiteの最新情報'),
      Text('最新情報をご案内します。'),
    ],
  ),
),
```
エミュレータを起動中の場合は自動で更新が走りこのようになっているはずです。
<img width=300 src="https://dl.dropbox.com/s/t5z1ry01ao9ai33/000050.jpg" alt="000050.jpg"/>

# 関連コンテンツ
* 次：[Flutterで簡易コーポレートサイト（アプリ）を作成する #2 -Contact画面編-](https://qiita.com/minimumskills/private/15fe7fdcb0cb6bddcde4)
* [超シンプルなWeb（アプリ）作成を通して各種フロントエンド技術を体験する - 2023 Early -](https://qiita.com/minimumskills/private/9e7efe86e244bb9844b0)