[Flutter] endDraw + AppBar actions 함께 쓰기

endDraw를 쓰고 appbar actions에서 action들을 추가하면 endDraw가 안보이게 된다.

 

 

그래서 찾아낸 방법은 Scaffold를 커스터마이징 하는 것!

class CustomScaffold extends Scaffold {
  static GlobalKey<ScaffoldState> _keyScaffold = GlobalKey();

  CustomScaffold({
    AppBar appBar,
    Widget body,
    Widget floatingActionButton,
    FloatingActionButtonLocation floatingActionButtonLocation,
    FloatingActionButtonAnimator floatingActionButtonAnimator,
    List<Widget> persistentFooterButtons,
    Widget drawer,
    Widget endDrawer,
    Widget bottomNavigationBar,
    Widget bottomSheet,
    Color backgroundColor,
    bool resizeToAvoidBottomPadding = true,
    bool primary = true,
  }) : super(
          key: _keyScaffold,
          appBar: endDrawer != null &&
                  appBar.actions != null &&
                  appBar.actions.isNotEmpty
              ? _buildEndDrawerButton(appBar)
              : appBar,
          body: body,
          floatingActionButton: floatingActionButton,
          floatingActionButtonLocation: floatingActionButtonLocation,
          floatingActionButtonAnimator: floatingActionButtonAnimator,
          persistentFooterButtons: persistentFooterButtons,
          drawer: drawer,
          endDrawer: endDrawer,
          bottomNavigationBar: bottomNavigationBar,
          bottomSheet: bottomSheet,
          backgroundColor: backgroundColor,
          primary: primary,
        );

  static AppBar _buildEndDrawerButton(AppBar myAppBar) {
    myAppBar.actions.add(IconButton(
        icon: Icon(Icons.menu),
        onPressed: () => !_keyScaffold.currentState.isEndDrawerOpen
            ? _keyScaffold.currentState.openEndDrawer()
            : null));
    return myAppBar;
  }
}

여기서 endDraw와 actions가 같이 사용되면, appbar에 iconbutton을 추가해 endDrawer 역할을 하게끔 한다.

 

 

 

사용법은 아래와 같다.

@override
  Widget build(BuildContext context) {
    return CustomScaffold(
      endDrawer: SideNav(),
      appBar: AppBar(
        iconTheme: IconThemeData(color: Colors.black),
        backgroundColor: Colors.white,
        title: Logo(),
        actions: [
          ...,
        ],
      ),
      body: body,
    );
  }

 

 

iconTheme: IconThemeData(color: Colors.black) 에서 색상을 지정해주면 endDraw 아이콘 색상이 변경된다.