# Flutterレクチャー


## レクチャーの流れ

> 環境：Windows
> AndroidStudioインストール済み
> 以上２点を前提としています。

今回のレクチャーの流れは以下の通りです。

1. Flutterについて
2. 環境構築
3. ToDoアプリの実装

早速進めていきましょう。

## Flutterについて

FlutterとはGoogle社が提供しているオープンソースのアプリケーションフレームワークで、ワンコードでiOS/Android/Web開発を進める**マルチプラットフォーム開発**が可能です。用意されたパーツを利用することで低いコストで優れたUIを作ることができます。開発言語は**Dart**になります。

### Dart言語とは


こちらもGoogle社が開発したもので、ウェブアプリやモバイルアプリのクライアント開発向けに設計されたプログラミング言語です。C言語ライクな構文で、JavaScriptの代替を目的に作られました。この言語は１つのソースコードからそれぞれの環境で動作する形式に変換することが可能です。この仕組みを生かして書いた処理を行わせることでマルチプラットフォーム開発を可能にしています。

### Flutterのメリット・デメリット

#### メリット

1. ワンコードでのマルチプラットフォーム開発
2. 高速なデバック(ホットリロード)
3. 低コストで高度なUI実装

#### デメリット

1. 複雑な仕様の実装が大変(主にプラグイン関係)
2. 初回ビルドの時間がかかる

## 環境構築

### Android Studioのインストール

> 今回は省略します。
> 公式ページを参考にしてください。

#### プラグインのインストール

ホームからプラグインを選択し、flutterと入力すると一番上に表示されます。そちらをインストールしましょう。一緒にDartプラグインもインストールしますか？と聞かれるので一緒にインストールしましょう。


### Flutter SDKのインストール

#### ダウンロード

公式ページにアクセスしてダウンロードしてください。
https://flutter.dev/docs/get-started/install
zipファイルを解凍して任意のディレクトリに展開します。
今回はCドライブ直下へ。

#### パスを通す

環境変数設定のPathに`flutter\bin`の絶対パスを追加してください。

C:\flutter\bin


#### パスが通っているか確認

コマンドプロンプト上で`flutter doctor` を入力します。正しくパスが通っていれば問題なく動作はするはずです。少しするとこのような画面が出てくると思います。


問題が起きなければ上の画像のようになります。次のステップに進みましょう。ですが、おそらくライセンスどうのこうのがクリアできないはずなので、表示されるコマンドを打ち込みましょう。

flutter doctor --android-licenses

#### サンプルアプリの実行
新しいFlutterプロジェクトを立ち上げ、仮想デバイスで実行しましょう。お馴染みのカウントアップアプリが立ち上がります。問題なく立ち上がったでしょうか？できていればいよいよアプリを実装していきましょう！

## ToDoアプリの実装

class _TodoListPageState extends State<TodoListPage> {
  List<String> todoList = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('リスト一覧'),
      ),
      body: ListView.builder(
        itemCount: todoList.length,
        itemBuilder: (context, index) {
          return Dismissible(
            key: UniqueKey(),
            child: Card(
              child: ListTile(
                title: Text(todoList[index]),
              ),
            ),
            onDismissed: (direction) {
              setState(() {
                todoList.removeAt(index);
              });
            },
            background: Container(
              color: Colors.red,
            ),
          );
        },
      ),
    );
  }
}