| ページ一覧 | ブログ | twitter |  書式 | 書式(表) |

MyMemoWiki

「Flutter コードサンプル」の版間の差分

提供: MyMemoWiki
ナビゲーションに移動 検索に移動
5行目: 5行目:
 
{{amazon|4798055832}}
 
{{amazon|4798055832}}
  
===テキストのみ配置する===
+
===シンプルな画面===
 
====ウィジェット====
 
====ウィジェット====
 
*Flutterでは画面表示はウィジェットという部品によって作成される。
 
*Flutterでは画面表示はウィジェットという部品によって作成される。
16行目: 16行目:
 
*StatefullWidgetはステート(状態)を持つ
 
*StatefullWidgetはステート(状態)を持つ
 
*ウィジェットはいずれかを継承して作成する
 
*ウィジェットはいずれかを継承して作成する
 
+
*MaterialAppというマテリアルデザインを管理するウィジェットクラスを、buildで返すことでマテリアルデザインアプリになる
 
  import 'package:flutter/material.dart';
 
  import 'package:flutter/material.dart';
 
   
 
   
34行目: 34行目:
 
  }
 
  }
 
[[File:Flutter_simple.png]]
 
[[File:Flutter_simple.png]]
 +
====MaterialAppクラス====

2020年3月15日 (日) 06:58時点における版

Flutter コードサンプル

Flutter|Dart|

シンプルな画面

ウィジェット

  • Flutterでは画面表示はウィジェットという部品によって作成される。
  • ウィジェットを入れ子にすることで構築し、ウィジェットツリーと呼ぶ。

StatelessWidgetとStatefulWidget

  • runAppの引数に指定されているのは、MyAppクラスのインスタンス
  • MyAppは、StatelessWidgetのサブクラス
  • StatelessWidgetはステート(状態)を持たない
  • StatefullWidgetはステート(状態)を持つ
  • ウィジェットはいずれかを継承して作成する
  • MaterialAppというマテリアルデザインを管理するウィジェットクラスを、buildで返すことでマテリアルデザインアプリになる
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Sample',
      home: Text(
        'Hello, Flutter!!',
        style: TextStyle(fontSize: 32.0),
      ),
    );
  }
}

Flutter simple.png

MaterialAppクラス