スマホアプリ クロスプラットフォーム開発  in Flutter

# Index
１．Flutterフレームワーク
２．AndroidStudioで開発できる
３．UIの記載はネストを多用する
４．UIとビジネスロジックを分けて書く
５．KotlinとSwiftによる書き分けが必要な場合がある
６．Dartプログラムのエントリーポイント
７．使用パッケージの宣言
８．ホットリロードで一回一回ビルドしなくてもいい
９．動作確認
１０．アプリ公開

## １．Flutterフレームワーク
2018年12月にGoogleからリリースされた、モバイルアプリ開発用のフレームワーク。

#### Dart言語
従来ならば、AndroidならKotlin
iOSであればSwift
という、それぞれの言語を覚えなければいけないが

Flutterの場合は、DartというJavaライクな言語を覚えるだけで
両方の開発ができ、学習コストを抑えることができる。

## ２．AndroidStudioで開発できる

##### AndroidStudioのインストール
![スクリーンショット 2022-01-20 20.56.23.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355942/47df83c7-ab0d-a68f-8a7e-cd999366c73f.png)

##### Flutterのインストール
![スクリーンショット 2022-01-25 19.54.53.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355942/9456337a-5deb-b696-460e-678b314c55d9.png)

## ３．UIの記載はネストを多用する
画面を構成するコンポーネントはWidgetというクラスが基底クラスにあり
各コンポーネントはWidgetを継承する。
Widgetを並べることで画面を作っていく。

コード

~~~
const Text.rich(
  TextSpan(
    text: 'Hello', // default text style
    children: <TextSpan>[
      TextSpan(text: ' beautiful ', style: TextStyle(fontStyle: FontStyle.italic)),
      TextSpan(text: 'world', style: TextStyle(fontWeight: FontWeight.bold)),
    ],
  ),
)
~~~

## ４．UIとビジネスロジックを分けて書く
BLoC（BusinessLogicComponent）というアーキテクチャを用いることで、UIとビジネスロジックを分けて書くことができるようになる

BLoCパターンを用いることにより、次のことができるようになる

・ソースファイルごとの責務を明確化し、ソースの見通しがよくなる
・イベントハンドラ（StreamBuilder）を使って、状態管理をできる

参考URL）長めだけどたぶんわかりやすいBLoCパターンの解説
https://qiita.com/kabochapo/items/8738223894fb74f952d3

## ５．KotlinとSwiftによる書き分けが必要な場合がある
UI部分、HTTP通信、内部ストレージへの保存などは一つのソースで書くことができるが
担当したプロダクトにおいてFirebaseとAzureNotificationHubsを利用したプッシュ通知をすることがあり、
Firebaseに端末を登録をするところまではDart記載で共通だが、
プッシュ通知の送信先を指示する部分であるAzureNotificationHubsへの端末識別情報の登録部分は、
Dartが対応していない部分であり、KotlinとSwiftで書き分ける必要がある。

## ６．Dartプログラムのエントリーポイント
以下のように、C言語などと同じで、main()から始まる

~~~
// Copyright 2018 The Flutter team. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Flutter'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}
~~~

参考URL）
https://docs.flutter.dev/get-started/codelab

## ７．依存パッケージの宣言
pubspec.yamlという設定ファイルで、HTTP通信や内部ストレージアクセスなど、使用するパッケージを宣言する。
また、「version」でアプリバージョンを設定する

~~~
name: <project name>
description: A new Flutter project.

publish_to: 'none'

version: 1.0.0+1

environment:
  sdk: ">=2.7.0 <3.0.0"

dependencies:
  flutter:       # Required for every Flutter project
    sdk: flutter # Required for every Flutter project

  http: '>=0.12.0 <0.13.0'
  cupertino_icons: ^1.0.2 # Only required if you use Cupertino (iOS style) icons

dev_dependencies:
  flutter_test:
    sdk: flutter # Required for a Flutter project that includes tests

flutter:

  uses-material-design: true # Required if you use the Material icon font

  assets:  # Lists assets, such as image files
    - images/a_dot_burr.jpeg
    - images/a_dot_ham.jpeg

  fonts:              # Required if your app uses custom fonts
    - family: Schyler
      fonts:
        - asset: fonts/Schyler-Regular.ttf
        - asset: fonts/Schyler-Italic.ttf
          style: italic
    - family: Trajan Pro
      fonts:
        - asset: fonts/TrajanPro.ttf
        - asset: fonts/TrajanPro_Bold.ttf
          weight: 700
~~~

参考URL）
https://docs.flutter.dev/development/tools/pubspec

#### 宣言したパッケージはビルド時にダウンロードされる
Flutterルートに.pubspecという隠しフォルダができ
そこにパッケージがダウンロードされてビルドに使用される

## ８．ホットリロードで一回一回ビルドしなくてもいい
Flutterにはホットリロードという機能があり
UIを修正した際に修正が即反映される
main関数を再度実行することなく、イベントハンドラの部分のみが処理される

### ①メインカラーをblueに指定
![スクリーンショット 2022-01-25 20.26.39.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355942/6428c1cb-02fe-4f80-ac3b-792e115c2f79.png)


### ②タイトルやボタンの色がblue
![スクリーンショット 2022-01-25 20.27.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355942/fdf29936-83a6-06d8-ee2a-503c154bc208.png)

### ③メインカラーをyellowに指定してソースを保存
![スクリーンショット 2022-01-25 20.27.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355942/d865fd83-65a8-1b3a-8251-544e00044e5a.png)


### ④タイトルやボタンの色がyellow
![スクリーンショット 2022-01-25 20.27.58.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355942/986edab1-01f0-6941-7c2f-eba294c89e46.png)



## ９．動作確認

Androidのエミュレータ、実機
iPhoneのシミュレータ、実機
で確認を行うことができます。

### Androidエミュレータ起動
![スクリーンショット 2022-01-25 21.03.29.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355942/8c70f09a-6185-4f9b-6622-1a083482a7b0.png)


### iPhoneシミュレータ起動
![スクリーンショット 2022-01-25 20.51.19.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/355942/34a4e152-769f-efbe-5bd4-243ff53055f0.png)


## １０．アプリ公開
#### テスト完了後、アプリ審査に提出
AndroidであればGooglePlayConsole、
iOSであればAppleDeveloperから
作成したアプリを審査に提出する

アプリの作成ルールに違反していないか審査され、問題がなければ公開の流れとなる