[flutter] 앱바 좌측, 우측에 아이콘 및 아이콘버튼 생성하기

앱바에 햄버거 바와 같은 메뉴 버튼이나 검색 버튼 등을 넣고 싶을 때가 있습니다. 앱바 우측 또는 좌측에 여러 아이콘 버튼 넣는 방법을 알아보겠습니다.

 

​

▣ leading과 actions을 이용한 AppBar에 아이콘 추가

왼쪽에 아이콘 버튼을 추가하고 싶다면 AppBar 인자로 leading을 넣어 주면 됩니다. 우측에 아이콘 버튼을 넣고 싶다면 AppBar 인자로 actions을 넣어 주면 됩니다.

 

아래 코드를 확인해 보면 leading인자에 IconButton을 넣고 여기서 버튼을 눌렀을 때 실행할 것과 Icon종류를 선택할 수 있습니다. 반대로 우측에 아이콘 버튼을 넣고 싶다면 leading대신 actions인자를 이용하면 됩니다.

appBar: AppBar(
  title: Text('나의 어플'),
  centerTitle: true,
  backgroundColor: Colors.deepOrangeAccent[200],
  elevation: 0.0,
  leading: IconButton(
    onPressed: () {
      print('abc');
    },
    icon: Icon(Icons.menu),
  ),
  actions: [
    Icon(Icons.access_alarm),
    Icon(Icons.shopping_cart),
  ],
),

 

앱바_아이콘버튼생성결과이미지

 

​