2. iOSエンジニアがFlutter を触ってみた2
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), ), ), ); } }
これでアプリをビルドできます。
今回は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), ), ), ); } }
今回はこれを暗記します。