Home > Mobile >  How can i achieve this kind of border in Flutter
How can i achieve this kind of border in Flutter

Time:06-05

enter image description here

enter image description here

am trying to get this kind of half border with gradient color only top right and bottom left

CodePudding user response:

Refer below snippet

Container(
  height: 200,
  width: 200,
  // change padding value to modify width of border
  padding: EdgeInsets.all(2),
  // space between content and outer border
  child: Container(
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(10),
    ),
    padding: EdgeInsets.all(5),
    // main content
    child: Container(
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(color: Colors.black45),
        borderRadius: BorderRadius.circular(10),
      ),
      child: Center(
        child: Text("Content"),
      ),
    ),
  ),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(10),
    gradient: LinearGradient(
      colors: [Colors.blue, Colors.white, Colors.white, Colors.blue],
      begin: Alignment.topRight,
      end: Alignment.bottomLeft,
      stops: [0.1, 0.2, 0.8, 0.9],
    ),
  ),
)
  • Related