사소한것부터 바꾸자

Drawer 본문

앱개발/flutter

Drawer

뷰베 2022. 3. 10. 15:55
  • 좌측 drawer 메뉴 부분 
    drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/3.jpg'),
                // backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
              ),
              accountName: Text('BYUBE'),
              accountEmail: Text('jeffkim@korfinholdings.co.kr'),
            )
          ],
        ),
      ),

  • 위에 헤더 부분 편집 라운드 효과 및 정보 펼치기 버튼 추가 ( 현재는 console 에 글씨만 출력 되게 입력)
   drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/3.jpg'),
                // backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
              ),
              accountName: Text('BYUBE'),
              accountEmail: Text('kangjunne@naver.com'),
              onDetailsPressed: (){
                print('아래로 펼쳐라');
              }, //클리후 아래로 펼쳐지기
              decoration: BoxDecoration(
                color: Colors.purple[200],
                borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(40.0),
                  bottomRight: Radius.circular(40.0)
                )
              ),
            )
          ],
        ),
      ),

  • ListTile 
    drawer: Drawer(
        child: ListView(
          padding: EdgeInsets.zero,
          children: <Widget>[
            UserAccountsDrawerHeader(
              currentAccountPicture: CircleAvatar(
                backgroundImage: AssetImage('assets/3.jpg'),
                // backgroundColor: Colors.white, // png 파일일 경우 백그라운드 컬러를 설정 가능
              ),
              otherAccountsPictures: [
                CircleAvatar(
                  backgroundImage: AssetImage('assets/1.jpg'),
                ),
              ],
              accountName: Text('BYUBE'),
              accountEmail: Text('kangjunne@naver.com'),
              onDetailsPressed: () {
                print('아래로 펼쳐라');
              }, //클리후 아래로 펼쳐지기
              decoration: BoxDecoration(
                  color: Colors.purple[200],
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(40.0),
                      bottomRight: Radius.circular(40.0))),
            ),
            ListTile(
              leading: Icon(
                Icons.home,
                color: Colors.grey[850],
              ),
              title: Text('Home'),
              onTap: (){ //tap 했을때 기능
                print('Home is clicked');
              },
              trailing: Icon(Icons.add), // + 아이콘 추가
            ),
            ListTile(
              leading: Icon(
                Icons.settings,
                color: Colors.grey[850],
              ),
              title: Text('Setting'),
              onTap: (){ //tap 했을때 기능
                print('Setting is clicked');
              },
              trailing: Icon(Icons.add), // + 아이콘 추가
            ),
            ListTile(
              leading: Icon(
                Icons.question_answer,
                color: Colors.grey[850],
              ),
              title: Text('Q&A'),
              onTap: (){ //tap 했을때 기능
                print('Q&A is clicked');
              },
              trailing: Icon(Icons.add), // + 아이콘 추가
            ),
          ],
        ),
      ),

반응형
Comments