hoony's web study

728x90
반응형

Flutter

기존 안드로이드나  애플의 햄버거 메뉴를 만들때는 많은 코드가 필요했는데 Flutter는 너무 간단히 구현이 됩니다.

Flutter에서 Drawer는 Scaffold Widget 에서 제공을 하는 기본적인 것입니다.
Flutter 사이트에서 Drawer를 설명해 놓은 링크는 아래와 같습니다.

https://flutter.dev/docs/cookbook/design/drawer

 

Add a Drawer to a screen

How to implement a Material Drawer.

flutter.dev

drawer에는 상단의 header와 ListView 로 구성이 되어있습니다.

drawer: ClipRRect(
          borderRadius: BorderRadius.circular(15.0),
         child: Drawer(
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              Container(
                height: 200.0,
                child: DrawerHeader(
                  child: Text(
                    'Sample App',
                    style: TextStyle(fontSize: 30),
                  ),
                   decoration: BoxDecoration(
                    color: Colors.blue,
                  ),
                ),
              ),
              ListTile(
                leading: Icon(
                  Icons.favorite,
                  color: Colors.deepOrange,
                ),
                title: Text('즐겨찾기'),
                onTap: () {
                  print('즐겨찾기 click');
                },
              ),
              Divider(
                height: 10,
              ),
              ListTile(
                leading: Icon(
                  Icons.add_alert_sharp,
                  color: Colors.blue,
                ),
                title: Text('공지사항'),
                onTap: () {
                  print('공지사항 click');
                },
              ),
              Divider(
                height: 10,
              ),
              ListTile(
                leading: Icon(Icons.app_settings_alt_outlined),
                title: Text('환경설정'),
                onTap: () {
                  print('환경설정 click');
                },
              )
            ],
          ),
        ),
      ),

간단하게 햄버거 메뉴를 붙여보았습니다.
도움이 되시길 바랍니다. 

728x90

공유하기

facebook twitter kakaoTalk kakaostory naver band
loading