How to add border to RoundedRectangle in flutter

Question

I am trying to achieve but I am unable to

Here is my code:

Center(
    child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            ClipPath(
                clipper: ShapeBorderClipper(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.all(Radius.circular(10))
                    )
                ),
                child: Container(
                    height: 70.0,
                    width: 70.0,
                    decoration: BoxDecoration(
                        color: Colors.grey,
                        border: Border(
                            bottom: BorderSide(
                                color: Colors.orange,
                                width: 7.0
                            )
                        )
                    )
                )
            )
        ],
    ),
)

Using this code, I am getting

As shown in above image I am not able to add the black border. Please help me guys, I am new to flutter.

Answer 1

Try this.

Center(
        child: Container(
          width: 200,
          height: 200,
          decoration: BoxDecoration(
            gradient: LinearGradient(
              colors: [Colors.grey, Colors.orange],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              stops: [0.86, 0.1]
            ),
            borderRadius: BorderRadius.circular(20),
            border: Border.all(
              color: Colors.black,
              width: 2,
            ),
          ),
        ),
      )

The output:

#UPDATE

If you want the border in just the top, left and right.

Try this.

ClipRRect(
            borderRadius: BorderRadius.circular(20),
            child: Container(
              width: 200,
              height: 200,
              decoration: BoxDecoration(
                color: Colors.grey,
                border: Border(
                  left: BorderSide(
                    color: Colors.black,
                    width: 2,
                  ),
                  right: BorderSide(
                    color: Colors.black,
                    width: 2,
                  ),
                  top: BorderSide(
                    color: Colors.black,
                    width: 2,
                  ),
                  bottom: BorderSide(
                    color: Colors.orange,
                    width: 25,
                  ),
                ),
              ),
            ),
          )

Answer 2

You can use this:

    body: Center(
      child: Stack(
        children: <Widget>[
          ClipRRect(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            child: Container(
              height: 70,
              width: 70,
              decoration: BoxDecoration(
                color: Colors.grey,
                border: Border(
                  top: BorderSide(color: Colors.black, width: 1.0),
                  left: BorderSide(color: Colors.black, width: 1.0),
                  right: BorderSide(color: Colors.black, width: 1.0),
                  bottom: BorderSide.none,
                ),
              ),
              child: Stack(
                children: <Widget>[
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      width: 70.0,
                      height: 7.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomRight: Radius.circular(10.0),
                          bottomLeft: Radius.circular(10.0),
                        ),
                        color: Colors.orange,
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    ),

You may freely decide which side of the border you want and the colour and width. You can also stack and realign the orange linings by adding more Align widgets in the Stack.

See the result of the code above