플러터 강좌: 8.3 AppBar 꾸미기

플러터(Flutter)는 구글에서 개발한 UI 툴킷으로, 단일 코드베이스로 iOS와 Android에서 고품질의 애플리케이션을 만들 수 있도록 해줍니다. 플러터의 강력한 기능 중 하나는 사용자 인터페이스(UI)를 쉽게 커스터마이징할 수 있다는 점입니다. 본 강좌에서는 플러터의 AppBar를 꾸미는 다양한 방법들에 대해 알아보겠습니다.

AppBar란?

AppBar는 플러터 애플리케이션의 상단에 나타나는 도구 모음으로, 제목, 메뉴, 탐색 아이콘 등을 포함하는 기본적인 UI 요소입니다. 사용자가 앱을 탐색하는 동안 항상 화면 상단에 머물며, 애플리케이션의 전반적인 테마와 스타일에 맞게 조정할 수 있습니다.

기본 AppBar 생성하기

기본적으로 AppBar는 Scaffold 위젯 내에 배치됩니다. 아래는 기본 AppBar를 추가한 간단한 플러터 애플리케이션의 코드입니다:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('기본 AppBar'),
        ),
        body: Center(child: Text('안녕하세요!')),
      ),
    );
  }
}

AppBar 색상 변경하기

AppBar의 색상을 변경하는 것은 앱의 theme을 설정할 때 매우 중요합니다. 아래 예제에서는 backgroundColor 속성을 사용하여 AppBar의 배경색을 변경하는 방법을 보여줍니다:

appBar: AppBar(
  title: Text('색상 변경된 AppBar'),
  backgroundColor: Colors.blueAccent,
),

이렇게 설정하면 AppBar의 배경색이 blueAccent로 변경됩니다.

AppBar에 아이콘 추가하기

AppBar에 아이콘을 넣어 앱의 기능을 더욱 직관적으로 만들 수 있습니다. 아이콘 버튼은 actions 속성을 사용하여 추가할 수 있습니다. 아래 예제에서는 ‘검색’ 아이콘을 추가하고 클릭 시 동작을 정의합니다:

appBar: AppBar(
  title: Text('아이콘 추가된 AppBar'),
  actions: [
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // 검색 아이콘 클릭 시 동작
        print('검색 아이콘 클릭됨');
      },
    ),
  ],
),

AppBar 제목 스타일 변경하기

AppBar의 제목 스타일을 변경하여 더 많은 사용자 정의를 할 수 있습니다. 아래 코드는 제목의 글꼴 크기와 색상을 변경하는 방법을 보여줍니다:

appBar: AppBar(
  title: Text(
    '스타일 변경된 제목',
    style: TextStyle(
      fontSize: 20,
      color: Colors.white,
      fontWeight: FontWeight.bold,
    ),
  ),
),

Custom AppBar 만들기

기본 AppBar 기능을 넘어 사용자 정의 AppBar를 만들 수 있습니다. Flutter의 PreferredSizeWidget을 구현하여 원하는 디자인의 AppBar를 만들 수 있습니다. 아래는 간단한 사용자 정의 AppBar의 예입니다:

class CustomAppBar extends StatelessWidget implements PreferredSizeWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.blue,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            Text('사용자 정의 AppBar', style: TextStyle(color: Colors.white, fontSize: 20)),
            Icon(Icons.settings, color: Colors.white),
          ],
        ),
      ),
    );
  }

  @override
  Size get preferredSize => Size.fromHeight(56.0);
}

이 사용자 정의 AppBar를 사용하기 위해서는 Scaffold의 appBar 속성에 부여하면 됩니다:

appBar: CustomAppBar(),

AppBar에서 메뉴 버튼 추가하기

AppBar에 메뉴 버튼을 추가하면 사용자가 더 많은 옵션을 선택할 수 있습니다. 아래 코드는 메뉴를 추가하고 사용자가 클릭할 수 있는 여러 항목을 포함한 예제입니다:

appBar: AppBar(
  title: Text('메뉴 버튼 추가된 AppBar'),
  actions: [
    PopupMenuButton(
      onSelected: (String result) {
        print('선택된 메뉴: $result');
      },
      itemBuilder: (BuildContext context) => >[
        const PopupMenuItem(
          value: '옵션 1',
          child: Text('옵션 1'),
        ),
        const PopupMenuItem(
          value: '옵션 2',
          child: Text('옵션 2'),
        ),
      ],
    ),
  ],
),

AppBar 투명 배경으로 만들기

특정 앱에서는 AppBar의 배경을 투명하게 설정하여 아래의 내용을 강조하는 경우가 있습니다. 이런 경우에는 AppBar의 backgroundColor 속성에 Colors.transparent를 사용할 수 있습니다:

appBar: AppBar(
  title: Text('투명 AppBar'),
  backgroundColor: Colors.transparent,
),

AppBar와 이미지 사용하기

AppBar에 배경 이미지 또는 배경색과 텍스트를 조합하여 디자인의 다양성을 높일 수 있습니다. 아래는 AppBar의 배경을 이미지로 설정하는 방법입니다:

appBar: AppBar(
  title: Text('이미지 배경 AppBar'),
  flexibleSpace: Container(
    decoration: BoxDecoration(
      image: DecorationImage(
        image: NetworkImage('이미지 URL'),
        fit: BoxFit.cover,
      ),
    ),
  ),
),

위의 코드에 있는 ‘이미지 URL’ 부분에는 사용할 이미지의 링크를 넣으면 됩니다.

마무리

이번 강좌에서는 플러터의 AppBar를 꾸미고 사용자 정의하는 다양한 방법에 대해 알아보았습니다. AppBar는 애플리케이션의 전반적인 사용자 경험에 큰 영향을 미치므로, 필요에 따라 다양한 스타일로 꾸미는 것이 중요합니다. 각 예제를 통해 다양한 기능을 실험해보고 자신만의 스타일이 반영된 AppBar를 만들어보세요.

앞으로도 다양한 플러터 관련 주제를 통해 더욱 깊이 있는 내용을 제공할 예정입니다. 궁금한 점이나 추가적으로 다루었으면 하는 주제가 있다면 댓글로 남겨주세요. 감사합니다!