Как сделать сегментированную цветную линию в флаттере?

Question

Я работаю над приложением Flutter. Я хочу принести дизайн изображения ниже в моем приложении. Для второй сегментированной строки я использую контейнер и виджет строки. Но для первой линии, как я могу подойти к дизайну. Возможно ли достичь этого во Флаттере? Должен ли я использовать виджет или изображение (SVG, JPG)?

Answer 1

Это можно сделать несколькими способами:

1. Вы можете сделать его SVG и отобразить его, используя flutter_svg
2. Вы можете сделать Row с кратным Container, как в:

Row(
  children: <Widget>[
    Flexible(
      flex: 1,
      child: Container(color: Colors.yellow),
    ),
    Flexible(
      flex: 1,
      child: Container(color: Colors.red),
    ),
  ]    
)

Изменяя значения color и flex, вы получите различные сегменты с различными размерами пропорциональности. Если вы хотите, чтобы все сегменты имели одинаковую ширину, просто оставьте одинаковое значение flex или просто используйте Exapanded вместо Flex.

Вы можете нарисовать его на холсте, используя CustomPaint, но я бы не стал его рекомендовать, поскольку его намного сложнее разрабатывать и поддерживать, но он полезен для более сложных форм и рисунков.