CODEWITHSUNDEEP
flutterflutter-layout
Santiago Curvello
Santiago Curvello

Reputation: 182

How to shorten the length of a border?

I need a container that has these borders (those in the corners).

enter image description here

This is my code:

Container(
        decoration: BoxDecoration(
          border: Border(
            top: BorderSide(color: Colors.black, width: 8),
            left: BorderSide(color: Colors.black, width: 8),
          ),
        ),
        padding: EdgeInsets.all(15),
        height: 265,
        width: 265,
        margin: EdgeInsets.symmetric(
          vertical: size.height * 0.1,
          horizontal: size.width * 0.1,
        ),
        child: Placeholder(),
      ),

But it looks like this:

But it looks like this

How can I make the border shorter? Thanks

Upvotes: 1

Views: 1775

Answers (1)

MobIT
MobIT

Reputation: 980

You can use Stack. enter image description here

Stack(
  children: [
    Container(
      width: 48,
      height: 48,
      decoration: BoxDecoration(
        border: Border(
          top: BorderSide(color: Colors.black, width: 8),
          left: BorderSide(color: Colors.black, width: 8),
        ),
      ),
    ),
    Positioned(
      bottom: 0,
      right: 0,
      child: Container(
        width: 48,
        height: 48,
        decoration: BoxDecoration(
          border: Border(
            bottom: BorderSide(color: Colors.black, width: 8),
            right: BorderSide(color: Colors.black, width: 8),
          ),
        ),
      ),
    ),
    Container(
      padding: EdgeInsets.all(15),
      height: 265,
      width: 265,
      margin: EdgeInsets.symmetric(
        vertical: 16,
        horizontal: 16,
      ),
      decoration: BoxDecoration(
        color: Colors.red,
        boxShadow: [
          BoxShadow(
            color: Colors.black,
            offset: Offset(0, 1),
            blurRadius: 4,
            spreadRadius: 0,
          )
        ],
      ),
      child: Container(),
    ),
  ],
)

Upvotes: 4

Related Questions