Flutter練手專案--玩安卓

Dale_Dawson發表於2019-06-11

Flutter安卓

Flutter環境在很久之前就搭建好了，遲遲沒有體驗一把，釋出會稱Flutter將要一統天下，是時候體驗一把Flutter了，還是藉助玩安卓api介面來練手。

先上圖吧

大致就分為首頁、體系、熱搜、專案、我的、五大板塊。

一、頁面

主入口很簡單，幾句程式碼

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '玩安卓',
      debugShowCheckedModeBanner: false, //去掉頁面右上角的debug標識
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MainPage(),
    );
  }
}
複製程式碼

很多時候寫完頁面右上角還有個debug標識，新增上以下程式碼就可以去掉。

debugShowCheckedModeBanner: false, //去掉頁面右上角的debug標識
複製程式碼

以上程式碼中home後面的MainPage()才是真正的主頁，我們來瞧一瞧

頁面下方的五個TAB新增方式

  bottomNavigationBar: BottomNavigationBar(
        // 底部導航
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: Icon(Icons.home), title: Text('首頁')),
          new BottomNavigationBarItem(
              icon: Icon(Icons.layers), title: Text('體系')),
          new BottomNavigationBarItem(
              icon: Icon(Icons.search), title: Text('熱搜')),
          new BottomNavigationBarItem(
              icon: Icon(Icons.folder), title: Text('專案')),
          new BottomNavigationBarItem(
              icon: Icon(Icons.person), title: Text('我的')),
        ],
        type: BottomNavigationBarType.fixed,
        currentIndex: _selectedIndex,
        fixedColor: Colors.blue,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
      ),
複製程式碼

順便說下每個頁面的狀態儲存方式

class ListPageState extends State<ListPage> with AutomaticKeepAliveClientMixin
@override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;
複製程式碼

先實現AutomaticKeepAliveClientMixin然後重寫@override bool get wantKeepAlive => true這個方法

二、資料請求及解析

1.資料請求

資料請求這塊，我用的是dio 使用方法： 1.先在pubspec.yaml中新增 dio: ^2.1.2 #網路框架 2.點選編輯器右上方的Package get 3.可以愉快的玩耍了來一個最簡單的get請求

import 'package:dio/dio.dart';
Dio dio = new Dio();
Response response=await dio.get("https://www.google.com/");
print(response.data);
複製程式碼

2.資料解析

資料解析用的是 json_serializable: ^2.0.0 然後配合android studio 工具自動生成bean物件

3.下拉重新整理上拉載入很多

重新整理這塊用的是 flutter_refresh: ^0.0.2 flutter_spinkit: "^3.1.0" 具體使用方法：

// 頂部重新整理
  Future<Null> onHeaderRefresh() {
    return new Future.delayed(new Duration(seconds: 2), () {
      setState(() {
        pageIndex = 0;
        bannerList.clear();
        homeList.clear();
        this.getBannerList();
        this.getHomeList();
      });
    });
  }

// 底部重新整理
  Future<Null> onFooterRefresh() async {
    return new Future.delayed(new Duration(seconds: 2), () {
      setState(() {
        pageIndex += 1;
        this.getHomeList();
      });
    });
  }

Widget buildCustomScrollView() {
    return new Refresh(
        onFooterRefresh: onFooterRefresh,
        onHeaderRefresh: onHeaderRefresh,
        childBuilder: (BuildContext context,
            {ScrollController controller, ScrollPhysics physics}) {
          return new Container(
              child: new ListView.builder(
                  physics: physics,
                  controller: controller,
                  itemCount: homeList.length + headerCount,
                  itemBuilder: (BuildContext context, int index) {
                    if (index == 0) {
                      return buildBanner();
                    } else {
                      return buildList(homeList[index - headerCount]);
                    }
                  }));
        });
  }
複製程式碼

接下來我們看下主頁裡面某個單頁面的具體實現，就首頁吧

import 'package:banner_view/banner_view.dart';
import 'package:flutter/material.dart';
import 'package:flutter_refresh/flutter_refresh.dart';
import 'package:flutter_wananzhuo/bean/Api.dart';
import 'package:flutter_wananzhuo/bean/BannerItem.dart' as bannerItem;
import 'package:flutter_wananzhuo/bean/HomeItem.dart' as homeItem;
import 'package:flutter_wananzhuo/utils/HttpUtil.dart';
import 'package:flutter_wananzhuo/utils/NavigatorUtil.dart';

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List<bannerItem.BannerData> bannerList = [];
  List<homeItem.HomeItemDataData> homeList = [];
  final int headerCount = 1;
  int pageIndex = 0;
  var bannerIndex = 0;

