How to make the border of a Container two-colored in flutter?

Question

Flutter uses the two-colored warning Containers when a Renderflex is overflowing. However is it possible to color the border of a Container in that way in my flutter app?

Container(
  decoration: BoxDecoration(
    border: Border.all(color: Colors.yellow .... Colors.black)   <--- somehow (?)
  ),
  child: Text('My border')
}

Answer 1

You have to define two Containers. First outer container with a gradient background and the second inner container with white background. and as a child of the inner container, you can place anything e.g. TextField, Text, another button, etc.

Decorations

    final kInnerDecoration = BoxDecoration(
      color: Colors.white,
      border: Border.all(color: Colors.white),
    );

    const kGradientBoxDecoration = BoxDecoration(
      gradient: LinearGradient(
        begin: Alignment.center,
        end: Alignment(-0.2, -0.5),
        stops: [0.0, 0.5, 0.5, 1],
        colors: [
          Colors.orangeAccent,
          Colors.orangeAccent,
          Colors.black,
          Colors.black,
        ],
        tileMode: TileMode.repeated,
      ),
    );

And container

Container(
              child: Padding(
                  padding: EdgeInsets.all(8.0),
                  child: Text("child of the container")),
              decoration: kInnerDecoration,
            )

Result:

Original answer is from -> Outlined transparent button with gradient border in flutter