AppBarを表示

このページのゴール

  • AppBarを表示するためのWidgetの扱いを知る

AppBar

Androidでよく使われるアプリバー・アクションバーを表示するには AppBar Widgetを使えばOKです 👍
基本的には Scaffold Widgetと組み合わせて使います。

Scaffold(
  appBar: AppBar(
    // 左側のアイコン
    leading: Icon(Icons.arrow_back),
    // タイトルテキスト
    title: Text('Hello'),
    // 右側のアイコン一覧
    actions: <Widget>[
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.favorite),
      ),
      IconButton(
        onPressed: () {},
        icon: Icon(Icons.more_vert),
      ),
    ],
  ),
)

使ってみる

実際に使ってみるとこんな感じになります。
👇 色々と書き換えて動かしてみましょう 💪💪💪

この他にも、色々と機能はあるので気になるときは公式ドキュメントを見てみましょう 👀

まとめ

  • AppBarを表示するには AppBar Widgetを使えばOK

次は、状態を持ったWidgetを紹介していきます 💪💪💪

参考情報

リストを表示

状態を持ったWidget