본문 바로가기
프로그래밍/Flutter-Dart

[Flutter] AppBar Module

by 채연2 2022. 3. 10.

appbar에 action 들을 추가하니 코드가 가독성이 떨어져 보여 모듈화해서 빌드해보았다.

 


		
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
class AppBarArea extends StatelessWidget implements PreferredSizeWidget {
final AppBar appBar;
const AppBarArea({Key key, this.appBar}) : super(key: key);
@override
Widget build(BuildContext context) {
return AppBar(
backgroundColor: Colors.white,
leading: Image.asset(
"assets/images/image.png",
),
actions: [
...
],
);
}
@override
// TODO: implement preferredSize
Size get preferredSize => new Size.fromHeight(appBar.preferredSize.height);
}

우선 이런 식으로 따로 파일을 작성한다.

PreferredSizeWidget을  implements 안해주면 에러가 난다.

그리고, 사용법은 아래와 같다.

 

 

 


		
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBarArea(appBar: AppBar(),),
body: ...,
);
}

appBar 말고도 title, actions 등.. 을 추가해도 무관하다.

320x100

댓글