[Flutter] AppBar 사용하기

https://api.flutter.dev/flutter/material/AppBar-class.html

AppBar class - material library - Dart API

 

 

앱 상단에 위치하는 부분을 AppBar라고 한다. 보통은 좌측상단에 메뉴버튼이나 우측 상단에 여러가지 상호작용을 할 수 있는 아이콘이 배치돼 사용된다.

 

AppBar

앱 상단에 위치하는 부분을 AppBar라고 한다. 보통은 좌측상단에 메뉴버튼이나 우측 상단에 여러가지 상호작용을 할 수 있는 아이콘이 배치돼 사용된다.

Flutter 문서에 따르면 AppBar는 leading, title, actions, flexibleSpace, bottom과 같이 크게 다섯가지 종류로 구분된다.

 

leading

왼쪽에 넣을 수 있는 아이콘이며 주로 메뉴로 사용된다.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        leading:
            IconButton(onPressed: () {}, icon: Icon(Icons.menu)), // 왼쪽 메뉴버튼
      ),
    ));
  }

leading

 

title

앱이나 페이지의 제목에 해당하는 텍스트 요소이다.

centerTitle속성을 True로 할 경우 타이틀 요소를 가운데로 정렬시킬 수 있다.

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        leading:
            IconButton(onPressed: () {}, icon: Icon(Icons.menu)), // 왼쪽 메뉴버튼
        title: Text('타이틀'), // 타이틀
        centerTitle: true, // 타이틀 텍스트를 가운데로 정렬 시킴
      ),
    ));
  }

 

title

 

actions

actions는 우측 상단에 배치할 기능적인 요소의 아이콘들을 리스트의 형태로 배치한다.

 

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        leading:
            IconButton(onPressed: () {}, icon: Icon(Icons.menu)), // 왼쪽 메뉴버튼
        title: Text('타이틀'), // 타이틀
        centerTitle: true, // 타이틀 텍스트를 가운데로 정렬 시킴
        actions: [
          // 우측의 액션 버튼들
          IconButton(onPressed: () {}, icon: Icon(Icons.refresh)),
          IconButton(onPressed: () {}, icon: Icon(Icons.notifications))
        ],
      ),
    ));
  }

actions

 

기타 요소

backgroundColor : AppBar의 배경 색상

foregroundColor : AppBar 속 요소들의 색상

elevation : AppBar의 그림자 깊이

@override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        leading:
            IconButton(onPressed: () {}, icon: Icon(Icons.menu)), // 왼쪽 메뉴버튼
        title: Text('타이틀'), // 타이틀
        centerTitle: true, // 타이틀 텍스트를 가운데로 정렬 시킴
        actions: [
          // 우측의 액션 버튼들
          IconButton(onPressed: () {}, icon: Icon(Icons.refresh)),
          IconButton(onPressed: () {}, icon: Icon(Icons.notifications))
        ],
        backgroundColor: Colors.red, // AppBar의 배경색상
        foregroundColor: Color.fromARGB(255, 255, 214, 228), // AppBar속 요소들의 색상
        elevation: 10, // AppBar의 그림자 깊이
      ),
    ));
  }

 

 

 

+ 레이아웃 혼자서도 잘짜는법

1. 예시(참고) 디자인 준비

2. 네모로 보이는건 네모 그리기

3. 바깥 네모부터 하나하나 위젯으로 만들기

4. 마무리 디자인(padding, color 등)

https://youtu.be/ShmXbPpmIMU?t=526