//  final int pageSize = 20;

  @override
  void initState() {
    super.initState();
    getBannerList();
    getHomeList();
  }

// 頂部重新整理
  Future<Null> onHeaderRefresh() {
    return new Future.delayed(new Duration(seconds: 2), () {
      setState(() {
        pageIndex = 0;
        bannerList.clear();
        homeList.clear();
        this.getBannerList();
        this.getHomeList();
      });
    });
  }

// 底部重新整理
  Future<Null> onFooterRefresh() async {
    return new Future.delayed(new Duration(seconds: 2), () {
      setState(() {
        pageIndex += 1;
        this.getHomeList();
      });
    });
  }

//獲取輪播圖介面
  void getBannerList() async {
    var response = await new HttpUtil().get(Api.BANNER_LIST);
    var item = new bannerItem.BannerItem.fromJson(response);
    bannerList = item.data;
    setState(() {});
  }

  void getHomeList() async {
    var response = await new HttpUtil()
        .get(Api.HOME_LIST + pageIndex.toString() + "/json");
    var item = new homeItem.HomeItem.fromJson(response);
    if (pageIndex == 0) {
      homeList = item.data.datas;
    } else {
      homeList.addAll(item.data.datas);
    }
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(
          elevation: 0,
          title: new Text("玩安卓"),
        ),
        body: buildCustomScrollView());
  }

  Widget buildCustomScrollView() {
    return new Refresh(
        onFooterRefresh: onFooterRefresh,
        onHeaderRefresh: onHeaderRefresh,
        childBuilder: (BuildContext context,
            {ScrollController controller, ScrollPhysics physics}) {
          return new Container(
              child: new ListView.builder(
                  physics: physics,
                  controller: controller,
                  itemCount: homeList.length + headerCount,
                  itemBuilder: (BuildContext context, int index) {
                    if (index == 0) {
                      return buildBanner();
                    } else {
                      return buildList(homeList[index - headerCount]);
                    }
                  }));
        });
  }

  Widget buildList(homeItem.HomeItemDataData item) {
    return new Card(
      child: new InkWell(
        onTap: () {
          NavigatorUtil.toDetails(context, item.link, item.title);
        },
        child: new ListTile(
          title: new Row(
            children: <Widget>[
              new Text(item.author,
                  textAlign: TextAlign.left,
                  style: new TextStyle(color: Colors.grey, fontSize: 13)),
              new Text(item.niceDate,
                  textAlign: TextAlign.right,
                  style: new TextStyle(color: Colors.grey, fontSize: 13))
            ],
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.center,
          ),
          subtitle: new Column(
            children: <Widget>[
              new Text(item.title,
                  textAlign: TextAlign.left,
                  style: new TextStyle(color: Colors.black, fontSize: 15)),
              new Text(
                item.superChapterName + "/" + item.chapterName,
                style: new TextStyle(color: Colors.blue, fontSize: 13),
              )
            ],
            crossAxisAlignment: CrossAxisAlignment.start,
          ),
        ),
      ),
    );
  }

  Widget buildBanner() {
    return new Container(
      padding: EdgeInsets.all(5),
      child: bannerList.length > 0
          ? new BannerView(
              bannerList.map((bannerItem.BannerData item) {
                return new GestureDetector(
                    onTap: () {
                      NavigatorUtil.toDetails(context, item.url, item.title);
                    },
                    child: new Image.network(
                      item.imagePath,
                      fit: BoxFit.cover,
                    ));
              }).toList(),
              cycleRolling: false,
              autoRolling: true,
              indicatorMargin: 8.0,
//              indicatorNormal: this._indicatorItem(Colors.white),
//              indicatorSelected:
//                  this._indicatorItem(Colors.white, selected: true),
//              indicatorBuilder: (context, indicator) {
//                return this._indicatorContainer(indicator);
//              },
              onPageChanged: (index) {
                bannerIndex = index;
              },
            )
          : new Container(),
      width: double.infinity,
      height: 200.0,
    );
  }
}

複製程式碼

其他頁面的實現都大同小異，可以去看原始碼

三、遇到的問題

