スポンサーリンク
こんにちは。マークです。
今回はflutterでページ(画面上部)のタイトルをつける方法をご紹介します。
ページ(画面)のタイトルをつける方法
ページのタイトルをつけると画面は以下の写真のようになります。

ページの上部にタイトルがついているのがお分かりでしょうか?
それでは、実際のコードを以下に記載します。(ほぼ初期コードのままです。)
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'こっちでもタイトルを決めれるよ'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
//↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
appBar: AppBar(
title: Text("ページのタイトル"),
),
);
}
}
ページのはタイトルは12行目or32行目のtitleの中で決定することができます。
関連知識
ページのタイトル部分の青いところをappBarと言います。
このappBarを作るためには、ScaffoldというWidgetを使う必要があるのです。
Scaffoldはページのレイアウト作成に必ず用いるものです。
マーク
ページを作るための基本中の基本って感じ!!
そして、Scaffoldを用いることで、Googleが推奨している「マテリアルデザイン」を適用することができます。
(Scaffoldとは上記のコードの29行目の記述のことです。)
まとめ
これでflutterでのページのタイトルの付け方は理解できましたか?
あなたのflutterでのアプリ開発の第一歩を手助けできたらなと思います^^
次の記事では、
floatingActionButtonについて解説していきます!
floatingActionButtonとは、画面をスクロールしても右下についてくるボタンのことです。

+マークのボタンのことです。
スポンサーリンク