17*：Flutter之常见库

问题

 

目录

1：Toast

2：图片加载缓存cached_network_image

3：添加WebView加载网页

4：刷新加载库 flutter_easyrefresh

5：自动轮播控件flutter_swiper

6：视频播放器videoPlayer

7：网络请求库dio

预备

 

正文

1：Toast

1：添加依赖

  toast: ^0.1.3

2：导包

import 'package:toast/toast.dart';

3：调用

Toast.show("", context, duration: Toast.LENGTH_SHORT);

2：图片加载缓存cached_network_image

1.添加依赖

  cached_network_image: ^2.3.3

2.使用控件

CachedNetworkImage(
                  imageUrl: "",
                  placeholder: (context, url) =>  CircularProgressIndicator(),
                  errorWidget: (context, url, error) => Icon(Icons.error),
                )

3：添加WebView加载网页

1.添加依赖

dependencies:
    flutter_webview_plugin: ^0.2.1+2

2.使用前引入

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';

class MyWebView extends StatefulWidget {

  _MyWebView createState() => _MyWebView();

}

class _MyWebView extends State {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: WebviewScaffold(url: "https://www.baidu.com",
            // 允许网页缩放
            withZoom: true,
            // 允许LocalStorage
            withLocalStorage: true,
            withJavascript: true),
      )
    );
  }

}

4：刷新加载库 flutter_easyrefresh

顾名思义，EasyRefresh非常简单上手就能在Flutter应用上实现下拉刷新以及上拉加载操作，它支持几乎所有的Flutter控件。它与Android里面的库SmartRefreshLayout非常像，刷新加载风格可以div。

1.添加依赖

flutter_easyrefresh: ^2.1.0

2.属性介绍：

 EasyRefresh(
  // 是否开启控制结束加载
  enableControlFinishLoad: false,
  // 控制器    
  controller: _controller,
  // 自定义顶部上啦加载
  footer: ClassicalFooter(
    bgColor: Colors.white,
    //  更多信息文字颜色
    infoColor: KColor.refreshTextColor,
    // 字体颜色
    textColor: KColor.refreshTextColor,
    // 加载失败时显示的文字
    loadText: KString.loadFailedText,
    // 没有更多时显示的文字
    noMoreText: '',
    // 是否显示提示信息
    showInfo: false,
    // 正在加载时的文字
    loadingText: KString.loading,
    // 准备加载时显示的文字
    loadReadyText: KString.loadReadyText,
    // 加载完成显示的文字
    loadedText: KString.loadedText,
  )

3：使用

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyrefresh/easy_refresh.dart';

//刷新加载控件封装
class MyEasyRefresh extends StatelessWidget {
  EasyRefreshController easyRefreshController;
  Widget listView;

  MyEasyRefresh(this.listView) {
    easyRefreshController = EasyRefreshController();
  }

  @override
  Widget build(BuildContext context) {
    return EasyRefresh(
        controller: easyRefreshController,
        enableControlFinishRefresh: false,
        enableControlFinishLoad: false,
        header: ClassicalHeader(
            textColor: Colors.black87,
            refreshText: "往下拉，往下拉",
            refreshedText: "刷新完成",
            refreshingText: "正在刷新",
            refreshReadyText: "快放手"
        ),
        footer: ClassicalFooter(
            textColor: Colors.black87,
            loadText: "往上拉，往上拉",
            loadedText: "加载完成",
            loadingText: "正在加载",
            loadReadyText: "快放手"
        ),
        onRefresh: () async {
          print("刷新完成");
        },
        onLoad: () async {
          print("加载完成");
        },
        child: listView);
  }

}

5：自动轮播控件flutter_swiper

1.引入库

flutter_swiper: ^1.1.6

2.使用示例：

Swiper(
            itemBuilder: (BuildContext context,int index){
              return new Image.network("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1603442938191&di=6d134b40bcc1e448fa4654faaebdf827&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170312%2F325af66b3351496783fd3cb4750f6759_th.jpg",
                  fit: BoxFit.fill);
            },
            itemCount: 3,
            pagination: SwiperPagination(),
            controller: new SwiperController(),
          )

6：视频播放器videoPlayer

1.引入库

  video_player: ^0.11.1+2

2.使用示例：

import 'package:video_player/video_player.dart';
import 'package:flutter/material.dart';

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

class VideoApp extends StatefulWidget {
  @override
  _VideoAppState createState() => _VideoAppState();
}

class _VideoAppState extends State<VideoApp> {
  VideoPlayerController _controller;

  @override
  void initState() {
    super.initState();
    _controller = VideoPlayerController.network(
        'http://www.sample-videos.com/video123/mp4/720/big_buck_bunny_720p_20mb.mp4')
      ..initialize().then((_) {
        // Ensure the first frame is shown after the video is initialized, even before the play button has been pressed.
        setState(() {});
      });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Video Demo',
      home: Scaffold(
        body: Center(
          child: _controller.value.initialized
              ? AspectRatio(
                  aspectRatio: _controller.value.aspectRatio,
                  child: VideoPlayer(_controller),
                )
              : Container(),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            setState(() {
              _controller.value.isPlaying
                  ? _controller.pause()
                  : _controller.play();
            });
          },
          child: Icon(
            _controller.value.isPlaying ? Icons.pause : Icons.play_arrow,
          ),
        ),
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }
}

7：网络请求库dio

1.引入库

dio: ^3.0.10

2.使用示例：
简单用法：

    Response response;
    Dio dio = new Dio();
    response = await dio.get("");
    print(response.data.toString());

post传参请求：

FormData formData = new FormData.fromMap({
    "name": "wendux",
    "age": 25,
  });
response = await dio.post("", data: formData);

注意

 

引用

1：Flutter项目常用库

2：Flutter常用的库