Flutter中页面没有像Android、IOS 定义那么明确，Android中就是 Activity，IOS 中就是 UIViewController。
在Flutter中，几乎所有东西都是Widget。

将Widget视为可视组件（或与应用程序的可视方面交互的组件）。

在项目开发中基本都会有一个 BaseActivity/BaseVIewController，封装一些基本操作及公共部分，参照Android/IOS中 BaseActivity/BaseVIewController实现，在 Flutter也实现同样功能的抽象的BaseWidget。

实现功能

开发页面时，写一个类继承 BaseWidget，就会提示必须要实现的抽象方法，俗称模板模式，要做的事情一目了然。这里将要写的代码定义成一个 Live Templates。
导航栏AppBar可以轻松隐藏和设置背景颜色(图片)，其中包含导航栏中的左边返回键、中间的标题、右面的按钮或文本，可以随意设置隐藏和现实，当然可以重写他们的方法，随意设置自己的Widget，实现高度定制。
内置了一个错误页面，主要用于网络加载出错或服务器返回错误的时候，可以直接调方法就显示，不用每个页面都写错误页面，避免需求变更时束手无策。
内置一个无数据页面，用于列表无数据时展示。使用方法和功能和错误页面差不多。
内置一个loading加载页面，主要用于进入页面时显示一个 loading 视图，默认进入界面就显示，数据加载完成，显示正常内容视图，加载失败话，就显示上面定义的错误视图。
进入自动调用 queryData 进行网络请求。
内置了安全键盘，在要使用安全键盘页面，初始化一下就可以了。
。。。
有了基类，以后拓展就很方面（如：返回刷新等）。

实现思路

BaseWidget 是一个有状态的基础 Widget，由两部分组成。

Widget 定义

abstract class BaseWidget extends StatefulWidget {
  @override
  BaseWidgetState createState() => getState();

  ///子类实现
  BaseWidgetState getState();
}

此部分在Widget的生命周期内不会发生变化，但可以接受可由其相应的State实例使用的参数，当需要将其添加到窗口上时，可以通过实例化来实现。

Widget State 定义

abstract class BaseWidgetState<T extends BaseWidget> extends State<T> {
@override
void initState() {
  super.initState();
}


@override
Widget build(BuildContext context) {
  ...
  }

}

此部分是在Widget的生命周期中变化的部分，并强制每次应用修改时重建Widget的这个特定实例。此两部分别被子类继承，并要求实现其抽象方法，getState 用于创建继承BaseWidgetState的子类 Widget State实例。

布局搭建

在 BaseWidgetState 中内置了标题栏、错误视图、空页面视图、加载中视图、安全键盘等几个基本控件，预留一个抽象方法buildWidget给子类搭建自己的布局。

@override
Widget build(BuildContext context) {
  return _hasSecurityKeyboard
      ? _buildWidgetWithKeyboard()
      : _buildWidgetDefault();
}

///构建默认视图
Widget _buildWidgetDefault() {
  ///使用appbar，也可直接只有 body 在 body 里自定义状态栏、标题栏
  return WillPopScope(
    child: Scaffold(
      appBar: _buildAppBar(),
      body: _buildBody(),
    ),
    onWillPop: _requestPop,
  );
}

///构建包含安全键盘视图
Widget _buildWidgetWithKeyboard() {
  ///WidgetsApp或者MaterialApp,Flutter会自动默认创建一个Navigator
  ///用于键盘弹出的时候页面可以滚动到输入框的位置
  return WillPopScope(
    child: KeyboardMediaQuery(
      child: Builder(builder: (ctx) {
        ///初始化键盘监听并且传递当前页面的context
        KeyboardManager.init(ctx);
        return Scaffold(
          appBar: _buildAppBar(),
          body: _buildBody(),
        );
      }),
    ),
    onWillPop: _requestPop,
  );
}

///物理返回
Future<bool> _requestPop() {
  bool b = true;
  if (KeyboardManager.isShowKeyboard) {
    KeyboardManager.hideKeyboard();
    b = false;
  }
  return Future.value(b);
}

///子类实现，构建各自页面UI控件 相当于setContentView()
Widget buildWidget(BuildContext context);

///构建内容区
Widget _buildBody() {
  return Container(
    ///内容区背景颜色
    color: LcfarmColor.colorF8F9F8,
    child: Stack(
      children: <Widget>[
        Offstage(
          offstage: !_isContentWidgetShow,
          child: buildWidget(context),
        ),
        _buildErrorWidget(),
        _buildEmptyWidget(),
        _buildLoadingWidget(),
      ],
    ),
  );
}

通过 _hasSecurityKeyboard控制是否内置安全键盘，子类可以在 initState中通过初始化该字段来实现。
同样错误视图、空白视图、加载中视图提供方法让子类控制是否显示，以及设置相应的文字、图片等。

使用方法

基本实现代码如下：

class Test extends BaseWidget {
  @override
  BaseWidgetState getState() {
    return _TestState();
  }
}

class _TestState extends BaseWidgetState<Test> {
  @override
  Widget buildWidget(BuildContext context) {
    return Container();
  }
  
  @override
  void queryData() {
   
  }
}

getState 返回继承BaseWidgetState的 Widget State。
buildWidget 用于构建当前视图
queryData用于是否进入查询数据

如有查询，则直接调用网络请求即可。

@override
void queryData() {
  _loadData(...)
}

如无需查询数据，则禁用掉即可。

@override
void queryData() {
  ///进入无需网络请求数据
  disabledLoading();
}

显示成功视图、错误视图、空白视图

void _loadData(LoadType type) {
  AccountService.letterList(
    pageNo,
    (Pager<LetterModel> pager) {
      ///暂无数据
      if (pager.total == 0) {
        showLoadEmpty();
        return;
      }
      pageNo = pager.currentPage;
      if (type == LoadType.loadMore) {
        letterModels.addAll(pager.list);
      } else {
        letterModels = pager.list;
      }

      showLoadSuccess();
    },
    (HttpError error) {
      showLoadFailure(error.code, error.message);
    },
  );
}

最后

如果在使用过程遇到问题，欢迎下方留言交流。

学习资料

请大家不吝点赞！因为您的点赞是对我最大的鼓励，谢谢！