Оберните виджеты, чтобы получить сложный эффект, обычно наблюдаемый при выборе нескольких пользователей

Question

Я работаю над делом, в котором я выбираю пользователей, и это создает эффект сложенной монеты.

Я делаю это с помощью переноса (на тот случай, если пользователь выберет гораздо больше пользователей, чем тех, кто помещается в один ряд):

  return Wrap(
    spacing: -18,
    direction: Axis.horizontal,
    children: <Widget>[
      EditAddSelectedPersons(
        iconData: state.selectedPersons.length > 0 ? Icons.edit : Icons.add,
        showLabel: state.selectedPersons.length > 0 ? false : true,
      ),
      ...state.selectedPersons.asMap().entries.map((MapEntry entry) => MultiSelectPersonAvatar(index: entry.key, person: entry.value,)),
    ]
  );

Некоторый дополнительный контекст:

MultiSelectPersonAvatar - это просто оболочка вокруг CircleAvatar.

EditAddSelectedPersons - это FlatButton.

Есть ли способ отменить " Сложив так, чтобы первый элемент находился сверху (прямо сейчас внизу), а следующий - под ним и так далее? Прямо сейчас первый находится внизу и идет вверх по z-индексу.

Итак, по сути:

Спасибо !

Answer 1

Так что я не мог изменить порядок расположения или ось z (индекс z для css людей). Вместо этого я создал пользовательский клипер, который обеспечил тот же эффект:

      return Wrap(
        spacing: -8,
        direction: Axis.horizontal,
        children: <Widget>[
          EditAddSelectedPersons(
            iconData: state.selectedPersons.length > 0 ? Icons.edit : Icons.add,
            showLabel: state.selectedPersons.length > 0 ? false : true,
          ),
          ...state.selectedPersons.asMap().entries.map((MapEntry entry) => MultiSelectPersonAvatar(index: entry.key, person: entry.value,)),
        ]
      );

А затем на MultiSelectPersonAvatar есть пользовательский клипер:

class MultiSelectPersonAvatar extends StatelessWidget {
  final Person person;
  final int index;

  const MultiSelectPersonAvatar({
    Key key,
    @required this.person,
    @required this.index,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ClipPath(
      clipper: index == 0 ? null : LeftThirdCircularNotchClipper(),
      child: FallBackAvatarB64( //This is a circle avatar really
        imageB64: person.personImageB64, 
        initials: Utils.getInitials(person.name), 
        circleBackground: Consts.coPersonListAvatarMain, 
        textStyle: Consts.tsCardInput, 
        radius: 18, 
        personId: person.id
      ),
    );
  }
}

И затем пользовательский клипер:

class LeftThirdCircularNotchClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(size.width, 0.0); //x, y
    path.lineTo(size.width, size.height);
    path.lineTo(4, size.height);
    path.quadraticBezierTo(size.width - 18, size.height/2, 4, 0); //x1, y1, x2, y2
    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

Это дает конечный эффект, который выглядит следующим образом:

Answer 2

Если я не правильно понял ваш вопрос, я считаю, что вы можете выполнить sh, установив:

verticalDirection: VerticalDirection.up,