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

目次

概要

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

  • Dart de disconと思いきや、
  • Dart de 昨今、隆盛の予感。

詳細

  • ReactNativeを強く意識した後発のフレームワークと言われている。
  • 内部で他の技術を利用しておらず、OS以外の制限を受けない。
  • 2018年2月に発表されたDart2&Flutterが進撃を開始した。

開発

言語

Dart

ツール

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

  • SDK形式だが、CUIなのでIDEからプラグイン可能。
  • VS Codeプラグインから使用可能。
  • なお、Xcodeのプラグインは存在しない模様
    (エディットはせず、ビルドのみを行う)。

クロスコンパイル

開発環境を見ると、

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

マークアップ

なし。

  • そう言う意味では、VB6やWindows Forms方式。
  • XAMLJSXなどはデメリットも多いのだろうか?

レンダリング系

  • Reactに似ている。
    • DOM操作系ではなく、仮想DOMを持っている。
    • stateが変化したときに再描画を指示する。

ビルドとデプロイ

その他

Flutter for Desktop

Flutter for Web

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

  • FlutterによるSPA開発が可能。
  • 順番が逆だけど、

の様な関係。

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

  • ただし、現時点では、
    モバイルアプリ専用開発ツールと
    考えていたほうが良いとのこと。
  • 仕組みとしては、
    スマホ上のVMで動作するのではなく、
    JavaScriptにトランスパイルされて動作する。

ReactNative vs Flutter

構成

フォルダ

flutter_app以下

ファイル

  • flutter_app.iml
    モジュール定義ファイル
  • pubspec.yaml
    パッケージ構成ファイル

フォルダ

  • ソース
  • lib
    ソース・コード(src的な)
    • main.dart
    • 任意のdartファイル、フォルダ
  • test
    テスト・コード
  • ビルド・スクリプト

その他

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

要素

概要図

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

State

  • Stateクラスは以下のメソッドを持つ。
  • initState()
    Widgetツリーの初期化
  • didChangeDependencies?()
    initState()呼び出し直後に呼ばれる変更通知
  • build()
    didChangeDependencies?()呼出し中で
    呼び出されWidgetツリーを置き換える
  • didUpdateWidget?(Widget oldWidget)
    リビルド時のinitState()的な位置づけ
  • setState()
    任意で呼び出し、変更を反映させる。
  • deactivate()
    StateをWidgetツリーから削除する。
  • dispose()
    Stateを永続的に削除する

Widget

  • Widgetの入れ子でFlutterは構成される。
  • Widgetクラスは必ず他のWidgetを返すbuildメソッドを持つ。
  • State
    • StatelessWidget?
      • 値を保持せず。画面の再描画を行わない。
      • 必ず他のWidgetを返すbuildメソッドを持つ。
  • StatefulWidget?
    • Stateクラスで存続期間中は値を保持し、画面の再描画を行う。
    • buildメソッドを持たない。createStateメソッドを持つ。
    • createStateで生成されたStateクラスがbuildメソッドを持つ。
    • このbuildメソッドは、要素の詰まったScaffoldを返す。

プログラム実装

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

step by step 的な

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

Flutterのセカンド・ステップ

Flutterのサード・ステップ

Flutterの4thステップ

参考

Wikipedia

Publickey

flutter.dev

Get started

Development

Deployment

  • Build and release an Android app
  • Build and release an iOS app
  • Build and release a Linux app
  • Build and release a web app
  • Continuous 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
Last-modified: 2021-06-18 (金) 14:11:17 (131d)