Flutterのヘッダーの使い方法を知りたい
FlutterのAppBarの使い方を忘れたので知りたい。
そこで、今回はFlutterのAppBarにおける基本的な使い方をサンプルコードとデモアプリで解説します。
不明点などありましたら、お気軽にお問い合わせ下さい。
- AppBarって何?
- AppBarの使い方
- AppBarの基本プロパティ
ちなみに、Flutterのスキルを0から効率的に伸ばす方法は、仕事として実務を経験することです。そして、最速で転職・就職・副業するには学習をどんどん進め、ポートフォリオを最優先で完成させましょう!応募できそうなFlutter案件をチェックすると必要なスキルも分かり学習に身が入ります!Flutter案件/求人の探し方はコチラで詳しく解説していますので、ご参考にして下さい。
【Flutter】AppBarとは?ヘッダーをオシャレにできる

AppBarは上のデモ画面のように、タイトルバー、ヘッダーをコントロールできるマテリアルデザインのウィジェットです。
AppBar classとは
An app bar consists of a toolbar and potentially other widgets, such as a TabBar and a FlexibleSpaceBar.
(直訳)アプリバーは、ツールバーと、TabBar や FlexibleSpaceBar などの他のウィジェットで構成されます。
引用:Flutter公式サイト「AppBar class」
【Flutter】AppBarのサンプルコードと使い方を解説
AppBar
サンプルコードは以下の通りです。コピペでそのまま使えます。
import 'package:flutter/material.dart';
void main() => runApp(AppbarDemo());
class AppbarDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('AppBarデモ'),//タイトル
centerTitle: true,//タイトルを真ん中
leading: Icon(Icons.menu),//左側アイコン
//右側アイコン:ウィジェット複数指定
actions: <Widget>[
IconButton(icon: Icon(Icons.search), onPressed: () {},),
IconButton(onPressed: () {}, icon: Icon(Icons.more_vert),),
],
backgroundColor: Colors.green,//背景色を指定
elevation: 40, // Appbar下に影を大きく指定
//AppBarの形を指定
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
bottomLeft: Radius.circular(40),
bottomRight: Radius.elliptical(90,50),
),
),
),
),
);
}
}
サンプルコードのデモ画面

AppBarの基本プロパティ
AppBarの基本プロパティをしっかり押さえておきましょう!
プロパティ | 内容 |
---|---|
title | タイトル名を指定 |
centerTitle | タイトル名の位置を指定 |
leading | 画面左側のアイコンを指定 |
actions: <Widget> | 画面右側アイコン:ウィジェットを複数指定 |
backgroundColor | 背景色を指定 |
elevation | Appbar下の影を大きく指定 |
shape | AppBarの形を指定 |
まとめ:Flutter入門者はAppBarを理解しときましょう!
今回はFlutterのAppBarにおける基本的な使い方をサンプルコードとデモ画面で解説しました。
Flutter初心者の方はAppbarはFlutterの基礎ウィジェットなのでしっかり理解しときましょう!
Flutterエンジニアになるには?
初心者が中級者レベルのFlutterエンジニアなるまでの進め方をまとめました。
Flutterの学習方法を知る

Flutter をスクールで学ぶ

Flutterの副業を探す

おまけ:Flutter入門の完全ガイド

Flutter/Dartの基礎一覧
Flutter/Dartの入門知識として押さえておきたい内容をまとめました。学習のご参考にどうぞ。
- ローカルデータベース(SQLite)
- グラフ①(fl_chart)
- グラフ②(syncfusion_flutter_charts)
- カレンダーから日付取得①(syncfusion_flutter_datepicker)
- カレンダーから日付取得②(month_picker_dialog_2)