Flutter AppBar

`AppBar`는 Flutter에서 화면 상단에 표시되는 제목 바를 제공하는 위젯입니다. `AppBar`는 기본적인 타이틀, 로고, 액션 아이콘 등을 포함할 수 있으며, 복잡한 레이아웃도 지원합니다. 주로 `Scaffold` 위젯의 `appBar` 속성에 사용됩니다.

주요 속성

– title: 앱바의 제목을 설정합니다. 보통 `Text` 위젯을 사용합니다.
– leading: 앱바의 왼쪽에 표시되는 위젯을 설정합니다. 보통 메뉴 버튼이나 뒤로 가기 버튼으로 사용됩니다.
– actions: 앱바의 오른쪽에 표시되는 위젯 목록을 설정합니다. 보통 아이콘 버튼들이 사용됩니다.
– backgroundColor: 앱바의 배경 색상을 설정합니다.
– elevation: 앱바의 그림자 깊이를 설정합니다.
– bottom: 앱바의 하단에 추가적인 위젯을 배치합니다. 보통 `TabBar`와 함께 사용됩니다.
– centerTitle: 제목을 중앙에 배치할지 여부를 설정합니다. (iOS 스타일)
– flexibleSpace: 앱바 뒤에 배치할 위젯을 설정합니다. 스크롤 효과 등을 줄 때 사용합니다.

기본 사용 예제

간단한 `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('Flutter AppBar Example'),
          backgroundColor: Colors.blue,
          elevation: 4.0,
          centerTitle: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                // 검색 아이콘 클릭 시 수행할 작업
                print('Search icon clicked');
              },
            ),
            IconButton(
              icon: Icon(Icons.more_vert),
              onPressed: () {
                // 더보기 아이콘 클릭 시 수행할 작업
                print('More icon clicked');
              },
            ),
          ],
        ),
        body: Center(
          child: Text('Hello, AppBar!'),
        ),
      ),
    );
  }
}

코드 설명
– title 사용:
  – `AppBar`의 `title` 속성에 `Text` 위젯을 지정하여 앱바의 제목을 설정합니다.

– backgroundColor 사용:
  – `AppBar`의 `backgroundColor` 속성에 색상을 지정하여 배경 색상을 설정합니다.

– elevation 사용:
  – `AppBar`의 `elevation` 속성에 값을 지정하여 그림자 깊이를 설정합니다.

– centerTitle 사용:
  – `AppBar`의 `centerTitle` 속성에 `true`를 설정하여 제목을 중앙에 배치합니다.

– actions 사용:
  – `AppBar`의 `actions` 속성에 `IconButton` 위젯 목록을 지정하여 오른쪽에 아이콘 버튼을 추가합니다.
  – 각 `IconButton`에 `onPressed` 콜백을 지정하여 아이콘 버튼 클릭 시 수행할 작업을 설정합니다.

고급 사용 예제

`AppBar`의 다양한 속성을 사용하여 복잡한 레이아웃을 구성하는 예제를 보겠습니다.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter AppBar Example'),
        leading: IconButton(
          icon: Icon(Icons.menu),
          onPressed: () {
            // 메뉴 아이콘 클릭 시 수행할 작업
            print('Menu icon clicked');
          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              // 검색 아이콘 클릭 시 수행할 작업
              print('Search icon clicked');
            },
          ),
          IconButton(
            icon: Icon(Icons.more_vert),
            onPressed: () {
              // 더보기 아이콘 클릭 시 수행할 작업
              print('More icon clicked');
            },
          ),
        ],
        flexibleSpace: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.blue, Colors.purple],
              begin: Alignment.topLeft,
              end: Alignment.bottomRight,
            ),
          ),
        ),
        bottom: TabBar(
          tabs: [
            Tab(icon: Icon(Icons.home)),
            Tab(icon: Icon(Icons.star)),
            Tab(icon: Icon(Icons.person)),
          ],
        ),
      ),
      body: Center(
        child: Text('Hello, AppBar!'),
      ),
    );
  }
}

코드 설명
– leading 사용:
  – `AppBar`의 `leading` 속성에 `IconButton`을 지정하여 왼쪽에 메뉴 아이콘을 추가합니다.
  – `onPressed` 콜백을 지정하여 메뉴 아이콘 클릭 시 수행할 작업을 설정합니다.

– flexibleSpace 사용:
  – `AppBar`의 `flexibleSpace` 속성에 `Container`를 지정하여 앱바 뒤에 그라데이션 배경을 추가합니다.
  – `BoxDecoration`과 `LinearGradient`를 사용하여 그라데이션을 설정합니다.

– bottom 사용:
  – `AppBar`의 `bottom` 속성에 `TabBar`를 지정하여 앱바 하단에 탭바를 추가합니다.
  – `TabBar`의 `tabs` 속성에 탭 항목들을 지정합니다.

이 예제는 `AppBar` 위젯의 다양한 속성을 사용하여 복잡한 레이아웃을 구성하는 방법을 보여줍니다. `AppBar`는 Flutter에서 매우 유용한 위젯으로, 앱의 상단바를 손쉽게 구성할 수 있도록 도와줍니다.