Flutter 仿有道精品课（一）首页

image.png

效果图.gif

吾生也有涯，而知也无涯，以有涯随无涯，殆己！

首页轮播图

# 轮播图
  flutter_swiper: ^1.1.4

 /// banner组件
  Widget getBanner(List courseBannerList) {
    return Container(
      height: ScreenUtil().setHeight(250),
      // 高度 插件 flutter_screenutil
      child: Swiper(
        scrollDirection: Axis.horizontal,
        // 横向
        itemCount: courseBannerList.length,
        // 数量
        autoplay: true,
        // 自动翻页
        itemBuilder: (BuildContext context, int index) {
          //banner item 布局
          return Container(
            decoration: BoxDecoration(
                image: DecorationImage(
                    image: NetworkImage(courseBannerList[index].img),
                    fit: BoxFit.fill),
                borderRadius: BorderRadius.all(Radius.circular(10))),
          );
        },
        // 构建
        onTap: (index) {
          NavigatorUtils.goWebViewPage(context, courseBannerList[index].title,
              courseBannerList[index].url);
          print('点击了第${index}');
        },
        // 点击事件 onTap
        pagination: SwiperPagination(
            // 分页指示器
            alignment: Alignment.bottomCenter,
            // 位置 Alignment.bottomCenter 底部中间
            margin: const EdgeInsets.fromLTRB(0, 0, 0, 5),
            // 距离调整
            builder: DotSwiperPaginationBuilder(
                // 指示器构建
                space: ScreenUtil().setWidth(5),
                // 点之间的间隔
                size: ScreenUtil().setWidth(10),
                // 没选中时的大小
                activeSize: ScreenUtil().setWidth(12),
                // 选中时的大小
                color: Colors.black54,
                // 没选中时的颜色
                activeColor: Colors.white)),
        // 选中时的颜色
//            control: new SwiperControl(color: Colors.pink), // 页面控制器 左右翻页按钮
        viewportFraction: 0.85,
        // 当前视窗展示比例 小于1可见上一个和下一个视窗
        scale: 0.9, // 两张图片之间的间隔
      ),
    );
  }

首页数据是通过抓包获取的真实数据，存在本地的json，进行数据的处理

    //1. 读取json文件
    String jsonString = await rootBundle.loadString("assets/data/banner.json");
    //2.转成List或Map类型
    final jsonResult = json.decode(jsonString);

json转dart网站

整理布局以Listview嵌套，新上手的小伙伴锻炼写布局可以

image.png

GIthub 点我点我 具体实现都在这