dart 如何在flutter中创建水平滚动卡

hiz5n14c  于 2022-12-06  发布在  Flutter
关注(0)|答案(1)|浏览(157)

如何创建带指标的水平滚动卡,并且屏幕中只有一张卡?

rhfm7lfc

rhfm7lfc1#

您可以尝试使用banner_carousel。我认为它最适合您的需要。尝试customizedBanner属性来获取旋转幻灯片的卡:

BannerCarousel(
   animation: false,
   viewportFraction: 0.60,
   showIndicator: false,
   customizedBanners: [
        Container(
           decoration: BoxDecoration(
              border: Border.all(color: Colors.black,width: 2),),
              child: Image.network(BannerImages.banner1)),
        Container(
             margin: EdgeInsets.symmetric(horizontal: 20),
             decoration: BoxDecoration(
                  boxShadow: [
                     BoxShadow(
                        color: Colors.black.withOpacity(0.25),
                        spreadRadius: 0,
                        blurRadius: 4,
                        offset: Offset(0, 3),
                      ),
                    ],
               ),
              child: Image.network(BannerImages.banner2)),
         Container(
             margin: EdgeInsets.symmetric(horizontal: 20),
             decoration: BoxDecoration(
             border: Border.all(
                    color: Colors.green,
                    width: 3,
                  ),
                  borderRadius: BorderRadius.circular(50),
              image: DecorationImage(
              image: NetworkImage(
                        'https://flutter.github.io/assets-for-api-docs/assets/widgets/owl-2.jpg'),
              fit: BoxFit.cover,
              ),
           ),
       ),
    ],
),

相关问题