PreferredSizeWidget——自定义AppBar

要实现自定义AppBar，需要注意两点：
1、AppBar不是平常自定义组件简单的继承StatelessWidget或者StatefulWidget，它还必须实现PreferredSizeWidget
2、必须重写preferredSize，preferredSize必须要有return

下面是一个简单的自定义appBar：

import 'package:flutter/material.dart';

class AppBarComponent extends StatelessWidget implements PreferredSizeWidget{

  final String title;
  final Color bgColor;
  final Color textColor;

  AppBarComponent({@required this.title, this.bgColor = Colors.blue, this.textColor = Colors.white});

  @override
  Size get preferredSize {
    return Size.fromHeight(110.0);
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      centerTitle: true,
      backgroundColor: this.bgColor,
      title: Text(
        this.title,
        style: TextStyle(
          fontSize: 20.0,
          color: this.textColor,
        ),
      ),
    );
  }
}

使用自定义appBar：

@override
Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBarComponent(title: '基础信息完善',),
    );
}

部分素材资源来源网站，本站提供免费下载，如有侵权请联系站长马上删除！