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

目次 †

↑

概要 †

独事描画と、言語がDart。

↑

詳細 †

2018年2月に発表されたDart2＆Flutterが進撃を開始した。

↑

開発ツール †

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

↑

クロスコンパイル †

開発環境を見ると、

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

↑

レンダリング系 †

Reactに似ている。

↑

Flutter on the web †

順番が逆だけど、

の様な関係。

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

↑

ビルドとデプロイ †

↑

構成 †

↑

フォルダ †

↑

要素 †

↑

概要図 †

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の部分描画を実現する。
    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 †

↑

Qiita †

↑

入門 †

↑

開発環境 †

↑

Flutter on the web †

↑

Write Your First Flutter App †

↑

Publickey †

↑

Flutter †

↑

Dart †

↑

CodeZine?（コードジン） †

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