「.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。
独事描画と、Dart言語が特徴。
開発ツールはNode.js系ではない。
開発環境を見ると、
を使用する事になっている。
なし。
Reactに似ている。
Flutter for Webとか、Flutter on the webなどと呼ばれている。
の様な関係。
※ ...と思ったら、「React Native for Web」と言うモノも在るらしい(...頭痛が)。
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'), ); } }
// ホーム・ページは、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), ), // この末尾のコンマは、自動フォーマットのため。 ); } }
https://flutter.ctrnost.com/install/
https://flutter.ctrnost.com/tutorial/
https://flutter.ctrnost.com/basic/
https://zenn.dev/topics/flutter