Flutterって何？

Flutter (フラッター) は、Googleによって開発されたフリーかつオープンソースの
モバイルアプリケーションフレームワークである。FlutterはAndroidやiOS向けの
アプリケーションの開発に利用されている。Fuchsiaではアプリケーションの開発
は主にFlutterを利用して行われている[4]。

2018年12月4日、ロンドンで開催されたFlutter Live '18にて、初の正式版となる
Flutter 1.0のリリースが発表された[5]。

最も重要なことは、「マルチプラットフォーム」の開発ができるフレームワークであるということです。

作りたいアプリがある場合に、通常の開発であれば、動作させる環境毎に言語・開発環境が異なります。その為、全ての環境のアプリケーションを作るには、それぞれ技術を保有する人材が必要となり１つのアプリを作るコストが大きくなります。
新規事業で、新しいアプリケーションを作る場合にブラウザ（WEB）アプリケーションが多いのは、動作させるブラウザがAndroid、iPhone、Windows、Macをカバーしている為、１つのブラウザ（WEB）アプリケーションを作るだけで実現でき比較的難易度が低いから選定されています。

Flutterでは、Dart言語とFlutterFWで、全てのアプリケーションを作成可能であり、開発コストを大幅に削減することが可能です。

OS固有の技術を利用する場合は、KotlinやSwift、C++などで拡張する必要があります。
どんなことを実現したいアプリケーションなのかで、利用技術を選定してください。

ハンズオンのゴール

Flutterでの開発方法、動作確認を学ぶ
開発選択肢の１つに加えてもらう

Step

環境構築（Mac／Windows）
- 所要時間：45分
HelloWorld
- 所要時間：15分
ボタンを配置してみる
- 所要時間：15分
画面遷移してみる
- 所要時間：15分

環境構築（Mac／Windows）

- 所要時間：45分

この作業のゴール：Mac

この作業のゴール：Windows

Flutter SDKをインストールする

https://flutter.dev/docs/get-started/install

MacOS

cd ~/development
unzip ~/Downloads/flutter_macos_1.22.6-stable.zip

export PATH="$PATH:`pwd`/flutter/bin"

Windows
```
C:\src\flutter あたりに解凍
```
c:\src\flutter\flutter_console.bat を実行

FlutterでWindows/Macを有効にする

flutter channel dev
flutter upgrade
flutter config --enable-windows-desktop
flutter config --enable-macos-desktop

Flutter doctorで必要なアプリケーションをインストールする
```
flutter doctor
```
- MacOS
  - Android Studio
    - Dart/Flutterプラグイン設定
  - Xcode
  - VS Code
    - Dart/Flutterプラグイン設定
  - Chrome
- Windows
  - Android Studio
    - Dart/Flutterプラグイン設定
  - VS Code
    - Dart/Flutterプラグイン設定
  - Visual Studio
    - C++ (WindowsDesktopアプリケーション開発環境)
  - Chrome

HelloWorld

- 所要時間：15分

プロジェクトを作成し、VSCodeで表示

プロジェクト作成

flutter create handson

Flutterのディレクトリ構造説明

pubspec.yaml
- プロジェクト定義ファイル
  - 類似
    - Node.js - package.json
    - PHP Larabel - composer.json
    - Python - requirements.txt
lib/*
- Flutterの実行ロジックを格納するディレクトリ
- 最初に読み込みされるファイルは、lib/main.dart
test/* , integration_test/*
- Flutterのテストロジックを格納するディレクトリ
android/* , ios/* , macos/* , web/* , windows/*
- 実行環境毎の定義ファイルや、拡張ロジックを格納するディレクトリ
- アプリ系（android/iso/macos）などのマイク機能、カメラ機能を利用します。などの許可定義などもここ
- ビルド定義もここになるので、うまくビルドが通らない時は、このディレクトリのファイルを変更する
build/*
- ビルドで作成された実行ファイルが格納されるディレクトリ

Flutterを実行してみる

flutter run 
# macos
flutter run -d macos

# windows
flutter run -d windows

# chrome
flutter run -d chrome

# ios
open -a simulator 
flutter run

HelloWorldの文字を追加してみる

lib/main.dart

            Text(
              'Hello World!!!',
            ),

main.dart ファイルを開いて、９５行目あたりにのTextを１つ追加する。
コマンドプロンプト・ターミナルでホットリロード shift + r を実行

ボタンを配置してみる

- 所要時間：15分

lib/main.dart

            RaisedButton(
              child: Text('ボタンです！'),
              onPressed: () {},
            ),

main.dart のHello WorldのText要素の下に、RaisedButtonを配置してみる。

lib/main.dart

            RaisedButton(
              child: Text('ボタンです！'),
              onPressed: () => showDialog(
                context: context,
                builder: (_) {
                  return AlertDialog(
                    title: Text("message"),
                    content: Text("Flutterって面白い！"),
                    actions: <Widget>[
                      // ボタン領域
                      FlatButton(
                        child: Text("閉じる"),
                        onPressed: () => Navigator.pop(context),
                      ),
                    ],
                  );
                },
              ),
            ),

ボタンを押下したときの、アクション onPressed を追加してみる。

画面遷移してみる

- 所要時間：15分

遷移先の画面作成

sub_container.dart

import 'package:flutter/material.dart';

class SubPage extends StatefulWidget {
  @override
  _SubPageState createState() => _SubPageState();
}

class _SubPageState extends State<SubPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Subページです'),
      ),
      body: const Text('Subページです!!'),
    );
  }
}

lib/sub_container.dart で新規ファイルを作成する。

遷移処理の追加

lib/main.dart

import 'sub_container.dart';

作成したファイルをimport

lib/main.dart

      routes: <String, WidgetBuilder>{
        '/sub': (BuildContext context) => (SubPage()),
      },

画面遷移を担う、routesを設定

lib/main.dart

            RaisedButton(
              splashColor: Colors.purple,
              child: Text('Subページに移動'),
              onPressed: () => {Navigator.pushNamed(context, '/sub')},
            ),

遷移用のボタンを追加

動かしてみる

締め

Flutterの技術記事は増えてきているので、調べてみるといろいろ出てきます。
私が学習に利用したサイトを紹介します。

https://flutter.dev/docs
- 公式ドキュメント
https://pub.flutter-io.cn/
- Dart/Flutterのパッケージサイト
Qiita&GitHub
- 動くものをローカルにクローンして手当たり次第に実行

Flutter/Dartは、Reactをオブジェクト指向にした感じだなーと。
マルチプラットフォームで動かせることは、非常に魅力的な要素なので少しアプリ作ってみるときにFlutterってあったな〜と思い出してもらえれば幸いです。

Flutterハンズオン（超入門）

Flutterって何？

ハンズオンのゴール

Step

環境構築（Mac／Windows）

HelloWorld

プロジェクトを作成し、VSCodeで表示

Flutterのディレクトリ構造説明

Flutterを実行してみる

HelloWorldの文字を追加してみる

ボタンを配置してみる

画面遷移してみる

遷移先の画面作成

遷移処理の追加

動かしてみる

締め