Flutter에서 AppBar 메뉴 아이콘 추가하기

Flutter에서 AppBar 메뉴 아이콘 추가하기

 

플러터에서 AppBar(Swift에서 UINavigationBar) 구성하는 방법 정리.

 

 

시작하기 전에.

이번에는 print문을 통해 콘솔에 로그를 찍어 보면서 확인하는 작업이 많았음.

콘솔창이 안보인다면, 아래 이미지에 벌레 모양 아이콘을 클릭하면 디버그 콘솔이 활성화 되고 로그를 확인할 수 있음.

실행 옆 벌레모양

 

 

코드 샘플

AppBar에 대한 간단 정리

• leading
  • AppBar의 왼쪽 영역에 위치한 위젯을 의미. 주로 메뉴 버튼(☰)을 배치함.
• actions
  • AppBar의 오른쪽 영역에 여러 개의 아이콘 버튼을 배치할 때 사용.
• IconButton
  • 클릭 가능한 아이콘 버튼 위젯. icon:으로 표시할 아이콘을 지정하고, onPressed: 안에 클릭 시 실행할 코드를 작성.
• elevation
  • AppBar의 그림자 깊이 조정 (0.0이면 그림자 없음).

import 'package:flutter/material.dart'; // 데스크탑, 앱 등에 고루 UI를 적용할 수 있게 해주는 구글이 제공해주는 패키

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      // 실질적으로 모든 앱을 감싸고 있다.
      title: 'Appbar', // 앱을 총칭하는 이름 -> 스마트 폰 앱에서 최근 사용한 앱 보여줄 때의 이름
      theme: ThemeData(primarySwatch: Colors.red // 특정색의 응용들을 기본 색상으로 지정해서 사용하겠
          ),
      home: MyPage(), // home은 앱이 실행될 때 가장먼저 보여주는 페이
    );
  }
}

class MyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('AppBar icon menu'),
        elevation: 0.0,
        leading: IconButton(
          // 간단한 위젯이나 타이틀들을 앱바의 왼쪽에 위치시키는 것을 말함
          icon: Icon(Icons.menu), // 아이콘
          onPressed: () {
            // 버튼을 눌렀을 때
            print("menu button is clicked");
          },
        ),
        actions: [ // action 속성은 복수의 아이콘 버튼 등을 오른쪽에 배치할 때
          IconButton(
            // 간단한 위젯이나 타이틀들을 앱바의 왼쪽에 위치시키는 것을 말함
            icon: Icon(Icons.shopping_cart), // 아이콘
            onPressed: () {
              // 버튼을 눌렀을 때
              print("shopping_cart is clicked");
            },
          ),
          IconButton(
            // 간단한 위젯이나 타이틀들을 앱바의 왼쪽에 위치시키는 것을 말함
            icon: Icon(Icons.search), // 아이콘
            onPressed: () {
              // 버튼을 눌렀을 때
              print("search is clicked");
            },
          )
        ],
      ),
    );
  }
}