Flutter 新聞客戶端 - 06 程式碼規範、業務程式碼組織、新聞首頁實現

會煮咖啡的貓發表於2020-06-24

Flutter客戶端

B站視訊

www.bilibili.com/video/BV1Pp…

1 本節目標

程式碼規範
業務程式碼組織
首頁程式碼編寫

2 程式碼規範

3 業務介面程式碼組織

3.1 redux、fish-redux

redux 架構

fish-redux 架構

進一步的細分，進行規範

github.com/alibaba/fis… medium.com/@dave790602…

fish-redux 程式碼

3.2 bloc

架構

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 單獨檔案

分類導航

lib/pages/main/categories_widget.dart

Widget newsCategoriesWidget({
  List<CategoryResponseEntity> categories,
  String selCategoryCode,
  Function(CategoryResponseEntity) onTap,
}) {
  return SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: categories.map<Widget>((item) {
        return Container(
          alignment: Alignment.center,
          height: duSetHeight(52),
          padding: EdgeInsets.symmetric(horizontal: 8),
          child: GestureDetector(
            child: Text(
              item.title,
              style: TextStyle(
                color: selCategoryCode == item.code
                    ? AppColors.secondaryElementText
                    : AppColors.primaryText,
                fontSize: duSetFontSize(18),
                fontFamily: 'Montserrat',
                fontWeight: FontWeight.w600,
              ),
            ),
            onTap: () => onTap(item),
          ),
        );
      }).toList(),
    ),
  );
}
複製程式碼

頻道導航

lib/pages/main/channels_widget.dart

Widget newsChannelsWidget({
  List<ChannelResponseEntity> channels,
  Function(ChannelResponseEntity) onTap,
}) {
  return Container(
    height: duSetHeight(137),
    child: SingleChildScrollView(
      scrollDirection: Axis.horizontal,
      child: Row(
        children: channels.map<Widget>((item) {
          return Container(
            width: duSetWidth(70),
            height: duSetHeight(97),
            margin: EdgeInsets.symmetric(horizontal: duSetWidth(10)),
            child: InkWell(
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  // 圖示
                  Container(
                    height: duSetWidth(64),
                    margin: EdgeInsets.symmetric(horizontal: duSetWidth(3)),
                    child: Stack(
                      alignment: Alignment.center,
                      children: [
                        Positioned(
                          left: 0,
                          top: 0,
                          right: 0,
                          child: Container(
                            height: duSetWidth(64),
                            decoration: BoxDecoration(
                              color: AppColors.primaryBackground,
                              boxShadow: [
                                Shadows.primaryShadow,
                              ],
                              borderRadius:
                                  BorderRadius.all(Radius.circular(32)),
                            ),
                            child: Container(),
                          ),
                        ),
                        Positioned(
                          left: duSetWidth(10),
                          top: duSetWidth(10),
                          right: duSetWidth(10),
                          child: Image.asset(
                            "assets/images/channel-${item.code}.png",
                            fit: BoxFit.none,
                          ),
                        ),
                      ],
                    ),
                  ),
                  // 標題
                  Text(
                    item.title,
                    textAlign: TextAlign.center,
                    overflow: TextOverflow.clip,
                    maxLines: 1,
                    style: TextStyle(
                      color: AppColors.thirdElementText,
                      fontFamily: "Avenir",
                      fontWeight: FontWeight.w400,
                      fontSize: duSetFontSize(14),
                      height: 1,
                    ),
                  ),
                ],
              ),
              onTap: () => onTap(item),
            ),
          );
        }).toList(),
      ),
    ),
  );
}
複製程式碼

新聞行 Item

lib/pages/main/news_item_widget.dart

