「[[.NET 開発基盤部会 Wiki>http://dotnetdevelopmentinfrastructure.osscons.jp]]」は、「[[Open棟梁Project>https://github.com/OpenTouryoProject/]]」,「[[OSSコンソーシアム .NET開発基盤部会>https://www.osscons.jp/dotNetDevelopmentInfrastructure/]]」によって運営されています。 -戻る --... --[[クロスプラットフォーム開発ツール]] ---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月に発表された[[Dart]]2&Flutterが進撃を開始した。 **開発 [#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が変化したときに再描画を指示する。 -参考 --Reduxアーキテクチャでのflutter~ https://qiita.com/ko2ic/items/97aeaa4bdbaa6a7e6cbe >[[Flutter]]は[[ReactNative]]にインスパイアされているので、flux/reduxと相性がいい。 **[[ビルドとデプロイ>Flutter - ビルドとデプロイ]] [#b27518a6] **その他 [#ucf31761] ***Flutter for Desktop [#abd1a4bb] Mac、Windows、Linux上で動作するFlutterアプリを開発するための ***Flutter for Windows [#l1282ba3] -Flutter 2.10の安定版ビルドに同梱されている模様 -「Microsoft Store」でアプリを公開することも可能 ***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'), ); } } // ホーム・ページは、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 ***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