插件依赖

概述

介绍常用的第三方插件和依赖

案例

错误与提示

轮播图

查看轮播图 carousel_slider 的 官网 如何使用。教程中使用版本号 4.2.1 会和 flutter 官方提供的主题 import 'package:flutter/material.dart'; 冲突，两个包都会导入 CarouselController，需要使用更高版本 5.1.1 可以解决该问题。升级后使用案例代码如下

import 'package:carousel_slider/carousel_slider.dart';
import 'package:carousel_slider/carousel_controller.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:netstorage/utils/screen_adapter_helper.dart';

/**
 * 轮播图组件
 */
class BannerWidget extends StatefulWidget {
  final List<String> bannerList;
  const BannerWidget({super.key,required this.bannerList});

  @override
  State<BannerWidget> createState() => _BannerWidgetState();
}

class _BannerWidgetState extends State<BannerWidget> {
  int _currentIndex = 0;
  CarouselSliderController _controller = CarouselSliderController();
  @override
  Widget build(BuildContext context) {
    final double width = MediaQuery.of(context).size.width;// 获取屏幕宽度
    return Stack(
      children: [
        CarouselSlider(
            items: widget.bannerList.map((item) => _tabImage(item,width)).toList(),
            carouselController: _controller,
            options: CarouselOptions(
              height: 160.px,
              autoPlay: true,
              viewportFraction: 1.0,
              onPageChanged: (index,reason){
                setState(() {
                  _currentIndex = index;
                });
              }
            ),
        )
      ],
    );
  }

  Widget _tabImage(String imgUrl, double width){
    return GestureDetector(
      onTap: (){
        //TODO 点击后跳转页面
      },
      child: Image.network(imgUrl, width: width, fit: BoxFit.cover)
    );
  }
}