Flutter 新闻客户端 - 06 代码规范、业务代码组织、新闻首页实现

B站视频

https://www.bilibili.com/video/BV1Pp4y1C7hx

1 本节目标

• 代码规范
• 业务代码组织
• 首页代码编写

2 代码规范

2.1 官方代码规范

https://dart.dev/guides/language/effective-dart

2.3 chrome 插件 <彩云小译 - 网页翻译插件>

https://chrome.google.com/webstore/detail/lingocloud-web-translatio/jmpepeebcbihafjjadogphmbgiffiajh

2.4 阿里项目规范

https://github.com/alibaba/flutter-go/blob/master/Flutter_Go%20%E4%BB%A3%E7%A0%81%E5%BC%80%E5%8F%91%E8%A7%84%E8%8C%83.md

3 业务界面代码组织

3.1 redux、fish-redux

• redux 架构

• fish-redux 架构

进一步的细分，进行规范

https://github.com/alibaba/fish-redux/tree/master/doc
https://medium.com/@dave790602/flutter-architecture-fish-redux-9b753912224a

• fish-redux 代码

3.2 bloc

• 架构

https://bloclibrary.dev/#/

• 代码组织

3.3 简单就是美

3.4 如何平衡

• 是否团队开发

• 是否简单业务（20 页面）

• 是否重交互（视频社交、聊天 A）

4 新闻首页实现

4.1 界面组成分析

• 分类导航、推荐新闻、频道导航

• 新闻列表、广告 ad、邮件订阅

4.2 代码框架

...
class _MainPageState extends State<MainPage> {

  @override
  void initState() {
    super.initState();
    _loadAllData();
  }

  // 读取所有数据
  _loadAllData() async {
  }

  // 分类菜单
  Widget _buildCategories() {
    return Container();
  }

  // 推荐阅读
  Widget _buildRecommend() {
    return Container();
  }

  // 频道
  Widget _buildChannels() {
    return Container();
  }

  // 新闻列表
  Widget _buildNewsList() {
    return Container();
  }

  // ad 广告条
  // 邮件订阅
  Widget _buildEmailSubscribe() {
    return newsletterWidget();
  }

  @override
  Widget build(BuildContext context) {
    return SingleChildScrollView(
        child: Column(
          children: <Widget>[
            _buildCategories(),
            Divider(height: 1),
            _buildRecommend(),
            Divider(height: 1),
            _buildChannels(),
            Divider(height: 1),
            _buildNewsList(),
            Divider(height: 1),
            _buildEmailSubscribe(),
          ],
        ),
      );
  }
}

4.3 实现业务

• 创建 widget 单独文件