.NET 開発基盤部会 Wiki」は、「Open棟梁Project」,「OSSコンソーシアム .NET開発基盤部会」によって運営されています。

目次

概要

独事描画と、Dart言語が特徴。

詳細

開発ツール

開発ツールはNode.js系ではない。

クロスコンパイル

開発環境を見ると、

を使用する事になっている。

マークアップ

なし。

レンダリング系

Reactに似ている。

ビルドとデプロイ

その他

Flutter for Desktop

Flutter for Web

Flutter for Webとか、Flutter on the webなどと呼ばれている。

の様な関係。

※ ...と思ったら、「React Native for Web」と言うモノも在るらしい(...頭痛が)。

ReactNative vs Flutter

構成

フォルダ

flutter_app以下

ファイル

フォルダ

その他

任意のファイル、フォルダ

要素

概要図

App -> Page -> PageSate? -> その他のWidget

State

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),
      ), // この末尾のコンマは、自動フォーマットのため。
    );
  }
}

step by step 的な

Flutterのファースト・ステップ

Flutterのセカンド・ステップ

Flutterのサード・ステップ

参考

Wikipedia

Publickey

flutter.dev

Get started

Development

Deployment

Flutter Doc JP

https://flutter.ctrnost.com/

インストール

https://flutter.ctrnost.com/install/

チュートリアル

https://flutter.ctrnost.com/tutorial/

Flutterの基本

https://flutter.ctrnost.com/basic/

Qiita

入門

開発環境

Widget

各種トピック

Flutter on the web

CodeZine?(コードジン)

その他

zenn.dev

https://zenn.dev/topics/flutter

adventar.org

OSSコンソーシアム Blog


トップ   新規 一覧 単語検索 最終更新   ヘルプ   最終更新のRSS