はじめに
Flutterで、例えばアイコンの下に文字を入れるなど、Drawerのアイコンをカスタマイズしたいときがあります。
こうしたときは、次のようにScaffoldStateを使うことで、カスタマイズできます。(ここでは、右側にボタンを配置するendDrawerで解説しています)
実装
class _HomePageState extends State<HomePage> {
@override
void initState() {
super.initState();
}
final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
@override
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
actions: <Widget>[
// カスタムしたボタン
InkWell(
onTap: () => _scaffoldKey.currentState.openEndDrawer(),
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Icon(Icons.menu),
const Text(
'メニュー',
style: TextStyle(
fontSize: 14,
),
),
],
),
),
],
),
endDrawer: Drawer(),
);
}
}
ScaffoldにGlobalKeyを指定して、Scaffoldの状態を保持しているScaffoldStateを参照できるようにします。
Scaffoldのactionsにボタンを作成し、 タップ時に _scaffoldKey.currentState.openEndDrawer() でドロワーを開けるようにします。
こうすると、本来endDrawerにDrawerを指定すると生成されるボタンが生成されず、代わりにactionsで生成したボタンを通じてドロワーを開けるようになります。