Flutter のバックアップの現在との差分(No.24)

追加された行はこの色です。
削除された行はこの色です。
「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。

-[[戻る>クロスプラットフォーム開発ツール]]
--Flutter
--[[ReactNative]]
--[[Cordova (PhoneGap)]]
-戻る
--...
--[[クロスプラットフォーム開発ツール]]
---Flutter
---[[React Native>ReactNative]]
---[[Cordova (PhoneGap)]]

*目次 [#z29777d1]
#contents

*概要 [#c95c5977]
独事描画と、[[Dart言語>JavaScript#fabf5f7e]]が特徴。
-[[Dart>JavaScript#fabf5f7e]] de disconと思いきや、
-[[Dart>JavaScript#fabf5f7e]] de 昨今、隆盛の予感。

*詳細 [#r86b0e07]
-[[ReactNative]]を強く意識した後発のフレームワークと言われている。
-内部で他の技術を利用しておらず、OS以外の制限を受けない。
-2018年2月に発表されたDart2＆Flutterが進撃を開始した。
-2018年2月に発表された[[Dart]]2＆Flutterが進撃を開始した。

**開発ツール [#y7e26448]
**開発 [#ufaae1fe]

***言語 [#ob7da13d]
[[Dart]]

***ツール [#y7e26448]
開発ツールは[[Node.js]]系ではない。

-SDK形式だが、CUIなのでIDEからプラグイン可能。

--[[VS Code>統合開発環境 (IDE)#j9da19e0]]プラグインから使用可能。

--お勧めのIDEは、[[Android Studio]]プラグイン。

--なお、[[Xcode]]のプラグインは存在しない模様~
（エディットはせず、ビルドのみを行う）。

-この方式は[[.NET Core>.NET Coreのインストールとデプロイ]]と同じ。

**クロスコンパイル [#e1ab22fd]
[[開発環境>#a6ef27db]]を見ると、

-VM上で動作
--iOS : [[Xcode]]
--Android : [[Android Studio]]
--Windows : [[Flutter for Desktop>#abd1a4bb]]

-トランスパイル
--WWWブラウザ：[[Flutter for Web>#lfbe3670]]

を使用する事になっている。

**マークアップ [#u89b91cd]
なし。

-そう言う意味では、VB6や[[Windows Forms>https://techinfoofmicrosofttech.osscons.jp/index.php?Windows%20Forms]]方式。
-[[XAML>https://techinfoofmicrosofttech.osscons.jp/index.php?XAML]]や[[JSX>React#ne8ad84a]]などはデメリットも多いのだろうか？

**レンダリング系 [#p5384458]
[[React]]に似ている。
-DOM操作系ではなく、[[仮想DOM>React#b5a85f5b]]を持っている。
-stateが変化したときに再描画を指示する。
-[[React]]に似ている。
--DOM操作系ではなく、[[仮想DOM>React#b5a85f5b]]を持っている。
--stateが変化したときに再描画を指示する。

-参考
--Reduxアーキテクチャでのflutter~
https://qiita.com/ko2ic/items/97aeaa4bdbaa6a7e6cbe
>[[Flutter]]は[[ReactNative]]にインスパイアされているので、flux/reduxと相性がいい。

**[[ビルドとデプロイ>Flutter - ビルドとデプロイ]] [#b27518a6]

**その他 [#ucf31761]

***Flutter for Desktop [#abd1a4bb]

***Flutter for Web [#lfbe3670]
Flutter for Webとか、Flutter on the webなどと呼ばれている。

-FlutterによるSPA開発が可能。

-順番が逆だけど、
--[[React]](web) → [[ReactNative]](native)
--Flutter(native) → Flutter on the web(web)

>の様な関係。

>※ ...と思ったら、「[[React Native for Web]]」と言うモノも在るらしい（...頭痛が）。

-ただし、現時点では、~
モバイルアプリ専用開発ツールと~
考えていたほうが良いとのこと。

-仕組みとしては、~
スマホ上のVMで動作するのではなく、~
JavaScriptにトランスパイルされて動作する。

***Flutter for Desktop [#abd1a4bb]
Mac、Windows、Linux上で動作するFlutterアプリを開発するための

***Flutter for Windows [#l1282ba3]
-Flutter 2.10の安定版ビルドに同梱されている模様
-「Microsoft Store」でアプリを公開することも可能

***[[ReactNative vs Flutter]] [#gf8d9834]

*構成 [#f15399f8]

**フォルダ [#i663e6e2]
flutter_app以下

***ファイル [#dacadd6c]
-flutter_app.iml~
モジュール定義ファイル

-pubspec.yaml~
パッケージ構成ファイル

***フォルダ [#b9512155]
-ソース

--lib~
ソース・コード（src的な）
---main.dart
---任意のdartファイル、フォルダ

--test~
テスト・コード

-ビルド・スクリプト
--android~
Gradle
--ios~
[[Xcode]]

***その他 [#x2d552aa]
任意のファイル、フォルダ

**要素 [#x3225bbd]

***[[概要図>https://miro.medium.com/max/2400/1*FxaFgtbP4fdNPvfezKsH5g.png]] [#jc16b8f6]
App -> Page -> PageSate -> その他の[[Widget>#h88a2746]]

***State [#bba6a621]
-[[ReactのState>React#j6338a61]]と同じ。

-Stateクラスは以下のメソッドを持つ。

--initState()~
[[Widget>#h88a2746]]ツリーの初期化

--didChangeDependencies()~
initState()呼び出し直後に呼ばれる変更通知

--build()~
didChangeDependencies()呼出し中で~
呼び出され[[Widget>#h88a2746]]ツリーを置き換える

--didUpdateWidget(Widget oldWidget)~
リビルド時のinitState()的な位置づけ

--setState()~
任意で呼び出し、変更を反映させる。

--deactivate()~
Stateを[[Widget>#h88a2746]]ツリーから削除する。

--dispose()~
Stateを永続的に削除する

***Widget [#h88a2746]
-Widgetの入れ子でFlutterは構成される。
-
-Widgetクラスは必ず他のWidgetを返すbuildメソッドを持つ。

-[[State>#bba6a621]]
--StatelessWidget
---値を保持せず。画面の再描画を行わない。
---必ず他のWidgetを返すbuildメソッドを持つ。

--StatefulWidget
---Stateクラスで存続期間中は値を保持し、画面の再描画を行う。
---buildメソッドを持たない。createStateメソッドを持つ。
---createStateで生成されたStateクラスがbuildメソッドを持つ。
---このbuildメソッドは、要素の詰まったScaffoldを返す。

***プログラム実装 [#zb4ac86e]
main.dart

 import 'package:flutter/material.dart';
 
 // メイン関数、実行時に最初に呼ばれる
 // runAppメソッドは引数のwidgetをスクリーンにアタッチする
 // runAppメソッドの引数のWidgetが画面いっぱいに表示される
 void main() {
   runApp(MyApp());
 }

 // アプリケーション全体管理する
 // runAppの引数として生成され、
 // 最初にインスタンス化される
 // ルートのStatelessWidgetクラス
 class MyApp extends StatelessWidget {
 
   // buildのoverrideで、MaterialAppを返す。
   @override
   Widget build(BuildContext context) {
     // MaterialAppで画面のtitle, theme, home等を設定
     return MaterialApp(
       title: 'Flutter Demo',
       theme: ThemeData(
         // themeは、"hot reload"に対応している云々...。
         primarySwatch: Colors.blue,
       ),
       // Home? Page?
       home: MyHomePage(title: 'Flutter Demo Home Page'),
     );
   }
 }

 // ホーム・ページは、StatelessWidgetクラス
 // ホーム・ページは、StatefulWidget クラス
 class MyHomePage extends StatefulWidget {
 
   // コンストラクタ
   MyHomePage({Key key, this.title}) : super(key: key);
   
   // 定数定義
   // MyAppのbuildメソッドの返すMaterialAppのコンストラクタのhome引数に設定される。
   / 要するに、親Widget（MyApp）から提供される子Widget（MyHomePage）。
   // - Stateのbuildメソッドで使用される値(ここではタイトル)を保持する。
   // - Widgetサブクラスのフィールドは、常に "final "とマークされる。
   final String title;
   
   // createStateのoverrideでState（MyHomePageState）を設定する。
   @override
   _MyHomePageState createState() => _MyHomePageState();
 }

 // Widget（MyHomePage）から呼ばれるStateクラス
 class _MyHomePageState extends State<MyHomePage> {
   
   // メンバの定義
   int _counter = 0;
   
   // メソッドの定義
   void _incrementCounter() {
     // setStateにdelegateしてメンバを更新すると画面が再描画される。
     // Stateを継承しているので、setState.Stateかな。
     // https://api.flutter.dev/flutter/widgets/State/setState.html
     setState(() {
       _counter++;
     });
   }
   
   // buildのoverrideで、Scaffoldを返す。
   @override
   Widget build(BuildContext context) {
   
     // 画面全体のWidgetツリーを構成し
     // 仮想DOMの部分描画を実現する。
     // アプリケーションバー -> タイトル、
     // ホーム画面のbodyプロパティを提供
     return Scaffold(
     
       // アプリバーWidget
       appBar: AppBar(
         // MyHomePage.titleを使用してtitleを設定。
         title: Text(widget.title),
       ),
       
       // 子Widgetを中央に配置するレイアウトWidget。
       body: Center(
         // 子Widgetを縦に並べるレイアウトWidget。
         child: Column(
           mainAxisAlignment: MainAxisAlignment.center,
           children: <Widget>[
             Text(
               'You have pushed the button this many times:',
             ),
             Text(
               '$_counter',
               style: Theme.of(context).textTheme.headline4,
             ),
           ],
         ),
       ),
       
       // ...
       floatingActionButton: FloatingActionButton(
         // ボタン押下時のアクションに、
         // Stateクラスに定義したState更新（再描画）メソッドをセット
         onPressed: _incrementCounter,
         
         tooltip: 'Increment',
         child: Icon(Icons.add),
       ), // この末尾のコンマは、自動フォーマットのため。
     );
   }
 }

*step by step 的な [#i112328c]
**[[Flutterのファースト・ステップ]] [#v66d390b]
**[[Flutterのセカンド・ステップ]] [#pc1f550f]
**[[Flutterのサード・ステップ]] [#j4620f94]
**[[Flutterの4thステップ]] [#fbada62f]

*参考 [#a9ed99c8]

-Flutter感想｜mizchi｜note~
https://note.com/mizchi/n/n53d0b34b25ac

-iOSネイティブアプリ開発者から見たFlutter – Flutter 🇯🇵 – Medium~
https://medium.com/flutter-jp/flutter-ios-5b2178018d3e

**Wikipedia [#lbb8f6d3]
-Flutter~
https://ja.wikipedia.org/wiki/Flutter
-Dart~
https://ja.wikipedia.org/wiki/Dart

**Publickey [#fb1c6c53]
-Google、「Flutter 1.9」リリース、Webアプリ生成機能を統合。~
Flutterは単一コードでネイティブアプリとWebアプリを開発できるフレームワークに~
https://www.publickey1.jp/blog/19/googleflutter_19webflutteriosandroidwindowsweb.html

-Flutter、Linuxデスクトップアプリの開発対応へ、アルファ版を発表。Canonicalと協業で~
https://www.publickey1.jp/blog/20/flutterlinuxcanonical.html

-Dart言語のフレームワーク「Flutter 2」公開。~
単一コードでiOS/Android/Web/Win/Mac/Linuxのネイティブアプリ実現。~
WebAssemblyによるレンダリングエンジン搭載 － Publickey~
https://www.publickey1.jp/blog/21/dartflutter_2iosandroidwebwinmaclinuxwebassembly.html

**flutter.dev [#k1378dcd]

***Get started [#x64f1c6b]
-Install~
https://flutter.dev/docs/get-started/install
-Set up an editor~
https://flutter.dev/docs/get-started/editor
-Test drive~
https://flutter.dev/docs/get-started/test-drive

-Write Your First Flutter App
--part 1~
https://flutter.dev/docs/get-started/codelab
--part 2~
https://codelabs.developers.google.com/codelabs/first-flutter-app-pt2/#5

-Learn more~
https://flutter.dev/docs/get-started/learn-more

***Development [#badad36e]
-UI
--Widget catalog~
https://flutter.dev/docs/development/ui/widgets

-Packages & plugins
--Using packages~
https://flutter.dev/docs/development/packages-and-plugins/using-packages

***Deployment [#l15e1ca3]
-Build and release an Android app
-Build and release an iOS app
-Build and release a Linux app
-Build and release a web app
-Continuous deployment

**Flutter Doc JP [#aa840f86]
https://flutter.ctrnost.com/

***インストール [#e0bc9669]
https://flutter.ctrnost.com/install/

***チュートリアル [#y57e5881]
https://flutter.ctrnost.com/tutorial/

-アプリ作成~
https://flutter.ctrnost.com/tutorial/tutorial01/
-アプリの実行~
https://flutter.ctrnost.com/tutorial/tutorial02/
-アプリ作成~
https://flutter.ctrnost.com/tutorial/tutorial03/
-FlutterAppの基本~
https://flutter.ctrnost.com/tutorial/tutorial04/
-外部パッケージ~
https://flutter.ctrnost.com/tutorial/tutorial05/
-Statefulウィジェット~
https://flutter.ctrnost.com/tutorial/tutorial06/
-無限スクロールListView~
https://flutter.ctrnost.com/tutorial/tutorial07/

***Flutterの基本 [#vb3308cb]
https://flutter.ctrnost.com/basic/

-レイアウト~
https://flutter.ctrnost.com/basic/layout/
-インタラクティブ~
https://flutter.ctrnost.com/basic/interactive/
-ナビゲーション~
https://flutter.ctrnost.com/basic/navigation/

**Qiita [#k0c14270]
-Flutter~
https://qiita.com/tags/flutter

-Android開発はFlutterでやる方がいい説~
https://qiita.com/ko2ic/items/b07d3ec73513c1bd8ba6

***入門 [#fa73f0cd]
-Flutterに入門した~
https://qiita.com/Ryuichirou/items/029b5312e73374187fa3
-【入門】はじめての Flutter~
https://qiita.com/nskydiving/items/4fcf0dbad923d50601f9

-nkmk1215
--WindowsでFlutterインストール~
https://qiita.com/nkmk1215/items/2b741157bc253350ff18
--Flutterの基礎~
https://qiita.com/nkmk1215/items/7d73b4fd8cb5ec5ac486

-Flutter でよく使う（と思う）コードまとめ~
https://qiita.com/chooyan_eng/items/e7f1fcca1eeb0cf150b5

-初心者がFlutterでアプリ開発するための知見まとめ~
https://qiita.com/okapee0608/items/9ed40d569bb06a59d12f

***開発環境 [#a6ef27db]
-Windows 
--Flutterの開発環境(Windows + Android Studio)を構築する~
https://qiita.com/rubytomato@github/items/02262197e970f82ecefd
--Flutter開発環境構築（Windows）~
https://qiita.com/take0116/items/219847516987ee327040

-Mac
--Flutter 開発環境構築手順 (2019年 保存版)~
https://qiita.com/tomy0610/items/896dc8ec9ba95c33194f
--Flutter開発環境構築(Mac編)~
https://qiita.com/akatsukaha/items/3b8a5a6d94a3cdb1e047

-Flutter実行環境の構築(Android StudioとXcode)~
https://qiita.com/henjiganai/items/3419ca49a3e36bc59828

-Flutter for DesktopでWindowsアプリ開発環境を構築~
https://qiita.com/karuhi/items/22dc9abd77890da8773c

***Widget [#k0c9ee5a]
-Flutter:Widget一覧~
https://qiita.com/matsukatsu/items/e289e30231fffb1e4502
-Flutter開発する前に知っておきたい35のWidget一覧~
https://qiita.com/coka__01/items/dedb569f6357f1b503fd

***各種トピック [#u59fb4a2]
-Flutter で dio を使って、自己署名証明書の~
WebフォームにCSRFトークンつきでログインする~
https://qiita.com/ytyng/items/7bb124787e7fecb1e188

***Flutter on the web [#k38734d5]
-Flutter for Webが発表されたので、早速動かしてみた!!~
https://qiita.com/Kata_Oka/items/944a6f00ec49eeec450b
-Flutter Webを動かしたときにつまづいたこと~
https://qiita.com/Nkzn/items/402a29fe9bb517ce78aa

**CodeZine（コードジン） [#de3a93ec]
-Flutterで始めるモバイルアプリ開発連載一覧~
https://codezine.jp/article/corner/830

--Flutterとは何か？ 使うメリットや特徴を理解する~
https://codezine.jp/article/detail/12718
--実際にFlutterを触ってみよう～初めてのアプリ開発~
https://codezine.jp/article/detail/13143
--FlutterのUIウィジェットを理解するための基本を知ろう！~
https://codezine.jp/article/detail/13329

--→ [[Dart>Dart#o97ca32b]]

**その他 [#fc7215dd]

***zenn.dev [#g6df70a4]
https://zenn.dev/topics/flutter

-Flutter実践入門~
～環境構築からAndroid/iOS/Webに広告を付けて同時にリリース!!～~
https://zenn.dev/kazutxt/books/flutter_practice_introduction

***adventar.org [#s96b603d]
-Flutter 全部俺 Advent Calendar 2019~
https://adventar.org/calendars/4140

--Flutterとはなにか~
https://itome.team/blog/2019/12/flutter-advent-calendar-day1

--Flutterのツールを使いこなして開発効率を上げる~
https://itome.team/blog/2019/12/flutter-advent-calendar-day2

--[[すぐにFlutterを始めたい人のためのDart入門>Dart#b2006741]]

--FlutterのWidgetが画面に描画されるまでを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day5
--FlutterのInheritedWidgetとBuildContextを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day6
--FlutterのProviderパッケージを使いこなす~
https://itome.team/blog/2019/12/flutter-advent-calendar-day7
--Flutterのパフォーマンスを改善する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day8
--FlutterのBoxConstraintsを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day9
--FlutterのNavigationとRoutingを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day10
--FlutterのSliverWidgetを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day11
--FlutterのThemeを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day12
--FlutterのPlatformViewを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day13
--FlutterでAndroid/iOSのネイティブのAPIを使う~
https://itome.team/blog/2019/12/flutter-advent-calendar-day14

--Flutterのアニメーションを理解する
---前編~
https://itome.team/blog/2019/12/flutter-advent-calendar-day15
---後編~
https://itome.team/blog/2019/12/flutter-advent-calendar-day16

--FlutterのAnimatedWidgetを使いこなす~
https://itome.team/blog/2019/12/flutter-advent-calendar-day17
--Flutterのアクセシビリティを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day18
--FlutterのInternationalization対応~
https://itome.team/blog/2019/12/flutter-advent-calendar-day19
--Flutterのテスト~
https://itome.team/blog/2019/12/flutter-advent-calendar-day20

--Flutterのアプリ設計~
---Bloc~
https://itome.team/blog/2019/12/flutter-advent-calendar-day21
---Redux~
https://itome.team/blog/2019/12/flutter-advent-calendar-day22
---Mobx~
https://itome.team/blog/2019/12/flutter-advent-calendar-day23

--Flutterの自作パッケージを作る~
https://itome.team/blog/2019/12/flutter-advent-calendar-day24
--Flutter for Webを理解する~
https://itome.team/blog/2019/12/flutter-advent-calendar-day25

***OSSコンソーシアム Blog [#u2503fc9]
-Flutterをヤッてみたが、Flutter、イイ感じでは？と言う感想。~
https://www.osscons.jp/joxe28r0g-537/#_537