Container gradient width in decoration flutter

Question

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'),
              ),
            )

Can you include an image that are you trying to solve? – Md. Yeasin Sheikh Apr 25 '22 at 11:46 — Md. Yeasin Sheikh, Apr 25 '22 at 11:46

score 2 · Accepted Answer · answered Apr 25 '22 at 11:03

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->

score 0 · Answer 2 · answered Apr 25 '22 at 10:59

Your gradient is your outer Container. If you want to reduce the width of the gradient, reduce the width of your container.

Container(
              width: 4,
              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'),
              ),
            )

If you want to wrap your gradient container in a bigger container then wrap it with bigger container

Container gradient width in decoration flutter

2 Answers2