使用 flutter_swiper 輪播庫。

1 全屏輪播

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

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

  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  List<Map> imgList = [
    {"url": "https://www.itying.com/images/flutter/1.png"},
    {"url": "https://www.itying.com/images/flutter/2.png"},
    {"url": "https://www.itying.com/images/flutter/3.png"},
    {"url": "https://www.itying.com/images/flutter/4.png"}
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("測試"),
      ),
      body: new Swiper(
        itemBuilder: (BuildContext context, int index) {
          return new Image.network(
            imgList[index]['url'],
            fit: BoxFit.fill,
          );
        },
        itemCount: imgList.length,
        pagination: new SwiperPagination(),
        control: new SwiperControl(),
        index: 0,
        loop: true,
        autoplay: true,
        onTap: (int index) {
          // 點(diǎn)擊觸發(fā)
          print(index);
        },
        onIndexChanged: (int index) {
          // 當(dāng)用戶手動拖拽或者自動播放引起下標(biāo)改變的時候調(diào)用
          print(index);
        },
      ),
    );
  }
}

效果

2 頂部輪播自適應(yīng)

使用 AspectRatio 結(jié)合實(shí)現(xiàn)效果杭抠，設(shè)置對應(yīng)的比例凹耙。

import 'package:flutter/material.dart';

import 'package:flutter_swiper/flutter_swiper.dart';

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

  _FormDemoPageState createState() => _FormDemoPageState();
}

class _FormDemoPageState extends State<FormDemoPage> {
  List<Map> imgList = [
    {"url": "https://www.itying.com/images/flutter/1.png"},
    {"url": "https://www.itying.com/images/flutter/2.png"},
    {"url": "https://www.itying.com/images/flutter/3.png"},
    {"url": "https://www.itying.com/images/flutter/4.png"}
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("測試"),
      ),
      body: Column(
        children: <Widget>[
          Container(
            width: double.infinity,
            child: AspectRatio(
              aspectRatio: 16 / 9,
              child: new Swiper(
                itemBuilder: (BuildContext context, int index) {
                  return new Image.network(
                    imgList[index]['url'],
                    fit: BoxFit.fill,
                  );
                },
                itemCount: imgList.length,
                pagination: new SwiperPagination(),
                control: new SwiperControl(),
                index: 0,
                loop: true,
                autoplay: true,
                onTap: (int index) {
                  // 點(diǎn)擊觸發(fā)
                  print(index);
                },
                onIndexChanged: (int index) {
                  // 當(dāng)用戶手動拖拽或者自動播放引起下標(biāo)改變的時候調(diào)用
                  print(index);
                },
              ),
            ),
          ),
          Row(
            children: <Widget>[Text('繼續(xù)布局')],
          ),
        ],
      ),
    );
  }
}

效果