目錄

1. 概述

1.1 功能概述

1.2 技術準備

1.3 源碼地址

2. App首頁

2.1 pubspec依賴

2.2?熱門首頁組件

2.2.1 DefaultTabController

2.2.2?Swiper

2.3 新聞API數(shù)據(jù)訪問?

2.4 熱門首頁效果圖

3. 新聞分類

3.1 GestureDetector

3.2 新聞分類效果圖

4. 收藏功能

4.1?fluttertoast

4.2?shared_preferences

4.3 收藏效果圖

5. 相關文檔和總結

---

最近在研究基于Flutter構建一個簡單的新聞資訊app，主要參考：用Flutter極速構建原生應用（需要電子書的話可以私聊），但是這本書有部分代碼引用的組件版本已經不適用所以做了一些調整。以下是對于開發(fā)過程和遇到的一些問題的總結。

1. 概述

1.1 功能概述

對于Flutter的環(huán)境配置就不做總結了，為了節(jié)省時間大家可以用IntelliJ IDEA專業(yè)版，里面就可以創(chuàng)建Flutter項目。主要包含三個部分：

• 熱門新聞列表。
• 分類新聞列表。
• 新聞詳情頁。
• 收藏功能。

1.2 技術準備

應用的首頁用來展示熱門新聞，我們可以選取天行數(shù)據(jù)的“綜合新聞”接口服務，接口服務詳細信息地址：綜合新聞API接口 - 天行數(shù)據(jù)TianAPI。

在這注冊一個賬號用來做app測試。

然后創(chuàng)建一個Flutter應用，目錄架構如下：

1.3 源碼地址

項目源碼：基于Flutter構建的新聞App。

Git地址：GitHub - BAStriver/flutter_test: test。

2. App首頁

這里主要引用到DefaultTabController組件和Swiper組件。

• 使用DefaultTabController組件來實現(xiàn)多模塊的聚合頁面。
• 使用Swiper實現(xiàn)首頁圖片輪播。

首先在category和home文件夾下新建兩個Dart文件，命名為category_view.dart與home_view.dart。目前實現(xiàn)如下效果：

2.1 pubspec依賴

如下是這個app的主要依賴設置：

dependencies:flutter:sdk: flutter# The following adds the Cupertino Icons font to your application.# Use with the CupertinoIcons class for iOS style icons.cupertino_icons: ^1.0.6http: ^1.1.2fluttertoast: ^8.2.4shared_preferences: ^2.2.2

2.2?熱門首頁組件

2.2.1 DefaultTabController

Widget _containerView(BuildContext context) {return Container(width: MediaQuery.of(context).size.width,height: MediaQuery.of(context).size.height,child: DefaultTabController(length: 2,child: Scaffold(appBar: AppBar(bottom: const TabBar(tabs: [Tab(child: Text("popular",style: TextStyle(color: Colors.black),),),Tab(child: Text("classifications",style: TextStyle(color: Colors.black),),)],indicatorColor: Colors.green,),title: const Text("ALl News",style: TextStyle(color: Colors.black),textAlign: TextAlign.center,),backgroundColor: Colors.white,actions: <Widget>[GestureDetector(child: Container(width: 60,child: const Icon(Icons.collections),),onTap: () {print('enter collection view.');Navigator.push(context, MaterialPageRoute(builder: (context) {print('enter collection view2.');return CollectionView();}));},)],),body: TabBarView(children: [HomeView(), CategoryView()],),)),);}

2.2.2?Swiper

Widget _buildSwiper(BuildContext context) {return Container(height: 150,child: Swiper(pagination: const SwiperPagination(),control: const SwiperControl(),autoplay: true,itemCount: 3,itemBuilder: (BuildContext context, int index) {return Container(margin: const EdgeInsets.only(bottom: 5),color: Colors.orange,width: MediaQuery.of(context).size.width,height: 150,child: Image.network(_dataList[_dataList.length - 1].picUrl,height: 150,width: MediaQuery.of(context).size.width,fit: BoxFit.fitWidth,),);},),);}

這里如果參考書上的寫法會有問題，所以為了解決升級到Dart3.0后Swiper不兼容的問題可以參考：由于flutter_app依賴于flutter_swiper＞=0.0.2，不支持零安全，版本解決失敗。_because book depends on flutter_swiper >=0.0.2 whi-CSDN博客

2.3 新聞API數(shù)據(jù)訪問?

Future<HomeModel> queryHomeData(int page) async {var url = Uri.parse('https://apis.tianapi.com/generalnews/index');var headers = <String, String>{"Access-Control-Allow-Origin": "*","Content-Type":"application/x-www-form-urlencoded"};var body = <String, String>{"key": URL_KEY, "num": "10", "page": "$page"};final response = await http.post(url,body: body, headers: headers);Map<String, dynamic> jsonMap = json.decode(response.body);return HomeModel.fromJson(jsonMap);}

這里會涉及到數(shù)據(jù)模型的構建和加載，可以參考：A value of type 'X' can't be assigned to a variable of type 'List' - 糯米PHP

2.4 熱門首頁效果圖

3. 新聞分類

這里主要引用到GestureDetector組件。

關于新聞分類主頁采用網格布局，根據(jù)天行數(shù)據(jù)網上提供的新聞接口定義10個分類。

final List<String> _categorys = ["GeneralNews","CarNews","DomesticNews","AnimeNews","FinancialNews","GameNews","InternationalNews","AINews","MilitaryNews","SportNews"];

