Как нарисовать пунктирную кривую, соединяющую две точки в флаттере

Question

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

Я попробовал следующее:

• Создать Row с mainAxisAlignment: MainAxisAlignment.Center.
• Разделите Row на три части, используя Container.
• Обернутая середина Container имеет Flexible, чтобы занять все доступное пространство. Используйте borderRadius, чтобы получить закругленную границу.
• Используйте свойство Container transform, чтобы перевести два контейнера так, чтобы они опустились ниже конечной точки границы.

Результат

Однако приведенная выше идея не работает по следующим причинам:

• Пользовательский интерфейс не отображается согласно конструкции. Элементы z-index различны.
• Центральный контейнер имеет полную границу раунда.
• Интерфейс пользователя некорректно отображается в разных ориентациях.

После чтения форумы и блоги, я думаю, CustomPainter или ClipPath должны быть хорошими кандидатами на это. Любая помощь с благодарностью. Заранее спасибо.

Answer 1

Я думаю, CustomPainter - лучший подход. Этот пост может помочь вам в достижении ваших целей: { ссылка }

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

GlobalKey nyPointKey = GlobalKey();
Point(key: nyPointKey);
RenderBox box = key.currentContext.findRenderObject();
Offset position = box.localToGlobal(Offset.zero);