flutterで再利用可能なAppbarを作成する

こんにちは。

FlutterでAppbarを作成するのはすごく簡単に出来ますが、ページごとに同じ処理を書くのは良くないので再利用可能なAppbarを作成します。

Appbarとは↓こんなものです。

7～9行目を入れたらAppbarが作成できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('Home'),
      ),
    );
  }
}

ベースとなるAppbarを作成する

ベースとなるAppbarは以下のようにします。

baseappbar.dartというファイルを作成して以下を入れます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import 'package:flutter/material.dart';

class BaseAppBar extends StatelessWidget implements PreferredSizeWidget {
  final Color backgroundColor = const Color(0xFFFF7235);
  final Text title;
  final AppBar appBar;
  final List<Widget> widgets;

  const BaseAppBar({Key key, this.title, this.appBar, this.widgets})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: title,
      backgroundColor: backgroundColor,
      leading: GestureDetector(
        onTap: () { },
        child: Icon(
          Icons.menu,
        ),
      ),
      centerTitle: true,
      actions: widgets,
    );
  }

  @override
  Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}

BaseAppbarの呼び出し方(基本)

呼び出し方は以下のようにします。2行目でbaseappbar.dartをimportします。8～11行目でBaseAppBarを呼び出します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
import 'package:flutter/material.dart';
import '../baseappbar.dart';

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BaseAppBar(
        title: Text('Home'),
        appBar: AppBar(),
      ),
      body: Center(
        child: Text('Home'),
      ),
    );
  }
}

BaseAppbarの呼び出し方(応用)

全部同じAppbarというわけにはいかないので、ある画面では右側にアクションを追加してみます。

右側にアクションを追加したい時は以下のように呼び出します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
import 'package:flutter/material.dart';
import '../baseappbar.dart';

class Settings extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: BaseAppBar(
        title: Text('Settings'),
        appBar: AppBar(),
        widgets: <Widget>[
          Padding(
            padding: const EdgeInsets.only(right: 0.5),
            child: IconButton(
              icon: Icon(Icons.edit),
              onPressed: () {},
            ),
          ),
          Padding(
            padding: const EdgeInsets.only(right: 0.5),
            child: IconButton(
              icon: Icon(Icons.add),
              onPressed: () {);  
              },
            ),
          )
        ],
      ),
      body:
      ・・・・
}