3.1 GestureDetector

點擊一個分類，頁面會跳轉到分類列表頁。

關于詳細的組件回調事件可以參考：

Flutter--GestureDetector手勢識別組件_flutter gesturedetector-CSDN博客

Widget _getItem(BuildContext context, int index) {return Container(width: MediaQuery.of(context).size.width,height: 130,child: Row(children: <Widget>[GestureDetector(child: Container(width: MediaQuery.of(context).size.width / 2,color: index % 2 == 0 ? Colors.orange : Colors.blueAccent,height: 130,child: Center(child: Text(_categorys[index * 2],textAlign: TextAlign.center,style: const TextStyle(fontSize: 30, color: Colors.white),),),),onTap: () {Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {return CategoryListView(CATEGORY_KEYS[_categorys[index * 2]]!, _categorys[index * 2]);}));},),GestureDetector(child: Container(width: MediaQuery.of(context).size.width / 2,color: index % 2 == 0 ? Colors.blueAccent : Colors.orange,height: 130,child: Center(child: Text(_categorys[index * 2 +1],textAlign: TextAlign.center,style: const TextStyle(fontSize: 30, color: Colors.white),),),),onTap: () {Navigator.push(context, MaterialPageRoute(builder: (BuildContext context) {return CategoryListView(CATEGORY_KEYS[_categorys[index * 2 + 1]]!, _categorys[index * 2 + 1]);}));},)],),);}

3.2 新聞分類效果圖

進入一般新聞的分類頁面：

4. 收藏功能

這里主要引用了fluttertoast和shared_preferences組件。

• fluttertoast實現(xiàn)彈窗效果。
• shared_preferences實現(xiàn)本地緩存。

4.1?fluttertoast

實現(xiàn)彈窗是否收藏新聞。

Widget _buildItem(BuildContext context, int index) {return Container(height: 110,width: MediaQuery.of(context).size.width,margin: const EdgeInsets.only(bottom: 1),color: Colors.amber,child: GestureDetector(child: Row(children: <Widget>[Container(color: Colors.grey,child: Image.network(// "http://n.sinaimg.cn/sinakd202124s/162/w550h412/20210204/6706-kirmait9301473.jpg",_dataList[index].picUrl,width: 130,height: 110,fit: BoxFit.fitHeight,),),Column(crossAxisAlignment: CrossAxisAlignment.start,children: <Widget>[Container(margin: const EdgeInsets.only(left: 10, top: 10, right: 10),width: MediaQuery.of(context).size.width - 130 - 20,child: Text(_dataList[index].title,overflow: TextOverflow.ellipsis,maxLines: 2,style: const TextStyle(fontSize: 15, fontWeight: FontWeight.bold),),),Container(margin: const EdgeInsets.only(left: 10, top: 5),child: Text(_dataList[index].description),),Container(margin: const EdgeInsets.only(left: 10, top: 5),child: Text(_dataList[index].ctime),),],)],),onLongPress: () {showDialog(context: context,builder: (BuildContext context) {return AlertDialog(title: Text('Do you want to save it ?'),actions: <Widget>[TextButton(onPressed: () {_addCollection(_dataList[index].id, _dataList[index].title);Navigator.of(context).pop();},child: Text('Yes')),TextButton(onPressed: () {Navigator.of(context).pop();},child: Text('No')),],);});},),);}

4.2?shared_preferences

實現(xiàn)本地緩存。

void _addCollection(String id, String title) async {print('id: ' + id);print('title: ' + title);SharedPreferences? preferences = await SharedPreferences.getInstance();String? data = preferences.getString(id);if (data == null) {await preferences.setString(id, title);Fluttertoast.showToast(msg: 'saved successfully.');} else {Fluttertoast.showToast(msg: 'the new already existing.');}}

4.3 收藏效果圖

長按新聞。

收藏成功。

?

點擊主頁右上角的收藏圖標進入收藏頁面：

5. 相關文檔和總結

開發(fā)體驗初探 - Flutter 中文文檔 - Flutter 中文開發(fā)者網站 - Flutter

如何搭建flutter開發(fā)環(huán)境_flutter環(huán)境搭建-CSDN博客

Get 請求 | Post 請求 | 將響應結果轉為 Dart 對象 | Future 異步調用

注：

1.遇到跨域問題訪問不到圖片可以參考：

開發(fā)環(huán)境如需解決跨域問題

flutter for web 帶cookie的網絡請求跨域問題處理

2.關于GestureDetector組件的用法可以參考：Flutter--GestureDetector手勢識別組件

3.關于SharedPreferences組件的用法可以參考：Flutter 數(shù)據(jù)存儲--shared_preferences使用詳情

4.遇到：MissingPluginException (MissingPluginException(No implementation found for method... 需要重新啟動項目。

5.遇到Navigator無法正常跳轉頁面時候可以參考：

Flutter無法跳轉頁面的解決方法（push方法無效） - 簡書

Navigator的正確打開方式-CSDN博客

比如第4節(jié)開發(fā)收藏功能的時候遇到這個無法跳轉的問題，main.dart做了如下的修改：

6.Flutter有兩個App主題風格可以引用，包括：cupertino(IOS)、material(Android)，具體的官方文檔可以參考：Cupertino (iOS-style) widgets | Flutter?、Material Components widgets | Flutter。

關于這些風格的Widgets用法也可以參考：開啟Fluter基礎之旅<三>-------Material Design風格組件、Cupertino風格組件、Flutter頁面布局篇...-CSDN博客