Search code examples
flutterdartwidthgradient

Container gradient width in decoration flutter


I am having a Container that has a gradient BoxDecoration. What i would like to achieve is to reduce the width of the gradient just like in border so that it can a small thin line. Below is my Container code

Container(
              width: 220,
              height: 120,
              alignment: Alignment.center,
              decoration: BoxDecoration(
                  gradient: LinearGradient(
                      begin: Alignment.centerLeft,
                      end: Alignment.centerRight,
                      colors: [
                    Colors.purple.shade900,
                    Colors.purple.shade100,
                  ])),
              child: Container(
                width: 200,
                height: 100,
                color: Colors.white,
                alignment: Alignment.center,
                child: const Text('Linear Gradient'),
              ),
            )


Solution

  • Try below code hope its help to you, I think you increase width and height of second container. refer my same answer here

    Container(
        width: 220,
        height: 120,
        alignment: Alignment.center,
        decoration: BoxDecoration(
          gradient: LinearGradient(
            begin: Alignment.centerLeft,
            end: Alignment.centerRight,
            colors: [
              Colors.purple.shade900,
              Colors.purple.shade100,
            ],
          ),
        ),
        child: Container(
          width: 215,
          height: 115,
          color: Colors.white,
          alignment: Alignment.center,
          child: const Text('Linear Gradient'),
        ),
      ),
    

    Result screen -> enter image description here