[플러터] app bar에 메뉴 아이콘 넣기

◾ 완성 모습

 

 

 

◾ code 

class Grade extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.amber[800],
        appBar: AppBar(
          title: Text('BBANTO'),
          centerTitle: true,
          backgroundColor: Colors.amber[700],
          elevation: 0.0,
          //left side
          leading: IconButton(
            icon: Icon(Icons.menu),
            onPressed: () {
              print('menu button is clicked');
            },
          ),
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.shopping_cart),
              onPressed: () {
                print('shopping cart button is clicked');
              },
            ),
          ],
        ),
}

 

Scaffold 에 AppBar를 만들어 준다

- title : appbar에 들어갈 타이틀이다. 

- centerTitle : 은 타이틀을 중심으로 보내준다. 

- backgroundColor: 배경색을 넣어줄 수 있다. 

- elevation : appbar와 바디간의 그림자 경계를 없애주는 것 

- leading: 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때

- IconButton : 아이콘을 불러오기 위해서 넣는다~

- icon: 말그대로~ 아이콘을 불러올 수 있다

- onPressed : 아이콘 버튼을 썼을 때, 아이콘뿐만아니라 아이콘이 어떻게 동작할지도 명시해줘야한다. 함수 형태로 일반버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의한다. 

- actions: 아이콘 버튼 등을 여러개 넣을 때~ 오른쪽 배치할 때 쓴다

 

 

 

 

 

 

 

학습자료

- 코딩셰프 플러터 순한맛 강의 https://youtu.be/ze0t5gWKBvE