Flutter のバックアップ(No.27)

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ステップ †

↑

参考 †

Flutter感想｜mizchi｜note
https://note.com/mizchi/n/n53d0b34b25ac

iOSネイティブアプリ開発者から見たFlutter – Flutter 🇯🇵 – Medium
https://medium.com/flutter-jp/flutter-ios-5b2178018d3e

↑

Wikipedia †

Flutter
https://ja.wikipedia.org/wiki/Flutter
Dart
https://ja.wikipedia.org/wiki/Dart

↑

Publickey †

Google、「Flutter 1.9」リリース、Webアプリ生成機能を統合。
Flutterは単一コードでネイティブアプリとWebアプリを開発できるフレームワークに
https://www.publickey1.jp/blog/19/googleflutter_19webflutteriosandroidwindowsweb.html

Flutter、Linuxデスクトップアプリの開発対応へ、アルファ版を発表。Canonicalと協業で
https://www.publickey1.jp/blog/20/flutterlinuxcanonical.html

Dart言語のフレームワーク「Flutter 2」公開。
単一コードでiOS/Android/Web/Win/Mac/Linuxのネイティブアプリ実現。
WebAssemblyによるレンダリングエンジン搭載－ Publickey
https://www.publickey1.jp/blog/21/dartflutter_2iosandroidwebwinmaclinuxwebassembly.html

↑