Swiper

flutter_swiper_view: ^1.1.8

import 'package:flutter_swiper_view/flutter_swiper_view.dart';

Container(
  width: double.infinity,
  height: 150,
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 1),
  ),
  child: Swiper(
    itemBuilder: (context, index) {
      final steps =
          AboutUsdata?.desc.aboutTwo.purchaseSteps ?? [];
      // 再获取当前索引的step（此时steps已非空，index合法）
      final step = steps[index];
      return Container(
        width: double.infinity,
        height: 150,
        child: Row(
          children: [
            Expanded(
              flex: 1,
              child: SizedBox(
                width: 120,
                height: 120,
                child: Image.network(
                  '${step.imgUrl}',
                  fit: BoxFit.cover,
                ),
              ),
            ),
            SizedBox(width: 8),
            Expanded(
              flex: 2,
              child: Column(
                crossAxisAlignment:
                    CrossAxisAlignment.start,
                children: [
                  Padding(
                    padding: EdgeInsets.only(top: 12),
                    child: Text(
                      '${step.title}',
                      style: TextStyle(
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  SizedBox(height: 2),
                  Text(
                    '${step.desc}',
                    softWrap: true, // 允许软换行
                    style: TextStyle(),
                  ),

                  // Text('123'), // 增加一些间距
                ],
              ),
            ),
          ],
        ),
      );
    },
    itemCount:
        AboutUsdata!.desc.aboutTwo.purchaseSteps.length,
    pagination: SwiperPagination(
      builder: DotSwiperPaginationBuilder(
        activeColor: Color(0XFF009946), // 选中圆点颜色
        color: Colors.grey[300]!, // 未选中圆点颜色
        size: 8, // 未选中圆点大小
        activeSize: 8, // 选中圆点大小
      ),
      alignment: Alignment.bottomCenter, // 指示器位置（底部居中）
      margin: EdgeInsets.only(
        bottom: 0,
        top: 0,
      ), // 指示器与底部的距离
    ),
  ),
)