Flutter可拖动ListItem报错：未找到Material Widget

嘿，我之前也踩过这个坑！这个错误的核心原因是：你使用的ListTile、Icon这类Material风格组件，必须在Material组件树的上下文中才能正常渲染。尤其是拖动操作里的Draggable反馈组件，它在拖动时会脱离原来的父组件上下文，这时候如果没有包裹Material，就会抛出这个错误，光用Container包裹是不够的~

下面给你几个关键的解决步骤，还有完整的可运行示例：

关键修复点 #

• 确保你的应用根组件是MaterialApp（这是Material组件正常工作的基础）
• 给Draggable的feedback属性对应的组件，外层包裹Material组件（而不是只包Container）
• 如果你自己实现拖动逻辑，记得用DragTarget来接收拖动的item

完整示例代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '可拖动列表示例',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const DragListScreen(),
    );
  }
}

class DragListScreen extends StatefulWidget {
  const DragListScreen({super.key});

  @override
  State<DragListScreen> createState() => _DragListScreenState();
}

class _DragListScreenState extends State<DragListScreen> {
  final List<String> _items = ['项目1', '项目2', '项目3', '项目4', '项目5'];

  // 处理拖动完成后的位置交换
  void _onAccept(int oldIndex, int newIndex) {
    setState(() {
      if (newIndex > oldIndex) {
        newIndex -= 1;
      }
      final item = _items.removeAt(oldIndex);
      _items.insert(newIndex, item);
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('可拖动列表')),
      body: ListView.builder(
        itemCount: _items.length,
        itemBuilder: (context, index) {
          return DragTarget<int>(
            onAccept: (data) => _onAccept(data, index),
            builder: (context, candidateData, rejectedData) {
              return Draggable<int>(
                data: index,
                feedback: Material(
                  elevation: 4,
                  child: Container(
                    width: MediaQuery.of(context).size.width,
                    padding: const EdgeInsets.symmetric(vertical: 16, horizontal: 16),
                    color: Colors.grey[200],
                    child: Text(
                      _items[index],
                      style: const TextStyle(fontSize: 16),
                    ),
                  ),
                ),
                childWhenDragging: Container(
                  color: Colors.grey[100],
                  height: 56,
                ),
                child: ListTile(
                  leading: const Icon(Icons.drag_indicator),
                  title: Text(_items[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

为什么这样能解决问题？ #

• MaterialApp作为根组件，提供了Material组件所需的主题、文本样式等上下文环境
• Draggable的feedback包裹了Material组件，确保拖动时显示的反馈内容在Material上下文中渲染，不会触发错误
• childWhenDragging用来显示拖动时原位置的占位，提升交互体验

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