flutter第三方包

264 阅读2分钟

第三方包必须在pubspec.ymal中下载 然后在使用的地方进行引入

dio 获取数据

http 获取数据

获取数据可以详见之前的笔记

flutter_swiper 轮播图

flutter_swiper: ^1.1.6

return Scaffold(
  appBar: AppBar(
    title: Text('轮播图列表'),
  ),
  body: AspectRatio(
    aspectRatio: 16/9,
    child: Swiper(
    itemBuilder: (BuildContext context, int index) {
      return new Image.network(
        imgList[index]["url"],
        
      );
    },
    itemCount: imgList.length,
    pagination: new SwiperPagination(),
    control: new SwiperControl(),
  ),
  )
  
);
}

url_launcher

用来打开外部应用 比如点击支付宝 会显示到支付宝的页面

url_launcher: ^5.1.3

return Scaffold(
  appBar: AppBar(title: Text('外部应用'),),
  body: Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        RaisedButton(
          child: Text('打开浏览器'),
          onPressed: () async {
            const url='http://www.baidu.com';
            if(await canLaunch(url)){
              await launch(url);
            }else{
              throw "Could not launch $url";
            }
          },
        ),
        RaisedButton(
          child: Text('拨打电话'),
          onPressed: () async {
            const tel = 'tel:10086';
            if(await canLaunch(tel)){
              await launch(tel);
            }else{
              throw 'Could not launch $tel ';
            }
          },
        ),
         RaisedButton(
          child: Text("发送短信"),
          onPressed: () async {
            const tel = "sms:10086";
            if(await canLaunch(tel)){
              await launch(tel);
            }else{
              throw "Conld not launch $tel";
            }
          },
        ),
        RaisedButton(
          child: Text('打开支付宝'),
          onPressed:() async {
            const url = 'alipays://';
            if(await canLaunch(url)){
              await launch(url);
            }else{
              throw 'Could not launch $url';
            }
          }
        ),
        RaisedButton(
          child: Text('打开微信'),
          onPressed:() async {
            const url = 'weixin://';
            if(await canLaunch(url)){
              await launch(url);
            }else{
              throw 'Could not launch $url';
            }
          }
        )
      ],
    ),
  ),
);

device_info

获取设置的信息 逛淘宝时 会根据你的设备号获取你喜欢的类型 然后可以给你推荐类似的东西

device_info: ^0.4.0+2

class DeviceDemo extends StatefulWidget {


  @override
  _DeviceDemoState createState() => _DeviceDemoState();
}

class _DeviceDemoState extends State<DeviceDemo> {

  @override
  void initState() {
    _getDeviceInfo();
    // TODO: implement initState
    super.initState();
  }

  _getDeviceInfo() async {
    DeviceInfoPlugin deviceInfo = DeviceInfoPlugin();
    AndroidDeviceInfo androidInfo = await deviceInfo.androidInfo;
    print('设备号 ${androidInfo.androidId}');  
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('设备信息'),),
      body:Center(
        child: Text('看控制台,信息已经打印到控制台了'),
      )
    );
  }
}

shared_preferences

类似于vue中的Store(vuex) 可以实现所有的组件都可以获取这个值 例如浏览器中的localstorage、cookie

shared_preferences: ^0.5.3+4

可以在lib下建一个文件夹comment 在这个下面新建Storage.dart 在这里引入

import 'package:shared_preferences/shared_preferences.dart';

class Storage{
  static Future<void> setString(key,value) async{
   SharedPreferences prefs = await SharedPreferences.getInstance();
   prefs.setString(key, value);
  }

  static Future<String> getString(key) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    return prefs.getString(key);
  }

  static Future<void> remove(key) async {
    SharedPreferences prefs = await SharedPreferences.getInstance();
    prefs.remove(key);
  }

在lib下建一个Storage.dart 在这里可以进行保存、获取、删除数据 在这里引入公共的Storage.dart 这样才可以对数据操作

import 'package:flutter/material.dart';
import './comment/Storage.dart';

class storage extends StatefulWidget {
  @override
  _storageState createState() => _storageState();
}

class _storageState extends State<storage> {


  _getData() async {
    var username = await Storage.getString('name');
    print(username);
  }

