「[[.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]] de disconと思いきや、 -[[Dart>JavaScript#fabf5f7e]] de 昨今、隆盛の予感。 *詳細 [#r86b0e07] 2018年2月に発表されたDart2&Flutterが進撃を開始した。 **開発ツール [#y7e26448] 開発ツールは[[Node.js]]系ではない。 -SDK形式だが、CUIなので --[[VS Code>統合開発環境 (IDE)#j9da19e0]]などのエディタから使用可能。 --また、[[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 Native for Web]]」と言うモノも在るらしい(...頭痛が)。 **[[ビルドとデプロイ>Flutter - ビルドとデプロイ]] [#b27518a6] *構成 [#f15399f8] **フォルダ [#i663e6e2] **要素 [#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 ---画面の再描画を行わない。 --StatefulWidget ---画面の再描画を行う。 ---追加で、buildメソッド内で呼び出されるcreateStateメソッドを持つ。 ***プログラム実装 [#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 [#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