Блог

Как изменить порядок виджета стека (Перетаскиваемый виджет) при перетаскивании виджета. я хочу разработать приложение, похожее на рамми-игру, в котором виджеты будут перемешиваться в соответствии с требованиями пользователя, так же, как в игре рамми ниже приведено эталонное изображение

эталонное изображение

итак, ниже приведен мой код для отображения карт, но я не могу изменить порядок виджета стека.

 _showGroupCards() {
  // return _showRDwidget();
  if (cards.length == 0) {
    cards = [];
    cards.add(_createBoardList(3));
    cards.add(_createBoardList(5));
    cards.add(_createBoardList(3));
    cards.add(_createBoardList(3));
  }
  // cards.add(_createBoardList(5));
  return Center(
      child: ListView.builder(
          itemCount: cards.length,
          shrinkWrap: true,
          scrollDirection:
              Axis.horizontal, // physics: NeverScrollableScrollPhysics(),
          itemBuilder: (BuildContext context, int index) {
            CardInfo cmenu = cards[index];
            if (cmenu.value != null amp;amp; cmenu.value!.isEmpty) {
              return Container();
            }

            int gcardCount = cmenu.value.length;
            double sideCard = _getRatio(gcardCount);
            // double sideCard = deckCard!.width.apply(80);
            print("$gcardCount == $sideCard");
            return Container(
              // color: randomColor(),
              width: (sideCard * gcardCount), 
              child: FlatCardFan( 
                children: <Widget>[
                  for (final item in cmenu.value) 
                    getDragWidget(item) //Draggable widget with Text
                ],
                // onReorder: reorderData,
              ),
            );
          }));
}

class FlatCardFan extends StatelessWidget { 
final List<Widget> children;

/// Creates a flat card fan.
FlatCardFan({required this.children});

@override
Widget build(Object context) => Stack(
   fit: StackFit.loose,
   alignment: Alignment.centerLeft,
   
      children: List.generate(
          children.length,
          (index) => Align(
                alignment: Alignment(
                    -1.0   (index / (children.length - 1)) * 2.0, 0),
                child: children[index],
              )),
    );
}

class CardInfo {
var key;
var value; 
CardInfo({
  this.key,
  required this.value,
});
}

getDragWidget(CardInfo card) { 
  final Widget child = Container( 
      width: 200,
      height:50,
      child:   Container(
                  width: cardWidth,
                  height: cardHeight,
                  child: Text('${card.value}' ),

                )); 
  return Draggable<CardInfo>(
    maxSimultaneousDrags: 1,
    data: card,
    child: child,
    feedback: child,
    rootOverlay: true,
    childWhenDragging: Opacity(
      opacity: 0.1,
      child: child,
    ),
    onDragStarted: () {
      print("onDragStarted");
      setState(() {
        selectedCards=[];
      });
    },
    onDragCompleted: () {
      print("onDragCompleted");
    },
    onDraggableCanceled: (Velocity velocity, Offset offset) { 
    },
  );
}
 

может ли кто-нибудь помочь мне найти решение для перетаскивания и изменения порядка виджетов стека .