Flutter how to make a lower border round with invisible other parties



  • Design needs to round down the bottom of the hat with invisible other parties. введите сюда описание изображения

    As you can see from the image, the bottom of the hat is a thin round line. The problem I've encountered is if I ask the container to borderRadius and try to hide any of the parties to the border, there's a mistake, boxDecoration Only if all sides can round the line border'а one colour, one thickness and one thickness style solid

        return Container(
          width: size.width,
          height: size.height * 0.3,
          decoration: BoxDecoration(
            color: theme.backgroundColor,
            border: Border(
              bottom: BorderSide(color: theme.primaryColor, width: 2),
            ),
            borderRadius: BorderRadius.only(
              bottomLeft: Radius.circular(25),
              bottomRight: Radius.circular(25),
            ),
          ),
          child: Center(
            child: Image.asset('assets/screens/a/images/header.png',
                fit: BoxFit.fill),
          ),
        );
    

    Text of error:

    ======== Exception caught by rendering library =====================================================
    The following assertion was thrown during paint():
    A borderRadius can only be given for a uniform Border.
    

    The following is not uniform:
    BorderSide.color
    BorderSide.width
    BorderSide.style

    Googled the subject, recommended the crutches from the extra view, but there was no normal answer.



  • I made the following decision. For border The container has a shadow.

        return Container(
          width: size.width,
          height: size.height * 0.3,
          decoration: BoxDecoration(
            color: theme.backgroundColor,
            boxShadow: <BoxShadow>[
              new BoxShadow(
                color: theme.primaryColor,
                offset: Offset(0, 1),
              ),
            ],
            borderRadius: BorderRadius.circular(30),
          ),
          child: Center(
            child: Image.asset('assets/screens/a/images/header.png',
                fit: BoxFit.fill),
          ),
        );
    

    The result was satisfactory.
    введите сюда описание изображения




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2