Widget newsItem(NewsItem item) {
  return Container(
    height: duSetHeight(161),
    padding: EdgeInsets.all(duSetWidth(20)),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        // 圖
        imageCached(
          item.thumbnail,
          width: duSetWidth(121),
          height: duSetWidth(121),
        ),
        // 右側
        SizedBox(
          width: duSetWidth(194),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              // 作者
              Container(
                margin: EdgeInsets.all(0),
                child: Text(
                  item.author,
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.normal,
                    color: AppColors.thirdElementText,
                    fontSize: duSetFontSize(14),
                    height: 1,
                  ),
                ),
              ),
              // 標題
              Container(
                margin: EdgeInsets.only(top: duSetHeight(10)),
                child: Text(
                  item.title,
                  style: TextStyle(
                    fontFamily: 'Montserrat',
                    fontWeight: FontWeight.w500,
                    color: AppColors.primaryText,
                    fontSize: duSetFontSize(16),
                    height: 1,
                  ),
                  overflow: TextOverflow.clip,
                  maxLines: 3,
                ),
              ),
              // Spacer
              Spacer(),
              // 一行 3 列
              Container(
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    // 分類
                    ConstrainedBox(
                      constraints: BoxConstraints(
                        maxWidth: duSetWidth(60),
                      ),
                      child: Text(
                        item.category,
                        style: TextStyle(
                          fontFamily: 'Avenir',
                          fontWeight: FontWeight.normal,
                          color: AppColors.secondaryElementText,
                          fontSize: duSetFontSize(14),
                          height: 1,
                        ),
                        overflow: TextOverflow.clip,
                        maxLines: 1,
                      ),
                    ),
                    // 新增時間
                    Container(
                      width: duSetWidth(15),
                    ),
                    ConstrainedBox(
                      constraints: BoxConstraints(
                        maxWidth: duSetWidth(100),
                      ),
                      child: Text(
                        '• ${duTimeLineFormat(item.addtime)}',
                        style: TextStyle(
                          fontFamily: 'Avenir',
                          fontWeight: FontWeight.normal,
                          color: AppColors.thirdElementText,
                          fontSize: duSetFontSize(14),
                          height: 1,
                        ),
                        overflow: TextOverflow.clip,
                        maxLines: 1,
                      ),
                    ),
                    // 更多
                    Spacer(),
                    InkWell(
                      child: Icon(
                        Icons.more_horiz,
                        color: AppColors.primaryText,
                        size: 24,
                      ),
                      onTap: () {},
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    ),
  );
}
複製程式碼

郵件訂閱

lib/pages/main/newsletter_widget.dart

Widget newsletterWidget() {
  return Container(
    margin: EdgeInsets.all(duSetWidth(20)),
    child: Column(
      children: <Widget>[
        // newsletter
        Row(
          children: <Widget>[
            Text(
              'Newsletter',
              style: TextStyle(
                fontFamily: 'Montserrat',
                fontSize: duSetFontSize(18),
                fontWeight: FontWeight.w600,
                color: AppColors.thirdElement,
              ),
            ),
            Spacer(),
            IconButton(
              icon: Icon(
                Icons.close,
                color: AppColors.thirdElementText,
                size: duSetFontSize(17),
              ),
              onPressed: () {},
            ),
          ],
        ),

        // email
        inputEmailEdit(
          marginTop: 19,
          keyboardType: TextInputType.emailAddress,
          hintText: "Email",
          isPassword: false,
          controller: null,
        ),

        // btn subcrible
        Padding(
          padding: EdgeInsets.only(top: 15),
          child: btnFlatButtonWidget(
            onPressed: () {},
            width: duSetWidth(335),
            height: duSetHeight(44),
            fontWeight: FontWeight.w600,
            title: "Subscribe",
          ),
        ),

        // disc
        Container(
          margin: EdgeInsets.only(top: duSetHeight(29)),
          width: duSetWidth(261),
          child: Text.rich(TextSpan(children: <TextSpan>[
            TextSpan(
              text: 'By clicking on Subscribe button you agree to accept',
              style: new TextStyle(
                color: AppColors.thirdElementText,
                fontFamily: "Avenir",
                fontWeight: FontWeight.w400,
                fontSize: duSetFontSize(14),
              ),
            ),
            TextSpan(
              text: ' Privacy Policy',
              style: new TextStyle(
                color: AppColors.secondaryElementText,
                fontFamily: "Avenir",
                fontWeight: FontWeight.w400,
                fontSize: duSetFontSize(14),
              ),
              recognizer: TapGestureRecognizer()
                ..onTap = () {
                  toastInfo(msg: 'Privacy Policy');
                },
            ),
          ])),
        ),
      ],
    ),
  );
}
複製程式碼

推薦閱讀

lib/pages/main/recommend_widget.dart

Widget recommendWidget(NewsRecommendResponseEntity newsRecommend) {
  return Container(
    margin: EdgeInsets.all(duSetWidth(20)),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        // 圖
        imageCached(
          newsRecommend.thumbnail,
          width: duSetWidth(335),
          height: duSetHeight(290),
        ),
        // 作者
        Container(
          margin: EdgeInsets.only(top: duSetHeight(14)),
          child: Text(
            newsRecommend.author,
            style: TextStyle(
              fontFamily: 'Avenir',
              fontWeight: FontWeight.normal,
              color: AppColors.thirdElementText,
              fontSize: duSetFontSize(14),
            ),
          ),
        ),
        // 標題
        Container(
          margin: EdgeInsets.only(top: duSetHeight(10)),
          child: Text(
            newsRecommend.title,
            style: TextStyle(
              fontFamily: 'Montserrat',
              fontWeight: FontWeight.w600,
              color: AppColors.primaryText,
              fontSize: duSetFontSize(24),
              height: 1,
            ),
          ),
        ),
        // 一行 3 列
        Container(
          margin: EdgeInsets.only(top: duSetHeight(10)),
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              // 分類
              ConstrainedBox(
                constraints: const BoxConstraints(
                  maxWidth: 120,
                ),
                child: Text(
                  newsRecommend.category,
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.normal,
                    color: AppColors.secondaryElementText,
                    fontSize: duSetFontSize(14),
                    height: 1,
                  ),
                  overflow: TextOverflow.clip,
                  maxLines: 1,
                ),
              ),
              // 新增時間
              Container(
                width: duSetWidth(15),
              ),
              ConstrainedBox(
                constraints: const BoxConstraints(
                  maxWidth: 120,
                ),
                child: Text(
                  '• ${duTimeLineFormat(newsRecommend.addtime)}',
                  style: TextStyle(
                    fontFamily: 'Avenir',
                    fontWeight: FontWeight.normal,
                    color: AppColors.thirdElementText,
                    fontSize: duSetFontSize(14),
                    height: 1,
                  ),
                  overflow: TextOverflow.clip,
                  maxLines: 1,
                ),
              ),
              // 更多
              Spacer(),
              InkWell(
                child: Icon(
                  Icons.more_horiz,
                  color: AppColors.primaryText,
                  size: 24,
                ),
                onTap: () {},
              ),
            ],
          ),
        ),
      ],
    ),
  );
}
複製程式碼

