flutter 轮播

注意:         图片链接是https的

在pubspec.yaml  导入库

flutter_swiper : ^1.1.4

  dio : ^1.0.9


import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

import 'dart:async';

import 'package:dio/dio.dart';

class HomePage extends StatefulWidget {

  _HomePageState createState() => _HomePageState();

}

class _HomePageState extends State {

  Response img;

  List imglist;

  int imgcount=0;

  var arr=["https://p4.ssl.cdn.btime.com/dmfd/480_270_/t012789cf3b81147246.jpg",

  "https://p4.ssl.cdn.btime.com/dmfd/480_270_/t0107a9fbf9e45767d7.jpg"


  ];

  @override

    void initState() {

      // TODO: implement initState

      super.initState();

      imget();

    }

    Future imget() async {

    Dio dio = new Dio();

    img = await dio.get(Constant.apiUrl + 'app/swiper');

    if(img.statusCode==200){

        setState(() {

          imglist = img.data;

          imgcount = imglist.length;

          print(imgcount);

        });

    }

  }

    @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        backgroundColor: Color.fromARGB(255, 255, 219, 79),

          primary: true,

          elevation: 0.0,

          title: new Container(

            decoration: new BoxDecoration(

                border: new Border.all(

                    width: 1.0, color: Color.fromARGB(255, 226, 226, 226)),

                borderRadius: new BorderRadius.all(Radius.circular(5.0)),

                color: Color.fromARGB(255, 255, 255, 255)),

            alignment: Alignment.center,

            height: 30.0,

            child: new Row(

              children: [

                new Expanded(

                    child: new Icon(Icons.search,

                        size: 17.0, color: Color.fromARGB(255, 226, 226, 226)),

                    flex: 1),

                new Expanded(

                    child: new Text('热门',

                        style: TextStyle(

                            color: Color.fromARGB(255, 226, 226, 226),

                            fontSize: 17.0)),

                    flex: 9)

              ],

            ),

          ),

      ),

      body: Container(

          width: MediaQuery.of(context).size.width,

          height: 200.0,

          child: Swiper(

            itemBuilder: _swiperBuilder,

            itemCount:2,

            pagination: new SwiperPagination(

                builder: DotSwiperPaginationBuilder(

              color: Colors.black54,

              activeColor: Colors.white,

            )),


            scrollDirection: Axis.horizontal,

            autoplay: true,

            onTap: (index) => print('点击了第$index个'),

          )),

    ); 

  }

  Widget _swiperBuilder(BuildContext context, int index) {

    return (Image.network(

      arr[index],

      fit: BoxFit.fill,

    ));

  }

}

你可能感兴趣的:(flutter 轮播)