スポンサーリンク
iOSエンジニアがFlutter を触ってみた2
今回は Scaffold と AppBar について勉強しましょう。
【目次】
Scaffold と AppBar
Scaffold はアプリの構成の骨組みみたいなもので家みたいなものをイメージしています。
AppBar はiOS でいうところのNavigationBar そのものです。
では基本構成を見ていきます。
main.dart に下のコードをコピペしていきましょう!
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter App',
home: Scaffold(
appBar: AppBar(
title: Text('Hello Flutter'),
),
body: Text(
'Hello World',
style: TextStyle(fontSize: 32.0),
),
),
);
}
}
これでアプリをビルドできます。
Hello World を表示します
今回はMaterialApp のhome に Scaffold を入れます。
home: Scaffold(
appBar: AppBar(
title: Text('Hello Flutter'),
),
body: Text(
'Hello World',
style: TextStyle(fontSize: 32.0),
),
),
このソースコードを簡略化すると
home: Scaffold(
appBar: AppBar(),
body: Text(),
),
となります。
つまり、Scaffoldの中に AppBar と Text が入った構成になっているわけです。
AppBarと Text はそれぞれ
AppBar(
title: Text('Hello Flutter'),
),
Text(
'Hello World',
style: TextStyle(fontSize: 32.0),
),
このような形になっています。
だいぶ見やすくなりましたね。
Scaffold について整理する
Scaffold を整理すると次のようにしてインスタンスを作成します。
Scaffold( appBar: xxx, body: yyy)
では最初に戻りましょう。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter App',
home: Scaffold(
appBar: AppBar(
title: Text('Hello Flutter'),
),
body: Text(
'Hello World',
style: TextStyle(fontSize: 32.0),
),
),
);
}
}
今回はこれを暗記します。