Flutter轮播图展示插件banner

Flutter轮播图展示插件banner_image的使用

Banner Image 插件简介

banner_image 是一个用于在Flutter中创建轮播图的插件。它提供了多种样式和功能，如自动播放、点击事件等。

安装插件

首先，你需要将 banner_image 添加到你的 pubspec.yaml 文件中，并通过 flutter packages get 命令安装插件。

dependencies:
  banner_image: ^1.0.7

示例代码

下面是一个完整的示例代码，展示了如何使用 banner_image 插件创建轮播图。

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Banner'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({Key? key, required this.title}) : super(key: key);

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> list = [
    'assets/0.png',
    'assets/1.png',
    'assets/2.png',
    'assets/3.png',
    'assets/4.png',
    'assets/5.png',
    'assets/6.png'
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
                onPressed: () {
                  Navigator.push(context,
                      MaterialPageRoute(builder: (_) =&gt; const BannerScreen()));
                },
                child: const Text('Banner Screen')),
            const SizedBox(height: 15),
            ElevatedButton(
                onPressed: () {
                  Navigator.push(
                      context,
                      MaterialPageRoute(
                          builder: (_) =&gt; const HorizontalBannerScreen()));
                },
                child: const Text('Horizontal Banner Screen')),
            const SizedBox(height: 115),
            ElevatedButton(
              onPressed: () {
                Navigator.push(context,
                    MaterialPageRoute(builder: (_) =&gt; const SliderScreen()));
              },
              child: const Text("Slider Screen"),
            ),
          ],
        ),
      ),
    );
  }
}

class BannerScreen extends StatefulWidget {
  const BannerScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State&lt;BannerScreen&gt; createState() =&gt; _BannerScreenState();
}

class _BannerScreenState extends State&lt;BannerScreen&gt; {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Banner'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            BannerImage(
              itemLength: list.length,
              imageUrlList: list,
              selectedIndicatorColor: Colors.red,
              autoPlay: true,
              children: List.generate(list.length, (index) =&gt; Image.asset(
                list[index],
                fit: BoxFit.cover,
              ),),
              onTap: (int index) {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                  content: Text('On Tap' + index.toString()),
                ));
              },
            ),
            const SizedBox(height: 50),
            BannerImage(
              itemLength: list.length,
              children: List.generate(list.length, (index) =&gt; Image.asset(
                list[index],
                fit: BoxFit.cover,
              ),),
              selectedIndicatorColor: Colors.red,
              autoPlay: true,
              borderRadius: BorderRadius.circular(8),
              onTap: (int index) {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                  content: Text('On Tap' + index.toString()),
                ));
              },
            ),
            const SizedBox(height: 50),
            BannerImage(
              itemLength: list.length,
              children: List.generate(list.length, (index) =&gt; Image.asset(
                list[index],
                fit: BoxFit.cover,
              ),),
              borderRadius: BorderRadius.circular(8),
              selectedIndicatorColor: Colors.red,
              onTap: (int index) {
                ScaffoldMessenger.of(context).showSnackBar(SnackBar(
                  content: Text('On Tap' + index.toString()),
                ));
              },
            ),
          ],
        ),
      ),
    );
  }
}

class HorizontalBannerScreen extends StatefulWidget {
  const HorizontalBannerScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State&lt;HorizontalBannerScreen&gt; createState() =&gt; _HorizontalBannerScreenState();
}

