Flutter의 앱바(AppBar) 커스터마이징

Flutter에서 AppBar 위젯은 애플리케이션의 상단에 위치하여 제목, 내비게이션 아이콘, 작업 버튼 등을 표시하는 중요한 UI 요소입니다. AppBar는 기본적인 설정만으로도 강력한 기능을 제공하지만, 다양한 커스터마이징 옵션을 통해 더욱 유연하고 멋진 디자인을 구현할 수 있습니다. 이번 글에서는 Flutter의 AppBar 위젯을 커스터마이징하는 다양한 방법에 대해 자세히 살펴보겠습니다.

1. 기본 AppBar 사용법

먼저, 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('Basic AppBar'),
        ),
        body: Center(child: Text('Hello, world!')),
      ),
    );
  }
}

 

위 코드는 기본적인 AppBar를 생성하고, 제목을 "Basic AppBar"로 설정합니다.

2. AppBar 색상 커스터마이징

AppBar의 배경색과 텍스트 색상을 변경하여 스타일을 커스터마이징할 수 있습니다.

 

AppBar(
  title: Text('Colored AppBar'),
  backgroundColor: Colors.teal,
  foregroundColor: Colors.white,
)

 

위 코드는 배경색을 teal, 텍스트 색상을 white로 설정한 AppBar를 생성합니다.

3. AppBar에 아이콘 추가

AppBar에 내비게이션 아이콘이나 작업 버튼을 추가하여 사용자 인터페이스를 더욱 풍부하게 만들 수 있습니다.

 

AppBar(
  title: Text('AppBar with Icons'),
  leading: IconButton(
    icon: Icon(Icons.menu),
    onPressed: () {
      // 메뉴 버튼 클릭 시 수행할 작업
    },
  ),
  actions: <Widget>[
    IconButton(
      icon: Icon(Icons.search),
      onPressed: () {
        // 검색 버튼 클릭 시 수행할 작업
      },
    ),
    IconButton(
      icon: Icon(Icons.more_vert),
      onPressed: () {
        // 더보기 버튼 클릭 시 수행할 작업
      },
    ),
  ],
)

 

위 코드는 왼쪽에 메뉴 아이콘을, 오른쪽에 검색 및 더보기 아이콘을 추가한 AppBar를 생성합니다.

 

 

반응형

 

 

4. AppBar에 탭 추가

AppBar에 탭을 추가하여 탭바 형태의 내비게이션을 구현할 수 있습니다.

 

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            title: Text('AppBar with Tabs'),
            bottom: TabBar(
              tabs: [
                Tab(icon: Icon(Icons.home), text: 'Home'),
                Tab(icon: Icon(Icons.search), text: 'Search'),
                Tab(icon: Icon(Icons.person), text: 'Profile'),
              ],
            ),
          ),
          body: TabBarView(
            children: [
              Center(child: Text('Home Tab')),
              Center(child: Text('Search Tab')),
              Center(child: Text('Profile Tab')),
            ],
          ),
        ),
      ),
    );
  }
}

 

위 코드는 AppBar에 탭을 추가하여 탭바 형태의 내비게이션을 구현합니다. DefaultTabController와 TabBar, TabBarView를 사용하여 각 탭에 대응하는 화면을 구성합니다.

5. AppBar에 이미지 추가

AppBar에 이미지를 추가하여 더욱 시각적으로 매력적인 상단 바를 만들 수 있습니다.

 

AppBar(
  title: Row(
    children: <Widget>[
      CircleAvatar(
        backgroundImage: NetworkImage('https://example.com/profile_image.jpg'),
      ),
      SizedBox(width: 10),
      Text('AppBar with Image'),
    ],
  ),
)

 

위 코드는 프로필 이미지를 AppBar의 제목 옆에 추가하여 시각적으로 풍부한 AppBar를 생성합니다.

6. AppBar의 높이 조정

AppBar의 높이를 조정하여 사용자 인터페이스를 커스터마이징할 수 있습니다. 이는 PreferredSize 위젯을 사용하여 구현할 수 있습니다.

 

AppBar(
  title: Text('Custom Height AppBar'),
  toolbarHeight: 80.0, // AppBar 높이 설정
)

 

위 코드는 AppBar의 높이를 80.0으로 설정하여 커스터마이징된 높이의 AppBar를 생성합니다.

7. 투명한 AppBar

투명한 배경을 가진 AppBar를 생성하여 배경 콘텐츠가 보이도록 할 수 있습니다.

 

AppBar(
  title: Text('Transparent AppBar'),
  backgroundColor: Colors.transparent,
  elevation: 0,
)

 

위 코드는 배경이 투명하고 그림자가 없는 AppBar를 생성합니다.

결론

AppBar 위젯은 Flutter 애플리케이션의 상단 바를 구성하는 데 매우 유용한 도구입니다. 기본적인 사용법부터 색상 변경, 아이콘 및 탭 추가, 이미지 삽입, 높이 조정, 투명한 배경 등 다양한 커스터마이징 옵션을 통해 사용자 인터페이스를 더욱 풍부하게 만들 수 있습니다. AppBar를 적절히 활용하여 직관적이고 효율적인 내비게이션을 제공하는 애플리케이션을 만들어보세요.