・アップバー、テキスト、アイコンを表示できるようになる
（この記事の内容を実施すると画像のようなものを作ることができます）
【ウィジェットとは】
Flutterにおいて、アップバーやテキスト、アイコンなどを構成するためのものをウィジェットと言います。今回はこのウィジェットの書き方についてまとめます。
【アップバーを表示】
アップバーを表示するためにMaterialAppを作成します。
その中に、
[title]、[theme]、[home]のように並列に書いていきます。
それぞれの意味や特徴は以下の通りとなります。
[title] ⇨タイトル
[theme] ⇨テーマ（色変更などが可能）
[home] ⇨本体部分。ここにアップバーなどを書いていく
まず、MaterialAppを作成します。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
);
}
}
そのなかに、[title]、[theme]、[home]を配置していきます。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: ,
theme: ,
home: ,
);
}
}
[title]について
titleの記述の仕方は以下の通りです。
今回はとりあえず'about widget'としておきます。
title: 'about widget',
[theme]について
themeの記述の仕方は以下の通りです。
今回は青色で表示するように設定していますが、blueの部分をredやgreenなどに書き換えることで変更可能です。
theme: ThemeData(
primarySwatch: Colors.blue,
),
[home]について
homeの記述は以下の通りとなります。
homeではScaffoldというアプリのレイアウトを管理するためのものを使用して、その中にアップバーなどを記述していきます。
現状ではとりあえずアップバーを表示するようにしています。
home: Scaffold(
appBar: AppBar(
title: Text('AppBar is here'),
),
),
ここまで実施すると以下のようになります。
ここまでのまとめのコードです。
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'about widget',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('AppBar is here'),
),
),
);
}
}
【テキストとアイコンを追加】
テキストとアイコンを追加します。
やり方としては[home]の中に追加していくということになります。
テキストを追加
[home]内のappBarの後に以下を追加します。
centerを指定することで全体の中央を指定します。
body: Center(
child: Text('Hello World'),
),
アイコンを追加
同じようにbodyの後に以下を追加します。
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
ここまで実施すると以下のようになります。
最後に全体のコードがこちらになります。
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'about widget',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('AppBar is here'),
),
body: Center(
child: Text('Hello World'),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
),
),
);
}
}
まとめ
ここまでを実施することで、ウィジェットの中にアップバーやテキスト、アイコンを記述することで画面に表示できるようになることを学びました。
これは初歩の初歩ですが、知ってしまえば意外と簡単なので次のステップも頑張りましょう。