class _HorizontalBannerScreenState extends State&lt;HorizontalBannerScreen&gt; {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Horizontal Banner'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            BannerImage(
              padding: const EdgeInsets.only(),
              itemLength: list.length,
              children: List.generate(list.length, (index) =&gt; Image.asset(
                list[index],
                fit: BoxFit.cover,
              ),),
              selectedIndicatorColor: Colors.red,
              autoPlay: true,
              scrollDirection: Axis.vertical,
            ),
            const SizedBox(height: 15),
            BannerImage(
              itemLength: list.length,
              children: List.generate(list.length, (index) =&gt; Image.asset(
                list[index],
                fit: BoxFit.cover,
              ),),
              borderRadius: BorderRadius.circular(8),
              selectedIndicatorColor: Colors.blue,
              indicatorColor: Colors.green.shade100,
              scrollDirection: Axis.vertical,
            ),
            const SizedBox(height: 15),
            BannerImage(
              aspectRatio: 22,
              itemLength: list.length,
              borderRadius: BorderRadius.circular(8),
              children: List.generate(list.length, (index) =&gt; Image.asset(
                list[index],
                fit: BoxFit.cover,
              ),),
              selectedIndicatorColor: Colors.red,
              withOutIndicator: true,
              scrollDirection: Axis.vertical,
            ),
            const SizedBox(height: 15),
            BannerImage(
              aspectRatio: 20 / 10,
              itemLength: list.length,
              borderRadius: BorderRadius.circular(8),
              children: List.generate(list.length, (index) =&gt; Image.asset(
                list[index],
                fit: BoxFit.cover,
              ),),
              selectedIndicatorColor: Colors.red,
              scrollDirection: Axis.vertical,
            ),
            const SizedBox(height: 30),
          ],
        ),
      ),
    );
  }
}

class SliderScreen extends StatefulWidget {
  const SliderScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State&lt;SliderScreen&gt; createState() =&gt; _SliderScreenState();
}

class _SliderScreenState extends State&lt;SliderScreen&gt; {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Slider'),
      ),
      body: SingleChildScrollView(
        child: Column(
          children: [
            BannerImage(
              aspectRatio: MediaQuery.of(context).size.width /
                  (MediaQuery.of(context).size.height),
              padding: const EdgeInsets.only(),
              itemLength: list.length,
              children: List.generate(list.length, (index) =&gt; Image.asset(
                list[index],
                fit: BoxFit.cover,
              ),),
              selectedIndicatorColor: Colors.red,
              autoPlay: false,
              withOutIndicator: true,
              fit: BoxFit.scaleDown,
            ),
          ],
        ),
      ),
    );
  }
}

更多关于Flutter轮播图展示插件banner_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

eggper 1楼•7 天前

更多关于Flutter轮播图展示插件banner_image的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter中使用banner_image插件来实现轮播图展示的示例代码。这个插件可以帮助你快速实现一个具有轮播功能的图片展示组件。

首先，你需要在你的pubspec.yaml文件中添加banner_image依赖：

dependencies:
  flutter:
    sdk: flutter
  banner_image: ^0.0.2  # 请注意版本号，根据最新的可用版本进行替换

然后运行flutter pub get来获取依赖。

接下来，你可以在你的Dart文件中使用BannerImage组件来实现轮播图展示。以下是一个完整的示例代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Banner Image Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final List<String> imageUrls = [
    'https://example.com/image1.jpg',
    'https://example.com/image2.jpg',
    'https://example.com/image3.jpg',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Banner Image Demo'),
      ),
      body: Center(
        child: BannerImage(
          imageUrls: imageUrls,
          onPageChanged: (index) {
            print('Current image index: $index');
          },
          autoPlay: true, // 自动播放
          interval: 3000, // 自动播放间隔时间（毫秒）
          indicatorColor: Colors.white, // 指示器颜色
          indicatorActiveColor: Colors.blue, // 指示器激活颜色
          dotIncreasedColor: Colors.red, // 点增加的颜色（如果有这个功能）
          height: 200, // 轮播图高度
          width: double.infinity, // 轮播图宽度
        ),
      ),
    );
  }
}

在这个示例中，我们定义了一个包含图片URL的列表imageUrls，然后使用BannerImage组件来展示这些图片。BannerImage组件接收多个参数来配置轮播图的行为和样式，包括：

imageUrls: 图片URL列表。
onPageChanged: 页面改变时的回调函数。
autoPlay: 是否自动播放。
interval: 自动播放的间隔时间（毫秒）。
indicatorColor: 指示器的颜色。
indicatorActiveColor: 指示器激活时的颜色。
dotIncreasedColor: 点增加的颜色（如果插件支持这个功能）。
height: 轮播图的高度。
width: 轮播图的宽度。

请注意，由于插件版本和功能的更新，某些参数或功能可能会有所不同。因此，在实际使用时，请查阅最新的插件文档以获取最新的信息和可用的参数。