Блог

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

мой код:

 Scaffold(
        body: SafeArea(
          child: SingleChildScrollView(
            child: Align(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [

                  Padding(
                    padding: EdgeInsets.all(SizeConfig.blockSizeHorizontal * 2),
                    child: buildLocalImage('assets/images/shape.svg'),
                  ),
 

Ваши варианты следующие:

1. Отсечение с помощью CustomClipper класса
2. Рисование с использованием CustomPainter класса
3. Рисование с использованием RenderBox класса
4. Укладка обрезанных контейнеров с Stack классом
5. Использование изображений

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

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

Кроме того, вы можете использовать такой пакет, как flutter_svg, для встраивания формы SVG в ваше приложение. Это позволяет использовать обычные параметры подгонки для позиционирования фигуры.

Чтобы расположить логотип в соответствии с вашим макетом, вы должны расположить его поверх фона SVG. Для этого используйте виджет стека.