Home > Back-end >  How to create a custom border for container in Flutter?
How to create a custom border for container in Flutter?

Time:12-02

I tried to put a border to a container like this code:

              Container(
                padding: EdgeInsets.all(15.sp),
                decoration: BoxDecoration(
                  // color: Colors.yellow,
                  border: Border.all(
                    color: kPrimaryColor,
                    width: 7,
                    style: BorderStyle.solid,
                  ),
                ),
                child: QrImage(
                  data: controller.generatedCode,
                  version: QrVersions.auto,
                  size: 300.0,
                ),
              ),

The code above gives me a complete border

the border of the QR code, I want to implement a border like it

i

CodePudding user response:

Try this. It will work.

Container(
  child: Text(
    'This is a Container',
    textScaleFactor: 2,
    style: TextStyle(color: Colors.black),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    color: Colors.white,
    boxShadow: [
      BoxShadow(color: Colors.green, spreadRadius: 3),
    ],
  ),
  height: 50,
),

CodePudding user response:

I found it, using dotted_border package:

Widget get customBorder {
    Path customPath = Path()
      ..moveTo(0, 0)
      ..lineTo(0, 25)
      ..moveTo(0,0)
      ..lineTo(25, 0)
      ..moveTo(75,0)
      ..lineTo(100,0)
      ..lineTo(100,25)
      ..moveTo(0,75)
      ..lineTo(0, 100)
      ..lineTo(25, 100)
      ..moveTo(100,75)
      ..lineTo(100, 100)
      ..lineTo(75,100)
    ;
  return DottedBorder(
      customPath: (_) => customPath,
      color: Colors.indigo,
      dashPattern: [1, 1],
      strokeWidth: 2,
      child: Container(
        height: 100,
        width: 100,
        color: Colors.green.withAlpha(20),
      ),
    );
  }
  • Related