UserAccountsDrawerHeader の使い方

UserAccountsDrawerHeader の使い方

Flutter でマテリアルデザインに沿ってDrawerのヘッダとしてユーザ情報を表示させるためのWidgetです。

このエントリーをはてなブックマークに追加

使い方

一番簡単な使い方は、Scaffolddrawerに下記を設定することで、Drawerにユーザ情報のヘッダを付けることができます。

Drawer(
  child: UserAccountsDrawerHeader(
    accountName: Text("User Name"),
	accountEmail: Text("User Email"),
	currentAccountPicture: CircleAvatar(
	  backgroundColor: Colors.white,
	  backgroundImage: NetworkImage(userAvatarUrl),
	),
  ),
)

上記の例ではCircleAvatarNetworkImageも使用してユーザのアバターを表示しています。実際の画面は次のようになります。

複数アカウントを持っている場合、otherAccountsPicturesプロパティで他のアカウントを表示させることもできます。

Drawer(
  child: UserAccountsDrawerHeader(
    accountName: Text("User Name"),
	accountEmail: Text("User Email"),
	currentAccountPicture: CircleAvatar(
	  backgroundColor: Colors.white,
	  backgroundImage: NetworkImage(userAvatarUrl),
	),
	otherAccountsPictures: [
	  CircleAvatar(
	    backgroundColor: Colors.white,
	    backgroundImage: NetworkImage(userAvatarUrl),
	  ),
	  CircleAvatar(
	    backgroundColor: Colors.white,
	    backgroundImage: NetworkImage(userAvatarUrl),
	  ),
	  CircleAvatar(
	    backgroundColor: Colors.white,
	    backgroundImage: NetworkImage(userAvatarUrl),
	  ),
    ],
  ),
)

Drawerのヘッダにユーザ情報を載せない場合やもっといろんな情報を載せたい場合は、より自由度の高いDrawerHeaderが便利です。

コンストラクタ

UserAccountsDrawerHeader({
	Key key,
	Decoration decoration,
	EdgeInsetsGeometry margin: const EdgeInsets.only(bottom: 8.0),
	Widget currentAccountPicture,
	List<Widget> otherAccountsPictures,
	@required Widget accountName,
	@required Widget accountEmail,
	VoidCallback onDetailsPressed
})

必須な引数はaccountNameaccountEmailです。

childを指定できないので、背景を変更できる程度でカスタマイズはほとんどできません。自分でカスタマイズをしたい場合はDrawerHeaderを使ってください。

プロパティ

  • accountNameWidget

    ユーザのアカウント名を表示します。

  • accountEmailWidget

    ユーザのメールアドレスを表示します。

  • currentAccountPictureWidget

    ユーザのアカウントの画像を表示します。通常CircleAvatarを使います。

  • decorationDecoration

    ヘッダの背景を指定できます。何も指定しない場合は現在のテーマのprimaryColorが設定されたBoxDecorationが表示されます。

  • marginEdgeInsetsGeometry

    ヘッダの周りのマージンを指定します。指定しない場合const EdgeInsets.only(bottom: 8.0)が指定されています。

  • onDetailsPressedVoidCallback

    アカウント名やメールアドレスが表示されている箇所をタップすると呼ばれるコールバックを指定できます。

  • otherAccountsPicturesList<Widget>

    ユーザの他のアカウント画像を指定します。右上の並んで表示されます。通常CircleAvatarを使います。

Flutter 公式ドキュメント

UserAccountsDrawerHeader class

このエントリーをはてなブックマークに追加