[Flutter] flutter 입문 2. AppBar class

AppBar 클래스

---

개요

AppBar 클래스는 앱의 상단 바를 구성하는 역할을 한다. AppBar는 다음과 같은 모양이다.^[각주:1]

맨 위쪽엔 leading, title, actions 위젯이 있다. leading widget은 맨 앞에 놓일 위젯, title은 위젯에 들어갈 문구를 결정한다. actions 자리에는 보통 간단한 아이콘으로 기능을 추가하는 데에 사용된다.

 

중간에는 자유롭게 늘려 사용할 수 있는 공간인 flexibleSpace, 아래에는 bottom 위젯을 추가할 수 있다. 보통 다음과 같이 사용된다.

위의 앱에서는 title에 AppBar Demo라고 출력되고, actions에 아이콘이 추가되어 간단한 기능을 하는 예시이다.

---

actions

 

 

예로 AppBar에 돋보기 아이콘과 알림 아이콘을 추가해보도록 하자. 

 

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: MyAppBar(),
    );
  }

이와 같이 앱에 상단 바가 추가된 것을 확인할 수 있다. 

 

아래에 MyAppBar 메소드를 따로 만든다.

 

상단바에 자명종 모양과 돋보기 모양을 추가하기 위해서 Icons 위젯을 사용한다.

 

아이콘 위젯은 cupertino 아이콘과 material 아이콘이 있다. 둘 중 취향에 맞네 추가하여 사용하면 된다. 이 예제에서는 material 아이콘을 사용한다.

 

AppBar _MyAppBar() => AppBar(
    title: const Text(
      "MyText",
     style: TextStyle(color:Colors.black),
     ),
    backgroundColor: Colors.white,
    actions: [
      Icon(
        Icons.add_alert,
        color:Colors.black,
        ),
      SizedBox(width:16),
      Icon(
        Icons.search,
        color:Colors.black,
      ),
      SizedBox(width:16),
    ],
  );

 

title에 텍스트를 추가하고 TextStyle로 검은색으로 변경한다.

 

backgroundColor는 흰색으로 설정하고, 

 

actions에는 두 개의 아이콘을 추가한다.

 

Icons.add_alert 아이콘과 Icons.search 아이콘을 추가하는데, 그냥 이렇게 하면 두 아이콘이 너무 붙어서 출력되므로 중간에 SizedBox를 넣으면 다음과 같은 결과를 얻을 수 있다.

 

 

---

References

1. https://api.flutter.dev/flutter/material/AppBar-class.html [본문으로]