Как написать текст на границе контейнера как заголовок / заголовок во флаттере

Question

Как мне написать «партнерство» (как показано на рисунке ниже) на границе контейнера

ожидаемый результат

Answer 1

Вы можете использовать CustomPainter или Пользовательский ShapeBorder, это пример использования ShapeBorder:

        class CustomBorderWidget extends StatelessWidget {
          @override
          Widget build(BuildContext context) {
            return Material(
              color: Colors.black,
              shape: _HexagonBorder(),
              child: Padding(
                padding: const EdgeInsets.symmetric(vertical: 10.0, horizontal: 30.0),
                child: Text(
                  "Partnership",
                  style: TextStyle(color: Colors.white, fontWeight: FontWeight.w600),
                ),
              ),
            );
          }
        }

        class _HexagonBorder extends ShapeBorder {
          const _HexagonBorder();

          @override
          EdgeInsetsGeometry get dimensions {
            return const EdgeInsets.only();
          }

          @override
          Path getInnerPath(Rect rect, {TextDirection textDirection}) {
            return getOuterPath(rect, textDirection: textDirection);
          }

          @override
          Path getOuterPath(Rect rect, {TextDirection textDirection}) {
            return Path()
              ..moveTo(rect.left + rect.width / 6.0, rect.top)
              ..lineTo(rect.right - rect.width / 6.0, rect.top)
              ..lineTo(rect.right, rect.top + rect.height / 2.0)
              ..lineTo(rect.right - rect.width / 6.0, rect.bottom)
              ..lineTo(rect.left + rect.width / 6.0, rect.bottom)
              ..lineTo(rect.left, rect.bottom - rect.height / 2.0)
              ..close();
          }

          @override
          void paint(Canvas canvas, Rect rect, {TextDirection textDirection}) {}

          // This border doesn't support scaling.
          @override
          ShapeBorder scale(double t) {
            return null;
          }
        }