[플러터 개발] Flutter - 나만의 커스텀 앱바 만들어보기(AppBar)

안녕하세요! 오늘은 나만의 앱바를 만들어보는 시간을 가져보려고 합니다!

​

앱바는 메인 앱바, 뒤로 가기가 있는 서브 앱바를 만들어볼게요!

 

디렉터리 생성

우선 디렉터리와 dart 파일들을 만들어볼까요?

우선 디렉터리와 파일을 설명해 드릴게요.

screen 디렉터리 : 페이지들을 저장하는 폴더

​main_screen.dart : 메인 페이지의 코드를 작성할 파일

sub_screen.dart : 서브 페이지의 코드를 작성할 파일

widget 디렉터리 : 커스텀 위젯들을 저장하는 폴더

appbar 디렉터리 : 커스텀 앱바들을 저장하는 폴더

main_app_bar.dart : 메인 앱바의 코드를 작성할 파일

sub_app_bar.dart : 서브 앱바의 코드를 작성할 파일

 

이제 파일 하나씩 파고 들어가 볼까요??

​

우선 앱바들부터 설명해 드릴게요!

 

코드 설명 : 메인 앱바

main_app_bar.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class MainAppBar extends StatelessWidget {
  const MainAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration( //앱바와 페이지의 구분을 주기 위해 BoxShadow로 그림자 만들어서 사용.
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              blurRadius: 6,
            ),
          ],
        ),
        child: Text(
          '메인 페이지 앱바',
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

앱바들도 커스텀으로 만들기 때문에 StatelessWidget 형태를 extends 받습니다. (StateFulWidget 도 가능해요!)

앱바 안에 들어가 있는 Text 위젯을 이미지로 바꾸거나, 다른 위젯으로도 바꿀 수 있습니다.

저는 보통 앱 로고를 이미지로 많이 넣는 편입니다.

 

코드 설명 : 서브 앱바

sub_app_bar.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SubAppBar extends StatelessWidget {
  const SubAppBar({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration( //앱바와 페이지의 구분을 주기 위해 BoxShadow로 그림자 만들어서 사용.
          color: Colors.white,
          boxShadow: [
            BoxShadow(
              color: Colors.black26,
              blurRadius: 6,
            ),
          ],
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: [
            IconButton( // 뒤로 가는 버튼 구현
              onPressed: () {
                Navigator.pop(context);
              },
              icon: Icon(Icons.arrow_back, color: Colors.black87, size: 30), // 뒤로가기 아이콘 구현
            ),
            Text(
              '서브 페이지 앱바',
              style: TextStyle(fontSize: 20),
            ),
            SizedBox(width: 30),
          ],
        ),
      ),
    );
  }
}

메인 앱바와 거의 비슷하지만 Row 위젯을 통해 Text 위젯뿐만 아니라 뒤로 가기 IconButton 위젯을 만들어서 뒤로 가기 기능을 구현했습니다.

 

코드 설명 : 메인 화면

main_screen.dart

import 'package:custom_appbar/screen/sub_screen.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import '../widget/appbar/main_app_bar.dart';

class MainScreen extends StatelessWidget {
  const MainScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea( // 앱바가 이쁘게 자리 잡게 화면 틀을 잡아준다.
      child: Scaffold(
        appBar: PreferredSize( // AppBar 클래스는 명시적으로 너비와 높이를 설정할 수 있는 PreferredSize 위젯을 상속 받는다.
          preferredSize: Size.fromHeight(60), // 앱바 높이 조절
          child: MainAppBar(), // 앱바 적용
        ),
        body: Container(
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          child: ElevatedButton(
            onPressed: () {
              // 버튼을 눌렀을 때, 서브 페이지로 이동하는 기능 구현
              Navigator.push(
                context,
                MaterialPageRoute(builder: (context) => const SubScreen()),
              );
            },
            child: Text('서브 페이지로 이동'),
          ),
        ),
      ),
    );
  }
}

다른 페이지들과 같이 코드를 만들어나가지만, 다른 점은 Scaffold 위젯에 appBar: 기능을 통해 앱바를 구현하는 점입니다.

appBar: 에서 커스텀 앱바를 사용할 때는 PreferredSize 위젯을 사용하여 크기를 조절해 줍니다.

PreferredSize 안에 있는 child: 에 구현한 커스텀 앱바를 넣습니다.

서브 페이지의 뒤로 가기 버튼 기능을 보기 위해 서브 페이지로 이동하는 버튼을 하나 넣어줬습니다.

 

코드 설명 : 서브 화면

sub_screen.dart

import 'package:custom_appbar/widget/appbar/sub_app_bar.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

class SubScreen extends StatelessWidget {
  const SubScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(60), // 앱바 높이 조절
          child: SubAppBar(),
        ),
        body: Container(
          alignment: Alignment.center,
          width: double.infinity,
          height: double.infinity,
          child: Text('서브 페이지 입니다.'),
        ),
      ),
    );
  }
}

메인 페이지와 비슷합니다. 서브 페이지는 이동하는 버튼 없이 그냥 Text 위젯만 사용하여 서브 페이지인 걸 표시했습니다.

앱바에 뒤로 가기 버튼을 구현했기 때문에 버튼이 필요 없죠.

 

결과 화면

적용 화면

 

오늘은 커스텀 앱바를 만드는 법을 배워봤습니다!!

​

다음에도 좋은 정보로 돌아오겠습니다!