Flutter項(xiàng)目

一、輪播圖

添加依賴：Add this to your package's pubspec.yaml file:

dependencies:
  flutter_swiper: ^1.1.6

獲取資源

$ flutter pub get

使用的時(shí)候?qū)?/li>

import 'package:flutter_swiper/flutter_swiper.dart';

demo

class _KnowledgePage extends State<KnowledgePage> {
 List<String> imgs = [
    "http://ww4.sinaimg.cn/large/7a8aed7bjw1exp4h479xfj20hs0qoq6t.jpg",
    "http://ww1.sinaimg.cn/large/0065oQSqly1frepozc5taj30qp0yg7aq.jpg",
    "http://ww1.sinaimg.cn/large/0065oQSqly1frept5di16j30p010g0z9.jpg"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: 180,
        child: Swiper(
          autoplay: true,
          pagination: SwiperPagination(),//添加indicator
          itemCount: imgs.length,
          itemBuilder: (BuildContext context, int index) {
            return Image.network(
              imgs[index],
              fit: BoxFit.cover,
            );
          },
        ),
      ),
    );
  }
}

二忆绰、延遲

Future.delayed(Duration(seconds: 3), () {//操作});

三、 Flutter導(dǎo)航頁之intro_slider

intro_slider是Flutter一個(gè)應(yīng)用啟動(dòng)歡迎頁面的插件输拇，可以幫助你介紹你的應(yīng)用，以顯示你的應(yīng)用程序的主要功能烈和，你可以更改圖像侨拦，按鈕，文本樣式稚茅，顏色等别惦，創(chuàng)建介紹屏幕從未如此簡單快捷弧可。
目前官方版本是intro_slider ^2.3.1
intro_slider插件地址

①添加依賴intro_slider: ^2.3.1
②使用IntroSlider

class SplashScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _SplashScreen();
  }
}

class _SplashScreen extends State<SplashScreen> {
  List<Slide> slides = new List();
 //完成方法
  void onDonePress() {
    Navigator.of(context).pushAndRemoveUntil(
        new MaterialPageRoute(builder: (context) => MainScreen()),
        (route) => route == null);
  }

//跳過方法
  void onSkipPress() {
    Navigator.of(context).pushAndRemoveUntil(
        new MaterialPageRoute(builder: (context) => MainScreen()),
        (route) => route == null);
  }

  @override
  Widget build(BuildContext context) {
    return IntroSlider(
      slides: slides,
      onDonePress: this.onDonePress,
      onSkipPress: this.onSkipPress,
      nameSkipBtn: "跳過",
      nameNextBtn: "下一頁",
      nameDoneBtn: "進(jìn)入",
    );
  }
}

③獲取slider集合

slides.add(
      new Slide(
        title: "Flutter",
        description:
            "Flutter是谷歌的移動(dòng)UI框架谷暮，可以快速在iOS和Android上構(gòu)建高質(zhì)量的原生用戶界面蒿往。 Flutter可以與現(xiàn)有的代碼一起工作。在全世界湿弦，F(xiàn)lutter正在被越來越多的開發(fā)者和組織使用瓤漏，并且Flutter是完全免費(fèi)、開源的颊埃。",
        styleDescription: TextStyle(
            color: Colors.white, fontSize: 20.0),
        marginDescription:
            EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
        colorBegin: Color(0xffFFDAB9),
        colorEnd: Color(0xff40E0D0),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
      ),
    );
    slides.add(
      new Slide(
        title: "Wanandroid",
        description:
            "這是一款使用Flutter寫的WanAndroid客戶端應(yīng)用蔬充，在Android和IOS都完美運(yùn)行,可以用來入門Flutter，簡單明了班利，適合初學(xué)者,項(xiàng)目完全開源饥漫，如果本項(xiàng)目確實(shí)能夠幫助到你學(xué)習(xí)Flutter，謝謝start罗标，有問題請(qǐng)?zhí)峤籌ssues,我會(huì)及時(shí)回復(fù)庸队。",
        styleDescription: TextStyle(
            color: Colors.white, fontSize: 20.0, fontFamily: 'Raleway'),
        marginDescription:
            EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
        colorBegin: Color(0xffFFFACD),
        colorEnd: Color(0xffFF6347),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
      ),
    );
    slides.add(
      new Slide(
        title: "Welcome",
        description: "贈(zèng)人玫瑰，手有余香闯割；\n分享技術(shù)彻消，傳遞快樂。",
        styleDescription: TextStyle(
            color: Colors.white, fontSize: 20.0, fontFamily: 'Raleway'),
        marginDescription:
            EdgeInsets.only(left: 20.0, right: 20.0, top: 20.0, bottom: 70.0),
        colorBegin: Color(0xffFFA500),
        colorEnd: Color(0xff7FFFD4),
        directionColorBegin: Alignment.topLeft,
        directionColorEnd: Alignment.bottomRight,
      ),
    );

四宙拉、獲取到數(shù)據(jù)前紅色報(bào)錯(cuò)界面處理

