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

目次

概要

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

詳細

開発ツール

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

クロスコンパイル

開発環境を見ると、

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

レンダリング系

Reactに似ている。

Flutter on the web

の様な関係。

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

ビルドとデプロイ

構成

フォルダ

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のセカンド・ステップ

参考

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


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