- 追加された行はこの色です。
- 削除された行はこの色です。
「[[.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]
DOM操作系ではなく、仮想DOMを持っているの意味。
[[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と協業で~
-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