1证膨、思路

state生命周期setState -- 在網(wǎng)絡(luò)數(shù)據(jù)得到之前添加一個(gè)loading框即可

2、解決：

class LoadingUtil {
  static Widget loading() {
    return Center(
      child: CircularProgressIndicator(
        strokeWidth: 2.0,
      ),
    );
  }
}

五鼓黔、Flutter中webview

1. 添加依賴

flutter_webview_plugin: ^0.3.4

2.使用

class _WebViewScreen extends State<WebViewScreen> {
  @override
  Widget build(BuildContext context) {
    var title = widget.title;
    var url = widget.url;
    return WebviewScaffold(
      url: url,
      appBar: AppBar(
        title: title,
      ),
    );
  }
}

六央勒、列表刷新

1. 添加依賴

pull_to_refresh: ^1.5.4

2.獲取刷新控制器

initialRefresh: false首次是否刷新

RefreshController _refreshController =
      new RefreshController(initialRefresh: false);

3.獲取或者刷新文章列表

記得關(guān)閉刷新控件

void getArticleList() async {
    _page = 0;
    await ApiService().getSquareList(_page).then((value) {
      var data = json.decode(value.toString());
      _refreshController.refreshCompleted();
      setState(() {
        ArticleModel _articleModel = ArticleModel.fromJson(data);
        _articles = _articleModel.data.datas;
      });
    });
  }

4. 獲取更多文章列表

記得關(guān)閉加載更多控件

getMoreSquareList() async {
    _page++;
    await ApiService().getSquareList(_page).then((value) {
      var data = json.decode(value.toString());
      _refreshController.loadComplete();
      setState(() {
        ArticleModel _articleModel = ArticleModel.fromJson(data);
        _articles.addAll(_articleModel.data.datas);
      });
    });
  }

5.構(gòu)建頁面的時(shí)候添加刷新控件

@override
  Widget build(BuildContext context) {
    if (_articles.length <= 0) return LoadingUtil.loading();
    return SmartRefresher(
      enablePullDown: true,
      enablePullUp: true,
      header: MaterialClassicHeader(),
      footer: RefreshFooter(),
      controller: _refreshController,
      onRefresh: getArticleList,
      onLoading: getMoreSquareList,
      child: ListView.builder(
        itemBuilder: itemView,
        itemCount: _articles.length,
        controller: _scrollController,
      ),
    );
  }

6.自定義腳布局

/// 自定義 FooterView
class RefreshFooter extends CustomFooter {
  @override
  double get height => 40;

  @override
  FooterBuilder get builder => (context, mode) {
        Widget body;
        if (mode == LoadStatus.idle) {
          body = Text("上拉加載更多~");
        } else if (mode == LoadStatus.loading) {
          body = Wrap(
            spacing: 6,
            children: <Widget>[
              CupertinoActivityIndicator(),
              Text("加載中..."),
            ],
          );
        } else if (mode == LoadStatus.failed) {
          body = Text("加載失敗，點(diǎn)擊重試~");
        } else {
          body = Text("沒有更多數(shù)據(jù)了~");
        }
        return Container(
          height: 40,
          child: Center(child: body),
        );
      };
}

最后：總結(jié)

Flutter簡介澳化、環(huán)境搭建崔步、Dart語法基礎(chǔ)
FLutter項(xiàng)目框架搭建：側(cè)滑、底部導(dǎo)航
Flutter項(xiàng)目：首頁輪播+列表實(shí)現(xiàn)多布局缎谷，刷新
Flutter項(xiàng)目廣場：列表展示網(wǎng)絡(luò)數(shù)據(jù)井濒、復(fù)雜布局
Flutter項(xiàng)目首頁：列表、多布局
FLutter項(xiàng)目公眾號(hào)：網(wǎng)絡(luò)獲取公眾號(hào)數(shù)據(jù)列林，使用TabBar與TabBarView實(shí)現(xiàn)頁面切換瑞你、Widget復(fù)用
Flutter項(xiàng)目體系：完成體系功能，webview展示詳情頁希痴、流式布局
Flutter項(xiàng)目導(dǎo)航頁（實(shí)現(xiàn)頁面跳轉(zhuǎn)者甲、傳值、回傳值）砌创、歡迎頁實(shí)現(xiàn)
紅屏處理
倒計(jì)時(shí)

Flutter項(xiàng)目

一、 輪播圖

二忆绰、 延遲

三、 Flutter導(dǎo)航頁之intro_slider

四宙拉、獲取到數(shù)據(jù)前紅色報(bào)錯(cuò)界面處理

1证膨、思路

2、解決：

五鼓黔、Flutter中webview

1. 添加依賴

2.使用

六央勒、列表刷新

1. 添加依賴

2.獲取刷新控制器

3.獲取或者刷新文章列表

4. 獲取更多文章列表

5.構(gòu)建頁面的時(shí)候添加刷新控件

6.自定義腳布局

最后：總結(jié)

一、輪播圖

二忆绰、延遲