藍湖設計稿

lanhuapp.com/url/lYuz1 密碼: gSKl

藍湖現在收費了，所以檢視標記還請自己上傳 xd 設計稿商業設計稿檔案不好直接分享, 可以加微信聯絡 ducafecat

YAPI 介面管理

yapi.demo.qunar.com/

程式碼

github.com/ducafecat/f…

參考

VSCode 外掛

視訊

Flutter 新聞客戶端 - 08 路由管理 auto_route
2020-06-24
Flutter客戶端路由
Flutter 新聞客戶端 - 09 詳情頁展示、分享、遠端真機除錯
2020-06-24
Flutter客戶端除錯
Flutter 新聞客戶端 - 10 編譯釋出正式版
2020-06-24
Flutter客戶端編譯
Flutter 新聞客戶端 - 11 APP升級、android動態授權
2020-06-24
Flutter客戶端APPAndroid
Flutter 新聞客戶端 - 12 採用 sentry 平臺收集錯誤
2020-06-24
Flutter客戶端
用BEM命名規範組織CSS程式碼
2018-04-26
CSS
FTP客戶端c程式碼功能實現
2023-02-23
FTP客戶端C程式
TCP通訊客戶端和服務端簡單程式碼實現
2020-11-05
TCP客戶端服務端
Flutter 新聞客戶端 - 15 strapi 資料建模 graphql 條件查詢排序
2020-07-13
Flutter客戶端API排序
Flutter 新聞客戶端 - 07 Provider、認證授權、骨架屏、磁碟快取
2020-06-24
Flutter客戶端IDE快取
大規模非同步新聞爬蟲：實現一個同步定向新聞爬蟲
2018-12-03
非同步爬蟲
golang實現tcp客戶端服務端程式
2020-12-27
GolangTCP客戶端服務端
Flutter 新聞客戶端 - 01 需求分析、使用藍湖標註工具、專案目錄構建
2020-06-19
Flutter客戶端
Java Netty伺服器客戶端聊天示範程式碼
2020-11-18
JavaNetty伺服器客戶端
客戶現場服務規範
2020-04-07
Flutter 新聞客戶端 - 02 設計稿適配、加入圖片字型資源、歡迎介面
2020-06-23
Flutter客戶端
Jsoup + HtmlUtil 實現網易新聞網頁爬蟲
2019-01-14
JSHTML網頁爬蟲
Flutter程式碼規範優化記錄
2020-06-02
Flutter優化
flutter如何統一程式碼規範
2020-07-08
Flutter
「iOS」行車服務app 「客戶端、後端思路+程式碼」
2021-09-09
iOSAPP客戶端後端
大規模非同步新聞爬蟲的實現思路
2019-05-20
非同步爬蟲
組織css程式碼
2019-01-08
CSS
PHP 規範 - Symfony 程式碼規範
2019-11-06
PHP
程式碼規範之前端編寫碼規範
2020-10-20
前端
Less程式碼規範
2018-07-10
css程式碼規範
2018-06-25
CSS
程式碼分支規範
2020-04-01
iOS程式碼規範
2018-03-08
iOS
程式碼規範整理
2020-12-28
JS程式碼規範
2020-12-17
JS
001 Rust 網路程式設計，實現 TCP 服務端和客戶端程式
2020-04-25
Rust程式設計TCP服務端客戶端
大規模非同步新聞爬蟲的分散式實現
2019-06-10
非同步爬蟲分散式
Flutter實戰之實現一個簡單的新聞閱讀器
2018-03-18
Flutter
用vue+eslint+vscode實現程式碼規範化
2021-10-12
VueEsLintVSCode
程式碼模型組織方式
2020-11-22
模型
Flutter 新聞詳情頁二——WebView和列表豎直滾動
2018-11-08
FlutterWebView
服務端和客戶端 RESTful 介面上傳 Excel 的 Python 程式碼
2024-06-12
服務端客戶端RESTExcelPython
C++程式碼實現一個簡易http服務端，返回給客戶端一張圖片
2024-06-03
C++HTTP服務端客戶端