【Flutter旅游APP】轮播图Banner

详情请参考:https://pub.dev/packages/flutter_swiper#-installing-tab-

step1:
在pubspec.yaml中设置

	dependencies:
 		 flutter_swiper: ^1.1.6

点击右上pub get安装

step2:
导入头文件

import 'package:flutter_swiper/flutter_swiper.dart';

home_page.dart

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

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  List _imageUrls = [
    'https://desk-fd.zol-img.com.cn/t_s2560x1440c5/g5/M00/0C/08/ChMkJl3XbhCIJSrqAAxizABaJN8AAvXUgBvTjYADGLk516.jpg',
    'https://desk-fd.zol-img.com.cn/t_s2560x1440c5/g2/M00/0A/0C/ChMlWl1UvBGIPMUQADWkWWYO9DcAAMkeAMR56YANaRx249.jpg',
    'https://desk-fd.zol-img.com.cn/t_s2560x1440c5/g5/M00/01/06/ChMkJ1on59WAVS6qATfERjoD4Lc410.jpg'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              height: 190,
              child: Swiper(
                itemCount: _imageUrls.length,//轮播页个数
                autoplay: true,//自动轮播
                itemBuilder: (BuildContext context, int index){
                  return Image.network(
                    _imageUrls[index],
                    fit: BoxFit.fill,
                  );
                },
                pagination: SwiperPagination(),//页码指示器
              ),
            )
          ],
        )
      )
    );
  }
}

【Flutter旅游APP】轮播图Banner_第1张图片

你可能感兴趣的:(Flutter)