Flutter添加组件触发Dead Code/空安全错误及轮播指示器放置问题

根因说明 #

你遇到的两个报错均由代码结构逻辑错误导致：

• customListTile3方法声明返回Widget类型，但你没有给最外层Container加return语句，触发空安全返回值校验报错
• DotsIndicator是整个轮播的公共导航元素，不属于单张轮播卡片的内容，你把它放在了负责构建单张卡片的buildImage方法的return语句之后，属于永远不会被执行的死代码

修复步骤 #

1. 清理buildImage方法，删除末尾的DotsIndicator相关代码，该方法仅负责返回单张轮播卡片
2. 给customListTile3的最外层Container添加return语句，解决空安全报错
3. 在customListTile3的Column子节点列表中，和CarouselSlider平级的位置添加DotsIndicator，同时通过CarouselOptions的onPageChanged回调记录当前轮播激活索引（需要当前组件为StatefulWidget，在State中定义变量存储当前选中下标）

修正后代码 #

1. buildImage方法 #

@override
Widget buildImage(List<Datum> articles, String urlImage, int idx, BuildContext context) {
  return Container(
    margin: const EdgeInsets.all(2),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(5.0),
      boxShadow: const [
        BoxShadow(color: Colors.black12, blurRadius: 5, offset: Offset(0, 3)),
      ]
    ),
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Stack(
          alignment: Alignment.center,
          children: [
            GestureDetector(
              child: Container(
                height: 196,
                width: double.infinity,
                decoration: BoxDecoration(
                  image: DecorationImage(
                    fit: BoxFit.cover,
                    image: NetworkImage(articles[idx].imageUrl!),
                  ),
                  borderRadius: const BorderRadius.all(Radius.circular(5)),
                ),
                child: Container(
                  margin: const EdgeInsets.only(top: 120),
                  color: Colors.black45.withOpacity(0.4),
                  padding: const EdgeInsets.all(10.0),
                  child: Text(
                    articles[idx].title ?? '',
                    textAlign: TextAlign.left,
                    softWrap: true,
                    maxLines: 2,
                    overflow: TextOverflow.ellipsis,
                    style: const TextStyle(
                      color: Colors.white,
                      fontSize: 16,
                      fontWeight: FontWeight.w500
                    ),
                  ),
                ),
              ),
              onTap: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => NewsViewDetail(
                      id: articles[idx].id!,
                    ),
                  ),
                );
              },
            ),
          ]
        )
      ]
    )
  );
}

2. customListTile3方法 #

注：需确保当前组件为StatefulWidget，在State类中提前定义变量int _currentCarouselIndex = 0;存储轮播当前激活下标

Widget customListTile3(List<Datum> articles, int index, BuildContext context) {
  final urlImages = articles.map((item) => item.imageUrl!).toList();
  String time = DateFormat('d MMMM yy').format(
    DateTime.parse(articles[index].date!.toString()),
  );

  // 给外层Container添加return语句
  return Container(
    margin: const EdgeInsets.all(6),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(5.0),
      boxShadow: const [
        BoxShadow(color: Colors.white, blurRadius: 1, offset: Offset(0, 0)),
      ]
    ),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Center(
          child: CarouselSlider.builder(
            options: CarouselOptions(
              viewportFraction: 1,
              // 页面切换时更新当前激活索引
              onPageChanged: (newIndex, reason) {
                setState(() {
                  _currentCarouselIndex = newIndex;
                });
              },
            ),
            itemCount: articles.length,
            itemBuilder: (context, idx, realIndex) {
              return buildImage(articles, urlImages[idx], idx, context);
            },
          ),
        ),
        // 轮播下方直接加指示器，和轮播平级
        DotsIndicator(
          dotsCount: articles.length,
          position: _currentCarouselIndex.toDouble(),
          decorator: DotsDecorator(
            size: const Size.square(6.0),
            activeSize: const Size(22.0, 6.0),
            activeShape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5.0)),
            activeColor: Colors.blue,
            spacing: const EdgeInsets.all(3.0),
          ),
        ),
      ],
    ),
  );
}

内容的提问来源于stack exchange，提问作者gegentierversuche