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 |