「Flutter コードサンプル」の版間の差分
ナビゲーションに移動
検索に移動
37行目: | 37行目: | ||
*引数に様々な設定情報を指定することが出来る | *引数に様々な設定情報を指定することが出来る | ||
====ScaffoldとAppBar==== | ====ScaffoldとAppBar==== | ||
− | * | + | *アプリの基本デザインを生成 |
+ | 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: Scaffold( | ||
+ | appBar: AppBar( | ||
+ | title: Text('Flutter Sample'), | ||
+ | ), | ||
+ | body: Text( | ||
+ | 'Hello, Flutter!!', | ||
+ | style: TextStyle(fontSize: 32.0), | ||
+ | ), | ||
+ | ), | ||
+ | ); | ||
+ | } | ||
+ | } | ||
+ | |||
+ | [[File:Flutter_simple_scaffold.png]] |
2020年3月15日 (日) 07:08時点における版
目次
Flutter コードサンプル
シンプルな画面
ウィジェット
- 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), ), ); } }
MaterialAppクラス
- 引数に様々な設定情報を指定することが出来る
ScaffoldとAppBar
- アプリの基本デザインを生成
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: Scaffold( appBar: AppBar( title: Text('Flutter Sample'), ), body: Text( 'Hello, Flutter!!', style: TextStyle(fontSize: 32.0), ), ), ); } }
© 2006 矢木浩人