  _removeData() async {
    await Storage.remove('name');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('本地存储'),
      ),
      body: Center(
        child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
          RaisedButton(
            child: Text('保存数据'),
            //设置方法保存数据
            onPressed:() async {
              await Storage.setString('name', 'wangcai');
            },
          ),
          SizedBox(height: 10),
          RaisedButton(
            child: Text('获取数据'),
            onPressed: _getData,
          ),
          SizedBox(height: 10),
          RaisedButton(
            child: Text('清除数据'),
            onPressed: _removeData,
          )
        ]),
      ),
    );
  }
}

connecticity

可以使用这个进行判断使用的是什么网络 无线还是4g

connectivity: ^0.4.4

class NetworkDemo extends StatefulWidget {
  @override
  _NetworkDemoState createState() => _NetworkDemoState();
}

class _NetworkDemoState extends State<NetworkDemo> {
  var subscription;
  String _stateText;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    subscription = Connectivity().onConnectivityChanged.listen((ConnectivityResult result) {
      if(result == ConnectivityResult.wifi){
        _stateText = '处于wifi';
      }else if(result == ConnectivityResult.mobile){
        _stateText = '处于4g';
      }else{
        _stateText = '没有网络';
      }
    });
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('测试网络'),),
      body: Center(
        child: Text('${_stateText}'),
      ),
    );
  }
}

video_player

播放视频 没有快进 非常简单的

video_player: ^0.10.2+1

class _VideoDemoState extends State<VideoDemo> {
  var _controller;
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _controller = VideoPlayerController.network(
        'http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.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 Scaffold(
      appBar: AppBar(title: Text('视频播放'),),
      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();
  }
}

amap_location

获取地理位置

amap_location: ^0.2.0

class LocationDemo extends StatefulWidget {
  @override
  _LocationDemoState createState() => _LocationDemoState();
}

class _LocationDemoState extends State<LocationDemo> {

  double _longitude=0;
  double _latitude=0;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _getLocation();
  }

  _getLocation() async {
    //启动一下
    await AMapLocationClient.startup(new AMapLocationOption( desiredAccuracy:CLLocationAccuracy.kCLLocationAccuracyHundredMeters));
   //获取地理位置
    var result = await AMapLocationClient.getLocation(true);
    // print(result);

    setState(() {
     this._latitude = result.latitude;
     this._longitude = result.longitude; 
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('获取地址'),),
      body: Column(
        children: <Widget>[
          Text('经度:${this._longitude}'),
          Text('纬度:${this._latitude}'),

        ],
      )
    );
  }
}

image_picker

可以实现拍照 选择图片 上传

选择图片和拍照的区别

图片就是source里面的source: ImageSource.camera

拍照是source: ImageSource.gallery

import 'dart:io';

import 'package:flutter/material.dart';

import 'package:image_picker/image_picker.dart';

import 'package:dio/dio.dart';

class ImageDemo extends StatefulWidget {
  
  @override
  _ImageDemoState createState() => _ImageDemoState();
}

class _ImageDemoState extends State<ImageDemo> {
  File _image;
  //拍照
  Future _getImage() async {
   var image = await ImagePicker.pickImage(source: ImageSource.camera);
   setState(() {
    this._image = image; 
   });
   _uploadImage(image);
   
  }
    //从相册中选择图片
  _openGallery() async {
    var image = await ImagePicker.pickImage(source: ImageSource.gallery);
    setState(() {
      this._image = image;
    });
    _uploadImage(image);
  }
    //上传图片
  _uploadImage(_imageDir) async {
    FormData formData = new FormData.from({
      "name": "zhangsna 6666666666",
      "age": 20,
      "sex":"男",
      "file":new UploadFileInfo(_imageDir, "xxx.jpg"),
    });
     var response = await Dio().post("http://192.168.1.101:3000/image", data: formData);

      print(response);
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('照片'),),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            RaisedButton(
              child: Text('拍照'),
              onPressed: _getImage
            ),
            RaisedButton(
              child: Text('选择图片'),
              onPressed: _openGallery
            ),
            _buildImage()
          ],
      ),
      )
    );
  }

    //定义一个组件显示图片
  Widget _buildImage(){
      if(this._image==null){
        return Text("请选择图片...");
      }
      return Image.file(this._image);

  }
}