FLUTTER学习笔记--第三方组件


一、dio

1.dio是一个强大的Dart Http请求库

2.使用步骤

  • 在pubsepc.yaml中添加dio依赖

  • 安装依赖(在终端输入命令’flutter pub get’,自动下载)

  • 引入import’package.dio/dio.dart’

3.代码

class DioDemo extends StatelessWidget {
  const DioDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        child: Text('点击发送请求'),
        onPressed: () {
          getIpAddress();
        },
      ),
    );
  }

  void getIpAddress() async {
    try {
      final url = 'https://httpbin.org/ip';
      Response response = await Dio().get(url);
      String ip = response.data['origin'];
      print(ip);
    } catch (e) {
      print(e);
    }
  }
}

4.效果

e7b61404-9da3-472d-bb88-a75202ead187.gif

二、flutter_swiper

1.flutter_swiper是Flutter中最好的轮播组件,适配Andr和iOs

2.使用步骤

  • 在pubsepc.yaml中添加shared_preferences依赖

  • 安装依赖(在终端输入命令’flutter pub get’,自动下载)

  • 引入import ‘package:flutter_swiper/flutter_swiper.dart’

3.代码

class FlutterSwiperDemo extends StatelessWidget {
  final List<String> imgs = [
    'images/1.png',
    'images/2.png',
    'images/3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        Container(
          height: 200,
          child: Swiper(
            itemCount: imgs.length,
            itemBuilder: (context, index) {
              return Image.asset(
                imgs[index],
                fit: BoxFit.cover,
              );
            },
            pagination: SwiperPagination(), //轮播图片底下的指示点
            control: SwiperControl(), //左右箭头导航
          ),
        ),
        Container(
          height: 200,
          child: Swiper(
            itemCount: imgs.length,
            itemBuilder: (context, index) {
              return Image.asset(
                imgs[index],
                fit: BoxFit.cover,
              );
            },
            viewportFraction: 0.7,
            scale: 0.7,
          ),
        ),
        Container(
          height: 200,
          child: Swiper(
            itemCount: imgs.length,
            itemBuilder: (context, index) {
              return Image.asset(
                imgs[index],
                fit: BoxFit.cover,
              );
            },
            itemWidth: 300,
            layout: SwiperLayout.STACK,
          ),
        ),
        Container(
          height: 200,
          child: Swiper(
            itemCount: imgs.length,
            itemBuilder: (context, index) {
              return Image.asset(
                imgs[index],
                fit: BoxFit.cover,
              );
            },
            itemWidth: 300,
            itemHeight: 200,
            layout: SwiperLayout.TINDER,
          ),
        )
      ],
    );
  }
}

4.效果

0163b871-f492-4a4c-9623-3926daad834d.gif

三、shared_preferences

1.shared_preferences是一个本地数据缓存库

2.使用步骤

  • 在pubsepc.yaml中添加shared_preferences依赖

  • 安装依赖(在终端输入命令’flutter pub get’,自动下载)

  • 引入import’package.shared_preferences/shared_preferences.dart’

3.代码

class SharedPreferencesDemo extends StatelessWidget {
  const SharedPreferencesDemo({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        width: double.infinity,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: const [
            ElevatedButton(onPressed: _incrementCount, child: Text('递增')),
            ElevatedButton(onPressed: _decrementCount, child: Text('递减')),
            ElevatedButton(onPressed: _removeCount, child: Text('删除')),
            ElevatedButton(onPressed: _addMyCount, child: Text('设置字符串')),
            ElevatedButton(onPressed: _getMyCount, child: Text('获取字符串')),
            ElevatedButton(onPressed: _claerCount, child: Text('删除字符串'))
          ],
        ));
  }
}

_incrementCount() async {
  //获取保存实例
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  print('Pressed $counter times.');
  await prefs.setInt('counter', counter);
}

_decrementCount() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  int counter = prefs.getInt('counter') ?? 0;
  if(counter>0){
    counter--;
  }
  print('Pressed $counter times.');
  await prefs.setInt('counter', counter);
}

_removeCount() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.remove('counter');
  int counter = (prefs.getInt('counter') ?? 0) + 1;
  print('Pressed $counter times.');
}

_addMyCount() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.setString('hi', 'Hello World');
  String content = prefs.getString('hi') ?? "";
  print('设置的字符串内容时$content');
}

_getMyCount() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  String content = prefs.getString('hi') ?? "";
  print('获取字符串内容是$content');
}

_claerCount() async {
  SharedPreferences prefs = await SharedPreferences.getInstance();
  await prefs.clear();
}

4.效果

a4d7ca20-a4fc-44c4-abbd-f7e9c1dc4489.gif

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值