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

-[[戻る>クロスプラットフォーム開発ツール]]

*目次 [#z29777d1]
#contents

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

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

**開発ツール [#y7e26448]
開発ツールは[[Node.js]]系ではない。
-SDK形式だが、CUIなので
--[[VS Code>統合開発環境 (IDE)#j9da19e0]]などのエディタから使用可能。
--また、[[Android Studio]]のプラグインから使用することも可能。~
(なお、[[Xcode]]のプラグインは存在しない模様)
-SDK形式だが、CUIなのでプラグイン可能。
--[[VS Code>統合開発環境 (IDE)#j9da19e0]]プラグインから使用可能。
--お勧めのIDEは、[[Android Studio]]プラグイン。
--なお、[[Xcode]]のプラグインは存在しない模様~
(エディットはせず、ビルドのみを行う)。

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

**クロスコンパイル [#e1ab22fd]
[[開発環境>#a6ef27db]]を見ると、
-Android : [[Android Studio]]
-iOS : [[Xcode]]
-Windows : Flutter for Desktop

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

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

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

-[[React]](web) → [[ReactNative]](native)
-Flutter(native) → Flutter on the web(web)
>の様な関係。

の様な関係。
>※ ...と思ったら、「[[React Native for Web]]」と言うモノも在るらしい(...頭痛が)。

※ ...と思ったら、「[[React Native for Web]]」と言うモノも在るらしい(...頭痛が)。
-ただし、現時点では、~
モバイルアプリ専用開発ツールと~
考えていたほうが良いとのこと。

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

*構成 [#f15399f8]

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

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

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

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

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

--test~
テスト・コード

-ビルド・スクリプト
--android~
android用(Gradle)
--ios~
ios用(XCode)

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

**要素 [#x3225bbd]

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

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

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

--initState()~
Widgetツリーの初期化

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

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

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

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

--deactivate()~
StateをWidgetツリーから削除する。

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

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

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

--StatefulWidget
---画面の再描画を行う。
---追加で、buildメソッド内で呼び出されるcreateStateメソッドを持つ。
---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クラス
 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の部分描画を実現する。
     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]

*参考 [#a9ed99c8]
-Google社のJavaScript代替え言語~
「Dart」とは|4つの特徴と今後|フリエン~
https://furien.jp/columns/265/

-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

**Qiita [#k0c14270]
-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

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

-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

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

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

**Publickey [#fb1c6c53]

***Flutter [#l46dac90]
-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

***Dart [#if7c08d8]
-グーグルから「JavaScriptは根本的な問題を抱えている」とのメモがリークか~
https://www.publickey1.jp/blog/11/javascript_6.html

-グーグル、新言語「Dart」を発表。~
JavaScriptのようなWebプログラミングを想定~
https://www.publickey1.jp/blog/11/dartjavascriptweb.html

-Googleの新言語「Dart」、ECMAが標準化を開始~
https://www.publickey1.jp/blog/13/googledartecma.html

-ChromeへのDartVM統合を断念、Dart開発チームが発表。~
今後はJavaScriptへのコンパイルにフォーカス~
https://www.publickey1.jp/blog/15/chromedartvmdart.html

-Google社内の標準言語としてTypeScriptが承認される。ng-conf 2017~
https://www.publickey1.jp/blog/17/googletypescriptng-conf_2017.html

-TypeScriptが標準言語になっても、~
Dartのことは忘れてませんよとGoogle担当者がフォロー~
https://www.publickey1.jp/blog/17/typescriptdartgoogle.html

-Googleが「Dart 2」発表、Dartを再起動。~
iOS/Android用ライブラリ「Flutter」と共に~
Webとモバイルのクライアント開発にフォーカス~
https://www.publickey1.jp/blog/18/googledart_2dartiosandroidfultterweb.html

-人気が下降しプログラマの求人も少ないプログラミング言語ワースト10は?~
一方で仕事の多い言語は? CodementorXとCoding Dojoの調査結果~
https://www.publickey1.jp/blog/18/5_codementorxcoding_dojo.html

**CodeZine(コードジン) [#de3a93ec]
-Flutterとは何か? 使うメリットや特徴を理解する~
https://codezine.jp/article/detail/12718
-実際にFlutterを触ってみよう~初めてのアプリ開発~
https://codezine.jp/article/detail/13143
-FlutterのUIウィジェットを理解するための基本を知ろう!~
https://codezine.jp/article/detail/13329
-Flutter開発で必要なDart言語の基本を理解しよう~
https://codezine.jp/article/detail/13498
-Flutter開発で使うDart言語での関数・クラスの使い方を理解しよう~
https://codezine.jp/article/detail/13586
-Dart言語でのプログラム設計でワンランク上を目指そう~
https://codezine.jp/article/detail/13665

-→ [[Dart>Dart#o97ca32b]]

**Qiita [#k0c14270]
-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

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

-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

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


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS