![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
独事描画と、Dart言語が特徴。
開発ツールはNode.js系ではない。
開発環境を見ると、
を使用する事になっている。
なし。
Reactに似ている。
flutter_app以下
任意のファイル、フォルダ
App -> Page -> PageSate? -> その他のWidget
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の部分描画を実現する。
// アプリケーションバー -> タイトル、
// ホーム画面の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),
), // この末尾のコンマは、自動フォーマットのため。
);
}
}
Flutter for Webとか、Flutter on the webなどと呼ばれている。
の様な関係。
※ ...と思ったら、「React Native for Web」と言うモノも在るらしい（...頭痛が）。
https://flutter.ctrnost.com/install/
https://flutter.ctrnost.com/tutorial/
https://flutter.ctrnost.com/basic/
https://zenn.dev/topics/flutter
