Flutter how to use drag and drop on container

Question

I have my widget which I need to use like and drag and drop. Like i can replace its position one to two or two to four and reorder the index.

My code

  var BlocksList = [
    {'Name': 'Get Out', 'Link': 'https://google.com'},
    {'Name': 'Get IN', 'Link': 'https://google.com'}
  ];

  ListView.builder(
    shrinkWrap: true,
    itemCount: BlocksList.length,
    itemBuilder: (context, i) {
      return Padding(
        padding: const EdgeInsets.only(
            left: 13, right: 13, bottom: 13),
        child: Container(
          child: Row(
            children: [
              Container(
                  child: SvgPicture.asset(
                      'images/menu.svg')),
              SizedBox(
                width: 14,
              ),
              Expanded(
                child: Container(
                  height: Height * 0.07,
                  decoration: BoxDecoration(
                      borderRadius:
                          BorderRadius.circular(5),
                      border: Border.all(
                          color: Color(0xffE6E6E6))),
                  child: Padding(
                    padding: const EdgeInsets.only(
                        left: 13, right: 13),
                    child: Row(
                        mainAxisAlignment:
                            MainAxisAlignment
                                .spaceBetween,
                        children: [
                          Row(
                            children: [
                              Container(
                                  child: SvgPicture.asset(
                                      'images/clip.svg')),
                              SizedBox(
                                width: 7,
                              ),
                              Column(
                                mainAxisAlignment:
                                    MainAxisAlignment
                                        .center,
                                crossAxisAlignment:
                                    CrossAxisAlignment
                                        .start,
                                children: [
                                  Text(
                                    BlocksList[i]['Name'].toString(),
                                    style: TextStyle(
                                      fontSize: 16,
                                      fontFamily:
                                          'SegoeUI-SemiBold',
                                      color:
                                          textGreyColor,
                                    ),
                                  ),
                                  SizedBox(
                                    height: 4,
                                  ),
                                  Text(
                                    BlocksList[i]['Link'].toString(),
                                    style: TextStyle(
                                        fontSize: 12,
                                        fontFamily:
                                            'SemiBold',
                                        color:
                                            textGreyColor),
                                  )
                                ],
                              ),
                            ],
                          ),
                          FlutterSwitch(
                            width: 52,
                            height: 32.5,
                            valueFontSize: 12.0,
                            toggleSize: 20.0,
                            toggleColor: _switchValue
                                ? Colors.white
                                : Color(0xffE6E6E6),
                            switchBorder: Border.all(
                              color: Color(0xffE6E6E6),
                              width: _switchValue
                                  ? 0
                                  : 1.0,
                            ),
                            activeColor: kPrimaryColor,
                            inactiveColor: Colors.white,
                            value: _switchValue,
                            onToggle: (val) {
                              setState(() {
                                _switchValue = val;
                              });
                            },
                          )
                        ]),
                  ),
                ),
              ),
            ],
          ),
        ),
      );
    })

Its look like this

What i need to do is adding drop and drop so i can move second container to first and so on. Not able to find any widget which is simply dragging custom containers

Answer 1

Above answer is also correct just not suitable with your code. You need to use ReorderableListView as mention above.

So your code will be look like this

   Container(
    height: 300,
    child: ReorderableListView(
      children: <Widget>[
        for (int index = 0;
            index < BlocksList.length;
            index++)
          Container(
            key: Key('$index'),
            child: Padding(
              padding: const EdgeInsets.only(
                  left: 13, right: 13, bottom: 13),
              child: Row(
                children: [
                  Container(
                      child: SvgPicture.asset(
                          'images/menu.svg')),
                  SizedBox(
                    width: 14,
                  ),
                  Expanded(
                    child: Container(
                      height: Height * 0.07,
                      decoration: BoxDecoration(
                          borderRadius:
                              BorderRadius.circular(5),
                          border: Border.all(
                              color: Color(0xffE6E6E6))),
                      child: Padding(
                        padding: const EdgeInsets.only(
                            left: 13, right: 13),
                        child: Row(
                            mainAxisAlignment:
                                MainAxisAlignment
                                    .spaceBetween,
                            children: [
                              Row(
                                children: [
                                  Container(
                                      child: SvgPicture.asset(
                                          'images/clip.svg')),
                                  SizedBox(
                                    width: 7,
                                  ),
                                  Column(
                                    mainAxisAlignment:
                                        MainAxisAlignment
                                            .center,
                                    crossAxisAlignment:
                                        CrossAxisAlignment
                                            .start,
                                    children: [
                                      Text(
                                        BlocksList[index]
                                                ['Name']
                                            .toString(),
                                        style: TextStyle(
                                          fontSize: 16,
                                          fontFamily:
                                              'SegoeUI-SemiBold',
                                          color:
                                              textGreyColor,
                                        ),
                                      ),
                                      SizedBox(
                                        height: 4,
                                      ),
                                      Text(
                                        BlocksList[index]
                                                ['Link']
                                            .toString(),
                                        style: TextStyle(
                                            fontSize: 12,
                                            fontFamily:
                                                'SemiBold',
                                            color:
                                                textGreyColor),
                                      )
                                    ],
                                  ),
                                ],
                              ),
                              FlutterSwitch(
                                width: 52,
                                height: 32.5,
                                valueFontSize: 12.0,
                                toggleSize: 20.0,
                                toggleColor: _switchValue
                                    ? Colors.white
                                    : Color(0xffE6E6E6),
                                switchBorder: Border.all(
                                  color: Color(0xffE6E6E6),
                                  width: _switchValue
                                      ? 0
                                      : 1.0,
                                ),
                                activeColor: kPrimaryColor,
                                inactiveColor: Colors.white,
                                value: _switchValue,
                                onToggle: (val) {
                                  setState(() {
                                    _switchValue = val;
                                  });
                                },
                              )
                            ]),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
      ],
      onReorder: (int oldIndex, int newIndex) {
        setState(() {
          if (oldIndex < newIndex) {
            newIndex -= 1;
          }
          final item = BlocksList.removeAt(oldIndex);
          BlocksList.insert(newIndex, item);
        });
      },
    ),
  ),

Answer 2

Try ReorderableListView. Applied example below:

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

  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  final List<int> _items = List<int>.generate(5, (int index) => index);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: SafeArea(
          child: ReorderableListView(
            children: _items
                .map(
                  (index) => MyContainer(
                    key: ValueKey(index), // Make sure you pass a unique key through here
                  ),
                )
                .toList(),
            onReorder: (int oldIndex, int newIndex) {
              setState(() {
                if (oldIndex < newIndex) {
                  newIndex -= 1;
                }
                final int item = _items.removeAt(oldIndex);
                _items.insert(newIndex, item);
              });
            },
          ),
        ),
      ),
    );
  }
}