본문 바로가기
공부방/Flutter

Flutter의 Appbar 사용법

by SmartCow 2023. 9. 13.

1. Flutter의 Appbar란?

Flutter에서 AppBar(앱 바)은 앱의 상단에 표시되는 표준적인 위젯.
AppBar는 일반적으로 앱의 제목, 액션 버튼, 백 버튼과 같은 중요한 앱 관련 요소를 포함하는 데 사용.
AppBar는 Scaffold 위젯 내에서 사용되며, 일반적으로 Scaffold의 appBar 속성을 통해 설정됨.

2. AppBar의 주요 속성과 구성 요소

속성 설명
title AppBar의 가운데에 표시되는 텍스트나 위젯. 일반적으로 앱의 이름이나 현재 화면의 제목을 표시하는 데 사용.
actions AppBar의 오른쪽에 표시되는 액션 버튼들을 포함하는 위젯 목록. 예를 들어 검색 버튼, 설정 버튼 등을 여기에 추가가능.
leading AppBar의 왼쪽에 표시되는 위젯. 주로 뒤로 가기 버튼이나 메뉴 아이콘과 같은 요소를 나타내는 데 사용.
backgroundColor AppBar의 배경색을 지정.
elevation AppBar의 그림자 효과를 조절하는 속성.
bottom AppBar 아래에 추가 정보나 탭을 표시하기 위한 여분의 위젯.

AppBar는 다양한 속성과 사용자 정의 기능을 제공하여 앱의 상단 바를 다양한 방식으로 디자인할 수 있다.
Flutter는 AppBar를 포함한 다양한 위젯을 사용하여 앱의 UI를 구성할 수 있는 강력한 도구를 제공한다.

3. 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('My App'),
          actions: [
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {
                // 검색 액션을 수행하는 코드 작성
              },
            ),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                // 설정 액션을 수행하는 코드 작성
              },
            ),
          ],
        ),
        body: Center(
          child: Text('앱 내용이 여기에 표시됩니다.'),
        ),
      ),
    );
  }
}

이 예제에서는 기본적인 AppBar를 만들고 앱 이름과 검색, 설정 액션 버튼을 추가하였다.
이처럼 AppBar를 수정하여 앱의 디자인에 맞게 사용자 정의할 수 있다.

'공부방 > Flutter' 카테고리의 다른 글

Flutter의 buildContext  (0) 2023.09.25
Flutter의 leading  (0) 2023.09.17
Flutter의 Text위젯  (0) 2023.09.14
Flutter의 Scaffold  (0) 2023.09.11
Flutter의 특징  (0) 2023.08.20