fule_swiper 0.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 62

fule_swiper #

Pub Version GitHub

一个简单的Swiper组件,它允许你在其中放置任意的组件。

开始 #

安装 #

在pubspec.yaml中添加引用

fule_swiper: ^0.1.2

下载插件

$ flutter pub get

引入 #

import 'package:fule_swiper/fule_swiper.dart';

上面演示的源码 #

import 'package:flutter/material.dart';
import 'package:fule_swiper/fule_swiper.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  List images = [
    {
      "src": "https://i.loli.net/2020/04/16/gpIVeN8a2m93nXt.jpg",
      "desc": "小船在水上"
    },
    {
      "src": "https://i.loli.net/2020/04/16/zRf7qoAlJV6kIcN.jpg",
      "desc": "冰雪覆盖"
    },
    {
      "src": "https://i.loli.net/2020/04/16/eQx6rlmXNiwUzPO.jpg",
      "desc": "绿色中的棕房子"
    },
  ];

  List<Widget> getImages() {
    List<Widget> _list = List();
    images.forEach((_item) {
      _list.add(Stack(
        children: <Widget>[
          Image.network(
            _item['src'],
            fit: BoxFit.fitHeight,
            width: 750,
            height: 1334,
          ),
          Align(
            alignment: Alignment(-0.9, 0.3),
            child: Text(
              _item['desc'],
              style: TextStyle(
                color: Colors.white,
                fontSize: 48,
              ),
            ),
          )
        ],
      ));
    });
    return _list;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Swiper(
            width: 750,
            height: 1334,
            autoplay: true,
            duration: 500,
            interval: 2000,
            indicatorActiveColor: Colors.white,
            indicatorColor: Colors.white38,
            indicatorRadius: 4,
            indicatorSpacing: 16,
            indicatorAlignment: Alignment(0, 0.95),
            children: getImages(),
          ),
        ),
      ),
    );
  }
}

参数 #

属性类型默认值必填说明组件版本
widthdouble100.0组件的宽度0.1.0
heightdouble100.0组件的高度0.1.0
childrenList<Widget>-子组件0.1.0
currentint0默认选中的下标0.1.0
autoplayboolfalse是否自动切换0.1.0
intervalint2000自动切换时间间隔0.1.0
durationint1000滑动动画时长0.1.0
curveCurveCurves.ease滑动动画0.1.0
indicatorDotbooltrue是否显示指示点0.1.2
indicatorColorColorColors.white指示点默认颜色0.1.0
indicatorActiveColorColorColors.white指示点选中颜色0.1.0
indicatorRadiusdouble4.0指示点半径0.1.0
indicatorSpacingdouble8.0指示点间距0.1.0
indicatorAlignmentAlignmentAlignment.bottomCenter指示点的位置0.1.2
onPageChangedbool-切换回调函数0.1.0

TODO #

  • [ ] 实现纵向滑动
  • [ ] 实现循环播放

[0.1.2] 2020-04-16 #

  • 修复indicatorDot无效的问题
  • 添加indicatorAlignment控制指示点位置
  • 更新了例子

[0.1.1] 2020-04-13 #

  • 把上次的CHANGELOG补上
  • 把更新了README

[0.1.0] 2020-04-13 #

  • 完善pubspec.yaml中的description
  • 把README中的样例放到了example目录下
  • 改了个版本号

[0.0.1] 2020-04-11 #

  • Swiper第一个版本

example/main.dart

import 'package:flutter/material.dart';
import 'package:fule_swiper/fule_swiper.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  MyApp({Key key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  List images = [
    {
      "src": "https://i.loli.net/2020/04/16/gpIVeN8a2m93nXt.jpg",
      "desc": "小船在水上"
    },
    {
      "src": "https://i.loli.net/2020/04/16/zRf7qoAlJV6kIcN.jpg",
      "desc": "冰雪覆盖"
    },
    {
      "src": "https://i.loli.net/2020/04/16/eQx6rlmXNiwUzPO.jpg",
      "desc": "绿色中的棕房子"
    },
  ];

  List<Widget> getImages() {
    List<Widget> _list = List();
    images.forEach((_item) {
      _list.add(Stack(
        children: <Widget>[
          Image.network(
            _item['src'],
            fit: BoxFit.fitHeight,
            width: 750,
            height: 1334,
          ),
          Align(
            alignment: Alignment(-0.9, 0.3),
            child: Text(
              _item['desc'],
              style: TextStyle(
                color: Colors.white,
                fontSize: 48,
              ),
            ),
          )
        ],
      ));
    });
    return _list;
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Swiper(
            width: 750,
            height: 1334,
            autoplay: true,
            duration: 500,
            interval: 2000,
            indicatorActiveColor: Colors.white,
            indicatorColor: Colors.white38,
            indicatorRadius: 4,
            indicatorSpacing: 16,
            indicatorAlignment: Alignment(0, 0.95),
            children: getImages(),
          ),
        ),
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  fule_swiper: ^0.1.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:fule_swiper/fule_swiper.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
23
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
62
Learn more about scoring.

We analyzed this package on Jul 10, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • fule_swiper that is a package requiring null.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.2
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test