Skip to content

DNET_Flutter

Jump to bottom
nishi_74322014 edited this page Sep 11, 2026 · 1 revision

Flutter

概要

独自描画と、Dart言語（JavaScriptの該当節を参照）が特徴。

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

詳細

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

開発

言語

Dart

ツール

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

  • SDK形式だが、CUIなのでIDEからプラグイン可能。

    • VS Code（統合開発環境 (IDE)の該当節を参照）プラグインから使用可能。

    • お勧めのIDEは、Android Studioプラグイン。

    • なお、Xcodeのプラグインは存在しない模様
      （エディットはせず、ビルドのみを行う）。

  • この方式は.NET Coreと同じ。

クロスコンパイル

開発環境を見ると、

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

マークアップ

なし。

  • そう言う意味では、VB6やWindows Forms方式。
  • XAMLやJSX（Reactの該当節を参照）などはデメリットも多いのだろうか？

レンダリング系

  • Reactに似ている。

    • DOM操作系ではなく、仮想DOM（Reactの該当節を参照）を持っている。
    • stateが変化したときに再描画を指示する。

  • 参考

    FlutterはReactNativeにインスパイアされているので、flux/reduxと相性がいい。

ビルドとデプロイ

Flutter - ビルドとデプロイ

その他

Flutter for Web

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

  • FlutterによるSPA開発が可能。

  • 順番が逆だけど、

    • React(web) → ReactNative(native)
    • Flutter(native) → Flutter on the web(web)

    の様な関係。

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

  • ただし、現時点では、
    モバイルアプリ専用開発ツールと
    考えていたほうが良いとのこと。

  • 仕組みとしては、
    スマホ上のVMで動作するのではなく、
    JavaScriptにトランスパイルされて動作する。

Flutter for Desktop

Mac、Windows、Linux上で動作するFlutterアプリを開発するための仕組み。

Flutter for Windows

  • Flutter 2.10の安定版ビルドに同梱されている模様
  • 「Microsoft Store」でアプリを公開することも可能

ReactNative vs Flutter

ReactNative vs Flutter

構成

フォルダ

flutter_app以下

ファイル

  • flutter_app.iml
    モジュール定義ファイル

  • pubspec.yaml
    パッケージ構成ファイル

フォルダ（構成）

  • ソース

    • lib
      ソース・コード（src的な）

      • main.dart
      • 任意のdartファイル、フォルダ

    • test
      テスト・コード

  • ビルド・スクリプト

    • android
      Gradle
    • ios
      Xcode

その他（構成）

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

要素

概要図

概要図

App -> Page -> PageState -> その他のWidget

State

  • ReactのState（Reactの該当節を参照）と同じ。

  • 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 的な

参考

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

移行メモ

  • 概要の「独事描画」→「独自描画」、要素の概要図の「PageSate」→「PageState」に修正した。
  • 「Flutter for Desktop」の説明「〜開発するための」は文が途切れていたため 「〜開発するための仕組み。」とした。
  • Dart のサンプル・コードで、コメント行の 1 つが /（スラッシュ 1 つ）で 始まっていたため // に修正した。
  • 「Widget」の箇条書きにあった空の項目を除去した。
  • 同名の見出し（「その他」「フォルダ」「Widget」）が複数あり GitHub Wiki で アンカが衝突するため、括弧で文脈を補って一意にした。
  • マイクロソフト系技術情報 Wiki（techinfoofmicrosofttech.osscons.jp）への URL リンクは、移行済みの Windows Forms / XAML に張り替えた。
  • PukiWiki のページ内アンカ（#xxxxxxxx）は GitHub Wiki では再現できないため、 同一ページ内のアンカは見出しから生成されるアンカに張り替え、 他ページのアンカを指すリンクは「〜（ページ名 の該当節を参照）」の形に置き換えた。
  • 本フェーズで新たに参照された「Flutter - ビルドとデプロイ」 「Flutterのファースト／セカンド／サード／4thステップ」を TODO.md に予約した。

Tags: 移行, Flutter, Dart, クロスプラットフォーム, Widget, State, モバイル, Flutter for Web

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

NetDevInfraWiki

マイクロソフト系技術情報 Wiki
Open 棟梁 Wiki

（未着手）

開発基盤部会 Wiki

移行管理: DONE ／ TODO

Clone this wiki locally