Flutterやってみたよ part1（導入編）

# はじめに
クロスプラットフォームのフレームワークであるFlutterに興味があったので、何も知らないところからの挑戦です。
（swift、Android java、kotlinはちょっとだけ実務経験ありです）

# 目的
- Flutterで開発環境を整える
- Flutterで使ってる言語Dartを触ってみる
- まずはアーキテクチャなしでとりあえず書いてみる

今回はこんな感じです。アーキテクチャに当てはめる前に基本を理解です！ここ重要！！
基本を理解した上でアークテクチャのありがたみが増すってもんです。

# Flutterで開発環境を整える
XcodeとAndroid studioどちらも試しましたが、圧倒的にAndroid studioが使いやすいと思います。
（個人的見解ですmm）
環境構築の詳細は以下の記事が参考になりました。

参考
[[Flutter]Android StudioでFlutter使用。](https://qiita.com/Dreamwalker/items/88a76130c8628271beb9)

ここではざっくり構成だけ説明します。

## プロジェクト作成
記事を参考にプロジェクトを作ると
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325497/dadb9977-b2ec-ccf0-4182-503f8d1a2a8c.png)
こんな感じにたくさんファイルができますがflutterでのエントリポイントは/lib/main.dartです。
ここにdartファイルを追加して画面を作成していくことになります。
アークテクチャは後から導入するつもりですが、パッケージ構成はこんな感じにしました。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325497/99c60ef4-dac3-ebaa-dacb-597286898a15.png)
widgetの下が画面で、screen（画面本体）とcomponent（部品）に分けてます。
repositoryからapiを呼び出す感じにしたいのでとりあえず分けてます。
後でビジネスロジックのパッケージを追加する予定ですが今回はこんな感じ。

## パッケージの追加とか
パッケージを追加するにはプロジェクト直下のpubspec.yamlに追加していきます。
dependencies:のところに
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325497/60a1c46b-55db-2f10-d309-11c380460bcb.png)
こんな感じで追加して
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/325497/de783872-feec-879a-b2aa-1771d623d660.png)
上部のPackage getでインストールできます。

追加するパッケージは
[ここ](https://pub.dev/flutter/packages)で探すといいと思います。
サンプルやインストール手順も記載されていますので特に迷うこともないと思います。

# Flutterで使ってる言語Dartを理解する
Dart言語はGoogleによって開発されたscript言語でjavascriptの代用にする目的で開発された言語だそうです。
なのでjavascriptに似ていますね。
詳細な記事はたくさんありますので、そちらを参考にしてくださいw

参考
[KotlinとJavaができる人向けDart速習](https://qiita.com/kikuchy/items/2cce118d38fc15324b2b)

### ・宣言について

とってもざくりですが、クラス・変数・メソッドとかの宣言のサンプルです。
宣言には命名規則があって、名前が *_* で始まるのはprivateで以外はpublicになります。
個人的にはC#とかやってた時にその命名規則使ってたので懐かしいです。

```dart

// 抽象クラスを書くならこんな感じ
abstract class BaseUtil {
  String func1();
  void func2();
  void func3();
}

// クラスの宣言はこんな感じ
class Util implements BaseUtil { // implementsで抽象クラス継承

  // publicな変数。変数の宣言はvarが使える。もちろんStringとか型も明示できます。
  var flag = false;

  // privateな変数。こっちはStringで宣言
  String _value = "";

  // メソッドの宣言はこんな感じ
  String func1() {
    // なんかの処理
  }

  // 戻り値ないメソッドの宣言はこんな感じ
  void func2() {
    // なんかの処理
  }

  // ちなみにvoid省略できる
  func3() {
    // なんかの処理
  }

  // プライベートなメソッド
  String _func4() {
    // なんかの処理
  }

}
```
### ・コンストラクタについて

ちょっと以外だったのはDartではコンストラクタのオーバーロードができないです。
なので、別名でコンストラクタ作って呼び出す感じです。
ダイレクトに名前付きコンストラクタを呼び出せるので、状況によって使い分けですね。

```dart

class User {

  int userType;
  String id;

  // 普通のコンストラクタ。自分のメンバはthisでアクセスできる。
  User(String id) {
    this.userType = 1
    this.id = id;
  }

  // 別名コンストラクタコンストラクタ
  User.setUserType(int userType, String id){
    this.full_name = '${this.name} Smith';
    this.id = id;
  }
}

// 呼び出すときはこんな感じ
User userInfo1 = new User("");
User userInfo2 = new User.setUserType(1, "");

class User {

  int userType;
  String id;

  // 別名コンストラクタをダイレクトに呼び出し（こんな意味ないことはしないと思いますがwww）
  User(int userType, String id) : this.setUserType(userType, id);

  User.setUserType(int userType, String id) {
    this.userType = userType;
    this.id = id;
  }

}

// 呼び出すときはこんな感じ
User userInfo1 = new User(1, "");
```
### ・enumついて
はい、みなさん大好きのenumです。もちろんDartにもあります。
これに関してはswiftに慣れてるのでちょっと物足りない気がします。
swiftだったらプロパティやメソッド追加できるし継承や条件付き適合とかできるのでステキです！
Dartでは多分できないっぽいです。（知らないだけかもですが、、）

```dart
enum AuthStatus {
  notSignedIn,
  signedIn,
  signedUp
}
```

# 終わりに
あまり長くなると読みたくなくなると思うので今回は一旦ここで終わります。
次回は実際に画面を作ってFirebaseAuthを使ったサインイン機能を実装します。

次回、[Flutterやってみたよ part2 （FirebaseAuthを使ってみます編）](https://qiita.com/190yamashita/items/0227c4e209e8ce8d1032)はこちらから。

# 参考
大変勉強になりました！ありがとうございますm(_ _)m
- [[Flutter]Android StudioでFlutter使用。](https://qiita.com/Dreamwalker/items/88a76130c8628271beb9)
- [KotlinとJavaができる人向けDart速習](https://qiita.com/kikuchy/items/2cce118d38fc15324b2b)