[Flutter] AppBar Module

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 등.. 을 추가해도 무관하다.