[TIL] 플러터(flutter) - 앱바 메뉴 아이콘 추가하기
플러터(Flutter) 앱바 메뉴 아이콘 추가하기 (강좌 14)
플러터(Flutter) 앱바 메뉴 아이콘 추가하기
App bar icon button
- leading: 아이콘 버튼이나 간단한 위젯을 왼쪽에 배치할 때
- actions: 복수의 앙이콘 버튼 등을 오른쪽에 배치할 때
- onPressed: 함수의 형태로 일반 버튼이나 아이콘 버튼을 터치했을 때 일어나는 이벤트를 정의하는 곳
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
// 단축어 stl
// MyApp
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Appbar',
theme: ThemeData(primarySwatch: Colors.red),
home: MyPage(),
);
}
}
// MyPage
class MyPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Appbar icon menu'),
centerTitle: true, // 중앙 정렬
elevation: 0.0,
leading: IconButton(
icon: Icon(Icons.menu), // 햄버거버튼 아이콘 생성
onPressed: () {
// 아이콘 버튼 실행
print('menu button is clicked');
},
),
actions: <Widget>[
IconButton(
icon: Icon(Icons.shopping_cart), // 장바구니 아이콘 생성
onPressed: () {
// 아이콘 버튼 실행
print('Shopping cart button is clicked');
},
),
IconButton(
icon: Icon(Icons.search), // 검색 아이콘 생성
onPressed: () {
// 아이콘 버튼 실행
print('Search button is clicked');
},
),
],
),
);
}
}
구현 화면
참고
- 유튜브 강의 : 코딩셰프
- 개발자님들 덕분에 많이 배울 수 있었습니다. 감사의 말씀드립니다.