flutter中一些插件的使用

fen同学
617 阅读2分钟

1、fluro

路由

github地址

./routers/routes.dart定义路由跳转

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import './router_handler.dart';

class Routes{
  static String root = '/';
  static String detailsPage = '/detail';
  static void configureRoutes(Router router){
    //404路由
    router.notFoundHandler = Handler(
      handlerFunc: (BuildContext context, Map<String, List<String>> params){
        print('#######: not fuond page');
      }
    );
    //详情页路由
    router.define(detailsPage, handler: detailHandler);
  }
}

./routers/router_handler.dart 定义handle传参

import 'package:fluro/fluro.dart';
import 'package:flutter/material.dart';
import '../pages/detail_page.dart';

Handler detailHandler = Handler(
  handlerFunc: (BuildContext context, Map<String, List<String>> params){
    String goodsId = params['id'].first;
    return DetailPage(goodsId);
  }
);

./routers/application.dart获得路由实例

import 'package:fluro/fluro.dart';

class Application{
  static Router router;
}

main.dart文件

import 'package:flutter/material.dart';
import 'package:fluro/fluro.dart';
import './pages/index_page.dart';
import './routers/routes.dart';
import './routers/application.dart';
void main(){
  runApp(ShopApp());
}

class ShopApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    //路由
    final Router router = Router();
    Routes.configureRoutes(router);
    Application.router = router;

    return MultiProvider(
      child: Container(
        child: MaterialApp(
          title: '测试',
          onGenerateRoute: Application.router.generator,
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primaryColor: Colors.pink
          ),
          home: IndexPage()
        ),
      )
    );
  }
}

使用

Widget _test(BuildContext context, int index){
    return InkWell(
      onTap: (){
        Application.router.navigateTo(context, '/detail?id=123');
      },
    );
}

2、provider

状态管理

github地址

/prodive/current_index.dart文件

import 'package:flutter/material.dart';

class CurrentIndexProvider with ChangeNotifier{
  int currentIndex = 0;

  changeIndex(int index){
    currentIndex = index;
    notifyListeners();
  }
}

main.dart文件中

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import './provide/current_index.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [//这里是关键注册通知
        ChangeNotifierProvider(create: (_) => CurrentIndexProvider()),
      ],
      child: Container(
        child: MaterialApp(
          title: '测试',
          debugShowCheckedModeBanner: false,
          theme: ThemeData(
            primaryColor: Colors.pink
          ),
          home: IndexPage()
        ),
      )
    );
  }
}

//更新值
Provider.of<CurrentIndexProvider>(context, listen: false).changeIndex(2);

//获取值
int currentIndex = Provider.of<CurrentIndexProvider>(context).currentIndex;

3、shared_preferences

数据本地存储，官方出的插件

github地址

save()async{
    SharedPreferences prefs = await SharedPreferences.getInstance();
    String cartString = prefs.getString('cartInfo'); //取出
    List<Map> tempList = cartString == null ? [] :  (json.decode(cartString.toString()) as List).cast();
    //操作tempList数据
    ...
    prefs.setString('cartInfo', json.encode(tempList).toString();); //存入
  }

4、flutter_screenutil

屏幕适配组件

github地址

// print('设备像素密度：${ScreenUtil.pixelRatio}');
// print('设备宽度：${ScreenUtil.screenWidth}');
// print('设备高度：${ScreenUtil.screenHeight}');
ScreenUtil.init(context, width: 750, height: 1334);//初始化屏幕数据

初始化后，使用方式如上代码所示

5、flutter_easyrefresh

上拉刷新，下拉加载

github地址

6、dio

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...

github地址

import 'dart:convert';
import 'dart:async';
import 'dart:io';
import 'package:dio/dio.dart';
import './service_url.dart';

const BaseService = 'http://xxx.com';
const pathService = {
  'home': BaseServiceTest + '/test',
};


Future request(url, {formData}) async{
  try {
    Response response;
    var dio = new Dio();
    dio.options.contentType = ContentType.parse('application/x-www-form-urlencoded').toString();
    
    print('请求接口：${pathService[url]}');
    
    if(formData == null){
      response = await dio.post(pathService[url]);
    } else {
      response = await dio.post(
        pathService[url], 
        data: formData,
      );
    }
    
    var res = json.decode(response.data);
    if(res['status'] == 1){
      return res['data'];
    } else {
      throw Exception('后台接口异常');
    }

  } catch (e) {
    return print('ERROR:======>$e');
  }
}

使用方式

getTest(String id) async{
    await request('test', formData: FormData.fromMap({"id": id})).then((data){
        //todo
    });
}

7、flutter_swiper

轮播图插件

github地址

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import '../../routers/application.dart';

class SwiperDiy extends StatelessWidget {

  final List<Map> swiperList;
  SwiperDiy({Key key, @required this.swiperList}):super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: ScreenUtil().setHeight(333),
      width: ScreenUtil().setWidth(750),
      child: Swiper(
        itemBuilder: (BuildContext context, index){
          return InkWell(
            onTap: (){
              Application.router.navigateTo(context, '/detail?id=${swiperList[index]['goodsId']}');
            },
            child: Image.network('${swiperList[index]['image']}', fit: BoxFit.fill),
          );
        },
        itemCount: swiperList.length,
        pagination: SwiperPagination(),
        autoplay: true,
      ),
    );
  }
}

8、url_launcher

一款支持android和IOS的插件，其中包含打开网址、发送邮件、拨打电话、以及发送信息功能。

github地址

void _launcherUrl(leaderPhone) async{
    String urlString = 'tel:' + leaderPhone;
    print('点击了');
    if(await canLaunch(urlString)){
      await launch(urlString);
    } else {
      throw '电话不能拨打';
    }
}

9、flutter_html

显示html内容

github地址

return Container(
    child: Html(
    data: goodsDetail
    ),
);

10、fluttertoast

toast

github地址

Fluttertoast.showToast(
    msg: "This is Center Short Toast",
    toastLength: Toast.LENGTH_SHORT,
    gravity: ToastGravity.CENTER,
    timeInSecForIos: 1,
    backgroundColor: Colors.red,
    textColor: Colors.white,
    fontSize: 16.0
);
avatar
文章
阅读
粉丝