##1.資料還沒載入出來，介面報紅色錯誤解決：用一個變數控制是否在載入完成，未載入完成先顯示載入頁面舉個例子：

 @override
  Widget build(BuildContext context) {
    return isLoading
        ? SpinKitCircle(
            itemBuilder: (_, int index) {
              return DecoratedBox(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(5.0),
                  color: Colors.grey,
                ),
              );
            },
          )
        : new Refresh(
            onFooterRefresh: onFooterRefresh,
            onHeaderRefresh: onHeaderRefresh,
            childBuilder: (BuildContext context,
                {ScrollController controller, ScrollPhysics physics}) {
              return new Container(
              ));
            });
  }
複製程式碼

2.webview控制元件載入不出有些網頁（報錯：net err_cleartext_not_permitted）

解決：從Android 9.0（API級別28）開始，預設情況下禁用明文支援。因此http的url均無法在webview中載入在android manifest.xml中新增

<?xml version="1.0" encoding="utf-8"?>
   <manifest ...>
       <uses-permission android:name="android.permission.INTERNET" />
       <application
           ...
           android:usesCleartextTraffic="true"
           ...>
           ...
       </application>
   </manifest>
複製程式碼

3.某些控制元件(如Container)沒有自帶的點選事件

解決：外面套一層

GestureDetector
onTap: () {
Navigator.push(context,new MaterialPageRoute(
builder: (context) =>
new DetailsPage(item.link, item.name)));
});
複製程式碼

4.需要使用什麼庫，搜尋一下

packages: pub.flutter-io.cn/flutter

專案地址

#原始碼地址

Flutter進階 | Flutter 優質練手專案以及優質外掛
2018-07-18
Flutter
安卓部署Java專案
2023-01-24
安卓Java
gin練手專案
2022-08-11
歷時三天，完成了Flutter版本的玩安卓
2020-04-10
Flutter安卓
Vue練手專案(包含typescript版本)
2018-04-18
VueTypeScript
安卓原生工程整合Flutter工程
2019-10-11
安卓Flutter
go+vue入門專案練手
2020-10-15
GoVue
學python找不到專案練手？別擔心，70個python練手專案給你充實感
2019-01-16
Python
安卓Glide(4.7.1)使用筆記 01 - 引入專案
2018-04-20
安卓IDE筆記
mac上如何配置flutter之安卓
2020-07-20
MacFlutter安卓
Flutter 如何釋出安卓應用？
2021-05-10
Flutter安卓
安卓手機怎麼將PDF檔案轉Excel
2018-08-10
安卓Excel
Kotlin 入門開發__安卓小專案實戰
2018-06-07
Kotlin安卓
安卓手機怎樣將PDF檔案轉為HTML
2018-09-28
安卓HTML
Flutter 安卓狀態列那點事兒
2020-04-26
Flutter安卓
Mac 配置 Flutter 安卓開發環境
2021-05-10
MacFlutter安卓開發環境
Go 的練手專案有哪些值得推薦？
2020-02-14
Go
給Python初學者的最好練手專案
2018-04-04
Python
Go 語言入門練手專案推薦
2021-07-13
Go
長沙Java培訓：JAVA練手專案分享
2021-11-15
Java
FishRedux完成一個玩安卓客戶端
2020-01-07
Redux安卓客戶端
Unity打包安卓專案問題彙總（持續更新）
2022-01-15
Unity安卓
flutter專案安裝nfc_manager後專案執行不起來
2024-04-28
Flutter
[練手專案]Gin+websocket 的多人聊天室
2020-10-10
Web
50行程式碼，Node爬蟲練手專案 ?️
2019-04-20
行程爬蟲
Fiddler 安卓手機抓包教程
2019-01-23
安卓
初學Python不知道做什麼專案好？來看看練手專案如何？
2019-01-09
Python
flutter 練手之優雅的開車
2019-01-11
Flutter
安卓平臺Flutter啟動過程全解析
2019-04-01
安卓Flutter
又一個Rust練手專案-wssh(SSH over Websocket Client)
2024-09-02
RustWebclient
微信小程式初體驗--玩安卓小程式
2019-04-01
微信小程式安卓
React Native開發的乾貨集中營、玩安卓
2019-04-04
React Native安卓
安卓手機耗電、卡頓嚴重的解決方法安卓手機省電小妙招
2018-10-29
安卓
Android 專案整合 Flutter
2021-06-02
AndroidFlutter
安卓手機去水印哪個好用
2019-06-13
安卓
推薦一些適合新手練手的Python專案
2019-02-16
Python
4個Python經典專案實戰，練手必備哦
2019-09-10
Python
分享一份介面測試專案（非常值得練手）
2024-11-04